@charset "utf-8";
@import url(../css/reset.css);
@import url(../css/fonts.css);

html,body{min-height:100%; overscroll-behavior: none;}
body{font-size: 1.6rem; line-height: 2.6rem; word-break: keep-all;}
.hide{clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;position:absolute;white-space:nowrap;}
.semi-bold{font-weight: 600;}
.no-scroll{overflow: hidden;}
.scroll{overflow-y: auto;}
.none{display: none !important;}
.block{display: block !important;}
.point-b{color:#0958CE}
.ellipsis {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ellipsis-2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2;line-height:1.5em;max-height:calc(1.5em * 2)}
.ellipsis-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;line-clamp:3;line-height:1.5em;max-height:calc(1.5em * 3)}
.flex{display: -ms-flexbox; display: flex;}
sub{font-size:1rem; vertical-align: sub;}

/* text feild */
/* input:valid,textarea:valid,select:valid{border-color:#0958CE}
input:invalid,textarea:invalid,select:invalid{border-color:#F23F3F} */
input, textarea, select, .selectbox .selected{padding:0 2rem; border-radius: .8rem; border:.1rem solid #B7C0CF; font-size:1.6rem;}
input, select, .selectbox .selected{height: 5.2rem;}
input, textarea{min-width: 20rem;}
input::placeholder, textarea::placeholder{color: #878F9C;}
input:focus, textarea:focus, select:focus{border-color:#0958CE;}
input.filled, textarea.filled {border-color: #222;}
input:disabled, textarea:disabled, select:disabled{border-color:#B7C0CF; background-color: #F7F7F7; color:#878F9C; cursor: auto;}

/* input */
.form-input {display:inline-block; position: relative; width: 30rem; height: 5.2rem;}
.form-input .textfield {padding-right:4.4rem; width: 100%;}
.form-input [class*="btn-"]{background: url(../../common/img/system/icon_24x24.png) no-repeat 0 0/77.6rem auto;}
.form-input .btn-del{width: 2.4rem; height: 2.4rem; background-position: -39.6rem 0;  position: absolute; right: 2rem; top:0; bottom:0; margin:auto 0; display: none;z-index: 1;}
.form-input .textfield:focus + .btn-del{display: block;}

.form-input.search .textfield{padding-right:8rem;}
.form-input.search .btn-del{right: 5.2rem;}
.form-input.search .btn-search{width: 2.4rem; height: 2.4rem; background-position: -8.8rem 0; position: absolute; right: 2rem; top:0; bottom:0; margin:auto 0;}
.form-input.search input:disabled + .btn-del + .btn-search{opacity: .25;}

/* textarea */
.form-textarea{display:inline-flex; position: relative; min-width: 30rem;}
.form-textarea textarea {padding:1.3rem 2rem 3.5rem; min-height: 16rem;}
.form-textarea .byte-area {position: absolute; bottom:1.3rem; right:2rem; display: inline-block; color:#878F9C; font-size:1.4rem;}
.form-textarea textarea:focus + .byte-area .num,
.form-textarea textarea.filled + .byte-area .num {color:#0958CE}

/* selectbox */
.selectbox{position:relative; min-width: 16rem; display: inline-block; outline:none}
.selectbox .selected, .selectbox .options{font-size: 1.6rem; width: 100%; }
.selectbox .selected{text-align: left; display: -ms-flexbox; display: flex; align-items: center; justify-content: space-between; background-color:#fff;}
.selectbox .selected::after{content:""; display: inline-block; width: 2.4rem; min-width: 2.4rem; height: 2.4rem; margin-left:.4rem; background: url(../../common/img/system/icon_24x24.png) no-repeat -44rem 0 / 77.6rem auto; transform: rotate(0); transition: all .3s ease;}
.selectbox .options{position:absolute; margin-top:.4rem; padding:.8rem 0; background-color:#fff; max-width:100%; border:.1rem solid #B7C0CF; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10); border-radius: .8rem; display:none; z-index: 1;}
.selectbox .options li a{width: 100%; height: 5.2rem; padding:0 2rem; cursor:pointer; display: -ms-flexbox; display: flex; align-items: center;}
.selectbox .options li a:hover,
.selectbox .options li.active a{background-color:#FAFAFD; color: #0958CE; font-weight: 600;}

.selectbox.active .selected, 
.selectbox.active .options,
.selectbox:focus-within .selected,
.selectbox:focus-within .options,
.selectbox:hover>*{border-color:#0958CE;}

.selectbox .selected.active{border-color:#222}
.selectbox.active .selected::after {transform: rotate(180deg); margin-left:0; margin-right:.4rem;}
.selectbox.active .options {display:initial;}

.selectbox .selected:disabled, .selectbox select:disabled{border-color:#B7C0CF; background-color: #F7F7F7; color:#878F9C; cursor: auto;}
.selectbox .selected:disabled::after{background-position: -48.4rem 0;}
.selectbox:focus-within>.selected:disabled,
.selectbox:hover>select:disabled{border-color:#B7C0CF;}


/* selectbox type2 */
.selectbox select{background-color: #fff; width: 100%;}
.selectbox .icon-arr{display:block; width:2.4rem; height:2.4rem; background: url(../../common/img/system/btn_selectbox.png) no-repeat 0 0 / 2.4rem auto; position: absolute; top:1.4rem; right:2rem; transition: all .3s ease-in;}
.selectbox select:focus + .icon-arr{transform: rotate(180deg);}
.selectbox select:disabled + .icon-arr{background-image:url(../../common/img/system/btn_selectbox_g.png);}
.selectbox select option{padding:10px; background-color: #fff;}
.selectbox select option:hover,
.selectbox select option:checked{background-color:#FAFAFD; color: #0958CE; font-weight: 600;}
/* button */
.btn-area.full [class*="btn-"]{width: 100%;}
.btn-area.full [class*="btn-"] + [class*="btn-"] {margin-top:.8rem;}

button:disabled {cursor: auto;}
button[class*="btn-"], a[class*="btn-"]{border-radius: 10rem; display:inline-flex; align-items: center; justify-content: center; padding:1rem 0;}
button.btn-large, a.btn-large,
button.btn-medium, a.btn-medium {height:5.2rem; font-size: 1.6rem; font-weight: 600;}
button.btn-large{min-width:20rem}
button.btn-medium{min-width:13.7rem}
button.btn-small, a.btn-small{min-width:11.6rem; height:4rem; font-size:1.4rem;}
button.btn-micro, a.btn-micro{min-width:8.5rem; height:3.2rem; font-size:1.4rem;}

[class*="btn-"].white{background-color: #fff; border:.1rem solid #222;}
[class*="btn-"]:active.white{background-color: #0958CE; border:.1rem solid #0958CE; color:#fff;}
[class*="btn-"].blue{background-color: #0958CE; color:#fff}
[class*="btn-"]:active.blue{background-color: #052E6C;}
[class*="btn-"].trans{background-color: transparent;  border:.1rem solid #fff; color:#fff}
[class*="btn-"]:active.trans{background-color: #fff;  border:.1rem solid #fff; color:#000}

[class*="btn-"][class*="icon-"]::after{content: ""; display: block; width: 2.4rem; height: 2.4rem; margin-left:.8rem; background: url(../../common/img/system/icon_24x24.png) no-repeat 0 -4.6rem/77.6rem auto;}
.btn-micro[class*="icon-"]::after{width: 1.6rem; height: 1.6rem; margin-left:.8rem; background: url(../../common/img/system/icon_16x16.png) no-repeat 0 0/11.4rem auto;}
[class*="btn-"].white.icon-next:active::after{background-position: -8.8rem -4.6rem;}
[class*="btn-"].trans.icon-next::after{background-position: -8.8rem -4.6rem;}
[class*="btn-"].trans.icon-next:active::after{background-position: 0 -4.6rem;}
.btn-micro.icon-download::after{background-position: -3.6rem 0;}
.btn-small.icon-download::after{background-position: -35.2rem -4.6rem;}
.btn-small.icon-view::after{background-position: -70.4rem -4.6rem;}

.btn-trans.icon-veiw-details{border-radius: 0; color:#000; font-size:1.6rem; font-weight:600;}
.btn-trans.icon-veiw-details::after{background-position: -57.2rem -4.6rem; margin-left:1.6rem;}

/* checkbox radiobox */
.form-select{position: relative;  display: inline-flex; overflow: hidden;}
.form-select input{position:absolute;opacity:0;cursor:pointer;height:0;width:0;}
.form-select .label {display:inline-flex; align-items: center; cursor: pointer;}
.form-select .label::before{content: ""; display: inline-block; width: 2.4rem; min-width: 2.4rem; height: 2.4rem; background: url(../../common/img/system/checkbox.png) no-repeat -2rem -2rem / 23.2rem auto;}
.form-select .label .txt{margin-left:.8rem; display: inline-block;}
.form-select input:disabled + .label {cursor: default;}

.form-select.checkbox input:checked + .label::before{background-position: -10.4rem -2rem;}
.form-select.checkbox input:disabled + .label::before{background-position: -18.8rem -2rem;}

.form-select.radiobox .label::before{content: ""; display: inline-block; width: 2.4rem; height: 2.4rem; background: url(../../common/img/system/radiobox.png) no-repeat -2rem -2rem / 23.2rem auto;}
.form-select.radiobox input:checked + .label::before{background-position: -10.4rem -2rem;}
.form-select.radiobox input:disabled + .label::before{background-position: -18.8rem -2rem;}

/* title */
.title-cont{font-size:3.2rem; font-weight:700; line-height:3.8rem; margin: 4rem 0 2.4rem}
.summary-cont{font-size: 2.2rem; font-weight: 600; line-height: 3rem;}
.summary-cont .br-txt{display: block;}
.summary-desc{margin-top:.8rem; line-height: 2.5rem;}
.title-section{font-size:2.2rem; font-weight:600; line-height: 3.3rem; margin:3.2rem 0 1.6rem}
.title-section:first-child{margin-top:4rem}
.title-section.line{border-bottom:.2rem solid #222; padding-bottom:.8rem}
/* .title-section + .txt-section{margin-top:-1.2rem} */

.title-box{font-size:2.2rem; font-weight:600; line-height: 3rem; margin-top:3.2rem;}
.title-l{font-size:2.8rem; font-weight: 600; line-height: 3.9rem;}
.title-m{font-size:1.8rem; font-weight: 600; line-height: 2.8rem;}

/* pagination */
.pagination.pc{display: none;}
.pagination.mo,.pagination .group {display: -ms-flexbox; display: flex; align-items: center;}
.pagination {margin-top:4.8rem; justify-content: center;}
.pagination a{width: 3.2rem; height: 3.2rem; flex-basis: 3.2rem; min-width:3.2rem; text-align: center; line-height: 3.2rem; font-size: 1.6rem;}
.pagination .group a + a {margin-left:.4rem}
.pagination .group a.active {border-radius: 50%; background-color: #F0F3FA; color:#0958CE; font-weight: 600;}
.pagination [class*="page-"] {background: url(../../common/img/system/icon_32x32.png) no-repeat 0 0 / 60.4rem auto;}
.pagination .page-first{background-position: -5.2rem 0;}
.pagination .page-prev{background-position: -14.8rem 0; margin-right:1.6rem}
.pagination .page-first.active {background-position: 0 0;}
.pagination .page-prev.active {background-position: -9.6rem 0;}

.pagination .page-next {background-position: -26rem 0; margin-left:1.6rem}
.pagination .page-last {background-position: -36.4rem 0;}
.pagination .page-next.active {background-position: -20.8rem 0;}
.pagination .page-last.active {background-position: -31.2rem 0;}

.pagination.simple{display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; margin-top:0}
.pagination.simple .group span{color:#464A4E}
.pagination.simple .group span.active{color:#0958CE; font-weight:600;}
.pagination.simple [class*="page-"]{width: 4rem; flex-basis: 4rem; height:4rem; border-radius:50%; border:.1rem solid #B7C0CF; background: url(../../common/img/system/icon_24x24.png) no-repeat 0 0/77.6rem auto;}
.pagination.simple .page-prev {background-position: -16.9rem -3.9rem; margin-right:2.4rem;}
.pagination.simple .page-next {background-position: -3.7rem -3.9rem; margin-left:2.4rem}
.pagination.simple .page-prev.active {background-position: -12.5rem -3.9rem;}
.pagination.simple .page-next.active {background-position:  .7rem -3.9rem;}

/* accordion */
.accordion{padding:1.6rem 1.2rem 2rem; border-top:.1rem solid #B7C0CF}
.accordion .summary-area {display: -ms-flexbox; display: flex;}
.accordion .summary-area .btn-summary{text-align: left; justify-content: space-between; padding:0; line-height: 2.5rem; flex:1; font-size:1.6rem}
.accordion .summary-area .btn-summary::after{content:""; display: inline-block; width: 2.4rem; min-width: 2.4rem; height: 2.4rem; margin-left:.7rem; margin-bottom:auto; background: url(../../common/img/system/icon_24x24.png) no-repeat -44rem 0 / 77.6rem auto; transform: rotate(0); transition: all .3s ease;}
.accordion .content-area{display: none; height: 0; overflow: hidden; animation: fadeIn .3s ease-in-out; -webkit-animation: fadeIn .3s ease-in-out; font-size:1.6rem; color:#464A4E; }
.accordion.active .summary-area .btn-summary{font-weight: 600;}
.accordion.active .summary-area .btn-summary::after{transform: rotate(180deg); margin-left:0; margin-right:.7rem}
.accordion.active  .content-area{display: block; height: auto;}

/* tabs */
.tabs-area .tab-buttons{display: flex; display: -ms-flexbox; align-items: center; overflow-x: auto; margin:0 -2rem 4rem; padding:0 2rem;}
.tabs-area .tab-buttons .btn{border-radius:3rem; padding:.8rem 3.2rem; background-color:#D5DBE6; color:#fff; font-size:1.8rem; font-weight:600; flex:none}
.tabs-area .tab-buttons .btn + .btn{margin-left:1.2rem}
.tabs-area .tab-contents .tab-content{display: none;}
.tabs-area .tab-buttons .btn.active{background-color: #222;}
.tabs-area .tab-contents .tab-content.active{display: block;}

/* direct-link */
.direct-link > a{display:block;position:absolute;top:-4rem;left:0;z-index:15;width:100%;height:4rem;background-color:#0958CE;color:#fff;line-height:4rem;text-align:center;transition:top 0.3s}
.direct-link > a:focus{top:0}

/* header */
.wrap-header .gnb{display: none;}
.wrap-header .util-area .selectbox{display: none;}

.wrapper.main .wrap-header {background-color: transparent; position: fixed; border-color:transparent;}
.wrapper.main .wrap-header.white{background-color: #fff; border-color: #E7ECF3;}
.wrapper.main .wrap-header .gnb .depth-1>a{color:#fff}
.wrapper.main .wrap-header.white .gnb .depth-1>a:hover{color:#0958CE}
.wrapper.main .wrap-header.white .gnb .depth-1>a{color:#000}
.wrapper.main .wrap-header>.inner .logo img{transform: translateY(-3.9rem);}
.wrapper.main .wrap-header.white>.inner .logo img{transform: translateY(0);}

.wrap-header{width: 100%; height: 6rem; background-color: #fff; position: sticky  ; top:0; left: 0; z-index: 10; border-bottom:.1rem solid #E7ECF3;}
.wrap-header>.inner{width: 100%; height: 6rem; padding:0 2rem; display: -ms-flexbox; display: flex; align-items: center; justify-content: space-between;}
.wrap-header .logo,.wrap-header .logo>a{display: inline-block; width: 6.2rem; min-width: 6.2rem; height: 2.4rem; overflow: hidden;}
.wrap-header .util-area{display:flex; align-items: center;}
.wrap-header .util-area>[class*="icon-"] {margin-left:2.4rem;}
.wrap-header [class*="icon-"] {height: 2.4rem; padding: 0; border:0; background: url(.././img/system/icon_24x24.png) no-repeat 0 0/ 77.6rem auto;}
.wrap-header .util-area .icon-search,
.wrapper.main .wrap-header.white .util-area .icon-search{width: 2.4rem; background-position: -8.8rem 0;}
.wrap-header .util-area .icon-all-menu,
.wrapper.main .wrap-header.white .util-area .icon-all-menu{width: 2.4rem; background-position: -13.2rem 0;}

.wrapper.main .wrap-header .util-area .icon-search{background-position-x:-26.4rem;}
.wrapper.main .wrap-header .util-area .icon-all-menu{background-position-x:-30.8rem;}

.wrap-header .search-area{position: fixed; top:-100%; left: 0; width: 100%; height: 17.2rem; background-color: #fff; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.10); padding:1.8rem 2rem 4rem;}
.wrap-header .search-area .inner{position: relative;}
.wrap-header .search-area .form-input.search {width:100%; margin:8rem auto 0}
.wrap-header .search-area.open{top:0; animation: fadeIn .3s ease; -webkit-animation: fadeIn .3s ease;}
.wrap-header .search-area .logo{position:absolute; top:0; left:0}
.wrap-header .search-area .icon-close{width: 2.4rem; background-position:-52.8rem -4.6rem; position: absolute; top:0; right: 0;}

/* footer */
.wrap-footer {background-color: #222; color:#B7C0CF;}
.wrap-footer .br-mo{display: block;}
.wrap-footer .footer{padding:2.4rem 2rem 4rem; position: relative;}
.wrap-footer .util-link{align-items: center; max-width: 192rem; margin:0 auto;}
.wrap-footer .util-link>li{margin-top:1.2rem;}
.wrap-footer .util-link>li:first-child{margin-top:0;}
.wrap-footer .util-link>li:first-child>a{color:#fff; font-weight:600;}
.wrap-footer .util-link a{ font-size:1.6rem;}
.wrap-footer .address::before{content:'';width: 100%; height: .1rem; background-color: #B7C0CF; position: absolute; top:0; left: 0;}
.wrap-footer .address {border-top:.1rem solid #464A4E; margin-top:2.4rem; padding-top:2.4rem;}
.wrap-footer .address li,.wrap-footer .copyright{font-size: 1.4rem;}
.wrap-footer .address>ul,.wrap-footer .address>ul>li{display: -ms-flexbox; display: flex; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.wrap-footer .address>ul>li{line-height: 2.2rem;}
.wrap-footer .address>ul>li::after{content:''; display:inline-block; width: .1rem; height: 1.2rem; margin:0 1.2rem; background-color: #464A4E;}
.wrap-footer .address>ul>li:last-child:after{display: none;}
.wrap-footer .copyright{line-height:2.2rem; margin-top:1.2rem;}
.wrap-footer .btn-top-cont {width: 4.8rem; height: 4.8rem; border-radius: 100rem; background: url(../../common/img/system/icon_top_cont.png) no-repeat 50% 50%/1.6rem auto; box-shadow: 0 .4rem .4rem rgba(0,0,0,.25); position: fixed; right:2rem; bottom:-5rem; opacity: 0; background-color: rgba(255,255,255,.6);}
.wrap-footer .btn-top-cont.down{opacity: 1; bottom:2rem; z-index:20}
.wrap-footer .btn-top-cont.down.absolute{position: absolute; bottom:auto; top:-6.8rem}

/* hamburger menu */
.wrap-all-menu{position: fixed; right: -120%; top:0; width: 100%; height: 100%; overflow-y: auto; z-index: 20; background-color:#464A4E; transition: all .4s ease-in-out;}
.wrap-all-menu.block{right: 0;}
.wrap-all-menu .util-area {display: -ms-flexbox; display: flex; align-items: center; justify-content: space-between; padding:1.8rem 2rem 1.6rem; position: relative;}
.wrap-all-menu .util-area .logo,
.wrap-all-menu .util-area .logo a{display: block; width: 6.2rem; height: 2.5rem; overflow: hidden;}
.wrap-all-menu .util-area .logo img{transform: translateY(-3.9rem);}
.wrap-all-menu .util-area .icon-close{width: 2.4rem; height: 2.4rem; position: absolute; top:1.8rem; right:2rem; background: url(.././img/system/icon_24x24.png) no-repeat -48.4rem -4.6rem/ 77.6rem auto;}

.wrap-all-menu .util-area .link-language {margin-right:2.4rem}
.wrap-all-menu .util-area .link-language a{text-transform:uppercase; font-size:1.6rem; color: #fff; margin-right:2.4rem}
.wrap-all-menu .util-area .link-language a:hover,
.wrap-all-menu .util-area .link-language a:active{font-weight: 600; text-decoration: underline; line-height: 2.6rem;}

.wrap-all-menu .all-menu-area{margin-top:2.4rem;}
.wrap-all-menu .all-menu-area .title-depth{display: none;}
.wrap-all-menu .all-menu-area .depth-area{background-color: #fff; padding:0 2rem}
.wrap-all-menu .all-menu-area .depth-area,.wrap-all-menu .all-menu-area .depth-3{height: 0; overflow: hidden; animation: fadeIn .3s ease-in-out; -webkit-animation: fadeIn .3s ease-in-out;}
.wrap-all-menu .all-menu-area .depth-3{padding:0}

.all-menu-area .depth-1>a,
.all-menu-area .depth-2>li>a{display:flex; align-items: center; justify-content: space-between; font-weight: 600; height: 6.4rem;}
.all-menu-area .depth-1>a.sub::after,
.all-menu-area .depth-2>li>a.sub::after{content:""; display: block; width: 2.4rem; height: 2.4rem; background: url(.././img/system/icon_24x24.png) no-repeat -52.8rem 0/ 77.6rem auto; transition: all .3s ease-in-out;}
.all-menu-area .depth-2>li>a.sub::after{background-position:-44rem 0;}

.all-menu-area .depth-1>a{color:#fff; font-size: 2.2rem; line-height: 3rem; padding:0 2rem;}
.all-menu-area .depth-2>li>a{font-size:1.8rem; border-bottom:.1rem solid #D5DBE6}

.all-menu-area .depth-3{padding:2rem 0}
.all-menu-area .depth-3>li{min-height:4.8rem; display: -ms-flexbox; display: flex; align-items: center; box-sizing: content-box; font-size:1.6rem}
.all-menu-area .depth-3>li:first-child{padding-top: 2rem;}
.all-menu-area .depth-3>li:last-child{padding-bottom: 2rem; border-bottom:.1rem solid #D5DBE6;}
.all-menu-area .depth-3>li::before{content:'-'; display:inline-block; margin-right:.4rem}

/* active, hover */
.all-menu-area .depth-2>li>a:not(.sub):hover,
.all-menu-area .depth-3>li:hover{color:#0958CE;}
.all-menu-area .depth-3>li:hover>a{text-decoration: underline;}

.all-menu-area .depth-1>a.active.sub::after,
.all-menu-area .depth-2>li>a.active.sub::after{transform: rotate(180deg);}
.wrap-all-menu .depth-1>a.active.sub + .depth-area,
.wrap-all-menu .depth-2>li>a.active.sub + .depth-3{height: auto; overflow: visible;}

/* container */
.wrap-breadcrumb{display: none;}
.wrapper{min-height: 100%;}
.content{padding:0 2rem 12rem}
.content.main{padding:0;}

/* keyframes */
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* tablet & pc */
@media (min-width: 712px) {
  body{font-size:1.8rem; line-height: 1.6;}
  
  /* title */
  .summary-cont{font-size: 2.8rem; line-height: 3.9rem;}
  .summary-cont .br-txt{display:initial;}
  .summary-desc{line-height: 2.8rem;}
  .title-section{font-size:2.8rem; font-weight:600; line-height: 3.9rem; margin-bottom:2rem}
  .title-box{font-size:2.4rem; line-height: 3.3rem; margin-top:4rem;}
  .title-l{font-size:3.2rem; font-weight: 600; line-height: 4.4rem;}
  .title-m{font-size:2rem; font-weight: 600; line-height: 3.2rem;}
  
  /* header */
  .wrap-header, .wrap-header>.inner,.wrapper.main .wrap-header, .wrapper.main .wrap-header.white{height: 8rem;}
  .wrap-header .logo, .wrap-header .logo>a{display: inline-block; width: 8.2rem; flex-basis: 8.2rem; height: 3.2rem; overflow: hidden;}
  .wrapper.main .wrap-header>.inner .logo img{transform: translateY(-5.2rem);}
  .wrap-header .search-area{height: 19.2rem;}
  .wrap-header .search-area .form-input.search{margin-top:7.6rem}
  
  /* footer */
  .wrap-footer .br-mo{display: initial;}
  .wrap-footer .footer{padding:2rem 4rem 4.8rem}
  .wrap-footer .util-link{display: -ms-flexbox; display: flex; align-items: center; flex-wrap: wrap; -ms-flex-wrap: wrap;}
  .wrap-footer .util-link>li{margin:0 4rem 0 0;}
  .wrap-footer .util-link>li:last-child{margin-right:0;}
  .wrap-footer .address{border-top:0; position: relative; padding-top:3.2rem; margin-top:2rem;}
  .wrap-footer .address::before{content:'';width: calc(100% + 8rem); height: .1rem; background-color: #464A4E; position: absolute; top:0; left: -4rem;}
  .wrap-footer .copyright{margin-top:.4rem; line-height: 2.2rem;}
}

/* tablet */
@media (min-width: 712px) and (max-width: 1199px) {
  /* title */
  .title-cont{font-size:4.8rem;line-height:5.7rem; margin: 6rem 0 3.2rem}
  .title-section,.title-section:first-child{margin-top:4.8rem}

  /* tabs */
  .tabs-area .tab-buttons{margin-bottom:4.8rem;}

  /* header */
  .wrap-header>.inner{padding:0 4rem;}
  .wrap-header .search-area{padding:2.4rem 4rem 4rem}
  
  /* hamburger menu */
  .wrap-all-menu .util-area .logo, .wrap-all-menu .util-area .logo a{width: 8.2rem; height: 3.2rem;}
  .wrap-all-menu .util-area .logo img{transform: translateY(-5.2rem);}
  .wrap-all-menu .util-area{padding:2.4rem 4rem}
  .wrap-all-menu .util-area .icon-close{top:2.8rem; right:4rem}
  .wrap-all-menu .all-menu-area .depth-area{padding:0 4rem}
  .all-menu-area .depth-1>a, .all-menu-area .depth-2>li>a {height:6.8rem}
  .all-menu-area .depth-1>a{padding:0 4rem; font-size:2.4rem}
  .all-menu-area .depth-3{padding: 2rem 0;}

  /* content */
  .content{padding:0 4rem 12rem}
}

/* pc */
@media (min-width: 1200px) {
  /* title */
  .title-cont{font-size:6rem;line-height:7.2rem; margin: 8rem 0 4rem}
  .title-section,.title-section:first-child{margin-top:6rem}

  /* button */
  [class*="btn-"]:hover.white{background-color: #0958CE; border:.1rem solid #0958CE; color:#fff;}
  [class*="btn-"]:hover.blue{background-color: #052E6C;}
  [class*="btn-"]:hover.trans{background-color: #fff;  border:.1rem solid #fff; color:#000}
  [class*="btn-"].white.icon-next:hover::after{background-position: -8.8rem -4.6rem;}
  [class*="btn-"].trans.icon-next:hover::after{background-position: 0 -4.6rem;}
  
  .btn-trans.icon-veiw-details:hover, .btn-trans.icon-veiw-details:active{color:#fff;}
  .btn-trans.icon-veiw-details:hover::after, .btn-trans.icon-veiw-details:active::after{background-position: -61.6rem -4.6rem;}
  .btn-small.icon-download:hover::after{background-position: -39.6rem -4.6rem;}
  .btn-small.icon-view:hover::after{background-position: -74.8rem -4.6rem;}
  
  /* pagination */
  .pagination.mo{display: none;}
  .pagination.pc{display: -ms-flexbox; display: flex;}
  .pagination{margin-top:6rem}
  .pagination .group.mo{display: inherit;}
  .pagination a{width: 4rem; height: 4rem; line-height: 4rem; flex-basis: 4rem;}
  .pagination .group a + a {margin-left:.8rem}

  .pagination [class*="page-"] {background: url(../../common/img/system/icon_40x40.png) no-repeat 0 0 / 46rem auto;}
  .pagination .page-first{background-position: -6rem 0;}
  .pagination .page-prev {background-position: -18rem 0; margin-right:1rem}
  .pagination .page-first.active {background-position: 0 0;}
  .pagination .page-prev.active {background-position: -12rem 0;}
  .pagination .page-next {background-position: -30rem 0; margin-left:1rem;}
  .pagination .page-last {background-position: -42rem 0;}
  .pagination .page-next.active {background-position: -24rem 0;}
  .pagination .page-last.active {background-position: -36rem 0;}

  /* tabs */
  .tabs-area .tab-buttons{margin-bottom:6rem}
  .tabs-area .tab-buttons .btn{padding:1.4rem 4rem}
  .tabs-area .tab-buttons .btn + .btn{margin-left:2rem}

  /* header search */
  .wrap-header>.inner{max-width: 192rem; margin:0 auto; padding:0 8rem;}
  .wrap-header .search-area{padding:0; padding:2.4rem 0 4rem;}
  .wrap-header .search-area .inner {text-align: center; max-width: 192rem; margin:0 auto;}
  .wrap-header .search-area .form-input.search {width:80rem;}
  .wrap-header .search-area .logo{left:8rem}
  .wrap-header .search-area .icon-close{right:8rem;}

  /* language */
  .wrap-header .util-area .icon-language,
  .wrapper.main .wrap-header.white .util-area .icon-language {background-position: -4.4rem 0; text-indent: -10rem; overflow: hidden;}
  .wrap-header .util-area .icon-language::after,
  .wrapper.main .wrap-header.white .util-area .icon-language::after{content:"";width:.8rem; min-width:.8rem; height:.6rem;margin-left:auto; background: url(.././img/system/icon_arr_down.png) no-repeat 0 0 / 100% auto;}
  .wrapper.main .wrap-header .util-area .icon-language{background-position-x:-22rem;}
  .wrapper.main .wrap-header .util-area .icon-language::after{background-image: url(../../common/img/content/main/icon_arr_down.png);}
  
  .wrap-header .util-area .selectbox{min-width: 4.2rem; width: 4.2rem;display: inline-block;}
  .wrap-header .util-area .selectbox .options{width: 6.3rem; max-width: none; margin-top:1.2rem; left:auto; right:.1rem; padding:1.6rem 0;}
  .wrap-header .util-area .selectbox .options li a{height: auto;}
  .wrap-header .util-area .selectbox .options li+li {margin-top:1.6rem;}
  .wrap-header .util-area .selectbox .options li:hover{background-color:transparent; text-decoration: underline;}
  .wrap-header .util-area .selectbox:focus-within>.selected, 
  .wrap-header .util-area .selectbox:focus-within>.options {border-color:#222;}

  /* accordion */
  .accordion{padding:2rem 3.2rem; border-top:.1rem solid #B7C0CF}
  .accordion .summary-area .icon-q{margin-right:1.6rem}
  .accordion .summary-area .btn-summary{font-size:1.8rem}
  .accordion.active{padding:3.2rem;}

  /* gnb */
   .wrap-header .gnb {display: -ms-flexbox; display: flex; justify-content: center;}
  .gnb .depth-1 {margin-left:8rem;}
  .gnb .depth-1:first-child {margin-left:0;}
  .gnb .depth-1 a{display: inline-block;}
  .gnb .depth-1>a{font-weight: 600;}
  .gnb .depth-2{display: none; width:122rem; -ms-flex-wrap: wrap; flex-wrap: wrap; margin:4.8rem 6rem;}
  .gnb .depth-1 .depth-area{position: fixed; top:8rem; left:0; width: 100%; background-color: #fff; box-shadow: 0 1rem 1rem 0 rgba(0,0,0,0.10);}
  .gnb .depth-1 .depth-area>.box{display: none; max-width: 192rem; margin: 0 auto;}
  .gnb .depth-1 .depth-area .title-depth{min-width: 32rem; text-align: right; padding:4rem 6rem 0 0; font-size:3.2rem; font-weight:600; color: #fff; background: linear-gradient(153deg, #0E44C5 2.34%, #76ABF9 99.03%), linear-gradient(153deg, #0E44C5 2.34%, #2A66F6 99.03%);}
  
  .gnb .depth-1 .depth-2{display: -ms-flexbox; display: flex;}
  .gnb .depth-1 .depth-2>li{width:calc(25% - 2rem); margin-left:2rem;}
  .gnb .depth-1 .depth-2>li:nth-child(1),
  .gnb .depth-1 .depth-2>li:nth-child(5),
  .gnb .depth-1 .depth-2>li:nth-child(9){margin-left: 0;}
  .gnb .depth-1 .depth-2>li:nth-child(n + 5):nth-child(-n + 8) {margin-top:3.2rem;}
  .gnb .depth-1 .depth-2>li:nth-child(n + 8):nth-child(-n + 12) {margin-top:3.2rem;}
  .gnb .depth-1 .depth-2>li>a{font-weight: 600; line-height: 2.8rem;}

  .gnb .depth-1 .depth-3{margin-top:1.2rem;}
  .gnb .depth-1 .depth-3 a{font-size:1.6rem; color: #464A4E;}
  
  .gnb .depth-1.active>a{color: #0958CE;}
  .gnb .depth-1.active .depth-area>.box{display: -ms-flexbox; display: flex;}
  .gnb .depth-1 .depth-2>li>a:hover{color: #0958CE;}
  .gnb .depth-1 .depth-3 a:hover{color: #0958CE; text-decoration: underline;}

  /* footer */
  .wrap-footer .footer{max-width:192rem; max-height: 19.5rem; margin:0 auto; padding:2rem 0 4.8rem;}
  .wrap-footer .util-link,
  .wrap-footer .copyright{padding:0 32rem;}
  .wrap-footer .address {padding:3.2rem 32rem 0}
  .wrap-footer .address::before{width: 100%; left: 0;}

  /* hamburger menu */
  .wrap-all-menu{background-color:#fff; right: 0; display: none;}
  .wrap-all-menu .util-area {padding:2.4rem 8rem; max-width: 192rem; margin:0 auto;}
  .wrap-all-menu .util-area .logo, .wrap-all-menu .util-area .logo a{width: 8.2rem; height: 3.2rem;}
  .wrap-all-menu .util-area .logo img{transform: translateY(0);}
  .wrap-all-menu .util-area .icon-close{background-position:-52.8rem -4.6rem; top:2.8rem; right:8rem;}
  .wrap-all-menu .util-area .link-language{display: none;}
  
  .wrap-all-menu .all-menu-area{max-width:128rem; margin:4rem auto 12rem;}
  .all-menu-area .depth-1,.all-menu-area .depth-2{display: -ms-flexbox; display: flex;}
  .all-menu-area .depth-1>a, .all-menu-area .depth-2>li>a{border:0; height: auto; display: inherit;}
  .all-menu-area .depth-1>a.sub::after, .all-menu-area .depth-2>li>a.sub::after{display: none;}
  .all-menu-area .depth-1 + .depth-1{border-top:.1rem solid #D5DBE6; margin-top:4rem; padding-top:4rem;}
  .all-menu-area .depth-1>a{color:#000; font-size:2.8rem; line-height: 3.9rem; width: 17.8rem; min-width: 17.8rem; align-items: flex-start; padding:0; margin-right:3.2rem} 
  .all-menu-area .depth-area{flex: 1;}

  .all-menu-area .depth-2{-ms-flex-wrap: wrap; flex-wrap: wrap;}
  .all-menu-area .depth-2>li{width:calc(25% - 2rem); margin-left:2rem;}
  .all-menu-area .depth-2>li:nth-child(1),
  .all-menu-area .depth-2>li:nth-child(5),
  .all-menu-area .depth-2>li:nth-child(9){margin-left: 0;}
  .all-menu-area .depth-2>li:nth-child(n + 5):nth-child(-n + 8) {margin-top:3.2rem;}
  .all-menu-area .depth-2>li:nth-child(n + 8):nth-child(-n + 12) {margin-top:3.2rem;}
  .all-menu-area .depth-2>li>a{font-weight: 600; line-height: 2.8rem;}

  .all-menu-area .depth-3{margin-top:1.2rem;}
  .all-menu-area .depth-3 a{font-size:1.6rem; color: #464A4E;}
  .all-menu-area .depth-3>li{min-height:auto; line-height:2.6rem; margin-top:.8rem;}
  .all-menu-area .depth-3>li:first-child{margin-top:0;}
  .all-menu-area .depth-3>li:first-child,.all-menu-area .depth-3>li:last-child{padding:0; border-bottom:0;}
  .wrap-all-menu .all-menu-area .depth-area, .wrap-all-menu .all-menu-area .depth-3{height: auto; overflow: visible; padding:0;}

  /* breadcrumb */
  .wrap-breadcrumb{display: block; border-bottom:.1rem solid #E7ECF3; position: sticky; top:8rem; left:0; background-color: #fff; z-index: 5;}
  .wrap-breadcrumb .inner{max-width: 128rem; margin:0 auto; display: -ms-flexbox; display: flex; align-items: center; }
  .wrap-breadcrumb .icon-home{width: 6rem; height: 6rem; padding:1.8rem; border-left: .1rem solid #E7ECF3; border-right: .1rem solid #E7ECF3;}
  .wrap-breadcrumb .icon-home::before{content:""; display: inline-block; width: 2.4rem; height: 2.4rem; background: url(../img/system/icon_24x24.png) no-repeat 0 0/77.6rem auto;;}
  .wrap-breadcrumb .selectbox-area{display: -ms-flexbox; display: flex;}
  .wrap-breadcrumb .selectbox{min-width: 24.2rem; width:28rem;}
  .wrap-breadcrumb .selectbox .selected{border:0; border-radius: 0; height: 6rem; border-right: .1rem solid #E7ECF3;}
  .wrap-breadcrumb .selectbox .options {border-color:#E7ECF3; border-radius: 0; margin-top:0; padding:0; box-shadow: 0 .8rem .8rem 0 rgba(0,0,0,.08);}
  .wrap-breadcrumb .selectbox .options li a{height: 4.8rem;}
  .wrap-breadcrumb .selectbox .options li a:hover{background-color:#F0F6FE; color: #0958CE; font-weight: 400;}
  .wrap-breadcrumb .selectbox .selected.sub-none{pointer-events: none;}
  .wrap-breadcrumb .selectbox .selected.sub-none::after{display: none;}

  /* content */
  .content{max-width: 128rem; margin:0 auto; padding:0 0 20rem}
  .content.main{max-width:none; margin:0 auto; padding:0}
}

/* pc */
@media (min-width: 1200px) and (max-width: 1350px) {
  /* gnb */
  .gnb .depth-1{margin-left:5.5rem}
}