@charset "utf-8"; body {-webkit-text-size-adjust:none;} /* common */ [class$="inr"]{width:1200px;margin:0 auto; } [class$="inr"]:after{content:'';display:block;clear:both;} .inr {width:1200px;margin:0 auto; } .inr:after{content:'';display:block;clear:both;} .img img{max-width:100%;} /* Layout */ #wrap{position:relative;max-width:1920px; margin:0 auto; } .trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s} .trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s} .trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s} /* Header */ #header{position:fixed; top:0px; left:50%;margin-left:-960px ; width:1920px;height:100px; z-index:9999; border-bottom:1px solid rgba(255,255,255,0.1)} #header h1.logo{z-index:33; position:absolute; top:20px; left:50px; width:170px; } #header h1.logo>a{ text-indent:-9999px; display:block; height:48px; background:url(/images/inc/logo_w.png) 50% 50% no-repeat;background-size:cover; } #header .gnb_wrap{ position:relative; margin:0 auto; width:1200px; height:100px;} #header .transition{z-index:30;transition:.3s ease-out;} #header .util_area{position:absolute;top:42px;right:5%;z-index:99;} #header .util_area .global_box {position:relative;z-index:1;float:right;} #header .util_area .global_box > ul > li {display:inline-block;} #header .util_area .global_box > ul > li > a {display:inline-block;/* height:100px;line-height:100px; */vertical-align:top;font-weight:400;color:#000;font-size:18px;color:#fff;} #header .util_area .global_box > ul > li:first-child > a {padding-right:23px;margin-right:41px;margin-top:-4px;background:url(./../img/layout/gnb_arr_ov.png) no-repeat right center;} #header .scroll .global_box > ul > li:first-child > a {position:relative;height:60px;line-height:60px;color:#121212;} #header .util_area .global_box > ul > li:first-child > ul {display:none;margin-top:15px;padding:10px 20px;background:#fff;border:1px solid #ddd;} #header .util_area .global_box > ul > li:first-child > ul li {margin:8px 0;font-size:18px;} /*전체메뉴*/ #header .wholeview .btn_open{position:absolute;top:0;right:0;width:35px; height:20px;background:url(/front/img/www/common/ico_wholeview.png) no-repeat 0 0;text-indent:-999em;} #header .wholeview .nav_wholeview{display:none; position:fixed; top:0; left:50%; width:100%; height:100%; margin-left:-50%; padding:0 50px; z-index:999; overflow:hidden; background:#0a0e12 url(/front/img/www/common/bg_sitemap_pattern.png) no-repeat 0 0; opacity:0.9} #header .wholeview .nav_wholeview .sitemap_logo{margin:30px 0 60px 42px;} #header .wholeview.open .nav_wholeview{display:block !important;} #header .wholeview .nav_wholeview>ul{max-width:1200px;margin:0 auto;} #header .wholeview .nav_wholeview>ul li a{color:#fff;} #header .wholeview .nav_wholeview>ul:after{content:''; display:block; clear:both;} #header .wholeview .nav_wholeview>ul>li{float:left; position:relative; width:25%;margin-bottom:50px;} #header .wholeview .nav_wholeview>ul>li>a{display:block; position:relative;height:55px;padding:0;font-size:24px;} #header .wholeview .nav_wholeview>ul>li>div>ul{} #header .wholeview .nav_wholeview>ul>li>div>ul>li{position:relative;padding:6px 0 6px 15px;} #header .wholeview .nav_wholeview>ul>li>div>ul>li:before{content:'';display:inline-block;position:absolute;top:17px;left:0;width:7px;height:2px;background:#fff;} #header .wholeview .nav_wholeview>ul>li>div>ul>li>a{padding:0;font-size:16px;transition:200ms ease-out 0ms;} #header .wholeview .nav_wholeview>ul>li>div>ul>li>a:hover { color:#0296fe;} #header .wholeview .nav_wholeview>ul>li>div>ul>li ul{padding:10px 0;} #header .wholeview .nav_wholeview>ul>li>div>ul>li ul li a{margin-bottom:5px;font-size:14px;color:#838588;} #header .wholeview .nav_wholeview .btn_close{z-index:40;position:absolute; top:30px; right:75px;width:48px; height:48px;background:url(/front/img/www/common/btn_wholeview_inr_close.png) no-repeat 50%;text-indent:-999em;vertical-align:top;} .overlay{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:998;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#44000000, endColorstr=#44000000)";background:rgba(0,0,0,.8);} #header .wholeview .nav_wholeview .btn_close{z-index:40;position:absolute; top:46px; right:65px;width:48px; height:48px;background:url(/front/img/www/common/btn_wholeview_inr_close.png) no-repeat 50%;text-indent:-999em;vertical-align:top;} .overlay{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;z-index:998;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#44000000, endColorstr=#44000000)";background:rgba(0,0,0,.8);} .mobile_wholeview{display:none;} /* GNB Wrap */ #header #gnb{z-index:31;position:relative; display:block; width:100%; margin:0 auto; text-align:center; font-size:0;padding:0 15%; } #header #gnb:after{content: ''; display: block; clear: both;} #header #gnb>li{position:relative;display:inline-block;width:25%;} #header #gnb>li>a{display:block;position:relative;line-height:100px; font-size:20px; font-weight:500; text-align:center;color:#fff;} #header #gnb>li>a:before{content:'';display:inline-block;position:absolute;bottom:0;left:50%;width:0%;height:2px;background:#00A0E9;opacity:0;transition:all .3s;} /*#header #gnb>li.on>a:before,*/ #header #gnb>li>a:hover:before, #header #gnb>li>a:focus:before, #header #gnb>li>a:active:before{left:50%;margin-left:-47px;width:94px;opacity:1;} #header #gnb>li.open>a, #header #gnb>li.open>a:hover, #header #gnb>li.open>a:focus, #header #gnb>li.open>a:active{color:#00A0E9;} #header #gnb>li>div{z-index:100; overflow:hidden; position:absolute; top:100px;width:100%;height:auto;} #header #gnb>li>div>ul{position:relative;padding:30px 25px 35px;} #header #gnb>li>div>ul>li{margin-bottom:12px;} #header #gnb>li>div>ul>li>a{display:block; font-size:16px; color:#555; font-weight:500; text-align:center; white-space:nowrap;letter-spacing:-1px;} #header .gnb_bg{position:absolute;top:100px;left:0;width:100%;background-color:#fff;} .trans{ -webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); -moz-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } #header .social {position:absolute; right:70px; top:38px; } #header .social i {font-style:normal; font-size:25px; color:#fff; vertical-align:top; margin:0 12px; font-family:'xeicon';} #header .social a {display:inline-block; vertical-align:middle; margin-left:0.9rem;text-align:center; } #header .social a:before {content:''; font-family:'xeicon';display:inline-block; vertical-align:middle;width:40px; height:40px; font-size:1.65rem; color:#fff;} #header .social a.fb:before {content:"\ebd3"; } #header .social a.insta:before {content:"\ebe9"; } #header .social a.blog:before {content:''; background:url('/images/inc/ico_blog.png') no-repeat center 0; background-size:35px;} #header.scroll .social {top:21px; } #header.scroll .social i { color:#333; } #header.fixed .social i { color:#333; } #header.scroll .social a:before , #header.fixed .social a:before {color:#333;} #header.scroll .social a.blog:before, #header.fixed .social a.blog:before {content:''; background:url('/images/inc/ico_blog_bk.png') no-repeat center 0; background-size:35px;} #header.fixed{background:#fff} #header.fixed h1.logo>a{background-image:url(/images/inc/logo.png);} #header.fixed .gnb_wrap{height:70px;} #header.fixed #gnb>li>a{position:relative;color:#121212;} #header.fixed #gnb>li>a:before{content:'';display:inline-block;position:absolute;bottom:0;left:50%;width:0%;height:2px;background:#00A0E9;opacity:0;transition:all .3s;} #header.fixed #gnb>li.on>a{color:#00A0E9;} #header.fixed #gnb>li.on>a:before, #header.fixed #gnb>li.on>a:hover:before, #header.fixed #gnb>li.on>a:active:before, #header.fixed #gnb>li.on>a:focus:before{left:50%;margin-left:-47px;width:94px;opacity:1;} #header.fixed #gnb>li>div>ul>li>a{color:#3c3c3c;} #header.fixed #gnb>li>div>ul>li>a:hover {color:#00A0E9;} #header.fixed .util_area .lang a{color:#262626;} #header.fixed .wholeview .btn_open{background:url(/front/img/www/common/ico_wholeview_bk.png) no-repeat 0 0;} #header.scroll{height:70px;background:#fff;transition:all .5s;-webkit-transition:all .5s;border-bottom:1px solid rgba(255,255,255,0)} #header.scroll h1.logo{ top:12px;width:130px} #header.scroll h1.logo>a{height:40px;background-image:url(/images/inc/logo.png)} #header.scroll .gnb_wrap{height:70px;} #header.scroll #gnb>li>a{position:relative;height:70px;line-height:70px;color:#121212;} #header.scroll #gnb>li>a:before{content:'';display:inline-block;position:absolute;bottom:0;left:50%;width:0%;height:2px;background:#00A0E9;opacity:0;transition:all .3s;} #header.scroll #gnb>li.on>a:before, #header.scroll #gnb>li.on>a:hover:before, #header.scroll #gnb>li.on>a:active:before, #header.scroll #gnb>li.on>a:focus:before{left:50%;margin-left:-47px;width:94px;opacity:1;} #header.scroll #gnb>li>div {top:70px;} #header.scroll #gnb>li>div>ul>li>a{color:#3c3c3c;} #header.scroll #gnb>li>div>ul>li>a:hover {color:#00A0E9;} #header.scroll .gnb_bg{top:70px;} #header.scroll .util_area{} #header.scroll .util_area .lang a{top:-25px;color:#404040;} d #header.scroll .util_area .btn_open{top:-25px;color:#404040;} #header.scroll .wholeview .btn_open{background:url(/images/inc/logow.png) no-repeat 0 0;} #header.scroll .util_area .global_box > ul > li:first-child > a {margin-top:-28px;} #header.scroll .util_area .global_box > ul > li:first-child > ul {margin-top:-2px;} .mobile_wholeview{display:none;} .m_lang{display:none;} /*** Footer ***/ footer{position:relative; display:block; padding:50px 0 70px;background:#333; } footer .contact {display:block; text-align:center; padding-top:0px; } footer .contact .number {font-size:25px; color:#fff; font-weight:500; font-family:'GmarketSans';} footer .contact .number i {display:inline-block; vertical-align:middle; margin-right:5px;font-size:30px; } footer .contact a {color:#fff; } footer .contact .cs {padding-top:15px; font-size:16px; font-weight:500; font-family:'GmarketSans';color:rgba(255,255,255,0.7)} footer .contact .cs span {display:inline-block; padding:0 12px;} footer .contact .cs p { display:block; font-size:14px; padding-top:10px; color:rgba(255,255,255,0.4)} footer .copyright {position:absolute; left:40px; top:50px; width:35%;} footer address { font-size:15px; font-weight:300; line-height:1.7em; color:rgba(255,255,255,0.7); } footer address span {display:inline-block; padding:0 12px; } footer .copyright p {padding-top:12px; font-size:14px;color:rgba(255,255,255,0.4); } footer .social { position:absolute; right:40px; top:50px; } footer .social i {font-style:normal; font-size:25px; color:rgba(255,255,255,0.5); vertical-align:top; margin:0 12px; font-family:'xeicon';} footer .skip_top{position:fixed;bottom:10%;right:3%; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s; } footer .social {text-align:center; } footer .social a {display:inline-block; vertical-align:middle;margin:0 0.1rem; text-align:center; } footer .social a:before {content:''; font-family:'xeicon';display:inline-block; vertical-align:middle;width:30px; height:30px; font-size:1.25rem; color:#fff;} footer .social a.fb:before {content:"\ebd3"; } footer .social a.insta:before {content:"\ebe9"; } footer .social a.blog:before {content:''; background:url('/images/inc/ico_blog.png') no-repeat center 0; background-size:27px;} @media screen and (max-width:1920px){ #wrap {max-width:100%;} #header{ left:0; margin-left:0 ; width:100%; } } @media screen and (max-width:1500px){ #header .wholeview .nav_wholeview .nav_wholeview_top{width:80%;} #header .wholeview .nav_wholeview>ul{width:80%;} /* footer */ footer address br {display:none;} footer .contact .number {font-size:21px; } footer .contact .number i {font-size:25px; } footer .contact .cs {padding-top:12px; font-size:14px; font-weight:500; font-family:'GmarketSans';color:rgba(255,255,255,0.7)} footer .contact .cs p {font-size:13px; } footer .copyright { left:20px; width:33%;} footer address { font-size:14px; } footer address span { padding:0 10px; } footer .copyright p {padding-top:10px; font-size:13px; } footer .social { position:absolute; right:20px; top:50px; } footer .social i {font-style:normal; font-size:21px; } } @media screen and (max-width:1200px){ [class$="inr"]{ width:100% ;margin:0 auto; } .inr {width:100% ;} #header h1.logo{ top:20px;left:20px; width:130px} #header h1.logo>a{height:40px;background:url(/images/inc/logo_w.png) no-repeat; background-size:cover; } #header #gnb{padding:0 23%;} #header .gnb_wrap{ width:100%; } #header .social {right:20px;} #header.fixed h1.logo>a{background-image:url(/images/inc/logo.png)} /* footer */ footer {padding:35px 0 55px; } footer .copyright {position:relative; left:0; top:auto; text-align:center; clear:both; padding:20px 10px 0; width:100% } footer .social {position:relative; text-align:center; clear:both; top:auto; right:0; padding-top:15px;} } @media screen and (max-width:1024px){ #header{height:70px;} #header #gnb{display:none;} #header .util_area{display:none;} #header .wholeview .btn_open{display:none;} #header .social {display:none;} #header .gnb_wrap{height:70px;} #header h1.logo{ top:12px;} #header.fixed h1.logo{ top:12px; } /* 모바일 전체메뉴 */ .m_lang{display:block;position:absolute; top:21px; right:20px; z-index:30; width:50px; height:50px; text-align:right; cursor:pointer;} /* .m_lang:after {content:"\e91c"; display:inline-block; font-size:25px; color:#fff; } #header.fixed .m_lang:after { color:#333; } #header.scroll .m_lang:after { color:#333; }*/ .mobile_wholeview{display:block;} .mobile_wholeview .btn_wv{position:absolute; top:26px; right:20px; z-index:30; overflow:hidden; width:23px; height:13px;background:url(/images/inc/ico_mobile_wholeview.png) no-repeat 0 0;text-indent:-999em;} #header.fixed .mobile_wholeview .btn_wv{background:url(/images/inc/ico_mobile_wholeview_bk.png) no-repeat 0 0;} #header.scroll .mobile_wholeview .btn_wv{background:url(/images/inc/ico_mobile_wholeview_bk.png) no-repeat 0 0;} #header.fixed .m_lang .global_box > ul > li > a {color:#000;} #header.scroll .m_lang .global_box > ul > li > a {color:#000;} #wholeView {transition: all 0.2s ease-in; opacity:1; } #wholeView .m_logo{position:absolute;top:17px;left:15px;width:135px; display:none;} #wholeView .m_logo a{ text-indent:-9999px; display:block;height:35px;background:url(/images/inc/logo.png)no-repeat;background-size:cover;} #wholeView .wvBg{position:fixed; top:0; right:0; z-index:999; width:100%; background:transparent; transition:background 0.4s ease-in-out 0s; -webkit-transition:background 0.4s ease-in-out 0s; transition-property:height, background; transition-duration:0s, .5s; transition-delay:0s, 0s;} #wholeView.open .wvBg{top:0; background:rgba(0,0,0,0.7);} #wholeView .wv_wrap{ position:fixed; top:0; right:0px; height:auto; /* bottom:0; */ z-index:1000; padding-bottom:100px; margin-top:-1000px; width:100%; background:#fff; transition:all 0.3s; -webkit-transition:all 0.3s; -ms-transform:translate(0, 100%); -webkit-transform:translate(0, 100%); transform:translate(0, 100%); } #wholeView.open .wv_wrap{top:0; right:0;margin-top:0; -ms-transform:translate(0, 0); -webkit-transform:translate(0, 0); transform:translate(0, 0); } #wholeView .wv_wrap .wv_head{width:100%;height:60px;background:#fff; } #wholeView .wv_wrap .btn_close{position:absolute; top:10px; right:20px; z-index:30; overflow:hidden; width:50px; height:50px; text-align:center; background:transparent; } #wholeView .wv_wrap .btn_close:after {content:"\e921" ; display:inline-block; color:#333; font-size:25px;} /* 전체메뉴 */ #wholeView .wv_wrap .nav{/*position:absolute; top:60px; left:0; right:0;*/ /*bottom:0; overflow:auto;*/padding:0 20px;} #wholeView .wv_wrap .nav a{display:block; position:relative; line-height:1.2; color:#fff;} #wholeView .wv_wrap .nav a>.blank{width:12px; height:12px; margin-left:4px; background-position:0 -230px; vertical-align:middle;} /* 1차 */ #wholeView #gnb_mobile{border-top:1px solid #dedede;} #wholeView #gnb_mobile>li{border-bottom:1px solid #dedede;} #wholeView #gnb_mobile>li>a{position:relative; padding:14px 70px 14px 20px; background:#fff; font-size:16px; line-height:1.2; color:#262626;} /*#wholeView #gnb_mobile>li>a:hover,*/ #wholeView #gnb_mobile>li a.on, #wholeView #gnb_mobile>li a:hover, #wholeView #gnb_mobile>li a:focus{color:#e19a01;} #wholeView #gnb_mobile>li>a .unfd{position:absolute;top:0;right:0px;height:100%; width:50px; height:50px; border:0px solid #f00;text-indent:-999em;} #wholeView #gnb_mobile>li>a.on .unfd{text-indent:-999em;} #wholeView #gnb_mobile>li>a .unfd:before{content:'';display:inline-block;position:absolute; top:15px; right:25px; width:1px; height:19px;background:#222;} #wholeView #gnb_mobile>li>a.on .unfd:before{display:none;} #wholeView #gnb_mobile>li>a .unfd:after, #wholeView #gnb_mobile>li>a.on .unfd:after{content:'';display:inline-block;position:absolute;top:24px;right:16px; width:19px; height:1px;background:#222;} /* 2차 */ #wholeView #gnb_mobile>li>ul{display:none;padding:20px;background:#f6f6f6;} #wholeView #gnb_mobile>li>ul>li{} #wholeView #gnb_mobile>li>ul>li>a{padding:7px 20px;height:50px; font-size:15px; color:#666;} /* 3차 */ #wholeView #gnb_mobile>li>ul{display:none;} #wholeView #gnb_mobile>li>ul>li>ul{padding:10px 0;background:#141414;} #wholeView #gnb_mobile>li>ul>li>ul>li>a{position:relative;padding:5px 40px 5px 25%; font-size:14px; color:#999;} #wholeView #gnb_mobile>li>ul>li>ul>li>a:before{content:'';display:inline-block;position:absolute;top:18px;left:20%;width:3px;height:1px;background:#999;} } @media screen and (max-width:768px){ /* header */ #header h1.logo, #header.fixed h1.logo, #header.scroll h1.logo{top:17px;width:165px;height:30px;} #header h1.logo>a, #header.fixed h1.logo>a, #header.scroll h1.logo>a{width:100%;height:100%;background-size:contain;} } @media screen and (max-width:640px){ #wholeView .wv_wrap{} footer .contact .number {font-size:18px; letter-spacing:0} footer .contact .number i {font-size:18px; } footer .contact .cs { font-size:13px; line-height:16px;} footer .contact .cs p {font-size:12px; } footer address { font-size:12px; padding:0 20px; } footer address span { padding:0 5px; } footer .copyright p {padding-top:5px; font-size:12px; } } @media screen and (max-width:420px){ } /* ========================================================================================================= 서브 공통 ========================================================================================================= */ .sub_visual {position:relative; width:100%; height:450px;} .s_bg01 {background:url(/images/sub/s_bg01.jpg) no-repeat center ; background-size:cover; } .s_bg02 {background:url(/images/sub/s_bg02.jpg) no-repeat center ; background-size:cover; } .s_bg03 {background:url(/images/sub/s_bg03.jpg) no-repeat center ; background-size:cover; } .s_bg04 {background:url(/images/sub/s_bg04.jpg) no-repeat center ; background-size:cover; } .s_bg05 {background:url(/images/sub/s_bg01.jpg) no-repeat center ; background-size:cover; } .s_bg06 {background:url(/images/sub/s_bg01.jpg) no-repeat center ; background-size:cover; } .sub_visual .title-wrap {display:block; padding-top:200px; text-align:center; } .sub_visual .title-wrap h2 {font-size:43px; line-height:50px; color:#fff; font-weight:500; font-family:'OpenSans-Semibold'; letter-spacing:0} .sub_visual .title-wrap h2:after {content:''; display:block; margin:25px auto; height:2px; background-color:#fff; width:55px; } /* lnb */ .section_lnb{position:relative; z-index:20; border-bottom:0px solid #cfcfcf; margin-top:-54px;} .section_lnb>.inr{width:1200px;margin:0 auto; background-color:#00A0E9} .section_lnb>.inr:after{content:''; display:block; clear:both;} #lnb{position:relative; padding-left:54px;} #lnb:after{content:''; display:block; clear:both;} #lnb>li{position:relative;float:left;width:250px;border-left:1px solid rgba(255,255,255,0.3);} #lnb>li:first-child{position:absolute; top:0; left:0; width:54px;} #lnb>li:last-child{border-right:1px solid rgba(255,255,255,0.3);} #lnb>li a{display:block;font-size:16px; color:#fff;white-space:nowrap;} #lnb>li>a{position:relative;overflow:hidden; height:54px;line-height:54px; padding:0 40px 0 20px; background:transparent;transition:all 0.1s;} #lnb>li:first-child>a{position:relative; width:100%; padding:0;} #lnb>li:first-child>a .sprh_com{display:inline-block;overflow:hidden;position:absolute; top:50%; left:50%; width:22px; height:18px; margin:-9px 0 0 -11px; background:url(/images/inc/loc_home.png) no-repeat 0 0;color:transparent;white-space:nowrap;} #lnb>li>a .unfd{display:inline-block;overflow:hidden;position:absolute; top:50%; right:15px; width:12px; height:8px; margin:-4px 0 0; background:url(/images/inc/loc_arrow.png) no-repeat 0 0; transition:all 0.1s; transform-origin:50% 50%;color:transparent;white-space:nowrap;} #lnb>li>a.on{color:#fff;border-bottom:1px solid transparent;} #lnb>li>a.on .unfd{transform:rotate(180deg); opacity:1;} #lnb>li>div{/*display:none;*/ position:absolute; top:54px; left:-1px; right:-1px; z-index:50; border:1px solid #d6d6d6; border-top:0;} #lnb>li>div>ul{} #lnb>li>div>ul>li{} #lnb>li>div>ul>li>a{position:relative; padding:16px 40px 17px 20px;background:#fff; color:#333; line-height:1.3;transition:all 0.2s ease;} #lnb>li>div>ul>li>a:after{content:''; display:none; position:absolute; top:50%; right:12px; width:7px; height:11px; margin:-4px 0 0; background-position:-40px -100px;} #lnb>li>div>ul>li>a.on, #lnb>li>div>ul>li>a:hover, #lnb>li>div>ul>li>a:active, #lnb>li>div>ul>li>a:focus{background:#f9f9f9; color:#00A0E9;} #lnb>li>div>ul>li>a.on:after, #lnb>li>div>ul>li>a:hover:after, #lnb>li>div>ul>li>a:active:after, #lnb>li>div>ul>li>a:focus:after{display:block;} #lnb>li>div>ul>li>ul{display:none;} @keyframes navi_fade { 0% {opacity:0;} 100% {opacity:1; } } @media screen and ( max-width:1200px ) { .section_lnb>.inr{width:100%;} .sub_visual { height:320px;} .sub_visual .title-wrap {padding-top:130px; } .sub_visual .title-wrap h2 {font-size:35px; line-height:1.5em; } .sub_visual .title-wrap h2:after { width:30px; } } @media screen and ( max-width:800px ) { .section_lnb{margin-top:-45px;} #lnb>li {width:50% } #lnb>li>a{height:45px;line-height:45px; } #lnb>li>div{ top:45px; } .sub_visual { height:280px;} .sub_visual .title-wrap {padding-top:110px; } .sub_visual .title-wrap h2 {font-size:25px; font-family:'GmarketSans'; } .sub_visual .title-wrap h2:after { margin:10px auto; } } @media screen and ( max-width:676px ) { #lnb>li>div>ul>li>a{ padding-top:12px; padding-bottom:12px;} } /* 탭 */ .tab_wrap {position:relative;margin:0 auto;margin-top:30px;margin-bottom:30px;width:100%;max-width:1000px;font-size:0;text-align:center;} .tab_wrap li {display:inline-block;padding:0 20px;border-bottom:1px solid #999;font-size:20px;font-weight:500;line-height:60px;letter-spacing:-1px;white-space:nowrap;cursor:pointer;} .tab_wrap li.on {font-weight:bold;border-width:0 0 2px 0;border-style:solid;} .tab_wrap li.noline {border:0;} .tab_wrap li.noline .btn_detail {padding-left:26px;font-size:15px;} .tab_wrap.sub1 li.on {border-color:#e70014;color:#e70014;} .tab_wrap.sub2 li.on {border-color:#f59836;color:#f59836;font-weight:bold;} .tab_wrap.sub3 li.on {border-color:#55bdf4;color:#55bdf4;font-weight:bold;} .tab_wrap.sub4 li.on {border-color:#38479c;color:#38479c;font-weight:bold;} .tab_wrap.sub5 li.on {border-color:#009a44;color:#009a44;font-weight:bold;} .tab_wrap.sub1 li:hover {color:#e70014;} .tab_wrap.sub2 li:hover {color:#f59836;} .tab_wrap.sub3 {margin-top:0} .tab_wrap.sub3 li:hover {color:#55bdf4;} .tab_wrap.sub4 li:hover {color:#38479c;} .tab_wrap.sub5 li:hover {color:#009a44;} @media screen and ( max-width:800px ) { .tab_wrap {margin-top:30px;margin-bottom:20px;} .tab_wrap li {padding:0 10px;border:1px solid #dfdfdf;font-size:16px;line-height:40px;} .tab_wrap li.on {border-width:1px;} .tab_wrap li.noline {display:none;} } .btn_detail {display:inline-block;width:20px;height:20px;background:url(/images/inc/btn_detail.png) no-repeat;margin-left:5px;vertical-align:middle;line-height:20px;font-size:0;} .btn_more {display:inline-block;padding-right:40px;background:url(/images/inc/btn_more.png) no-repeat right center;font-size:16px;color:#555;letter-spacing:-1px;line-height:30px;} .txt_red {color:#f22c3a;} /* portfolio */ .main .portfolio {overflow:hidden;height:622px;} .main .portfolio_box li {max-width:308px;} .portfolio {display:inline-block;width:100%;background:#f3f3f3;} .portfolio .title_wrap {margin-bottom:30px;} .portfolio_box .bx-viewport {height:auto !important;overflow:hidden !important;max-width:1250px !important;} .portfolio_box {display:inline-block;width:100%;} .portfolio_box li {float:left;width:24.5%;margin-right:.5%;background:#fff;color:#999;font-size:18px;line-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-webkit-transition:all .2s;-ms-transition:all .2s;transition:all .2s;} .portfolio_box li a {position:relative;display:block;color:#999;} .portfolio_box li .txt {padding:22px 25px 0; font-size:0; background:url(/images/inc/btn_more.png) no-repeat 95% 16%;overflow:hidden;} .portfolio_box li strong {display:inline-block;width:90%;max-height:58px;margin-bottom:30px;color:#222;font-size:22px;line-height:30px;letter-spacing:-1px;font-weight:500;word-break:keep-all;overflow:hidden;} .portfolio_box li.last {margin-right:0 !important;} .portfolio_box li .cate {display:inline-block;padding:0 18px; margin:1px 1.5px;border-radius:50px;border:1px solid #e2e2e2;color:#727272;letter-spacing:-1px;font-size:14px;line-height:30px;} .portfolio_box li .img_wrap {width:100%;height:250px;overflow:hidden;} .portfolio_box li .img {width:100%;height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover;-webkit-transition:all .2s;-ms-transition:all .2s;transition:all .2s;} .portfolio_box li:hover .img {-webkit-transition:all .3s;-ms-transition:all .3s;transition:all .3s;-webkit-transform:translate(0, 0) scale(1.1);transform:translate(0, 0) scale(1.1);} .portfolio_box .bx-controls {position:relative;} .portfolio_box .bx-controls .bx-controls-direction a {position:absolute;top:-417px;width:100px;height:417px;border-radius:50%;background-image:url(/images/inc/btn_prev.png);background-position:10px center;background-repeat:no-repeat;font-size:0;-webkit-transition:all .5s;-ms-transition:all .5s;transition:all .5s;} .portfolio_box .bx-controls .bx-controls-direction a.disabled {opacity:.2;-webkit-opacity:.2;-moz-opacity:.2;} .portfolio_box .bx-controls .bx-prev {left:-100px;background-position:22px center;} .portfolio_box .bx-controls .bx-next {right:-100px;background-position:-135px center !important;} .portfolio_box .bx-pager {text-align:center;} .portfolio_box .bx-pager .bx-pager-item {display:inline-block;width:12px;padding-top:15px;margin-right:5px;} .portfolio_box .bx-pager .bx-pager-item a {display:block;border-radius:50%;width:10px;height:10px;background:none;border:1px solid #777;font-size:0;text-indent:-9999px;} .portfolio_box .bx-pager .bx-pager-item a.active {background:#777;} @media screen and ( max-width:1450px ) { .portfolio_box .bx-controls .bx-prev {left:0;} .portfolio_box .bx-controls .bx-next {right:0;} } @media screen and ( max-width:1250px ) { .main .portfolio {overflow:hidden;height:582px;} .portfolio_box li .txt {padding:25px 15px 0;} .portfolio_box li strong {margin-bottom:20px;font-size:19px;line-height:24px;} .portfolio_box li .cate {padding:0 10px;font-size:13px; margin:1px;} } @media screen and ( max-width:800px ) { .main_service {padding-bottom:65px !important;} .main_service li {width:33%;padding-top:30px;font-size:16px;line-height:22px;} .main_service li img {width:85%;} .port_category .box {height:auto;overflow:hidden;} .port_category .box h3 {clear:both;display:block;width:100%;height:50px;padding:15px 0 0 0;text-align:center;background-size:auto 25px;background-position:23px center;font-size:13px;line-height:20px;} .port_category .box div {clear:both;width:100%;padding:25px 0 33px;text-align:center;} .port_category .box a {width:40%;text-align:center;padding:0 7px;font-size:22px;line-height:40px;} .portfolio {padding-top:60px !important;height:660px;overflow:hidden} .portfolio .title_wrap {margin-bottom:20px;} .portfolio_box li {width:100%;margin-right:0;} .portfolio_box li .txt {padding:20px 20px 0;background:none;} .portfolio_box li strong {width:100%;font-size:20px;line-height:22px;} .portfolio_box li .cate {margin-top:10px;font-size:13px;line-height:25px;} .portfolio_box li:hover .img {-webkit-transform:translate(0, 0) scale(1);transform:translate(0, 0) scale(1);} .portfolio .btn_more {position:relative !important;right:auto;top:auto;left:50%;margin:10px 0 0 -45px;padding:0;width:90px;border:1px solid #777;background:none;text-align:center;line-height:22px;font-size:12px;} } /* ========================================================================================================= 팝업 ========================================================================================================= */ .pop_bg, .pop_bg2 {position:fixed;left:0;right:0;bottom:0;top:0;background:rgba(0,0,0,.5);z-index:9999;} .pop_bg2 {display:none;} .header_pop {background:#f2f2f2;} .header_pop h2 {display:inline-block;padding:40px 30px 30px;font-size:28px;letter-spacing:-2px;line-height:34px;font-weight:normal;} .header_pop .header_info {position:absolute;right:25px;top:25px;font-size:0;text-decoration:none !important;letter-spacing:-1px;line-height:50px;z-index:10;} .header_pop .btn_close {display:inline-block;width:45px;height:45px;padding-left:0;background-image:url('/images/inc/btn_close.png');background-repeat:no-repeat;background-position:center center;text-decoration:none !important;line-height:29px;font-size:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow:hidden;} .pop_layer {position:fixed;left:50%;top:50%;background:#fff;overflow:hidden;z-index:10000;} .pop_layer .pop_cont {width::100%;height:100%;overflow:hidden;background:#fff;font-size:0;} .pop_layer iframe {border-width:0 !important;} .pop_wrap {overflow:auto;padding:20px 40px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .pop_wrap h3 {padding:30px 0;font-size:20px;color:#111;line-height:24px;font-weight:bold;letter-spacing:-1px;} @media screen and ( max-width:800px ) { .header_pop h2 {display:inline-block;padding:30px 20px 20px;font-size:24px;} .header_pop .header_info {right:15px;top:15px;} .header_pop .btn_close {background-size:35px 35px;} .pop_layer {left:0 !important;top:0 !important;width:100% !important;height:100% !important;margin:0 !important;} .pop_layer .pop_cont {overflow:auto !important;} .pop_layer .pop_cont iframe {width:100% !important; height:calc(100% - 84px) !important;} } .header_pop2 {background:#f2f2f2;} .header_pop2 h2 {display:inline-block;padding:40px 30px 30px;font-size:28px;letter-spacing:-2px;line-height:34px;font-weight:normal;} .header_pop2 .header_info {position:absolute;right:25px;top:25px;font-size:0;text-decoration:none !important;letter-spacing:-1px;line-height:50px;z-index:10;} .header_pop2 .btn_close {display:inline-block;width:45px;height:45px;padding-left:0;background-image:url('/images/inc/btn_close.png');background-repeat:no-repeat;background-position:center center;text-decoration:none !important;line-height:29px;font-size:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow:hidden;} .Pop_layer {position:fixed;left:50%;top:70%;background:#fff;overflow:hidden;z-index:10000;} .Pop_layer .pop_cont {width::100%;height:100%;overflow:hidden;background:#fff;font-size:0;} .Pop_layer iframe {border-width:0 !important;} .Pop_wrap {overflow:auto;padding:20px 40px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .Pop_wrap h3 {padding:15px 0;font-size:20px;color:#111;line-height:24px;font-weight:bold;letter-spacing:-1px;} /* 포트폴리오 상세 */ .port_detail {display:none;width:100%;max-width:1000px;height:830px;margin-left:-500px;margin-top:-405px;} .port_detail .kind {font-size:14px;color:#999;} .port_detail .header_pop {padding:50px 50px 35px;overflow:hidden;} .port_detail .header_pop h2 {display:block;padding:10px 0;} .port_detail .header_pop .key {border:1px solid #dfdfdf;} .port_detail .pop_cont {height:calc(100% - 193px);overflow:auto;} .port_detail .float {float:left;width:50%;} .port_detail .txt div {position:relative;padding-bottom:5px;padding-left:90px;letter-spacing:-1px;font-size:16px;} .port_detail .txt span {position:absolute;left:0;top:5px;width:90px;display:inline-block;color:#999;font-size:14px;} .photo_wrap {padding:15px;} .photo_wrap .photo_big {text-align:center;} .photo_wrap .photo_big img {width:auto;max-width:100%;max-height:500px;height:auto;} .photo_wrap .photo_gallery {padding:10px 0;overflow:hidden;text-align:center;} .photo_wrap .photo_gallery ul {position:relative;display:inline-block;margin:0 auto;width:auto;} .photo_wrap .photo_gallery li {position:relative;float:left;width:80px;height:50px;border:1px solid #fff;margin-right:5px;cursor:pointer;} .photo_wrap .photo_gallery li img {width:100%;height:100%;} .photo_wrap .photo_gallery li.on:after {content:'';position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid #333;background:rgba(0,0,0,.7);-webkit-transition:all .2s;-ms-transition:all .2s;transition:all .2s;} .photo_wrap .text {padding:20px 0;color:#555;font-size:18px;} .btn_viewphoto_box {display:none;} .btn_viewphoto {position:absolute;display:inline-block;top:50%;left:50%;width:65px;height:65px;margin-top:-280px;border-radius:50%;background-image:url(/images/inc/btn_prev.png);background-position:0 center;background-repeat:no-repeat;font-size:0;-webkit-transition:all .5s;-ms-transition:all .5s;transition:all .5s;z-index:10001;} .btn_viewphoto.prev {background-position:0 center;margin-left:-540px;} .btn_viewphoto.next {background-position:-150px center !important;margin-left:480px;} .port_search {width:250px !important;background:#fff !important;} @media screen and ( max-width:800px ) { .port_detail {overflow:auto !important;} .port_detail .header_pop {padding:30px;} .port_detail .header_pop .btn_close {position:fixed;right:15px;} .port_detail .kind {font-size:12px;} .port_detail .float {clear:both;width:100%;} .port_detail .txt {padding-top:20px;} .port_detail .key {line-height:25px;} .port_detail .txt div {font-size:14px;} .port_detail .txt span {font-size:12px;} .port_detail .pop_cont {height:auto;} .photo_wrap {padding:10px;} .port_search {width:calc(100% - 190px) !important;} .btn_search_wrap {display:inline-block;padding-top:5px;} }