@charset "utf-8"; /* ******************************************************* * filename : layout.css * description : 전체 레이아웃 CSS ******************************************************** */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /*Montserrat*/ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap'); body, a {-webkit-tap-highlight-color:rgba(0, 0, 0, 0)} body{ font-family: 'Montserrat','Noto Sans KR','돋움', Dotum, Arial, sans-serif!important; font-size:15px; color:#666; -webkit-text-size-adjust:none; word-break:keep-all; } html,body {width:100%;} #doc {position:relative;width:100%;min-width:320px;-webkit-text-size-adjust:none;overflow:hidden;max-width:2000px;margin:0 auto} body:not(.lang_kor){word-break:break-word;} /* ****************** LAYOUT ********************** */ body.lang_kor {word-break:keep-all; -webkit-word-break:keep-all} body.lang_eng {word-break:keep-all; -webkit-word-break:keep-all} #wrap {overflow:hidden; width:100%; min-width:320px; position:relative; } .area-box {max-width: 1830px; margin:0px auto; } .area {max-width: 1460px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */ .wrap_narrow {max-width: 1260px; margin: 0 auto;} .font-Montserrat {font-family: 'Montserrat', sans-serif;} .font-noto {font-family: 'Noto Sans KR', sans-serif;} .pc_only {display: block;} .main_color {color: #d21414;} @media all and (max-width:1024px) { .pc_only {display: none;} } /* -------- 공통 :: 버튼 -------- */ .cm-button-style04, .cm-button-style04 strong, .cm-button-style04 i {-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s; box-sizing:border-box; -webkit-box-sizing:border-box} .cm-button-style04 {position:relative; overflow:hidden; display:block; border:2px solid #cb3232; text-align:left; background-color:#cb3232; display:table; width:100%; height:100%} .cm-button-style04:before{ display:block; position:absolute; left:-130%; bottom:0; content:""; width:120%; height:150%; background:#c91f1f; border: 1px solid #c91f1f; /* opacity:0;filter:Alpha(opacity=0); */ transform:skew(-20deg); -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s } .cm-button-style04 strong{position:relative; left:0px; z-index:1; display:table-cell; color:#fff; font-size:16px; font-weight:600; text-indent:25px; width:100%; height:100%; vertical-align:middle} .cm-button-style04 i{position:absolute; top:0px; right:15px; line-height:60px; color:#fff; font-size:24px;} .cm-button-style04:hover{} .cm-button-style04:hover strong{color:#333;} .cm-button-style04:hover i{color:#333} .cm-button-style04:hover:before{left:-10%; opacity:1.0;filter:Alpha(opacity=100);} .cm-button-style04.btn-ac strong{text-indent:0; text-align:center} /*white btn*/ .cm-button-style04.btn_white{ background-color:#fff;} .cm-button-style04.btn_white strong{ color:#000;} .cm-button-style04.btn_white:before{ background-color:#cb3232;} .cm-button-style04:hover strong{ color:#fff} /* 버튼02 */ .business-btn-box{text-align:center; margin-top:85px;} .business-btn-box a{display:inline-block; width: 350px; height:70px; margin:0 5px; background-color:#ed1d25;} .business-btn-box a span {display:table; width: 100%; height:100%;} .business-btn-box a em {display:table-cell; vertical-align:middle; color: #fff; font-size: 16px; letter-spacing:-0.25px; } @media all and (max-width:800px){ .cm-button-style04 strong{ font-size:14px} } /* ****************** HEADER ********************** */ #header {position: absolute; height: 100px; top: 0; left: 0; width: 100%; z-index: 9999; transition: all .3s; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s; border-bottom: 1px solid rgba(255,255,255,0.2)} /* 배경위에 헤더가있으면 absolute변경 후 headerInnerWrap 배경삭제 */ .main-wrapper #header {width:calc(100% - 400px);} .fullpage-wrapper #header {position: fixed;} .sub-wrapper #headerInnerWrap {} #headerInnerWrap {position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:9999; -webkit-transition:background-color 0.3s;-moz-transition:background-color 0.3s;-o-transition:background-color 0.3s;-ms-transition:background-color 0.3s;transition:background-color 0.3s} #headerInner{position:relative; height:100%; margin:0px auto; -webkit-transition:padding 0.3s;-moz-transition:padding 0.3s;-o-transition:padding 0.3s;-ms-transition:padding 0.3s;transition:padding 0.3s} /* -------- Header :: Logo -------- */ #header .logo{position:relative; z-index:100; float:left; padding:27px 0; } /* padding값 적절히 바꿔주세요 */ #header .logo a{display:block; position:relative} #header .logo img{display:block; vertical-align:top;} #header .logo img.blue, #header .logo img.m_logo {position:absolute; top:0; left:0; opacity:0;filter:Alpha(opacity=0);} /* -------- Header :: UTIL BOX -------- */ .gnb_util {position: absolute; top: 0; right: 30px; z-index: 9999; opacity: 0.8;} .gnb_util > div { display:inline-block; vertical-align:middle;} .gnb_util .lang_link_container {position:relative; padding-right: 53px;} .gnb_util .btn_lang_link {background: none; border: 1px solid #fff; width: 143px; height: 50px; border-radius: 60px; margin: 25px 0; color: #fff; font-weight: 400; font-size: 16px; letter-spacing: -0.5px;} .gnb_util .btn_lang_link span {position:relative;} .gnb_util .btn_lang_link span i {vertical-align: middle; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s; padding-left: 20px;} .gnb_util .lang_link_container .lang_list {display: none; position: absolute; top: 50px; left:50%; margin-left: -98.5px; width: 143px; padding-top: 30px; padding-bottom: 12px; border: 1px solid #fff; text-align: center; border-radius: 0 0 35px 35px; border-top: 0;} .gnb_util .lang_link_container .lang_list li a {font-size: 14px; line-height: 26px; color: #fff; display: block; -webkit-transition: all 0.2s; -moz-transition: all 0.2s;-o-transition: all 0.2s; -ms-transition: all 0.2s;transition: all 0.2s;} .gnb_util .lang_link_container .lang_list li a:hover {color:#d21414; font-weight: 600;} .gnb_util .search_btn {padding-right: 20px;} .gnb_util .search_btn a {width: 50px; height: 50px; display: block; border: 1px solid #fff; border-radius: 50%; text-align: center;} .gnb_util .search_btn i.xi-search {color: #fff; font-size: 21px; line-height: 50px;} /* -------- Header :: UTIL BOX :: 검색버튼 -------- */ .blind {display:block; overflow:hidden; position:absolute; top:-1000em; left:0;} /*.sch_h_box {position:absolute; top:0; right:0px; z-index:99999;}*/ .sch_h_box .btn_sch_open {position:relative; display:block; width:50px; height:50px; background-size:cover; overflow:hidden; border: 1px solid #fff; border-radius: 50%; text-align: center; margin-right: 20px;} .sch_h_box .btn_sch_open:after {content:""; display:block; position:absolute; top: 50%; left:50%; transform: translate(-50%,-50%); width:15px; height:15px; background:url('../../img/search_btn.png') no-repeat 50% 50%; background-size: 100%;} .sch_h_box .sch_layer_wrap {display:none; position:fixed; top:0; left:0; width:100%; height: 100%; z-index:1;background: rgba(0,0,0,0.9);} .sch_h_box .sch_layer_wrap.on {display:block;} .sch_h_box .sch_layer_wrap .sch_layer_area {position:relative; max-width:760px; height: 100%; margin:0 auto; padding:175px 30px; overflow:hidden; opacity:0; transform:translateY(-20px); transition:all 0.2s ease-out;} .sch_h_box .sch_layer_wrap.on .sch_layer_area {opacity:1; transform:translateY(0); display: flex;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_tit {display:block; margin-bottom:25px; text-align:center;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_tit label {color:#6b67f5; font-size:32px; font-weight:600;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_form {position:relative; flex-basis: 74%;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_form input[type="text"] {width:100%; height:60px; padding:10px 80px 10px 20px; color:#333; font-size:18px; font-weight:600; text-align:left; border:2px solid #ddd; background:#fff; -moz-box-sizing:border-box; box-sizing:border-box; border-radius:97px; -webkit-appearance:none;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_form input[type="text"]::-webkit-input-placeholder {color:#000;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_form input[type="text"]::-moz-placeholder {color:#000;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_form input[type="text"]:-ms-input-placeholder {color:#000;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_form input[type="text"]:-moz-placeholder {color:#000;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_form button {position:absolute; top:16px; right:22px; display:block; width:25px; height:25px; text-indent:-999em; border:none; background-image:url('../../img/search_btn2.png'); background-repeat:no-repeat; background-size: 100%; background-position:50% 50%; background-color: rgba(255,255,255,0.4)} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_btm {text-align:center; margin-left: 5%;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_btm .btn_sch_close {position:relative; display:inline-block; min-width:160px; padding:20px 10px; font-size:0; text-align:center; border:1px solid #d6d6d6; border-radius:45px; outline:0; background:transparent; overflow:hidden; vertical-align:middle;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_btm .btn_sch_close span {display:inline-block; color:#969696; font-size:18px; font-weight:200; line-height:100%; vertical-align:middle;} .sch_h_box .sch_layer_wrap .sch_layer_area .sch_layer_btm .btn_sch_close:after {opacity:.6; content:""; display:inline-block; margin-bottom:-2px; margin-left:8px; width:16px; height:15px; background-image:url('../../img/close_btn.png'); background-repeat:no-repeat; background-position:50% 50%; vertical-align:middle;} /* 햄버거메뉴 */ .hamburger_btn {display: inline-block; width: 21px; display: none;} .hamburger_btn i { position:absolute; font-size:0;} .hamburger_btn span { display: block; width : 100%; height: 2px; background:#fff; transition:all .5s} .hamburger_btn span ~ span { margin: 5px 0 0; } .hamburger_btn span:nth-of-type(1) { transform:rotate(0deg) translateY(0);transform-origin:left top; width: 21px;} .hamburger_btn span:nth-of-type(2) { transform:translateX(0); opacity:1; width: 26px;} .hamburger_btn span:nth-of-type(3) {transform:rotate(0deg); transform-origin:left top; width: 16px;} .hamburger_btn.on span {background: #000;} .hamburger_btn.on span:nth-of-type(1) { transform:rotate(45deg) translateY(-2px); transform-origin:left top;} .hamburger_btn.on span:nth-of-type(2) { transform:translateX(40px); opacity:0;} .hamburger_btn.on span:nth-of-type(3) {transform:rotate(-45deg); transform-origin:left top; width: 21px;} .site_map {display: none; background: #fff; overflow: hidden; opacity: 0;} .site_map.on {display: block; position: fixed; top: 100px; right:0; bottom:0; left:0; opacity:1; width: 100%; height: 313px; transition:opacity 0.2s;} .site_map .sub_nav_wrap {padding: 20px 30px 20px 373px;} .site_map .sub_nav2 {float: left; top: 90px; left: 0; width: 196px;} .site_map .sub_nav2 > li {text-align: center;} .site_map .sub_nav2 > li > a {display: inline-block; font-size: 16px; font-weight: 400; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; color: #282828; padding: 5px 0;} .site_map .sub_nav2 > li > a:hover {color: #135db6; text-decoration: underline;} /* .gbt {position:relative; width:auto; float:right; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; z-index:2110} .gbt span {color:#fff; opacity: .6; letter-spacing: -.025em;transition:all .3s ease} .gbt:focus span, .gbt:hover span {opacity:1} #amenu-M {display:none} .gbt-amenu {display:block; position:relative; width:80px; height:80px; overflow:hidden; left:0; top:10px; } .gbt-amenu .txt {width:1px; height:1px; overflow:hidden;position:absolute;top:-9999em;left:-9999em;display:block;text-indent:-9999em;font-size:0px;line-height:0} .gbt-amenu:before, .gbt-amenu .icon, .gbt-amenu:after {content:""; display:block; position:absolute; height:2px; left:27px; background:#fff; opacity:1; transition:all .3s ease} .gbt-amenu:before {width:21px;top:32px} .gbt-amenu .icon {width:26px;top:40px} .gbt-amenu:after {width:16px;top:48px} .gbt-amenu:focus:before, .gbt-amenu:focus .icon, .gbt-amenu:focus:after, .gbt-amenu:hover:before, .gbt-amenu:hover .icon, .gbt-amenu:hover:after {width:30px} */ /* Header :: 사이트맵(기본형 or 커스텀) */ .sitemap-custom-btn {width:32px; height:32px; display:none;} @media all and (min-width: 1025px){ .sitemap-custom-btn {display:block;} .main-wrapper .sitemap-custom-btn {display:none;} } /* -------- Header :: GNB(PC) -------- */ .gnb-overlay-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9997;} /* gnb overlay BG */ #gnb{position:absolute; text-align:center; top:0; left: 336px; z-index:99;} #gnb > ul{display:inline-block; *display:inline;*zoom:1;} #gnb > ul > li{position:relative; float:left; word-break:keep-all;} #gnb > ul > li > a{ position:relative; z-index:100; display:table; height:100px; line-height:1.3; padding:0 46.5px; text-align:center; color:#fff; font-size:17px; transition:all 0.5s; } #gnb > ul > li > a:hover span em{opacity: 1;} #gnb > ul > li > a span {display:table-cell; vertical-align:middle; } #gnb > ul > li > a span em {position:relative; font-weight:500; letter-spacing:-1px; opacity: 0.75} /* GNB :: 2차메뉴 Over (높이변경) */ #gnb.open #gnbBg{height:350px} #gnb.each-menu > ul > li .gnb-3dep {display: none;} #gnb.open > ul > li .gnb-2dep{height:250px; opacity:1.0;filter:Alpha(opacity=100);visibility:visible;-webkit-transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;-moz-transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;-ms-transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;-o-transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;} /* GNB :: 2차 각각메뉴 */ #gnb.each-menu > ul > li .gnb-2dep{/* display:none; */position:absolute; top:100px; left:50%;transform: translateX(-50%);z-index:99;width:236px; text-align:left; visibility:hidden;opacity:0;filter:Alpha(opacity=0);} #gnb.each-menu > ul > li .gnb-2dep.wlong {width: 300px;} #gnb.each-menu > ul > li .gnb-2dep:before{content:""; position:absolute; top:0; left:0px; right:0px; height:0; opacity:0;filter:Alpha(opacity=0); background-color:#222; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s} #gnb.each-menu > ul > li .gnb-2dep.m_only{ display:none} #gnb.each-menu > ul > li .gnb-2dep ul{padding:30px 20px; text-align: left;} #gnb.each-menu > ul > li .gnb-2dep ul li{position:relative; padding:9px 25px; opacity:0;filter:Alpha(opacity=0);-webkit-transition:all 0s 0s;-moz-transition:all 0s 0s;-o-transition:all 0s 0s;-ms-transition:all 0s 0s;transition:all 0s 0s; } #gnb.each-menu > ul > li .gnb-2dep ul li a { display:block; color:#b0b0b0; font-size:16px; font-weight:500; line-height:1.3; transition:color 0.4s; opacity:1; filer:Alpha(opacity=85); letter-spacing: -1px;} #gnb.each-menu > ul > li .gnb-2dep ul li a:hover{ color: #d21414;opacity:1; filter:Alpha(opacity=100)} /* over했을때 */ #gnb.each-menu > ul > li:hover .gnb-2dep:before{height:calc(100% + 20px); opacity:1.0;filter:Alpha(opacity=100);} #gnb.each-menu > ul > li .gnb-2dep.open{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);} #gnb > ul > li .gnb-2dep.open ul li{opacity:1.0;filter:Alpha(opacity=100); -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;-ms-transition:all 0.8s;transition:all 0.8s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(1){-webkit-transition-delay: 0.1s;-moz-transition-delay: 0.1s;-o-transition-delay: 0.1s;-ms-transition-delay: 0.1s;transition-delay:0.1s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(2){-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;-o-transition-delay: 0.2s;-ms-transition-delay: 0.2s;transition-delay:0.2s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(3){-webkit-transition-delay: 0.3s;-moz-transition-delay: 0.3s;-o-transition-delay: 0.3s;-ms-transition-delay: 0.3s;transition-delay:0.3s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(4){-webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-o-transition-delay: 0.4s;-ms-transition-delay: 0.4s;transition-delay:0.4s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(5){-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;-ms-transition-delay: 0.4s;transition-delay:0.5s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(6){-webkit-transition-delay: 0.6s;-moz-transition-delay: 0.6s;-o-transition-delay: 0.6s;-ms-transition-delay: 0.4s;transition-delay:0.6s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(7){-webkit-transition-delay: 0.7s;-moz-transition-delay: 0.7s;-o-transition-delay: 0.7s;-ms-transition-delay: 0.4s;transition-delay:0.7s;} #gnb > ul > li .gnb-2dep.open ul li:nth-child(8){-webkit-transition-delay: 0.8s;-moz-transition-delay: 0.8s;-o-transition-delay: 0.8s;-ms-transition-delay: 0.4s;transition-delay:0.8s;} /* -------- Header :: Blue.ver -------- */ #header.blue #headerInnerWrap{ background-color:#fff; border-bottom: 1px solid #ddd;} #header.blue .logo img.default {opacity:0;filter:Alpha(opacity=0);} #header.blue .logo img.blue {opacity:1;filter:Alpha(opacity=100);} #header.blue .linked-btn {color: #111; } #header.blue .header-lang:before, .sub-wrapper .header-lang:before {content:""; width:24px; height:24px; position: absolute; left:-17px; top:6px; background: url(../img/lang_select_icon_b.png)no-repeat; display: block; background-size: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; } #header.blue .header-lang > ul > li > a {color:#999;} #header.blue .header-lang > ul > li > a:before , .sub-wrapper .header-lang > ul > li > a:before {content:""; display:block; position:absolute; left:-6px; top:16px; background: url(../img/arrow_right_b.png)no-repeat; width: 16px; height: 8px;} #header.blue .header-lang > ul > li:first-child > a:before, .sub-wrapper .header-lang > ul > li:first-child > a:before {display: none;} #header.blue .header-lang > ul > li.selected > a, #header.blue .header-lang > ul > li > a:hover {color:#111; } #header.blue #gnb > ul > li > a {color:#111; } #header.blue #gnb > ul > li > a:hover {color: #d21414;} #header.blue #gnb > ul > li > a span em:before{ background-color:#111} #header.blue .sch_h_box .btn_sch_open {background: #fdf9f8; border: none;} #header.blue .sch_h_box .btn_sch_open:after {background: url(../../img/search_btn_b.png)no-repeat;} #header.blue .hamburger_btn span {background: #000;} #header.blue .gnb_util .search_btn a {background: rgba(251,240,238,0.4)} #header.blue .gnb_util .search_btn i.xi-search {color: #444;} #header.blue .gnb_util .btn_lang_link {border: 1px solid #d6d6d6; color: #000; background: #fff;} #header.blue .gnb_util .lang_link_container .lang_list {background: #fff; border: 1px solid #d6d6d6; z-index: -1} #header.blue .gnb_util .lang_link_container .lang_list li a {color: #000;} #header.blue .gbt-amenu:before, #header.blue .gbt-amenu .icon, #header.blue .gbt-amenu:after, .gbt span {background: #000;} /* blue헤더 오버시 */ #header.blue.open .logo img.blue {opacity:0;filter:Alpha(opacity=0);} #header.blue.open .logo img.default {opacity:1;filter:Alpha(opacity=100);} #header.blue.open .linked-btn {color: #fff; } #header.blue.open .header-lang:before {border-color: #fff; } #header.blue.open .header-lang > ul > li > a {color:#fff;} #header.blue.open .header-lang > ul > li > a:before {content:""; display:block; position:absolute; left:-6px; top:16px; background: url(../img/arrow_right_b.png)no-repeat; width: 16px; height: 8px;} #header.blue.open .header-lang > ul > li.selected > a, #header.blue.open .header-lang > ul > li > a:hover {color:#111; } #header.blue.open #gnb > ul > li > a {color:#fff; } /* -------- Header :: GNB(Mobile) -------- */ .nav-open-btn{display:none;} #gnbM{display:none} #headerMenuM {display:none;} /* -------- Header :: 서브페이지헤더 -------- */ .sub-wrapper #header.blue {position:fixed;} .sub-wrapper #header.blue #headerInnerWrap {background-color: #fff;} /* .sub-wrapper #header.blue .sitemap-custom-btn {display:block;} */ /*.sub-wrapper #header {position:fixed;}*/ .sub-wrapper #header .logo img.blue {opacity: 0;} /*.sub-wrapper .header-lang > ul > li.selected > a, .sub-wrapper .header-lang > ul > li > a:hover {color: #111;}*/ /* -------- Header :: Sub 헤더 숨기기 -------- */ #header.sub-hidden{/* top:-101px; */ -ms-transform: translateY(-101px); -o-transform: translateY(-101px); -moz-transform: translateY(-101px);-webkit-transform: translateY(-101px); transform: translateY(-101px);} #header.sub-hidden #topMenu01 {padding:0;} #header.sub-hidden.up{/* top:0px; */-ms-transform: translateY(0); -o-transform: translateY(0); -moz-transform: translateY(0);-webkit-transform: translateY(0); transform: translateY(0);} /* ****************** FOOTER ***********************/ .footer-wrap {position:relative;display:block;background:#111;z-index:400;padding:60px 0 66px} #footer {max-width:1830px;margin:0 auto;position:relative; } #footer .flogo {margin-right: 105px;} #footer .flogo img {max-width: 100%;} #footer .pinfo {color:#888; margin-right: 78px;} #footer .pinfo .paddr.cname {font-size: 18px; font-weight: 600;} #footer .pinfo .paddr, #footer .pinfo .ptel-wrap {display:block;line-height:2.2;vertical-align:baseline; font-size:16px;letter-spacing: -0.75px;} #footer .pinfo .paddr em {display: inline-block; width: 73px; font-style:normal; position:relative; color: #d21414; font-weight: 400;} #footer .pinfo .ptel-wrap span {display:inline-block;vertical-align:baseline;margin: 0 18px 0 0;} #footer .pinfo .ptel-wrap span em {color: #555; margin-right: 10px;} #footer .fcopyright {padding-top: 63px;} #footer .fcopyright .pcopyright {color:#555; margin-top: 63px; font-weight:500;padding:0;font-size: 16px;letter-spacing: -0.75px} /* -------- FOOTER :: site -------- */ .family-site-wrap {margin-left: 33px;} .family-site-box{/* position:absolute; top:20px; right:0;*/ position:relative; width:160px; text-align:left; letter-spacing:-0.25px; /*float:left*/display:inline-block} .family-site-box .family-site-open-btn{display:block; width:100%; height:42px; line-height:30px; text-align:left; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.19); color:#999; box-sizing:border-box; } .family-site-box .family-site-open-btn:after{position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:16px; font-family: 'xeicon'; content:"\e942";} .family-site-box.open .family-site-open-btn:after{content:"\e945";} .family-site-list{position:absolute; bottom:100%; left:0px; width:100%; padding:10px 0; background-color:#fff; border:1px solid #ddd; border-bottom:0; z-index:11; display:none; box-sizing:border-box;} .family-site-list a{display:block; padding:10px; color:#333; font-size:12px;} .family-site-list a:hover{color:#000; text-decoration:underline;} /* ****************** SUB LAYOUT ********************** */ /* SUB LAYOUT :: 서브메뉴(스타일1) */ #topMenu01 {position:relative; width:100%; padding:30px 0; top:100px; background-color: #fff; transition: padding 0.4s;} /* #topMenu01:before {content:""; width:100%; height: 270px; background-color: #fff; position:absolute; top:100%; left:0;}*/ #topMenu01 .side-menu-inner{ width:100%; position:relative; padding: 0 190px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } #topMenu01 .location-to-home-btn {position:absolute; left:0; top:50%; margin-top:-25px; width: 50px; height:50px; border: 1px solid #ddd; text-align:center; line-height: 48px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } #topMenu01 .location-to-home-btn i {color: #000;} #topMenu01 .sub-menu-tit {font-size: 25px; letter-spacing:20px; color: #000; text-transform: uppercase; position:absolute; right:0; top:50%; margin-top:-12.5px;} #topMenu01 .side-menu-inner ul{display:inline-block; *display:inline;*zoom:1; margin:0 -25px;} #topMenu01 .side-menu-inner ul li {float:left; max-width:330px; height: 70px; margin:0 25px;} /* max-width 자유롭게 수정 */ #topMenu01 .side-menu-inner ul li > a {display:block; display:table; position:relative;width:100%;height:100%; line-height:1.2; color:#000; font-size:18px; letter-spacing:-0.5px; word-break:keep-all;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;} #topMenu01 .side-menu-inner ul li > a span {} #topMenu01 .side-menu-inner ul li > a span em {position:relative; font-weight:700; padding-bottom: 10px;} #topMenu01 .side-menu-inner ul li > a span em:before{position:absolute;bottom:-1px;left:50%;width:0;height:2px;background-color:#000;content:"";-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;} #topMenu01 .side-menu-inner ul li > a > span {display:table-cell; vertical-align:middle; } #topMenu01 .side-menu-inner ul li > a:hover span em:before, #topMenu01 .side-menu-inner ul li.on > a span em:before{width:100%; margin-left:-50%;} /* SUB LAYOUT :: 서브메뉴(스타일2) */ #topMenu02{position:relative; width:100%; height:70px;} #topMenu02 .side-menu-inner{text-align:center; width:100%; height:70px; background-color: #fff; border-bottom:1px solid #ddd;} #topMenu02 .side-menu-inner ul {display: flex;} #topMenu02 .side-menu-inner ul li{display:inline-block;flex: 1; -webkit-transition:all 0.5s; transition:all 0.5s;} #topMenu02 .side-menu-inner ul li:first-child {} #topMenu02 .side-menu-inner ul li > a{display:block; display:table; position:relative;width:100%;height:70px; line-height:1.2; color:#000; font-size:16px; font-weight:400; word-break:keep-all;-webkit-transition:all 0.3s; transition:all 0.3s;} #topMenu02 .side-menu-inner ul li > a:before{position:absolute;top: 50%; margin-top: -7px;left:0;width:1px;height:14px;background-color:rgba(255,255,255,0.1);content:"";-webkit-transition:all 0.4s;transition:all 0.4s;} #topMenu02 .side-menu-inner ul li > a > span{display:table-cell; vertical-align:middle; padding:0 15px;} #topMenu02 .side-menu-inner ul li.on {border-bottom: 1px solid #c91f1f} #topMenu02 .side-menu-inner ul li.on > a {color: #c91f1f; } #topMenu02 .side-menu-inner ul li.on:hover{background-color: #fff;} #topMenu02 .side-menu-inner ul li:hover{} #topMenu02 .side-menu-inner ul li.on > a:before {opacity: 0;} /* SUB LAYOUT :: 모바일메뉴(공통) */ #topMenuM01,#topMenuM02 {display:none;} /* SUB LAYOUT :: 서브 타이틀 (공통) */ .sub-title-Area{ margin-bottom:65px} .sub-title-Area > div{ border-bottom:1px solid #ddd; padding-bottom:30px} .sub-title-Area .sec-tit{ font-size:32px; color:#222;} .sub-title-Area .sec-tit.big-tit{ font-size:40px} .sub-title-Area .sec-tit b{ font-weight:600;} .sub-title-Area .cm-fr ul { padding-top: 20px;} .sub-title-Area .cm-fr ul li{display: inline-block; position: relative; padding-right: 40px;font-size: 14px;color: #777;} .sub-title-Area .cm-fr ul li:after{position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 20px; font-family: 'xeicon'; content: "\e93e"; color: #e0e0e0;font-size: 11px;} .sub-title-Area .cm-fr ul li:last-child:after{ display:none} .sub-title-Area .cm-fr ul li.location2{ color: #444; padding-right: 7px;font-weight: 500;} .sub-title-Area .cm-fr ul li.location2:before{ content:""; display:block; position:absolute; right:0; top:-7px; width:5px; height:5px; border-radius:50px; background:#ed1c24;} .sub-title-Area .cm-fr ul li img{ vertical-align:top} .m_only {display: none;} /* SUB LAYOUT :: 서브메뉴 Fixed (공통) */ @media all and (min-width:1221px){ .fixed-sub-menu.fixed .side-menu-inner{position:fixed; top:0px; left:0px; z-index:9999;} } /* SUB LAYOUT :: 모바일메뉴(공통) */ #topMenuM01,#topMenuM02{display:none;} /* SUB LAYOUT :: 컨텐츠 레이아웃 */ #middleArea {} #middleArea.wide{padding-bottom: 0;} /* ****************** SUB LAYOUT ********************** */ /* SUB LAYOUT :: 공통 서브비주얼 */ #visual {position:relative; overflow:hidden; width:100%; height: 600px;} #visual .visual-img-con {position:absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover!important; overflow: hidden} #visual .visual-img-con .visual-tit {position: absolute; top: 38%; left: 50%; transform: translateX(-50%); opacity: 1; font-size: 31px; } #visual .visual-img-con .visual-tit:after {content:''; position: absolute; top: 54px; left: 50%; transform: translateX(-50%); width: 30px; height: 1px; background: #fff;} #visual .visual-img-con p {width: 100%; margin-top: 25%; margin-left: 30px; color: rgba(255,255,255,0.7); font-size: 32px; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em; word-break: break-word;} #visual .visual-img-con p strong {font-weight: 800; font-size: 40px; color: rgba(255,255,255,1);} #visual .visual-img-con.sub_visual1 {background: url(/img/sub_visual1.jpg)no-repeat 50% 0;} #visual .visual-img-con.sub_visual2 {background: url(/img/sub_visual2.jpg)no-repeat 50% 0;} #visual .visual-img-con.sub_visual3 {background: url(/img/sub_visual3.jpg)no-repeat 50% 0;} #visual .visual-img-con.sub_visual4 {background: url(/img/sub_visual4.jpg)no-repeat 50% 0;} #visual .visual-img-con.sub_visual5 {background: url(/img/sub_visual5.jpg)no-repeat 50% 0;} #visual .visual-img-con span{display:block;width:100%;height:100%;background-size:cover !important;-webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2);-webkit-transition:transform 5000ms ease-in-out ;transition:transform 5000ms ease-in-out ; } #visual .visual-txt-con{z-index:1; text-align:center; display:table; width:100%; height:100%; background-color:#0090d3} #visual .visual-txt-container{position:relative; width:100%; height:100%} #visual .visual-txt-container:after{position:absolute; content:""; width:322px; height:145px; background:url("../../img/visual_logo.png") no-repeat; background-size:contain !important; bottom:-20px; left:5px; z-index:0} #visual .visual-txt-container .visual-txt-inner{position:absolute; width:100%; right:0; top:50%; transform:translateY(-50%); text-align:left;box-sizing: border-box;padding-left:8%;} #visual .visual-tit, #visual .visual-sub-txt, #visual .location{opacity:0;filter:Alpha(opacity=0);-webkit-transform: translateY(30px); transform: translateY(30px);-webkit-transition:opacity 1.0s, transform 1.0s;transition:opacity 1.0s, transform 1.0s;} #visual .visual-tit{display:inline-block; vertical-align:bottom; font-weight:400; margin-right:20px; color:#fff; -webkit-transition-delay:0.2s; transition-delay:0.2s;} #visual .visual-tit span{font-size: 20px;font-weight: 600; opacity: 0.8; filter:Alpha(opacity=80);} #visual .visual-tit strong{display: block; font-weight: normal;text-transform: uppercase; margin-top:7px;font-size:55px;} #visual .visual-sub-txt{display:block; vertical-align:bottom; font-size:17px; font-weight:400; color:#fff; -webkit-transition-delay:0.2s; transition-delay:0.2s; margin-top:23px} #visual .visual-sub-txt span{ display:block; margin:12px 0} #visual .visual-sub-txt span:last-child{ margin-bottom:0} #visual .visual-sub-txt b{font-weight:600} #visual .location{-webkit-transition-delay:0.6s; transition-delay:0.6s;} /* SUB LAYOUT :: 서브메뉴 */ #Sub_depth{position:relative; width:100%; height: 60px; z-index:12; } #Sub_depth .side-menu-inner{width:100%; height: 60px; border-bottom:1px solid #e8e8e8; z-index:11; } #Sub_depth .side-menu-inner > div{ position:relative; height: 100%;} /*#Sub_depth .cm-top-menu{padding:0 40px;}*/ #Sub_depth .location-to-home-btn {float:left; width:60px; text-align: center; height:100%; line-height: 60px; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8} #Sub_depth .location-to-home-btn img {max-width: 100%;} #Sub_depth .menu-location, #Sub_depth .menu-location-new {position:relative; float:left;height: 60px; border-right: 1px solid #e8e8e8;} #Sub_depth .menu-location.redBg {background: #d21414;} #Sub_depth .menu-location.location1 {width: 18%;} #Sub_depth .menu-location.location2 {width: 22%;} #Sub_depth .menu-location.location3 {width: 25%;} #Sub_depth .menu-location.location4 {width: 30%;} #Sub_depth .menu-location.location3 > p {position: absolute; top: 50%; transform: translateY(-50%); left: 21px; font-size: 15px; color: #444;word-break: keep-all; } #Sub_depth .menu-location.location4 > .cur-location span, #Sub_depth .menu-location.redBg > .cur-location span {color: #fff;} #Sub_depth .menu-location.location4 > .cur-location .arrow i {font-size:16px; color:#fff; font-weight: 700;} #Sub_depth .menu-location.location4 a {display: none;} #Sub_depth .menu-location.location4 select {visibility: hidden;} /* #Sub_depth .menu-location.location4 select {background: none; color: #fff; outline: 0 none; border-radius: 0; border: none;font-size: 16px; height: 60px; line-height: 60px; width: 100%; padding: 0 26px 0 21px; cursor: pointer; appearance: none; background: url(/img/dropDown_icon_w.png)no-repeat 92% center;} #Sub_depth .menu-location.location4 select option {color: #000; background: #f5f5f5; padding: 10px 0;} #Sub_depth .menu-location.location4 select option:checked, #Sub_depth .menu-location.location4 select option:hover, #Sub_depth .menu-location.location4 select option:focus {background: #f5f5f5; color: #d21414; margin: 5px 0;} */ #Sub_depth .menu-location.location4 .nice-select {background-color:transparent!important; border:none!important; font-size: 15px; line-height: 1.3; height: 60px; width: 100%; padding-right: 48px; display: table; white-space: unset;} #Sub_depth .menu-location.location4 .nice-select span {color: #fff; display: table-cell; vertical-align: middle;} #Sub_depth .menu-location.location4 .nice-select .list {background: #f5f5f5; border-radius: 0; margin:0; transform: unset; padding: 10px 0; width: 100%;} #Sub_depth .menu-location.location4 .nice-select .list li {font-size: 15px; line-height: 1.5; font-weight: 400; color: #222; padding: 7px 23px;} #Sub_depth .menu-location.location4 .nice-select .option:hover, #Sub_depth .menu-location.location4 .nice-select .option.focus, #Sub_depth .menu-location.location4 .nice-select .option.selected.focus {background: #f5f5f5; color: #d21414;} #Sub_depth .menu-location.location4 .nice-select:after {background: url(/img/dropDown_icon_w.png)no-repeat; width: 15px; height: 15px; border: 0; right: 21px; transform: translateY(-50%); margin-top: 0;} #Sub_depth .menu-location.location4 .nice-select .option {font-family:'Noto Sans KR',sans-serif;} #Sub_depth .menu-location > .cur-location {position:relative; display:table; height: 60px; padding:0 21px; text-align:left; width: 100%;} #Sub_depth .menu-location > .cur-location span {display:block; width:100%; line-height: 1.3; color:#444; font-size:15px; display: table-cell; vertical-align: middle;} #Sub_depth .menu-location > .cur-location .arrow{position:absolute; top:50%; transform: translateY(-50%); right: 18px;} #Sub_depth .menu-location > .cur-location .arrow i{font-size:16px; color:#ddd; font-weight: 700; border: 1px solid #ddd; border-radius: 50%;} #Sub_depth .menu-location > .cur-location.open .arrow{transform:rotate(-180deg); margin-top:-10px;} #Sub_depth .menu-location .location-menu-con{display:none; position:absolute; top: 60px; left:-1px; width:calc(100% - 1px); border:1px solid #e5e5e5; border-top:0; background-color:#f5f5f5; z-index:11; padding: 10px 0;} #Sub_depth .menu-location .location-menu-con li a{position:relative; display:block; padding:7px 23px; font-size:15px; line-height:1.5; font-weight:400; color:#222;} #Sub_depth .menu-location .location-menu-con li a .gnb-icon{position:absolute; top:10px; right:15px;} #Sub_depth .menu-location .location-menu-con li.on{position:relative;} #Sub_depth .menu-location .location-menu-con li.on a{color:#d21414;} #Sub_depth .menu-location .location-menu-con li:hover a{color:#d21414;} /* SUB LAYOUT :: 서브메뉴 Fixed (공통) */ .fixed-sub-menu.top-fixed .side-menu-inner{position:fixed; top:0px; left:0px; z-index:9999;} @media all and (max-width:1024px){ .fixed-sub-menu.top-fixed .side-menu-inner {top:80px;} } @media all and (max-width:480px){ .fixed-sub-menu.top-fixed .side-menu-inner {top:60px;} } /* SUB LAYOUT :: 상단효과 active */ #visual.active .visual-img-con span{-webkit-transform: scale(1.0,1.0) rotate(0.002deg);transform: scale(1.0,1.0) rotate(0.002deg);} #visual.active .visual-tit, #visual.active .visual-sub-txt, #visual.active .location{opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateY(0px); transform: translateY(0px);} /* SUB LAYOUT :: 비주얼 중단 카테고리 */ #bo_cate {height: 67px;box-sizing: border-box; border: 1px solid #ddd;border-top: 0; text-align:center; margin-bottom: 80px} #bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #bo_cate ul {display: inline-block;*display: inline; *zoom: 1;} #bo_cate li {float: left;} #bo_cate a {display: block; display: table;position: relative;width: 100%; height: 66px;line-height: 1.2;color: #868686; font-size:18px; letter-spacing: -0.5px; -webkit-transition: color 0.4s; transition: color 0.4s;} #bo_cate a:before{position: absolute; bottom: -1px;left: 50%;width: 0;height: 3px; transform: translateX(-50%); background-color: #4e4e4e;content: ""; -webkit-transition: all 0.4s;transition: all 0.4s;} #bo_cate a span{display: table-cell;vertical-align: middle;padding: 0 50px;} #bo_cate #bo_cate_on, #bo_cate a:hover { color: #010101;} #bo_cate #bo_cate_on:before, #bo_cate a:hover:before{width:90px; } /* ****************** MODAL LAYERPOPUP ********************** */ /* modal layer */ .modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);} .modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;} .modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;} .modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;} .modal-inner-content{text-align:left;} .loading { display: inline-block; width: 50px; height: 50px; border: 8px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; } @keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* modal layer content */ .footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; } .footer-modal-content h1{font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0 50px 20px; color:#fff;} .modal-close-btn{position:absolute; top:-6px; right:-6px; color:#fff; } .modal-close-btn i{font-size:38px;} .modal-close-btn i:hover {color:#fff} .footer-inner-box{padding:30px; background-color:#fff; } .footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; } /*애니메이션 */ /* card */ .up_motion > * {-webkit-transform: translate3d(0, 50px, 0);transform: translate3d(0, 50px, 0);opacity: 0;-webkit-transition: opacity 800ms, -webkit-transform 1s ease-out;transition: opacity 800ms, -webkit-transform 1s ease-out;transition: transform 1s ease-out, opacity 800ms;transition: transform 1s ease-out, opacity 800ms, -webkit-transform 1s ease-out;} .up_motion > *:nth-child(1) {-webkit-transition-delay: 300ms;transition-delay: 300ms;} .up_motion > *:nth-child(2) {-webkit-transition-delay: 450ms;transition-delay: 450ms;} .up_motion > *:nth-child(3) {-webkit-transition-delay: 600ms;transition-delay: 600ms;} .up_motion > *:nth-child(4) {-webkit-transition-delay: 750ms;transition-delay: 750ms;} .up_motion > *:nth-child(5) {-webkit-transition-delay: 900ms;transition-delay: 900ms;} .up_motion > *:nth-child(6) {-webkit-transition-delay: 1050ms;transition-delay: 1050ms;} .up_motion > *:nth-child(7) {-webkit-transition-delay: 1200ms;transition-delay: 1200ms;} .up_motion > *:nth-child(8) {-webkit-transition-delay: 1350ms;transition-delay: 1350ms;} .up_motion > *:nth-child(9) {-webkit-transition-delay: 1500ms;transition-delay: 1500ms;} .up_motion > *:nth-child(10) {-webkit-transition-delay: 1650ms;transition-delay: 1650ms;} .up_motion > *:nth-child(11) {-webkit-transition-delay: 1850ms;transition-delay: 1850ms;} .up_motion > *:nth-child(12) {-webkit-transition-delay: 2000ms;transition-delay: 2000ms;} .up_motion > *:nth-child(13) {-webkit-transition-delay: 2150ms;transition-delay: 2150ms;} .up_motion > *:nth-child(14) {-webkit-transition-delay: 2300ms;transition-delay: 2300ms;} .up_motion > *:nth-child(15) {-webkit-transition-delay: 2450ms;transition-delay: 2450ms;} .up_motion > *:nth-child(16) {-webkit-transition-delay: 2600ms;transition-delay: 2600ms;} .up_motion > *:nth-child(17) {-webkit-transition-delay: 2750ms;transition-delay: 2750ms;} .up_motion > *:nth-child(18) {-webkit-transition-delay: 2900ms;transition-delay: 2900ms;} .up_motion > *:nth-child(19) {-webkit-transition-delay: 3050ms;transition-delay: 3050ms;} .up_motion > *:nth-child(20) {-webkit-transition-delay: 3200ms;transition-delay: 3200ms;} .up_motion > *:nth-child(21) {-webkit-transition-delay: 2350ms;transition-delay: 2350ms;} .up_motion > *:nth-child(22) {-webkit-transition-delay: 2500ms;transition-delay: 2500ms;} .up_motion > *:nth-child(23) {-webkit-transition-delay: 3650ms;transition-delay: 3650ms;} .up_motion > *:nth-child(24) {-webkit-transition-delay: 3850ms;transition-delay: 3800ms;} /* 이메일무단수집거부 */ #mail_pop{position:fixed; width:100%; height:100%; top:0; left:0; display:none; z-index:9999; background: rgba(0,0,0,0.5);} #mail_pop .no_mail{ width:900px; height:495px; position:absolute; top:50%; left:50%; border:2px solid #c76464; margin-left: -450px; margin-top: -275.5px; } .pop_content { background-color: #f6f6f6; text-align: center; font-size: 16px; line-height: 26px; height: 100%; box-sizing: border-box; padding: 85px 30px; } .pop_content strong{ display: block; font-size: 20px; line-height: 1; margin-bottom: 18px; padding-top: 180px; background:url(/img/ico_mail.png) no-repeat 50% 0; line-height:1.4 } .pop_content .small_txt { display: block; padding-top: 12px; font-size: 14px; color: #c76464; } .close_btn{ position: absolute; right: 0; top: 0; width: 60px; height: 60px; background:url(/img/close_btn.png) no-repeat center; font-size: 0; text-indent: -9999%; display:block; } /* ******************************************************* * 미디어쿼리 시작 ******************************************************** */ /* ****************** 공통레이아웃 ********************** */ @media all and (max-width:1700px){ /* max-width : (area-box width) + 20px */ .area-box {padding:0 30px;} } @media all and (max-width:1420px){ .area-box {padding:0 20px;} } @media all and (max-width:1024px){ .area-box {padding:0 10px;} } /* ****************** HEADER ********************** */ @media all and (max-width:1750px) { #gnb {left: 260px;} } @media all and (max-width:1650px) { #gnb > ul > li > a {padding: 0 53.5px; font-size: 17px;} } @media all and (max-width:1600px) { #header .logo {padding: 31px 0;} #header .logo img {max-width: 82%;} #gnb > ul > li > a {padding: 0 40px; } } @media all and (max-width:1470px) { #gnb > ul > li > a {font-size: 15px; padding: 0 35px;} .sch_h_box .btn_sch_open {width: 45px; height: 45px;} .gnb_util .btn_lang_link {width: 117px; height: 45px; font-size: 14px;} .gnb_util .lang_link_container .lang_list {width: 117px;} } @media all and (max-width: 1366px) { /* -------- Header :: GNB(PC) -------- */ #gnb > ul {padding:0;} #gnb > ul > li .gnb-2dep ul li a {font-size:14px; } } @media all and (max-width: 1300px) { .sch_h_box {display: none;} .m_lang_wrap .m_lang {display: flex;} .m_lang_wrap .m_lang li {line-height: 80px; height: 80px; text-align: center; flex: 1; border-right:1px solid rgba(255,255,255,0.4)} .m_lang_wrap .m_lang li a {display: block; color: #fff; font-weight: 500;} #header, #headerInnerWrap {height: 80px;} #header.fixed, #header.fixed #headerInnerWrap {/*background-color: #04367b;*/} #header {width: 100% !important; } #headerInnerWrap {/* position:fixed; */ z-index:99;} #header .logo {padding: 23px 0;} #header .logo img {max-width: 72%;} #header.fixed #headerInnerWrap{background-color:#04367b;} .sub-wrapper .nav-open-btn span {background: #fff;} .hamburger_btn {display: none;} /* -------- Header :: UTIL BOX -------- */ .gnb_util {display:none;} .gnb_util_m {position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid rgba(255,255,255,0.4)} /* 언어선택 */ .header-util-menu-box .lang-select{padding:19px 15px; } .header-util-menu-box .lang-select li{float:left; margin-left:-1px} .header-util-menu-box .lang-select li:first-child{margin-left:0;} .header-util-menu-box .lang-select li > a {position:relative; display:block; min-width:18px; text-align:center ; height:40px; line-height:40px; padding:0 10px; font-size:12px; font-weight:500; color: rgba(255,255,255,0.5)} .header-util-menu-box .lang-select li.cur {position:relative; float:left; height:100%; z-index:100; } .header-util-menu-box .lang-select li.cur a {color: #fff;} .header-util-menu-box .lang-select li.cur:before{display: none; } /*.header-util-menu-box .lang-select li.cur a{color:#04367b; z-index:1;}*/ /* -------- Header :: GNB(Pc) -------- */ #gnb{display:none;} .gnb-overlay-bg{display:none} /* -------- Header :: GNB(Mobile/기본스타일) -------- */ .gnb-overlay-bg-m{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;} #gnbM{ display:block; position:fixed; top:0px; right:-82%; width: 100%; height:100%; background-color:#c91f1f; z-index:9999; transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); visibility:hidden;} #gnbM.open{right:0px; visibility:visible;} /* GNB Mobile :: 레이아웃 */ .gnb-navigation-wrapper{position:relative; height:100%; box-sizing:border-box; padding-top:80px; overflow-y:auto;} /* padding-top : Header 높이값 */ .header-util-menu-box + .gnb-navigation-wrapper{padding-top:0} /* GNB Mobile :: 메뉴영역 :: 1차 */ /*#navigation > li{border-bottom:1px solid rgba(255,255,255,0.3)}*/ #navigation > li:first-child{border-top:1px solid rgba(255,255,255,0.3)} #navigation > li > a {position:relative; display:block; padding:15px; color:#fff; font-size:17px; font-weight:500; cursor:pointer} #navigation > li.active > a{color:#fff;} #navigation > li.has-2dep > a:before{font-family:xeicon; content: "\e914"; position:absolute; top:50%; right:15px; font-size:1.3em; transform:translateY(-50%);} #navigation > li.has-2dep.active > a:before{content: "\e91b";} /* GNB Mobile :: 메뉴영역 :: 2차 */ #navigation > li .gnb-2dep{display:none; padding:15px 0; background-color:#fff; } #navigation > li .gnb-2dep > li{height:auto !important;} #navigation > li .gnb-2dep > li > a{display:block; font-size:14px; padding:12px 15px; color:#444;} #navigation > li .gnb-2dep > li.on > a{color:#04367b; font-weight:500;} /* GNB Mobile :: 메뉴영역 :: 3차 */ #navigation > li .gnb-2dep > li > .gnb-3dep{display:none; padding:10px; background-color:#aaa; margin:0 10px} #navigation > li .gnb-2dep > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:13px; color:#fff;} #navigation > li .gnb-2dep > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;} /* -------- GNB Mobile :: 언어선택 -------- */ .header-util-menu-box{height:80px;} /* -------- Header :: 네비게이션 오픈 버튼 -------- */ .nav-open-btn {display:block; position:fixed; top:25px; right:17px; z-index:10000; height:32px;-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); background: none;} .nav-open-btn .line{display:block; width:24px; height:2px; background-color:#fff; border-radius:5px; margin: 4px auto;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} #header.blue .nav-open-btn .line {background-color: #000;} .nav-open-btn.active .line{background-color:#fff;} #header.blue .nav-open-btn.active .line {background-color: #fff;} .nav-open-btn.active .line:nth-child(2), .nav-open-btn.active .line:nth-child(4){opacity: 0;} .nav-open-btn.active .line:nth-child(1){ -webkit-transform: translateY(5px) rotate(45deg); transform: translateY(5px) rotate(45deg); } .nav-open-btn.active .line:nth-child(3){ -webkit-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); } .bg_logo {position: absolute; bottom: 10px; right : 10px;} #header.top-fixed .nav-open-btn .line{background-color:#333} #header.sub-hidden .nav-open-btn {display:none;} #header.sub-hidden.up .nav-open-btn {display:block;} /* -------- Header :: 모바일 메뉴-------- */ #headerMenuM {display:block; position:absolute; top: 80px; left:0; width:100%; height: 40px; border-top: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); text-align: center; transition: background-color 0.4s;} #headerMenuM ul li {float:left; width:25%; } #headerMenuM ul li a {line-height:1.4; font-size:12px; color: #fff; display:table; width:100%; height:40px;} #headerMenuM ul li a span {display:table-cell; vertical-align:middle;} .sub-wrapper #header.blue #headerMenuM {background-color: #0090d3; } .main-wrapper #header.fixed #headerMenuM {background-color: #0090d3;} .main-wrapper #header.fixed #headerMenuM {position:fixed; } .main-wrapper #header.fixed #headerInnerWrap {position:fixed; } } @media all and (max-width: 480px ){ #header,#headerInnerWrap {height: 60px;} #header .logo{padding: 16px 0;} /* padding값 적절히 바꿔주세요 */ #header .logo img {max-width: 60%;} /* Header :: 사이트맵, 네비게이션 버튼 */ .nav-open-btn{top:15px; right:20px; margin-top:0;} .nav-open-btn img {height: 14px;} .nav-open-btn .line{width:20px; height:2px; } .nav-open-btn.active .line:nth-child(1){-webkit-transform: translateY(6px) rotate(45deg);-ms-transform: translateY(6px) rotate(45deg); -o-transform: translateY(6px) rotate(45deg);transform: translateY(6px) rotate(45deg);} .nav-open-btn.active .line:nth-child(3){-webkit-transform: translateY(-6px) rotate(-45deg);-ms-transform: translateY(-6px) rotate(-45deg);-o-transform: translateY(-6px) rotate(-45deg);transform: translateY(-6px) rotate(-45deg);} /* Header :: GNB(Mobile) */ .gnb-navigation-wrapper{padding-top:60px} /* padding-top : Header 높이값 */ .gnb-style-full .header-util-menu-box + .gnb-navigation-wrapper{top:60px; } .gnb-style-full-member .gnb-navigation-wrapper{bottom:60px;} #navigation > li > a{font-size:15px;} #navigation > li .gnb-2dep > li > a{font-size:13px;} /* Header :: 언어선택 */ .header-util-menu-box{height:60px;} /* 언어선택 */ .header-util-menu-box .lang-select{padding:10px; } .header-util-menu-box .lang-select li > a{height:38px; line-height:38px} /* -------- Header :: 모바일 메뉴-------- */ #headerMenuM {top:60px;} .m_lang_wrap .m_lang li {line-height: 60px; height: 60px; } } /* ****************** FOOTER ********************** */ @media all and (max-width:1540px){ #footer .flogo {margin-right: 50px;} #footer .pinfo {margin-right: 50px;} } @media all and (max-width:1420px){ #footer .pinfo {margin-right: 30px;} #footer .pinfo .paddr.cname {font-size: 16px;} #footer .pinfo .paddr, #footer .pinfo .ptel-wrap {font-size: 15px;} #footer .fcopyright .pcopyright {margin-top: 43px; font-size: 15px;} } @media all and (max-width:1310px){ .footer-wrap {padding: 45px 10px;} #footer .flogo {margin-bottom: 20px; width: 75%;} #footer .fcopyright .pcopyright {margin-top: 43px; font-size: 15px;} } @media all and (max-width:1260px){ #footer .footer_top .f_info {width: 100%;} #footer .fcopyright {padding-top: 43px;} } @media all and (max-width:1024px){ #footer .pinfo {width: 100%;} #footer .flogo {width: auto;} } @media all and (max-width:600px){ .footer-wrap {padding: 20px 10px;} #footer .footer_top {border-bottom: none; padding: 10px 0;} #footer .flogo {margin-right: 0; display: none;} #footer .pinfo .paddr, #footer .pinfo .ptel-wrap {font-size: 13px; line-height: 1.7; } #footer .pinfo {margin-right: 0;} #footer .pinfo .paddr.cname {font-size: 17px; margin-bottom: 8px;} #footer .pinfo .paddr em {width: auto; padding-right: 12px; } #footer .pinfo.cm-fl {float: none} #footer .fcopyright {padding-top: 15px;} #footer .fcopyright .pcopyright {margin-top: 0; font-size: 12px; word-break: keep-all} } @media all and (max-width: 375px) { } /* ****************** SUB LAYOUT ********************** */ @media all and (max-width:1400px){ /* SUB LAYOUT :: 공통서브비주얼 */ #visual .visual-img-con p {font-size: 36px;} /* 제품페이지 서브뎁스 */ .product_page #Sub_depth .menu-location.location1 {display: none;} } @media all and (max-width:1220px){ /* SUB LAYOUT :: 공통서브비주얼 */ #visual .visual-img-con p {font-size: 33px;} #visual .visual-img-con .visual-tit {font-size: 29px;} /* SUB LAYOUT :: 컨텐츠 레이아웃 */ #topMenu01 .sub-menu-tit {display:none; } #topMenu01 .side-menu-inner {padding:0 0 0 100px;} /* SUB LAYOUT :: 공통 서브 비주얼 */ #visual {height: 450px;} #visual .visual-img-con p { font-size: 28px;} #visual .visual-img-con p strong {font-size: 35px;} } @media all and (max-width:1060px) { /* 제품페이지 서브뎁스 */ .product_page #Sub_depth .location-to-home-btn, .product_page #Sub_depth .menu-location.location2 {display: none;} } @media all and (max-width:1024px) { #topMenu01 {top: 80px;} #middleArea {margin-top:0} /* -------- Header :: Sub 헤더 숨기기 -------- */ #header.sub-hidden{-ms-transform: translateY(-81px); -o-transform: translateY(-81px); -moz-transform: translateY(-81px);-webkit-transform: translateY(-81px); transform: translateY(-81px);} /* SUB LAYOUT :: 비주얼 중단 카테고리 */ #bo_cate { margin-bottom:50px} #bo_cate a span{padding: 0 42px;} /* SUB LAYOUT :: 공통 서브 비주얼 */ #visual {height: 300px;} #visual > div {padding:0} #visual .visual-img-con .visual-tit {font-size: 21px;} #visual .visual-img-con .visual-tit:after {top: 38px;} #visual .visual-img-con p {position: absolute; top: 50%; left: 0; transform: translateY(-50%); margin-top: 35px; font-size: 19px;} #visual .visual-img-con p strong {font-size: 27px;} /* 제품페이지 서브뎁스 */ .product_page #Sub_depth .menu-location.location3 {min-width: 40%;} .product_page #Sub_depth .menu-location.location4 {min-width: 60%;} } @media all and (max-width:800px){ /* SUB LAYOUT :: 서브메뉴(스타일1,2,3) */ #topMenu01{display:none} /* SUB LAYOUT :: 컨텐츠 레이아웃 */ #content {padding:20px 15px} #content:before {height: 135px;} #content.wide{ padding-bottom: 0} /* SUB LAYOUT :: 비주얼 */ #visual .visual-area{height:200px} #visual .visual-txt-container:after{width: 55%;height: 82px;} #visual .visual-txt-container .visual-txt-inner{padding:0 15px} #visual .visual-tit span {font-size: 14px;} #visual .visual-tit strong {font-size: 25px;} #visual .visual-sub-txt { font-size:13px; margin-top:10px} #visual .visual-sub-txt span {margin: 7px 0; line-height: 1.45;} /* SUB LAYOUT :: 비주얼 중단 카테고리 */ #bo_cate {height: 50px;} #bo_cate a {font-size: 15px;height: 50px;} #bo_cate a span{padding: 0 20px;} #bo_cate #bo_cate_on, #bo_cate a:hover { color: #010101;} #bo_cate #bo_cate_on:before, #bo_cate a:hover:before{width: 55px; } /* ****************** BOARD ********************** */ /* BOARD :: 게시판 공통(total,search,admin_btn) */ #bo_list_total{ font-size:13px; line-height:45px} .bo_top_area .cm-fr{ width:60%; min-width:inherit} .bo_sch:before{left: 120px;} .bo_sch select {width: 120px;padding-left: 20px; background-size: 11px;} .bo_sch select, .bo_sch .sch_bar{height: 45px; font-size:12px} .bo_sch .sch_bar {width: calc(100% - 165px);} .bo_sch .sch_input {text-indent:15px;font-size:12px} .bo_sch .sch_btn {height: 45px;font-size:16px;width: 25px; right: 15px;} } @media all and (max-width: 768px) { #visual .visual-img-con p {} } @media all and (max-width:680px){ #Sub_depth .location-to-home-btn {display: none;} #Sub_depth .menu-location, #Sub_depth .menu-location-new {min-width: 50%; border-right: 0;} /* SUB LAYOUT :: 비주얼 */ #visual .visual-area{ display:block; height:auto} #visual .visual-area > div{ display:block; width:100%; height: 170px;} /* SUB LAYOUT :: 비주얼 중단 카테고리 */ #bo_cate a{ font-size: 12px;} #bo_cate a span { padding: 0 15px;} /* ****************** BOARD ********************** */ /* BOARD :: 게시판 공통(total,search,admin_btn) */ .bo_sch select,.bo_sch:before{ display:none} .bo_sch .sch_bar{width:100%} } @media all and (max-width: 600px) { /* SUB LAYOUT :: 서브메뉴 */ #Sub_depth{height: 60px;} #Sub_depth .wrap_narrow {margin: 0;} #Sub_depth .side-menu-inner{height: 60px;} #Sub_depth .location-to-home-btn {display: none;} #Sub_depth .menu-location, #Sub_depth .menu-location.location2 {min-width: 50%;} #Sub_depth .menu-location > .cur-location {height: 60px;} #Sub_depth .menu-location > .cur-location span{line-height: 60px;} #Sub_depth .menu-location .location-menu-con{top: 60px;} #Sub_depth .menu-location.location3 > p, #Sub_depth .menu-location.location4 .nice-select {font-size: 14px;} } @media all and (max-width: 540px) { #topMenu02 {display: none;} /* SUB LAYOUT :: 서브메뉴 모바일 (스타일2) */ #topMenuM02{display:block; position:relative; height:45px; top:0px; background-color: #fff; } #topMenuM02 .side-menu-inner{height:44px; border-bottom:1px solid #ddd; } #topMenuM02 .location-to-home-btn{position:absolute; width:40px; height:40px; left:0px; top:0px; background-color:#fff; text-align:center; } #topMenuM02 .location-to-home-btn i{color:#000; font-size:20px; line-height:40px;} #topMenuM02 .menu-location{position:relative;} #topMenuM02 .location-to-home-btn + .menu-location{margin-left:40px} #topMenuM02 .menu-location > .cur-location{position:relative; display:block; height:44px; padding:0 30px 0 15px; border-left:1px solid #ddd;} #topMenuM02 .menu-location > .cur-location span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:44px; font-weight:600; font-size:15px; color: #000;} #topMenuM02 .menu-location > .cur-location .arrow{position:absolute; top:50%; right:10px; width:20px; height:20px;margin-top:-8px; font-size:20px;color:#000; } #topMenuM02 .menu-location.open > .cur-location .arrow{transform:rotate(-180deg); margin-top:-10px;} #topMenuM02 .menu-location .location-menu-con{display:none; position:absolute; top:44px; left:0px; width:calc(100% - 2px); border:1px solid #ddd; border-top:0; background-color:#fff; z-index:11; } #topMenuM02 .menu-location.location1 .location-menu-con{width:calc(100% - 1px)} #topMenuM02 .menu-location .location-menu-con li a{display:block; padding:7px 15px; font-size:14px; line-height:1.5;} #topMenuM02 .menu-location .location-menu-con li.on{position:relative;} #topMenuM02 .menu-location .location-menu-con li.on a, #topMenuM02 .menu-location .location-menu-con li.active a{color:#c9201f;} #topMenuM02 .menu-location .location-menu-con li.on a em{ font-weight:500} } @media all and (max-width: 480px ) { /* SUB LAYOUT :: 비주얼 */ #visual .visual-img-con p {font-size: 20px;} #visual .visual-img-con .visual-tit {font-size: 22px;} /* SUB LAYOUT :: 서브메뉴 */ #Sub_depth .menu-location > .cur-location {padding: 0 0 0 12px;} #Sub_depth .menu-location > .cur-location span {font-size: 14px;} #Sub_depth .menu-location > .cur-location .arrow {right: 13px;} #Sub_depth .menu-location .location-menu-con li a {padding: 5px 0 5px 12px; font-size: 13px;} #Sub_depth .menu-location.location3 > p {font-size: 13px; left: 10px;} #Sub_depth .menu-location.location4 .nice-select {font-size: 13px; padding-left: 10px; padding-right: 30px;} #Sub_depth .menu-location.location4 .nice-select .list li {padding: 7px 10px; font-size: 13px;} #Sub_depth .menu-location.location4 .nice-select:after {right: 10px;} } @media all and (max-width: 420px ){ /* -------- Header :: Sub 헤더 숨기기 -------- */ #header.sub-hidden{-ms-transform: translateY(-61px); -o-transform: translateY(-61px); -moz-transform: translateY(-61px);-webkit-transform: translateY(-61px); transform: translateY(-61px);} /* SUB LAYOUT :: 비주얼 */ #visual .visual-img-con p {font-size: 17px;} #visual .visual-img-con p strong {font-size: 23px; letter-spacing: -0.75px;} } @media all and (max-width: 375px ){ /* SUB LAYOUT :: 비주얼 */ #visual .visual-img-con p {font-size: 15px;} /* SUB LAYOUT :: 비주얼 중단 카테고리 */ #bo_cate a{ font-size: 11px;} #bo_cate a span { padding: 0 10px;} #Sub_depth .menu-location.location3 > p, #Sub_depth .menu-location.location4 .nice-select {font-size: 12px;} }