@charset "utf-8"; @import url('../../jquery/css/jquery.mCustomScrollbar.min.css');/*냄기기*/ .clear:after{content: ''; display: block; clear: both;} body.over{overflow:hidden; width:100vw; height:100vh;} .mCSB_scrollTools .mCSB_draggerRail{background-color: #ededed; width: 8px; border-radius:0; -webkit-border-radius:0;} .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background-color: #26b8b3; width: 8px; border-radius:0; -webkit-border-radius:0;} .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{height:8px;} .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:8px;} .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{width:100%;} .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color: #26b8b3;} /*--헤더,GNB영역--*/ #header{width:100%; position: relative; top:0; background: #fff; z-index:100;} #header .headerWrap{width:70rem; max-width: calc(100% - 2rem);max-width: -webkit-calc(100% - 2rem); height: 5rem; margin: auto; } #header .logo{float: left;} #header .logo a{display: block;margin: .7rem 3.5rem 1.5rem 0;} #header .gnbWrap{position: absolute; left:50%; transform: translateX(-50%); width:auto;} #gnb #head_menu > li{float: left;} #gnb #head_menu > li > a{font-size: 1.05rem; font-weight: 700; padding: 1.6rem 1.8rem 1.6rem; display:block;position: relative;} #gnb #head_menu > li > a::after{content: ''; width:4.5rem; height: .25rem; background: #22bcac; display: block; position: absolute; left:50%; bottom:0;transform: translateX(-50%) scaleX(0); transition: 0.5s;} #gnb #head_menu > li > a:hover::after, #header #gnb #head_menu > li > a:focus::after{transform: translateX(-50%) scaleX(1);} #gnb #head_menu > li > a::before{content: ''; width:.25rem; height: .25rem; border-radius: 50%; background: #22bcac; display: block; position: absolute; left:50%; top:0;transform: translateX(-50%); transition: 0.5s;opacity: 0; transition: 0.5s;} #gnb #head_menu > li > a:hover::before, #header #gnb #head_menu > li > a:focus::before{opacity: 1; top:20px;} #gnb #head_menu > li.active > a::after {transform: translateX(-50%) scaleX(1);} #gnb #head_menu > li.active > a::before, #gnb #head_menu > li > a.active::before {opacity: 1; top:20px;} #gnb #head_menu .submenu{position: absolute; left:50%; top:5rem; transform: translateX(-50%); width:70rem; max-width:100vw; padding: 0; z-index: 50;height:0;overflow:hidden;opacity:0;visibility:hidden;} #gnb #head_menu > li > .submenu::before{content: ''; width:100vw; height: inherit; min-height: 500px; background-color: #fff; background-image:url(../img/common/sub_title_bg.png); background-repeat: no-repeat; background-position: left 30px; position: absolute; left:50%; top:-1px;bottom:0;transform: translateX(-50%); z-index: -10; box-shadow: 0 20px 20px -8px rgba(0,0,0,0.2);border-top:1px solid #e4e4e4; } #gnb #head_menu > li.active > .submenu{display :table; height: auto; overflow: visible; opacity:1; visibility:visible; min-height: 550px;} #header .util {float:right; } #header .util > *{float:left; margin: 1.8rem .2rem 1.5rem; } #gnb .submenu .title {position:relative; min-height: 700px; display:table-cell;vertical-align:top;width:12.7rem;color:#222;font-size:1.05rem;font-family:'Nanum Square',sans-serif; font-weight:900;padding-top:5rem;border-right: 1px solid #e4e4e4; font-weight: 700;} #gnb [class*="lnb"] .submenu .title::before{content:''; position: absolute; right:2.25rem; bottom:4rem; width: 76px; height: 76px;} #gnb .lnb1 .submenu .title::before{background:url(../img/main/sub_title_01_00.png) no-repeat; } #gnb .lnb2 .submenu .title::before{background:url(../img/main/sub_title_02_00.png) no-repeat; } #gnb .lnb3 .submenu .title::before{background:url(../img/main/sub_title_03_00.png) no-repeat; } #gnb .lnb4 .submenu .title::before{background:url(../img/main/sub_title_04_00.png) no-repeat; } #gnb .lnb5 .submenu .title::before{background:url(../img/main/sub_title_05.png) no-repeat; } #gnb .lnb6 .submenu .title::before{background:url(../img/main/sub_title_06.png) no-repeat; } #gnb [class*="lnb"] .submenu .title::after{content:''; position: absolute; left:-1rem; bottom:4rem; width:380px; height:380px; } #gnb .submenu .title span {position:relative;display:block;color:#555;font-weight:300;line-height:1.6;font-size:1rem;padding-top:1rem;margin-top:0rem; word-break:keep-all; font-family:"Noto Sans KR", sans-serif; font-weight: 300; color: #222;} #gnb .submenu .title span::before{content: ''; width: 42px; height: 1px; background: #333; position: absolute; left:0; top:-4.5rem;} #gnb .submenu .depth2 {display:table-cell;vertical-align:top;width:calc(70rem - 12.7rem); width:-webkit-calc(70rem - 12.7rem); padding: 0 2.5rem 2rem; position:relative; } #gnb .submenu .depth2::before{content:''; position: absolute; right:0; bottom:2.5rem; background:url(../img/main/submenu_bg.png) no-repeat;width:17rem; height:8rem;} #gnb .submenu .depth2 > li {float:left; width:calc(25% - 2.5rem); width:-webkit-calc(25% - 2.5rem); margin-right: 2.5rem; margin-top: 2.5rem;} #gnb .submenu .depth2 > li > a{height: 63px; display: block; background: #eff7f7; padding: .8rem; position: relative; font-weight: 700; font-size:.9rem;} #gnb .submenu .depth2 > li > a:hover, #header #gnb .submenu .depth2 > li > a:active, #header #gnb .submenu .depth2 > li > a:focus{background: #009b9d; color:#fff;} #gnb .submenu .depth2 > li > a::before{content: ''; width:10px; height: 10px; background: #009b9d;position: absolute; left:0; top:0;transition: 0.3s;} #header #gnb .submenu .depth2 > li > a:hover::before, #header #gnb .submenu .depth2 > li > a:active::before,#header #gnb .submenu .depth2 > li > a:focus::before{background: #acddcf;} #gnb .submenu .depth2 .depth3{padding: .3rem;} #gnb .submenu .depth2 .depth3 ul li{display: block;} #gnb .submenu .depth2 .depth3 ul li a{display: block; padding: .3rem 0 .3rem .5rem;} #gnb .submenu .depth2 .depth3 ul li a span{position: relative; } #gnb .submenu .depth2 .depth3 ul li a span::after{content: ''; width:100%; height: 1px; background: #333; position: absolute; left:0; bottom:-5px; opacity: 0; transition: 0.2s;} #gnb .submenu .depth2 .depth3 ul li a:hover span::after, #header #gnb .submenu .depth2 .depth3 ul li a:active span::after, #header #gnb .submenu .depth2 .depth3 ul li a:focus span::after{opacity: 1;} #gnb .submenu .depth2 .depth3 ul li a:hover, #header #gnb .submenu .depth2 .depth3 ul li a:active, #header #gnb .submenu .depth2 .depth3 ul li a:focus{ font-weight: 500;} #gnb .submenu .depth2 > li:nth-child(1),#gnb .submenu .depth2 > li:nth-child(2),#gnb .submenu .depth2 > li:nth-child(3),#gnb .submenu .depth2 > li:nth-child(4){} #gnb .submenu .depth2 > li:nth-child(5){min-height: 0;} #header .util .lang{position: relative; z-index: 5;} #header .util .lang.active{display: block;position:absolute; left:90%; top:0; z-index:500;} #header .util .lang button{font-weight: 500; font-size: .7rem; position: relative; padding:.25rem 1.8rem .25rem 0;font-weight:600;} #header .util .lang button i{margin: .2rem;font-size: .7rem;} #header .util .lang button span::before{content: ''; width: 0px;height: 0px;border-top:.3rem solid #333;border-bottom:.2rem solid none;border-right: .2rem solid transparent;border-left: .2rem solid transparent; position: absolute; right: 0.3rem; bottom: .65rem;} #header .util .lang > div {display:none; position: absolute; left:0; top:1.6rem; width:100%;} #header .util .lang > div a {display:block; width: 100%; padding-left:0.2rem; background:#fff; border:1px solid #ebebeb; font-size: .7rem; font-weight:600;} #header .util .lang > div a i{margin: .2rem;font-size: .7rem;} #header .util .lang > div a:nth-of-type(1){border-bottom:none;} #header .util .lang > div a:nth-of-type(2){border-top:none;} #header .util .lang > div a:hover, #header .util .lang > div a:focus{background:#009b9d; border: 1px solid #009b9d; color:#fff; font-weight:400} #header .util .search-btn:hover, #header .util .search-btn:focus{color:#009b9d;} #header .util > a i{font-size: 1.5rem;} #header .util > a:hover i, #header .util > a:focus i{color:#009b9d;} /*--전체메뉴 영역--*/ .ALLMn{display: block; width:1.2rem; height: 1.5rem; margin:1.75rem 0 1.6rem .4rem !important} .allMn_button{display: block; width:1.2rem; height: 3px; background: #333;margin-top: .3rem;position: relative; } .allMn_button::before{content:''; display: block; width:1.2rem; height: 3px; background: #333;margin-top: .3rem; position: absolute; left:0; top:3px;} .allMn_button::after{content: ''; display: block; width:1.2rem; height: 3px; background: #333;margin-top: .4rem; position: absolute; left:0; top:10px;} .ALLMn_cls{position: absolute; right:1.8rem; top:1.8rem; z-index: 500; display: block; } .ALLMn_cls img.allMn_button_cls{width:100%; height: 100%; display:block;} #header .util::before{content:''; position:absolute; left:0; top:0; background:rgba(0,0,0,0.58); width:100vw; height:100vh; display: none;} #allgnb{position: absolute; left:50%; top:0; transform: translateX(-50%); width:100vw; height: 0; background: #fff; margin: 0 !important; /*transition:padding .5s, height .5s;*/overflow:hidden; z-index:150; display:none; visibility: hidden;} #allgnb::before{content:''; width:100vw; left:50%; transform:translateX(-50%); top:0; background:#fff; position:absolute; box-shadow: 0 20px 20px -8px rgba(0,0,0,0.2); height:0; z-index:-1;} #allgnb.active::before {height:auto; bottom:0;} #allgnb.active{height: 90vh;visibility: visible; display:block; overflow:visible; padding:5rem 0 4.5rem;} #head_menu_all > [class*="lnb"]:last-child > a::before {display:none;} #header .scroll{width:96%; margin: auto; height: 100%; position: relative; z-index:1} #allgnb.active::after{transition:0.2s; content:''; position:absolute; right:5rem; bottom:4.5rem; width:339px; height:159px; background-size: contain; background:url(../img/main/allgnb_bg.png) no-repeat; z-index:0;} #head_menu_all{width:70rem; max-width:100%; margin: auto; } #head_menu_all > li{margin-top: 2.5rem;display: table; width:100%;} #head_menu_all > li:first-of-type{margin-top: 0;} #head_menu_all > li > a{display: table-cell; width: 10rem; background: #009b9d; color:#fff; text-align: center; vertical-align: top; font-size: 5.5rem; padding:2.2rem 1rem; font-family:'Nanum Square',sans-serif; font-weight:900; position: relative; } #head_menu_all > li > a:after{content:''; display: block; width: 2rem; height: 1px; background: #192333; position: absolute; right:-10%; top:3.5rem;} #head_menu_all > li > a:before{content:''; display:block; width: 30%; height: 1px; background: #Fff; position: absolute; left: 50%; top: 4.5rem; transform: translateX(-50%); opacity:0; transition: .2s; } #head_menu_all > li:last-of-type > a:before{content:''; display:block; width: 30%; height: 1px; background: #fff; position: absolute; left: 50%; top: 4.5rem; transform: translateX(-50%); opacity:0; transition: .2s; } #head_menu_all > li > [class*="sub"]{display: table-cell; width: calc(100% - 10rem);width:-webkit-calc(100% - 10rem); padding: 0 2.5rem 0 5.2rem; height:auto;} #head_menu_all > li > [class*="sub"] [class*="sub"]{float: left; width:calc(25% - 2.5rem); width:-webkit-calc(25% - 2.5rem); margin-right: 2.5rem;} #head_menu_all > li > [class*="sub"] [class*="sub"] > a{display: block; background: #fff; padding: .8rem; position: relative; font-weight: 700; font-size:.9rem; transition: 0.3s; border: 1px solid #dfe6eb;} #head_menu_all > li > [class*="sub"] > li > a:hover, #head_menu_all > li > [class*="sub"] > li > a:active, #head_menu_all > li > [class*="sub"] > li > a:focus{border:1px solid #008d7e; color:#008d7e;} #head_menu_all > li > a:hover:before, #head_menu_all > li > a:focus:before{opacity:1; top:5rem} #head_menu_all > li:last-of-type > a:hover:before, #head_menu_all > li:last-of-type > a:focus:before{opacity:1; top:5rem} #head_menu_all > li > [class*="sub"] [class*="sub"] >div{padding:0.3rem;} #head_menu_all > li > [class*="sub"] [class*="sub"] li{display: block;} #head_menu_all > li > [class*="sub"] [class*="sub"] li a{display: block; padding: .3rem .5rem; } #head_menu_all > li > [class*="sub"] [class*="sub"] li a span{position: relative; } #head_menu_all > li > [class*="sub"] [class*="sub"] li a span::after{content: ''; width:100%; height: 1px; background: #333; position: absolute; left:0; bottom:-5px; opacity: 0; transition: 0.2s;} #head_menu_all > li > [class*="sub"] [class*="sub"] li a:hover span::after, #head_menu_all > li > [class*="sub"] [class*="sub"] li a:active span::after,#head_menu_all > li > [class*="sub"] [class*="sub"] li a:focus span::after{opacity: 1;} #head_menu_all > li > [class*="sub"] [class*="sub"] li a:hover, #header .util #head_menu_all > li > [class*="sub"] > [class*="sub"] li a:active, #header .util #head_menu_all > li > [class*="sub"] > [class*="sub"] li a:focus{ font-weight: 500;} #head_menu_all > li > .sub01 > .sub04{min-height:20rem;} /* #head_menu_all > li > .sub02 > .sub04{border:1px solid red;} #head_menu_all > li > .sub03 > .sub04{border:1px solid red;} #head_menu_all > li > .sub04 > .sub04{border:1px solid red;} #head_menu_all > li > .sub05 > .sub04{border:1px solid red;} #head_menu_all > li > .sub06 > .sub04{border:1px solid red;} */ /*검색영역*/ #header .searchWrap{transition: 0.3s; position: absolute; margin:0; left:50%; top:5rem; transform:translateX(-50%); width:105vw; height:0; opacity:0; visibility: hidden; overflow:hidden; background: #fbfcfe; border-top:1px solid #e4e4e4; box-shadow: 0 20px 20px -8px rgba(0,0,0,0.1);} #header .searchWrap.active{height:8rem; opacity:1; visibility: visible; overflow:hidden; } #header .searchWrap .search_box{width:70rem; margin:auto; position:relative; max-width:calc(100% - 2rem);max-width:-webkit-calc(100% - 2rem);} #header .searchWrap .close{position: absolute; right:0; top:50%; transform: translateY(-50%); font-size:1.7rem} #header .search_box .search-area{width:50.5rem; margin:auto; margin-top:3rem; max-width:calc(100% - 2rem);max-width:-webkit-calc(100% - 2rem);} #header .search_box input{padding: 4px 0;border:none; border-bottom:1px solid #333; background: transparent; width:90%; font-size:.9rem; font-weight:500; color:#606060;} #header .search_box .in_search_btn{background:#192333; color:#fff; padding: .5rem 1rem; border-radius:1.2rem; } #header .search_box .in_search_btn i{padding-right: .2rem; font-size:1.1rem; vertical-align:middle;} #header .search_box .in_search_btn span{ font-size:.8rem; font-weight:500; vertical-align:middle;} #header .search_box .in_search_btn:hover,#header .search_box .in_search_btn:focus{background:#009b9d;} #header .search_box .search-area{position:relative;} #header .search_box .search-area::before{content:''; position: absolute; left: 0; bottom:4px; width: 0; height: 1px; background:#0eb48d; animation: search 2s linear; animation-delay:0.5s;} #header .search_box .search-area:hover::before,#header .search_box .search-area:focus::before{width: 120px;} /*footer영역*/ #footer{width:100%; background:#192333; position: relative;} #footer .container{width: 70rem; margin: auto; padding:2.5rem 0; color:#bbbaba;} #footer .foot_left{float:left; width:calc(100% - 12rem);width:-webkit-calc(100% - 12rem);} #footer .foot_right{float:right;width:12rem;} #footer .foot_left .util{margin-left:-1rem;} #footer .foot_left .util li{display:inline-block; } #footer .foot_left .util li a{display:block; padding:0 1rem; position:relative; font-size:.8rem; font-weight: 400; width:100%;} #footer .foot_left .util li a:after{content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); background:#494d53; width: 1px; height: .7rem;} #footer .foot_left .util li:last-of-type a:after{display:none;} #footer .foot_left .util li a:before{display:none; content:''; position: absolute; left:50%; transform:translateX(-50%); bottom: -1px; width: 70%; height:1px; background:#bbbaba;} #footer .foot_left .util li a:hover:before, #footer .foot_left .util li a:focus:before{display:block} #footer .foot_left .util li a.important{color:#5bb6eb;} #footer .foot_left .util li a.important:before{background:#5bb6eb;} #footer .foot_left .info-wrap{margin-top:2rem; font-weight:400; overflow: hidden} #footer .foot_left .info-wrap .info{float: left; width: 80%; } #footer .foot_left .info-wrap .web{float: left; width :20%; display: block;} #footer .foot_left .info-wrap .web img{max-width: 100%;} #footer .foot_left .info br{display:none;} #footer .foot_right .sns > li{float:left;padding-left:1.2rem;} #footer .foot_right .sns > li:first-child{padding-left:0;} #footer .foot_right .sns > li a{font-size:.8rem; color: #fff; position: relative; display: block;} #footer .foot_right .sns > li a i{font-size:1.2rem;} #footer .foot_right .sns > li a:before{display:block; opacity:0; content:''; position:absolute; left:50%; transform:translate(-50%); bottom:0px; background:#fff; width: 10px; height:1px; transition:0.3s;} #footer .foot_right .sns > li a:hover:before,#footer .foot_right .sns > li a:active:before,#footer .foot_right .sns > li a:focus:before{opacity:1; bottom:-5px;} #footer .foot_right .related{position: relative; } #footer .foot_right .related button{padding: .5rem 0 .5rem .5rem ; border:1px solid #797e87; width:100%; margin-top:1.25rem; text-align:left; color:#ebebeb; font-weight:400;} #footer .foot_right .related button i{ float:right; margin-right: .5rem; margin-top:.2rem;} #footer .foot_right .related .scroll{ display:none; width: 100%; position:absolute; left:0; bottom:2.3rem; padding: 0.5rem; background:#fff; border:1px solid #eaeaea;} #footer .foot_right .related .scroll a{display: block; color:#777; position:relative;} #footer .foot_right .related .scroll a span{display: inline-block; position: relative;} #footer .foot_right .related .scroll a span::before{display: none; content:''; position:absolute; left:0; bottom:0; width: 100%; height:1px; background:#000;} #footer .foot_right .related .scroll a:hover span::before, #footer .foot_right .related .scroll a:focus span::before, #footer .foot_right .related .scroll a:active span::before{display:block;} #footer .foot_right .related .scroll a:hover,#footer .foot_right .related .scroll a:focus,#footer .foot_right .related .scroll a:active{color:#010101;} #footer .foot_right .related button.active,#footer .foot_right .related button:hover, #footer .foot_right .related button:focus{background:#fff; border:1px solid #eaeaea; color:#555;} #footer .foot_right .related button.active i,#footer .foot_right .related button:hover i,#footer .foot_right .related button:focus i,#footer .foot_right .related button:active i{transform: rotate(180deg);} #footer .top_btn{transition:.5s; display: block; text-align:center; opacity:0; visibility:hidden; overflow:hidden; width:60px; height: 1rem; background:#1a3e80; position: fixed; right:24px; bottom:220px;z-index: 80;} #footer .top_btn i{padding:1rem; color:#fff; font-size:1rem;} #footer.effect .top_btn{transition:.5s; opacity:1; height:60px; visibility: visible;} @media(max-width:1850px){ #gnb #head_menu > li > a{padding: 1.6rem 1.45rem 1.6rem;} } @media(max-width:1680px){ #gnb #head_menu > li > a{padding: 1.6rem 1.15rem 1.6rem;} #header .util .lang.active{left:89%;} } @media(max-width:1530px){ #header .logo a{margin: .7rem 1rem 1.5rem 0;} #header .gnbWrap{width:37.5rem;} #gnb #head_menu > li > a{padding: 1.6rem 1.1rem 1.6rem;} #header .util .lang.active{left:88%;} .ALLMn_cls{right: 1.4rem} } @media(max-width:1450px){ #gnb .submenu .title{padding-left:1rem;} #allgnb{width:calc(100% - 3rem);width:-webkit-calc(100% - 3rem);} #head_menu_all > li > [class*="sub"] [class*="sub"]{width:calc(33% - 2.5rem);width:-webkit-calc(33% - 2.5rem);} #head_menu_all > li > [class*="sub"] > .sub04 {min-height: 0;} #head_menu_all > li > .sub01 > .sub03{min-height:19rem;} #head_menu_all > li > .sub04 > .sub03{min-height:15rem;} #header .searchWrap .close{right:3rem; } #header .util .lang.active{left:82%;} #footer .foot_left .info-wrap .info{float: none; width: 100%; margin-bottom: 1rem} #footer .foot_left .info-wrap{text-align:center;} #footer .foot_left .info-wrap .web{float: none; width :100%; display: block; text-align: center;} } @media(max-width:1400px){ } @media(max-width:1350px){ } @media(max-width:1220px){ /*#header .gnbWrap{width:35rem;} #gnb #head_menu > li > a{padding: 1.6em 1rem 1.6rem;}*/ #head_menu_all > li > [class*="sub"] [class*="sub"]{width:calc(50% - 2.5rem);width:-webkit-calc(50% - 2.5rem);} #head_menu_all > li > [class*="sub"] > .sub03 {min-height: 0;} #head_menu_all > li > .sub06 > .sub02{min-height:15rem;} #header .searchWrap .close{right:1.5rem;} .ALLMn_cls{right: 1.2rem} #footer .foot_left{float:none; margin:auto; width:100%;} #footer .foot_right{float:none; margin: 1rem auto 0} #footer .foot_left .info{text-align:center; word-break:keep-all;} #footer .foot_left .util li{text-align:center;} #footer .foot_left .util{text-align:center;} #gnb .submenu .title span{font-size:.9rem} #footer .foot_left .info-wrap{margin-top:0} } @media(max-width:1120px){ #head_menu_all .mCSB_inside>.mCSB_container{margin-right:0;} #head_menu{display:none; visibility: hidden;} #head_menu_all > li > [class*="sub"] [class*="sub"]{width:calc(100% - 2.5rem); width:-webkit-calc(100% - 2.5rem); float:none;} #head_menu_all > li > [class*="sub"] [class*="sub"] .lnb-detail{max-width:calc(100% - 1rem); max-width:-webkit-calc(100% - 1rem); word-break:keep-all} #head_menu_all > li > [class*="sub"] .sub02 {min-height: 0;} #head_menu_all > li > [class*="sub"]{ padding: 0 1rem 0 3rem;} #header .scroll{width:calc(100% - 1rem);width:-webkit-calc(100% - 1rem); margin-left:0;} #allgnb.active{width: 70%; left:inherit;right:0; transform: translateX(0); z-index:150 !important;height: 100vh; overflow:visible;padding:5rem 0 3rem; background:#fff;} #allgnb::before{display:none;} #allgnb.active .scroll::before{display:block;} #head_menu_all > [class*="lnb"] { margin-top:0;} #head_menu_all > [class*="lnb"] > a {background:#555;position:relative;display: inline-block;padding:1.15rem 1rem; font-size: 1.25rem;} #head_menu_all > [class*="lnb"]:last-child > a::before {content:''; position:absolute; left:0; top:0; transform: none; background:#555; width: 100%; height:50vh; z-index:-1; display:block; opacity:1} #head_menu_all > li.active { margin:0;} #head_menu_all > li.active > a{background: #009b9d; display: inline-block;padding:1rem 1rem 9rem;} #head_menu_all > [class*="lnb"] > [class*="sub"]{position: absolute; left:10.5rem; top:0; display:none;} #head_menu_all > li.active > [class*="sub"]{display:block; height:100%;} #head_menu_all > li > a::after{display:none;} #head_menu_all > li.active > a::after{top:2rem; display:block;} #header .util .lang{display:none;} #header .util .lang.active{display: block;position:absolute; left:32.5%; top:0; z-index:500;} #header .util.active::before{display:block;} #allgnb.active::after{right:2rem; bottom:3rem; width:200px; height:120px;background-size: contain;} #header .searchWrap{top:0; z-index:100; width:110vw;} #header .search_box .search-area{margin-top:.5rem} #header .searchWrap.active{ height:10rem;} #header .searchWrap .close{right:inherit; left:50%; top:inherit; bottom:-1.75rem; transform: translateX(-50%); } #header .search_box{padding:2rem 3rem;} #header .search_box input{width:calc(100% - 5rem); width:-webkit-calc(100% - 5rem);} .ALLMn_cls{right:1.3rem} #header .search_box .search-area{position:relative;} #header .search_box .search-area::before{content:''; position: absolute; left: 0; bottom:4px; width: 120px; height: 1px; background:#0eb48d; animation: search 2s linear; animation-delay:0.5s;} @keyframes search{ 0% {width:0;} 100% {width:120px;} } #footer .foot_left .util{width:32rem; margin:auto;} #footer .foot_left .info{margin-top:1rem;} #footer .foot_left .util li:last-of-type{display:none;} #footer .foot_left .util li:nth-of-type(4) a:after{display:none;} #footer .top_btn{right:0px; bottom:40px;} } @media(max-width:1020px){ .ALLMn{display: block; width:1.2rem; height: 1.5rem; margin:1.7rem 0 1.6rem .4rem !important} } @media(max-width:950px){ } @media(max-width:900px){ #footer .foot_left .util{margin:auto; text-align:center;} #footer .foot_left .util li:nth-of-type(6) a:after{display:none;} #footer .foot_left .util li a{text-align:center;} } @media(max-width:850px){ #allgnb.active{width: 85%; margin-right:0;} #head_menu_all > li > a{width: 9rem;} #head_menu_all > [class*="lnb"] > [class*="sub"]{left:9.5rem;} #head_menu_all > li > [class*="sub"] [class*="sub"]{width:calc(100% - 1.5rem);width:-webkit-calc(100% - 1.5rem);} #header .scroll{width:calc(100% - .5rem);width:-webkit-calc(100% - .5rem); margin-left:0;} #head_menu_all > li.active > a::after{width:1.5rem} #header .util .lang.active{left:17.5%;} .ALLMn_cls{right: 1.8rem} } @media(max-width:767px){ #allgnb.active{width: calc(100% - 1.5rem);width: -webkit-calc(100% - 1.5rem); margin-right:0;} #head_menu_all > [class*="lnb"] > a {padding: 1.25rem;} #header .util .lang.active{left:5.5%;} #header .search_box{padding:2rem 2rem;} #footer .foot_left .info br{display:block;} } @media(max-width:641px){ #allgnb.active{width: calc(100% - 1.5rem); width: -webkit-calc(100% - 1.5rem); margin-right:0;} #head_menu_all > [class*="lnb"] > a {padding: 1.25rem;} #head_menu_all > li > a{width: 8.5rem; font-size: 1rem;} #head_menu_all > [class*="lnb"] > [class*="sub"]{left:9.5rem;} #head_menu_all > li > [class*="sub"]{ padding: 0 .75rem 0 1rem;} #header .util .lang.active{left:6.5%;} .ALLMn_cls{right:1.5rem} #footer .foot_left .util{width:26rem;} #footer .foot_left .util li:nth-of-type(3) a:after{display:none;} #footer .foot_left .util li:nth-of-type(4) a:after{display:block;} #footer .foot_left .util li:nth-of-type(6) a:after{display:none;} } @media(max-width:541px){ #head_menu_all > li > [class*="sub"] {width:-webkit-calc(100% - 8.5rem); width: calc(100% - 8.5rem);} #head_menu_all > [class*="lnb"] > a{width: 7.5rem; font-size: 1.1rem; padding: 1.75rem 0.55rem;} #head_menu_all > [class*="lnb"] > [class*="sub"]{left:8.75rem;} #head_menu_all > li > [class*="sub"] [class*="sub"] {width:calc(100% - 1rem); width:-webkit-calc(100% - 1rem);} #head_menu_all > li > [class*="sub"]{ padding: 0 .5rem 0 .75rem; } #head_menu_all > li.active > a::after{top:2rem; display:block; width:1.25rem; right:-7%} .ALLMn_cls{right: 1.2rem} #footer .foot_left .util{width:22rem;} #footer .foot_left .util li:nth-of-type(2) a:after{display:none;} #footer .foot_left .util li:nth-of-type(4) a:after{display:none;} #footer .foot_left .util li:nth-of-type(3) a:after{display:block;} #footer .foot_left .util li:nth-of-type(6) a:after{display:none;} } @media(max-width:431px){ #header .logo a{margin: .7rem .3rem 1.5rem 0;} #head_menu_all > [class*="lnb"] > a{width: 5.5rem; font-size: 1rem; padding: 1rem 0.15rem;} #head_menu_all > [class*="lnb"] > [class*="sub"]{left:6rem;} #head_menu_all > li > [class*="sub"] [class*="sub"] {width:calc(100% - 1rem); width:-webkit-calc(100% - 1rem);} #head_menu_all > li.active > a{padding:1rem 0.15rem 5rem;} #head_menu_all > li > [class*="sub"]{ padding: 0 .25rem 0 .25rem; width:calc(100% - 5.5rem); width:-webkit-calc(100% - 5.5rem);} #header .util .lang.active{left:8%;} #header .searchWrap.active{ height:8rem;} #header .search_box .in_search_btn{padding: .2rem .6rem; border-radius:1.1rem; } #header .search_box .in_search_btn i{ font-size: 0.85rem; vertical-align:middle;} #header .search_box .in_search_btn span{font-size: 0.8rem; vertical-align:middle;} #header .search_box input{font-size:0.8rem;} #header .search_box{padding: 1.5rem .85rem;} #header .search_box .search-area{max-width: calc(100% - 1rem);max-width: -webkit-calc(100% - 1rem);} #header .search_box input{width:calc(100% - 4rem);width:-webkit-calc(100% - 4rem)} #header .searchWrap .close{font-size:1.2rem} #header .search_box .search-area::before{bottom:0;} .ALLMn_cls{right:.75rem; top:1.75rem;} #header .search_box .search-area{margin-top:.5rem} #footer .foot_left .util li a{padding-right:0.5rem;} #footer .foot_left .util{width:20rem;} #footer .foot_left .util li a:after{right:.1rem} #footer .foot_left .util li a:after{right: -5px;} #head_menu_all > li.active > a::after{width:.75rem} } @media(max-width:388px){ #header .logo a {margin: .7rem 0 1.5rem 0;} .ALLMn{margin:1.75rem 0 1.6rem .2rem !important} #footer .foot_left .util{width:300px;} #footer .foot_left .util li a:after{right: -6px;} #footer .foot_left .util li:nth-of-type(2) a:after{display:none;} #footer .foot_left .util li:nth-of-type(3) a:after{display:none;} #footer .foot_left .util li:nth-of-type(5) a:after{display:none;} #footer .foot_left .util li:nth-of-type(6) a:after{display:none;} #footer .foot_left .util li:nth-of-type(4) a:after{display:block;} }