@charset "utf-8"; /* css setting start */ .sec-wrap, .sec-header, .sec-content, .sec-footer {position:relative;width:100%;margin:0;padding:0;box-sizing:border-box;} .wr{max-width:1200px; margin:0 auto; position:relative;} .forP{display:block !important; margin:0 auto;} .forM{display:none !important;} @media screen and (max-width:768px){ .forP{display:none !important;} .forM{display:block !important; margin:0 auto;} } /* css setting end */ /****************************************** header ******************************************/ .sec-util{height:100px; position:relative;} .sec-util .logo{display: block; width:221px; height:66px; background: url(/design/default/images/logo.jpg) no-repeat 50%; position:absolute; left:0px; top:17px; } .sec-util .sns{text-align:right; padding-top:30px;} .sec-util .sns a{display:inline-block; padding-left:5px;} @media screen and (max-width:768px){ .sec-util{height:80px; box-shadow:2px 2px 5px rgba(0,0,0,0.05); position:fixed; left:0; top:0; width:100%; background:#fff; z-index:99999;} .sec-util .logo{width:150px; height:45px; background-size:cover; left:10px; top:10px;} .sec-util .sns{display:none;} } .sec-header{position:fixed; background:#fff; top:100px; border-top:1px solid #ededed; left:0; z-index:9; height:60px; text-align:left; transition:all ease .5s; -webkit-transition:all ease .5s; -o-transition:all ease .5s; -moz-transition:all ease .5s; -ms-transition:all ease .5s; overflow: hidden;} /* mouseover */ .sec-header.on{background:#fff; box-shadow:2px 2px 5px rgba(0,0,0,0.05); top:100px;} .sec-header.on .nav:after{display:none;} .sec-header.on .nav > li > h2{color:#000;} .sec-header:after{opacity:0; transition:all ease .6s;-webkit-transition:all ease .6s; -o-transition:all ease .6s; -moz-transition:all ease .6s; -ms-transition:all ease .6s;} .sec-header:before{content:''; width:100%; height:60px; background:#fff; position:absolute; top:0; right:0; z-index:-1; opacity:0; transition:all ease .6s;-webkit-transition:all ease .6s; -o-transition:all ease .6s; -moz-transition:all ease .6s; -ms-transition:all ease .6s;} .sec-header.active:after{content:''; width:320px; height:168px; background:url(/design/default/images/nav-bg.png) no-repeat; position:absolute; bottom:0; right:12%; z-index:-2; opacity:1;} .sec-header.active:before{opacity:1;} .sec-header.scroll{top:0px;} /* menu */ .nav{display:inline-block; } .nav:after{content:''; width:100%; height:1px; background:rgba(255,255,255,0.15); position:fixed; left:0; top:60px;} .nav h2{font-weight:400; cursor:pointer;} .nav h3{font-weight:400;} .nav > li{float:left; text-align:left;} .nav > li h2{color:#000; font-size:24px; line-height:60px;} .nav > li h2:hover{color:#d72920;} .nav > li h2 a{color:#000; font-size:24px; padding:0 70px 0 0; line-height:60px;} .nav > li h2 a:hover{color:#d72920;} .nav > li h3{color:#000; font-size:18px; font-weight:500;} .nav > li h3 a{ transition:all ease .3s;-webkit-transition:all ease .3s; -o-transition:all ease .3s; -moz-transition:all ease .3s; -ms-transition:all ease .3s;} .nav > li h3 a:hover{color:#d72920;} .nav > li > a{color:#666; font-size:16px;} .nav > li > ul{width:100%; height:0; padding:0; overflow:hidden; width:100%; position:absolute; top:60px; left:0; text-align:left; } .nav > li > ul > li{ display:inline-block; text-align:left; padding:0 25px 0 0; opacity:0; transition:all ease .6s;-webkit-transition:all ease .6s; -o-transition:all ease .6s; -moz-transition:all ease .6s; -ms-transition:all ease .6s;} .nav > li > ul > li > h3{margin:0 0 10px;} .nav > li > ul > li > a{display:block; padding:5px 2px; transition:all ease .3s;-webkit-transition:all ease .3s; -o-transition:all ease .3s; -moz-transition:all ease .3s; -ms-transition:all ease .3s; color:#666;} .nav > li > ul > li > a:hover{color:#d72920;} .nav > li.open h2{position:relative; } .nav > li.open .depth-1{height:150px;} .nav > li.open .depth-2{height:156px;} .nav > li.open .depth-3{height:40px;} .nav > li.open .depth-4{height:40px; padding-left:140px;} .nav > li.open .depth-5{height:40px; padding-left:300px;} .nav > li.open .depth-6{height:40px; padding-left:450px;} .nav > li.open .depth-7{height:130px; padding-left:550px;} .nav > li.open ul{padding:30px; border-top:1px solid #eee;} .nav > li.open ul > li{ opacity:1;} /* sitemap */ .btn-category {position:fixed; top:29px; right:50px; width:30px; height:24px; cursor:pointer; z-index:99999;} .btn-category .bar {position: absolute; left:0; width:100%; width:100%; height:2px; border:0; background:#000; transition:opacity 0.3s, top 0.3s, transform 0.5s; transition-delay:0.3s, 0.3s, 0s} .on .btn-category .bar{background:#000;} .btn-category .bar:nth-child(1) {top:0; transform:rotate(0)} .btn-category .bar:nth-child(2) {top:11px; opacity:1} .btn-category .bar:nth-child(3) {top:22px; transform:rotate(0)} .btn-category.map{ right:67px;} .btn-category.map .bar {background:#000; transition:background 1s, opacity 0.3s, top 0.3s, transform 0.5s; transition-delay:0s, 0s, 0s, 0.3s; } .btn-category.map .bar:nth-child(1) {top:11px; background:#000; transform:rotate(-45deg)} .btn-category.map .bar:nth-child(2) {opacity:0} .btn-category.map .bar:nth-child(3) {top:11px; background:#000; transform:rotate(45deg)} #sitemap{position:fixed; top:0px; right:-100%; width:100%; height:calc(100% - 0px);background: rgba(0,0,0,0.5);padding:180px 20px 40px; z-index:998;transition:all ease .5s; -webkit-transition:all ease .5s; -o-transition:all ease .5s; -moz-transition:all ease .5s; -ms-transition:all ease .5s; overflow: hidden; overflow-y:auto;} #sitemap > ul{max-width:1280px; overflow:hidden; margin:0 auto; background-color:#ffffff; padding:50px; border-radius:25px;} #sitemap > ul > li{float:left; width:17.5%; padding:0 10px; min-height:500px;} #sitemap > ul > li:nth-child(2){width:30%;} #sitemap > ul > li:nth-child(6){ min-height:inherit;} #sitemap > ul > li h2{font-size:16px; color:#fff ; background:#0066cc; border-radius:23px; text-align:Center; font-weight:normal; padding:10px 0;} #sitemap > ul > li h2 a{font-size:16px; color:#fff ; font-weight:normal;} #sitemap > ul > li h3{font-size:16px; color:#333; font-weight:500; margin:0 0 10px} #sitemap > ul > li > ul > li{margin:20px 0;} #sitemap > ul > li > ul > li > a{color:#999; font-size:16px; padding:3px 0; display:block; text-indent:15px;} #sitemap > ul > li h3 > a:hover{color:#0066cc;} #sitemap > ul > li > ul > li > a:hover{color:#0066cc;} #sitemap.open{right:0;} .sec-header.stm-hd{background:#fff } .sec-header.stm-hd .logo{background-image:url(/design/default/images/logo-b.png);} .sec-header.stm-hd .nav{display:none;} .sec-header.stm-hd .lang{display:none;} .scr{overflow-y:hidden;} .lang{position:absolute; top:16px; right:0;} .lang a{color:#000; font-size:18px; margin:0 10px; display:inline-block; position:relative; opacity:.6; font-weight: 500;} .lang a:hover{opacity:1;} .lang a.active{opacity:1;} .lang a.active:before{content:''; width:100%; height:2px; position:absolute; bottom:-2px; left:0; background:#fff;} .sec-header.on .lang a{color:#333;} .sec-header.on .lang a.active:before{ background:#333;} @media screen and (max-width:768px){ #sitemap > ul > li > ul > li > a{padding:7px 0; } #sitemap > ul > li:nth-child(2){width:100%;} } /* quick */ .quick-menu{position:fixed; right:20px; bottom:20px; width:60px; opacity:0; transition:all ease .6s; z-index:8; visibility: hidden;} .quick-menu.on{opacity:1;visibility: visible;} .quick-menu a{cursor:pointer; margin:10px 0 0; display:block;} .quick-menu .qm-cu{background:#ffcb07; color:#000; border-radius:50%; text-align:center; font-size:13px; width:60px; height:60px; padding:18px 0 0; line-height:1.2; font-weight:500;} #new_header .btn-category {position:absolute; top:32px; right:50px; width:40px; height:24px; cursor:pointer; z-index:9999999 !important; } #new_header.fixed .btn-category{display:none;} /*****헤더*****/ #new_header{position: relative; top:0; left:0; width:100%; background:#ffffff; z-index: 997;} #new_header .header_top{position: relative;z-index: 23;} #new_header .header_top .inner1600{height:90px; transition: ease-in 200ms; max-width:1200px !important; position:relative; margin:0 auto !important;} #new_header .header_top h1{display:none; position:absolute;top:10px; left:10px; width:272px; height:63px; background: url(/design/default/images/logo.png) no-repeat left center; background-size:auto 100%; font-size:0;} #new_header .header_roof .header_login{position:absolute;top:22px; left:50%; margin-left:430px;} #new_header .header_roof .header_login .menu{font-size: 13px; color: #636363; margin-left: 30px; z-index: 20;} #new_header .header_roof .header_login .lang{display: inline-block; position: relative;cursor:pointer;z-index:10;} #new_header .header_roof .header_login .lang .tit{background: url(/kr/ko/static_renew/images/arrow_b_7x4.png?quality=80) no-repeat right 50%; padding-right: 13px; } #new_header .header_roof .header_login .lang .tit.on{background: url(/kr/ko/static_renew/images/arrow_b_7x4_on.png?quality=80) no-repeat right 50%; padding-right: 13px; } #new_header .header_roof .header_login .lang ul{display: none; position: absolute; top:25px; right:0; border: 1px #eeeeee solid;background:#ffffff;} #new_header .header_roof .header_login .lang ul.activate{display:block;} #new_header .header_roof .header_login .lang ul li{} #new_header .header_roof .header_login .lang ul li .name{display:block;padding:0 12px;color:#636363;font-size:13px;text-align:right;line-height:30px;} #new_header .header_roof .header_login .lang ul li .name:hover{color:#000000;background:#f6f6f6;} #new_header .header_bottom{position:absolute; height:63px; background:#0066cc; z-index:22; left:50%; top:0; } #new_header .header_bottom .inner1600 #new_gnb{margin:0 auto; width:1200px;} #new_header .header_bottom .inner1600 #new_gnb .pc_gnb{display:flex; justify-content: flex-start; height:63px;} #new_header .header_bottom .inner1600 #new_gnb .pc_gnb li{display: block;} #new_header .header_bottom .inner1600 #new_gnb .pc_gnb li a{display:inline-block; position:relative; font-family:'notokr-regular', Noto Sans CJK; font-size: 24px; color: #fff; margin: 0; height:63px; line-height:63px; letter-spacing: 0; text-align:left;} #new_header .header_bottom .inner1600 #new_gnb .pc_gnb li a:hover,#new_header .header_bottom .inner1600 #new_gnb .pc_gnb li a.on,#new_header .header_bottom .inner1600 #new_gnb .pc_gnb li a.isSelected {color: #daf100;} #new_header .header_bottom .inner1600 #new_gnb .pc_gnb li a:after{display:block; position: absolute; top:49px; left:50%; margin:0; width:0; height:2px; content: ' '; background:#cde018;} #new_header .header_bottom .inner1600 #new_gnb .pc_gnb li a.on:after{width:20px;transform:translateX(-10px);transition: ease-in 200ms;} /* 2019.08.23 헤더 계층 구조 수정 start */ #new_header .header_roof{position:relative;height:0;z-index: 26;} #new_header #new_logo{ position:absolute;top:10px;left:50%; margin-left:-600px; width:272px; height:63px; background: url(/design/default/images/logo.png) no-repeat 50%;} #new_header #new_logo a{display:block;overflow:hidden; text-align:left; text-indent:-10000em; width:100%; height:40px;} #new_header .header_roof .r_btns{position: absolute; left:50%; width:200px; margin-left:400px; top: 110px; /*transition: ease-in 150ms;*/ display:flex; justify-content: flex-end; display:none;} #new_header .header_roof .r_btns > a{display:inline-block;overflow:hidden; position: relative; margin:0 !important; font-size:17px; color:#fff; padding-left:20px;} /* gnb 플롯팅 */ #new_header.fixed{position:fixed;top:0;left:0;width:100%;border-bottom:0;z-index: 10003;} #new_header.fixed #new_logo{position:absolute;top:11px;left:36px;text-align: left;margin:0; width:272px; height:63px; background: url(/design/default/images/logo.png) no-repeat left center; background-size:auto 100%;} #new_header.fixed .header_roof .header_login{display:none;} #new_header.fixed .header_top{border-bottom:1px #e1e0e1 solid;} #new_header.fixed .header_top .inner1600{padding:0;height:63px;} #new_header.fixed .header_top .inner1600 .header_login{display:none;} #new_header.fixed .header_bottom{ position:absolute;top:0;left:50%;right:0;margin-left:-400px;max-width:1100px;background:transparent;z-index: 24;} #new_header.fixed .header_bottom .inner1600 #new_gnb{position:relative; left:-150px; margin:0 auto;} #new_header.fixed .header_bottom .inner1600{position:relative;margin:0 auto;max-width:auto;} #new_header.fixed .header_bottom .inner1600 #new_gnb .pc_gnb li a{color:#505051;} #new_header.fixed .header_bottom .inner1600 #new_gnb .pc_gnb li a:hover, #new_header.fixed .header_bottom .inner1600 #new_gnb .pc_gnb li a.on, #new_header.fixed .header_bottom .inner1600 #new_gnb .pc_gnb li a.isSelected {color: #0066cc;} #new_header.fixed .header_bottom .inner1600 #new_gnb .pc_gnb li a:after{background:#0066cc;} #new_header.fixed .header_roof .r_btns {top:0;} #new_header.fixed .header_roof .r_btns a{font-size:20px; color:#fff;} .new_lnb{position: absolute;width: 100%;height: 0;overflow:hidden;border-top:1px #e4e4e4 solid; background:#ffffff; z-index:20; transition:ease-in 200ms;opacity:0;} .new_lnb.menuActivate{height:470px;border-bottom:1px #e4e4e4 solid;opacity: 1;} .new_lnb:after{display:none;position:absolute;top:0;right:0;width:50%;height:100%;content:' ';background:#f9f9f9;} .new_lnb .menus{ position:relative; margin:0 auto; width:1200px; background:#ffffff; z-index: 2;} .new_lnb .menus::after{display:none;position:absolute;top:0;right:0;left:141px;width:100%;height:100%;content:' ';background: #f9f9f9; z-index: 1;} .new_lnb.subMenuOn:after,.new_lnb.subMenuOn .menus::after{display:block;} .new_lnb .menus .nav{padding:30px 0 0 0; height:450px; } .new_lnb .menus .nav{display: flex; justify-content: flex-start;} .new_lnb .menus .nav ul{overflow:hidden; } #new_gnb .pc_gnb li.idx0,.category-wrapper.cat0{width:130px;} #new_gnb .pc_gnb li.idx1,.category-wrapper.cat1{width:120px;} #new_gnb .pc_gnb li.idx2,.category-wrapper.cat2{width:120px;} #new_gnb .pc_gnb li.idx3,.category-wrapper.cat3{width:120px;} #new_gnb .pc_gnb li.idx4,.category-wrapper.cat4{width:150px;} #new_gnb .pc_gnb li.idx5,.category-wrapper.cat5{width:140px;} #new_gnb .pc_gnb li.idx6,.category-wrapper.cat6{width:200px;} .category-wrapper > li{margin:0 0 10px; padding:0 15px 0 0;} .category-wrapper > li .large-category{display:block; position:relative; padding:0 20px 0 0; width:100%; color:#a1a1a1; font-family:Noto_M, "본고딕", 'Noto Sans CJK kR Medium', Noto Sans CJK kR Medium; letter-spacing: -0.5px;font-size:15px;} .category-wrapper > li span{display:block; opacity:0.6; padding-left:15px;} .category-wrapper > li .large-category:hover,.category-wrapper > li.on .large-category,.category-wrapper.hover > li .large-category:hover{color:#0066cc;} .category-wrapper > li.thirdMenuLink.on .large-category{color:#0066cc} .category-wrapper > li.thirdMenuLink .large-category:after{position:absolute;top:6px;right:20px;width:7px;height:10px;content:' ';/* background:url('/kr/ko/static_renew/images/bu_lCat.gif') 0 0 no-repeat;*/ } .category-wrapper > li.thirdMenuLink.on .large-category:after{background:url('/kr/ko/static_renew/images/bu_lCat_on.gif') 0 0 no-repeat;} .category-wrapper.hover > li .large-category{color:#6e6e6e;} .subclass{display: none;flex-wrap: nowrap;justify-content:flex-start;position: absolute; top:32px; left:148px; padding:0 0 0 17px; height:100%; width:745px; z-index: 10;} .category-wrapper > li.on .subclass{display:flex;} .subclass a{color:#a1a1a1;font-family:'Noto Sans', Noto Sans CJK; font-size:14px;} .subclass a:hover{color:#464646;} .subclass > ul{position:relative;padding:39px 20px 0;width:171px;height:472px;border-right:1px #e4e4e4 solid;} .subclass > ul:last-child{border:0;} .subclass > ul > li{margin:0 0 10px;} .subclass > ul > li.cat-label{margin:0 0 10px;color:#464646;font-family:'Noto Sans', Noto Sans CJK; font-size:14px;} .subclass > ul > li.cat-label a, .subclass > ul > li.view-all a{color:#464646;} .subclass > ul > li.cat-label a:hover, .subclass > ul > li.view-all a:hover{color:#0066cc;} .subclass > ul > li.view-all{position:absolute;top:0;left:20px;} /* .new_lnb .menus .left-banner{position:absolute;top:60px;left:-260px;opacity: 1; transition: ease-in 200ms;} */ .new_lnb .menus .left-banner{position:absolute;top:60px;left:-300px;opacity: 1; transition: ease-in 200ms;} .new_lnb .menus .left-banner span{display: block;} .new_lnb .menus .left-banner .t1 {color:#000;font-size:22px;} /* .new_lnb .menus .left-banner .t2 {color:#000;font-size:18px;width:143px;} */ .new_lnb .menus .left-banner .t2 {color:#000;font-size:18px;width:260px;} .new_lnb .menus .left-banner .join{display:inline-block;padding:0 50px 0 0;color:#000;font-size:16px;background:url('/kr/ko/static_renew/images/arr_37x10.png?quality=80') 100% 50% no-repeat;} .new_lnb .menus .left-banner img {width:190px; max-height:110px;} #new_header .contactMenu{display:none;position:absolute;top:153px;right:0;padding:35px 20px;width:184px;border:1px #e0e0e0 solid;background:#ffffff;z-index:25;} #new_header.fixed .contactMenu{top:63px;} .contactMenu ul{} .contactMenu li{margin:0 0 20px 0;text-align: left;} .contactMenu li:last-child{margin:0;} .contactMenu li a{color:#464646;font-family:'Noto Sans', Noto Sans CJK; font-size:14px;} .contactMenu li a:hover{color:#0066cc;} .mobile_new_lnb{display: none;} .goTop{position:fixed;bottom:40px;right:-50px;transition: ease 300ms;width:40px;height:40px;background:url('/kr/ko/static_renew/images/btn_goTop.png?quality=80') no-repeat;background-size:cover;overflow:hidden;text-indent:-1000em;z-index: 10000;} .goTop.show{transform:translateX(-60px);} .diyGiftShop .goTop{bottom:137px;} .topFloatingBanner{position:relative;overflow: hidden; top:0; left:0; width: 100%; height:70px;background:#f0f0f0;z-index: 10002;} .topFloatingBanner.fixed{position:fixed;top:0;left:0;right:0;} .topFloatingBanner .innerWrapper{position:relative;margin:0 auto;padding:0;top:-1px;width:100%;min-width:320px;max-width: 1400px; height:1px;z-index: 3;} .topFloatingBanner a.renewBanner{position:absolute;top:0;left:0;margin:0;padding:0;height:70px;width: 100%;content:' ';z-index:1;} .topFloatingBanner a.renewBanner.pc{display:block;} .topFloatingBanner a.renewBanner.tablet{display:none;} .topFloatingBanner a.renewBanner.mobile{display:none;} .topFloatingBanner .innerWrapper .func{display:flex; justify-content: space-between; align-items: center; position:absolute;top:22px;right:16px;margin:0;height:25px;width:60px;z-index:3;} .topFloatingBanner .innerWrapper .func .bt-close{display:block;overflow:hidden;text-indent: -1000em;margin:0 0 0 5px;width:25px;height:25px;background:url('/kr/ko/static_renew/images/btn_close.png?quality=80') 50% 50% no-repeat;background-size:16px 14px;} .mMenuLayer,.mMenuLayer.show,.dimmed{display:none;left:-460px;} @media screen and (max-width:768px){ #new_header .header_bottom{display:none;} #new_header .header_top .inner1600{height:70px;} #new_header .header_top h1{display:block;} #new_header #new_logo{ z-index:999; left:0px; top:8px;} #new_header.fixed #new_logo{top:9px; left:10px; text-align: left; width:221px; height:45px; background: url(/design/default/images/logo.png) no-repeat left center; background-size:auto 100%;} .btn-category{display:block; z-index:99999; position: fixed; top:20px;} } /****************************************** main ******************************************/ #main .cont-wr{padding:100px 0px; } #main .main-tit{font-size:35px; color:#000; font-weight:500; text-align:center; line-height:1.3; margin:0 0 30px; text-transform:uppercase;} #main .main-tit small{color:#000; font-size:18px; display:block; font-weight:400; margin:0 0 0px;} /* main-visual */ #main .main-slide { width: 100%; height: 100%; overflow: hidden; display: block; z-index: 0; position:relative; } #main .main-bg-1 {width:100%; position:absolute; top:0; left:0; height: 100%; overflow:hidden; display:block; } #main .main-bg-2 {width:100%; position:absolute; top:0; left:0; height: 100%; overflow:hidden; display:block; } #main .main-bg-1 .m-bg{ background: url(/design/default/images/main-visual-1.jpg) no-repeat 50% 50%; background-size: cover;} #main .main-bg-2 .m-bg{ background: url(/design/default/images/main-visual-2.jpg) no-repeat 50% 50%; background-size: cover;} #main .main-slide .slick-slide .m-bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; opacity: 1; -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -webkit-transition: transform 3s ease-out, opacity 1s ease 0.3s; transition: transform 3s ease-out, opacity 1s ease 0.3s; } #main .slide-active.main-bg-1.slick-slide.slick-current.slick-active.active .m-bg{ opacity: 1; -ms-transform: scale(1, 1) rotate(.001deg); -webkit-transform: scale(1, 1) rotate(.001deg); transform: scale(1, 1) rotate(.001deg); -webkit-transition-delay: 0s; transition-delay: 0s; } #main .slide-active.main-bg-2.slick-slide.slick-current.slick-active.active .m-bg{ opacity: 1; -ms-transform: scale(1, 1) rotate(.001deg); -webkit-transform: scale(1, 1) rotate(.001deg); transform: scale(1, 1) rotate(.001deg); -webkit-transition-delay: 0s; transition-delay: 0s; } #main .slide-active.slick-slide.slick-current.slick-active.active .cont { width:100%; max-width:1280px; margin:0 auto; z-index:2; text-align:center; position:absolute; top:50%; left:50%; display:block; transform:translate(-50%, -50%);} #main .main-slide { width: 100%; overflow: hidden; } #main .main-slide .slick-dots {bottom: 100px; z-index:4; display:none;} @keyframes scale{ 0%{ background-size:100%;transition: background-size 2s ease-in; -moz-transition: background-size 2s ease-in; -web-kit-transition: background-size 2s ease-in } 100%{ background-size:120%;transition: background-size 2s ease-in; -moz-transition: background-size 2s ease-in; -web-kit-transition: background-size 2s ease-in } } #main .main-visual{position:relative; height:860px; padding-top:60px; } #main .main-visual .slide-text{position:absolute; left:10%; top:50%; transform:translateY(-50%); width:80%; z-index:2;} #main .main-visual .slide-text p{color:#fff; font-size:40px; font-weight:300; line-height:1.4; letter-spacing:-0.05em;} #main .main-visual .slide-text p b{display:block; font-weight:bold; line-height:1.4; font-size:60px;} #main .main-visual .slide-text a{color:#fff; display:inline-block; margin:60px 0 0; transition:all ease .5s; -webkit-transition:all ease .5s; -ms-transition:all ease .5s; -o-transition:all ease .5s;} #main .main-visual .slide-text img{ vertical-align:middle; margin-left:20px; } #main .main-visual .slide-text a:hover{padding-left:10px;} #main .main-slide .slick-arrow{content:''; width:40px; height:77px; position:absolute; top: 50%; transform:translateY(-50%); z-index:3; opacity:.5;} #main .main-slide .slick-arrow:hover{opacity:1;} #main .main-slide .slick-next{background:url('/design/default/images/mv-arr-next.png') no-repeat center center; right:50px;} #main .main-slide .slick-prev{background:url('/design/default/images/mv-arr-prev.png') no-repeat center center; left:50px;} @media screen and (max-width:768px){ #main .main-visual{ padding-top:70px; } } /* Shutter In Vertical */ .hvr-shutter-in-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #2098D1; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; font-size:16px; padding:16px 35px; margin:0 10px; } .hvr-shutter-in-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-shutter-in-vertical:hover, .hvr-shutter-in-vertical:focus, .hvr-shutter-in-vertical:active { color: white; } .hvr-shutter-in-vertical:hover:before, .hvr-shutter-in-vertical:focus:before, .hvr-shutter-in-vertical:active:before { -webkit-transform: scaleY(0); transform: scaleY(0); } @media(max-width:768px){ .hvr-shutter-in-vertical {padding:15px 0; width:90%; margin-bottom:2px;} } .product_btn_top{padding-top:25px;} .mainBtnW{text-align:center;} .mainBtnW a.blue:before{ background:#0068b5 url(/design/default/images/prod_arrow.png) no-repeat 210px 50%;} .mainBtnW a.blue{color:#fff;} .mainBtnW a.navy:before{background:#2094c6;} .mainBtnW a.navy{color:#fff; background:#206ec6;} .mainBtnW a.white:before{background:#fff;} .mainBtnW a.white{color:#000; background:#f5f5f5;} .mainBtnW a.gray:before{background:#1a68ac;} .mainBtnW a.gray{color:#fff; background:#0c70ba} /* #main .main-bn{background:url('/images/main-bn-bg.jpg') no-repeat center center / cover; padding:100px 20px; text-align:center;} .main-bn p{color:#fff; font-size:32px;} .main-bn a{background:#eebd07; font-size:15px; display:block; max-width:200px; width:100%; margin:20px auto 0; color:#333; border-radius:50px; padding:12px 0; font-weight:500; transition:all ease .5s; -webkit-transition:all ease .5s; -ms-transition:all ease .5s; -o-transition:all ease .5s;} .main-bn a:hover{background:#000; color:#fff;} #sub .main-bn{background:url('/images/sub/sub-bn-bg.jpg') no-repeat center center / cover; padding:100px 20px; text-align:center;} */ /****************************************** footer ******************************************/ .sec-footer {color:#666; font-size:14px; padding:50px 0px; overflow:auto;} .ft-link{ text-align:right; float:right; } .ft-link ul{} .ft-link ul li{ text-align:left; padding:2px 0; font-size:16px;} .ft-link ul li:first-child{ font-size:24px; color:#0c70ba; } .ft-link ul li span{width:40px; height:40px; border-radius:50%; background:#0c70ba; color:#fff; text-align:center; display:inline-block;} .ft-link ul li span i{font-size:20px; margin-top:10px;} .ft-info{padding:0px 0 20; position:relative; float:left;} .ft-info .copy{margin:10px 0 0;} .ft-info p span{color:#ddd; display:inline-block; padding:0 5px;} .ft-info img{display:block;} .family-site{position:absolute; right:0; top:20px; z-index:2;} .family-site p{padding:15px 100px 15px 15px; border:1px solid #999; cursor:pointer; background:url(/design/default/images/btn/sel-arr.png) no-repeat right 15px center;} .family-site ul{background:#fff; position:absolute; bottom:53px; width:100%; padding:10px 0; display:none; border: 1px solid #ddd;} .family-site ul li a{display:block; padding:7px 20px; color:#999; font-weight:300;} .family-site ul li a:hover{color:#333;} @media screen and (max-width:768px){ .ft-link{padding:20px; text-align:center; float:none; width:100%; background:#f5f5f5; margin-bottom:20px;} } /****************************************** sub ******************************************/ .sub-visual{width:100%; position:relative; overflow:hidden;} .sub-visual:after{ content:''; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1; background-size:cover; background-position:center center; animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; -webkit-animation-duration: 3s; -webkit-animation-fill-mode: both; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; animation-delay: 0.4s; -webkit-animation-delay: 0.4s; animation-name:visual-zoom; -webkit-animation-name:visual-zoom; } .subv-1:after{background-image:url('/images/sub/sub-visual-1.jpg');} .subv-2:after{background-image:url('/images/sub/sub-visual-2-new.jpg');} .subv-3:after{background-image:url('/images/sub/sub-visual-3.jpg');} .subv-4:after{background-image:url('/images/sub/sub-visual-4-new.jpg');} .subv-5:after{background-image:url('/images/sub/sub-visual-5.jpg');} .sub-visual h1{font-size:50px; color:#fff; padding:200px 20px; text-align:center; font-weight:500;} .sub-visual h1 span, .sub-visual h1 p{ animation-duration: 0.7s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; -webkit-animation-duration: 0.7s; -webkit-animation-fill-mode: both; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-name:visual-tit; -webkit-animation-name:visual-tit; } .sub-visual h1 p {animation-delay: 0.8s; -webkit-animation-delay: 0.8s;} @keyframes visual-zoom { 0% {transform:scale(1.2);} 100% {transform:scale(1);} } @-webkit-keyframes visual-zoom { 0% {transform:scale(1.2);} 100% {transform:scale(1);} } @keyframes visual-tit { 0% {opacity:0; -webkit-opacity:0; transform:translateY(20px);} 100% {opacity:1; -webkit-opacity:1; transform:translateY(0px);} } @-webkit-keyframes visual-tit { 0% {opacity:0; -webkit-opacity:0; transform:translateY(20px);} 100% {opacity:1; -webkit-opacity:1; transform:translateY(0px);} } .sub-visual h1 p{font-size:18px; font-weight:300; margin:10px 0 0;} .sub-depth-1{position:absolute; bottom:0; left:0; background:rgba(0,0,0,0.6); width:100%;} .sub-depth-1 ul{max-width:1280px; width:100%; margin:0 auto; overflow:hidden;} .sub-depth-1 li{float:left; } .sub-depth-1 li:only-child { width: 100%; } /* 메뉴가 하나일 때 선택 */ .sub-depth-1 li:first-child:nth-last-child(2), /* 메뉴가 둘 일 때, 1번 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(2)+li { width: 50%; } /* 메뉴가 둘 일 때, 2번 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(3), /* 메뉴가 셋 일 때, 1번 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(3)~li { width: 33.33%; } /* 메뉴가 셋 일 때, 2~3번째 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(4), /* 메뉴가 넷 일 때, 1번 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(4)~li { width: 25%; } /* 메뉴가 넷 일 때, 2~4번째 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(5), /* 메뉴가 넷 일 때, 1번 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(5)~li { width: 20%; } /* 메뉴가 넷 일 때, 2~4번째 메뉴 선택 */ .sub-depth-1 li a{display:block; color:#fff; text-align:center; line-height:70px; position:relative; transition:all ease .4s; -webkit-transition:all ease .4s; -ms-transition:all ease .4s; -o-transition:all ease .4s; font-size:18px;} .sub-depth-1 li a:hover{color:#ffcb07;} .sub-depth-1 li.active a{background:#ffcb07; color:#333; font-weight:500; } .sub-depth-1 li a:before{content:''; width:1px; height:12px; background:rgba(255,255,255,0.2); position:absolute; right:0; top:50%; margin-top:-6px;} .sub-depth-1 li:last-child a:before, .sub-depth-1 li.active a:before{display:none;} .sub-depth-2{text-align:center; border-bottom:1px solid #ddd;} .sub-depth-2 a{display:inline-block; line-height:70px; margin:0 20px; padding:0 10px; font-size:18px; color:#666; position:relative;} .sub-depth-2 a.active{ color:#333;} .sub-depth-2 a.active:after{content:''; width:0; height:3px; background:#ffcb07; position:absolute; left:50%; bottom:-1px; animation-duration: 0.3s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; -webkit-animation-duration: 0.3s; -webkit-animation-fill-mode: both; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-name:sub-tab-line; -webkit-animation-name:sub-tab-line; } @keyframes sub-tab-line { 0% {width:0%; left:50%;} 100% {width:100%; left:0;} } @-webkit-keyframes sub-tab-line { 0% {width:0%; left:50%;} 100% {width:100%; left:0;} } /****************************************** 디자인페이지 공통 css ******************************************/ .review-slider .slick-slide{padding:5px;} /* sub css */ #sub{overflow:hidden;} #sub .center{text-align:center;} /* bg */ #sub .bg-navy{background:#243a5e; } #sub .bg-navy .cont-tit h2{color:#fff;} #sub .bg-navy .cont-tit p{color:#fff;} #sub .bg-gray{background:#f7f7f7; } #sub .bg-gray-2{background:#f2f2f2; } #sub .bg-gray-pt{background:url('/images/sub/aboutus/sub0401-bg.jpg') center bottom; background-size:cover; } #sub .bg-half{position:relative;} #sub .bg-half:after{content:''; width:100%; height:calc(100% - 280px); background:#f7f7f7; position:absolute; left:0; bottom:0; z-index:-1;} #sub .bg-half-2{position:relative;} #sub .bg-half-2:after{content:''; width:100%; height:calc(100% - 330px); background:#f7f7f7; position:absolute; left:0; bottom:0; z-index:-1;} #sub .bg-img01{background:url('/images/sub/service/sub0101-bg.jpg') no-repeat bottom center; background-size:cover;} #sub .bg-img01 .cont-tit h2{color:#fff;} /* color */ #sub .blue-t{color:#014099; vertical-align:baseline;} /* margin */ #sub .mt-120{margin-top:120px;} #sub .mb-120{margin-bottom:120px;} #sub .pt-0{padding-top:0;} #sub .con-tab.pt-0{padding-top:0;} /* btn */ .career-btn{display:block; margin:0 auto; max-width:250px; text-align:center; background:#014099; color:#fff; padding:15px 0; font-size:18px;} /* sub title css */ #sub .cont-tit{ text-align:center; margin:0 auto 50px;} #sub .cont-tit h2{font-size:32px; color:#333; font-weight:500; line-height:1.4; max-width:850px; margin:0 auto;} #sub .cont-tit h2.big{font-size:45px;} #sub .cont-tit p{font-size:18px; margin:25px 0 0; color:#666; font-weight:300;} #sub .cont-tit small{font-size:20px; color:#014099; margin:0 0 15px; display:block; font-weight:500;} #sub .cont-wr{padding:120px 0;} #sub .md-tit{font-size:24px; color:#333; font-weight:500; margin:0 0 10px} #sub .sm-tit{margin:0 0 40px; font-weight:300; font-size:17px;} b{font-weight:500;} /* contents tabs */ #sub .con-tab-menu {text-align:center; overflow:hidden; } #sub .con-tab-menu li{ float:left; width:100%; border:1px solid #ddd; border-left:0;} #sub .con-tab-menu li a{height:65px; position:relative; text-align:center; display: block; cursor:pointer; background:#fff;} #sub .con-tab-menu li a span{position:absolute; width:100%; font-size:18px; left:0; top:50%; transform:translateY(-50%); line-height:1.3;} #sub .con-tab-menu li a.active{background:#014099; color:#fff;} #sub .con-tab-menu li:first-child{border-left:1px solid #ddd;} #sub .con-tab{ display: none; padding:80px 0 0;} #sub .con-tab.active{ display: block;} #sub .con-tab-menu li:first-child:nth-last-child(2), #sub .con-tab-menu li:first-child:nth-last-child(2)~li{ width: 50%; } #sub .con-tab-menu li:first-child:nth-last-child(3), #sub .con-tab-menu li:first-child:nth-last-child(3)~li{ width: 33.333%; max-width:none;} #sub .con-tab-menu li:first-child:nth-last-child(4), #sub .con-tab-menu li:first-child:nth-last-child(4)~li{ width: 25%; } #sub .con-tab-menu li:first-child:nth-last-child(5), #sub .con-tab-menu li:first-child:nth-last-child(5)~li{ width: 20%; } #sub .con-tab-menu li:first-child:nth-last-child(6), #sub .con-tab-menu li:first-child:nth-last-child(6)~li{ width: 16.666%; } #sub .con-tab-menu li:first-child:nth-last-child(7), #sub .con-tab-menu li:first-child:nth-last-child(7)~li{ width: 14.285%; } #sub .con-tab-menu li:first-child:nth-last-child(8), #sub .con-tab-menu li:first-child:nth-last-child(8)~li{ width: 12.5%; } /* sub layout 01 */ #sub .intro-box{ position:relative; } #sub .intro-box .wr{overflow:hidden; } #sub .intro-box .left{float:left; width:50%; padding-right:50px; } #sub .intro-box .right{float:right; width:50%; padding-left:50px;} #sub .intro-box .img.shadow img{ box-shadow:10px 10px 20px rgba(0,0,0,0.2); border:1px solid #e8e8e8; margin-bottom:30px;} #sub .intro-box .tbox h2{font-size:36px; color:#333; margin:30px 0 40px; font-weight:500;} #sub .intro-box .tbox p{font-size:18px; color:#666; font-weight:300; line-height:1.8} #sub .intro-box .tbox p small{ margin:15px 0 0; display:block; color:#888; line-height:1.8;} #sub .intro-box .tbox ul li{position:relative; font-size:18px; color:#333; padding:5px 0 5px 35px;} #sub .intro-box .tbox ul li:after{content:''; background:url('/images/sub/li-check.png'); width:25px; height:25px; position:absolute; left:0; top:5px} #sub .b-line .tbox h2{position:relative;} #sub .b-line .tbox h2:after{content:''; width:130%; height:1px; background:#014099; position:absolute; right:0; bottom:-20px;} #sub .b-line .left.tbox h2:after{right:auto; left:0;} #sub .b-number .tbox b{font-size:60px; color:#014099; display:block; margin:0 0 -40px} #sub .b-number .left.tbox{text-align:right;} /* sub layout 02 */ #sub .icon-list{overflow:hidden; position:relative; text-align: center;} #sub .icon-list li{float:left; width:33.33%; text-align:center; padding:0 50px;} #sub .icon-list li:nth-child(2){border-left:1px solid #e8e8e8; border-right:1px solid #e8e8e8;} #sub .icon-list li:last-child{border-right:0 !important;} #sub .icon-list li h3{font-size:22px; color:#333; font-weight:500; margin:30px 0 10px;} #sub .icon-list li p{text-align:left; padding:5px 0 5px 15px; position:relative; font-weight:300;} #sub .icon-list li p:after{content:''; width:4px; height:4px; border-radius:50%; position:absolute; left:0; top:14px; background:#014099;} #sub .icon-list li b{display:block; font-weight:300; padding:5px 0;} #sub .icon-list li:first-child:nth-last-child(1), #sub .icon-list li:first-child:nth-last-child(1)~li { float:none; display:inline-block; max-width:500px; width:49%; border:0;} #sub .icon-list li:first-child:nth-last-child(2), #sub .icon-list li:first-child:nth-last-child(2)~li { float:none; display:inline-block; max-width:500px; width:49%; } #sub .icon-list li:first-child:nth-last-child(3), #sub .icon-list li:first-child:nth-last-child(3)~li { width:33.333%;} #sub .icon-list li:first-child:nth-last-child(4), #sub .icon-list li:first-child:nth-last-child(4)~li { width:25%; border-right:1px solid #e8e8e8; border-left:0;} #sub .icon-list li:first-child:nth-last-child(4) h3, #sub .icon-list li:first-child:nth-last-child(4)~li h3{font-size:18px; ;} /* sub layout 03 */ #sub .partners dl{border-bottom:1px solid #ddd; padding:80px 0 50px; overflow:hidden; color:#333;} #sub .partners dl:first-child{padding-top:30px;} #sub .partners dl:last-child{border-bottom:0;} #sub .partners dd{float:left; width:25%; padding-right:50px; font-size:30px; font-weight:500;} #sub .partners dt{float:right; width:75%;} #sub .partners li{float:left; width:32%; margin-left:2%; text-align:center; margin-bottom:30px;} #sub .partners li:nth-child(3n+1){clear:both; margin-left:0;} #sub .partners li p{ font-size:18px; margin:10px 0 0;} /* sub layout 04 */ #sub .vbr-list {border-top:1px solid #333; } #sub .vbr-list li{padding:50px 0 50px 230px; position:relative; border-bottom:1px solid #e8e8e8; min-height: 280px;} #sub .vbr-list li h3{font-size:24px; color:#333; font-weight:400; margin:0 0 25px; max-width:850px;} #sub .vbr-list li h3 b{font-weight:500;} #sub .vbr-list img{position:absolute; left:0; top:50px;} #sub .vbr-list li p{display:inline-block; width:49%; text-align:left; padding:5px 0 5px 15px; position:relative; font-weight:300;} #sub .vbr-list li p:after{content:''; width:4px; height:4px; border-radius:50%; position:absolute; left:0; top:14px; background:#014099;} #sub .vbr-list.wblock li p{width:100%;} #sub .vbr-list.w50{overflow:hidden;} #sub .vbr-list.w50 li{float:left;width:50%; min-height:298px;} /* sub layout 05 */ #sub .adv-list li{border-top:1px solid #ddd; padding:80px 0; position:relative; padding-left:25%; } #sub .adv-list strong{position:absolute; left:0; top:80px; color:#333; font-size:30px; font-weight:500; width:22%;} #sub .adv-list strong small{line-height:1.3; font-size:.7em; display: inline-block; font-weight:400; vertical-align:middle; } #sub .adv-list li h3:nth-child(2){margin:0 0 5px;} #sub .adv-list li h3{font-size:20px; color:#333; font-weight:500; margin:30px 0 5px;} #sub .adv-list li p{ padding:5px 0 5px 15px; position:relative; font-weight:400; font-size:17px; color:#333;} #sub .adv-list li p:after{content:''; width:4px; height:4px; border-radius:50%; position:absolute; left:0; top:14px; background:#014099;} #sub .adv-list li p small{display:block; color:#666; font-weight:300; font-size:16px; padding:5px 0;} #sub .adv-list h4.blue-t{font-size:20px; font-weight:500; margin:0 0 5px;} #sub .adv-list dl{overflow:hidden; margin:20px 0;} #sub .adv-list dt{float:left; } #sub .adv-list dd{float:right; width:calc(100% - 350px); font-weight:300;} #sub .adv-list dd h4{font-size:22px; color:#333; font-weight:500; margin:0 0 10px;} #sub .adv-list .btn{display:block; margin:20px 0 0; padding:10px 0; max-width:150px; text-align:center; border-radius:50px; font-size:15px; background:#eee; color:#222; transition: all ease .5s; -webkit-transition: all ease .5s; -ms-transition: all ease .5s; -o-transition: all ease .5s;} #sub .adv-list .btn:hover{background:#014099; color:#fff;} /* sub layout 06 */ #sub .round-list{overflow:hidden;} #sub .round-list li{float:left; width:23.5%; margin-left:2%; text-align:Center; margin-bottom:20px; color:#333; } #sub .round-list li:nth-child(4n+1){margin-left:0; clear:both; } #sub .round-list li a{display:block; position:relative; border:1px solid #ddd; border-radius:50px; height:60px; background:#fff; } #sub .round-list li a > span{display:block; padding:10px; font-size:16px; position:absolute; left:0; width:100%; top:50%; transform:translateY(-50%);} #sub .round-list li p{padding:10px 0 0;} /* sub layout 07 */ #sub .review-slider img{border:1px solid #ddd;} #sub .review-slider li p{text-align:center; margin:10px 0;} #sub .review-slider .slick-arrow{content:''; width:60px; height:60px; position:absolute; top: 42%; transform:translateY(-50%); z-index:3; opacity:.5;} #sub .review-slider .slick-arrow:hover{opacity:1;} #sub .review-slider .slick-next{background:url('/images/btn/alli-arr-next.png') no-repeat center center; right:-100px;} #sub .review-slider .slick-prev{background:url('/images/btn/alli-arr-prev.png') no-repeat center center; left:-100px;} /* sub layout 08 */ #sub .prd-list{position:relative;} #sub .prd-list strong{position:absolute; left:0; top:80px; color:#333; font-size:30px; font-weight:500; width:22%;} #sub .prd-list ul{border-top:1px solid #ddd; padding:80px 0; position:relative; padding-left:25%; overflow:hidden;} #sub .prd-list li{float:left; width:32%; margin-left:2%; margin-bottom:2%; border:1px solid #ddd; position:relative; height:0; padding-bottom:32%; text-align:center; background:#fff;} #sub .prd-list li:nth-child(3n+2){margin-left:0; clear:both;} #sub .prd-list li .con{width:100%; padding:20px; width:100%; position:absolute; left:0; top:50%; transform:translateY(-50%); } #sub .prd-list li img{margin:0 0 20px;} #sub .prd-list li h3{color:#014099; font-size:22px; font-weight:500; line-height:1.3; margin:0 0 15px;} #sub .prd-list li p{font-weight:300;} #sub.rsa .prd-list li{width:100%; width: 100%; margin: 0 0 10px; background:#fff; border:1px solid #ddd; height:auto; padding:0;} #sub.rsa .prd-list li .con{padding:30px; transform:none; position: relative;} #sub .prd-list2 strong{position:absolute; left:0; top:80px; color:#333; font-size:30px; font-weight:500; width:22%;} #sub .prd-list2 ul{border-top:1px solid #ddd; padding:80px 0; position:relative; padding-left:25%; overflow:hidden;} #sub .prd-list2 li{float:left; width:49%; margin-left:2%; margin-bottom:2%; border:1px solid #ddd; position:relative; text-align:center; background:#fff; padding:50px 30px; min-height:381px;} #sub .prd-list2 li:nth-child(2n+2){margin-left:0; clear:both;} #sub .prd-list2 li img{margin:0 0 20px;} #sub .prd-list2 li h3{color:#333; font-size:22px; font-weight:500; line-height:1.3; margin:0 0 15px;} #sub .prd-list2 li p{font-weight:300; max-width:300px; margin:0 auto;} #sub .prd-cc li{border-radius:100%; border-color:#014099; width:23.5%; padding-bottom:23.5%; margin-right:2%; margin-left:0;} #sub .prd-cc li:last-child{margin-right:0;} #sub .prd-cc li:nth-child(3n+2){ clear:none;} #sub .prd-cc li h3{margin:0;} /* sub layout 09 */ #sub .img-list strong{position:absolute; left:0; top:80px; color:#333; font-size:30px; font-weight:500; width:22%;} #sub .img-list ul{border-top:1px solid #ddd; padding:80px 0; position:relative; padding-left:25%; overflow:hidden;} #sub .img-list li{float:left; width:32%; margin-left:2%; margin-bottom:30px; background:#fff;} #sub .img-list li:nth-child(3n+2){margin-left:0; clear:both;} #sub .img-list li img{margin:0 0 20px;} #sub .img-list li h3{color:#333; font-size:20px; font-weight:500; line-height:1.3; margin:0 0 15px;} #sub .img-list li p{font-weight:300;} #sub .img-list2{text-align:center;} #sub .img-list2 li{display:inline-block; width:31%; margin:0 1%; margin-bottom:4%; } #sub .img-list2 li img{margin:0 0 20px;} #sub .img-list2 li h3{color:#333; font-size:20px; font-weight:500; line-height:1.3; margin:0 0 15px;} #sub .img-list2 li p{font-weight:300;} #sub .img-list2 li:first-child:nth-last-child(2), #sub .img-list2 li:first-child:nth-last-child(2)~li, #sub .img-list2 li:first-child:nth-last-child(3), #sub .img-list2 li:first-child:nth-last-child(3)~li, #sub .img-list2 li:first-child:nth-last-child(1), #sub .img-list2 li:first-child:nth-last-child(1)~li { margin-bottom:0;} #sub .img-list2.left{text-align:left;} #sub .img-list2.left p{text-align:left; padding:5px 0 5px 15px; position:relative; font-weight:300;} #sub .img-list2.left p:after{content:''; width:4px; height:4px; border-radius:50%; position:absolute; left:0; top:14px; background:#014099;} /* sub layout 10 */ #sub .chk-list {overflow:hidden;} #sub .chk-list li{position:relative; font-size:18px; color:#333; padding:5px 0 5px 35px; width:50%; float:left;} #sub .chk-list li:nth-child(2n+1){clear:both;} #sub .chk-list li:after{content:''; background:url('/images/sub/li-check.png'); width:25px; height:25px; position:absolute; left:0; top:5px} /* sub layout 11 */ #sub .number-box{ overflow:hidden;} #sub .number-box strong{font-size:100px; opacity:.1; color:#00baf2; position:absolute; top:20px; left:0; width:100%;} #sub .number-box li{float:left; width:32%; margin-right:2%; text-align:center; padding:100px 40px 60px; background:#fff; position:relative; min-height:370px;} #sub .number-box li:last-child{margin-right:0;} #sub .number-box li h3{font-size:24px; color:#333; font-weight:500; margin: 20px 0; line-height:1.3;} #sub .number-box li p{font-size:18px; font-weight:300;} #sub .number-box.blue li{background:#f2f5f8;} /* sub layout 12 */ #sub .tb-list{ border-top:1px solid #333; width:100%;} #sub .tb-list dl{border-bottom:1px solid #e8e8e8; width:100%; display: table; } #sub .tb-list dt{background:#f5f5f5; display: table-cell; vertical-align:middle; width:20%; padding:40px; text-align:center; font-size:18px; color:#333; font-weight:500;} #sub .tb-list dd{ display: table-cell; vertical-align:middle; padding:40px;} #sub .tb-list p{text-align:left; padding:5px 0 5px 15px; position:relative; font-weight:300;} #sub .tb-list p:after{content:''; width:4px; height:4px; border-radius:50%; position:absolute; left:0; top:14px; background:#014099;} /* sub layout 13 */ #sub .service-intro .left-img{position:absolute; left:0; width:50%; max-height:500px;} #sub .service-intro .right-tit{padding-left:55%; min-height:380px; position:relative;} #sub .service-intro .right-tit small{font-size:20px; color:#ccc; display:block; margin:120px 0 10px;} #sub .service-intro .right-tit h2{font-size:45px; color:#333; margin:0 0 40px; position:relative; line-height:1.3;} #sub .service-intro .right-tit h2:before{content:''; width:130%; height:2px; background:#ffcb07; position:absolute; right:0; bottom: -15px;} #sub .service-intro .right-tit p{color:#333; font-size:18px;} /* sub layout 14 */ #sub .process-box{overflow:hidden;} #sub .process-box li{float:left; width:32%; margin-right:2%; border:1px solid #e8e8e8; text-align:center; position:relative; padding:100px 40px 50px; min-height:434px;} #sub .process-box li:last-child{margin-right:0;} #sub .process-box li strong{padding:15px; color:#333; display:block; position:absolute; top:0; left:0; width:100%; font-weight:500;} #sub .process-box li h3{font-size:20px; color:#333; font-weight:500; margin:20px 0;} #sub .process-box li p{text-align:left; padding:5px 0 5px 15px; position:relative; font-weight:300;} #sub .process-box li p:after{content:''; width:4px; height:4px; border-radius:50%; position:absolute; left:0; top:14px; background:#014099;} #sub .process-box li:nth-child(1) strong{background:#eaf0f7;} #sub .process-box li:nth-child(2) strong{background:#0089d0; color:#fff;} #sub .process-box li:nth-child(3) strong{background:#014099; color:#fff;} #sub .ms-pcs{overflow:hidden;} #sub .ms-pcs li{float:left; width:32%; margin-right:2%; border:1px solid #e8e8e8; text-align:center; position:relative; padding:80px 20px 25px; min-height:auto;} #sub .ms-pcs li p{display:inline-block;} /* sub layout 15 */ #sub .icon-box{overflow:hidden; position:relative; text-align:center;} #sub .icon-box li{display:inline-block; margin:0 0.5% 1.5%; text-align:center; padding: 50px 20px; border:1px solid #e8e8e8; background:#fff; height:290px} #sub .icon-box li img{margin:0 auto 20px;} #sub .icon-box li h3{font-size:20px; color:#333; font-weight:500; margin:0 0 10px;} #sub .icon-box li p { font-weight:300; max-width:200px; margin:0 auto;} #sub .icon-box li:first-child:nth-last-child(5), #sub .icon-box li:first-child:nth-last-child(5)~li, #sub .icon-box li:first-child:nth-last-child(3), #sub .icon-box li:first-child:nth-last-child(3)~li, #sub .icon-box li:first-child:nth-last-child(6), #sub .icon-box li:first-child:nth-last-child(6)~li { width: 32%; } #sub .icon-box li:first-child:nth-last-child(7), #sub .icon-box li:first-child:nth-last-child(7)~li, #sub .icon-box li:first-child:nth-last-child(4), #sub .icon-box li:first-child:nth-last-child(4)~li, #sub .icon-box li:first-child:nth-last-child(8), #sub .icon-box li:first-child:nth-last-child(8)~li { width: 23.666%; } /* sub layout 16 */ #sub .icon-box2{overflow:hidden; position:relative; text-align:center;} #sub .icon-box2 li{display:inline-block; margin:0 0.5% 1.5%; text-align:center; padding: 50px 20px; border:1px solid #e8e8e8; background:#fff; height:330px} #sub .icon-box2 li img{margin:0 auto 10px;} #sub .icon-box2 li h3{font-size:20px; color:#333; font-weight:500; margin:0 0 10px; line-height:1.2;} #sub .icon-box2 li p { font-weight:300; max-width:220px; margin:0 auto;} #sub .icon-box2 li:first-child:nth-last-child(5), #sub .icon-box2 li:first-child:nth-last-child(5)~li, #sub .icon-box2 li:first-child:nth-last-child(6), #sub .icon-box2 li:first-child:nth-last-child(6)~li { width: 32%; } #sub .icon-box2 li:first-child:nth-last-child(7), #sub .icon-box2 li:first-child:nth-last-child(7)~li, #sub .icon-box2 li:first-child:nth-last-child(4), #sub .icon-box2 li:first-child:nth-last-child(4)~li, #sub .icon-box2 li:first-child:nth-last-child(8), #sub .icon-box2 li:first-child:nth-last-child(8)~li { width: 23.666%; } /* sub layout 17 */ #sub .blt-box{overflow:hidden; position:relative; text-align:center;} #sub .blt-box li{display:inline-block; margin:0 0.5% 1.5%; text-align:center; padding: 100px 10px; border:1px solid #e8e8e8; background:#fff; min-height:322px} #sub .blt-box li img{margin:0 0 20px;} #sub .blt-box li h3{font-size:24px; color:#014099; font-weight:500; margin:0 0 10px; line-height: 1.3;} #sub .blt-box li b{color:#333; font-weight:500; margin:0 0 10px; display:block;} #sub .blt-box li p { font-weight:300; margin:0 auto;} #sub .blt-box li:first-child:nth-last-child(5), #sub .blt-box li:first-child:nth-last-child(5)~li, #sub .blt-box li:first-child:nth-last-child(6), #sub .blt-box li:first-child:nth-last-child(6)~li { width: 32%; } #sub .blt-box li:first-child:nth-last-child(7), #sub .blt-box li:first-child:nth-last-child(7)~li, #sub .blt-box li:first-child:nth-last-child(4), #sub .blt-box li:first-child:nth-last-child(4)~li, #sub .blt-box li:first-child:nth-last-child(8), #sub .blt-box li:first-child:nth-last-child(8)~li { width: 23.666%; } /* sub layout 18 */ #sub .circle-box{text-align:center; } #sub .circle-box li{display:inline-block; width:24%; border:1px solid #ddd; position:relative; height:0; padding-bottom:24%; border-radius:100%; margin:0 -1%;} #sub .circle-box li:nth-child(2n+1){border-color:#014099;} #sub .circle-box li .con{width:100%; padding:30px; width:100%; position:absolute; left:0; top:50%; transform:translateY(-50%); } #sub .circle-box li h3{color:#014099; font-size:22px; font-weight:500; line-height:1.3; margin:0 0 15px;} #sub .circle-box li p{font-weight:300;} #sub .circle-box2{text-align:center; position:relative;} #sub .circle-box2:after{content:''; width:80%; height:1px; background:#ddd; position:absolute; left:10%; top:50%; z-index:-1;} #sub .circle-box2 li{display:inline-block; width:19%; margin:0 2%; position:relative; height:0; padding-bottom:19%; border-radius:100%; } #sub .circle-box2 li:nth-child(1){background:#014099;} #sub .circle-box2 li:nth-child(2){background:#0089d0;} #sub .circle-box2 li:nth-child(3){background:#183c6e;} #sub .circle-box2 li:nth-child(4){background:#282c37;} #sub .circle-box2 li .con{width:100%; padding:30px; width:100%; position:absolute; left:0; top:50%; transform:translateY(-50%); } #sub .circle-box2 li h3{color:#fff; font-size:22px; font-weight:400; line-height:1.3; margin:0 0;} /* sub layout 19 */ #sub .cc-box li{display:inline-block; width:19%; padding:10px;} /****************************************** pages ******************************************/ #sub .about{text-align:left; margin:80px 0 0;} #sub .about h2{max-width:none;} #sub .about .sign{color:#333; font-weight:400;} #sub .about .sign b{font-size:24px; vertical-align:baseline; font-weight:500; margin-left:10px;} .wrap_title{background:url(../img/main/img_section2_top.png) no-repeat right bottom;padding:0 20px;height:95px;position:fixed;width:640px} .wrap_title h1{font-size:18px;color:#fff;padding-top:15px} .bpouup_contents{padding:115px 20px 20px 20px} .openpopup_close{background:url(/design/default/img/common/icnClose.png) no-repeat left top;width:23px;height:22px;overflow:hidden;text-indent:-100px;display:block;position:absolute;right:20px;top:20px} .privacy .wrap_agree { font-weight:300;} .privacy .wrap_agree h2{font-size:16px;margin:30px 0 10px 0; font-weight:500; color:#333;} .privacy .wrap_agree li{padding-left:15px;text-indent:-15px} .privacy .wrap_agree li p{text-indent:0px} .privacy .wrap_agree dl{margin-top:5px} .privacy .wrap_agree .head{background-color:#f4f4f4;border:solid 1px #f0f0f0;padding:15px; font-weight:300;} .privacy .wrap_agree .head b{color:#333; font-weight:500;} /****************************************** responsive ******************************************/ @media screen and (max-width:1240px){ /* layout */ .nav{display:none;} .wr{width:100%; padding:0 20px;} #main .cont-02 .alli-slider .slick-slide{padding:0 60px;} #main .alli-slider .slick-prev{left:-20px;} #main .alli-slider .slick-next{right:-20px;} .sub-depth-1 li a{font-size:14px;} .sub-depth-2 a{font-size:14px; line-height:60px;} #sub .review-slider .slick-arrow{width:30px; height:30px; border-radius:100%; top:35%;} #sub .review-slider .slick-next{right:10px} #sub .review-slider .slick-prev{left:10px;} } @media screen and (max-width:1024px){ #sitemap {background: rgba(0,0,0,0.5);} #sitemap > ul { border-radius:inherit; max-width: 500px;padding: 20px;background: #fff;position: absolute;right: 0;top: 81px;width: 100%;} #sitemap > ul > li{width:100%; float:none; margin:0 0 30px;padding:0; min-height:inherit;} #sitemap > ul > li:nth-child(2){ width:100%;} /* layout */ #main .cont-01 ul li a{padding:50px 10px; min-height:340px;} #main .cont-01 ul li img{max-width:80px;} #main .cont-01 ul li h4{font-size:20px;} #main .main-tit small{font-size:20px;} #main .main-tit{font-size:36px;} .sub-depth-1 li{width:100% !important;} .sub-depth-1 li a{font-size:18px; display:none;} .sub-depth-1 li.active a{display:block;} /* sub */ #sub .cont-tit h2{font-size:30px;} #sub .cont-tit h2.big{font-size:40px;} #sub .cont-tit p{font-size:16px;} #sub .cont-tit p br{display:none;} #sub .service-intro .right-tit{min-height:auto;} #sub .service-intro .right-tit p{font-size:18px;} #sub .service-intro .right-tit p br{display:none;} #sub .number-box li p{font-size:16px} #sub .number-box li h3{font-size:20px;} #sub .icon-list li h3{font-size:20px;} #sub .process-box li h3{font-size:18px;} #sub .round-list li{width:49%; margin-bottom:1%;} #sub .round-list li:nth-child(4n+1){margin-left:2%; clear:none; } #sub .round-list li:nth-child(2n+1){margin-left:0; clear:both; } #sub .blt-box li{padding: 50px 20px; min-height:auto;} #sub .blt-box li img{max-width:80px;} #sub .blt-box li:first-child:nth-last-child(7), #sub .blt-box li:first-child:nth-last-child(7)~li, #sub .blt-box li:first-child:nth-last-child(4), #sub .blt-box li:first-child:nth-last-child(4)~li, #sub .blt-box li:first-child:nth-last-child(8), #sub .blt-box li:first-child:nth-last-child(8)~li { width: 48%; } #sub .blt-box li h3{font-size:20px;} #sub .intro-box .tbox h2{font-size:30px;} #sub .intro-box .tbox h2 br{display:none; } #sub .intro-box .left{padding-right:20px;} #sub .intro-box .right{padding-left:20px;} #sub .intro-box .tbox ul li{font-size:16px;} #sub .sm-tit{font-size:16px;} #sub .con-tab-menu li a span{font-size:14px;} #sub .prd-list strong,#sub .adv-list strong,#sub .prd-list2 strong,#sub .partners dd,#sub .img-list strong{font-size:26px;} #sub .prd-list li h3,#sub .adv-list li h3,#sub .prd-list2 li h3,#sub .img-list li h3{font-size:18px;} #sub .img-list li p{font-size:14px} #sub .prd-list li img{max-width:50px} #sub .cont-tit small{font-size:15px;} #sub .icon-box2 li:first-child:nth-last-child(7), #sub .icon-box2 li:first-child:nth-last-child(7)~li, #sub .icon-box2 li:first-child:nth-last-child(4), #sub .icon-box2 li:first-child:nth-last-child(4)~li, #sub .icon-box2 li:first-child:nth-last-child(8), #sub .icon-box2 li:first-child:nth-last-child(8)~li{width:47%} } @media screen and (max-width:768px){ /* layout */ html{font-size:14px;} .sec-header .logo{left:40px;} .btn-category,.btn-category.map{right:40px;} .lang{right:100px;} #main .main-slide .slick-prev{left:40px;} #main .main-slide .slick-next{right:40px;} #main .main-visual .slide-text p{font-size:40px;} #main .main-visual .slide-text p br{display:none;} /* #main .cont-01 ul li{width:49%; margin-bottom:2%;} #main .cont-01 ul li:nth-child(2n){margin-right:0;} */ #main .cont-01 ul li a{padding:50px 20px;} #main .cont-01 ul li h4{max-width:200px; margin:20px auto 0;} #main .main-tit small{font-size:18px;} #main .main-tit{font-size:30px;} .main-bn p{font-size:26px;} .main-bn{padding:50px 20px;} #sub .main-bn{padding:50px 20px;} #main .cont-wr{padding:80px 0 110px;} #main .cont-03 .box{padding:20px;} #main .cont-03 .box h4{font-size:20px; height:60px;} .family-site{position:relative; top:auto; margin:20px 0 0; max-width:250px;} .sub-depth-1 li.active a{line-height:60px; background:url('/images/arr-down.png') #ffcb07 no-repeat center right 20px; transition:none;} .sub-depth-1 li.active a.bg-act{background:url('/images/arr-up.png') #ffcb07 no-repeat center right 20px;} .sub-visual h1{font-size:45px; padding:170px 0;} .sub-depth-2{position:absolute; width:100%; left:0; z-index:2; background:#fff; display:none;} .sub-depth-2 a{width:100%; display:block; margin:0; border-bottom:1px solid #e8e8e8;} /* sub */ #sub .cont-wr{padding:80px 0;} #sub .mt-120{margin-top:80px;} #sub .mb-120{margin-bottom:80px;} #sub .service-intro .left-img{width:94%; position:relative;} #sub .service-intro .right-tit{ margin:0 0 30px; padding:30px; width:100%;} #sub .service-intro .right-tit small{margin:10px 0;} #sub .service-intro .right-tit h2:before{width:110%;} #sub .process-box li{width:100%; margin:0 0 10px; padding: 70px 20px 20px; min-height:auto;} #sub .process-box li h3{ text-align:left;} #sub .process-box li h3 br{display:none; } #sub .tb-list dt{padding:10px; font-size:16px;} #sub .tb-list dd{padding:20px;} #sub .number-box li{width:100%; margin:0 0 10px; min-height:auto; padding: 50px 20px 40px;} #sub .number-box strong{top:-20px;} #sub .number-box li h3 br{display:none;} #sub .icon-list{border-top:1px solid #333; max-width:500px; margin:0 auto;} #sub .icon-list li{border:0; border-bottom:1px solid #e8e8e8 !important; padding:40px 20px;} #sub .icon-list li:first-child:nth-last-child(1), #sub .icon-list li:first-child:nth-last-child(1)~li, #sub .icon-list li:first-child:nth-last-child(2), #sub .icon-list li:first-child:nth-last-child(2)~li, #sub .icon-list li:first-child:nth-last-child(3), #sub .icon-list li:first-child:nth-last-child(3)~li, #sub .icon-list li:first-child:nth-last-child(4), #sub .icon-list li:first-child:nth-last-child(4)~li{width:100%; margin:0; border:0;} #sub .circle-box li{width:49%; padding-bottom:49%; margin:-1%;} #sub .intro-box .left{width:100%; padding:0 10px;} #sub .intro-box .right{width:100%; padding: 0 10px;} #sub .intro-box .tbox h2{font-size:24px; margin: 30px 0 20px;} #sub .intro-box .tbox p{font-size:16px;} #sub .b-line .tbox h2:after{width:30px; right:auto; left:0; bottom:-10px} #sub .md-tit{font-size:20px;} #sub .con-tab{padding:30px 0 0;} #sub .prd-list strong,#sub .adv-list strong,#sub .prd-list2 strong,#sub .img-list strong{top:30px; width:100%; font-size:20px;} #sub .prd-list ul,#sub .prd-list2 ul,#sub .img-list ul{padding:80px 0 30px;} #sub .adv-list strong{top:30px; width:100%; font-size:20px;} #sub .adv-list strong br{display:none;} #sub .adv-list li{padding:80px 0 30px;} #sub .adv-list dt{width:45%;} #sub .adv-list dd{width:50%;} #sub .circle-box2 li{width:20%; padding-bottom:20%;} #sub .circle-box2 li h3{font-size:18px;} #sub .partners dd{width:100%; padding-right:0; padding:0 0 20px;} #sub .partners dt{width:100%;} #sub .partners dl{padding:50px 0 30px;} #sub .blt-box li{min-height:232px;} #sub .prd-list li{width:100%; margin:0 0 10px; height:auto; padding-bottom:0; } #sub .prd-list li .con{position:relative; left:0; top:0; transform:none;} #sub .prd-list li h3{margin:0;} #sub .prd-list li p{margin:10px 0 0;} #sub .prd-cc li{width:48%; margin: 1%; padding-bottom:48%; height:0;} #sub .prd-cc li .con{position:absolute; top:50%; transform:translateY(-50%);} #sub .cont-tit h2{font-size:26px;} #sub .cont-tit h2.big{font-size:30px;} #sub .chk-list li{font-size:16px;} #sub .img-list li{width:49%;} #sub .img-list li:nth-child(3n+2){margin-left:2%; clear:none;} #sub .img-list li:nth-child(2n+2){margin-left:0; clear:both;} #sub .cc-box li{ width:32%; padding:5px;} #sub .vbr-list.w50 li{width:100%; float:none; min-height:auto;} } @media screen and (max-width:480px){ /* layout */ .sec-header .logo{width:150px; background-size:100%; left:20px;} .btn-category, .btn-category.map{right:20px;} .lang{right:60px;} .lang a{font-size:13px;} .btn-category{width:30px;} .sec-header{background:#fff; height:70px; box-shadow:2px 2px 5px rgba(0,0,0,0.05); display:none;} .sec-header .logo{background-image:url(/design/default/images/logo-b.png); top:7px;} .sec-header .nav:after{display:none;} .sec-header .nav > li > h2{color:#333;} .btn-category .bar{background:#000;} .sec-header .lang a{color:#333;} .sec-header .lang a.active:before{ background:#333;} .sec-header:before{display:none;} #sitemap > ul { border-radius:inherit;} #sitemap > ul > li{padding:0; min-height:inherit;} #sitemap > ul > li h2{font-size:20px;} #sitemap > ul > li h3{font-size:17px;} #sitemap > ul > li > ul > li > a{font-size:15px;} #sitemap{top:0px; height: calc(100% - -2px);} .btn-category{top:18px;} .lang{top:23px;} #main .main-slide .slick-dots{bottom:70px;} #main .main-visual .slide-text p{font-size:20px;} #main .main-visual .slide-text .wr{padding-left:10px;} #main .main-visual .slide-text a{margin:40px 0 0;} #main .main-visual .slide-text p b{font-size:1.3em;} #main .main-slide .slick-prev{left:5%;} #main .main-slide .slick-next{right:5%;} #main .main-slide .slick-arrow{width:20px; background-size:100%;} #main .main-visual .slide-text img{width:40px;} #main .visual-notice h3{padding:10px; max-width:100px; font-size:14px;} #main .bbs-slider{width: calc(100% - 110px); padding:10px 0; font-size:14px;} #main .visual-notice .wr{padding:0;} #main .bbs-slider .slick-arrow{display:none !important;} #main .cont-wr{padding:60px 0;} #main .main-tit{font-size:24px; margin:0 0 20px;} #main .main-tit small{font-size:14px;} #main .cont-01 ul li{width:100%;} #main .cont-01 ul li a{padding:30px 20px; min-height:auto;} #main .cont-01 ul li h4{font-size:18px; min-height:auto; margin:20px auto 10px;} #main .cont-01 ul li p{font-size:14px;} #main .cont-01 ul li img{max-width:60px;} #main .cont-01 ul li{ margin-bottom:2%;} #main .alli-slider .slick-arrow{width:40px; height:40px; background-size:100%;} #main .alli-slider .slick-prev{left:-10px;} #main .alli-slider .slick-next{right:-10px;} #main .cont-02 .alli-slider .slick-slide{padding:0 40px} #main .cont-02 .alli-slider a{width:49%;} #main .cont-02 .alli-slider a:nth-child(2n+1){clear:both; margin-left:0;} .main-bn p{font-size:24px;} .quick-menu{right:10px; bottom:10px; width:50px; height:50px;} .sec-footer{padding:20px 0 40px; font-size:13px;} .ft-link a{margin-right:10px;} .ft-link a:last-child{margin-right:0;} .sub-depth-1 li.active a{line-height:50px; font-size:16px;} .sub-visual{height:320px;} .sub-visual h1{font-size:30px; position:absolute; left:0; width:100%; top:55%; transform:translateY(-50%); padding:0 20px;} .sub-visual h1 p{font-size:14px;} .sub-depth-2 a{line-height:50px; font-size:14px;} /* sub */ #sub .cont-wr{padding:60px 0;} #sub .mt-120{margin-top:60px;} #sub .mb-120{margin-bottom:60px;} #sub .service-intro .left-img{width:94%;} #sub .service-intro .right-tit{width:100%; padding-right:0;} #sub .service-intro .right-tit small{font-size:14px;} #sub .service-intro .right-tit h2{font-size:28px;} #sub .service-intro .right-tit h2:before{width:40px; left:0; right:auto;} #sub .service-intro .right-tit p{font-size:15px;} #sub .service-intro .right-tit p br{display:none;} #sub .cont-tit{margin:0 auto 30px;} #sub .cont-tit h2{font-size:21px} #sub .cont-tit h2.big{font-size:24px;} #sub .cont-tit h2 br{display:none;} #sub .cont-tit p{font-size:14px;} #sub .process-box li h3{font-size:16px; margin:15px 0;} #sub .process-box li p{padding:2px 0 2px 12px; } #sub .process-box li p:after{top:9px;} #sub .icon-list li h3{font-size:18px; margin:20px 0 10px} #sub .icon-list li{padding: 30px 20px 40px;} #sub .icon-list li img{ max-height:80px;} #sub .circle-box li{margin:0;} #sub .circle-box li h3{font-size:18px; margin:0 0 10px} #sub .circle-box li .con{padding:10px;} #sub .round-list li{width:100%; margin:0 0 10px;} #sub .round-list li a > span{font-size:14px;} #sub .blt-box li {width:100% !important; margin:0 0 5px; padding:30px 20px; min-height:auto;} #sub .blt-box li img{max-width:60px;} #sub .blt-box li h3{font-size:18px;} #sub .img-list2 li{width:47%;} #sub .img-list2 li img{margin:0 0 10px;} #sub .img-list2 li h3{font-size:15px; margin:0 0 5px;} #sub .img-list2.left li{width:100%; padding:0 0 20px;} #sub .img-list2.left li img{margin:0 0 20px;} #sub .intro-box .left{margin-bottom:0;} #sub .intro-box .tbox h2{font-size:20px; margin: 30px 0 15px;} #sub .intro-box .tbox h2 br{display:none;} #sub .intro-box .tbox p{font-size:14px;} #sub .intro-box .tbox ul li{font-size:14px; padding: 5px 0 5px 30px;} #sub .intro-box .tbox ul li:after{width:20px; height:20px; background-size:100%;} #sub .md-tit{font-size:16px;} #sub .vbr-list li{padding:20px 0; min-height:auto;} #sub .vbr-list img {position:relative; top:auto; left:auto; right:0; max-width:80px; margin:0 auto 10px; display:block;} #sub .vbr-list li h3{font-size:18px; margin:0 0 10px; text-align:center;} #sub .con-tab-menu li a{height:50px;} #sub .con-tab-menu {border-top:1px solid #e8e8e8;} #sub .con-tab-menu li a span{font-size:12px; padding:0 10px;} #sub .con-tab-menu li:first-child:nth-last-child(2), #sub .con-tab-menu li:first-child:nth-last-child(2)~li, #sub .con-tab-menu li:first-child:nth-last-child(4), #sub .con-tab-menu li:first-child:nth-last-child(4)~li{float:none; display:inline-block; width: 50%; margin:-1px -2px 0; border-left:1px solid #e8e8e8;} #sub .con-tab-menu li:first-child:nth-last-child(3), #sub .con-tab-menu li:first-child:nth-last-child(3)~li, #sub .con-tab-menu li:first-child:nth-last-child(5), #sub .con-tab-menu li:first-child:nth-last-child(5)~li, #sub .con-tab-menu li:first-child:nth-last-child(6), #sub .con-tab-menu li:first-child:nth-last-child(6)~li, #sub .con-tab-menu li:first-child:nth-last-child(7), #sub .con-tab-menu li:first-child:nth-last-child(7)~li, #sub .con-tab-menu li:first-child:nth-last-child(8), #sub .con-tab-menu li:first-child:nth-last-child(8)~li{ width: 33.333%; margin-top:-1px;} #sub .con-tab-menu li:nth-child(3n+1){border-left:1px solid #e8e8e8;} #sub .prd-cc li{width:48%; padding-bottom:48%;} #sub .prd-list strong, #sub .adv-list strong, #sub .prd-list2 strong {font-size:18px;} #sub .prd-list li h3{font-size:16px;} #sub .adv-list li p{font-size:14px;} #sub .adv-list li p:after{top:12px;} #sub .adv-list li p small{font-size:14px;} #sub .b-number .tbox b{font-size:40px; margin:20px 0 -20px; line-height:1;} #sub .number-box strong{font-size:80px;} #sub .number-box li h3{font-size:18px} #sub .adv-list li p{font-size:14px;} #sub .sm-tit{font-size:14px; margin:0 0 20px;} #sub .adv-list dt{width:100%; margin:0 0 20px;} #sub .adv-list dd{width:100%;} #sub .adv-list dd h4{font-size:18px;} #sub .prd-list2 li img{max-width:80px;} #sub .prd-list2 li{width:100%; margin:0 0 10px; min-height:auto; padding:30px 20px;} #sub .icon-box li img{max-width:80px;} #sub .icon-box li { width:100% !important; margin:0 0 5px; padding: 30px 20px; height:auto;} #sub .icon-box2 li img{max-width:80px;} #sub .icon-box2 li { width:100% !important; margin:0 0 5px; padding: 30px 20px; height:auto;} #sub .icon-box2 li h3{font-size:16px;} #sub .circle-box2 li{width:40%; padding-bottom:40%; margin:2%;} #sub .circle-box2:after{display:none;} #sub .circle-box2 li h3{font-size:16px} #sub .circle-box2 li .con{padding:0;} #sub .partners dd{font-size:18px;} #sub .partners dt{width:100%;} #sub .partners li{width:49%;} #sub .partners li p{font-size:14px;} #sub .partners dl{padding:30px 0 10px;} #sub .partners dl:first-child{padding-top:10px} #sub .partners li:nth-child(3n+1){margin-left:2%; clear:none;} #sub .partners li:nth-child(2n+1){margin-left:0; clear:both;} #sub .bg-half:after,#sub .bg-half-2:after{height: calc(100% - 200px);} #sub .chk-list li{width:100%;font-size:14px; padding: 5px 0 5px 30px;} #sub .chk-list li:after{width:20px; height:20px; background-size:cover;} #sub .about{margin:30px 0 0;} #sub .img-list li img{width:100%;} #sub .prd-list li h3, #sub .adv-list li h3, #sub .prd-list2 li h3, #sub .img-list li h3{font-size:16px;} #en #main .main-visual .slide-text p{font-size:16px;} } /* media size setting end */ /*======================================================== Common ========================================================*/ .blind{position:absolute; left:-99999px; display:block; width:1px; height:1px; overflow:hidden; text-indent:-99999px; clip:rect(0,0,0,0);} .hide{display:none;} .v-hidden{visibility:hidden;} .openLayer-mode{position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden;} .clear{clear:both;} .inner{width:100%; margin:0 auto; position:relative; clear:both; } /* 간격 */ .mt0{margin-top:0px !important} .mt5{margin-top:5px !important} .mt10{margin-top:10px !important} .mt15{margin-top:15px !important} .mt20{margin-top:20px !important} .mt25{margin-top:25px !important} .mt30{margin-top:30px !important} .mt35{margin-top:35px !important} .mt40{margin-top:40px !important} .mt45{margin-top:45px !important} .mt50{margin-top:50px !important} .mt55{margin-top:55px !important} .mt60{margin-top:60px !important} .mt65{margin-top:65px !important} .mt70{margin-top:70px !important} .mt75{margin-top:75px !important}.mt80{margin-top:80px !important;} .ml0{margin-left:0px !important} .ml5{margin-left:5px !important} .ml10{margin-left:10px !important} .ml15{margin-left:15px !important} .ml20{margin-left:20px !important} .ml25{margin-left:25px !important} .ml30{margin-left:30px !important} .ml35{margin-left:35px !important} .ml40{margin-left:40px !important} .ml45{margin-left:45px !important} .ml50{margin-left:50px !important} .ml55{margin-left:55px !important} .ml60{margin-left:60px !important} .ml65{margin-left:65px !important} .ml70{margin-left:70px !important} .ml75{margin-left:75px !important} .ml80{margin-left:80px !important;} .mr0{margin-right:0px !important} .mr5{margin-right:5px !important} .mr10{margin-right:10px !important} .mr15{margin-right:15px !important} .mr20{margin-right:20px !important} .mr25{margin-right:25px !important} .mr30{margin-right:30px !important} .mr35{margin-right:35px !important} .mr40{margin-right:40px !important} .mr45{margin-right:45px !important} .mr50{margin-right:50px !important} .mr55{margin-right:55px !important} .mr60{margin-right:60px !important} .mr65{margin-right:65px !important} .mr70{margin-right:70px !important} .mr75{margin-right:75px !important} .mr80{margin-right:80px !important;} .mb0{margin-bottom:0px !important} .mb5{margin-bottom:5px !important} .mb10{margin-bottom:10px !important} .mb15{margin-bottom:15px !important} .mb20{margin-bottom:20px !important} .mb25{margin-bottom:25px !important} .mb30{margin-bottom:30px !important} .mb35{margin-bottom:35px !important} .mb40{margin-bottom:40px !important} .mb45{margin-bottom:45px !important} .mb50{margin-bottom:50px !important} .mb55{margin-bottom:55px !important} .mb60{margin-bottom:60px !important} .mb65{margin-bottom:65px !important} .mb70{margin-bottom:70px !important} .mb75{margin-bottom:75px !important} .mb80{margin-bottom:80px !important;} .pt0{padding-top:0px !important} .pt5{padding-top:5px !important} .pt10{padding-top:10px !important} .pt15{padding-top:15px !important} .pt20{padding-top:20px !important} .pt25{padding-top:25px !important} .pt30{padding-top:30px !important} .pt35{padding-top:35px !important} .pt40{padding-top:40px !important} .pt45{padding-top:45px !important} .pt50{padding-top:50px !important} .pt55{padding-top:55px !important} .pt60{padding-top:60px !important} .pt65{padding-top:65px !important} .pt70{padding-top:70px !important} .pt75{padding-top:75px !important}.pt80{padding-top:80px !important;} .pl0{padding-left:0px !important} .pl5{padding-left:5px !important} .pl10{padding-left:10px !important} .pl15{padding-left:15px !important} .pl20{padding-left:20px !important} .pl25{padding-left:25px !important} .pl30{padding-left:30px !important} .pl35{padding-left:35px !important} .pl40{padding-left:40px !important} .pl45{padding-left:45px !important} .pl50{padding-left:50px !important} .pl55{padding-left:55px !important} .pl60{padding-left:60px !important} .pl65{padding-left:65px !important} .pl70{padding-left:70px !important} .pl75{padding-left:75px !important} .pl80{padding-left:80px !important;} .pr0{padding-right:0px !important} .pr5{padding-right:5px !important} .pr10{padding-right:10px !important} .pr15{padding-right:15px !important} .pr20{padding-right:20px !important} .pr25{padding-right:25px !important} .pr30{padding-right:30px !important} .pr35{padding-right:35px !important} .pr40{padding-right:40px !important} .pr45{padding-right:45px !important} .pr50{padding-right:50px !important} .pr55{padding-right:55px !important} .pr60{padding-right:60px !important} .pr65{padding-right:65px !important} .pr70{padding-right:70px !important} .pr75{padding-right:75px !important} .pr80{padding-right:80px !important;} .pb0{padding-bottom:0px !important} .pb5{padding-bottom:5px !important} .pb10{padding-bottom:10px !important} .pb15{padding-bottom:15px !important} .pb20{padding-bottom:20px !important} .pb25{padding-bottom:25px !important} .pb30{padding-bottom:30px !important} .pb35{padding-bottom:35px !important} .pb40{padding-bottom:40px !important} .pb45{padding-bottom:45px !important} .pb50{padding-bottom:50px !important} .pb55{padding-bottom:55px !important} .pb60{padding-bottom:60px !important} .pb65{padding-bottom:65px !important} .pb70{padding-bottom:70px !important} .pb75{padding-bottom:75px !important} .pb80{padding-bottom:80px !important;} /**** Mediaquery view ****/ .not-pc, .only-mo{display:none !important;} .only-mo-view{display:none;} .word-pack{display:inline-block;} @media screen and (max-width:1024px){ .not-pc, .only-mo{display: block !important;} .only-pc{display: none !important;} } @media screen and (max-width:768px){ .not-mo, .only-pc-view{display: none !important;} .only-mo-view{display:block;} } /**** Frame ****/ .frame-full{position:relative; width:100%;} .frame-max{position:relative; max-width:1920px; margin:0 auto;} .frame-mid{position:relative; max-width:1170px; margin:0 auto;} .frame-min{position:relative; max-width:970px; margin:0 auto;} /* slider */ .frame-slider1{max-width:1250px; margin:0 auto;} .frame-slider2{max-width:1230px; margin:0 auto;} .frame-slider3{max-width:1200px; margin:0 auto;} /**/ .mid-full-frame{position:relative; max-width:1170px; margin:0 auto;} /**** Float / Position ****/ .fl{float:left;} .fr{float:right;} .fn{float:none;} [class*="frame-"] .pos-left{position:absolute; top:0; left:0;} [class*="frame-"] .pos-right{position:absolute; top:0; right:0;} /**** Text Align,Style ****/ .text-left, .alLeft{text-align:left !important;} .text-right, .alRight{text-align:right !important;} .text-center, .alCenter{text-align:center !important;} .text-bold{font-weight:bold;} .text-normal{font-weight:normal;} .text-strong{font-weight:700; color:#03010f;} .text-thin{font-weight:300;} .text-mal{font-family:"맑은고딕", Malgun Gothic} .text-elps{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .text-elps2{display:block; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} .text-elps3{display:block; display:-webkit-box !important; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} .text-nowrap{white-space:nowrap;} .text-flow{font-family: 'InkLipquid'; font-size:34px;} /**** Text Color ****/ .text-point-or,.es{color:#8cc63e !important;} .text-point-wh{color:#fff !important;} .text-guide-gr{color:#6f6f75 !important;} .text-grey{color:#6f6f75 !important;} .black{color:#000 !important;} /* error */ .valid{color:#e85301;} .error{color:#e85301;} /**** Label / tag ****/ /* label */ [class^="label-"]{display:inline-block; vertical-align:top; padding:0 10px; margin-right:2px; height:25px; border:1px solid transparent; font-size:12px; text-align:center; line-height:1.9} .label-dark{background-color:#03010f; color:#fff;} .label-primary{background-color:#8cc63e; color:#fff;} .label-white{background-color:#fff; border:1px solid #6f6f75;} .label-grey{background-color:#f0f0f0; color:#6f6f75;} .label-blue{background-color:#0085ba; color:#fff;} .label-purple{background-color:#734f8a; color:#fff;} .label-yellow{background-color:#ebab3d; color:#fff;} .label-green{background-color:#88b560; color:#fff;} /* dot-label */ [class^="dot-label-"]{display:inline-block; vertical-align:top; width:8px; height:8px; border-radius:100%} .dot-label-primary{background-color:#8cc63e;} .dot-label-grey{background-color:#ccc;} .dot-label-purple{background-color:#734f8a;} .dot-label-blue{background-color:#0085ba;} .dot-label-yellow{background-color:#ebab3d;} .dot-label-green{background-color:#88b560;} /* tag */ [class*="tag-"]{display:inline-block; vertical-align:top; padding:0 10px; min-width:50px; height:50px; font-size:14px; text-align:center; line-height:3.4} .tag-dark{background-color:#03010f; color:#fff;} .tag-primary{background-color:#8cc63e; color:#fff;} .tags-div > [class*="tag-"] + [class*="tag-"]{margin-left:-3px} /**** background Color ****/ .bg-orange{background-color:#8cc63e; color:#fff;} .bg-grey{background-color:#6f6f75; color:#fff;} .bg-grey2{background-color:#f1f5f9;} .bg-grey3{background-color:#f0f0f0;} .bg-grey4{background-color:#e4e7ec;} .bg-dark{background-color:#2b2a32; color:#fff;} .bg-black{background-color:#03010f; color:#fff;} .bg-white{background-color:#fff; color:#03010f;} .bg-orange-opt{background:rgba(231,83,0,.95); color:#fff;} .bg-grey-opt{background:rgba(111,111,117,.95); color:#fff;} .bg-dark-opt{background:rgba(43,42,50,.95); color:#fff;} .bg-black-opt{background:rgba(3,1,15,.95); color:#fff;} .bg-white-opt{background:rgba(241,244,249,.95); color:#03010f;} .rwd-bg1{background-color:#f1f5f9;} .rwd-bg2{background-color:#fff;} .rwd-bg3{background-color:#fff;} .rwd-bg4{background-color:#f0f0f0;} /**** Image hover ****/ img.hover-img{transition:opacity .3s; -webkit-transition:opacity .3s; opacity:1;} img.hover-img:hover{opacity:.85;} @media screen and (max-width:1280px){ /**** Frame ****/ .frame-full, .frame-max, .frame-mid{padding-left:20px; padding-right:20px;} .mid-full-frame{padding-left:20px; padding-right:20px;} /**** Float / Position ****/ .frame-full .pos-left, .frame-max .pos-left, .frame-mid .pos-left{left:20px;} .frame-full .pos-right, .frame-max .pos-right, .frame-mid .pos-right{right:20px;} } @media screen and (max-width:1024px){ /**** Frame ****/ .frame-full, .frame-max, .frame-mid{max-width:100%; width:100%; margin:0; padding:0 20px;} .frame-min{padding:0;} .mid-full-frame{padding:0;} /**** background Color ****/ .rwd-bg1{background-color:#fff;} .rwd-bg2{background-color:#f1f5f9;} .rwd-bg3{background-color:#333335;} .rwd-bg4{background-color:#fff;} .rwd-div{padding:0 !important;} } @media screen and (max-width:995px){ /**** Frame ****/ .frame-min{padding:0; max-width:100%;} } /*======================================================== Layout ========================================================*/ .wrap{position:relative; height:100%; min-width:320px;} .wrap-web{min-width:1280px;} /**** Header ****/ .header{position:fixed; z-index:10000; width:100%; height:80px; transition:.3s; -webkit-transition:.3s; background:rgb(255, 255, 255, 1);} .header-wrap{position:relative; max-width:1920px; height:100%; padding:0 60px; margin:0 auto;} .header-wrap .header-inner{position:relative; width:100%; height:100%;} .header-wrap .header-inner .logo{position:absolute; top:17px; left:0; z-index:400; width:100px;} .header-wrap .header-inner .logo img{max-width:100%;} .sticky { background:#fff !important; } /*======================================================== Gnb ========================================================*/ .btn-gnb{position:absolute; top:30px; right:0px; z-index:200; width:21px; height:20px; border-bottom:2px solid #333; overflow:visible;} .btn-gnb:before,.btn-gnb:after{position:absolute; left:2px; display:block; content:''; width:100%; height:2px; background:#333; transition:0.2s; -webkit-transition: 0.2s;} .btn-gnb:before{top:2px; left:0;} .btn-gnb:after{top:10px; left:0;} .gnb-wrap{position:relative; padding-top:30px; text-align:center; height:100%; transition: 0.3s; -webkit-transition: 0.3s;} .gnb-wrap .gnb{display: inline-block;height: 100%; position: absolute;width: 770px; right: 0;} .gnb-wrap .gnb:after{display:block; clear:both; content:'';} .gnb > li{position:relative; float:left; height:100%; margin:0 22px 0 23px;} .gnb > li > a{display:block; height:100%; color:#000; font-size:16px; font-weight:normal;} .gnb > li > a.only-mo{color:#fff;} .gnb > li > a > span{position:relative; display:block; padding:0 6px; } .gnb > li > a > span:after{position:absolute; bottom:-7px; left:0; display:block; content:''; width:0; height:3px; background:#0066cc; transition: 0.2s; -webkit-transition: 0.2s;} /* depth2 */ .gnb > li .depth2{display:none; position:absolute; top: 50px; left: -40px; min-width:150px; background:#030010; padding:20px 15px;} .gnb > li .depth2 ul > li{ text-align:left; } .gnb > li .depth2 ul > li > a{display:block; padding:9px 0; transition: 0.2s; -webkit-transition: 0.2s; white-space:nowrap; font-size:16px; color:rgba(255, 255, 255, 0.7);} .gnb > li .depth2 ul > li > span > a {color:rgba(255, 255, 255, 0.5); font-size:14px; padding-left:10px; display:block;} .gnb > li .depth2 ul > li > span > a:hover{ color:rgba(255, 255, 255, 0.7); } /* active */ .gnb > li.active > a > span:after, .gnb > li.on > a > span:after, .gnb > li > a:hover > span:after{width:100%;} .gnb > li .depth2 ul > li > a:hover{color:rgba(255, 255, 255, 1);} @media screen and (max-width:1024px){ /**** Header ****/ .header{ height:80px;} .header.m-gnb-open, .header.scrolled{background:#03010f;} .header-wrap{padding:0 20px;} .header-wrap .header-inner .logo{top:22px; left:0; width:170px; } .header-wrap .header-inner .util{top:30px; right:41px;} /**** Util ****/ .util > ul > li > a > span{padding-left:0; display:none;} .util > ul > li{padding:0 10px; z-index:201;} [class*="btn-util-"]:before{opacity:1} /* Util-layer */ .util-div{position:relative;} .util-layer-box{top:60px;} .util-login-box{top:26px;} .util-layer-wrap{padding:15px 30px;} .util-search-box .box-inner{padding:0 40px;} .util-search-box .btn-search-close{right:18px; top:18px;} .util-search-box .btn-search-close .ico-close{width:21px; height:20px;} /* 검색레이어 */ .util-search-box{height:170px;} .util-search-box .search-form-group{padding-top:70px} .search-form-group label{padding-left:10px; font-size:12px;} .search-form-group .input-group{padding-left:10px; margin-top:3px;} .search-form-group .input-group.input-lg .input-text{height:40px; font-size:18px} .search-form-group .input-group .btn-gnb-search{padding:10px;} /**** Footer ****/ .footer{padding:35px 0;} .btn-gnb{display:block; top:30px;} .gnb-wrap{position:fixed; top:0; left:-100%; z-index:100; width:100%; height:100%; background:#03010f; padding:0 30px; text-align:right} .gnb-wrap .gnb{display:block; height:auto; margin-top:90px;} .gnb-wrap .gnb > li{float:none; height:auto; margin:0;} .gnb-wrap.m-gnb-open{left:0;} /* 모바일 모드에서 gnb */ .m-gnb-open .gnb-wrap{left:0;} .m-gnb-open .btn-gnb.close{border-bottom:0;} .m-gnb-open .btn-gnb.close:before{top:50%; width:130%; transform:rotate(45deg);} .m-gnb-open .btn-gnb.close:after{top:50%; width:130%; bottom:0; transform:rotate(-45deg);} .m-gnb-open .gnb > li{ border-bottom:1px solid rgba(255, 255, 255, 0.2);} .m-gnb-open .gnb > li > a{padding:12px 0; font-size:16px; font-weight:bold;} .m-gnb-open .gnb > li > a > span:after{content:none;} .m-gnb-open .gnb > li > a > span{display:inline-block; padding:0;} .m-gnb-open .gnb > li .depth2{position:relative; top:-5px; left:0; width:auto; background:none; padding:0 0 3px;} .m-gnb-open .gnb > li .depth2 ul{position:relative;} .m-gnb-open .gnb > li .depth2 ul > li{position:relative; text-align:right; padding-right:20px;} .m-gnb-open .gnb > li .depth2 ul > li > a{font-size:14px; padding:11px 0;} .m-gnb-open .gnb > li .depth2 ul:after{display:block; content:''; position:absolute; top:0; right:0; width:1px; height:calc(100% - 20px); background:#fff;} .m-gnb-open .gnb > li .depth2 ul > li:after{display:block; content:''; position:absolute; top:50%; right:0; width:10px; height:1px; background:#fff;} } /*======================================================== Content Layout ========================================================*/ .container{position:relative; min-height:calc(100% - 337px)} .content-area:after{display:block; clear:both; content:'';} @media screen and (max-width:768px){ /**** Header ****/ .header{ height:60px;} .header-wrap .header-inner .logo{top:10px; left:0; width:84px; } #sitemap > ul {top: 61px;} .container{min-height:calc(100% - 396px)} } /*======================================================== Grid Layout ========================================================*/ .grid-wrap{width:100%;} .grid-area{width:100%; display:block;} .grid-area:after{display:block; content:''; clear:both;} .grid-area > .colum{float:left;word-break:break-word;} .grid-area > .colum .inner{position:relative; height:100%;} .grid-area > .colum .inner > a{display:block; width:100%; height:100%;} .grid-area > .colum .inner:after{display:block; content:''; clear:both} /* Table type */ .grid-area-table{display:table; width:100%; table-layout:fixed;} .grid-area-table .colum{display:table-cell; width:1%; white-space: nowrap;} .grid-area-table .colum > *{white-space:normal;} /* Fixed type */ .grid-area-fix{width:100%; display:block;} .grid-area-fix:after{display:block; content:''; clear:both;} .grid-area-fix .colum{float:left; font-size:1.3rem; word-break:break-word;} /**** Colum width ****/ .colum.col-12{width:100%;} .colum.col-11{width:91.66666667%;} .colum.col-10{width:83.33333333%;} .colum.col-9{width:75%;} .colum.col-8{width:66.66666667%;} .colum.col-7{width:58.33333333%;} .colum.col-6{width:50%;} .colum.col-5{width:41.66666667%;} .colum.col-4{width:33.33333333%;} .colum.col-3{width:25%;} .colum.col-2{width:16.66666667%;} .colum.col-1{width:8.33333333%;} /* 예외 colum-unit-10 */ .colum.wp-10{width:10%;} .colum.wp-15{width:15%;} .colum.wp-18{width:18%;} .colum.wp-20{width:20%;} .colum.wp-25{width:25%;} .colum.wp-30{width:30%;} .colum.wp-35{width:35%;} .colum.wp-40{width:40%;} .colum.wp-45{width:45%;} .colum.wp-50{width:50%;} .colum.wp-55{width:55%;} .colum.wp-60{width:60%;} .colum.wp-65{width:65%;} .colum.wp-70{width:70%;} .colum.wp-80{width:80%;} .colum.wp-85{width:85%;} .colum.wp-90{width:90%;} .colum.wp-100,.w-full{width:100%;} .grid-area.col-md-pull .colum, .grid-area.col-sm-pull .colum{min-width:100%;} /***** colum 2 ****/ .grid-area.span2 > .colum{width:48.71%;} /* gap */ .grid-area.span2 > .colum{margin-left:2.56%} .grid-area.span2 > .colum:nth-child(2n+1){margin-left:0;} .grid-area.span2 > .colum > .inner{margin-top:30px} .grid-area.span2 > .colum:nth-child(-n+2) .inner{margin:0;} .grid-area.span2-1 > .colum{width:49.186%;} /* gap */ .grid-area.span2-1 > .colum{margin-left:5px} .grid-area.span2-1 > .colum:nth-child(2n+1){margin-left:0;} .grid-area.span2-1 > .colum > .inner{margin-bottom:4px} .grid-area.span2-1 > .colum:nth-last-child(-n+2) .inner{margin-bottom:0;} /**** colum 3 ****/ .grid-area.span3 > .colum{width:31.62%;} /* gap */ .grid-area.span3 > .colum{margin-left:2.56%} .grid-area.span3 > .colum:nth-child(3n+1){margin-left:0;} .grid-area.span3 > .colum > .inner{margin-top:8.12%} .grid-area.span3.type-1 > .colum .inner{margin-top:15%} .grid-area.span3 > .colum:nth-child(-n+3) .inner{margin-top:0} .grid-area.span3-1 > .colum{width:31.62%;} /* gap */ .grid-area.span3-1 > .colum{margin-left:2.56%} .grid-area.span3-1 > .colum:nth-child(3n+1){margin-left:0;} .grid-area.span3-1 > .colum > .inner{margin-top:30px} .grid-area.span3-1 > .colum:nth-child(-n+3) .inner{margin-top:0} /**** colum 4 ****/ .grid-area.span4 > .colum{width:23.07%;} /* gap */ .grid-area.span4 > .colum{margin-left:2.56%;} .grid-area.span4 > .colum:nth-child(4n+1){margin-left:0;} .grid-area.span4 > .colum > .inner{margin-top:10.50%} .grid-area.span4 > .colum:nth-child(-n+4) .inner{margin-top:0;} .grid-area.span4-1 > .colum{width:22.68%;} /* gap */ .grid-area.span4-1 > .colum{margin-left:3.092%;} .grid-area.span4-1 > .colum:nth-child(4n+1){margin-left:0;} .grid-area.span4-1 > .colum > .inner{margin-bottom:20.50%} .grid-area.span4-1 > .colum:nth-last-child(-n+4) .inner{margin-bottom:0;} /**** col-md- ****/ @media screen and (max-width:1024px){ .grid-area-table.col-md-push:not(.mixed) > .colum, .grid-area.col-md-push:not(.mixed):not([class*="span"]) > .colum:not([class*="col-sm-"]){float:none; display:block; width:100%;} /**** colum 3 ****/ .grid-area.span3-1.col-md-push > .colum{width:48.72%;} /* gap */ .grid-area.span3-1.col-md-push .colum{margin-left:2.56%} .grid-area.span3-1.col-md-push > .colum:nth-child(1){margin-left:0;} .grid-area.span3-1.col-md-push > .colum:nth-child(2n+1){margin-left:0;} .grid-area.span3-1.col-md-push > .colum > .inner{margin-top:20px;} .grid-area.span3-1.col-md-push > .colum:nth-child(-n+2) > .inner{margin-top:0;} .grid-area.span3-1.col-md-push > .colum:nth-last-child(-n+3) > .inner{margin-bottom:0} /**** colum 3 mix ****/ .grid-area.span3.col-mix-push > .colum{width:48.72%;} /* gap */ .grid-area.span3.col-mix-push .colum{margin-left:2.56%} .grid-area.span3.col-mix-push > .colum:nth-child(-n+2) .inner{margin-top:0} .grid-area.span3.col-mix-push > .colum:nth-child(1){margin-left:0;} .grid-area.span3.col-mix-push > .colum:nth-child(2n+1){margin-left:0;} .grid-area.span3.col-mix-push > .colum > .inner{margin-top:5.12%} .grid-area.span3.col-mix-push.type-1 > .colum > .inner{margin-top:8.12%} .grid-area.span3.col-mix-push.type-1 > .colum:nth-child(-n+2) .inner{margin-top:0} /**** colum 4 ****/ .grid-area.span4.col-mix-push > .colum{width:48.72%} /*gap */ .grid-area.span4.col-mix-push > .colum > .inner{margin-top:20px} .grid-area.span4.col-mix-push > .colum:nth-child(-n+2) > .inner{margin-top:0;} .grid-area.span4.col-mix-push > .colum{margin-left:2.56%;} .grid-area.span4.col-mix-push > .colum:nth-child(2n+1){margin-left:0;} } /**** col-sm- ****/ @media screen and (max-width:768px){ /**** Colum width ****/ .colum.col-sm-12{width:100%;} .colum.col-sm-6{width:50%;} .grid-area.col-sm-push:not(.mixed):not([class*="span"]) > .colum:not([class*="col-sm-"]){float:none; display:block; width:100%;} /**** colum 2 ****/ .grid-area.span2.col-sm-push > .colum .inner{margin-top:20px} .grid-area.span2.col-sm-push > .colum{float:none; display:block; width:100%; margin-left:0;} /**** gap ****/ .grid-area.span2.col-sm-push > .colum:first-child > .inner{margin-top:0;} .grid-area.span2.col-sm-push > .colum:last-child > .inner{margin-bottom:0;} .grid-area.span2-1.col-sm-push > .colum{float:none; display:block; width:100%; margin-left:0;} /**** gap ****/ .grid-area.span2-1.col-sm-push > .colum:nth-last-child(-n+2) > .inner{margin-bottom:4px;} .grid-area.span2-1.col-sm-push > .colum:last-child > .inner{margin-bottom:0;} /**** colum 3 ****/ .grid-area.span3.col-sm-push > .colum{float:none; display:block; width:100%; margin-left:0;} /* gap */ .grid-area.span3.col-sm-push > .colum:first-child > .inner{margin-top:0} .grid-area.span3.col-sm-push > .colum > .inner{margin-top:20px} .grid-area.span3.col-sm-push > .colum:last-child > .inner{margin-bottom:0;} .grid-area.span3.type-1.col-sm-push > .colum > .inner{margin-top:40px;} .grid-area.span3.type-1.col-sm-push > .colum:first-child > .inner{margin-top:0;} .grid-area.span3.type-1.col-sm-push > .colum:last-child > .inner{margin-bottom:0;} /**** colum 3 mix ****/ .grid-area.span3.col-mix-push > .colum{float:none; display:block; width:100%; margin-left:0;} /* gap */ .grid-area.span3.col-mix-push > .colum .inner, .grid-area.span3.col-mix-push > .colum:nth-child(-n+2) > .inner{margin-top:20px;} .grid-area.span3.col-mix-push > .colum:nth-child(1) > .inner{margin-top:0;} .grid-area.span3.type-1.col-mix-push > .colum .inner, .grid-area.span3.type-1.col-mix-push > .colum:nth-child(-n+2) > .inner{margin-top:40px;} .grid-area.span3.type-1.col-mix-push > .colum:nth-child(1) > .inner{margin-top:0;} /**** colum 4 ****/ .grid-area.span4-1.col-sm-push > .colum{width:47.93%;} /*gap */ .grid-area.span4-1.col-sm-push > .colum{margin-left:4.12%;} .grid-area.span4-1.col-sm-push > .colum:nth-child(1){margin-left:0;} .grid-area.span4-1.col-sm-push > .colum:nth-child(2n+1){margin-left:0;} .grid-area.span4-1.col-sm-push > .colum > .inner, .grid-area.span4-1.col-sm-push > .colum:nth-last-child(-n+4) > .inner{margin-bottom:9.00%;} .grid-area.span4-1.col-sm-push > .colum:nth-last-child(-n+2) > .inner{margin-bottom:0;} /**** colum 4 mix ****/ .grid-area.span4.col-mix-push > .colum{float:none; display:block; width:100%; margin-left:0;} /*gap */ .grid-area.span4.col-mix-push > .colum .inner, .grid-area.span4.col-mix-push > .colum:nth-child(-n+2) > .inner{margin-top:40px;} .grid-area.span4.col-mix-push > .colum:nth-child(1) > .inner{margin-top:0;} .grid-area.span4.col-mix-push > .colum:nth-child(2n+1){margin-left:0;} /* grid 간격 예외(.pro-list) */ .pro-list .grid-area.span4.col-mix-push > .colum .inner, .pro-list .grid-area.span4.col-mix-push > .colum:nth-child(-n+2) > .inner{margin-top:20px;} .pro-list .grid-area.span4.col-mix-push > .colum:nth-child(1) > .inner{margin-top:0;} } @media screen and (max-width:600px){ .colum.col-6{width:100%; text-align:center;} } /*======================================================== Icon ========================================================*/ /**** Arrow ****/ [class*="ico-arr-"]{position:relative; display:inline-block; width:15px; height:15px; transition:.2s; -webkit-transition: .2s; transform:translateX(0); -webkit-transform:translateX(0);} [class*="ico-arr-"]:after, [class*="ico-arr-"]:before{position:absolute; display:block; content:''; background-color:#000; box-shadow:inset 0 0 0 32px;} /* right */ .ico-arr-right:before{top:0; left:50%; width:1px; height:59.45%; -webkit-transform:rotate(135deg); transform:rotate(135deg);} .ico-arr-right:after{bottom:0; left:50%; width:1px; height:59.45%; -webkit-transform:rotate(-135deg); transform:rotate(-135deg);} /* before */ .ico-arr-left:before{top:0; left:50%; width:1px; height:59.45%; -webkit-transform:rotate(-135deg); transform:rotate(-135deg);} .ico-arr-left:after{bottom:0; left:50%;width:1px; height:59.45%; -webkit-transform:rotate(135deg); transform:rotate(135deg);} /* down */ .ico-arr-down:before{top:50%; right:0; width:60%; height:1px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .ico-arr-down:after{top:50%; left:0; width:60%; height:1px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} /* up */ .ico-arr-up:before{top:50%; right:0; width:60%; height:1px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} .ico-arr-up:after{top:50%; left:0; width:60%; height:1px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} /* Toggle arrow icon */ .ico-toggle-arr{position:relative; display: inline-block; width:15px; height:15px; transition:.2s; -webkit-transition: .2s; transform: translateX(0); -webkit-transform: translateX(0);} .ico-toggle-arr:after, .ico-toggle-arr:before{position:absolute; display:block; content:''; background-color:#000; box-shadow:inset 0 0 0 32px;} .ico-toggle-arr:before{top:50%; right:0; width:60%; height:1px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} .ico-toggle-arr:after{top:50%; left:0; width:60%; height:1px; transform:rotate(45deg); -webkit-transform:rotate(45deg);} .toggle-on .ico-toggle-arr:before{transform:rotate(45deg);} .toggle-on .ico-toggle-arr:after{transform:rotate(-45deg);} .btn-tb-toggle{width:40px; height:40px; text-align:center} .btn-tb-toggle .ico-toggle-arr{width:18px; height:18px;} .btn-tb-toggle .ico-toggle-arr:after, .btn-tb-toggle .ico-toggle-arr:before{height:2px; background-color:#6f6f75;} /**** Arrow(Fill) ****/ [class*="ico-arrfill-"]:after{display:inline-block; content:''; border-width:4px 0 4px 5px; border-style:solid; border-top-color:transparent; border-bottom-color:transparent; transition:0.3s;} .ico-arrfill-up:after{transform:rotate(-90deg); -webkit-transform:rotate(-90deg);} .ico-arrfill-down:after{transform:rotate(90deg); -webkit-transform:rotate(90deg);} /**** Arrow(More) ****/ .text-more-link{display:inline-block; color:#8cc63e; font-size:18px; font-weight:bold; letter-spacing:0; line-height:1; white-space:nowrap;} .text-more-link > span{padding-right:13px;} .more-arrow{position:relative; display:inline-block; vertical-align:middle; margin-top:-8px; min-width:33px;} .ico-more{display:block; content:''; position:absolute; top:0; left:0; width:33px; height:2px; background:#8cc63e; transition:0.3s; -webkit-transition:0.3s;} .ico-more:after{display:block; content:''; position:absolute; top:-4px; right:-2px; border:solid #8cc63e; border-width:5px 0 5px 9px; border-top-color:transparent; border-bottom-color:transparent; content:''; transform: scale(1, 0.8); -webkit-transform: scale(1, 0.8);} .text-more-link:hover .ico-more{width:53px;} /**** Plus ****/ .ico-plus{position:relative; width:12px; height:12px; display:inline-block;} .ico-plus:before{display:block; content:''; position:absolute; top:5px; left:0; width:100%; height:2px; background:#03010f;} .ico-plus:after{display:block; content:''; position:absolute; top:0; left:5px; width:2px; height:100%; background:#03010f;} /**** Close ****/ .ico-close{position:relative; display:block; width:20px; height:20px} .ico-close:before, .ico-close:after{position:absolute; top:50%; left:-3px; display:block; content:''; width:130%; height:2px; background:#fff; transition:0.2s; -webkit-transition: 0.2s;} .ico-close:before{transform:rotate(45deg);} .ico-close:after{bottom:0; transform: rotate(-45deg);} /**** Play ****/ .ico-play{display:inline-block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:72px; height:72px; background:rgba(255,255,255,.8); border-radius:100%} .ico-play:before{position:absolute; top:50%; left:50%; margin-top:-16px; margin-left:-5px; display:inline-block; content: ''; border: solid #8cc63e; border-width:16px 0 16px 20px; border-top-color: transparent; border-bottom-color: transparent;} /**** List ****/ .ico-list{position:relative; display:inline-block; vertical-align:middle; margin-top:-3px; border-top:2px solid #fff; width:17px; height:14px;} .ico-list:before, .ico-list:after{position:absolute; left:0; display:block; content:''; width:100%; height:2px; background:#fff;} .ico-list:before{top:4px;} .ico-list:after{bottom:0;} /**** 경고,주의 ****/ .ico-excl{position:relative; display:inline-block; vertical-align:middle; border-radius:50%; width:14px; height:14px; background:#6f6f75;} .ico-excl:before{display:block; content:''; position:absolute; top:3px; left:6px; width:2px; height:2px; background:#fff;} .ico-excl:after{display:block; content:''; position:absolute; top:6px; left:6px; width:2px; height:5px; background:#fff;} /**** BG Color에 따른 아이콘 ****/ /* White */ .bg-orange [class*="ico-arr-"]:before, .bg-orange [class*="ico-arr-"]:after, .bg-grey [class*="ico-arr-"]:before, .bg-grey [class*="ico-arr-"]:after, .bg-black [class*="ico-arr-"]:before, .bg-black [class*="ico-arr-"]:after, .bg-dark-opt [class*="ico-arr-"]:before, .bg-dark-opt [class*="ico-arr-"]:after, .bg-dark [class*="ico-arr-"]:before, .bg-dark [class*="ico-arr-"]:after{background-color:#fff; box-shadow:inset 0 0 0 32px #fff;} @media screen and (max-width:1024px){ /**** Arrow(More) ****/ .text-more-link{font-size:14px;} .text-more-link > span{padding-right:6px;} .more-arrow{min-width:25px; margin-top:-6px;} .ico-more{width:25px; height:2px; margin-top:0} .text-more-link:hover .ico-more{width:34px;} .ico-play{width:60px; height:60px;} .ico-play:before{ margin-top:-13px; border-width:13px 0 13px 15px;} } /**** 스크롤 표시 아이콘 ****/ .ico-arr-down.sign-scroll{width:60px; height:60px; animation:scrollsign 1s infinite alternate; -webkit-animation:scrollsign 1s infinite alternate;} .ico-arr-down.sign-scroll:before, .ico-arr-down.sign-scroll:after{height:2px; background-color:#fff; box-shadow:none; top:0%; } @keyframes scrollsign { 0%{transform:translate(0,0); opacity:.6} 100%{transform:translate(0,15px); opacity:1;} } /*======================================================== Button ========================================================*/ button{background:none; font-family:SSTPro, "맑은고딕", Malgun Gothic, "돋움", Dotum, Tahoma, sans-serif; cursor:pointer; outline: none; border:0; margin:0; padding:0;} .btn{display:inline-block; text-align:center; border:2px solid transparent; box-sizing:border-box; color:#6f6f75;} .btn > span{display:inline-block; line-height:1.3;} /**** Area ****/ .btn-area, .btn-link-area{position:relative; text-align:center} .btn-area:after, .btn-link-area:after{display:block; content:''; clear:both} /* 간격 */ .btn-link-area > .btn{margin:0 7px;} .btn-area > .btn{margin:0 2px 0 1px; vertical-align:top;} .btn-area > .btn:only-child{margin:0;} /* 스크롤시 고정영역 */ .btn-area.scroll-fix{width:100%; background:rgba(6,3,1,.7); padding:30px 0; position:absolute; width:100%; left:0; bottom:0; transition:.2s; -webkit-transition:.2s} .btn-area.scroll-fix.on{position:fixed; bottom:0; left:0; z-index:10; } .btn-area.scroll-fix .grid-justify{max-width:920px; margin:0 auto;} /* 영역 위치 */ .btn-area .left{float:left;} .btn-area .right{float:right;} .btn-area .left > .btn{margin:0 3px 0 0;} .btn-area .right > .btn{margin:0 0 0 3px;} /**** grid-justify ****/ .grid-justify .colum{text-align:left} .grid-justify .colum > .btn:only-child{width:100%; margin:0;} .grid-justify .colum.span2 > .btn{width:49.12%;} /* col-btn- */ .colum.col-btn-1{width:36.95%;} .colum.col-btn-2{width:61.95%} /* 간격 */ .grid-justify .colum[class*="col-btn-"]{margin-left:1.086%;} .grid-justify .colum[class*="col-btn-"]:after{display:block; content:''; clear:both;} .grid-justify .colum[class*="col-btn-"]:first-child{margin-left:0;} .colum[class*="col-btn-"] .btn{margin-left:1.75%; margin-right:0; float:left;} .colum[class*="col-btn-"] .btn:first-child, .colum[class*="col-btn-"] .btn:only-child{margin-left:0} .grid-justify .colum[class*="col-btn-"]:only-child{margin:0 auto; float:none;} /**** Color ****/ .btn-primary{background:#8cc63e; color:#fff;} .btn-default{background:#fff; color:#03010f; border:2px solid #03010f;} .btn-info{background:#5865f5; color:#fff;} .btn-dark{background:#2b2f3a; color:#fff;} .btn-grey{background:#e4e7ec; color:#6f6f75;} .btn-purple{background:#79679b; color:#fff;} .btn-blue{background:#0085ba; color:#fff;} .btn-green{background:#0074ba; color:#fff;} .btn-yellow{background:#ebab3d; color:#fff;} .btn-disable,.btn-grey2{background:#999; color:#fff;} .btn-primary-line{color:#8cc63e; border:2px solid #8cc63e; background:transparent;} .btn-white-line{color:#fff; border:2px solid #fff; background:transparent;} /**** Size ****/ .btn-sm{padding:2px 19px} .btn-sm > span{font-size:12px;} .btn-md{padding:7px 19px;} .btn-md > span{font-size:16px;} .btn-lg{padding:18px 28px;} .btn-lg > span{font-size:20px; font-family: 'NanumSquare';} .btn-xlg{padding:24px 0 27px;} .btn-xlg > span{font-size:18px; font-weight:700} .btn-full{width:100%; margin:0;} .btn-area > .btn{min-width:300px;} /**** 버튼 스타일에 따른 아이콘 ****/ /* ico-arr- */ .btn > [class*="ico-arr-"]{width:6px; height:6px; border-width: 0 1px 1px 0; padding:1px; margin-left:2px;} .btn > .ico-plus{margin-right:5px;} .btn:hover > [class*="ico-arr-"]{transform:translateX(7px); -webkit-transform:translateX(7px);} .btn-lg > [class*="ico-arr-"]{width:12px; height:12px;} .btn-primary > [class*="ico-arr-"]:before, .btn-primary > [class*="ico-arr-"]:after{background-color:#fff; box-shadow: inset 0 0 0 32px;} .btn-primary-line > [class*="ico-arr-"]:after, .btn-primary-line > [class*="ico-arr-"]:before{background-color:#8cc63e; box-shadow:inset 0 0 0 32px;} .btn-icon{background:transparent;} /* more-arrow > ico-more */ .btn-primary .ico-more,.btn-dark .ico-more,.btn-grey .ico-more,.btn-white-line .ico-more{background:#fff;} .btn-primary .ico-more:after,.btn-dark .ico-more:after,.btn-grey .ico-more:after,.btn-white-line .ico-more:after{border:solid #fff; border-width:5px 0 5px 9px; border-top-color:transparent; border-bottom-color:transparent;} .btn .more-arrow{margin-top:-6px;} .btn .ico-more{width:29px; margin-left:7px;} .btn:hover .ico-more{width:36px;} /* ico-list */ .btn .ico-list{margin-right:11px;} @media screen and (max-width:1280px){ .btn-lg > span{font-size:18px;} } @media screen and (max-width:1024px){ .btn-area.only-mo > .btn{width:100%; margin:0;} /**** 반응형 버튼 ****/ .btn.rwd-icon-btn > span:not([class*="ico-"]){display:none;} .btn-area.scroll-md-fix > .btn{width:100%;} /**** grid-justify ****/ .btn-area.scroll-fix .grid-justify{max-width:none; padding:0 20px;} /* 부모요소에 따른 예외처리 */ .mid-full-frame .btn-area{padding:0 20px;} /**** Size ****/ .btn-md{padding:2px 14px 3px;} .btn-md > span{font-size:12px;} .btn-lg{/*padding:19px 20px;*/} .btn-lg > span{font-size:16px;} .btn-xlg{padding:25px 0 27px;} .colum[class*="col-btn-"] .btn{padding-left:5px; padding-right:5px} } @media screen and (max-width:768px){ /**** Area ****/ /* 간격 */ .btn-area > .btn{margin:0; min-width:100%} /* 스크롤시 고정영역 */ .btn-area.scroll-fix{padding:20px 0;} /**** grid-justify ****/ .grid-justify .colum.span2 > .btn{width:48.95%;} /* col-btn- */ .col-sm-push.grid-justify .colum[class*="col-btn-"]{margin-left:0;} .col-sm-push.grid-justify .colum.col-btn-1, .col-sm-push.grid-justify .colum.col-btn-2{width:100%} .col-sm-push.grid-justify .colum[class*="col-btn-"] + .colum[class*="col-btn-"]{margin-top:8px;} /**** Size ****/ .btn-sm{} .btn-md{} .btn-lg{padding:16px 15px 17px} .btn-lg > span{font-size:14px;} /**** 반응형 버튼 ****/ .btn-link-area.rwd-stick-btns{display:table; width:100%;} .btn-link-area.rwd-stick-btns > .btn{padding-left:30px; padding-right:30px; } .btn-area.rwd-block-btns:not(.scroll-md-fix){padding:0 20px;} .btn-area.rwd-block-btns > .btn{display:block; width:100%; margin:0;} .btn-area.rwd-block-btns > .btn + .btn{margin-top:10px} .btn-area.rwd-block-btns .left, .btn-area.rwd-block-btns .right{float:none;} .btn-area.rwd-block-btns .left > .btn{display:block; width:100%; margin:0;} .btn-area.rwd-block-btns .left > .btn + .btn{margin-top:10px} /* 부모요소에 따른 예외처리 */ [class*="frame-"]:not(.view-box) > .btn-area.rwd-block-btns:not(.scroll-md-fix), .inner-content .btn-area.rwd-block-btns{padding:0;} .btn-area.rwd-stick-btns{display:table; width:100%;} .btn-area.rwd-stick-btns > .btn{display:table-cell; margin:0; width:50%;} } @media screen and (max-width:360px){ .btn-area.scroll-fix .btn-lg{padding:10px 0 11px;} } /**** 아이콘,이미지 버튼 ****/ .btn-search{padding:0 20px;} .ico-sns-login{display:inline-block; vertical-align:top; width:29px; height:29px; background:#fff url("../images/icon/ico_sns_log.png") no-repeat; background-size:108px auto;} .ico-sns-login.naver{background-position:left top} .ico-sns-login.kakao{background-position:center top} .ico-sns-login.facebook{background-position:right top} /* 간격 */ .btn [class*="ico-func"] + span{margin-left:4px} /*======================================================== Tab Menu ========================================================*/ .tab-menu:after{display:block; content:''; clear:both;} .tab-menu > ul{width:100%; text-align:center;} .tab-menu > ul > li{display:inline-block; vertical-align:top; margin:0 28px;} .tab-menu > ul > li > a{display:block; font-size:18px; color:#6f6f75; line-height:1; font-weight:300} .tab-menu > ul > li > a > span{position:relative; display:block; padding:0 1px;} /* Active */ .tab-menu > ul > li.active > a{color:#03010f; font-weight:700} .tab-menu > ul > li > a > span:after{position:absolute; bottom:-5px; left:0; display:block; content:''; width:0; height:2px; background:#8cc63e; transition:0.2s; -webkit-transition:0.2s;} .tab-menu > ul > li.active > a > span:after{width:100%;} @media screen and (max-width:1024px){ .tab-menu > ul{width:100%; text-align:left;} .tab-menu > ul > li{margin:0 21px 0 0;} } /**** tab content ****/ .tab-content:after{display:block; content:''; clear:both;} .tab-content .tab-inner{display:none;} .tab-content .tab-inner.active{display:block;} /**** info-tab-menu ****/ .top-cnt-bar{background:#fff; border-bottom:1px solid #b5b1b2;} .top-cnt-bar.fixed{position:fixed; top:90px; left:0; width:100%; z-index:1001;} /* 예외 (아카데미 메뉴 드롭다운) */ .upper-top-cnt:not(.top-search-area) ~ .content-area .top-cnt-bar.fixed{top:90px;} .info-tab-menu{position:relative; padding:0; background:#fff; max-width:1170px; margin:0 auto;} .info-tab-menu ul{position:relative; display:table; table-layout:auto; margin:0 auto;} .info-tab-menu ul > li{position:relative; display:table-cell; vertical-align:middle; text-align:center;} .info-tab-menu ul > li a{position:relative; display:block; width:100%; padding:0 27px; color:#6f6f75; text-align:center; font-size:20px; cursor:pointer; transition:.2s; -webkit-transition:.2s} .info-tab-menu ul > li a > span{position:relative; display:inline-block; vertical-align:top; height:100%; padding:20px 0;} .info-tab-menu ul > li:first-child{border-left:0;} .info-tab-menu ul > li.active a{font-weight:bold; color:#03010f;} .info-tab-menu ul > li.active a > span:before{display:block; content:''; position:absolute; bottom:-1px; top:auto; left:0; width:100%; height:3px; background:#8cc63e;} /**** flex-tab-menu ****/ .flex-tab-menu{max-width:1170px; margin:0 auto;} .flex-tab-menu ul{display:table; width:100%; table-layout:fixed} .flex-tab-menu ul li{display:table-cell; vertical-align:top} .flex-tab-menu ul li > a{display:block; height:100%; padding:17px 10px 18px; text-align:center; background:#f0f0f0; font-size:18px;} /* icon */ .flex-tab-menu ul li .ico-list{border-top:2px solid #6f6f75;} .flex-tab-menu ul li .ico-list:before, .flex-tab-menu ul li .ico-list:after{background:#6f6f75} .flex-tab-menu ul li .ico-cal{background-position:left top;} /* 위치 */ .flex-tab-menu ul li > a > .ico-list{margin-right:8px; margin-top:-6px;} .flex-tab-menu ul li > a > .ico-cal{margin-right:8px; margin-top:3px;} /* 활성화 */ .flex-tab-menu ul li.active > a{background:#8cc63e; color:#fff;} .flex-tab-menu ul li.active .ico-list{border-top:2px solid #fff;} .flex-tab-menu ul li.active .ico-list:before, .flex-tab-menu ul li.active .ico-list:after{background:#fff} .flex-tab-menu ul li.active .ico-cal{background-position:right top;} @media screen and (max-width:1280px){ .info-tab-menu ul > li a{font-size:18px;} /**** flex-tab-menu ****/ .flex-tab-menu{padding:0 20px;} /* 부모요소에 따른 예외처리 */ [class*="frame-"] > .flex-tab-menu{padding:0;} } @media screen and (max-width:1024px){ /**** info-tab-menu ****/ .top-cnt-bar{border-bottom:0;} .top-cnt-bar.fixed{top:60px; border-bottom:1px solid #b5b1b2;} /* 예외 (아카데미 메뉴 드롭다운) */ .ui-upper-cnt:not(.top-search-area) ~ .content-area .top-cnt-bar.fixed{top:124px;} .content-area.fix-gap{} .info-tab-menu ul > li a{font-size:16px;} .info-tab-menu ul > li > a > span{white-space:nowrap; padding:15px 0; bottom:0;} } @media screen and (max-width:980px){ .info-tab-menu ul > li a{padding:0 20px;} } @media screen and (max-width:768px){ /**** info-tab-menu ****/ /* 모바일에서 탭 swipe */ html{-ms-overflow-style:none;} ::webkit-scrollbar{display:none;} .info-tab-menu{overflow:visible; padding-left:6px;} .info-tab-menu.swipe-tab::-webkit-scrollbar{display:none;} .info-tab-menu.swipe-tab{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;} .info-tab-menu ul{width:auto;} .info-tab-menu ul > li > a{display:inline-block; width:auto; vertical-align:top; padding:0 14px;} /**** flex-tab-menu ****/ .flex-tab-menu ul li > a{padding:17px 0 18px; font-size:14px} /* 위치 */ .flex-tab-menu ul li > a > .ico-list{margin-right:8px; margin-top:-3px;} .flex-tab-menu ul li > a > .ico-cal{margin-right:8px; margin-top:0;} }