#header{position: absolute; top: 0; left: 0; width: 100%; z-index: 9999;} .nav{position: relative; width: 100%; z-index: 100; margin: 0 auto; left: 50%; transform: translate(-50%, -80px); padding: 0 3%; height: 100px; transition: .4s;} .nav.in-view{transform: translate(-50%, 0%);} .nav:hover #cssmenu ul > li > a{} .nav:hover .sch-btn a{color:#474747 !important; border-color:#474747 !important;} .nav:hover .sch-btn a:hover{color:#000 !important;} .nav .hd-wrap{position: relative; width: 100%; height: 100%; margin: 0 auto; padding-left: 10px; display: flex; align-items: center; justify-content: space-between; transition: .4s;} .nav .cs-logo{display:flex;align-items: center;height:100%;transition:.4s;} .nav .cs-logo a{display: inline-block; width: 357px; height: 55px; transition: all 0.8s ease;} .nav .cs-logo a img.logo_b{display: none;} .nav.active{box-shadow:0px 1px 3px rgba(0,0,0,12%);} .nav:after{display:block; content:''; clear:both;} #cssmenu{display: inline-flex;margin:0 auto;padding-top: 20px;height:100%;align-items: center;} #cssmenu a{display:block;} #cssmenu > ul{display: flex; justify-content: center; align-items: center; gap: 35px; height: 60px; padding: 0 40px; transition: all 0.8s ease;} #cssmenu > ul > li{position:relative; text-align:left;} #cssmenu > ul > li > a{font-size: 18px; font-weight: 600; text-align: center; color: #fff; height: 100%; border-radius: 100px; padding: 12px 25px; line-height: 1; position: relative; display: inline-block; overflow: hidden;} #cssmenu > ul > li > a > span i{font-weight: 400;} #cssmenu > ul > li > a > span:not(.on) {position: absolute; padding: inherit; left: 0; top: 0; opacity: 0; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(150%); -ms-transform: translateY(150%); transform: translateY(150%);} #cssmenu > ul > li > a > .on {display: inline-block; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;} #cssmenu > ul > li > a:hover{color: #222;} #cssmenu > ul > li > a:hover > .on {opacity: 0; -webkit-transform: translateY(-150%); -ms-transform: translateY(-150%); transform: translateY(-150%);} #cssmenu > ul > li > a:hover:hover > span:not(.on) {opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);} #cssmenu > ul > li > a:hover{background-color: #fff;} #cssmenu > ul > li > ul{margin: 1px 0 0; position: absolute; top: 100%; left: 0; width: 200px; padding: 15px 17px; opacity: 0; visibility: hidden; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; z-index: 4; -webkit-border-radius: 20px; border-radius: 20px; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; text-align: left; background-color: #101010; box-shadow: 0 0 10px rgba(32, 36, 84, .1);} #cssmenu > ul > li:nth-child(5) > ul{width: 210px;} #cssmenu > ul > li:nth-child(2) > ul, #cssmenu > ul > li:nth-child(5) > ul{width: 170px;} #cssmenu > ul > li:nth-child(3) > ul{width: 220px;} #cssmenu > ul > li > ul > li{position: relative; list-style: none; margin: 0; opacity: 0; visibility: hidden; -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); -webkit-transition: all 0.2s cubic-bezier(0.4, 0.28, 0.31, 1.28) 0s; transition: all 0.2s cubic-bezier(0.4, 0.28, 0.31, 1.28) 0s;} #cssmenu > ul > li > ul > li > a{font-size: 16px; line-height:1.9; text-transform: none; letter-spacing: 0em; word-spacing: 0px; font-style: normal; font-weight: 500; display: block; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; padding: 3px 20px 3px 0; color: #fff; opacity: .7;} #cssmenu > ul > li:hover > ul{opacity: 1; visibility: visible; -webkit-transform: rotateX(0); -ms-transform: rotateX(0); transform: rotateX(0);} #cssmenu > ul > li:hover > ul > li { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);} #cssmenu > ul > li:hover > ul > li:nth-child(2n+1) {-webkit-transition-delay: 0.1s; transition-delay: 0.1s;} #cssmenu > ul > li:hover > ul > li:nth-child(2n+2) {-webkit-transition-delay: 0.15s; transition-delay: 0.15s;} #cssmenu > ul > li:hover > ul > li:nth-child(2n+3) {-webkit-transition-delay: 0.2s; transition-delay: 0.2s;} #cssmenu > ul > li:hover > ul > li:nth-child(2n+4) {-webkit-transition-delay: 0.25s; transition-delay: 0.25s;} #cssmenu > ul > li:hover > ul > li:nth-child(2n+5) {-webkit-transition-delay: 0.3s; transition-delay: 0.3s;} #cssmenu > ul > li:hover > ul > li:nth-child(2n+6) {-webkit-transition-delay: 0.35s; transition-delay: 0.35s;} #cssmenu > ul > li:hover > ul > li:nth-child(2n+7) {-webkit-transition-delay: 0.4s; transition-delay: 0.4s;} #cssmenu > ul > li:hover > ul > li:nth-child(2n+8) {-webkit-transition-delay: 0.45s; transition-delay: 0.45s;} #cssmenu > ul > li > ul > li > a:hover{ opacity: 1;} .nav{width: 100%; height: 100px; transition:.4s;} .nav .nav-right{display: flex; align-items: center;} /* 메인_상단 고정 */ #mVisual .nav{position:fixed;top:0;} #mVisual .top-fixed{width:100%;position:fixed;height:100px;top:0;} #mVisual .top-fixed .nav{width: 100%; height: 80px; margin: 0; transform: translateX(-50%); border-radius: 0 0 30px 30px; background: #fff; box-shadow: 0px 5px 23px 4px rgba(0, 0, 0, 0.1);} #mVisual .top-fixed .nav .util ul.util_l li a{color: #333;} #mVisual .top-fixed .cs-logo a img.logo_w{display: none;} #mVisual .top-fixed .cs-logo a img.logo_b{display: block;} #mVisual .top-fixed #cssmenu > ul > li > a{color: #222;} #mVisual .top-fixed #cssmenu > ul > li > a:hover{background: #eef6ec;} #mVisual .top-fixed .nav .nav-right .lang_box a{border: 1px solid #eee;} #mVisual .top-fixed .nav .nav-right .lang_box a p::before{background: #eee; opacity: 1;} /* 서브일때-흰색 */ .sub-hd{} .sub-hd #cssmenu ul > li > a{color: #222;} .sub-hd .nav .sch-btn a{color:#777 !important;} .sub-hd .nav .sch-btn a:hover{color:#000 !important;} /* 번역 */ .nav .nav-right .lang_box{padding: 20px 70px 0 0;} .nav .nav-right .lang_box a{display: flex; justify-content: center; align-items: center; gap: 18px; padding: 8px 14px; border-radius: 50px; border: 1px solid rgba(255,255,255,0); background: rgba(255,255,255,.1); transition: all .4s;} .nav .nav-right .lang_box a img{} .nav .nav-right .lang_box a p{position: relative; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 18px; color: #cdcdcd;} .nav .nav-right .lang_box a p::before{content: ''; position: absolute; top: 50%; left: -9px; transform: translateY(-50%); display: block; width: 1px; height: 20px; background: #fff; opacity: .2;} .nav .nav-right .lang_box a:hover{background: rgba(255,255,255,.2);} /* 로그인,로그아웃,회원가입 */ .nav .util{padding-top: 20px;} .nav .util ul.util_l{display: flex; margin-right: 20px;} .nav .util ul.util_l li{} .nav .util ul.util_l li a{position: relative; display: inline-block; overflow: hidden; display: flex; align-items: center; padding: 12px 10px; font-weight: 600; font-size: 14px; color: #fff; opacity: .5; transition:all 0.4s ease;} .nav .util ul.util_l li a:hover{opacity: 1;} .nav .util ul.util_l li a .txt > span:not(.on) {position: absolute; padding: inherit; top: 50%; left: 18px; opacity: 0; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(150%); -ms-transform: translateY(150%); transform: translateY(150%);} .nav .util ul.util_l li a .txt > .on {display: inline-block; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;} .nav .util ul.util_l li a:hover .txt > .on {opacity: 0; -webkit-transform: translateY(-150%); -ms-transform: translateY(-150%); transform: translateY(-150%);} .nav .util ul.util_l li a:hover:hover .txt > span:not(.on) {opacity: 1; top: 50%; left: 18px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} /* 번역 */ .nav .nav-right .lang_box{} .nav .nav-right .lang_box a{display: flex; justify-content: center; align-items: center; gap: 16px; padding: 8px 14px; border-radius: 50px; border: 1px solid rgba(255,255,255,.2); transition: all .4s;} .nav .nav-right .lang_box a img{} .nav .nav-right .lang_box a p{position: relative; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 18px; color: #cdcdcd; line-height: 1.2; transition: all .4s;} .nav .nav-right .lang_box a:hover{border-color: rgba(255,255,255,1);} .nav .nav-right .lang_box a:hover p{color: #fff;} .nav .nav-right .lang_box a:hover img{-webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);} /*햄버거메뉴*/ .nav h1.pc-menu{position: relative;margin-left: 30px;} .nav h1.pc-menu button.pc-sm {position: relative; border-radius: 0; background: none; border: none;} .nav h1.pc-menu button.pc-sm img.all_icon_c{display: none;} .shadow{ -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .nav .nav_logo a img{opacity:0; transform:translate(20px, 0%); transition:all 1s 0.2s ease;} .nav .nav_logo.in-view a img{opacity:1; transform:translate(0, 0%); transition:all 1s 0.2s ease;} .nav #cssmenu > ul > li{opacity:0; transition:all 1s 0.2s ease;} .nav.in-view #cssmenu > ul > li{opacity:1; transition:all 1s 0.2s ease;} /*우측-전체메뉴*/ .allmenu_wr{position: relative; top: 0; left: 0; opacity: 0; visibility: hidden; z-index: 998;} .allmenu_wr.open{position: fixed; width: 100%; height: 100%; opacity: 1; visibility: visible;} .allmenu{display: none; position: fixed; left: 0; top: 0; vertical-align: middle; height: 100vh; width: 100%; backdrop-filter : blur(3px); z-index: 999;} .allmenu h1{position: relative; margin: 19px 0 0 3.6%; display: flex; align-items: flex-end; gap: 20px; z-index: 1;} .allmenu h1 > a{display: inline-block; width: 357px; height: 55px; text-indent: -9999px; background: url("/images/common/logo_w.svg") no-repeat; background-size: contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} .allmenu h1 .utile-wrap{} .allmenu h1 .utile-wrap > li{} .allmenu h1 .utile-wrap > li > a{color:#fff;font-family: 'Pretendard', sans-serif;font-weight:600;font-size: 18px;opacity:.8;transition:.3s;} .allmenu h1 .utile-wrap > li > a:hover{text-decoration:underline; opacity:1;} .allmenu h1 .utile-wrap > li > a > i{font-weight:normal;} .allmenu button.btn-x{position: absolute; right: 50px; top: 32px; display: inline-block; width: 30px; height: 30px; padding: 0; background-color: transparent; border: none; background: url('../images/common/close-large-line.svg') no-repeat 50% 50% /contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); z-index:4;} /* .allmenu_wr .lo_lang {display:none;} .allmenu_wr .lo_lang .util{} .allmenu_wr .lo_lang .util ul.util_l{display: flex; margin-right: 20px;} .allmenu_wr .lo_lang .util ul.util_l li{} .allmenu_wr .lo_lang .util ul.util_l li a{position: relative; display: inline-block; overflow: hidden; display: flex; align-items: center; padding: 12px 10px; font-weight: 600; font-size: 14px; color: #fff; opacity: .5; transition:all 0.4s ease;} .allmenu_wr .lo_lang .util ul.util_l li a:hover{opacity: 1;} .allmenu_wr .lo_lang .lang_box{} .allmenu_wr .lo_lang .lang_box a{display: flex; justify-content: center; align-items: center; gap: 18px; padding: 8px 14px; border-radius: 50px; border: 1px solid rgba(255,255,255,0); background: rgba(255,255,255,.1); transition: all .4s;} .allmenu_wr .lo_lang .lang_box a img{} .allmenu_wr .lo_lang .lang_box a p{position: relative;font-weight: 500;font-size: 13px;color: #cdcdcd;} .allmenu_wr .lo_lang .lang_box a p::before{content: ''; position: absolute; top: 50%; left: -9px; transform: translateY(-50%); display: block; width: 1px; height: 20px; background: #fff; opacity: .2;} .nav .nav-right .lang_box a:hover{background: rgba(255,255,255,.2);} */ .lo_lang {display:none;} .lo_lang .util ul.util_l{margin-right: 20px;} .lo_lang .util ul.util_l li a{color: #fff; opacity: .5;} .lo_lang .lang_box{} .lo_lang .lang_box a{display: flex; justify-content: center; align-items: center; gap: 18px; padding: 8px 14px; border-radius: 50px; border: 1px solid rgba(255,255,255,0); background: rgba(255,255,255,.1); transition: all .4s;} .lo_lang .lang_box a img{} .lo_lang .lang_box a p{position: relative;font-weight: 500;font-size: 13px;color: #cdcdcd;} .lo_lang .lang_box a p::before{content: ''; position: absolute; top: 50%; left: -9px; transform: translateY(-50%); display: block; width: 1px; height: 20px; background: #fff; opacity: .2;} .nav .nav-right .lang_box a:hover{} .nav .util ul.util_l li a .txt > span:not(.on) {position: absolute; padding: inherit; top: 50%; left: 18px; opacity: 0; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(150%); -ms-transform: translateY(150%); transform: translateY(150%);} .nav .util ul.util_l li a .txt > .on {display: inline-block; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;} .nav .util ul.util_l li a:hover .txt > .on {opacity: 0; -webkit-transform: translateY(-150%); -ms-transform: translateY(-150%); transform: translateY(-150%);} .nav .util ul.util_l li a:hover:hover .txt > span:not(.on) {opacity: 1; top: 50%; left: 18px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} .allmenu .allmenuwrap{position: relative; max-width: 1400px; width: 100%; margin: 50px auto 0; padding: 0 100px; z-index: 1;} .allmenu .allmenuwrap .boxwrap{padding: 3rem 0; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;border-bottom: 1px solid rgba(255, 255, 255, 0.2);transition: border-bottom-color 0.5s;overflow: hidden;transition:.3s;} .allmenu .allmenuwrap .boxwrap:hover{border-color:#fff;} .allmenu .allmenuwrap .boxwrap > h2{position: relative; width: 200px; padding-left: 40px; font-size: 34px; color: #fff; line-height: 1; font-weight: 600; color: #fff; transition:.3s;} .allmenu .allmenuwrap .boxwrap > h2 > span.num{position: absolute; top: 0; left: 0; display: inline-block; font-family: 'Poppins', sans-serif; font-size: 16px; color: #2c7bf2;} .allmenu .allmenuwrap .boxwrap > h2 > a{color:#fff; transition:.3s;} .allmenu .allmenuwrap .boxwrap:hover > h2 > a{color:#fff; opacity:1;} .allmenu .allmenuwrap .boxwrap > ul{display:flex;flex-wrap: wrap;row-gap: 10px;width:calc(100% - 200px);justify-content: flex-end;transition: all 0.4s;} .allmenu .allmenuwrap .boxwrap > ul > li{position:relative;box-sizing:border-box;} .allmenu .allmenuwrap .boxwrap > ul > li::before{content: ''; position: absolute; top: 0; left: 0; display: block; width: 6px; height: 6px; background: #2c7bf2; border-radius: 50%; opacity: 0; transition:all 0.4s ease;} .allmenu .allmenuwrap .boxwrap > ul > li + li{margin-left:4.2rem;} .allmenu .allmenuwrap .boxwrap > ul > li > a {position: relative; display: block; color: #fff; font-size: 19px; font-weight: 500; line-height: 1; opacity: .8; transition: .3s;} .allmenu .allmenuwrap .boxwrap > ul > li > ul{margin-top:10px;} .allmenu .allmenuwrap .boxwrap > ul > li > ul > li{} .allmenu .allmenuwrap .boxwrap > ul > li > ul > li > a{position: relative; font-size:15px; color:rgba(255,255,255,0.5); font-weight:300;} .allmenu .allmenuwrap .boxwrap > ul > li + li a::before{content: ''; position: absolute; top: 50%; left: -33px; transform: translateY(-50%); display: block; width: 1px; height: 15px; background: #fff; opacity: .5; pointer-events: none;} .allmenu .allmenuwrap .boxwrap > ul > li > a:hover{opacity: 1;} .allmenu .allmenuwrap .boxwrap > ul > li:hover::before{top: -8px; left: -8px; opacity: 1;} .allmenu_wr .bg_wr{position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: #101010; opacity: 0; visibility: hidden; z-index: 997;} .allmenu_wr .bg_wr.open{opacity: .9; visibility: visible;} /* MOBILE */ .mobileMenu{display: none; position: absolute; top: 0; right: 10px; z-index: 101;} .mobileMenu .mo_btn{position: relative; display: flex; align-items: center; justify-content: center; width: 47px; height: 47px; transition: all ease 0.5s;} .mobileMenu img{width: 18px; transition: all .4s;} .mobileMenu img.all_menu_b{display: none;} #gnbM{display: none; position: absolute; top: 0; right: -260px; width: 260px; background: #fff; z-index: 1002; box-shadow: none; border-left: 1px solid #f4f4f4;} #gnbM .mUtil{padding: 12px;} #gnbM .mUtil > a{font-size: 16px; font-weight: 600; color: #222;} #gnbM .mUtil > a i{margin-right:8px; color: #002279;} #gnbM .mobileMenuXbt{position: absolute; top: 18px; right: 20px; opacity: .3; transition:all 0.4s ease;} #gnbM .mobileMenuXbt img{height:18px; -webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);} #gnbM .mobileMenuXbt:hover{opacity: .7;} #gnbM .gnbDiv a{display: block;} #gnbM .gnbDiv .one, #gnbM .gnbDiv .oneOnly{padding: 15px 20px; font-weight: 600; font-size: 16px; color: #222;} #gnbM .gnbDiv .one.on{} #gnbM .gnbDiv .two{width: 90%; margin: 0 auto; padding: 10px; background: #00173a; border-radius: 12px;} #gnbM .gnbDiv .two .twoD{padding: 10px 8px; font-size: 14px; color: #fff;} #gnbM .gnbDiv .two .twoD i{color: #fff; opacity: .6;} .dimdBg{display: none; position: absolute; top: 0; left: 0; width: 100%; background: rgba(0,0,0,0.5); z-index: 99;} .dimdBg.on{display: block;} #header.fixed .mobileMenu img{-webkit-filter: none; filter: none;} @media (min-width: 1920px){ #header{left: 50%; transform: translateX(-50%); max-width: 1920px; margin: 0 auto; display: block;} } @media (max-width: 1920px){ #header{left: 0; transform: translateX(0); max-width: none; margin: 0;} } @media (max-width: 1600px){ .nav .cs-logo a{width: 318px;height: 28px;} #cssmenu > ul{padding: 0 20px; gap: 15px;} #cssmenu > ul > li > a{font-size: 17px;} #cssmenu > ul > li > ul{width: 180px;} #cssmenu > ul > li:nth-child(2) > ul, #cssmenu > ul > li:nth-child(5) > ul{width: 130px;} #cssmenu > ul > li > ul > li > a{font-size: 15px;} .nav{padding: 0 40px 0 30px;} .nav .cs-logo a{width: 300px; height: 48px;} .allmenu h1{margin: 22px 0 0 2.7%;} .allmenu h1 > a{width: 300px; height: 48px;} .allmenu button.btn-x {right: 2.5%; top: 30px;} .allmenu .allmenuwrap {width: 95%;} } @media (max-width: 1400px){ .nav{height: 90px; padding: 0 40px;} .nav .hd-wrap{gap: 20px;padding-left: 0;} .nav .cs-logo a{gap: 14px; width: 280px;height: 45px;} .nav .nav-right .lang_box{padding: 10px 30px 0 0;} .nav .nav-right .lang_box a{padding: 6px 10px;} .nav .nav-right .lang_box a img{width: 14px;} .nav .nav-right .lang_box a p{font-size: 14px;} .nav .nav-right .lang_box a p::before{left: -7px; height: 16px;} .nav .util{padding-top: 10px;} #cssmenu > ul{padding: 0 16px; gap: 8px;} #cssmenu > ul > li > a{font-size: 16px; padding: 12px 16px;} .nav .util ul.util_l{margin-right: 10px;} .nav h1.pc-menu{margin-left: 20px;} .nav h1.pc-menu button.pc-sm img{width: 22px;} } @media (max-width: 1200px){ #cssmenu{display:none;} .nav{height: 70px; padding: 0 34px;} .nav .cs-logo a{width: 258px;height: 42px;} .nav .nav-right .lang_box{padding: 10px 30px 0 0;} .nav .nav-right .lang_box a{gap: 12px; padding: 7px 11px;} .nav .nav-right .lang_box a p{font-size: 15px;} .nav .util ul.util_l{margin-right: 5px;} .nav .util ul.util_l li a{padding: 12px 6px;} .nav h1.pc-menu{margin-left: 14px;} .hdWrap{height: auto;} .hdWrap.scrollFx{height:auto;} .hdWrap.scrollFx .nav{height:70px; border-radius: 0 0 15px 15px;} .allmenu .allmenuwrap{padding: 0 40px;} .allmenu h1{margin: 14px 0 0 2.8%;} .allmenu h1 > a{width: 258px; height: 42px;} .allmenu button.btn-x{width: 25px; height: 25px; right: 2.5%; right: 20px;} .allmenu .allmenuwrap .boxwrap{padding: 35px 0;} .allmenu .allmenuwrap .boxwrap > h2 {width: 200px; font-size: 26px;} .allmenu .allmenuwrap .boxwrap > ul {width: calc(100% - 200px);} .allmenu .allmenuwrap .boxwrap > ul > li::before{width: 4px; height: 4px;} .allmenu .allmenuwrap .boxwrap > h2 > span.num{font-size: 14px;} .allmenu .allmenuwrap .boxwrap > ul > li > a{font-size: 17px;} .allmenu .allmenuwrap .boxwrap > ul > li + li{margin-left: 40px;} .allmenu .allmenuwrap .boxwrap > ul > li + li a::before{left: -20px;} } @media (max-width: 1024px){ .nav{padding: 0 28px 0 34px;} } @media (max-width: 991px){ .allmenu .allmenuwrap .boxwrap {padding: 25px 0;} .allmenu .allmenuwrap .boxwrap > h2 {width: 200px;font-size: 24px;} .allmenu .allmenuwrap .boxwrap > ul {width: calc(100% - 200px);} .allmenu .allmenuwrap .boxwrap >ul > li + li {margin-left: 30px;} .allmenu .allmenuwrap .boxwrap > ul > li > a {font-size: 16px;} .allmenu .allmenuwrap .boxwrap > ul > li + li a::before{left: -14px;} .allmenu .allmenuwrap .boxwrap > ul > li + li a:after {left: -18px; font-size: 18px;} .allmenu button.btn-x > span {padding-left: 36px;} .allmenu button.btn-x > span:before, .allmenu button.btn-x > span:after {height: 2px; width: 30px;} } @media (max-width: 768px){ .nav{height: 50px; padding: 0 30px 0 20px;} .nav .util, .nav .nav-right .lang_box {display:none;} .nav h1.pc-menu {margin-left:0;} .nav .cs-logo a{width: 234px;height: 38px; margin-top: 10px;} .nav h1.pc-menu button.pc-sm{margin-left: 5px;} .nav h1.pc-menu button.pc-sm img{width: 18px;} .hdWrap.scrollFx .nav{height:60px; border-radius: 0 0 15px 15px;} /* .allmenu_wr .lo_lang {display: flex;align-items: center;margin-left: 20px;margin-top: 40px;} */ .lo_lang {display: flex;align-items: center;margin-left: 20px;margin-top: 20px;} .lo_lang .lang_box a{padding: 6px 10px;} .lo_lang .lang_box a img{width: 13px;} .lo_lang .lang_box a p::before{height: 15px;} .lo_lang .util ul.util_l{margin-right: 15px;} .lo_lang .util ul.util_l li a{font-size: 14px;} .allmenu button.btn-x > span {font-size: 14px; line-height: 14px; padding-left: 25px;} .allmenu button.btn-x > span:before, .allmenu button.btn-x > span:after {width: 20px;} .allmenu h1 .utile-wrap > li > a {font-size: 15px;} .allmenu h1 > a{width:234px;height: 38px;position: relative;} .allmenu h1 {margin: 12px auto; width: 95%;align-items: flex-start; gap: 10px; flex-direction: column;} .allmenu button.btn-x{right: 3%; top:16px; width: 20px; height: 20px;} .allmenu .allmenuwrap{padding: 0 60px 0 20px;margin: 40px auto 0;} .allmenu .allmenuwrap .boxwrap{padding:20px 0;} .allmenu .allmenuwrap .boxwrap > h2 {width: 100%; padding-left: 26px; font-size: 18px;} .allmenu .allmenuwrap .boxwrap > h2 > span.num{top: 2px; font-size: 14px;} .allmenu .allmenuwrap .boxwrap > h2 > a br{display: none;} .allmenu .allmenuwrap .boxwrap > ul {width: 100%;justify-content: flex-start;row-gap: 10px;margin-top: 10px;} .allmenu .allmenuwrap .boxwrap > ul > li > a {font-size: 14px;} } @media (max-width: 500px){ .nav{padding: 0 20px;} .nav .cs-logo a{margin-top: 5px;} .nav .cs-logo a, .hdWrap.scrollFx .cs-logo a{width: 175px;height: 28px;} .nav h1.pc-menu{display: none} .allmenu .allmenuwrap{margin: 20px auto 0;} #gnbM, .mobileMenu{display:block} #gnbM .lo_lang{margin-left: 0; margin-top: 0;} #gnbM .lo_lang .lang_box a{background: #f8f8f9; border: 1px solid #eee;} #gnbM .lo_lang .lang_box a p::before{background: #999;} #gnbM .lo_lang .util ul.util_l{margin-right: 6px;} #gnbM .lo_lang .util ul.util_l li a{display: inline-block; padding: 6px 10px; border-radius: 50px; background: #222; color: #fff; opacity: 1;} }