/******************************************************** ■ 사이트 공통 ********************************************************/ html{font-size:20px;} body{font-size:1rem;} .web{display:block} .tablet2{display:block;} .mob{display:none;} .tablet{display:none;} /*-----폰트-----*/ #wrap{font-size:1.1rem;} #menuAll h3{font-size:1.6rem;} #menuAll .mobile_top ul li > a{font-size:1.4rem;} .bg_box .bg_img h4{font-size:1.2rem;} #header .header_inner #nav > ul > li > div > a{} .bg_box .box_txt p{font-size: .95rem;} #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:absolute; top:0; left: 0; width:100%; z-index:10;-webkit-transition:all .3s;transition:all .3s;} #header .header_inner{position:relative;margin:0 auto; height:5rem;width:1720px;} #header .header_inner:after{content:""; display:block; clear:both;} #header .header_inner h1{position:absolute; left:0rem; top:50%; transform:translateY(-50%); z-index:10;} #header .header_inner h1 a{display:inline-block; width:11.75rem; height:1.95rem; background:url('/images/default/main/logo.svg') 0 0/ 100% no-repeat;} #header .login_menu{position:absolute;right:10rem;top:50%;transform:translateY(-50%);display:flex;} #header .login_menu a{color:#666;margin-right:1rem;} #header .login_menu li:last-child a{margin-right:0;} /*gnb*/ #header{} #header .header_inner .top_menu{position: absolute; right: 7rem;top:50%; z-index:10; font-size:0.75rem; letter-spacing:0.02em;transform:translateY(-50%);} #header .header_inner .top_menu li{position: relative; display:inline-block; padding-right:10px; margin-right:5px;} #header .header_inner .top_menu li:last-child{margin-right: 0;} #header .header_inner .top_menu li a{display: block; color:#888; vertical-align: top; } #header .header_inner .top_menu li:not(:last-child):before{content:'';display : block; position : absolute; right :0; top:50%; margin-top : -7px; width :1px; height : 14px; background : #DEDEDE;} /* 헤더 오버스크롤 */ #header.scroll{background:#fff;} #header.scroll:before{content : ""; display : block; position : absolute; left : 0; bottom:0; width :100%; height : 1px; background : #eee;} /*탑메뉴*/ #header .header_inner #nav {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; font-weight: 500;padding-right:3rem;} #header .header_inner #nav{} #header .header_inner #nav ul {clear:both; position:relative; box-sizing:border-box;height:100%;} #header .header_inner #nav ul li { display:inline-block;text-align:center; float:none; vertical-align:top;position:relative;} #header .header_inner #nav > ul > li.on{background:#191919;color:#fffcec;} #header .header_inner #nav > ul > li.on:before{content:'';display:block;position:absolute;width:100%;background:#fffcec;top:0;left:0;height:5px;z-index:1;} #header .header_inner #nav > ul > li.on:after{content:'';display:block;position:absolute;width:calc(100% - 1rem);background:#fffcec;bottom:0;left:0.5rem;height:1px;z-index:1;} #header .header_inner #nav ul li {position:relative; } #header .header_inner #nav ul li a{text-align:center; color:#fff; display:inline-block; font-size:1.05rem; height:4.3rem; line-height:4.3rem; position:relative;transition: all .2s; -webkit-transition: all .2s; padding:0 2rem;} #header .header_inner #nav ul li ul {z-index: 10;display:none; position: absolute; width:100%; left:0;padding:1.5rem 0 .5rem; box-sizing:border-box; text-align:center; background:#191919; height:auto; display: none; animation-duration: linear; animation-direction: alternate; animation-fill-mode: forwards;transition-duration: 0.5s;} #header .header_inner #nav ul li.on a{color:#fffcec;} #header .header_inner #nav ul li ul li {display:block;margin:0; margin-bottom:13px; line-height:1.5;} #header .header_inner #nav ul li ul li a{display:block;color:#fffcec !important; font-size:0.9rem; padding:0; height:auto; font-weight: 400; line-height:1.5; transition: all .2s; -webkit-transition: all .2s;} #header .header_inner #nav ul li ul li a:before{content:""; display:block; clear:both;} #header .header_inner #nav ul li ul li a:hover{color:#fff; } #header .header_inner #nav ul li.active > div > a{} #header .header_inner #nav ul li.active ul li:after{display:none;} #header .header_inner #nav ul li ul li a strong{color:#fff; font-weigh:400;} #header .header_inner #nav ul li ul li a:hover{color:#fffcec !important;} /*사이트맵 버튼*/ #header .btn-gnb-menu{position:absolute; right:0; top:50%; font-size:0; line-height:1;cursor:pointer; z-index:9999;text-align:center;transform:translateY(-50%);} #header .btnAll {position:relative; width:1.5rem; height:1.2rem;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; right:0;width:2rem;} #header .btnAll > span:nth-child(2) { top: 0.5rem; left:0; width:1.35rem;display:none;} #header .btnAll > span:nth-child(3) { top: 0.5rem; right:0; width:1.5rem;} #header.open .btn-gnb-menu span{background:#000;} #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;} /*사이트맵*/ /* ****************** 사이트맵 ********************** */ /* -------- 사이트맵 01 -------- */ /* 사이트맵 01 */ .sitemap-wrapper{padding:30px; background-color:#fff;} .sitemap-wrapper > ul{display:table; width:100%; table-layout:fixed;} .sitemap-wrapper > ul > li{display:table-cell; vertical-align:top; text-align:center;} .sitemap-wrapper > ul > li > h2{color:#191919; margin:0 2% 20px 2%; padding:15px; font-size:18px; background-color:#f2f2f2; letter-spacing:-1.0px; margin-bottom:20px; font-weight:500;} .sitemap-wrapper > ul > li ul {padding:0 5% 20px;} .sitemap-wrapper > ul > li ul a{display:block; padding:10px 0; color:#666; font-size:14px; font-weight:400; line-height:1.2em;} .sitemap-wrapper > ul > li ul a:hover{color:#000; } /* -------- 사이트맵 -------- */ #siteCon{ position:fixed; top:0; left:0; right:0; bottom:0; opacity:0;filter:Alpha(opacity=0); visibility:hidden; z-index:1;-webkit-transition:all 0.3s 0.5s;transition:all 0.3s 0.5s; } #siteInCon{position:absolute; top:0; left:0; bottom:0; right:120px;} #siteCon .sitemap-bg-box{position:absolute; top:0px; left:0px; width:100%; height:100%;} #siteCon .flipBg{float:left; position:relative; height:100%;} #siteCon .flipBg:after{ content:""; position:absolute; right:0; top:0px; width:100%; height:100%; background: #000; -webkit-transition: width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s; transition: width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s ; } /* 사이트맵 02 :: 메뉴리스트 */ .siteCon_dep2{height:100%; } .siteCon_dep2 > ul{overflow:hidden; position:relative; z-index:1; height:100%;} .siteCon_dep2 > ul > li{overflow:hidden; float:left; width:25%;height:100%;position:relative;padding-top:15%;} .siteCon_dep2 > ul > li:after{content:'';display:block;position:absolute;width:1px;height:100%;background:#ddd;right:0;top:0;} .siteCon_dep2 > ul > li > div > a {position:relative; color:#191919;font-weight:bolder; font-family:'Cormorant Garamond'; font-size: 3rem;} .siteCon_dep2 > ul > li > div > a:hover{color:#000;} .siteCon_dep2 > ul > li > div{color:#191919; font-size:1.4rem; letter-spacing:-1.0px;font-weight:600;padding:0 15%;margin-bottom:1.5rem;} .siteCon_dep2 > ul > li ul a{overflow:hidden; position:relative; display:block; padding:20px 15%; color:#777; font-size:1rem; letter-spacing:-0.15px; font-weight:400; line-height:1.2;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s} .siteCon_dep2 > ul > li ul a:after{position:absolute; top:0; left:0; width:0; content:""; height:100%; background:#191919; z-index:-1;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s } .siteCon_dep2 > ul > li ul a span{position:relative; z-index:1;} .siteCon_dep2 > ul > li ul a .gnb-icon{display:none;} .siteCon_dep2 > ul > li ul a:hover{color:#fff; } .siteCon_dep2 > ul > li ul a:hover:after{width:100%; } .siteCon_dep2 ul li span{ display:block; opacity:0;filter:Alpha(opacity=50); -webkit-transform:translateX(-5%); transform:translateX(-50%); transition: transform .8s cubic-bezier(0.47, 0, 0.31, 1.04) 0s, opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04) 0s; } /* 사이트맵 open */ #siteCon.open{ opacity:1.0;filter:Alpha(opacity=100); visibility:visible; background-color:#fff; -webkit-transition:all 0.3s 0s; transition:all 0.3s 0s; } #siteCon.open .flipBg:before{height:100%;} #siteCon.open .flipBg:after {width:0;} #siteCon.open .flipBg { -webkit-transform: scaleX(1); transform: scaleX(1); transform-origin:right top; transition-property: transform; } #siteCon.open .siteCon_dep2 ul li span{ opacity:1.0;filter:Alpha(opacity=100); -webkit-transform:translateX(0); transform:translateX(0); transition: transform .8s cubic-bezier(0.47, 0, 0.31, 1.04), opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04); } /*푸터*/ .sec06{background:url(/images/default/main/sec06-bg.jpg)no-repeat center center;background-size:cover;padding:11rem 0 7rem 0;color:#fff;} .sec06 .inner{position:relative;} .sec06 .contact {display:flex;} .sec06 .contact p{font-size:1.5rem;font-weight:600;line-height:1;margin-right:4.25rem;} .sec06 .contact ul li{font-size:1.25rem;font-weight:600;} .sec06 .contact ul li span{color:#ffe345;font-weight:600;margin-right:0.75rem;} .sec06 .contact-img{padding:0 0 12rem;} .sec06 .add-txt {font-size:.9rem;} .sec06 .add-txt p.copy{color:#888;margin-top:0.9rem;} .sec06 ul.contact-link{display:flex;position:absolute;bottom:0;right:0;} .sec06 ul.contact-link li:not(:last-child) {margin-right:1rem;} .sec06 ul.contact-link li:nth-child(1) a{background:url(/images/default/main/f-icon01.png)no-repeat center center;} .sec06 ul.contact-link li:nth-child(2) a{background:url(/images/default/main/f-icon02.png)no-repeat center center;} .sec06 ul.contact-link li:nth-child(3) a{background:url(/images/default/main/f-icon03.png)no-repeat center center;} .sec06 ul.contact-link li:nth-child(1) a:hover{background:#fff url(/images/default/main/f-icon01-color.png)no-repeat center center;} .sec06 ul.contact-link li:nth-child(2) a:hover{background:#fff url(/images/default/main/f-icon02-color.png)no-repeat center center;} .sec06 ul.contact-link li:nth-child(3) a:hover{background:#fff url(/images/default/main/f-icon03-color.png)no-repeat center center;} .sec06 ul.contact-link li a{display:inline-block;width:3.5rem;height:3.5rem;border:1px solid #fff;border-radius:50%;display:flex;justify-content:center;align-items:center; } .sec06 #arrow { display: block; width: 5rem;margin-left:5.5rem;} .sec06.active #arrow { display: block; opacity:1; width: 5rem;} .sec06 #ar1{stroke-dasharray: 620; stroke-dashoffset: 620;animation: ch-anim 1s linear 0s forwards;} .sec06 #ar2{stroke-dasharray: 460; stroke-dashoffset: 460;animation: aen-anim 1s linear 1s forwards;} .sec06 #ar3{stroke-dasharray: 460; stroke-dashoffset: 460;animation: aen-anim .1s linear 1s forwards;} .sec06 .inner{width:1720px;margin:0 auto;} @keyframes ch-anim { from {stroke-dashoffset : 1000px;} to {stroke-dashoffset : 0px;} } @keyframes aen-anim { from {stroke-dashoffset : 460px;} to {stroke-dashoffset : 0px;} } @media (max-width:1720px){ .sec06 .inner{width:100%;padding:0 1rem;} } @media (max-width:1500px){ .sec06 {padding:5rem 0;} .sec06 ul.contact-link{right:1rem;} } @media (max-width:767px){ .sec06 .contact-img {padding:1rem 0 5rem 0;} .sec06 ul.contact-link{position:relative;right:auto;margin-top:2rem;} } /******************************************************** ■ 레이아웃 변경 ********************************************************/ @media (max-width:1400px){ .tablet2{display:none;} /*-----폰트-----*/ #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{width:100%; padding:0 1rem;} #header .header_inner h1{left:1rem; width:9rem;} .h_fixed h1 a{background-position:0 -1.2rem !important;} #header .over h1 a {transition: all .3s ease-in-out; background-size:cover; background-position:0 -1.2rem;} #header .header_inner .sitemap{right:1rem;} #header .header_inner #nav ul li ul{padding:1rem 0;} /*서브텍스트*/ #wrap #sepration .section{padding:0 1rem;} /*탑메뉴 2차*/ .bg_box .bg_img{padding:1.5rem 1rem;} .bg_box .box_txt{width:100%; margin: 0; padding:1rem 1rem 1rem 2rem;} .bg_box .bg_img h4{padding:1rem;} #wrap .header_inner .sitemap p{right:10px;} #menuAll .mobile_top ul {width:100%;} /*푸터*/ #footer .copyright{width:100%;padding:0 1rem;} #footer .footer_inn{width:100%;padding:0 1rem;margin:0;} #footer .footer_center_bx{display:block;} #footer .footer_center ul {display:block;} } @media (max-width:1200px){ /*-----폰트-----*/ #header .header_inner #nav ul li ul li a{font-size:0.75rem;} } @media (max-width:1100px){ /*탑메뉴 2차*/ .bg_box:after, .bg_box .box_txt{width: 25%;} } /******************************************************** ■ 태블릿 ********************************************************/ @media (max-width:1030px){ html{font-size:16px;} body{font-size:1rem} .web{display:none} .mob{display:block;} .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 .btn-gnb-menu{display:block;} #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;} #footer .f_add_bx img{max-width:8rem;} /*사이트맵 버튼*/ #header .btn-gnb-menu{display:block; position:absolute; right: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;} #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;} /*전체메뉴*/ #header #navi{background:#191919; position:fixed; right:-100%; top:0; width:100%; height:100%; padding-top:4rem; z-index:100; transition:right 0.45s;} #header.open #navi{transition:right 0.45s; right:0px;} #menuAll .mobile_top{border-top:1px solid #ddd;} #menuAll{display: block;} #navi h3{font-size:1.2rem; padding:1rem 0.75rem; line-height:1.3; font-weight:normal; margin:0; text-align: center; background:#221815; } #navi h3 img{width:4rem;} #menuAll .mobile_top{width:100%;height:auto; background:transparent; position:relative;} #menuAll .mobile_top:before, #menuAll .mobile_top:after{display: none;} /*모바일 로그인*/ .m_log{display:block;} .m_log > p{padding:0 1rem; height:4rem; line-height:4rem; font-size:1.2rem; font-weight:300;} .m_log > div{background:#59BFFF; color:#fff; display:flex;} .m_log > div a{flex:1; padding:10px 0; text-align:center; color:#fff; position:relative;} .m_log > div a:not(:first-child):before{content:'';display : block; position : absolute; left :0; top:0; width :1px; height : 100%; background:rgba(255,255,255,0.4);} /*1차*/ #menuAll .mobile_top .mbtop{border: 0; width: 100%; padding:0;margin-left: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; font-size:2.2rem; color:#fffcec; background:#191919;} #menuAll .mobile_top .mbtop > li > a:hover{color:#191919; background:#fffcec;} #menuAll .mobile_top .mbtop > li > a:before{display:none;} #menuAll .mobile_top .mbtop > li > a.newBlank:after{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 #888; position:relative;} #navi ul.mbtop li:after{ content :"\e913"; display : block; position : absolute; right:1.5rem; top:2rem; font-size:1.8rem; font-family:'xeicon'; font-weight:500; color:#fffcec; } #navi ul.mbtop li:hover:after{color:#191919; } #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:2rem 1rem 2rem; line-height:1; 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:#fff; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding:1rem; margin-top:0; margin-left: 0; border-top:1px solid #fff;} #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:1.3rem; color:#333;} #navi ul.mbtop li ul li:after, #navi ul.mbtop li ul li:before{display:none;} #navi ul.mbtop li ul li:not(:last-child){margin-bottom:0.5rem;} /*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;} /*footer*/ #footer .copyright{display:block;padding:0 1rem;width:100%;} #footer .copyright .img_zone{margin-bottom:2rem;} #footer .copyright .link_zone{position:relative;margin-bottom:1rem;} #footer .copyright .link_zone li:first-child{padding-left:0;} #footer .copyright .copy_bx{margin-bottom:1rem;display:block;} #footer .copyright .copy_bx .ft_link{margin-left:0;margin-top:1.5rem;} } /******************************************************** ■ 모바일 ********************************************************/ @media (max-width:767px){ html{font-size:15px;} body{font-size:1rem} .mob{display:block;} #footer .f_add_bx img{max-width:7rem;} /*탑메뉴*/ #header h1{left: 1rem;} #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;} .m_log > p{height:3.6rem; line-height:3.6rem; } /*푸터*/ #footer .copyright .f_info li span{display:block;margin-right:0;padding-right:0;margin-bottom:5px;} #footer .copyright .f_info li span:last-child{margin-bottom:0;} #footer .copyright .f_info li span:after{display:none;} }