/******************************************************** ■ 사이트 공통 ********************************************************/ html{font-size:20px;} body{font-size:1rem;} /*-----폰트-----*/ #wrap{font-size:0.9rem;} #menuAll h3{font-size:1.6rem;} #menuAll .mobile_top ul li > a{font-size:1.4rem;} #header .header_inner #nav ul li ul li a, #menuAll .mobile_top ul li ul li ul li a{font-size: .8rem;} #header .header_inner .top_menu{font-size: 0.7rem;} /*헤더*/ #wrap{ position:relative; overflow:hidden; line-height: 1.4;} #wrap img { border:none; } #wrap i{vertical-align:middle;} #header{ width:100%; z-index:100;position: fixed; top:0; left: 0; width:100%; z-index:10;-webkit-transition:all .3s;transition:all .3s;} #header .header_inner{position:relative; width:1400px; margin:0 auto; height:3rem;} #header .header_inner:after{content:""; display:block; clear:both;} #header h1{position:absolute; left:1rem; top:50%; transform:translateY(-50%); z-index:10;} #header h1 img{max-width: 9rem; vertical-align:middle;} /*사이트맵 버튼*/ #header .btn-gnb-menu{position:absolute; right:0; top:0; font-size:0; line-height:1;width:3rem; height:3rem; cursor:pointer; z-index:9999;text-align:center;} #header .btnAll {position:relative; width:1.5rem; height:1.5rem; top:50%; transform:translateY(-50%);outline: none; z-index:9999;} #header .btnAll span { display: block; width: 100%; height: 0.15rem; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; background:#fff;} #header .btnAll > span:nth-child(1) { top: 0; left:0;width:1.35rem;} #header .btnAll > span:nth-child(2) { top: 0.5rem; left:0; width:1.35rem;} #header .btnAll > span:nth-child(3) { top: 1rem; left:0; width:1.35rem;} #header.open .btn-gnb-menu{} #header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;} #header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;} #header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;} /*gnb*/ #header .header_inner .top_menu{position: absolute; right: 0;top:50%; z-index:10; font-weight:500; letter-spacing:0.02em;transform:translateY(-50%);} #header .header_inner .top_menu li{position: relative; display:inline-block; margin-right: 1.2rem; color: #fff; } #header .header_inner .top_menu li:last-child{margin-right: 0;} #header .header_inner .top_menu li a{display: block; color:#ffb306; font-weight: 200; vertical-align: top; } #header .header_inner .top_menu .lan{} #header .header_inner .top_menu .lan a{color: #fff;display:inline-block;} #header .header_inner .top_menu .lan .select_btn{background: #ffb306;} /*탑메뉴*/ #header .header_inner #nav {text-align:right;} #header .header_inner #nav ul {clear:both; position:relative; box-sizing:border-box;height:100%;text-align:center;} #header .header_inner #nav ul li { display:inline-block;width: auto; float:none; vertical-align:top;position:relative;} #header .header_inner #nav ul li {position:relative; } #header .header_inner #nav > ul > li:last-child:after{background: none;} #header .header_inner #nav > ul > li > div > a{color: #fff; font-weight: 500; margin:0 2.5rem;font-size:1rem;} #header .header_inner #nav ul li a{text-align:center; display:inline-block; height:3rem; line-height:3rem;position:relative;} #header .header_inner #nav > ul > li > div > a:before{content : ""; display : block; position : absolute; left : 0; bottom:0; width :0%; height : 3px; background : #2ec1ff;} #header .header_inner #nav ul li a strong{font-weight: 600; } #header .header_inner #nav ul li.active a:before{width:100%; left:0%;} #header .header_inner #nav ul li.on ul{background:rgba(255,255,255,0.9)} /*탑메뉴 2차*/ #header .header_inner #nav ul li ul {z-index: 100;position: absolute; display:none; width:100%; height: auto; left:0; top:3rem; box-sizing:border-box; padding:1.5rem 0; border-top:none; text-align:center;animation-name: slide_down; animation-duration:0.5s; animation-duration: linear; animation-direction: alternate; animation-fill-mode: forwards; box-shadow: 5px 5px 15px rgb(0 0 0 / 10%);} #header .header_inner #nav ul li ul li {display:block;padding:0 0.3rem 0.8rem 0.3rem; } #header .header_inner #nav ul li ul li:last-child{padding-bottom:0;} #header .header_inner #nav ul li ul li a{display:inline-block; position:relative; height:auto; font-weight:normal; line-height:25px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;text-align:center; letter-spacing:0.2px;font-size:0.9rem;} #header .header_inner #nav ul li ul li a:after {content:''; position:absolute; left:0; bottom:0; width:0; height:3px; background:#2ec1ff; transition:.5s ease-out;} #header .header_inner #nav ul li ul li a:hover{position: relative;color:#2ec1ff;} #header .header_inner #nav ul li ul li a:hover:after{width: 100%;} #header .header_inner #nav ul li ul li a strong{font-weight:normal;} @keyframes slide_down { from { transform: translateX(0px) translateY(-30px); opacity:0; } to { transform: translateX(0px) translateY(0px); opacity:1; } } /*-----언어별-----*/ .select_btn{position:absolute;right:4.5rem;top:50%;transform:translateY(-50%); } .select_btn a{color:#fff;} .option_list {position: absolute; top:3.5rem; right:4rem; z-index:10; display:none;} .option_list li a {display:block; background:#fff; border-radius:10px; width: 7rem; height:40px; line-height:40px; text-align:center;} .lang{font-size:0.85rem; line-height:1;} .lang img{margin-right:10px; vertical-align:middle; width:1.15rem;} .lang i{margin-left:5px; vertical-align:middle;} #header.scroll .select_btn a{color:#333;} #header.scroll .option_list li a {box-shadow: 0px 1px 3px 0px rgb(54 74 99 / 30%);} @media (max-width:1400px){ .lang{font-size:0.8rem;} } @media (max-width:1030px){ .lang{font-size:0.9rem;} .select_btn{right:3.5rem;} .option_list {right:3rem;} } /* 헤더 오버스크롤 */ #header.scroll{background:#fff;} #header.scroll:before{content : ""; display : block; position : absolute; left : 0; bottom:0; width :100%; height : 1px; background : #eee;} #header.scroll .header_inner #nav ul li a, #header.scroll .option_list a{color:#333;} #header.scroll .btnAll span{background:#333;} #header.scroll .header_inner #nav ul li ul{background:#fff;} #header.scroll.open .btnAll > span{background:#fff;} /*사이트맵*/ #header #navi{background:#fff; position:fixed; top:-100%; left:0; width:100%; height:100%; padding-top:0; overflow:hidden; z-index:200; transition:top 0.45s;} #header.open #navi{transition:top 0.45s; top:0px;} #menuAll .menuAllbg{position:absolute; right:0; top:0; width:40%; height:100%; overflow: hidden;} #menuAll .menuAllbg span{position:absolute;left:0;top:0;width:100%;height:100%;display:inline-block;z-index:5;} #menuAll .menuAllbg span img{border:0;width:auto;height:100%;position:absolute;z-index:1;left:50%;top:0; transform:translateX(-50%);} #menuAll .top_menu{display:none;} #menuAll .mobile_top{width:100%; height:100%; position:relative; background: #fff url('/images/default/main/sitemap2.jpg') no-repeat 0 0; display: flex; flex-direction: column;} #menuAll .mobile_top .mbtop{width: 60%; height:100%; display: flex; flex-wrap: wrap; padding-left:10%; } #menuAll .mobile_top .mbtop > li{width: calc(100%/3 - 2%); position:relative;} #menuAll .mobile_top .mbtop > li:before{content : ""; display : block; position : absolute; left : 0; top:-180px; width :1px; height : 1100px; background : #ddd;} #menuAll .mobile_top .mbtop > li > a{position:relative; color:#1F6DE3; font-size:1.3rem; line-height:1; font-weight: 600; padding-left:1rem;} #menuAll .mobile_top .mbtop > li > a:before{content : ""; display : block; position : absolute; left : 0; top:20%; width :4px; height : 60%; background : #1F6DE3;} #menuAll .mobile_top .mbtop > li{ margin:15% 1% 0;} #menuAll .mobile_top .mbtop > li:nth-of-type(4), #menuAll .mobile_top .mbtop > li:nth-of-type(5), #menuAll .mobile_top .mbtop > li:nth-of-type(6){margin-top:0;} #menuAll .mobile_top ul li > a{display:block; padding:1rem 0; width:100%; position:relative; transition: all .5s; -webkit-transition: all .5s;font-size:0.9rem;} #menuAll .mobile_top ul li ul{margin-top:1rem; margin-left: 1rem;} #menuAll .mobile_top ul li ul li{float:none; width:100%; position:relative; margin-top:0.7rem;} #menuAll .mobile_top ul li ul li:first-child{margin-top:0;} #menuAll .mobile_top ul li ul li a{ display:block; background:none; text-align: left; padding:0; color:#666;} #menuAll .mobile_top ul li ul li ul{margin:.5rem 0 1rem;} #menuAll .mobile_top ul li ul li ul li{margin-top: .2rem;} #menuAll .mobile_top ul li ul li ul li:before{content : ""; display : block; position : absolute; left :0px; top:10px; background:#666; width: .2rem; height:.2rem; border-radius:50%; } #menuAll .mobile_top ul li ul li ul li a{color:#777; font-weight:300; padding-left: .5rem; font-weight: 400;} #menuAll .mobile_top ul li ul li a strong{position: relative; color: #000; font-weight: 400;} @media (max-width:1400px){ /*-----폰트-----*/ #header .header_inner #nav > ul > li > div > a {font-size: .95rem;} #header .header_inner #nav ul li ul li a{font-size:0.8rem;} /*탑메뉴*/ #wrap{overflow-x:hidden;} #header .header_inner{width:100%;} #header .header_inner .top_menu {right: 1rem;} #header .header_inner{width:100%; padding:0 1rem;} #header .header_inner h1{left:1rem; width:9rem;} .h_fixed h1 a{background-position:0 -1.2rem !important;} #header .header_inner h1 a{width:9rem;height:1.2rem;overflow:hidden;} #header .over h1 a {transition: all .3s ease-in-out; background-size:cover; background-position:0 -1.2rem;} #header .header_inner #nav > ul > li > div > a {margin: 0 1.5rem;} #header .header_inner .sitemap{right:1rem;} #header .header_inner #nav ul li ul{padding:1rem 0;} } @media (max-width:1100px){ #header .header_inner #nav > ul > li > div > a {margin: 0 1rem;} } @media (max-width:1030px){ html{font-size:16px;} body{font-size:1rem} .web{display:none;} .tablet{display:block;} /*-----폰트-----*/ #wrap{font-size:1rem;} #navi h3{font-size:1.2rem;} #navi ul.mbtop li a {font-size:1.15rem;} #navi ul.mbtop li ul li a {font-size:1.1rem;} /* 헤더 */ #header h1 img{width: 14rem;} #header .header_inner {height: 4rem;} #header .header_inner .top_menu{display: none;} #header .header_inner #nav{display:none; } #header .btn-gnb-menu{width:4rem; height:4rem;} /*사이트맵 버튼*/ #header .btn-gnb-menu{display:block; position:absolute; right:0; top: 0; width:4rem; height:4rem; cursor:pointer; z-index:9999; text-align:center; } #header .btnAll {position:relative; width:1.5rem; height:1.3rem; top:50%; transform:translateY(-40%);outline: none; z-index:9999;margin-top:0;} #header .btnAll span { display: block; width: 100%; height: 2px; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; } #header .btnAll > span:nth-child(1) { top: 0;} #header .btnAll > span:nth-child(2) { top: 0.5rem; } #header .btnAll > span:nth-child(3) { top: 1rem;} #header.open .btn-gnb-menu{display:block; background: #2578D6 ;} #header.open .btnAll > span{background-color: #fff;} #header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 1.5rem;} #header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 1.5rem;} #header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 1.5rem;} /*전체메뉴*/ .menuAllbg{display:none;} #header #navi{ background : #fff; overflow-y:scroll;} #header #navi:after{content:'';display : block; position : absolute; left :0; top:0; width :100%; height : 4rem;background:#fff;} #menuAll .mobile_top{width:100%;height:auto; background:transparent; margin-top:3.6rem;border-top:1px solid #ddd;} #menuAll .mobile_top:before, #menuAll .mobile_top:after{display: none;} /*1차*/ #menuAll .mobile_top .mbtop{border: 0; width: 100%; padding:0; } #menuAll .mobile_top .mbtop > li{width: 100%; margin:0 !important;} #menuAll .mobile_top .mbtop > li:before{display:none;} #menuAll .mobile_top .mbtop > li > a{border:0; border-radius: 0; color:#333; } #menuAll .mobile_top .mbtop > li > a:before{display:none;} #menuAll .mobile_top .mbtop > li > a.newBlank:after{font-size:1.1rem; left:70px;} #navi ul.mbtop {width:100%; margin:0; padding:0;} #navi ul.mbtop li{margin:0; float:none; width:100%; border-bottom:1px solid rgba(0, 0, 0, .1); position:relative;} #navi ul.mbtop li:after{ content :"\e913"; display : block; position : absolute; right:1.5rem; top:1rem; font-size:1.15rem; font-family:'xeicon'; font-weight:500; color:#333; } #navi ul.mbtop li.nosub:after{display:none;} #navi ul.mbtop > li > a {padding:0; background: none; text-align:left; display:block; width:100%; padding: 1rem;box-sizing:border-box; font-size:1.15rem; font-weight: 700; color:#262626;} #navi ul.mbtop li.open_li{position:relative;} #navi ul.mbtop > li.open_li > a{} #navi ul.mbtop li.open_li:after{ content :"\e91a";} /*2차*/ #navi ul.mbtop li ul {display:none; float:none; background-color:#efefef;; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding: 2rem 1.5rem; margin-top:0; margin-left: 0;} #navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box; background: none; padding-left:0;} #navi ul.mbtop li ul li a {background:url(none); height:auto; padding-left:0; font-size:1rem; color:#333;} #navi ul.mbtop li ul li:after, #navi ul.mbtop li ul li:before{display:none;} /*3차*/ #navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;} #navi ul.mbtop li ul li ul li {display:none;} } @media (max-width:767px){ html{font-size:15px;} body{font-size:1rem} .mob{display:block;} /*탑메뉴*/ #header h1{left: 1rem;} #header h1 img, #footer .f_add_bx img{max-width: 7rem;} #header .header_inner{height:3.6rem;} #header .btn-gnb-menu{width:3.6rem; height:3.6rem;} /*전체메뉴*/ #menuAll .sns_mobile li a{height: 3.6rem; line-height: 3.6rem;} #menuAll .sns_mobile li:last-child a{line-height: 3.7rem;} } /*푸터*/ #footer{clear:both; width: 100%;background:#fff; } #footer .fbar{width:1400px; margin:0 auto;display:flex;justify-content:space-between; height:4.4rem; line-height:4.4rem;} #footer .fbar h3{display:flex;justify-content:center; align-items:center;} #footer .fbar h3 img{display:inline-block; vertical-align:middle; width:6.5rem} #footer .fbar .sns{display:flex; align-items: center; font-size:0.75rem;} #footer .fbar .sns ul{overflow:hidden; margin-left:5px;} #footer .fbar .sns ul li{float:left;margin-left:10px; } #footer .fbar .sns ul li a{display:block; width:2rem; height:2rem; text-align:center; display: flex; align-items: center; justify-content: center; background:#33353E; border-radius:0.4rem; color:#fff; font-size:1rem;} #footer .fbar .sns ul li a i{vertical-align:middle;} #footer .address{background:#33353E; color:#fff; width:1400px; margin:0 auto; position:relative;display:flex;justify-content:space-between; padding:2.5rem 0; font-size:0.8rem; z-index:0;} #footer .address:before{content : ""; display : block; position : absolute; left : -30%; top:0; width :200%; height : 100%; background : #33353E; z-index:-1;} #footer .address .info{display:flex;} #footer .address .info h4{font-size:1rem; margin-right:4rem; position:relative; line-height:1;} #footer .address .info h4:before{content : ""; display : block; position : absolute; right : -3rem; top:10px; width :2.5rem; height : 1px; background : #fff;} #footer .address .info b{display:block; font-weight:400; margin-bottom:3px; } #footer .address .info span{padding:0 10px;} #footer .address .info strong{font-size:0.9rem; font-weight:600;} #footer .copyright{background:#33353E; color:#fff; width:1400px; margin:0 auto; position:relative;justify-content:space-between; padding:2.5rem 0; font-size:0.8rem; z-index:0;text-align: center;} #footer .copyright:before{content : ""; display : block; position : absolute; left : -30%; top:0; width :200%; height : 100%; background : #33353E; z-index:-1;} #footer .copyright .info{display:flex;} #footer .copyright .info h4{font-size:1rem; margin-right:4rem; position:relative; line-height:1;} #footer .copyright .info h4:before{content : ""; display : block; position : absolute; right : -3rem; top:10px; width :2.5rem; height : 1px; background : #fff;} #footer .copyright .info b{display:block; font-weight:400; margin-bottom:3px; } #footer .copyright .info span{padding:0 10px;} #footer .copyright .info strong{font-size:0.9rem; font-weight:600;} @media (max-width:1400px){ #footer .fbar{width:100%;padding:0 1rem;} #footer .address{width:100%; padding:2.5rem 1rem;} #footer .copyright{width:100%; padding:2.5rem 1rem;padding-top: 4px;} } @media (max-width:1030px){ #footer .address{display:block;} #footer .address .info{display:block;} #footer .address .info h4{margin-bottom:10px; padding-top:15px;} #footer .address .info h4:before{right:auto; left:0; top:0; width:20px;} #footer .address .info:nth-of-type(2){margin-top:3rem;} #footer .copyright{display:block;} #footer .copyright .info{display:block;} #footer .copyright .info h4{margin-bottom:10px; padding-top:15px;} #footer .copyright .info h4:before{right:auto; left:0; top:0; width:20px;} #footer .copyright .info:nth-of-type(2){margin-top:3rem;} } @media (max-width:767px){ }