#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_wrapper {position:relative;margin:0 auto;padding:11px 0 25px;zoom:1} #hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""} #header {width: 100%; min-width:320px; background-color:#fff; position: fixed;top: 0; left: 0; z-index: 99; border-bottom:1px solid rgba(255, 255, 255, 0.3); transition:.5s;} #header .hd_top {} #logo {} #logo a img {width: 200px;} #logo a {display: inline-block; vertical-align: middle; line-height:30px; margin-top:-5px;} #logo a .fix{display: none; } #logo a .stiky{display:inline-block; } #header .hd_top_menu {display: inline-block; vertical-align: middle; padding-left: 27%;} #header .hd_top_menu a {padding-right: 20px; font-size: 24px; font-weight: 500; color: #fff;} #header .top_util {/*position: absolute; top:5px; right:5%;*/ color:#222; font-family: 'Montserrat', sans-serif; } #header .top_util li {display: inline-block;text-align: center; position: relative; z-index:2; letter-spacing:-0.5px;} #header .top_util li.tnb_admin a {margin-left: 0} #header .top_util a {display: inline-block; color:#222; transition:.25s; z-index:9999; } #header .top_util a:hover { opacity: 1;} #header .header_wrap {display:flex;justify-content: space-between;align-items: center;} #header .gnb_wrap {display: flex;} /* gnb - depth1 */ #header #gnb {margin-left: -71px;} #header #gnb .gnb_1dul {position: relative; display: flex; justify-content:flex-start;} #header #gnb .gnb_1dul .gnb_1dli {position: relative;} #header #gnb .gnb_1dul .none { display:none;} #header #gnb .gnb_1dul .gnb_1dli .gnb_1da {display: block; padding: 30px; text-align: center; color: #222; font-size: 20px; font-weight:500; transition:0.25s; position: relative;} #header #gnb .gnb_1dul .gnb_1dli .gnb_1da:after {content:''; display: block; width: 0; height: 3px; background-color: #222; position: absolute; left: 50%; bottom: 0; transform:translateX(-50%);transition:.5s;} #header #gnb .gnb_1dul .gnb_1dli .gnb_1da:hover:after {width: 190px;} #header #gnb .gnb_2dul:hover {border-top:3px solid #222; margin-top:-3px;} /* gnb - depth2 */ #header #gnb .gnb_2dul {display: none; position: absolute; top: 100%; left: 50%; width: 190px; margin-left: -95px; height: auto; background-color: #fff; padding: 10px 15px; border-right: 1px solid #f9f9f9; border-left: 1px solid #f9f9f9; border-bottom: 1px solid #ddd; z-index: 99; } #header #gnb .gnb_2dul .gnb_2dli { position: relative; z-index: 1;} #header #gnb .gnb_2dul .gnb_2dli .gnb_2da {display: block; line-height: 35px; font-size: 16px; color: #787878; font-weight: 400; transition:0.5s; position: relative;} #header #gnb .gnb_2dul .gnb_2dli .gnb_2da:hover, #header #gnb .gnb_2dul .gnb_2dli.active .gnb_2da {color: #222} #header #gnb .gnb_2dul .gnb_2dli:after {content:''; display: block; width: 0; height: 1px; background-color: #222; position: relative ; left: 50%; bottom: 0; transform:translateX(-50%);transition:.5s;} #header #gnb .gnb_2dul .gnb_2dli:hover:after {width: 100%;} #header .hd_rt {text-align: right;padding: 10px 0;position: absolute;right: 54px;top: 23px} #header .hd_rt a {display: inline-block; vertical-align: middle; margin: 0 4px; font-size: 14px; color: #fff;} .open_sitemap{/*position: absolute; top:50px; right: 15px;*/ z-index: 999;} .open_sitemap a{position:relative;display:block;width: 28px; transition:.25s;height: 21px} .open_sitemap a span {position: absolute;left: 0;top: 50%;display: block;width: 17px;height: 2px;border-radius: 10px;background-color: #222;margin: 0 0;text-indent: -9999px} .open_sitemap span, .open_sitemap span:before, .open_sitemap span:after{content:"";left:0;position:absolute;display:block;width:23px;height:100%;background-color:#222; border-radius:10px; transition:.25s;} .open_sitemap span:before{top:-7px;} .open_sitemap span:after{bottom:-7px;} .open_sitemap .active span{background-color:transparent;} .open_sitemap .active span:before{top:0;transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);} .open_sitemap .active span:after{bottom:0;transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);} #gnb_all { display: none; width: 100%; background-color: #fff; position: absolute; top: 100%; left: 0;/* margin-left: -600px; */ z-index: 0; box-shadow:0px 15px 15px rgba(0,0,0,.1); border-top: 1px solid #ddd;} #gnb_all .gnb_all_head {padding: 0 60px 0 15px; position: relative; background-color: #eff8fd;} #gnb_all .gnb_all_head .gnb_close {position: absolute; top: 30px; right: 15px; cursor: pointer;} #gnb_all .gnb_all_head #gnb_all_logo {text-align: center;} #gnb_all .gnb_all_head #gnb_all_logo a {display: inline-block; line-height: 90px; vertical-align: middle;} .gnb_all_member {max-width:1200px; margin: 0 auto; text-align: right; padding: 20px 0 0;} .gnb_all_member li {display: inline-block; margin: 0 2px;} .gnb_all_member a {display: inline-block; padding: 8px 20px 6px; background-color: #000; font-size: 14px; color: #fff; letter-spacing: 0; border-radius:50px; transition:.25s; } .gnb_all_member a:hover {} #gnb_all .gnb_al_ul {font-size: 0; padding: 50px 0;/* max-width:1500px; margin: 0 auto;*/display:flex;gap:80px} #gnb_all .gnb_al_ul .gnb_al_li {display: inline-block; vertical-align: top; /*width: 15%;*/flex: 1 1 20%;text-align: center;} #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a {display:block;font-size: 18px; font-weight: 500; transition:.25s; border-bottom:3px solid #ddd; /*width:220px; position:absolute;*/ padding-bottom:15px} #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a:after {content:''; display: block; width: 0; height: 3px; background-color: #222; position: absolute; left: 50%; bottom: -3px; transform:translateX(-50%);transition:.5s;} #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a:hover:after {width: 100%} #gnb_all .gnb_al_ul .gnb_al_li ul {/*padding: 50px 50px 50px 0;*/} #gnb_all .gnb_al_ul .gnb_al_li li {transition: .25s;} #gnb_all .gnb_al_ul .gnb_al_li li a {display: block;font-size: 16px; font-weight: 400; color: #777; padding: 5px 0; line-height: 1.5; transition: .25s;} #gnb_all .gnb_al_ul .gnb_al_li li:after {content:''; display: block; width: 0; height: 1px; background-color: #222; color: #222; position: relative ; left: 50%; bottom: 0; transform:translateX(-50%);transition:.5s;} #gnb_all .gnb_al_ul .gnb_al_li li:hover:after {width: 100%;} #gnb_all .gnb_al_ul .gnb_al_li li a:hover { color:#222; font-weight:500;} #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a {font-size: 18px; font-weight: 500; transition:.25s; border-bottom:3px solid #ddd; /*width:165px; position:absolute; padding-left:10px; padding-bottom:15px*/} #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a:after {content:''; display: block; width: 0; height: 3px; background-color: #222; position: absolute; left: 50%; bottom: -3px; transform:translateX(-50%);transition:.5s;} #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a:hover:after {width: 100%} .gnb_dim { display: none; position: fixed; top: 0; left: 0; z-index: 9; width: 100%; height: 100%; /*background-color: rgba(0,0,0,.8);*/} #header.stiky {position: fixed; background-color:#fff; border-bottom:1px solid #ddd; } #header.stiky #logo a {line-height: 30px;} #header.stiky .hd_top {padding-left: 0;} #header.stiky .top_util {color:#222; font-weight:500;} /*#header.stiky .open_sitemap {}*/ #header.stiky .hd_top_menu {padding-left: 0px;} #header.stiky .hd_top_menu a {font-size: 20px; padding-right:0;} #header.stiky .gnb_plus {display: none;} /*#header.stiky .top_util .txt {display: none;}*/ #header.stiky #gnb .gnb_1dul .none { display: block;} #header.stiky .top_util a {color:#222; } #header.stiky .top_util a:hover { opacity: 1;} #header.stiky #gnb .gnb_1dul .gnb_1dli .gnb_1da {display: block; /*line-height:80px; height:80px;*/ text-align: center; color: #222; transition:0.25s; position: relative;} #header.stiky #gnb .gnb_1dul .gnb_1dli .gnb_1da:after {content:''; display: block; width: 0; height: 3px; background-color: #222; position: absolute; left: 50%; bottom: 0; transform:translateX(-50%);transition:.5s;} #header.stiky #gnb .gnb_1dul .gnb_1dli .gnb_1da:hover:after {width: 190px;} #header.stiky #gnb .gnb_2dul:hover {border-top:3px solid #222; margin-top:-3px; } #header.stiky .open_sitemap a span{position:absolute;left:0;top:55%;display:block;width:17px;height:2px;background-color:#222;margin:0 0;text-indent:-9999px;} #header.stiky .open_sitemap span, #header.stiky .open_sitemap span:before, #header.stiky .open_sitemap span:after{content:"";left:0;position:absolute;display:block;width:23px;height:100%;background-color:#222;transition:.25s;} #header.stiky .open_sitemap span:before{top:-7px;} #header.stiky .open_sitemap span:after{bottom:-7px;} #header.stiky .open_sitemap .active span{background-color:transparent;} #header.stiky .open_sitemap .active span:before{top:0;transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);} #header.stiky .open_sitemap .active span:after{bottom:0;transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);} #header.stiky #logo a .fix{display:none;} #header.stiky #logo a .stiky{display:inline-block;width: 189px} #header.stiky .hd_rt {top: 24px} #header .hd_rt a {color: #222;width: 20px;height: 20px;text-indent: -999em} #header .hd_rt a.edit_member {background: url(/img/edit_member.png) no-repeat} #header .hd_rt a.login_out {background: url(/img/login_out.png) no-repeat} #header .hd_rt a.admin {background: url(/img/admin.png) no-repeat} #header .hd_rt a.join {background: url(/img/join.png) no-repeat} #header .hd_rt a.login_in {background: url(/img/login_in.png) no-repeat} #header .hd_rt a:hover em {position: absolute;bottom: -28px;display: inline-block;text-indent: 0;width: 73px;left: 50%;background-color: #0174e0;line-height: 22px;transform: translateX(-50%);font-size: 13px;border-radius: 10px} #header.stiky .top_util a.edit_member {background: url(/img/edit_member.png) no-repeat} #header.stiky .top_util a.login_out {background: url(/img/login_out.png) no-repeat} #header.stiky .top_util a.admin {background: url(/img/admin.png) no-repeat} #header.stiky .top_util a.join {background: url(/img/join.png) no-repeat} #header.stiky .top_util a.login_in {background: url(/img/login_in.png) no-repeat} /* 하단 사이드 메뉴 */ .Header_Side_menu {position: fixed;right: 32px;bottom: 80px;z-index: 9999;display: flex;flex-direction: column;} .Header_Side_menu>ul {display: flex;flex-direction: column;gap: 0;pointer-events: unset;z-index: -1;pointer-events: none;max-height: 0;transition-delay: 0.8s;margin-bottom: 16px;} .Header_Side_menu>ul.open {pointer-events: unset;max-height: 337px;transition-delay: 0s;} .Header_Side_menu>ul>li {display: flex;justify-content: center;align-items: center;cursor: pointer;position: relative;pointer-events: none;opacity: 0;transform: translateY(10%);transition: opacity 0.3s, transform 0.3s;} .Header_Side_menu>ul>li a {width: 60px;height: 58px;padding-top: 7px;border: 1px solid #e5e5e5;margin-top: -1px;} .Header_Side_menu>ul>li a em {line-height: 12px;display: inline-block;padding-top: 1px} .Header_Side_menu>ul>li a .side_icon {display:none} .Header_Side_menu>ul>li a:hover {background-color: #0174e0;color: #fff} .Header_Side_menu>ul>li a:hover .side_icon {display:inline-block} .Header_Side_menu>ul>li a:hover .side_icon_ {display:none} .Header_Side_menu>ul.open>li {transform: translateY(0);opacity: 1;pointer-events: unset;transition: opacity 0.8s, transform 0.8s;border: 1px so;} .Header_Side_menu>ul.open>li:nth-child(1) {transition-delay: 0.4s;} .Header_Side_menu>ul.open>li:nth-child(2) {transition-delay: 0.3s;} .Header_Side_menu>ul.open>li:nth-child(3) {transition-delay: 0.2s;} .Header_Side_menu>ul.open>li:nth-child(4) {transition-delay: 0.1s;} .Header_Side_menu>ul.open>li:nth-child(5) {transition-delay: 0s;} .Header_Side_menu>ul>li:nth-child(5) {transition-delay: 0.4s;} .Header_Side_menu>ul>li:nth-child(4) {transition-delay: 0.3s;} .Header_Side_menu>ul>li:nth-child(3) {transition-delay: 0.2s;} .Header_Side_menu>ul>li:nth-child(2) {transition-delay: 0.1s;} .Header_Side_menu>ul>li:nth-child(1) {transition-delay: 0s;} .Header_Side_menu>ul>li:nth-child(5) a {height: 69px;} .Header_Side_menu>ul>li .icon_wrap {width: 100%;height: 100%;border-radius: 100%;transition: all 0.3s;} .Header_Side_menu>ul>li .icon_wrap img {width: 24px;} .Header_Side_menu>ul>li .Label {position: absolute;right: calc(100% + 15px);top: 50%;transform: translateY(-50%);padding: 0 11px;width: max-content;border-radius: 20px;box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);background-color: #fff;letter-spacing: -0.16px;display: none;} .user-kakao-btn, .user-reser-btn, .user-bank-btn {font-size:12px;text-align:center;background:#FFF;} .user-kakao-btn a, .user-reser-btn a, .user-bank-btn a{color:#0174E0;} .Header_Side_menu>ul>li:hover .icon_wrap {background-color: #7d85ff;} .Header_Side_menu>ul>li:hover .Label {display: flex;} .Header_Side_menu .drawer_btn {width: 48px;height: 48px;display: flex;border:0;justify-content: center;align-items: center;background-color: #0539DF;border-radius: 50%;margin-bottom: 16px;margin:10px 5px;} .Header_Side_menu .drawer_btn img { max-width: 20px;} .Header_Side_menu .drawer_btn.open {display: none;} .Header_Side_menu .drawer_btn {transition: opacity 0.8s, transform 0.8s;transition-delay: 0.5s;} .Header_Side_menu .Top_Scroll_btn {width: 48px;height: 48px;border-radius: 100%;box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);background-color: #F2F2F2;position: relative;display: flex;align-items: center;justify-content: center;border:0;margin:0 6px;} .Header_Side_menu .close-icon-wrap {background-color: #333333;display: flex;justify-content: center;align-items: center;width: 48px;height: 48px;border-radius: 50%;margin-bottom: 10px} .Header_Side_menu .close-icon-wrap i {font-size: 0;color: #fff;} .Header_Side_menu .Top_Scroll_btn i {font-size: 0;color: #F2F2F2;z-index: 2;} .Header_Side_menu .Top_Scroll_btn .progress_bar {width: 100%;height: 100%;border-radius: 50%;position: absolute;left: 0;top: 0;z-index: 0;} .Header_Side_menu .Top_Scroll_btn .progress_bar::before {content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 90%;height: 90%;background-color: #fff;border-radius: 100%;} .popUpBackground {display: none;background: rgba(39, 39, 39, 0.6);bottom: 0;left: 0;position: fixed;right: 0;top: 0;z-index: 999999;} .sidePopUpWrap {left: 50%;max-width: 303px;position: absolute !important;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: calc(100% - 48px);} .sidePopUpWrap .popUp-head {display: flex;justify-content: center;align-items: center;height: 56px;background-color: #484848;border-top-left-radius: 20px;border-top-right-radius: 20px;font-size: 20px;font-weight: 600;color: #fff;box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);} .sidePopUpWrap .popUp-body {display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 40px 0;background-color: #fff;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;} .sidePopUpWrap .popUp-body .link {font-size: 24px;font-weight: bold;color: #292f51;} .sidePopUpWrap .popUp-body .info {font-size: 16px;font-weight: 300;color: #8b8b8b;margin-top: 16px;line-height: 1.38;} .sidePopUpWrap .qr-img {max-width: 223px;} .sidePopUpWrap .popUp-id {font-size: 20px;font-weight: 600;color: #000;margin-top: 16px;} .sidePopUpWrap .info {text-align: center;} .sidePopUpWrap .popUp-close {width: 108px;height: 43px;line-height: 43px;border-radius: 8px;box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);background-color: #484848;margin-top: 24px; font-size: 16px;font-weight: 300;color: #fff;} .sidePopUpWrap .copy-icon {display: none;max-width: 9px;cursor: copy;} /* 카카오톡 */ .kakaoPopUpWrap.open {display: flex;} .kakaoPopUpWrap .popUp-body {padding: 24px 0 40px;} .m_icon { display:none;} @media all and (max-width:1300px) { #logo a .fix, #header.stiky #logo a .stiky {width: 145px;} #header #gnb .gnb_1dul .gnb_1dli .gnb_1da {font-size:18px;} #logo a img {width: 145px;} } @media all and (max-width:1200px){ #logo {position:relative; } #logo a {line-height:90px; } #header .hd_rt {top: 21px;right: 48px} #header.stiky .hd_rt {top: 16px} #header #gnb .gnb_1dul .gnb_1dli .gnb_1da {padding:20px;} #header .top_util .icon { display:none;} #header.stiky #logo a { line-height: 80px;} #header .lang_wrap {position: absolute;top: 20px;right: 7%;z-index: 10;} .ft_info1 { padding: 150px 15px; background-color: #fff;} .ft_info1 .lt .txt_area { display: inline-block; vertical-align: top; width: 100%; text-align: left;padding-left:10px;} .ft_info1 .rt { float: right;width: 50%;} .ft_info1 .rt img { width:100%;} .ft_info .ft_info_text { color: #fff; font-weight: 300; line-height: 50px; float: left; padding-left: 30px;} #top_trigger {margin-left:40%; } .Header_Side_menu {right: 10px;bottom: 20px;} } @media all and (max-width:1000px){ #header #gnb .gnb_1dul .gnb_1dli .gnb_1da {padding:20px 10px;} } @media all and (max-width:980px){ .open_sitemap .active span:after, .open_sitemap .active span:before {background-color: #fff;} #header #gnb {display: none;} #gnb_all .gnb_al_ul {flex-direction: column;gap: 0;padding: 0} #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a {font-size: 18px; font-weight: 500; transition:.25s; border-bottom:1px solid #ddd; width:100%; position: relative; padding-bottom:15px; } #gnb_all .gnb_al_ul .gnb_al_li:hover .gnb_al_a {color: #222; border-bottom:1px solid #222;} #gnb_all {display: block !important; width: 310px; padding:0 0; height: 100%; overflow: hidden; position: fixed; top: 0; left: -300%; transition:.5s; z-index: 998; box-shadow:10px 0 10px rgba(0,0,0,.1); } #gnb_all.active { left: 0;} .gnb_all_member {padding: 20px; text-align: right; border-bottom: 1px solid #ddd;} #gnb_all .gnb_navi {width: 100%;height: calc(100vh - 100px); overflow-y: auto; border-top: 2px solid #222;position:relative } /*#gnb_all .gnb_al_ul {width: -webkit-fill-available;margin: 0;padding: 20px 15px; position:absolute; }*/ #gnb_all .gnb_al_ul .gnb_al_li {width: 100%;} #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a { display: block;padding: 15px 0; font-weight: 500; font-size:18px; background-image: url('/assets/images/common/gnb_bg2.png'); background-repeat: no-repeat; background-position: right 15px center;} #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a.active {background-image: url('/assets/images/common/gnb_bg1.png');} #gnb_all .gnb_al_ul .gnb_al_li ul {display: none; padding: 10px 20px; border-bottom: 1px solid #eee;} #gnb_all .gnb_al_ul .gnb_al_li li a { padding: 7px 0; font-size:16px;} #header .top_util_mobile {position: absolute; top:40px; right:4%; color:#222; font-weight:600; font-family: 'Montserrat', sans-serif; } #header .top_util_mobile li {display: inline-block; padding: 0 7px; text-align: center; position: relative; z-index:2; letter-spacing:-0.5px;} #header .top_util_mobile a {display: inline-block; transition:.25s; z-index:9999; } #header .top_util_mobile a:hover { opacity: 1;} } @media all and (max-width:780px) { #logo a .fix, #header.stiky #logo a .stiky {width:120px} #logo a img {width: 120px;} .open_sitemap a {width:25px;} .open_sitemap a span {width:20px;height:2px;} .open_sitemap span:before {top:-7px} .open_sitemap span:after {bottom:-7px} .open_sitemap span, .open_sitemap span:before, .open_sitemap span:after {width:25px} #mv .mv_list .txt_wrap .main_txt img {width: 245px} .txt98, .txt88, .txt84, .txt80, .txt78, .txt72, .txt74 {font-size:45px; } .slick-slide img {width:40px} #mv .visual_box {max-width: 380px;margin: 15px auto;} #mv .visual_box>div .box_txt, #mv .visual_box>div.on .box_txt {font-size:15px;} #header.stiky .open_sitemap .active span {} #header.stiky .open_sitemap .active span:before {} #header.stiky .open_sitemap .active span:after {} } @media all and (max-width:768px){ #header .hd_rt {top: 21px;right: 40px} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_wrapper {position:relative;margin:0 auto;padding:21px 0 25px;zoom:1} #hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""} #header {width: 100%; min-width:320px; position: fixed; top: 0; left: 0; z-index: 99; transition:.5s;} #logo {display: inline-block; float:left; z-index:99;margin-top:-5px; } #logo a {display: inline-block; line-height:70px; vertical-align: middle; } #header .hd_top_menu {display: inline-block; vertical-align: middle; padding-left: 35px;} #header .hd_top_menu a {padding-right: 20px; font-size: 24px; font-weight: 500; color: #fff;} #header .top_util a {display: inline-block; transition:.25s; z-index:9999; } #header .top_util a:hover { opacity: 1;} #header.stiky .hd_rt {top: 13px} #header .hd_rt {top:8px} #header .lang_wrap {position: absolute;top: 25px;right: 60px;z-index: 10;} #header .lang_wrap .trigger{position:relative;display:block;width: 50px;height:30px;line-height:30px;padding: 0 20px 0 15px;color:#fff;border-radius:7px;background: rgba(0,0,0,.3);cursor: pointer;letter-spacing:-1px;font-size: 13px;transition:.25s;} #header .lang_wrap .trigger:after{content:''; border:5px solid transparent; border-top-color: #fff; border-left-width: 3px; border-right-width: 3px; position: absolute; top:calc(50% - 2px); right:10px; } #header .lang_wrap .dep1{display:block;padding:5px 6px;color:#fff;font-size:12px; letter-spacing:0px;font-weight:400;transition:.25s; text-align:end;} #header .lang_wrap .dep1:after { content: ""; width: 6px; height: 7px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDciPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNC41LjVsLTMuMSAzIDMuMSAzLjEiLz48L3N2Zz4=)0 0/100% no-repeat;display: inline-block; margin-left: 8px; } #header .gnb_wrap {display: flex;} /* gnb - depth1 */ #header #gnb {padding-left: 40px; } #header #gnb .gnb_1dul {position: relative; display: flex; justify-content:flex-start;} #header #gnb .gnb_1dul .gnb_1dli {position: relative;} #header #gnb .gnb_1dul .none { display:none;} #header #gnb .gnb_1dul .gnb_1dli .gnb_1da {display: block; padding: 0 22px ; line-height:90px; height:90px; text-align: center; color: #fff; font-size: 18px; font-weight:500; transition:0.25s; position: relative;} #header #gnb .gnb_1dul .gnb_1dli .gnb_1da:after {content:''; display: block; width: 0; height: 3px; background-color: #51b9fc; position: absolute; left: 50%; bottom: 0; transform:translateX(-50%);transition:.5s;} #header #gnb .gnb_1dul .gnb_1dli .gnb_1da:hover:after {width: 220px;} #header #gnb .gnb_2dul:hover {border-top:3px solid #51b9fc; margin-top:-3px; } /* gnb - depth2 */ #header #gnb .gnb_2dul {display: none; position: absolute; top: 100%; left: 50%; width: 220px; margin-left: -110px; height: auto; background-color: #fff; padding: 20px 15px; border-right: 1px solid #f9f9f9; border-left: 1px solid #f9f9f9; border-bottom: 1px solid #ddd; z-index: 99; } #header #gnb .gnb_2dul .gnb_2dli { position: relative; z-index: 1;} #header #gnb .gnb_2dul .gnb_2dli .gnb_2da {display: block; line-height: 35px; font-size: 16px; color: #787878; font-weight: 400; transition:0.5s; position: relative;} #header #gnb .gnb_2dul .gnb_2dli .gnb_2da:hover, #header #gnb .gnb_2dul .gnb_2dli.active .gnb_2da {color: #222; font-weight:500;} #header #gnb .gnb_2dul .gnb_2dli:after {content:''; display: block; width: 0; height: 1px; background-color: #222; position: relative ; left: 50%; bottom: 0; transform:translateX(-50%);transition:.5s;} #header #gnb .gnb_2dul .gnb_2dli:hover:after {width: 100%;} #header .gnb_plus {padding-left: 7px;} #header .gnb_plus a { padding-left: 20px; font-size: 16px; color: #fff; opacity: .8;} #header .gnb_plus a:first-child {position: relative;} #header .gnb_plus a:first-child:after {content:''; display: block; width: 1px; height: 15px; background-color: #fff; opacity: .5; position: absolute; top: 3px; left: 0;} .gnb_dim { display: none; position: fixed; top: 0; left: 0; z-index: 9; width: 100%; height: 100%; /*background-color: rgba(0,0,0,.8);*/} #header.stiky {position: fixed; background-color:#fff; } #header.stiky .hd_top {padding-left: 0;} #header.stiky .top_util {top:30px; color:#151515;} /*#header.stiky .open_sitemap {}*/ #header.stiky .hd_top_menu {padding-left: 25px;} #header.stiky .hd_top_menu a {font-size: 20px; padding-right:0;} #header.stiky .gnb_plus {display: none;} #header.stiky .top_util .txt {display: none;} #header.stiky #gnb .gnb_1dul .none { display: block;} #header.stiky #gnb .gnb_1dul .gnb_1dli .gnb_1da {display: block; padding: 0 18px ; line-height:90px; height:90px; text-align: center; color: #222; font-size: 18px;font-family:'Nanum Gothic'; font-weight:500; transition:0.25s; position: relative;} #header.stiky #gnb .gnb_1dul .gnb_1dli .gnb_1da:after {content:''; display: block; width: 0; height: 3px; background-color: #51b9fc; position: absolute; left: 50%; bottom: 0; transform:translateX(-50%);transition:.5s;} #header.stiky #gnb .gnb_1dul .gnb_1dli .gnb_1da:hover:after {width: 220px;} #header.stiky #gnb .gnb_2dul:hover {border-top:3px solid #51b9fc; margin-top:-3px; } #header.stiky .open_sitemap .active span{background-color:transparent;} #header.stiky .open_sitemap .active span:before{top:0;transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);} #header.stiky .open_sitemap .active span:after{bottom:0;transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);} #header.stiky #logo a .fix{display:none;} #header.stiky #logo a .stiky{display:inline-block; } #top_trigger { display:none !important;} .m_icon { display:block; padding-top: 15px; padding-left: 15px; padding-bottom:5px;} .m_icon p{ width: 80%; display: inline-block;} .m_icon p img{ width:90%} }