@charset "UTF8"; 
header{position: fixed; top: 0; left: 0; width: 100%; z-index: 10; transition: 0.2s;}
header.active{background: #fff; transition: 0.2s;}
header.hide { top: -100px; transition: top 0.5s; } 
.header-wrap {margin: 0 auto; padding:2rem 8rem; display: flex; align-items: center; position: relative;}
.header-wrap .logo-img{display:block; width:111px; height:30px;position: relative;}
.header-wrap .logo-img img{width: 100%; display: none; position: absolute; top: 0; left: 0;}
.header-wrap .logo-img img.logo-white{display: block;}
.header-wrap .pc-header{margin:0 auto; display: flex; justify-content: space-between; width:100%; align-items: center;}
.util-menu > ul{display: flex; align-items: center; position: relative;}
.util-menu > ul > li{margin-right: 2rem;;}
.util-menu > ul > li:last-child{margin-right: 0;}
.util-menu > ul > li.btn-search{margin-right:3rem}
.util-menu > ul > li.btn-gts {margin-right:1rem; background:#1e31db; border-radius:9999px; height:45px; display:flex; align-items:center; overflow:hidden;}
.util-menu > ul > li.btn-gts a{ color:#fff !important; text-align:center; box-sizing:border-box; padding:10px; display:flex !important; align-items:center; transition:all .3s;}
.util-menu > ul > li.btn-gts a p{ margin:0; opacity:1; width:24px; overflow:hidden; transition: opacity .1s ease,   width .2s ease;}
.util-menu > ul > li.btn-gts a div{font-weight:400;font-size:1.5rem; max-width:0; opacity:0; overflow:hidden; white-space:nowrap;  transition:max-width .35s ease, opacity .2s ease;}

.util-menu > ul > li.btn-gts.active a div{ max-width:200px; opacity:1; padding:0 8px}

.util-menu > ul > li.btn-gts.active a p{ opacity:0; width:0;}

header .util-menu > ul > li.total-menu .total-ico-on{display: none;}
header.active .util-menu > ul > li.total-menu .total-ico-on{display: block;}
header.active .util-menu > ul > li.total-menu .total-ico{display: none;}
header.sub .util-menu > ul > li.total-menu .total-ico-on{display: block;}
.util-menu > ul > li.total-menu{margin-right: 0;}
.util-menu > ul > li a, .util-menu ul > li button{color:#fff; font-size: 1.5rem; display: block;}
.util-menu > ul > li button i{width:10px; height:12px; display:inline-block; vertical-align: middle; background:url('/ux/common/images/ico/ico_util_arrow.png')no-repeat center 1px; background-size:10px 6px;}
.util-menu > ul > li.language{position: relative;}
.util-menu > ul > li.language .language-select{position: absolute; top:30px; left:-7px; width: 100%; text-align: center; display: none; background: #fff;  border:1px solid #2b53ff; border-radius: 2px; padding:5px;}
.util-menu > ul > li.language .language-select li a{color:#000;}

header.active .gnb .gnb-area > li > a{color:#222222;}
header.active .gnb .gnb-area > li > a.on{color:#2551ff;}
header.active .header-wrap .logo-img img.logo-blue{display: block;}
header.active .util-menu ul > li a, header.active .util-menu ul > li button{color:#222;}
header.active .util-menu ul > li button i{background:url('/ux/common/images/ico/ico_util_arrow_on.png')no-repeat center 1px; background-size:10px 6px;}

header.sub { background: #fff;}
header.sub .header-wrap .logo-img img.logo-white{display: none;}
header.sub .header-wrap .logo-img img.logo-blue{display: block;}
header.sub .gnb .gnb-area > li > a{color:#222222;}
header.sub .gnb .gnb-area > li > a.on{color:#2551ff;}
header.sub .header-wrap .logo-img img.logo-blue{display: block;}
header.sub .util-menu ul > li a, header.active .util-menu ul > li button{color:#222; display: block;}
header.sub .util-menu ul > li button i{background:url('/ux/common/images/ico/ico_util_arrow_on.png')no-repeat center 1px; background-size:10px 6px;}
header.sub .util-menu > ul > li a, header.sub .util-menu ul > li button{color:#222; display: block}

.gnb{margin: 0 auto 0 8rem;}
.gnb-area{display: flex;}
.gnb .gnb-area > li{ margin-right: 5rem;}
.gnb .gnb-area > li > a{color:#fff; font-size: 1.9rem; font-weight: 600}
.gnb .gnb-area > li > a.on{color:#2551ff;}
.gnb-draw-area{position: absolute; top:85px; left:0; width: 100%; border-top: 1px solid #e2e2e2; display: none; overflow: hidden; }
.gnb-draw-area .gnb-draw{display: flex;}
.gnb-draw-area .gnb-draw .draw-title{width: 630px;background:url(/ux/common/images/bg/bg_nav.png) no-repeat center; background-size: cover; display: flex; justify-content: end; padding:40px 70px 0 0 ; box-sizing: border-box;}
.gnb-draw-area .gnb-draw .draw-title h2{font-size: 4.2rem; color:#222; font-weight: 600;}
.gnb-draw-area .gnb-draw .depth2-wrap{width: calc(100% - 630px); background: #fff; padding: 3.5rem 0 5rem 0;}
.gnb-draw-area .gnb-draw .depth2-wrap .depth2 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));  gap:50px; max-width: 920px; padding: 0 30px;}
.gnb-draw-area .gnb-draw .depth2-wrap .depth2 > li{text-align: left;}
.gnb-draw-area .gnb-draw .depth2-wrap .depth2 > li > a{font-size:2rem; color:#222; font-weight: 600; position: relative;  display: inline-block;}
.gnb-draw-area .gnb-draw .depth2-wrap .depth2 > li > a.on{color:#2551ff}
.gnb-draw-area .gnb-draw .depth2-wrap .depth2 > li > a img {display: block; backface-visibility: hidden;transform: translateZ(0); transition: opacity .25s ease; }
.gnb-draw-area .gnb-draw .depth2-wrap .depth2 > li > a .logo-on {position: absolute;top: 0;left: 0;opacity: 0;}
.gnb-draw-area .gnb-draw .depth2-wrap .depth2 > li > a:hover .logo-on {opacity: 1;}
.gnb-draw-area .gnb-draw .depth2-wrap .depth2 > li > a:hover .logo-off {opacity: 0;}


.depth3-wrap li{margin-bottom: 2.5rem; text-align: left;}
.depth3-wrap li:last-child{margin-bottom: 0;}
.depth3-wrap li a{color:#666; font-size: 1.7rem;  word-break: break-word;}
.depth3-wrap li a.on{color:#2551ff}
.depth3-wrap li.link i{width:16px; height:18px; display: inline-block; vertical-align: middle;; background:url('/ux/common/images/ico/ico_link.png')no-repeat center 0; background-size:16px}
.depth3-wrap li.link a.on i{background:url('/ux/common/images/ico/ico_link_on.png')no-repeat center 0; background-size:16px}

footer{width:100%;padding:8.5rem 0 9.4rem 0; box-sizing: border-box; background:#111111; box-sizing: border-box; background-size: cover;}
.inner-footer{max-width: 1600px; margin: 0 auto; padding:0 2rem}
.footer-top{display: flex; justify-content: space-between; align-items: center;}
.foot-link{display: flex; flex: 1; padding-left:36rem; box-sizing: border-box;}
.foot-link li {margin-right: 4rem;}
.foot-link li a{color:#fff; font-size: 2rem; font-weight: 300;}

.site-link{display: flex; align-items: center;}
.site-link .familysite{width: 260px; position: relative;}
.site-link .familysite a.btn-site{width:100%; display: block; box-sizing: border-box;  color: #fff; font-size: 1.8rem; font-weight: 300; padding:17.5px 20px; border-radius: 4px;     background:#151541 url(/ux/common/images/ico/ico_family_arrow.png) no-repeat 90%; background-size: 12px 7px;}
.site-link .familysite a.btn-site.on{background:#151541 url(/ux/common/images/ico/ico_family_arrow_on.png) no-repeat 90%; background-size: 12px 7px;}
.site-link ul.link-list{display: flex;}
.site-link ul.link-list li{margin-left: 1rem;}
.linkList{background:#151541; padding-bottom:10px; position: absolute; top:56px; width:100%}
.linkList li{padding:8px 20px;}
.linkList li a{color: #fff; font-size: 1.8rem; font-weight: 300;}
.linkList li a:hover{color:#3fcde0}

.foonter-bot{padding-left: 36rem; margin-top: 3rem;display: flex; box-sizing: border-box; justify-content: space-between; align-items: end;}
.foonter-bot ul li{display: flex; color:#ddd; font-size: 1.6rem; font-weight: 300; margin-bottom: 2rem;;}
.foonter-bot ul li:last-child{margin-bottom: 0;}
.foonter-bot ul li strong{width: 150px;;}
.foonter-bot ul li p{width: calc(100% - 150px);}
.foonter-bot .copyright{color:#aaa; font-size: 1.5rem; font-weight: 300;}

.floating-menu{ position: fixed;right: 20px;bottom: 40px; z-index: 3;}
.quick-list{background: #f8f8f8; border-radius:8px 8px 0 0; text-align: center; padding:1.8rem 0.5rem; display:block; overflow: hidden;}
.quick-list li{padding:12px 0;}
.quick-list li a{color:#222222; font-size:1.5rem; font-weight: 300; display: block;}
.quick-list li a:hover{color:#2551ff; font-weight: 500;}
.quick-list li a p{margin-top: 1rem;}
.quick-list li img{display: block; margin: 0 auto;}
.quick-link{display: block; text-align: center; width: 90px; height: 90px; line-height: 90px; color:#fff; background: #242428; font-size: 1.5rem; font-weight: 300; border-radius: 8px 8px 0 0;}
.quick-link.on{border-radius: 0; background:#242428 url(/ux/common/images/ico/ico_quick_close.png) no-repeat center; background-size: 21px; text-indent: -9999px;}
.m-header{display: none;}

/* navigation */
.navigation{ max-width: 1760px; margin: 0 auto; padding:3rem 3rem 2.5rem;}
.navigation ul{display: flex; align-items: center; }
.navigation ul li{padding:0 1.5rem; position: relative;}
.navigation ul li:after{width:3px; height:3px; content:''; background: #1d1d1b; position: absolute; top:50%; right:-2px; transform:translate(0, -50%); border-radius: 50%;}
.navigation ul li:last-child:after{display: none;}
.navigation ul li:first-child{padding-left:0;}
.navigation ul li:last-child{padding-right:0;}
.navigation ul li{font-size:1.5rem; font-weight: 300;}

/* pagenation */
.pagination{margin-top:5rem; display: flex; align-items: center; justify-content: center;}
.pagination li.first-num a{width:17px; height:16px; margin-right:1rem; transform: rotate(180deg); display:block; background:url('/ux/common/images/btn/btn_arrow_last02.png')no-repeat center; background-size:100%;}
.pagination li.first-num a:hover{transform: rotate(180deg); background:url('/ux/common/images/btn/btn_arrow_last02_hover.png')no-repeat center;}
.pagination li.prev-num a{width:12px; height:16px; margin-right:1.7rem; display:block; background:url('/ux/common/images/btn/btn_arrow_prev02.png')no-repeat center; background-size:100%;}
.pagination li.prev-num a:hover{transform: rotate(180deg); background:url('/ux/common/images/btn/btn_arrow_next02_hover.png')no-repeat center;}
.pagination li.next-num a{width:12px; height:16px; margin-left:1.7rem; transform: rotate(180deg); display:block; background:url('/ux/common/images/btn/btn_arrow_prev02.png')no-repeat center; background-size:100%;}
.pagination li.next-num a:hover{background:url('/ux/common/images/btn/btn_arrow_next02_hover.png')no-repeat center; transform: rotate(0);}
.pagination li.last-num a{width:17px; height:16px;  margin-left:1rem; display:block; background:url('/ux/common/images/btn/btn_arrow_last02.png')no-repeat center; background-size:100%;}
.pagination li.last-num a:hover{background:url('/ux/common/images/btn/btn_arrow_last02_hover.png')no-repeat center;}
.pagination li.page-num a{color:#444; padding:0 1.1rem;}
.pagination li.page-num a.on{color:#2525ff; font-weight: 700;}
.pagination li.page-num a:hover{text-decoration: underline; text-underline-offset: 3px;}
/* 유지보수: 서버에서 pageSize를 다르게 렌더링한 페이징을 해상도별로 토글한다. */
.pagination.mo-paging{display: none;}

/* sub title */
.sub-title{padding:4rem 0 10rem;}
.sub-title h2{font-size:6.4rem; text-align: center; color:#1d1d1b; font-weight: 700;}

/* tab */
.swiper.tab-type01{margin-bottom:5rem;}
.tab-type01 ul{justify-content: center;}
.tab-type01 ul li{ text-align: center; width: auto;}
.tab-type01 ul li:first-child a{margin-left:0;}
.tab-type01 ul li:last-child a{margin-right:0;}
.tab-type01 ul li a{font-size:3.2rem; padding:0 0.5rem; margin:0 5rem; color:#666; font-weight: 500; display: inline-block;}
.tab-type01 ul li a.on{color:#000; position: relative;}
.tab-type01 ul li a.on:after{width:100%; height:12px; content:''; display: block; background:#2551ff; position:absolute; bottom:0; left:50%; transform: translateX(-50%); z-index: -1;}

/* search */
.search-popup{position: fixed; width:100%; height:100%; background:rgba(0,0,0,0.7); top:0; left:0;}
.search-popup .search-popup-inner{padding:3rem 9rem; width:100%; height:459px; background:url('/ux/common/images/bg/bg_search.png')no-repeat center; background-size:cover; box-sizing: border-box;}
.search-close{display: flex; justify-content:flex-end}
.search-popupbox{max-width:640px; margin:14rem auto 0;}
.search-popupbox form > div{width:100%; border-bottom:4px solid #000; position: relative;}
.search-popupbox form > div input{font-size:2.2rem; color:#222; width:100%; padding:2rem 10rem 2rem 2.5rem; box-sizing: border-box; border:0; background:transparent}
.search-popupbox form > div input::placeholder{color:#222;}
.search-popupbox form > div > div{position: absolute; top:50%; right:20px; transform: translateY(-50%); display: flex; align-items: center; gap:1rem;}
.search-popupbox ul{margin-top:1.5rem; display: flex; align-items: center; flex-wrap: wrap; gap:0.8rem;}
.search-popupbox ul li a{font-size:1.6rem; padding:0.7rem 2rem; color:#08315d; display: block; background:#fff; border-radius: 10px;}

.depth3-wrap{margin-top: 25px;}
.depth4-wrap{ margin-top:10px;;}
.depth4-wrap li a{font-size: 1.6rem; color:#666666}
.depth4-wrap li {margin-bottom: 0.8rem; position: relative; padding-left: 12px;}
.depth4-wrap li::after{width:3px; height: 3px; background: #666666; position: absolute; left:0; top:10px; display: block; content: "";}
.depth4-wrap li:hover::after, .depth4-wrap li.on::after{background: #2525ff;}

/* popup */
.popup{position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index: 9999;}
.popup .popup-inner{height:100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.popup .popup-inner .popup-contents{width: 480px;}
.popup .popup-inner .popup-contents .popup-close{display: flex; gap:2rem; margin:0 2rem 1rem 0; align-items: center; justify-content: flex-end;}
.popup .popup-inner .popup-contents .popup-close label span{color:#fff;}
.popup .popup-inner .popup-contents .popup-close button{font-size:1.6rem; padding:0.7rem 2rem; gap:1rem; font-weight: 500; display: flex; align-items: center; border:1px solid rgba(255,255,255,0.6); color:#fff; border-radius: 30px;}
.popup .popup-inner .popup-contents .popup-container .popup-swiper .swiper-slide .text-popup{width:100%; height:600px; padding:2rem; box-sizing: border-box; border-radius: 30px; background:#fff;}
.popup .popup-inner .popup-contents .popup-container .popup-swiper .swiper-slide a{display: block;}
.popup .popup-inner .popup-contents .popup-container .popup-swiper .swiper-slide a img{display: block; width: 100%;}
.popup .popup-inner .popup-contents .popup-pagination{display: flex; margin-top:2.5rem; gap:3rem; align-items: center; justify-content: center;}
.popup .popup-inner .popup-contents .popup-pagination .popup-num{display: flex; align-items: center; gap:2rem;}
.popup .popup-inner .popup-contents .popup-pagination .popup-num .p-button-prev{width:13px; height:22px; display: inline-block; background: url(/ux/common/images/btn/btn_main_popup_prev.png)no-repeat center; background-size:100%;}
.popup .popup-inner .popup-contents .popup-pagination .popup-num .p-button-next{width:13px; height:22px; display: inline-block; background: url(/ux/common/images/btn/btn_main_popup_next.png)no-repeat center; background-size:100%;}
.popup .popup-inner .popup-contents .popup-pagination .popup-num .popup-num-txt{font-size:2.8rem; color:#fff; font-weight: 500;}
.popup .popup-inner .popup-contents .popup-pagination .popup-num .popup-num-txt .now{color:#37acc9}
.popup .popup-inner .popup-contents .popup-pagination .popup-pause{display: inline-block; width: 16px; height: 17px; background: url(/ux/common/images/btn/btn_main_visual_stop.png) no-repeat center; background-size: 100%; margin-top: -1px;}
.popup .popup-inner .popup-contents .popup-pagination .popup-pause.popup-play{background: url(/ux/common/images/btn/btn_main_visual_play.png) no-repeat center;}

/* total */
.total-container{position: fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.3); display: none; overflow: hidden;}
.total-container .total-menu-inner{height: 100%}
.total-container .total-menu-inner .total-contents{background:#fff; display: flex;  flex-direction: column;  height: 100%; }
.total-container .total-menu-inner .total-top{display: flex; align-items: center; justify-content: space-between; margin: 0 auto; padding: 2.5rem 8rem;  flex-shrink: 0; width: 100%; box-sizing: border-box;}
.total-container .total-menu-inner .total-top a{display: block; width: 111px; height:30px;}
.total-container .total-menu-inner .total-top a img{width:100%;}
.total-container .total-menu-inner .total-bottom{ overflow-y: auto; flex: 1;}
.depthbox{display: flex; border-top:1px solid #e2e2e2; position: relative; z-index: 1;}
.depthbox .depth-tit{width:335px; padding:4.5rem 2rem 8rem 8rem;; box-sizing: border-box;}
.depthbox .depth-tit strong{font-size:2.6rem; color:#222; font-weight: 600; display: block;}
.depthbox .depth-sub-tit{width:calc(100% - 335px); padding:5rem 1rem 4rem 3rem; box-sizing: border-box;}
.t-depth1{display: grid; grid-template-columns: repeat(5, 1fr); gap:3rem 1rem;}
.t-depth1 > li > a{font-size:2rem; color:#222; font-weight: 600; display: inline-block; position: relative;}
.t-depth1 > li > a:hover{color:#2551ff;}
.t-depth2{margin-top:1.5rem; display: flex; flex-direction: column; gap:1.5rem;}
.t-depth2 > li > a{font-size:1.7rem; color:#666;}
.t-depth2 > li > a:hover{color:#2551ff;}
.t-more{width:18px; height:18px; margin-left:0.5rem; display: inline-block; background:url('/ux/common/images/ico/ico_more04.png')no-repeat center; background-size:100%;}
.t-depth3{margin:1rem 0 0 0; display: flex; flex-direction: column; gap:1rem;}
.t-depth3 > li{padding-left: 12px; position: relative;}
.t-depth3 > li > a{font-size:1.6rem; color:#666;}
.t-depth3 > li > a:hover{color:#2551ff;}
.t-depth3 > li::after{width:3px; height: 3px; background: #666666; position: absolute; left:0; top:10px; display: block; content: "";}
.t-depth3 > li:hover::after{background: #2525ff;}

.total-bottom{position: relative;}
.total-bottom:after{width: 335px; height:100%; position: absolute; top: 0; left: 0; content: ''; background: url('/ux/common/images/bg/bg_left.jpg')no-repeat top;}

.t-depth1 > li > a img {display: block; backface-visibility: hidden;transform: translateZ(0); transition: opacity .25s ease; }
.t-depth1 > li > a .logo-on {position: absolute;top: 0;left: 0;opacity: 0;}
.t-depth1 > li > a:hover .logo-on {opacity: 1;}
.t-depth1 > li > a:hover .logo-off {opacity: 0;}

@media all and (min-width: 991px) and (max-width:1640px){
.header-wrap{padding:2.5rem 4rem}
.gnb-draw-area .gnb-draw .draw-title{width:38.41vw;}
.gnb-draw-area .gnb-draw .depth2-wrap{width: calc(100% - 38.41vw);}

/* total */
.total-container .total-menu-inner .total-top{padding:3.5rem 4rem;}
.depthbox .depth-tit{width:250px; padding:4.5rem 2rem 8rem 4rem}
.depthbox .depth-sub-tit{width:calc(100% - 250px);}
.total-bottom:after{width:250px;}


}

@media all and (min-width: 1201px) and (max-width:1440px){
.gnb{margin:0 auto 0 5rem}
.gnb .gnb-area > li > a{font-size: 1.8rem;}
.gnb .gnb-area > li{margin-right: 3rem;}
.gnb .gnb-area > li:last-child{margin-right:0}
.header-wrap{padding: 2.5rem 2rem;}
.util-menu > ul > li.btn-search{margin-right:2rem}

.foot-link{padding-left: 10rem;}
.foonter-bot{padding-left: 10rem;}

}

@media all and (max-width:1200px){

.pc-header .gnb{display: none;}
.pc-header .util-menu li{display: none;}
.pc-header .util-menu li.btn-search{display: block; margin-right: 3rem;}
.header-wrap{padding:1.5rem 2rem; justify-content: space-between;}
.header-wrap .pc-header{width: auto; margin:0}
.util-menu ul > li.m-menu-open{display: block;}
.util-menu ul > li.m-menu-open button{width:40px; height: 36px; display: block;   display:inline-block; vertical-align: middle;background:url('/ux/common/images/btn/btn_m_menu_open.png')no-repeat center 1px; background-size:100%;}
header.active .util-menu ul > li.m-menu-open button, header.sub .util-menu ul > li.m-menu-open button{width:40px; height: 36px; display: block;   display:inline-block; vertical-align: middle; background:url('/ux/common/images/btn/btn_m_menu_open_on.png')no-repeat center 1px; background-size:100%;}

.m-header{position: fixed; width: 100%;  top: 0; left: 0;  padding: 0;  height: 100%;  background: #fff;  z-index: 100;}
.m-header .util-menu{background: #fff; border-bottom: 1px solid #e2e2e2; padding:1.4rem 3rem;  }
.m-header .util-menu ul > li a, .m-header .util-menu ul > li button{color:#222; font-family: 'Pretendard';}
.m-header .util-menu ul > li button i{width:10px; height:12px; display:inline-block; vertical-align: middle; background:url('/ux/common/images/ico/ico_m_util_arrow.png')no-repeat center 1px; background-size:10px 6px;}
.m-header .util-menu ul > li.language .language-select{border:1px solid #222}
.m-header .gnb{position: fixed;     top: 73px; left: 0; width: 100%; height: calc(100dvh - 71px); overflow-y: auto; margin:0}
.m-header .gnb::after{width: 160px; height:100vh; position: absolute; top: 0; left: 0; content: ''; background: url('/ux/common/images/bg/bg_m_nav.png')no-repeat top;}
.m-header .util-menu > ul{display: flex; align-items: center; }
.m-header .util-menu > ul li.m-menu-close{margin-left: auto;}
.m-header .util-menu > ul li.m-menu-close img{width: 25px;;}
.m-header .gnb-area{display: block; position: relative; z-index: 1;}
.m-header .gnb .gnb-area > li{display: flex;}
.m-header .gnb .gnb-area > li > a{color:#222222; font-size:2rem; width: 160px;  padding: 3rem 2rem 0 2rem; box-sizing: border-box;}
.m-header .gnb .gnb-area > li > a.on{color:#2551ff;}
.m-header .gnb .gnb-area > li > .depth2-wrap .depth2 .d2-list> a.on{color:#2551ff;}
.m-header .gnb .gnb-area > li > a.on{color: #2551ff;}
.m-header .depth3-wrap li.link a.on i{background:url('/ux/common/images/ico/ico_link_on.png')no-repeat center 0; background-size:16px}
.m-header .gnb .gnb-area > li > .depth2-wrap{display: none; position: absolute; top: 30px; left: 160px; width: calc(100% - 160px);}
.m-header .gnb .gnb-area > li > .depth2-wrap .depth2 .d2-list> a{color:#222; font-weight:600; padding-left: 15px; margin-bottom:20px; display: inline-block;} 
.m-header .depth3-wrap{border-bottom:1px solid #e2e2e2; margin-bottom: 2rem; padding-bottom:2rem; padding-left: 15px;         margin-top: 0 !important;}
.m-header .d2-list:last-child .depth3-wrap{border-bottom: 0; margin-bottom: 0; padding-bottom: 0;}
.m-header .depth3-wrap li{text-align: left;}
.depth3-wrap li:first-child{margin-top: 0;}
.m-header .gnb .gnb-area > li > .depth2-wrap .depth2 .d2-list> a img{max-width: 90%;}

.footer-top{display: block;}
.foot-link{padding:0; margin:0 0 40px 0}
.foonter-bot{padding-left: 0; margin-top: 40px;}

.site-link{display: block;}
.site-link .familysite{width: 100%; margin-bottom: 20px;;}
.site-link .familysite a.btn-site{    background: #151541 url(/ux/common/images/ico/ico_family_arrow.png) no-repeat 97%;    background-size: 12px 7px;}
.site-link .familysite a.btn-site.on{background:#151541 url(/ux/common/images/ico/ico_family_arrow_on.png) no-repeat 97%; background-size: 12px 7px;}
.site-link ul.link-list{justify-content: center;}

/* total */
.total-container{display: none !important;}
.util-menu > ul > li.btn-search{margin-right: 2rem !important;}
.btn-gts{display: none !important;}
.m-gts-btn a{background: #1e31db; border-radius: 100%; height: 45px; width: 45px; display: flex !important; justify-content: center; align-items: center;}
.m-gts-btn a img{max-width: 100%;}


}

@media all and (max-width:991px){
.foonter-bot{display: block;}
.foonter-bot .copyright{margin-top:50px;}

.quick-link{width: 60px; height: 60px; line-height: 60px; font-size: 1.4rem;}
.top-btn{width: 60px; height:60px;display: block;}
.top-btn img{display: block; width: 100%;}
.quick-list li a p{font-size: 1.4rem;}
.floating-menu{right:10px; bottom:20px;}

/* navigation */
    .navigation{display: none;}

/* tab */
.tab-type01 ul{justify-content: flex-start;}
.tab-type01 ul li{justify-content: flex-start;}

/* 유지보수: 모바일 구간에서는 모바일 전용 페이징(번호 5개)을 노출한다. */
.pagination.pc-paging{display: none;}
.pagination.mo-paging{display: flex;}

/* search */
.search-popup .search-popup-inner{height:680px; padding:3rem 2rem; background:url('/ux/common/images/bg/bg_search_m.png')no-repeat center; background-size: cover;}
.search-popupbox ul{justify-content: center;}

/* popup */

}

@media all and (max-width:767px){
.header-wrap{padding: 1.1rem 2rem;}
.header-wrap .logo-img{width:100px; height: 17px;}
.m-header .util-menu{padding: 1.1rem 3rem;}
.util-menu ul > li.m-menu-open button{width:30px; height: 25px; display: block;   display:inline-block; vertical-align: middle; background:url('/ux/common/images/btn/btn_m_menu_open.png')no-repeat center 1px; background-size:100%;}
header.active .util-menu ul > li.m-menu-open button, header.sub .util-menu ul > li.m-menu-open button{width:30px; height: 25px; display: block;   display:inline-block; vertical-align: middle; background:url('/ux/common/images/btn/btn_m_menu_open_on.png')no-repeat center 1px; background-size:100%;}
.m-header .gnb::after{width: 120px; ;}
.m-header .gnb .gnb-area > li > a{width: 120px;}
.m-header .gnb .gnb-area > li > a{font-size: 1.6rem;}
.m-header .gnb .gnb-area > li > .depth2-wrap{width: calc(100% - 120px); left: 120px; top: 27px;}
.depth3-wrap li a{font-size: 1.5rem;}
.m-header .gnb .gnb-area > li > .depth2-wrap .depth2 .d2-list> a{font-size: 1.5rem;}
.m-header .depth3-wrap li{margin-top: 1.5rem;}
.m-header .depth3-wrap{margin-bottom: 2rem; padding-bottom: 2rem;}
.pc-header .util-menu li.btn-search {margin-right: 2rem;}
.pc-header .util-menu li.btn-search img{width:36px}
.util-menu ul > li.m-menu-open img{width:30px;}
.depth3-wrap li{margin-bottom:1.5rem}

.footer-logo img{width: 190px;;}
footer{padding: 4rem 0 3rem 0;  box-sizing: border-box; background-size: cover;}
.foot-link{margin:0 0 2rem 0;}
.foot-link li a{font-size: 1.6rem;}
.site-link .familysite a.btn-site{font-size: 1.3rem; padding:10px 12px}
.linkList {top: 35px;}
.linkList li{padding: 6px 12px;}
.linkList li a{font-size: 1.3rem;}
.site-link ul.link-list li:first-child{margin-left: 0;}
.site-link ul.link-list li img{width: 35px;;}
.foonter-bot ul li{font-size: 1.3rem; margin-bottom: 1rem;}
.foonter-bot ul li strong{width: 100px;;}
.foonter-bot ul li p{width: calc(100% - 100px)}
.foonter-bot .copyright{margin-top: 40px; font-size: 1.3rem;}
.top-btn{}
.quick-link{font-size: 1.3rem;}
.quick-list{padding:1rem 0}
.quick-list li a p{font-size: 1.3rem;}
.quick-list li{padding:8px 0}

/* tab */
.swiper.tab-type01{margin-bottom:3rem;}
.tab-type01 ul li a{font-size:2.2rem; padding:0 0.3rem; margin:0 2.2rem;} 
    
/* pagination */
.pagination{margin-top:4rem;}

/* sub title */
.sub-title{padding:5.5rem 0 6rem;}
.sub-title h2{font-size:3.6rem;}

/* search */
.search-popup .search-popup-inner{height:380px; padding:2.5rem 2rem;}
.search-close img{width:26px;}
.search-popupbox{margin-top:5rem; max-width: none; width: 100%;}
.search-popupbox form > div{border-bottom:3px solid #000;}
.search-popupbox form > div input{font-size:1.7rem; padding:1.5rem 6.5rem 1.5rem 1rem;}
.search-popupbox form > div > div{right:10px;}
.search-popupbox form > div > div .search-delete img{width:18px;}
.search-popupbox form > div > div .search-popup-search img{height:28px;}
.search-popupbox ul{margin-top:2.4rem; gap:0.6rem;}
.search-popupbox ul li a{font-size:1.4rem; padding:0.6rem 1.8rem}

.m-header .gnb .gnb-area > li > .depth2-wrap .depth2 .d2-list> a{margin-bottom: 15px;}
.depth3-wrap li:first-child{margin-top: 0;}

/* popup */
.popup .popup-inner .popup-contents{width:360px; max-width:100%; padding:0 2rem; box-sizing: border-box;}
.popup .popup-inner .popup-contents .popup-close{margin:0 1.5rem 1.5rem 0; gap:1.5rem;}
.popup .popup-inner .popup-contents .popup-close button{font-size:1.4rem; gap:0.5rem; padding:0.4rem 1.3rem}
.popup .popup-inner .popup-contents .popup-close button img{width:12px; }
.popup .popup-inner .popup-contents .popup-pagination{gap:2.5rem;}
.popup .popup-inner .popup-contents .popup-container .popup-swiper .swiper-slide .text-popup{width:100%; height:400px; padding:1.5rem; border-radius: 15px;}
.popup .popup-inner .popup-contents .popup-pagination .popup-num .popup-num-txt{font-size:2rem;}
.popup .popup-inner .popup-contents .popup-pagination .popup-num .p-button-prev{width:9px; height:16px; background-size:100%;}
.popup .popup-inner .popup-contents .popup-pagination .popup-num .p-button-next{width:9px; height:16px; background-size:100%;}
.m-gts-btn a{width: 36px; height:36px;;}
.m-gts-btn a img{max-width: 20px;}
.m-header .gnb{position: fixed;     top:58px; left: 0; width: 100%; height: calc(100dvh - 63px); overflow-y: auto; margin:0}
.util-menu > ul > li{margin-right:1.5rem}


}


@media all and (max-width:360px){

    /* popup */
    .popup .popup-inner .popup-contents .popup-container .popup-swiper .swiper-slide .text-popup{height:109vw;}

}