@charset "UTF-8"; /* reset */ @import url(./reset.css); /* common */ @import url(./common.css); /* pc */ @import url(./pc_new.css); /* mobile */ @import url(./mobile_new.css); /* tablet */ @import url(./tablet_new.css); .for_m, .for_tab {display:none;} .for_pc {display:inline-block;} .for_m + br, .for_tab + br {display:none;} .for_pc + br {display:inline-block;} .dn_m {display:inline;} .dn {display:none;} /*─────────────────────────────────────────────────────────── COMMON ───────────────────────────────────────────────────────────*/ body {font-family:'Lato','Noto Sans KR','Nanum Gothic',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} #wrapper {width:100%;min-width:1200px;margin:0 auto;} .w_set {width:1280px;box-sizing:border-box;transition:0.4s;padding:0;margin:0 auto;position: relative;} #container #contents.w_set{width:1280px;box-sizing:border-box;transition:0.4s;padding:0;margin:0 auto;} .w_set_new {width:1260px;box-sizing:border-box;transition:0.4s;padding:0;margin:0 auto;} #header, #header div, #header a, #footer, #footer div, #footer dl, #footer dt:before, .main_visitor div, .main_visitor p, .main_counter div, .dart_counter div, .main_counter p, .dart_counter p, .main_benefit div, .main_benefit p, .main_service div, .main_service p {transition:0.3s;} table caption {display:none;} .skip_navigation {position:absolute;left:-999px;top:-999px;z-index:1;} .sub_menu {display:none;} .sub_menu.portfolio {display:block;} .sub_menu.portfolio .w_set {padding-top:0;} .location {display:none;} p, td, li, dd, div, th, dt {word-break:keep-all;} @media only screen and (max-width:1350px){ #container #contents.w_set, .w_set, .w_set_new{width:100%;padding-right:30px;padding-left:30px;} } /*─────────────────────────────────────────────────────────── HEADER 190514 ───────────────────────────────────────────────────────────*/ #header {z-index:30;width: 100%;background: #fff;transition:all .2s;position: fixed;top:0;left:0;} #header.fixed {} #header .hd_gnb {position:relative;background:#f5f5f5;} #header .hd_gnb > .w_custom {height:45px;width:1280px;position:relative;} #header .hd_gnb > .w_custom:after{clear:both;content:"";display: block;} #header .hd_notice, #header .hd_right{display: inline-block;box-sizing:border-box;vertical-align: top;} #header .hd_notice{} #header .hd_notice dl{display:flex;align-items:center;} #header .hd_notice dl dt{vertical-align: middle;} #header .hd_notice dl dt img{vertical-align: middle;line-height:45px;} #header .hd_notice dl dt, #header .hd_notice dl dd{display: inline-block;box-sizing:border-box;} #header .hd_notice dl dd{margin-left:7px;width:600px;vertical-align: top;height:45px;overflow:hidden;} #header .hd_notice dl dd .swiper-container {width:100%;height:45px;} /* #header .hd_notice dl dd ul{height:45px;} */ #header .hd_notice dl dd ul li{height:47px;font-size:15px;color:#666;font-weight:400;letter-spacing:-0.45px;line-height:47px;width:100% !important;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;} #header .hd_notice dl dd ul li span{font-size:inherit;color:inherit;font-weight:inherit;display: block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #header .hd_notice dl dd ul li span strong{color:#333;} #header .hd_right{float: right;font-size:0;} #header .hd_right .hd_phone{font-size:22px;color:#333;font-weight:600;font-family:'Roboto';display: inline-block;box-sizing:border-box;vertical-align:top;line-height:45px;background:url('../image/main/icon_hd_phone.png')no-repeat left center;padding-left:26px;margin-right:20px;} #header .hd_right a{display: inline-block;box-sizing:border-box;vertical-align: top;height:45px;line-height:45px;text-align:left;} #header .hd_right .contact_us{width:130px;background:#d71419 url('../image/main/hd-contact.png')no-repeat 84% center;font-size:18px;color:#fff;font-weight:500;padding-left:21px;} #header .hd_right .link_blog{width:45px;background:#aaa url('../image/main/hd-blog.png')no-repeat center;font-size:0;} #header .hd_bnr{position:absolute;top:50%;left:0;transform:translateY(-50%);display:inline-block;background:url('../image/main/top_bnr_2022.png')no-repeat 0 50%;background-size:100% auto;width:220px;height:56px;} #header .hd_bnr a {display:inline-block;width:100%;height:100%;position:absolute;left:0;top:0;} #header .hd_gnb h1 {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:0;} #header .hd_gnb h1 img {width:auto;} #header .hd_member{display: inline-block;vertical-align: middle;margin-right:20px;} #header .hd_gnb .hd_member ul {text-align:right;font-size:0;} #header .hd_gnb .hd_member ul li {vertical-align:top;line-height:45px;padding:0 10px;display:inline-block;box-sizing:border-box;vertical-align: top;} #header .hd_gnb .hd_member ul li:nth-child(3){padding-right:none;} #header .hd_gnb .hd_member ul li a {color:#888888;font-size:14px;font-weight:400;display:block;width:100%;height:100%;letter-spacing:-0.42px;} #header .hd_gnb .hd_member ul li.link_blog{width:14px;height:18px;padding-right:0;} #header .hd_gnb .hd_member ul li.link_blog a{font-size:0;background:url('../image/main/icon_blog.png')no-repeat center;background-size:auto 100%;} #header .hd_gnb .hd_member ul li.blog {padding:0 0 0 6px;height:19px;line-height:19px;margin-bottom:-3px;} #header .hd_gnb .hd_member ul li.blog:before {width:1px;height:12px;background:#ccc;vertical-align:top;margin:0px 20px 0 0;content:"";display:inline-block;} #header .hd_gnb .hd_member ul li.home {padding-right:10px;position:relative} #header .hd_gnb .hd_member ul li.home::after {content:"";width:1px;height:12px;background:#ccc;position:absolute;top:2px;right:0px} #header .hd_lnb {border-top: 0;transition: 0s;box-shadow:2px 2px 7px rgba(0,0,0,.2);background:#fff;height:96px;} #header .hd_lnb:after{clear:both;content:"";display: block;} #header .hd_lnb.lnb_none{box-shadow:none;} #header.fixed .hd_lnb {width:100%;background:#fff;z-index: 50;} #header .hd_lnb .w_custom {position:relative;width:1280px;margin:0 auto;} #header .hd_lnb .w_custom:after {clear:both;content:"";display: block;} #header .hd_lnb .w_custom h1{display: inline-block;vertical-align: middle;padding-top:29px;} #header .hd_lnb .w_custom h1 a{display: block;width:100%;height:24px;} #header .hd_lnb .w_custom h1 a img{height:100%;} #header .hd_lnb .w_custom .contact_us{display: inline-block;box-sizing:border-box;vertical-align: middle;width:140px;height:42px;line-height:42px;border-radius:21px;text-align: center;background:#d71419;font-size:18px;color:#fff;font-weight:500;position: relative;transition:all 0.5s;margin-left:20px;margin-top:29px;} #header .hd_lnb .w_custom .contact_us:before{width:0;height:0;content:"";background:url('../image/main/hd-contact.png')no-repeat center;position: absolute; right:26px;top:15px;transition:all 0.5s;} #header .hd_lnb .w_custom .contact_us:hover{padding-right:28px;transition:all 0.5s;} #header .hd_lnb .w_custom .contact_us:hover:before{width:13px;height:13px;transition:all 0.5s;} #header .hd_lnb .hd_cate_wrap {font-size:0;text-align:center;display: inline-block;box-sizing:border-box;margin-left:106px;width:auto;float:right;padding:0;vertical-align: top;} #header .hd_lnb .hd_cate_wrap li {display:inline-block;padding: 0 72px 0 0;position:relative;} #header .hd_lnb .hd_cate_wrap li:last-child {padding-right:0;} #header .hd_lnb .hd_cate_wrap li a {display:inline-block;width:auto;/* height: 2.22em;line-height: 2.22; */border-radius: 2.22em;font-size:18px;font-weight:500;position:relative;color: #333;padding:0;line-height:96px;} #header .hd_lnb .hd_cate_wrap li.portfolio_li > a:before{content: "";animation-duration: 2s;animation-name: point;animation-iteration-count: infinite;display: block;position: absolute;top:32px;right: -10px;width: 8px;height: 8px;border-radius: 50%;background: #d81419;} @keyframes point { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } #header .hd_lnb .hd_cate_wrap li.depth1.on > a, #header .hd_lnb .hd_cate_wrap li.depth1:hover > a{color:#d71419;} #header .hd_lnb .hd_cate_wrap li.depth1 > a:after {content:"";width:0;height:2px;background:#d81419;position:absolute;left:0;bottom:0;transition:all 0.5s;} #header .hd_lnb .hd_cate_wrap li.depth1.on > a:after, #header .hd_lnb .hd_cate_wrap li.depth1:hover > a:after{width:100%;transition:all 0.5s;} #header .hd_lnb .hd_cate_wrap li .depth2{display: none;overflow:hidden;transition:all .5s;position:absolute;width:100%;text-align:left;left:0;z-index: 51;top:100%;padding-top:26px;box-sizing:border-box;height:auto;} #header .hd_lnb .hd_cate_wrap li .depth2 li{margin:0;box-sizing:border-box;display:block;padding:0;} #header .hd_lnb .hd_cate_wrap li .depth2 li:hover a{color:#d81419;} #header .hd_lnb .hd_cate_wrap li .depth2 li a {font-size:15px;line-height:42px;height:auto;padding:0;color:#606060;font-weight:400;} #header .hd_lnb .hd_cate_wrap li:last-of-type .depth2{width:160%;} /*드롭메뉴*/ .hd_dep2_box{display: none;width:100%;position: absolute;top:100%;left:0;box-sizing:border-box;border-top:1px solid #ddd;box-shadow:2px 6px 11px -5px rgba(0,0,0,0.2);background:#fff;padding:45px 0 150px;} .hd_dep2_box .w_custom{width:1280px;margin:0 auto;box-sizing:border-box;} .hd_dep2_box .w_custom:after{clear:both;content:"";display: block;} .hd_dep2_box .gif_box{display: inline-block;box-sizing:border-box;vertical-align: top;float: left;} .hd_dep2_box .gif_box a{display: block;width:100%;height:100%;} .hd_dep2_box .time_box{display: flex;align-items: center;margin-top:15px;} .hd_dep2_box .time_box .clock{margin-left:15px;} .hd_dep2_box .time_box .clock p{font-size:18px;color:#333;font-weight:500;} .hd_dep2_box .time_box .clock #time{font-size:14px;color:#d71419;font-weight:700;} .hd_dep2_box .time_box .clock #time em{color:#333;font-weight:400;} @media only screen and (max-width:1350px){ #header .hd_gnb > .w_custom{width:1500%;box-sizing:border-box;padding:0 30px;} #header .hd_lnb .w_custom{width:100%;box-sizing:border-box;padding:0 30px 0;} #header .hd_lnb .hd_cate_wrap{margin-left:50px;} } @media only screen and (max-width:1300px){ #header .hd_lnb .hd_cate_wrap li{padding:0 40px 0 0;} #header .hd_lnb .hd_cate_wrap li .depth2 li a{font-size:14px;line-height:35px;} } /*─────────────────────────────────────────────────────────── FOOTER 190514 ───────────────────────────────────────────────────────────*/ /*scroll_right*/ .scroll_right{position:fixed;right:0;top:21.5%;width:260px;height:auto;z-index:1000;transition:all 0.5s;border:none;} .scroll_right.hide{right:-260px;transition:all 0.5s;} .scroll_right_box{width:100%;height:100%;position:relative;font-size:0;box-sizing:border-box;margin:0;padding:0;background:none;} /*230113 수정*/ .scroll_right_box .scroll_right_content{width:100%;box-sizing:border-box;background:#eee;border-radius:10px 0 0 10px;padding:20px 30px 30px 30px;} .scroll_right_box > div{width:100%;box-sizing:border-box;font-size:0;} .scroll_right_box .scroll_right_content .title{} .scroll_right_box .scroll_right_content .title h3{font-size:22px;color:#222;font-weight:500;letter-spacing:-0.66px;} .scroll_right_box .scroll_right_content .title p{font-size:15px;color:#888;font-weight:400;letter-spacing:-0.45px;line-height:22px;margin-top:8px;} .scroll_right_box .scroll_right_content .form{margin-top:12px;} .scroll_right_box .scroll_right_content .form div{padding:3px 0;} .scroll_right_box .scroll_right_content .form input[type="text"], .scroll_right_box .scroll_right_content .form input[type="number"], .scroll_right_box .scroll_right_content .form select{width:100%;height:42px;box-sizing:border-box;vertical-align: top;border:1px solid rgba(136, 136, 136, 0.4);font-size:15px;color:#888;font-weight:400;letter-spacing:-0.45px;padding-left:15px;} .scroll_right_box .scroll_right_content .form input[type="text"]:focus, .scroll_right_box .scroll_right_content .form input[type="number"]:focus, .scroll_right_box .scroll_right_content .form select:focus{border:1px solid #222;} .scroll_right_box .scroll_right_content .form select{color:#555;appearance:none;-webkit-appearance: none;background:#fff url('../images/da_image/right-sel-arw.png')no-repeat 94% center;cursor:pointer;} .scroll_right_box .scroll_right_content .form input::placeholder{color:#888;} .scroll_right_box .scroll_right_content .form input[type="number"]::-webkit-outer-spin-button, .scroll_right_box .scroll_right_content .form input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} .scroll_right_box .scroll_right_content .form .type_check{margin-top:3px;} .scroll_right_box .scroll_right_content .form .type_check:after{clear:both;content:"";display: block;} .scroll_right_box .scroll_right_content .form .type_check label{font-size:14px;color:#555;font-weight:400;letter-spacing:-0.42px;display: inline-block;} .scroll_right_box .scroll_right_content .form .type_check a{display: inline-block;vertical-align: top;font-size:13px;color:#888;font-weight:400;letter-spacing:-0.39px;float: right;line-height:21px;} .scroll_right_box .scroll_right_content .form .form_submit{margin-top:11px;} .scroll_right_box .scroll_right_content .form .form_submit input{width:100%;height:50px;line-height:50px;background:#d71419;box-sizing:border-box;box-shadow: 0px 10px 21px 0 rgba(0, 0, 0, 0.39);font-size:18px;color:#fff;font-weight:500;letter-spacing:-0.54px;} .scroll_right_box .scroll_right_content .scroll_right_btn{margin-top:25px;} .scroll_right_box .scroll_right_content .scroll_right_btn a{display: block;width:100%;height:50px;line-height:50px;box-sizing:border-box;text-align: center;} .scroll_right_box .scroll_right_content .scroll_right_btn .sc_phone{background:#222 url('../images/da_image/right-cs.png')no-repeat 28px center;font-size:18px;color:#fff;font-weight:400;font-family:'Roboto';padding-left:28px;border:1px solid #222;} .scroll_right_box .scroll_right_content .scroll_right_btn .sc_contact{background:#fff url('../images/da_image/right-contact.png')no-repeat 40px center;font-size:16px;color:#444;font-weight:500;padding-left:26px;border:1px solid rgba(34, 34, 34, 0.4);margin-top:10px;} .scroll_right .btn_toggle{width:48px;height:120px;position:absolute;top:15px;left:-48px;background:#d71419;cursor:pointer;background-size:100% auto;box-sizing:border-box;border-radius:16px 0 0 16px;text-align: center;margin:0;} .scroll_right .btn_toggle span{font-size:17px;color:#fff;font-weight:500;letter-spacing:-0.51px;line-height:20px;display: block;width:100%;height:100%;box-sizing:border-box;padding-top:22px;} .scroll_right .btn_top{width:50px;height:50px;box-sizing:border-box;background:#222 url('../images/da_image/top-arw.png')no-repeat center;border-radius:100%;box-shadow:0 3px 7px 0 rgba(0,0,0,0.35);border:none;position:fixed;bottom:20px;right:20px;cursor:pointer;} .scroll_right .btn_top span{font-size:0;} /*230113 수정*/ .scroll_right .btn_top.btn_back{font-size:0; bottom:80px; background:#d71419; } .scroll_right .btn_top.btn_back:before{position:absolute; content:''; width:15px; height:21px; top:50%; left:50%; background:url('../images/da_image/top-arw.png')no-repeat center; transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) rotate(-90deg);} /*230310 추가*/ .scroll_right .btn_top.btn_link{border:1px solid #222; background:#fff url('../images/da_image/link-icon.png') no-repeat center; font-size:0; bottom:140px;} /*230404 추가*/ /*quick pop*/ #layer_Dim{width:100%;height:100%;position: fixed;top:0;left:0;z-index:1020;background:rgba(0,0,0,0.6);} .quick_pop{position: fixed;right:21%;top:23%;z-index:1032;} .quick_pop .pop_box{position: relative;width:420px;box-sizing:border-box;border-radius:10px;box-shadow:0 10px 40px 0 rgba(0,0,0,0.35);overflow:hidden;} .quick_pop .pop_title{width:100%;box-sizing:border-box;border-radius:10px 10px 0 0;background:#222;position: relative;padding:16.5px 20px 16.5px 20px;} .quick_pop .pop_title h3{display: inline-block;vertical-align: top;font-size:18px;color:#fff;font-weight:400;letter-spacing:-0.54px;} .quick_pop .pop_close{width:20px;height:20px;position: absolute;top:16.5px;right:20px;} .quick_pop .pop_close a{display: block;width:100%;height:100%;position: relative;} .quick_pop .pop_close a span{display: inline-block;box-sizing:border-box;width:100%;height:1px;background:#fff;position: absolute;top:50%;left:0;} .quick_pop .pop_close a span:nth-child(1){transform:rotate(45deg);} .quick_pop .pop_close a span:nth-child(2){transform:rotate(-45deg);} .quick_pop .pop_content{box-sizing:border-box;border:1px solid #ccc;border-top:none;height:420px;background:#fff;} .quick_pop .pop_content textarea{width:100%;height:100%;overflow-y:auto;outline:none;border:none;font-size:15px;color:#777;font-weight:400;letter-spacing:-0.45px;line-height:28px;padding:24px 24px 24px 24px;box-sizing:border-box;} /*메인, 견적문의*/ .quick_pop.main_quick_pop{right:50%;transform:translate(50%);} .quick_pop.main_quick_pop .pop_box{width:700px;} #footer {} #footer .ft_lnb {background:#21242d;padding:66px 0 0 0;} #footer .ft_lnb .lnb_logo {width:32%;max-width:480px;} #footer .ft_lnb .lnb_logo h2 {text-align:left;padding:4px 0 20px 0;} #footer .ft_lnb .lnb_logo h2 a {display:block;} #footer .ft_lnb .lnb_logo h2 img {width:auto;height:19px;} #footer .ft_family{position: relative;display: inline-block;} #footer .ft_family dt{color: #fff;border: 1px #888 solid;outline: 0;padding: 0;width: 168px;line-height: 38px;font-size: 13px;font-weight: 300;box-sizing: border-box;text-decoration: none;position: relative;z-index: 1;cursor:pointer;text-align: left;padding-left:21px;} #footer .ft_family dt:before{width:6px;height:6px;content:"";border:1px solid #fff;border-width:1px 1px 0 0;transform:rotate(135deg);position: absolute;right:22px;top:13px;} #footer .ft_family dt.on:before{transform:rotate(-45deg);top:18px;} #footer .ft_family dd{position: absolute;top:100%;left:0;width:100%;display: none;z-index:10;} #footer .ft_family dd ul{background:#fff;box-sizing:border-box;padding:10px 10px;} #footer .ft_family dd ul li a{font-size:13px;color:#21242d;font-weight:400;line-height:30px;} #footer .ft_lnb dl.lnb_box {} #footer .ft_lnb dl.lnb_box dt {box-sizing:border-box;position:relative;padding:0 0 0 60px;line-height:16px;height:16px;text-align:left;color:#fff;font-size:12px;font-weight:400;} #footer .ft_lnb dl.lnb_box dt:before {content:"";display:inline-block;width:40px;height:1px;background:#fff;position:absolute;left:0;top:50%;} #footer .ft_lnb dl.lnb_box dd {padding:27px 0 0 0;line-height:25px;text-align:left;} #footer .ft_lnb dl.lnb_box dd, #footer .ft_lnb dl.lnb_box dd a {color:#fff;font-size:14px;font-weight:300;} #footer .ft_lnb dl.lnb_box .ff_ubun {font-size:15px;letter-spacing:0.8px;} #footer .ft_lnb dl.lnb_call dd {} #footer .ft_lnb dl.lnb_call {width:203px;} #footer .ft_lnb dl.lnb_mail {width:234px;} #footer .ft_lnb dl.lnb_bank {width:246px;} #footer .ft_lnb dl.lnb_bank dd a{display: inline-block;background: none;color: #fff;border: 1px #888 solid;outline: 0;margin:10px 0 0;padding: 0;width: 168px;line-height: 38px;font-size: 14px;font-weight: 300;box-sizing: border-box;text-align: center;text-decoration: none;position: relative;z-index: 1;} #footer .ft_lnb dl.lnb_quick {width:97px;} #footer .ft_copy {background:#21242d;padding:44px 0 30px 0;} #footer .ft_copy .ft_copy_top {position:relative;text-align:left;border-top:1px #4d5057 solid;padding-top:27px;padding-right:170px;box-sizing:border-box;} #footer .ft_copy .ft_copy_top, #footer .ft_copy .ft_copy_top span {vertical-align:top;line-height:22px;color:#b1b1b1;font-size:14px;font-weight:400;letter-spacing:0.1px;} #footer .ft_copy .ft_copy_top span {display:inline-block;padding:0 9px;} #footer .ft_copy address {line-height:22px;font-style:normal;color:#b1b1b1;font-size:14px;font-weight:400;padding-top:20px;opacity:0.8;} #footer .ft_copy .ft_esc {position:absolute;right:0;top:20px;} #footer .ft_copy .ft_esc img {width:64px;} .hd_pdf_down {text-indent:-16px;display: inline-block;background: none;color: #fff;border: 1px #888 solid;outline: 0;margin: 30px 0 0;padding: 0;width:168px;line-height: 38px;font-size: 13px;font-weight: 300;box-sizing: border-box;text-align: center;text-decoration:none;position:relative;z-index:1;} .hd_pdf_down:after {width:8px;height:100%;background:url(../image/common/icon_about_down_wh.png) no-repeat 50% 50%;background-size:100% auto;left: calc(50% + 54px);position:absolute;top:48%;transform:translateY(-50%);display:inline-block;content:"";} @media only screen and (max-width:1375px) { #header .hd_lnb .hd_cate li {} #header .hd_lnb .hd_cate li a {font-size:16px;padding:0 4px;} } @media only screen and (max-width:1295px) { #footer .ft_copy .ft_esc {right:15px;} } /*─────────────────────────────────────────────────────────── SUB ───────────────────────────────────────────────────────────*/ /* contact */ .input_wrap {position:relative;margin-bottom:0px;height:auto;border-bottom:1px solid #000000;padding:3px 0;} .input_wrap:after {display:block;clear:both;content:'';} .input_wrap.ov {border-color:#e70012;} .input_wrap p {float:left;width:calc(33.33% - 40px);font-size:16px;color:#333333;font-weight:500;line-height:50px;white-space:nowrap;} .input_wrap p.required:after {display:inline;padding-left:5px;font-size:16px;color:#e70012;font-weight:bold;line-height:50px;content:'*';} .input_wrap input[type="text"], .input_wrap input[type="number"], .input_wrap input[type="button"], .input_wrap input[type="submit"], .input_wrap button, .input_wrap select {-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0 none;float:left;width:calc(66.66% + 40px);height:50px;background:none;border:0 none;outline:0 none;font-size:16px;color:#333333;box-sizing:border-box;padding-left:20px;} .input_wrap input[type="text"], .input_wrap input[type="number"] {background:#eeeeee;height:30px;margin-top:10px;padding-left:10px;box-sizing:border-box;} .input_wrap input[type="text"]#file_txt {padding-right:150px;} .input_wrap input:-ms-clear {display:none;} .input_wrap input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */color:#aaaaaa;opacity:1; /* Firefox */} .input_wrap input:-ms-input-placeholder { /* Internet Explorer 10-11 */color:#aaaaaa;} .input_wrap input::-ms-input-placeholder { /* Microsoft Edge */color:#aaaaaa;} .input_wrap button.btn {padding:0 0 0 0;margin-top:10px;width:70px;height:30px;background:#ffffff;border:1px solid #333333;font-size:13px;color:#333333;text-align:center;} .input_wrap.type_phone select {position:absolute;top:0;right:calc(66.66% + 40px);width:60px;height:50px;background:none;background:url('../image/sub/select_arr.png') no-repeat right center;border:0 none;outline:0 none;font-size:16px;color:#999999;font-weight:bold;cursor:pointer;-webkit-appearance:none; -moz-appearance:none; appearance:none; /* 브라우저별 기본 스타일링 제거 */} .input_wrap.type_phone input[type="text"], .input_wrap.type_phone input[type="number"] {width: calc(21.9%);text-align:center;float: inherit;vertical-align: top;} .input_wrap.type_phone span {display: inline-block;/* float:left; */width:20px;text-align:center;line-height: 50px;font-size:16px;color:#999999;} .input_wrap.type_mail input[type="text"] {padding:0 10px;width:calc(33.33% + 10px);text-align:center;} .input_wrap input#email1, .input_wrap input#email2 {width:140px;box-sizing:border-box;} .input_wrap select {width:140px;height: 31px;line-height: 25px;margin-left:10px;padding-left:10px;margin-top: 10px;border:1px solid #ccc;} .input_wrap.type_mail span {display:block;float:left;width:20px;text-align:center;line-height:50px;font-size:16px;color:#999999;} .input_wrap.type_textarea {height:auto;border:0 none;border-top:1px #000 solid;} .input_wrap.type_textarea textarea {float:left;padding:20px;width:100%;height:150px;background:#eeeeee;border:0 none;outline:0 none;box-sizing:border-box;font-size:13px;color:#333333;line-height:20px;} .input_wrap.type_textarea .prvtbox {float:left;padding:20px;width:100%;height:150px;background:#eeeeee;border:0 none;outline:0 none;box-sizing:border-box;font-size:13px;color:#333333;line-height:20px;white-space:pre-line;overflow-y:scroll;} .input_wrap.type_check .chechbox {float:right;text-align: right;width:auto;} .input_wrap.type_check .chechbox label {font-size:13px;color:#333333;} .input_wrap.type_check .chechbox label input[type="checkbox"], .input_wrap.type_check .chechbox label input[type="radio"] {margin-right:5px;} .input_wrap.type_check .chechbox label input[type="text"] {float:none;margin:0 10px 0 0;padding:0 0 0 0;width:18px;height:18px;border:1px solid #333333;} .input_wrap.type_captcha {border:0 none;} .input_wrap.type_captcha .captha_box {/* position:absolute; *//* top:0; *//* left:0; */} .input_wrap.type_captcha .captha_box p {width:auto;padding-right:10px;box-sizing:border-box;} .input_wrap.type_captcha .captha {float:left;margin:10px 10px 0 0;width:100px;height:30px;background:#cccccc;} .input_wrap.type_captcha input[type="text"], .input_wrap.type_captcha input[type="number"] {width:100%;padding-left:300px;} .input_wrap.type_file {} .input_wrap.type_file .clear {position:relative;z-index:1;} .input_wrap.type_file button.btn {position:absolute;top:0;right:0;} .input_wrap.type_file button.btn#resetFile {right:75px;margin-right:0 !important;} .input_wrap.type_loc p > button.btn {position:absolute;right:0;} .input_wrap.type_loc input[type="text"], .input_wrap.type_date input[type="text"] {width:calc(66.66% - 40px);} .input_wrap.type_date p {position:relative;} .input_wrap.type_date button.date {position:absolute;top:14px;right:0;width:24px;height:24px;background:url('../image/sub/form_cal.png') no-repeat center center;} .form_submit {padding:30px 0 100px;} .form_submit input {width:220px;height:55px;background:#333333;border:0 none;font-size:16px;color:#ffffff;cursor:pointer;} .form_submit .form_info_txt {font-size:13px;font-weight:400;color:#e70012;line-height:20px;padding:20px 0 0;white-space:normal;word-break:keep-all;word-wrap:break-word;} .form_submit .form_info_txt br {display:none;} @media only screen and (max-width:900px) { .form_submit .form_info_txt {text-align:center;} } @media only screen and (max-width:385px) { .form_submit .form_info_txt br {display:inline-block;} } /*─────────────────────────────────────────────────────────── MAIN 190514 ───────────────────────────────────────────────────────────*/ .main_cont_wrap {overflow:hidden;} .main_cont_wrap:after {} .sub_cont.portfolio figure{width:100%;margin:0;position: relative;} .sub_cont.portfolio figcaption{position: absolute;width: 1px;height: 1px;clip: rect(0 0 0 0);margin: -1px;overflow: hidden;} /* 메인 비주얼 영역 */ .main_visual_wrap {position:relative;z-index:5;} .main_visual_wrap .main_scroll {text-align:center;} .main_visual_wrap .main_scroll a {padding:32px 21px 40px;text-align:center;font-size:12px;line-height:12px;color:#333333;border-radius:100%;background:#fff url('../images/da_image/main_scroll_arw.png') no-repeat center 51px;display:inline-block;margin:-42px auto 0;position:relative;z-index:1;} .main_visual_bnr {width:100%;min-width:1200px;margin:0;height:820px;position:relative;} .main_visual_bnr li {height:820px;position: relative;} .main_visual_bnr .slick-slide {overflow:hidden;position:relative;text-align:center;height:820px;} .main_visual_bnr .slick-slide .img {display:block;height:100%;margin:0 auto;text-align:center;position:absolute;left:0;top:0;outline:0;width:100%;z-index:5;background-size:cover;background-position:center;background-repeat:no-repeat;transition:all 4s;transform-origin: center;} .main_visual_bnr .slick-slide > img {display:inline-block;height:auto;width:100%;max-width:1920px;} .main_visual_bnr .slick-arrow {display:inline-block;position:absolute;top:50%;margin-top:0;text-indent:-9999px;width:100px;height:100px;z-index:10;overflow:hidden;line-height:48px;opacity:1;transition:0.4s;} .main_visual_bnr .slick-arrow:after {content:'';display:block;width:56px;height:56px;border:1px solid #aaa;border-width:2px 2px 0 0;margin:20px auto 0;transform-origin:center;} .main_visual_bnr .slick-arrow.slick-prev {left:50%;margin-left:-780px;transform:translate(-0, -50%);background:url("../images/skin/ico_visual_prev.png") no-repeat;} .main_visual_bnr .slick-arrow.slick-prev:after {transform:rotate(-135deg);margin:-44px auto 0;} .main_visual_bnr .slick-arrow:hover:after {border-color:#fff;} .main_visual_bnr .slick-arrow.slick-next {right:50%;margin-right:-780px;transform:translate(0, -50%);background:url("../images/skin/ico_visual_next.png") no-repeat;} .main_visual_bnr .slick-arrow.slick-next:after {transform:rotate(45deg);margin:-44px auto 0;} .main_visual_bnr .auto_control {display:none;/*display:block;*/ position:absolute;right:20px;bottom:20px;font-size:0px;} .main_visual_bnr .auto_control a {display:inline-block;width:auto;height:auto;font-size:25px;font-weight:bold;margin-left:10px;text-shadow:#ffffff 0px 0px 5px;} .main_visual_bnr .auto_control a.on {color:#fff;text-shadow:#000 0px 0px 5px;} .main_visual_bnr .txt {position:absolute;left: 50%;top:50%;width: 1280px;text-align:left;transform: translate(0, -50%);margin-top: -13px;z-index: 5;margin-left: -640px;} .main_visual_bnr .txt .logo{margin-bottom:48px;} .main_visual_bnr .txt em, .main_visual_bnr .txt strong, .main_visual_bnr .txt p, .main_visual_bnr .txt .link {display:block;color:#fff;} .main_visual_bnr .txt em {font-size:28px;line-height:1;} .main_visual_bnr .txt strong {font-size:72px;line-height:.8;margin-top:40px;font-family:'Noto Sans KR';} .main_visual_bnr .visual_new01 .txt{top:45%;} .main_visual_bnr .visual_new01 .txt strong{font-size:60px;line-height:84px;} .main_visual_bnr .visual_new01 .txt p{font-size:24px;line-height:36px;} .main_visual_bnr .txt p {font-size:18px;line-height:1.5;margin-top:44px;color:#fff;} .main_visual_bnr .txt .link {display:inline-block;width:160px;margin-top:55px;font-size:16px;height:60px;line-height:60px;border-radius:30px;border:1px solid #fff;color:#fff;box-sizing: border-box;text-align: center;/* background: url('../images/da_image/visual_arw_white.png') no-repeat 110px; */font-family:'Roboto';background:none;} .main_visual_bnr .txt .link:hover{background:#fff; border:1px solid #fff;transition:.2s!important;color:#333;}/* url('../images/da_image/visual_arw.png') no-repeat 110px */ .main_visual_bnr .txt_box{width:auto;transform:translate(-50%);position:absolute;left:50%;top:26%;text-align:center;width:1280px;z-index:7;} .main_visual_bnr .txt_box em {display:block;text-align:center;margin:0 auto;} .main_visual_bnr .txt_box em img {text-align:center;display:inline-block;} .main_visual_bnr .txt_box p {margin:28px 0 22px;font-size:60px;line-height:1.28;font-weight:100;color:#fff;} .main_visual_bnr .txt_box p b {font-weight:700;display:block;} .main_visual_bnr .active .txt_box .sub_txt {font-size:20px;line-height:1.5;font-weight:300;color:#fff;} .main_visual_bnr .txt_box span.btn_more {display:inline-block;vertical-align:top;font-size:15px;color:#333;font-weight:400;width:150px;height:45px;line-height:40px;background:url('../image/main/visual_more.png')no-repeat;background-position:110px 15px;background-color:transparent;box-sizing:border-box;border:2px solid #333;border-radius:22.5px;margin-top:80px;padding-left:24px;} .main_visual_bnr .visual02 .txt em, .main_visual_bnr .visual02 .txt strong, .main_visual_bnr .visual02 .txt p{color:#000;} .main_visual_bnr .visual02 .txt .link {border:1px solid #000; color:#000;} .main_visual_bnr .visual04 .txt em, .main_visual_bnr .visual04 .txt strong, .main_visual_bnr .visual04 .txt p{color:#000;} .main_visual_bnr .visual04 .txt .link {border:1px solid #000; color:#000;} .main_visual_bnr .scroll_down{position: absolute;left:50%;bottom:20px;cursor:pointer;transform:translate(-50%);} .main_visual_bnr .scroll_down span{display: inline-block;box-sizing:border-box;font-size:14px;color:#fff;font-weight:400;position: relative;padding-bottom:39px;font-family:'Roboto';text-transform:uppercase;} .main_visual_bnr .scroll_down span:before{width:16px;height:30px;content:"";position: absolute;bottom:0;left:calc(50% - 7.5px);box-sizing:border-box;border:1px solid #fff;border-radius:8px;} .main_visual_bnr .scroll_down span:after{width:4px;height:4px;content:"";background:#fff;box-sizing:border-box;border-radius:100%;position: absolute;left:calc(50% - 1px);bottom:21px;animation:scroll 1s ease-in Infinite Alternate;} @keyframes scroll{ 0%{bottom:21px;} 100%{bottom:5px} } .main_visual .visual_control {left:50%;position:absolute;z-index:5;margin:0 auto;padding:0;text-align:center;margin-left:-630px;bottom:136px;font-size:0;} .main_visual .progressBarContainer {transition:all 0.3s;width:368px;counter-reset:section;} .main_visual .progressBarContainer:after {clear:both;content:"";display:block;} .main_visual .progressBarContainer .progress_cut {width:calc(33.3% - 5px);height:2px;transition:all 0.3s;padding:0;text-align:center;outline:0;border:0;margin:0;box-sizing:border-box;display:inline-block;float:left;vertical-align:top;position:relative;z-index:1;cursor:pointer;} .main_visual .progressBarContainer .progress_cut::before {display:block;margin-bottom:8px;font-size:0;color:#333333;counter-increment:section;content:"0"counter(section);width:100%;height:14px;text-align:left;position:absolute;left:0;bottom:0;font-weight:600;transition:all 0.2s;} .main_visual .progressBarContainer .progress_cut.on::before {font-size:14px;} .main_visual .progressBarContainer .progress_cut + .progress_cut {margin-left:4px;} .main_visual .progressBarContainer .progress_cut em {height:inherit;line-height:inherit;font-size:inherit;width:100%;outline:0;padding:0;border:0;margin:0;box-sizing:border-box;color:#666;vertical-align:top;z-index:5;display:inline-block;} .main_visual .progressBarContainer .progress_cut .progressBar {width:100%;height:100%;overflow:hidden;position:absolute;left:0;top:0;bottom:0;z-index:-1;background:#a6a4a0;margin:0;padding:0;cursor:pointer;} .main_visual .progressBarContainer .progress_cut .progressBar .inProgress {height:inherit;} .main_visual .progressBarContainer .progress_cut.on em {color:#fff;} .main_visual .progressBarContainer .progress_cut.on .progressBar {background:#a6a4a0;} .main_visual .progressBarContainer .progress_cut.on .progressBar .inProgress {background:#2dbabc;} .main_visual .progressBarContainer, .main_visual .pause {display:inline-block;vertical-align:middle;} .main_visual .pause {width:9px;height:9px;border:3px solid #333;border-width:0 3px;margin-left:4px;box-sizing:border-box;} @media only screen and (max-width:1400px){ .main_visual_bnr .txt{width:100%;padding:0 60px;box-sizing:border-box;} } /*포트폴리오 230221*/ .main_title{text-align: center;} .main_title h3{font-size:50px;color:#222;font-weight:500;letter-spacing:-1px;position: relative;padding-top:20px;} .main_title h3:before{width:10px;height:10px;content:"";box-sizing:border-box;border-radius:100%;background:#2846b2;position: absolute;top:0;left:50%;transform:translate(-50%);} .main_title p{font-size:22px;color:#333;font-weight:400;letter-spacing:-0.4px;margin-top:9px;font-family:'Noto Sans KR';} .main_title p strong{font-size:inherit;color:#2846b2;font-weight:500;letter-spacing:inherit;} .main_w_custom{width:1280px;margin:0 auto;box-sizing:border-box;position: relative;} .main_more_box{text-align: center;} .main_more_box a{display: inline-block;box-sizing:border-box;vertical-align: top;width:300px;height:70px;line-height:66px;border:1px solid #555;background:#fff;font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;transition:all 0.3s;} .main_more_box a:hover{background:#2846b2;border:1px solid #2846b2;color:#fff;transition:all 0.3s;} .main_portfolio{margin-top:79px;position: relative;} .main_portfolio > a{position: absolute;top:-150px;} .main_portfolio .portfolio_list{font-size:0;position: relative;margin-top:45px;} .main_portfolio .portfolio_list:after{clear:both;content:"";display: block;} .main_portfolio .portfolio_list:before{content:"PORTFOLIO";font-size:120px;color:#fff;font-weight:700;text-shadow : -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;position: absolute;left:-429px;top:243px;transform:rotate(-90deg);font-family:'Inter';letter-spacing:-2px;opacity:0.18;} .main_portfolio .portfolio_list li{float: left;display: inline-block;box-sizing:border-box;margin:0 0 35px 40px;width:calc(33.3333% - 27px);} .main_portfolio .portfolio_list li:nth-of-type(3n+1){clear:both;float: left;margin-left:0;} .main_portfolio .portfolio_list li a{display: block;width:100%;} .main_portfolio .portfolio_list li .thumb{width:100%;height:0;padding-bottom:70%;position: relative;overflow:hidden;box-sizing:border-box;border-radius:10px;} .main_portfolio .portfolio_list li .thumb img{width:100%;} .main_portfolio .portfolio_list li:hover .thumb .ov_box{display: block;} .main_portfolio .portfolio_list li .thumb .ov_box{width:100%;height:100%;background:rgba(0,0,0,0.4);position: absolute;top:0;left:0;display: none;} .main_portfolio .portfolio_list li .thumb .ov_box .plus{width:70px;height:70px;box-sizing:border-box;border-radius:100%;background:#2846b2;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .main_portfolio .portfolio_list li .thumb .ov_box .plus:before{width:24px;height:2px;content:"";background:#fff;position: absolute;top:34px;left:23px;} .main_portfolio .portfolio_list li .thumb .ov_box .plus:after{width:2px;height:24px;content:"";background:#fff;position: absolute;top:23px;left:34px;} .main_portfolio .portfolio_list li .txt_box{display:flex;justify-content:space-between;margin-top:12px;} .main_portfolio .portfolio_list li .txt_box *{font-family:'Noto Sans KR';} .main_portfolio .portfolio_list li .txt_box .title p{font-size:26px;color:#333;font-weight:400;letter-spacing:-0.52px;margin-bottom:3px;} .main_portfolio .portfolio_list li .txt_box .title span{font-size:18px;color:#444;font-weight:300;letter-spacing:-0.36px;} .main_portfolio .portfolio_list li .txt_box .icon{margin-top:7px;} .main_portfolio .portfolio_list li .txt_box .logo, .main_portfolio .portfolio_list li .txt_box .rank{display: inline-block;box-sizing:border-box;vertical-align:middle;} .main_portfolio .portfolio_list li .txt_box .rank{height:22px;line-height:22px;border-radius:11px;background:#000;font-size:13px;color:#fff;font-weight:400;letter-spacing:-0.26px;padding:0 7px;margin-left:7px;} .main_portfolio .main_more_box{margin-top:20px;} @media only screen and (max-width:1600px){ .main_portfolio .main_w_custom{width:100%;padding:0 70px 0 130px;} .main_portfolio .portfolio_list:before{font-size:80px;left:-280px;top:166px;} .main_portfolio .portfolio_list li{margin:0 0 35px 30px;width:calc(33.3333% - 20px);} } @media only screen and (max-width:1300px){ .main_w_custom{width:100%;padding-right:30px;padding-left:30px;} .main_portfolio .main_w_custom{padding:0 30px 0 90px;} .main_portfolio .portfolio_list:before{font-size:60px;left:-210px;top:120px;} .main_portfolio .portfolio_list li .txt_box .title p{font-size:22px;} .main_portfolio .portfolio_list li .txt_box .title span{font-size:15px;} .main_portfolio .portfolio_list li .txt_box .rank{font-size:11px;} } /*고객의 성공*/ .main_success{margin-top:120px;box-sizing:border-box;background:url('../image/main/main-about-bg.jpg')no-repeat center;background-size:cover;text-align: center;padding:90px 0 95px;} .main_success h3{font-size:36px;color:rgba(255, 255, 255, 0.8);font-weight:300;letter-spacing:-1.8px;} .main_success h3 strong{font-size:inherit;color:inherit;font-weight:500;letter-spacing:inherit;} .main_success .success_list{font-size:0;margin-top:48px;} .main_success .success_list li{width:20%;display: inline-block;box-sizing:border-box;vertical-align: top;} .main_success .success_list li .icon{height:60px;display: flex;align-items: center;justify-content: center;margin-bottom:15px;} .main_success .success_list li span{display: block;font-size:50px;color:#fff;font-weight:600;font-family:'Inter';} .main_success .success_list li span strong{font-size:inherit;color:inherit;font-weight:inherit;font-family:inherit;} .main_success .success_list li span em{font-size:26px;color:#fff;font-weight:400;} .main_success .success_list li p{font-size:18px;color:rgba(255, 255, 255, 0.7);font-weight:400;margin-top:7px;} /*유지보수*/ .main_cs{position: relative;padding-top:106px;} .main_cs:before{width:932px;height:480px;content:"";background:#2846b2;position: absolute;left:0;top:0;box-sizing:border-box;border-radius:0 0 300px 0;} .main_cs .main_title{text-align:left;} .main_cs .main_title h3, .main_cs .main_title p{color:#fff;} .main_cs .main_title h3{padding:0;letter-spacing: -2.5px;} .main_cs .main_title h3:before{display: none;} .main_cs .main_title p{font-family:'Noto Sans KR';color:rgba(255,255,255,0.8);letter-spacing:-1.3px;font-weight:300;margin-top:19px;line-height:32px;} .main_cs .cs_img{font-size:0;position: relative;margin-top:54px;} .main_cs .cs_img:before{width:375px;height:294px;content:"";background:url('../image/main/main-as-icon-01.png')no-repeat center;position: absolute;top:-234px;right:-91px;} .main_cs .cs_img li{display: inline-block;box-sizing:border-box;vertical-align: top;width:calc(33.3333% - 27px);position: relative;z-index:2;} .main_cs .cs_img li + li{margin-left:40px;} .main_cs .cs_img li .img{width:100%;box-sizing:border-box;border-radius:10px;box-shadow:0 0 29px 0 rgba(0, 0, 0, 0.14);overflow:hidden;} .main_cs .cs_img li .txt_box{margin-top:23px;} .main_cs .cs_img li .txt_box p{font-size:26px;color:#333;font-weight:500;letter-spacing:-0.52px;margin-bottom:6px;} .main_cs .cs_img li .txt_box span{font-size:18px;color:#333;font-weight:400;letter-spacing:-0.7px;font-family:'Noto Sans KR';} .main_cs .cs_table{width:100%;box-sizing:border-box;overflow:hidden;font-size:0;display: table;} .main_cs .cs_table dt, .main_cs .cs_table dd{box-sizing:border-box;vertical-align: top;display: table-cell;padding:49px 0;} .main_cs .cs_table dt{width:310px;background:#eee;padding-left:49px;font-size:34px;color:#333;font-weight:500;letter-spacing:-0.68px;line-height:44px;border-radius:10px 0 0 10px;} .main_cs .cs_table dd{padding-left:58px;background:#fff;border:1px solid #ddd;border-width:1px 1px 1px 0;border-radius:0 10px 10px 0;} .main_cs .cs_list{margin-top:66px;margin-bottom:30px;} .main_cs .cs_list dd{padding-bottom:29px;} .main_cs .cs_list dd ul{font-size:0;text-align:left;position: relative;} .main_cs .cs_list dd ul:after{clear:both;content:"";display: block;} .main_cs .cs_list dd ul li{display: inline-block;box-sizing:border-box;vertical-align: top;width:50%;margin-bottom:20px;} .main_cs .cs_list dd ul li:nth-child(-n+4){float: left;position: absolute;left:0;} .main_cs .cs_list dd ul li:nth-child(1){top:0;} .main_cs .cs_list dd ul li:nth-child(2){top:50px;} .main_cs .cs_list dd ul li:nth-child(3){top:100px;} .main_cs .cs_list dd ul li:nth-child(4){top:150px;} .main_cs .cs_list dd ul li:nth-child(n+5){float:right;clear:both;} /* .main_cs .cs_list dd ul li:nth-of-type(2n){padding-left:6px;} */ .main_cs .cs_list dd ul li .status{display: inline-block;vertical-align: top;box-sizing:border-box;border-radius:15px;width:78px;height:30px;line-height:30px;text-align: center;font-size:16px;color:#fff;font-weight:400;letter-spacing:-0.32px;} .main_cs .cs_list dd ul li .status1{background:#2846b2;} .main_cs .cs_list dd ul li .status2{background:#95141a;} .main_cs .cs_list dd ul li .status3{background:#888;} .main_cs .cs_table dd ul li .title{display: inline-block;vertical-align: top;font-size:18px;color:#333;font-weight:400;letter-spacing:-0.36px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Noto Sans KR';line-height:26px;padding-left:15px;} .main_cs .cs_list dd ul li .title{width:54.5%;} .main_cs .cs_table dd ul li .date{font-size:16px;color:#666;font-weight:400;letter-spacing:-0.32px;} .main_cs .contract_list dt{padding:33px 0 33px 49px;} .main_cs .contract_list dd{padding:33px 50px 33px 60px;vertical-align: middle;} .main_cs .contract_list dd:after{clear:both;content:"";display: block;} .main_cs .contract_list dd ul{display: inline-block;vertical-align: top;width:80%;} .main_cs .contract_list dd ul li .title, .main_cs .contract_list dd ul li .date{line-height:40px;} .main_cs .contract_list dd ul li .title{padding-left:40px;width:85%;} .main_cs .contract_list dd .arw_box{display: inline-block;box-sizing:border-box;width:90px;height:40px;font-size:0;float: right;} .main_cs .contract_list dd .arw_box button{width:40px;height:40px;box-sizing:border-box;border-radius:100%;border:1px solid #ddd;background:#fff;font-size:0;position: relative;transition:all 0.5s;} .main_cs .contract_list dd .arw_box button:hover{background:#2846b2;border:1px solid #2846b2;transition:all 0.5s;} .main_cs .contract_list dd .arw_box .next{margin-left:10px;} .main_cs .contract_list dd .arw_box button:before{width:7px;height:7px;content:"";border:1px solid #aaa;border-width:1px 1px 0 0;display: block;position: absolute;left:15px;transition:all 0.5s;} .main_cs .contract_list dd .arw_box .prev:before{transform:rotate(-45deg);top:16px;} .main_cs .contract_list dd .arw_box .next:before{transform:rotate(135deg);top:13px;} .main_cs .contract_list dd .arw_box button:hover:before{border-color:#fff;transition:all 0.5s;} @media only screen and (max-width:1300px){ .main_cs .contract_list dd ul li .title{width:75%;} } /*장점*/ .main_ad{position: relative;background:#f3f7fb;box-sizing:border-box;margin-top:120px;padding:100px 0;overflow:hidden;} .main_ad:before{width:742px;height:742px;content:"";border:1px dashed #172447;position: absolute;bottom:-35.5%;right:-13%;opacity:0.12;box-sizing:border-box;border-radius:100%;} .main_ad:after{width:645px;height:645px;content:"";background:#172447;position: absolute;bottom:-30.7%;right:-10.5%;opacity:0.05;box-sizing:border-box;border-radius:100%;} .main_ad .ad_list{font-size:0;margin-top:45px;position: relative;z-index:2;} .main_ad .ad_list li{display:inline-block;width:calc(50% - 10px);box-sizing:border-box;background:#fff;box-shadow:0 0 29px 0 rgba(0, 0, 0, 0.14);margin:0 0 20px 20px;border-radius:10px;padding:41px 0 43px 70px;vertical-align: top;} .main_ad .ad_list li:nth-child(1){width:100%;margin-left:0;padding:55px 0 57px 70px;} .main_ad .ad_list li:nth-of-type(2n){margin-left:0;} .main_ad .ad_list li .ad_box{display:flex;align-items:center;} .main_ad .ad_list li .ad_box .txt{padding-left:54px;} .main_ad .ad_list li .ad_box .txt p{font-size:22px;color:#222;font-weight:500;letter-spacing:-0.44px;margin-bottom:9px;} .main_ad .ad_list li .ad_box .txt span{font-size:17px;color:#666;font-weight:300;letter-spacing:-0.34px;line-height:28px;font-family:'Noto Sans KR';letter-spacing:-0.6px;} @media only screen and (max-width:1250px){ .main_ad .ad_list li .ad_box .txt p{font-size:20px;} .main_ad .ad_list li .ad_box .txt span{font-size:15px;} } /*프로젝트*/ .main_project{box-sizing:border-box;background:url('../image/main/main-project-bg.jpg')no-repeat center;background-size:cover;padding:101px 0 101px;} .main_project .project_title{} .main_project .project_title:after{clear:both;content:"";display: block;} .main_project .project_title h3{font-size:50px;color:#fff;font-weight:500;letter-spacing:-2.5px;position: relative;display: inline-block;vertical-align: top;line-height:46px;} .main_project .project_title p{font-size:20px;color:rgba(255,255,255,0.8);font-weight:300;letter-spacing:-1px;display: inline-block;vertical-align: bottom;margin-left:25px;} .main_project .arw_box{display: inline-block;box-sizing:border-box;width:110px;height:50px;font-size:0;float: right;} .main_project .arw_box button{width:50px;height:50px;box-sizing:border-box;border-radius:100%;border:1px solid rgba(255,255,255,0.3);background:transparent;font-size:0;position: relative;transition:all 0.5s;} .main_project .arw_box button:hover{background:#fff;transition:all 0.5s;} .main_project .arw_box .next{margin-left:10px;} .main_project .arw_box button:before{width:7px;height:7px;content:"";border:1px solid #fff;border-width:1px 1px 0 0;display: block;position: absolute;top:20px;transition:all 0.5s;} .main_project .arw_box .prev:before{transform:rotate(-135deg);left:23px;} .main_project .arw_box .next:before{transform:rotate(45deg);right:23px;} .main_project .arw_box button:hover:before{border-color:#2846b2;transition:all 0.5s;} .main_project .project_list{width:calc(100% + 31px);margin-top:44px;} .main_project .project_list .slick-slide{position: relative;margin-right:31px;} .main_project .project_list .thumb img{width:100%;} .main_project .info{width:100%;box-sizing:border-box;background:rgba(0,0,0,0.5);border-radius:0 0 10px 10px;padding:27px 25px 27px 25px;} .main_project .info:after{clear:both;content:"";display: block;} .main_project .info p{font-size:20px;color:#fff;font-weight:400;letter-spacing:-1px;display: inline-block;vertical-align: top;line-height:24px;} .main_project .info .process{display: inline-block;box-sizing:border-box;width:54px;height:24px;line-height:24px;background:#cf2020;text-align: center;border-radius:12px;font-size:14px;color:#fff;font-weight:400;letter-spacing:-0.28px;float: right;} /*제공혜택*/ .main_benefit{box-sizing:border-box;padding:100px 0 120px;position: relative;} .main_benefit:before{width:495px;height:495px;content:"";box-sizing:border-box;border-radius:100%;background:#2846b2;position: absolute;bottom:-188px;right:-60px;animation:beneCircle2 2s ease-in Infinite Alternate;} .main_benefit .w_set:before{width:140px;height:140px;content:"";box-sizing:border-box;border-radius:100%;background:#f3f7fb;position: absolute;top:104px;left:-66px;animation:beneCircle1 2s ease-in Infinite Alternate;} .main_benefit .benefit_list{width:100%;box-sizing:border-box;border-radius:10px;box-shadow:0 0 54px 0 rgba(0,0,0,0.18);border:1px solid #ddd;display:flex;flex-wrap:wrap;text-align: center;margin-top:44px;position: relative;z-index:2;background:#fff;} .main_benefit .benefit_list li{display: inline-block;box-sizing:border-box;width:calc(100% / 4);padding:43px 0 36px;} .main_benefit .benefit_list li + li{border-left:1px solid #ddd;;} .main_benefit .benefit_list li:nth-of-type(4n+1){border-left:none;} .main_benefit .benefit_list li:nth-child(n+5){border-top:1px solid #ddd;} .main_benefit .benefit_list li .icon{height:77px;display: flex;align-items: center;justify-content: center;} .main_benefit .benefit_list li .icon img{vertical-align: middle;} .main_benefit .benefit_list li dl dt{display: inline-block;font-size:18px;color:#333;font-weight:500;letter-spacing:-0.36px;font-family:'Noto Sans KR';position: relative;margin-top:16px;padding:0 6px;} .main_benefit .benefit_list li dl dt.emp:before{width:100%;height:8px;content:"";background:#fd9c9c;opacity:0.4;position: absolute;bottom:1px;left:0;} .main_benefit .benefit_list li dl dt span{font-size:inherit;color:inherit;font-weight:inherit;position: relative;z-index:3;} .main_benefit .benefit_list li dl dd{font-size:16px;color:#666;font-weight:300;letter-spacing:-0.32px;line-height:24px;font-family:'Noto Sans KR';margin-top:8px;} @media only screen and (max-width:1600px){ .main_benefit:before{width:410px;height:410px;bottom:-108px;} } @media only screen and (max-width:1400px){ .main_benefit:before{width:320px;height:320px;bottom:-58px;} } /*고객사*/ #wrapper .main_partner_box{background:#f3f7fb;margin:0;box-sizing:border-box;padding:100px 0 100px;text-align: center;} #wrapper .main_partner .sub_partner_list .list_box li{border:none;border-radius:10px;box-shadow:0 5px 24px rgba(158,171,196,0.4);height:80px;overflow:hidden;background:#fff;} #wrapper .main_partner .partner_scl ul{margin:53px 0 0 0;} .main_partner .more{display: inline-block;box-sizing:border-box;background:transparent;border:1px solid #555;width:180px;height:70px;line-height:66px;font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;margin-top:50px;text-align: center;transition:all 0.5s;} .main_partner .more:hover{background:#2846b2;border:1px solid #2846b2;color:#fff;transition:all 0.5s;} /*견적문의*/ .main_visitor {position:relative;box-sizing:border-box;margin:105px auto 120px;} .sub_contact_wrap .main_visitor{margin-top:50px;} .main_visitor .title{box-sizing:border-box;} .main_visitor .title:after{clear:both;content:"";display: block;} .main_visitor .title h3{display: inline-block;font-size:50px;color:#222;font-weight:500;letter-spacing:-1px;} .main_visitor .title h3 span{font-size:20px;color:#666;font-weight:300;letter-spacing:-0.4px;display: inline-block;padding-left:10px;} .main_visitor .title .email_contact{display: inline-block;float: right;vertical-align:bottom;padding-left:34px;background:url(../image/main/envelope.png) no-repeat 0 50%;background-size:auto 14px;font-size:17px;color:#333;font-weight:500;font-family:'Roboto';margin-top:35px;} .main_visitor .title .email_contact strong{font-size:inherit;color:#777;font-weight:400;display: inline-block;margin-right:5px;} .main_visitor div.form {margin-top:24px;} .main_visitor div.form dl{} .main_visitor div.form dl.req_box{box-sizing:border-box;border-radius:10px;border:1px solid #2846b2;padding:30px 30px 26px 30px;} .main_visitor div.form dl dt{font-size:22px;color:#222;font-weight:400;letter-spacing:-0.44px;margin-bottom:15px;line-height:22px;} .main_visitor div.form dl dt strong{font-size:inherit;color:#2846b2;font-weight:inherit;} .main_visitor div.form dl dt span{display: inline-block;font-size:17px;color:#777;font-weight:400;letter-spacing:-0.34px;padding-left:10px;} .main_visitor .input_wrap {border:0;margin:0;box-sizing:border-box;vertical-align:top;display:inline-block;width:100%;padding-top:7.5px;padding-bottom:7.5px;line-height:40px;height:auto;} .main_visitor .input_wrap.form_w50 {width:48%;} .main_visitor .input_wrap.form_w50 + .input_wrap.form_w50 {margin-left:46px;} .main_visitor .input_wrap.form_w50 + .input_wrap.form_w50.form_clear {margin-left:0;} .main_visitor .input_wrap p, .main_visitor .input_wrap.type_phone span, .main_visitor .input_wrap input[type="text"], .main_visitor .input_wrap input[type="number"], .main_visitor .input_wrap button, .main_visitor .input_wrap select, .main_visitor .input_wrap.type_captcha .captha {vertical-align:top;display:inline-block;box-sizing:border-box;text-indent:0;margin:0;padding:0;font-weight:400;font-size:18px;height:50px;letter-spacing:-0.36px;} .main_visitor .input_wrap p, .main_visitor .input_wrap .input_box{display:inline-block;vertical-align: middle;} .main_visitor .input_wrap p{width:100px;margin-right:24px;} .main_visitor .input_wrap p.required:after {font-weight:700;font-size:18px;line-height:50px;} .main_visitor .input_wrap p.required.req_dn:after{display: none;} /* .main_visitor .input_wrap input{padding-left:24px;width:calc(100% - 124px);} */ .main_visitor .input_wrap input[type="text"], .main_visitor .input_wrap input[type="number"], .main_visitor .input_wrap select {border:1px solid #ccc;background:#fff;line-height:50px;height:50px;padding-left:15px;padding-right:5px;border-radius:5px;width:100%;font-size:17px;} .main_visitor .input_wrap input#name, .main_visitor .input_wrap input#company{width:calc(100% - 124px);} .main_visitor .input_wrap input[type="text"]:focus, .main_visitor .input_wrap input[type="number"]:focus, .main_visitor .input_wrap select:focus{border:1px solid #333;color:#333;} .main_visitor .input_wrap input[type="text"]::placeholder, .main_visitor .input_wrap input[type="number"]::placeholder{color:#888;font-weight:300;} .main_visitor .input_wrap input[type="number"]::-webkit-outer-spin-button, .main_visitor .input_wrap input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .main_visitor .input_wrap select{background:#fff url('../images/da_image/right-sel-arw.png')no-repeat 90% center;cursor:pointer;} .main_visitor .input_wrap.type_phone span{margin:0 5px;} .main_visitor .input_wrap input#phone1, .main_visitor .input_wrap input#phone2, .main_visitor .input_wrap input#phone3 {width:calc(33.3333% - 64px);} .main_visitor .input_wrap.type_mail span{font-size:18px;color:#888;font-weight:400;letter-spacing:-0.36px;margin:0 10px;width:auto;} .main_visitor .input_wrap input#email1 {width:calc(23% - 2px);} .main_visitor .input_wrap input#email2 {width:22%;margin-right:15px;} .main_visitor .input_wrap select {width:25.4%;font-size: 16px;line-height: 17px;} .main_visitor .input_wrap.type_mail label{display: none;} .main_visitor div.form dl.cont_box{margin-top:36px;} .main_visitor dl.cont_box p{width:128px;} .main_visitor dl.cont_box .input_wrap .input_box{width:calc(100% - 152px);} .main_visitor .input_wrap.type_textarea textarea {box-sizing:border-box;vertical-align:top;text-indent:0;margin:0;border:1px solid #ccc;background:#fff;font-size:17px;padding:15px;height:100px;width:100%;border-radius:5px;color:#888;} .main_visitor .input_wrap.type_textarea textarea:focus{color:#333;border:1px solid #333;} .main_visitor .input_wrap.type_textarea p{line-height:100px;} .main_visitor .input_wrap.type_file{position: relative;} .main_visitor .input_wrap.type_file input[type="file"]{display: none;} .main_visitor .input_wrap.type_file .file_input{width:calc(31.2% - 2px) !important;border-radius:5px 0 0 5px;border-right:none;padding-right:20px;} .main_visitor .input_wrap.type_file label.btn{display: inline-block;padding: 0 0 0 0;box-sizing:border-box;width:110px;height:50px;line-height:50px;background:#777;border: 1px solid #777;border-radius:5px;font-size: 17px;color:#fff;text-align: center;cursor:pointer;margin-left:-10px;font-weight:300;} .main_visitor .input_wrap.type_file div.file_txt{display: inline-block;margin-left:10px;vertical-align: middle;margin-top:-4px;} .main_visitor .input_wrap.type_file div.file_txt p{font-size:16px;color:#777;font-weight:400;float:none;height:auto;width:auto;display: block;line-height:26px;letter-spacing:-0.32px;font-family:'Noto Sans KR';} .main_visitor .input_wrap.type_file div.file_txt strong{color:#333;font-weight:400;} .main_visitor .input_wrap.type_file .copy_link{display: inline-block;vertical-align: top;font-size:16px;color:#444;font-weight:400;border:1px solid #050001;height:28px;line-height:26px;box-sizing:border-box;border-radius:4px;width:106px;margin-left:5px;margin-top:12px;cursor:pointer;text-align: center;float: right;} .main_visitor .input_wrap button.date_select {float:none;width:24px;margin-top:6px;} .main_visitor .input_wrap.type_captcha .captha_box {position:static;} .main_visitor .input_wrap.type_captcha .captha {margin:0;color:red;text-align:center;font-weight:bold; letter-spacing:2px;margin-right:10px;line-height:40px;font-size:15px;} .main_visitor .input_wrap input[name="captcha"] {width:calc(28% - 100px);margin-right:10px;} .main_visitor .input_wrap.type_check {padding-top:0;} .main_visitor .form_submit {text-align:center;margin:0;padding:22px 0;margin-top:32.5px;background:#f5f5f5;box-sizing:border-box;border-radius:5px;} .main_visitor .form_submit #gCaptcha{display: inline-block;box-sizing:border-box;vertical-align:middle;} .main_visitor .form_submit input[type="chekbox"] {background:#333 url('../images/da_image/hd-contact.png')no-repeat 65% center;width:304px;height:76px;line-height:76px;margin-left:15px;box-sizing:border-box;padding-right:20px;font-size:18px;} .main_visitor .form_submit .chechbox{display: inline-block;vertical-align: middle;margin-left:40px;} .main_visitor .form_submit .chechbox label{font-size:18px;color:#444;font-weight:400;letter-spacing:-0.36px;} .main_visitor .form_submit #agreeThis{width:25px;height:25px;margin-right:12px;accent-color: #444;} .main_visitor .form_submit .main_visitor_btn{display: inline-block;font-size:15px;color:#777;font-weight:300;letter-spacing:-0.7px;margin-left:17px;} .main_visitor .btn_box{text-align: center;margin-top:50px;} .main_visitor .btn_box #sendBtn{display: inline-block;box-sizing:border-box;width:280px;height:80px;line-height:80px;box-shadow:0 0 51px 0 rgba(0, 0, 0, 0.34);background:#2846b2;font-size:24px;color:#fff;font-weight:500;letter-spacing:-0.96px;text-align:center;cursor:pointer;} @media only screen and (max-width:1350px){ .main_visitor div.form dl.req_box{padding: 16px 20px 20px 20px;} .main_visitor .input_wrap.form_w50{width:48%;} .main_visitor .input_wrap.form_w50 + .input_wrap.form_w50{margin-left:25px;} .main_visitor .input_wrap.type_file div.file_txt p{font-size:14px;} .main_visitor .input_wrap input#email1{width:calc(23% - 6px);} .main_visitor .input_wrap select{width:25.3%;} } @media only screen and (max-width:1300px){ .main_visitor .input_wrap input#email1{width:calc(23% - 8px);} .main_visitor .input_wrap input#email2{width:21%;} .main_visitor .input_wrap.type_file .copy_link{font-size:14px;width:90px;} } @media only screen and (max-width:1250px){ .main_visitor .input_wrap p{margin-right:15px;} .main_visitor .input_wrap input#name, .main_visitor .input_wrap input#company{width:calc(100% - 115px);} .main_visitor .input_wrap select{width:24.5%;} .main_visitor dl.cont_box .input_wrap .input_box{width:calc(100% - 150px);} } /*─────────────────────────────────────────────────────────── 홈페이지, 쇼핑몰, 상세페이지 ───────────────────────────────────────────────────────────*/ .sub_quick_container > div{position: relative;} .sub_quick_container > div > a{position: absolute;top:-80px;} @media only screen and (max-width:1600px){ .sub_quick_container .w_set{width:100%;padding:0 150px;} } /*좌측 퀵메뉴*/ .left_quick{position:fixed;left:0;top:42.8%;z-index:10;transition:all 0.5s;} .left_quick ul{} .left_quick ul li{width:120px;height:40px;box-sizing:border-box;border-radius:0 6px 6px 0;background:rgba(0,0,0,0.8);transition:width 0.5s;cursor:pointer;} .left_quick ul li + li{margin-top:5px;} .left_quick ul li span{display: block;width:100%;height:100%;box-sizing:border-box;position: relative;text-align: left;padding-left:12px;line-height:40px;font-size:16px;color:#fff;font-weight:400;} .left_quick ul li span:before{width:6px;height:6px;content:"";border:1px solid #fff;border-width:1px 1px 0 0;transform:rotate(45deg);position: absolute;right:30px;top:17px;opacity:0;transition:all 0.5s;} /*on*/ .left_quick ul li.on, .left_quick ul li:hover{background:#2846b2;width:140px;transition:width 0.5s;} .left_quick ul li.on span:before, .left_quick ul li:hover span:before{right:18px;opacity:1;transition:all 0.5s;} /*비주얼*/ .sub_visual{width:100%;height:820px;box-sizing:border-box;position: relative;background:url('../image/sub/sub_visual_bg.jpg')no-repeat center;background-size:cover;overflow:hidden;} .sub_visual:before{width:1280px;height:143px;position: absolute;left:50%;bottom:0;transform:translate(-50%);content:"";} .sub_homepage .sub_visual:before{background:url('../image/sub/visual_txt_home.png')no-repeat left center;} /*오브젝트*/ /*홈페이지*/ .sub_visual .visual_obj .obj{position: absolute;} .sub_homepage .visual_obj .obj01{top:-61px;left:8.2%;animation:ani1 3s linear Infinite Alternate;} .sub_homepage .visual_obj .obj02{top:75px;left:42%;animation:ani2 4s linear Infinite Alternate;} .sub_homepage .visual_obj .obj03{top:86px;right:7%;animation:ani3 6s linear Infinite Alternate;} .sub_homepage .visual_obj .obj04{bottom:130px;left:-3.3%;animation:ani4 3s linear Infinite Alternate;} .sub_homepage .visual_obj .obj05{bottom:130px;left:39.3%;animation:ani5 8s linear Infinite Alternate;} .sub_homepage .visual_obj .obj06{bottom:-50px;right:3%;animation:ani6 4s linear Infinite Alternate;} @keyframes ani1 { 0%{top:-61px;left:8.2%;} 50%{top:-22px;left:6.2%;} 100%{top:-61px;left:8.2%;} } @keyframes ani2 { 0%{top:75px;} 50%{top:100px;} 100%{top:75px;} } @keyframes ani3 { 0%{top:86px;} 50%{top:60px;} 100%{top:86px;} } @keyframes ani4 { 0%{bottom:130px;left:-3.3%;} 50%{bottom:160px;left:-1.3%;} 100%{bottom:130px;left:-3.3%;} } @keyframes ani5 { 0%{bottom:130px;left:39.3%;} 50%{bottom:80px;left:45.3%;} 100%{bottom:130px;left:39.3%;} } @keyframes ani6 { 0%{bottom:-50px;} 50%{bottom:-10px;} 100%{bottom:-50px;} } /*쇼핑몰*/ .sub_shopping .visual_obj .obj01{top:120px;left:10%;animation:shopani1 3s linear Infinite Alternate;} .sub_shopping .visual_obj .obj02{top:75px;left:42%;animation:shopani2 4s linear Infinite Alternate;} .sub_shopping .visual_obj .obj03{top:86px;right:7%;animation:shopani3 6s linear Infinite Alternate;} .sub_shopping .visual_obj .obj04{bottom:130px;left:-3.3%;animation:shopani4 3s linear Infinite Alternate;} .sub_shopping .visual_obj .obj05{bottom:-50px;right:3%;animation:shopani5 4s linear Infinite Alternate;} @keyframes shopani1 { 0%{top:120px;left:10%;} 50%{top:60px;left:6.2%;} 100%{top:120px;left:10%;} } @keyframes shopani2 { 0%{top:75px;} 50%{top:100px;} 100%{top:75px;} } @keyframes shopani3 { 0%{top:86px;} 50%{top:60px;} 100%{top:86px;} } @keyframes shopani4 { 0%{bottom:130px;left:-3.3%;} 50%{bottom:160px;left:-1.3%;} 100%{bottom:130px;left:-3.3%;} } @keyframes shopani5 { 0%{bottom:-50px;} 50%{bottom:-10px;} 100%{bottom:-50px;} } /*상세페이지*/ .sub_detail .visual_obj .obj01{top:-20px;left:9%;animation:detailani1 3s linear Infinite Alternate;} .sub_detail .visual_obj .obj02{top:75px;left:42%;animation:detailani2 4s linear Infinite Alternate;} .sub_detail .visual_obj .obj03{top:86px;right:11%;animation:detailani3 6s linear Infinite Alternate;} .sub_detail .visual_obj .obj04{bottom:130px;left:3.7%;animation:detailani4 3s linear Infinite Alternate;} .sub_detail .visual_obj .obj05{bottom:-50px;right:3%;animation:detailani5 4s linear Infinite Alternate;} @keyframes detailani1 { 0%{top:-20px;left:9%;} 50%{top:20px;left:6.2%;} 100%{top:-20px;left:9%;} } @keyframes detailani2 { 0%{top:75px;} 50%{top:100px;} 100%{top:75px;} } @keyframes detailani3 { 0%{top:86px;} 50%{top:60px;} 100%{top:86px;} } @keyframes detailani4 { 0%{bottom:130px;left:3.7%;} 50%{bottom:160px;left:0.3%;} 100%{bottom:130px;left:3.7%;} } @keyframes detailani5 { 0%{bottom:-50px;} 50%{bottom:-10px;} 100%{bottom:-50px;} } /*수출바우처*/ .sub_voucher .visual_obj .obj01{top:-40px;left:9%;animation:voucherani1 3s linear Infinite Alternate;} .sub_voucher .visual_obj .obj02{top:75px;left:42%;animation:voucherani2 4s linear Infinite Alternate;} .sub_voucher .visual_obj .obj03{top:86px;right:11%;animation:voucherani3 6s linear Infinite Alternate;} .sub_voucher .visual_obj .obj04{bottom:100px;left:3.7%;animation:voucherani4 6s linear Infinite Alternate;} .sub_voucher .visual_obj .obj05{bottom:-50px;right:3%;animation:voucherani5 4s linear Infinite Alternate;} @keyframes voucherani1 { 0%{top:-40px;left:9%;} 50%{top:0px;left:6.2%;} 100%{top:-40px;left:9%;} } @keyframes voucherani2 { 0%{top:75px;} 50%{top:100px;} 100%{top:75px;} } @keyframes voucherani3 { 0%{top:86px;} 50%{top:60px;} 100%{top:86px;} } @keyframes voucherani4 { 0%{bottom:100px;left:3.7%;} 50%{bottom:50px;left:-1%;} 100%{bottom:100px;left:3.7%;} } @keyframes voucherani5 { 0%{bottom:-50px;} 50%{bottom:-10px;} 100%{bottom:-50px;} } /*텍스트, 이미지*/ .sub_visual .w_set{display:flex;align-items: center;justify-content: space-between;margin-top:9.4%;position: relative;} .sub_visual .txt_box, .sub_visual .img_box{display: inline-block;box-sizing:border-box;} .sub_visual .txt_box *{font-family:'Noto Sans KR';} .sub_visual .txt_box span{font-size:25px;color:#fff;font-weight:700;letter-spacing:-0.5px;} .sub_visual .txt_box h3{font-size:74px;color:#fff;font-weight:700;letter-spacing:-1.48px;margin-top:12px;} .sub_visual .txt_box p{font-size:20px;color:#fff;font-weight:400;letter-spacing:-0.4px;line-height:32px;position: relative;margin-top:29px;padding-top:43px;} .sub_visual .txt_box p:before{width:110px;height:2px;content:"";background:#fff;position: absolute;top:0;left:0;opacity:0.2;} .sub_visual .img_box{width:660px;height:460px;border-radius:16px;overflow:hidden;box-shadow:0 17px 38px 0 rgba(0,0,0,0.4);background:#eee;} .sub_visual .img_box .content .top{width:100%;height:36px;position: relative;} .sub_visual .img_box .content .top .circle{text-align: right;margin-right:22px;padding:13px 0;} .sub_visual .img_box .content .top .circle li{display: inline-block;box-sizing:border-box;vertical-align: top;width:10px;height:10px;border-radius:100%;background:#cdcfd2;} .sub_visual .img_box .content .top .circle li + li{margin-left:7px;} .sub_visual .img_box .content .img{width:100%;height:424px;position: relative;overflow:hidden;} .sub_visual .img_box .content .img img{width:100%;position: absolute;top:0;left:0;animation:subVisual 90s linear Infinite Alternate;transform:translateY(0);} @keyframes subVisual { 0%{transform:translateY(0);} 50%{transform:translateY(calc(-100% + 424px));} 100%{transform:translateY(0);} } @media only screen and (max-width:1600px){ .sub_visual .w_set{padding:0 60px 0 150px;} .sub_visual .txt_box span{font-size:20px;} .sub_visual .txt_box h3{font-size:60px;} .sub_visual .txt_box p{font-size:18px;} } @media only screen and (max-width:1350px){ .sub_visual:before{width:100%;left:53%;} .sub_visual .img_box{width:600px;height:400px;} .sub_visual .txt_box span{font-size:18px;} .sub_visual .txt_box h3{font-size:50px;} .sub_visual .txt_box p{font-size:16px;} } /*제작 비용 안내*/ .sub_charge{padding:103px 0 100px;position: relative;} .sub_charge:before{width:495px;height:495px;content:"";box-sizing:border-box;border-radius:100%;position: absolute;left:-69px;bottom:-235px;background:#2846b2;z-index:2;} .sub_charge .charge_list{width:100%;font-size:0;text-align: center;margin-top:46px;position: relative;z-index:4;} .sub_charge .charge_list:before{width:270px;height:270px;content:"";background:#f1f4f8;box-sizing:border-box;border-radius:100%;position: absolute;right:-143px;top:-135px;} .sub_charge .charge_list li{display: inline-block;box-sizing:border-box;vertical-align: top;box-shadow: 0px 5px 24px 0 rgba(126, 150, 192, 0.4);border-radius:10px;width:calc(25% - 24px);border-top:10px solid #497ddb;background:#fff;padding:30px 10px 50px 10px;position: relative;z-index:3;} .sub_charge .charge_list li:nth-child(2){border-color:#3b69bd;} .sub_charge .charge_list li:nth-child(3){border-color:#0e48b1;} .sub_charge .charge_list li:nth-child(4){border-color:#343eb7;} .sub_charge .charge_list li + li{margin-left:32px;} .sub_charge .charge_list li dl dt{font-size:30px;color:#333;font-weight:400;letter-spacing:-1.2px;} .sub_charge .charge_list li dl dd{} .sub_charge .charge_list li dl .txt{font-size:18px;color:#666;font-weight:300;letter-spacing:-0.9px;line-height:28px;font-family:'Noto Sans KR';margin-top:19px;height:112px;} .sub_charge .charge_list li dl .txt strong{color:#333;font-weight:500;} .sub_charge .charge_list li dl .price{font-size:36px;color:#497ddb;font-weight:700;font-family:'Inter', 'Noto Sans KR';letter-spacing:-0.72px;margin-top:27px;} .sub_charge .charge_list li:nth-child(2) dl .price{color:#3b69bd;} .sub_charge .charge_list li:nth-child(3) dl .price{color:#0e48b1;} .sub_charge .charge_list li:nth-child(4) dl .price{color:#343eb7;letter-spacing:-2px;} .sub_charge .charge_list li dl .price span{font-size:24px;color:inherit;font-weight:500;font-family:'Noto Sans KR';letter-spacing:-0.48px;} .sub_charge .charge_list li dl dd a{display: inline-block;box-sizing:border-box;width:180px;height:52px;line-height:48px;border:1px solid #333;font-size:18px;color:#222;font-weight:400;letter-spacing:-0.72px;margin-top:41px;} .sub_charge .charge_list li dl dd a:hover{color:#fff;} .sub_charge .charge_list li:nth-child(1) dl dd a:hover{background:#497ddb;border:1px solid #497ddb;} .sub_charge .charge_list li:nth-child(2) dl dd a:hover{background:#3b69bd;border:1px solid #3b69bd;} .sub_charge .charge_list li:nth-child(3) dl dd a:hover{background:#0e48b1;border:1px solid #0e48b1;} .sub_charge .charge_list li:nth-child(4) dl dd a:hover{background:#343eb7;border:1px solid #343eb7;} .sub_charge .intro_txt{text-align: right;font-size:16px;color:#888;font-weight:400;letter-spacing:-0.32px;margin-top:35px;} @media only screen and (max-width:1500px){ .sub_charge .charge_list li{width:calc(25% - 12px);} .sub_charge .charge_list li + li{margin-left:15px;} .sub_charge .charge_list li dl .txt{font-size:16px;} } @media only screen and (max-width:1300px){ .sub_charge .charge_list li dl dt{font-size:26px;} .sub_charge .charge_list li dl .txt{font-size:14px;} .sub_charge .charge_list li dl .price{font-size:30px;} } /*고객사*/ @media only screen and (max-width:1600px){ #wrapper .sub_quick_container .main_partner .partner_scl ul{display: flex;flex-wrap: wrap;} #wrapper .sub_quick_container .main_partner .sub_partner_list .list_box li{display: flex;align-items:center;} } /*포트폴리오*/ .sub_quick_container .main_portfolio{margin:0;padding-top:101px;} /*제작 절차*/ .make_process{box-sizing:border-box;position: relative;margin-top:120px;padding:120px 0;background:rgba(18,61,140,0.06);} .make_process:before{width:26.3%;height:119.6%;content:"";background:#1a285d;box-sizing:border-box;border-radius:400px 0 0 0;position: absolute;bottom:0;right:-43px;} .make_process .process_box{position: relative;margin-top:62px;} .make_process .process_box:after{clear:both;content:"";display: block;} .make_process .process_tab{position: absolute;top:0;left:0;counter-reset: section;z-index:2;width:270px;} .make_process .process_tab .slick-track{transform:none !important} .make_process .process_tab .slick-list{overflow:visible;} .make_process .process_tab .slick-slide + .slick-slide{margin-top:10px;} .make_process .process_tab .slick-slide{width:270px;height:65px !important;box-sizing:border-box;vertical-align: top;border-radius:10px;background:#fff;transition:width 0.5s;cursor:pointer;} .make_process .process_tab .slick-slide > div{display: block;width:100%;height:100%;} .make_process .process_tab .slick-slide li{width:100%;height:100%;display:flex !important;align-items:center;} .make_process .process_tab li span{display: block;width:100%;box-sizing:border-box;position: relative;padding-left:20px;font-size:22px;color:#444;font-weight:400;letter-spacing:-1.4px;font-family:'Noto Sans KR';} .make_process .process_tab .slick-slide:last-of-type span{color:#2846b2;} .make_process .process_tab li span:before{counter-increment: section;content: "0" counter(section) "";font-size:18px;color:#2846b2;font-weight:400;letter-spacing:-0.36px;font-family:'Inter';width:40px;height:40px;line-height:40px;box-sizing:border-box;border-radius:100%;background:#ecf0f6;display: inline-block;text-align: center;margin-right:18px;} .make_process .process_tab li span:after{width:9px;height:9px;content:"";border:1px solid #fff;border-width:1px 1px 0 0;transform:rotate(45deg);position: absolute;top:13px;right:50px;opacity:0;transition:all 0.5s;} /*on*/ .make_process .process_tab .active, .make_process .process_tab .slick-slide:hover{width:330px !important;background:#2846b2;box-shadow: 0px 5px 24px 0 rgba(42, 57, 85, 0.4);transition:width 0.5s;} .make_process .process_tab .active li span, .make_process .process_tab .slick-slide:hover span, .make_process .process_tab li:hover:last-of-type span, .make_process .process_tab .active.slick-slide:last-of-type span{color:#fff;} .make_process .process_tab .active li span:before, .make_process .process_tab li:hover span:before{background:#fff;} .make_process .process_tab .active li span:after, .make_process .process_tab li:hover span:after{right:28px;opacity:1;transition:all 0.5s;} .make_process .content_box{float: right;vertical-align: top;width:980px;box-sizing:border-box;counter-reset: sectionCont;height:515px;} .make_process .content_box .slick-list{overflow:visible;} .make_process .content_box .slick-slide li > div{width:100%;box-sizing:border-box;background:#fff;border-radius:10px;box-shadow: 0px 5px 24px 0 rgba(126, 150, 192, 0.4);padding:80px 30px 80px 80px;} .make_process .content_box .title{height:84px;} .make_process .content_box .title dt{font-size:36px;color:#2846b2;font-weight:500;letter-spacing:-0.72px;line-height:1;display: inline-block;vertical-align: top;font-family:'Noto Sans KR';} .make_process .content_box .title dt:before{counter-increment: sectionCont;content: "0" counter(sectionCont) "";font-size:18px;color:#2846b2;font-weight:400;letter-spacing:-0.36px;font-family:'Inter';width:40px;height:40px;line-height:40px;box-sizing:border-box;border-radius:100%;background:#ecf0f6;display: inline-block;text-align: center;margin-right:18px;vertical-align: top;} .make_process .content_box .title dd{font-size:18px;color:#333;font-weight:400;letter-spacing:-0.5px;line-height:30px;font-family:'Noto Sans KR';display: inline-block;vertical-align: top;margin-left:59px;margin-top:-6px;} .make_process .content_box .title dd strong{color:#2846b2;} .make_process .content_process{margin-top:51px;display:flex;align-items:center;} .make_process .content_process ul{display: inline-block;} .make_process .content_process ul li{display: inline-block;box-sizing:border-box;vertical-align: top;width:220px;height:220px;border-radius:100%;text-align: center;position: relative;} .make_process .content_process ul li:nth-child(1){background:rgba(236, 240, 246, 0.9);z-index:4;} .make_process .content_process ul li:nth-child(2){background:rgba(64, 111, 182, 0.95);z-index:3;margin-left:-22px;} .make_process .content_process ul li:nth-child(3){background:rgba(18, 56, 126, 0.9);z-index:2;margin-left:-22px;} .make_process .content_process ul li:nth-child(4){background:rgba(13, 36, 78, 0.9);z-index:1;margin-left:-22px;} .make_process .content_process ul li span{font-size:32px;color:#fff;font-weight:500;letter-spacing:-0.64px;line-height:42px;width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .make_process .content_process ul li span em{font-size:18px;line-height:26px;} .make_process .content_process ul li:nth-child(1) span{color:#444;} .make_process .content_process .txt{margin-left:40px;} .make_process .content_process .txt .dots{font-size:0;vertical-align: middle;display: inline-block;} .make_process .content_process .txt .dots li{width:6px;height:6px;display: inline-block;box-sizing:border-box;border-radius:100%;background:#aaa;} .make_process .content_process .txt .dots li + li{margin-left:10px;} .make_process .content_process .txt p{font-size:32px;color:#aaa;font-weight:400;display: inline-block;vertical-align: middle;padding-left:30px;} /*개발*/ .make_process .content_box li#process5 .content_process ul li:nth-child(3){margin-left:130px;} .make_process .content_box li#process5 .content_process ul li:nth-child(3):before{border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #aaa;content:"";position: absolute;left:-70px;top:50%;transform:translateY(-50%);} @media only screen and (max-width:1600px){ .make_process .process_box{width:calc(100% - 201px);margin-left:156px;padding:0;} .make_process .content_box{width:77%;} } @media only screen and (max-width:1400px){ .make_process .process_box{padding:0;} .make_process:before{width:22.3%;height:114.6%;} .make_process .process_tab{width:220px;} .make_process .process_tab li span{font-size:18px;} .make_process .process_tab .active, .make_process .process_tab .slick-slide:hover{width:280px !important;} .make_process .content_box{width:75%;height:460px;} .make_process .content_box .slick-slide li > div{padding:70px 35px 70px 35px;} .make_process .content_box .title{height:75px;} .make_process .content_box .title dt{font-size:30px;line-height:1.2;} .make_process .content_box .title dd{font-size:16px;line-height:25px;margin-left:20px;margin-top:5px;} .make_process .content_process ul li{width:190px;height:190px;;} .make_process .content_process ul li span{font-size:28px;line-height:35px;} .make_process .content_process ul li span em{font-size:14px;line-height:20px;} } @media only screen and (max-width:1300px){ .make_process .content_box .title dt{font-size:28px;} .make_process .content_box .title dd{margin-top:2px;font-size:15px;} .make_process .content_process ul li{width:170px;height:170px;} } /*제공혜택*/ .sub_quick_container .main_benefit{padding-bottom:98px;} .sub_quick_container .main_benefit:before, .sub_quick_container .main_benefit .w_set:before{display: none;} /*신뢰와 노하우*/ .sub_awards{position: relative;text-align: center;padding-bottom:100px;} .sub_awards:before{width:100%;height:30.8%;content:"";background:#1a285d;position: absolute;bottom:0;left:0;} .sub_awards .main_title h3{padding-top:147px;letter-spacing:-3px;} .sub_awards .main_title h3:before {width:1px;height:105px;border-radius:0;background:#333;transform:none;left:calc(50% - 1px);} .sub_awards .main_title p{margin-top:23px;letter-spacing:-1px;} .sub_awards .awards_list{font-size:0;text-align: center;box-sizing:border-box;padding:0 30px;margin-top:56px;position: relative;} .sub_awards .awards_list:before{width:221px;height:384px;content:"";background:url('../image/sub/award_prize.png')no-repeat center;position: absolute;bottom:30px;right:-143px;background-size:auto 100%;} .sub_awards .awards_list:after{clear:both;content:"";display: block;} .sub_awards .awards_list li{display: inline-block;box-sizing:border-box;vertical-align: top;float: left;margin:0 0 37px 30px;width:calc(20% - 24px);} .sub_awards .awards_list li:nth-of-type(5n+1){clear:both;float: left;margin-left:0;} .sub_awards .awards_list img{width:100%;} .sub_awards .awards_list .txt_box{margin-top:14px;} .sub_awards .awards_list .txt_box span{font-size:16px;color:#666;font-weight:400;letter-spacing:-0.32px;font-family:'Inter';} .sub_awards .awards_list li:nth-child(n+6) .txt_box span{color:rgba(255,255,255,0.7);} .sub_awards .awards_list .txt_box .prize{font-size:22px;color:#333;font-weight:500;letter-spacing:-1.1px;margin-top:6px;} .sub_awards .awards_list .txt_box .com_name{font-size:17px;color:#333;font-weight:300;letter-spacing:-0.85px;font-family:'Noto Sans KR';} .sub_awards .awards_list li:nth-child(n+6) .txt_box .prize, .sub_awards .awards_list li:nth-child(n+6) .txt_box .com_name{color:#fff;} .sub_awards a{display: inline-block;box-sizing:border-box;width:180px;height:70px;line-height:68px;border:1px solid rgba(255,255,255,0.5);font-size:20px;color:#fff;font-weight:400;letter-spacing:-0.8px;margin-top:20px;background:#1a285d;transition:all 0.3s;} .sub_awards a:hover{background:#fff;color:#2846b2;transition:all 0.3s;} @media only screen and (max-width:1400px){ .sub_awards .w_set{padding:0 120px;} .sub_awards .awards_list{padding:0;} .sub_awards .awards_list:before{width:190px;height:330px;right:-118px;} .sub_awards .awards_list .txt_box span{font-size:14px;} .sub_awards .awards_list .txt_box .prize{font-size:20px;} .sub_awards .awards_list .txt_box .com_name{font-size:15px;} } /*견적문의하기*/ .sub_contact{background:url('../image/sub/contact-bg.png')no-repeat left -95px bottom -355px;padding-top:135px;} .sub_contact .w_set{text-align: center;position: relative;box-sizing:border-box;padding-bottom:140px;} .sub_contact .w_set:before{width:100%;height:86px;content:"";background:url('../image/sub/contact_logo.png')no-repeat right center;background-size:auto 100%;position: absolute;right:-89px;bottom:0;} .sub_contact h3{font-size:26px;color:#222;font-weight:400;letter-spacing:-0.9px;line-height:42px;font-family:'Noto Sans KR';} .sub_contact .w_set a{display: inline-block;box-sizing:border-box;vertical-align: top;width:280px;height:80px;line-height:78px;box-shadow: 0 0 51px 0 rgba(0, 0, 0, 0.34);background: #2846b2;font-size:24px;color:#fff;font-weight:500;letter-spacing:-0.96px;margin-top:53px;} @media only screen and (max-width:1600px){ .sub_contact{background-position:left -36% bottom -355px;padding-top:100px;} .sub_contact .w_set:before{height:72px;right:0;} .sub_contact h3{font-size:24px;} .sub_contact .w_set a{width:250px;height:70px;line-height:68px;margin-top:40px;} } @media only screen and (max-width:1400px){ .sub_contact{background-position:left -17% bottom -100px;background-size:auto 500px;} .sub_contact .w_set:before{right:15px;} } /*상세페이지*/ .detail_quick.left_quick ul li{width:140px;} .detail_quick.left_quick ul li.on, .detail_quick.left_quick ul li:hover{width:160px;} /*visual*/ .sub_detail .sub_visual{background:url('../image/sub/detail_visual_bg.jpg')no-repeat center;} .sub_detail .sub_visual .w_set{margin-top:5.4%;} .sub_detail .sub_visual:before{background:url('../image/sub/visual_txt_detail.png')no-repeat left center;} .sub_detail .sub_visual .img_box{width:634px;height:560px;box-shadow:none;border-radius:0;background:none;overflow:visible;} .sub_detail .sub_visual .img_box .content{width:100%;height:100%;} .sub_detail .sub_visual .img_box .content:after{clear:both;content:"";display: block;} .sub_detail .sub_visual .img_box .content .img{display: inline-block;box-sizing:border-box;vertical-align: top;width:302px;height:100%;box-shadow:0 17px 38px 0 rgba(0,0,0,0.4);border-radius: 16px;overflow: hidden;} .sub_detail .sub_visual .img_box .content .img:nth-child(2){float: right;margin-top:50px;} .sub_detail .sub_visual .img_box .content .img:nth-child(1) img{animation: subVisual2 450s linear Infinite Alternate;} .sub_detail .sub_visual .img_box .content .img:nth-child(2) img{animation: subVisual2 240s linear Infinite Alternate;} @keyframes subVisual2 { 0%{transform:translateY(0);} 50%{transform:translateY(calc(-100% + 560px));} 100%{transform:translateY(0);} } @media only screen and (max-width:1600px){ .detail_quick.left_quick ul li{width:140px;} .detail_quick.left_quick ul li.on, .detail_quick.left_quick ul li:hover{width:150px;} .detail_quick.left_quick ul li.on span:before, .detail_quick.left_quick ul li:hover span:before{right:14px;} } /*포트폴리오*/ .main_portfolio.detail_portfolio .portfolio_list li{margin:0 0 24px 24px;width:calc(25% - 16px);} .main_portfolio.detail_portfolio .portfolio_list li:nth-of-type(3n+1){clear:none;margin-left:16px;} .main_portfolio.detail_portfolio .portfolio_list li:nth-of-type(4n+1){clear:both;float: left;margin-left:0;} .main_portfolio.detail_portfolio .portfolio_list li .thumb{padding-bottom:184%;} .main_portfolio.detail_portfolio .main_more_box{margin-top:34px;} /*제작요소*/ .sub_element{background:#f1f4f8;margin-top:120px;box-sizing:border-box;padding:120px 0 115px;} .sub_element .element_list{font-size:0;margin-top:62px;position: relative;} .sub_element .element_list:before{width:351px;height:351px;content:"";background:#2846b2;box-sizing:border-box;border-radius:100%;position: absolute;top:-38%;left:-199px;} .sub_element .element_list li{display: inline-block;box-sizing:border-box;vertical-align: top;width:calc(33.3333% - 27px);position: relative;} .sub_element .element_list li + li{margin-left:40px;} .sub_element .element_list li .thumb{width:100%;box-sizing:border-box;border-radius:10px;box-shadow:0 0 29px 0 rgba(0, 0, 0, 0.14);position: relative;padding-bottom:70%;overflow:hidden;} .sub_element .element_list li .thumb img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .sub_element .element_list li .txt_box{text-align: left;margin-top:24px;} .sub_element .element_list li .txt_box dt{font-size:36px;color:#333;font-weight:500;letter-spacing:-0.72px;} .sub_element .element_list li .txt_box dd{font-size:20px;color:#555;font-weight:300;letter-spacing:-0.4px;margin-top:12px;} .sub_element .element_list li .txt_box dd strong{font-size:inherit;color:#222;font-weight:500;letter-spacing:inherit;} @media only screen and (max-width:1550px){ .sub_element .element_list li .txt_box dd{font-size:18px;} .sub_element .element_list li .txt_box dd br{display: none;} } @media only screen and (max-width:1300px){ .sub_element .element_list:before{width:250px;height:250px;left:-120px;} .sub_element .element_list li .txt_box{font-size:20px;} .sub_element .element_list li .txt_box dt{font-size:30px;} .sub_element .element_list li .txt_box dd{font-size:16px;} } /*비용안내*/ .sub_charge.detail_charge{padding:120px 0 100px;} .sub_charge.detail_charge:before{display: none;} .sub_charge.detail_charge .charge_list{margin-top:49px;} .sub_charge.detail_charge .charge_list li{width:calc(33.3333% - 27px);} .sub_charge.detail_charge .charge_list li + li{margin-left:40px;} .sub_charge .charge_list li dl dd .icon{text-align: center;font-size:0;margin-top:16px;} .sub_charge .charge_list li dl dd .icon span{display: inline-block;box-sizing:border-box;vertical-align: top;font-size:16px;color:#497ddb;font-weight:500;letter-spacing:-0.64px;height:30px;line-height:28px;border-radius:15px;padding:0 11px;border:1px solid #497ddb;} .sub_charge .charge_list li dl dd .icon span + span{margin-left:6px;} .sub_charge .charge_list li:nth-child(2) dl dd .icon span{color:#3b69bd;border-color:#3b69bd;} .sub_charge .charge_list li:nth-child(3) dl dd .icon span{color:#343eb7;border-color:#343eb7;} .sub_charge.detail_charge .charge_list li dl .txt{margin-top:23px;height:84px;} .sub_charge.detail_charge .charge_list li dl dd a{margin-top:39px;} .sub_charge.detail_charge .detail_charge_txt{margin-top:31px;} .sub_charge.detail_charge .detail_charge_txt li{font-size:17px;color:#777;font-weight:400;letter-spacing:-0.6px;line-height:32px;position: relative;padding-left:11px;font-family:'Noto Sans KR';} .sub_charge.detail_charge .detail_charge_txt li:before{width:3px;height:3px;content:"";box-sizing:border-box;border-radius:100%;background:#888;position: absolute;left:0;top:16px;} /*제작 절차*/ .make_process.detail_process{margin-top:15px;} /*부가서비스*/ .sub_service{box-sizing:border-box;padding:120px 0 120px;text-align: center;} .sub_service:before{width:100%;height:41.5%;content:"";background:#1a285d;position: absolute;bottom:0;left:0;} .sub_service .service_list{font-size:0;text-align: center;margin-top:44px;} .sub_service .service_list li{display: inline-block;box-sizing:border-box;vertical-align: top;width:calc(20% - 16px);background:#fff;border-radius:10px;box-shadow:0 0 54px 0 rgba(0,0,0,0.18);padding:40px 10px 40px 10px;} .sub_service .service_list li + li{margin-left:20px;} .sub_service .service_list li .icon{height:74px;display:flex;align-items:center;justify-content:center;} .sub_service .service_list li p{font-size:24px;color:#333;font-weight:400;letter-spacing:-1.2px;word-break:keep-all;font-family:'Noto Sans KR';margin-top:30px;} .sub_service .btn_more{display: inline-block;box-sizing:border-box;width:300px;height:70px;line-height:68px;border:1px solid rgba(255,255,255,0.5);font-size:20px;color:#fff;font-weight:400;letter-spacing:-0.8px;margin-top:60px;background:#1a285d;transition:all 0.3s;} .sub_service .btn_more:hover{background:#fff;color:#2846b2;transition:all 0.3s;} @media only screen and (max-width:1400px){ .sub_service .service_list li p{font-size:20px;} } @media only screen and (max-width:1300px){ .sub_service .service_list li p{font-size:18px;} } /*쇼핑몰*/ /*visual*/ .sub_shopping .sub_visual{background:url('../image/sub/shopping_visual_bg.jpg')no-repeat center;} .sub_shopping .sub_visual:before{background:url('../image/sub/visual_txt_shopping.png')no-repeat left center;height:117px;} /*비용 안내*/ .shop_charge.sub_charge .charge_list li{width:calc(33.3333% - 27px);} .shop_charge.sub_charge .charge_list li + li{margin-left:40px;} .shop_charge.sub_charge .charge_list li dl .txt{height:84px;} /*솔루션*/ .sub_solution{margin:120px 0 100px;} .sub_solution .shop_logo{font-size:0;text-align: center;margin:60px 0 0 40px;} .sub_solution .dart_logo, .sub_solution .mall_logo{display: inline-block;box-sizing:border-box;vertical-align: top;position: relative;} .sub_solution .logo_box{display:inline-block;box-sizing:border-box;vertical-align: top;width:260px;height:80px;border-radius:40px;position: relative;} .sub_solution .dart_logo.logo_box{background:#d71419 url('../image/sub/shop-logo-01.png')no-repeat center;} .sub_solution .mall_logo{margin-left:30px;padding-left:52px;} .sub_solution .mall_logo:before,.sub_solution .mall_logo:after{width:30px;height:2px;content:"";background:#888;position: absolute;left:-5px;top:50%;} .sub_solution .mall_logo:before{transform:rotate(-45deg);} .sub_solution .mall_logo:after{transform:rotate(45deg);} .sub_solution .mall_logo .logo_box:nth-child(1){background:rgba(188,41,41,0.08) url('../image/sub/shop-logo-02.png')no-repeat center;z-index:3;} .sub_solution .mall_logo .logo_box:nth-child(2){background:rgba(64,146,204,0.12) url('../image/sub/shop-logo-03.png')no-repeat center;z-index:2;transform:translate(-20px);} .sub_solution .mall_logo .logo_box:nth-child(3){background:rgba(38,97,172,0.12) url('../image/sub/shop-logo-04.png')no-repeat center;z-index:1;transform:translate(-40px);} .sub_solution .solution_table{box-sizing:border-box;margin-top:60px;border:1px solid #ddd;box-shadow:0 0 54px 0 rgba(0,0,0,0.18);border-radius:10px;overflow:hidden;background:#fff;position: relative;z-index:3;} .sub_solution .solution_table table{box-sizing:border-box;width:100%;text-align: center;border-collapse:collapse;table-layout:fixed;} .sub_solution .solution_table table thead tr th{box-sizing:border-box;vertical-align: middle;background:#f5f5f5;border-bottom:1px solid #ddd;font-size:22px;color:#333;font-weight:500;letter-spacing:-0.44px;padding:15px 0;} .sub_solution .solution_table table thead tr th + th{border-left:1px solid #ddd;} .sub_solution .solution_table table tbody tr th{font-size:20px;color:#333;font-weight:400;letter-spacing:-0.4px;font-family:'Noto Sans KR';border-bottom:1px solid #ddd;padding:16px 0;} .sub_solution .solution_table table tbody tr td{font-size:18px;color:#777;font-weight:400;letter-spacing:-0.36px;font-family:'Noto Sans KR';border-bottom:1px solid #ddd;border-left:1px solid #ddd;line-height:26px;padding:16px 0;} .sub_solution .solution_table table tbody tr:last-child th, .sub_solution .solution_table table tbody tr:last-child td{border-bottom:none;} @media only screen and (max-width:1500px){ .sub_solution .logo_box{width:230px;} } @media only screen and (max-width:1400px){ .sub_solution .logo_box{width:200px;} .sub_solution .mall_logo{margin-left:15px;padding-left:32px;} .sub_solution .dart_logo.logo_box{background-size:auto 24%;} .sub_solution .mall_logo .logo_box:nth-child(1){background-size:auto 100%;} .sub_solution .mall_logo .logo_box:nth-child(2){background-size:auto 27%;} .sub_solution .mall_logo .logo_box:nth-child(3){background-size:auto 27%;} } /*제작 절차*/ .make_process.shop_process{margin-top:135px;} .make_process.shop_process .content_box .slick-slide:nth-child(5) .content_process ul li:nth-child(3), .make_process.shop_process .content_box .slick-slide:nth-child(6) .content_process ul li:nth-child(3), .make_process.shop_process .content_box .slick-slide:nth-child(7) .content_process ul li:nth-child(3){margin-left:130px;} .make_process.shop_process .content_box .slick-slide:nth-child(5) .content_process ul li:nth-child(3):before, .make_process.shop_process .content_box .slick-slide:nth-child(6) .content_process ul li:nth-child(3):before, .make_process.shop_process .content_box .slick-slide:nth-child(7) .content_process ul li:nth-child(3):before{border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #aaa;content:"";position: absolute;left:-70px;top:50%;transform:translateY(-50%);} @media only screen and (max-width:1500px){ .make_process.shop_process .content_box .slick-slide li > div{padding:80px 30px 80px 60px;} .make_process.shop_process .content_box .title dt{font-size:32px;} } @media only screen and (max-width:1400px){ .make_process.shop_process .process_tab{width:250px;} .make_process.shop_process .content_box .slick-slide li > div{padding:70px 30px 70px 30px;} } @media only screen and (max-width:1250px){ .make_process.shop_process .content_box{width:73%;} .make_process.shop_process .content_box .title dt{font-size:28px;} .make_process.shop_process .content_box .title dt:before{margin-right:10px;} .make_process.shop_process .content_box .title dd{font-size:14px;} } /*제공혜택*/ .shop_benefit .shop_bnr{width:100%;box-sizing:border-box;margin-top:60px;box-shadow:0 0 54px 0 rgba(0,0,0,0.18);border-radius:10px;overflow:hidden;} .shop_benefit .shop_bnr figure{margin:0;} .shop_benefit .shop_bnr figure figcaption{font-size:0;} /*수출바우처*/ /*visual*/ .sub_voucher .sub_visual{background:url('../image/sub/voucher_visual_bg.jpg')no-repeat center;} .sub_voucher .sub_visual:before{background:url('../image/sub/visual_txt_voucher.png')no-repeat left center;height:104px;} /*수출바우처 사업이란?*/ .sub_voucher_intro{width:100%;box-sizing:border-box;background:url('../image/sub/voucher-bg.jpg')no-repeat center;background-size:cover;padding:102px 0 119px;} .sub_voucher_intro .main_title h3, .sub_voucher_intro .main_title p{color:#fff;} .sub_voucher_intro .voucher_box{font-size:0;text-align: center;margin-top:43px;} .sub_voucher_intro .voucher_box dl{width:calc(50% - 20px);display: inline-block;box-sizing:border-box;vertical-align: top;border-radius:10px;overflow:hidden;} .sub_voucher_intro .voucher_box dl + dl{margin-left:40px;} .sub_voucher_intro .voucher_box dl dt{width:100%;height:80px;line-height:80px;font-size:32px;color:#fff;font-weight:500;letter-spacing:-1.28px;background:#1a285d;box-sizing:border-box;border-radius:10px 10px 0 0;} .sub_voucher_intro .voucher_box dl + dl dt{background:#2846b2;} .sub_voucher_intro .voucher_box dl dd{box-sizing:border-box;border-radius:0 0 10px 10px;background:#fff;padding:30px 25px 29px 25px;} .sub_voucher_intro .voucher_box dl dd ul{font-size:0;} .sub_voucher_intro .voucher_box dl dd ul li{display: inline-block;box-sizing:border-box;vertical-align: top;width:25%;} .sub_voucher_intro .voucher_box dl dd ul li .icon{width:80px;height:80px;box-sizing:border-box;margin:0 auto;border-radius:100%;background-color:#eee !important;} .sub_voucher_intro .voucher_box dl dd ul li:nth-child(1) .icon{background:url('../image/sub/voucher-home-01.png')no-repeat center;} .sub_voucher_intro .voucher_box dl dd ul li:nth-child(2) .icon{background:url('../image/sub/voucher-home-02.png')no-repeat center;} .sub_voucher_intro .voucher_box dl dd ul li:nth-child(3) .icon{background:url('../image/sub/voucher-home-03.png')no-repeat center;} .sub_voucher_intro .voucher_box dl dd ul li:nth-child(4) .icon{background:url('../image/sub/voucher-home-04.png')no-repeat center;} .sub_voucher_intro .voucher_box dl dd ul li p{font-size:20px;color:#333;font-weight:400;letter-spacing:-1px;line-height:28px;margin-top:15px;} @media only screen and (max-width:1500px){ .sub_voucher_intro .voucher_box dl dd ul li p{font-size:18px;line-height:22px;} } @media only screen and (max-width:1300px){ .sub_voucher_intro .voucher_box dl dd{padding:30px 10px 29px 10px;} .sub_voucher_intro .voucher_box dl dd ul li p{font-size:16px;} } /*수행이력*/ .sub_quick_container .voucher_portfolio{padding-top:120px;} .voucher_portfolio .portfolio_list li .txt_box{display: block;} .voucher_portfolio .partner_list{font-size:0;width:100%;margin-top:19px;display:flex;flex-wrap:wrap;} .voucher_portfolio .partner_list li{border:none;border-radius:10px;box-shadow:0 5px 24px rgba(158,171,196,0.4);height:80px;overflow:hidden;display: flex;align-items: center;box-sizing:border-box;margin:0 0 10px 10px;width:calc(16.6666% - 9px);background:#fff;} .voucher_portfolio .partner_list li:nth-of-type(6n+1){margin-left:0;} .voucher_portfolio .main_more_box{margin-top:50px;} .voucher_portfolio .main_more_box a{width:180px;} @media only screen and (max-width:1600px){ .voucher_portfolio .partner_list li img{width:100%;} } /*제작절차*/ .make_process.voucher_process{margin-top:120px;} .make_process.voucher_process .content_box .slick-slide:nth-child(1) .title dd{margin-top:3px;} .make_process.voucher_process .content_process .link_voucher{text-align: center;margin-left:30px;position: relative;padding-left:80px;} .make_process.voucher_process .content_process .link_voucher:before{width:50px;height:1px;content:"";background:#ddd;position: absolute;left:0;top:calc(50% - 1px);} .make_process.voucher_process .content_process .link_voucher p{font-size:30px;color:#888;font-weight:400;letter-spacing:-0.6px;font-family:'Noto Sans KR';} .make_process.voucher_process .content_process .link_voucher a{display: inline-block;box-sizing:border-box;vertical-align: top;width:230px;height:60px;line-height:56px;border:1px solid #555;font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;margin-top:22px;} .make_process .content_box .slick-slide:nth-child(6) li .content_process ul li:nth-child(3), .make_process .content_box .slick-slide:nth-child(7) li .content_process ul li:nth-child(3){margin-left:130px;} .sub_homepage .make_process .content_box .slick-slide:nth-child(6) li .content_process ul li:nth-child(3){margin-left:-22px;} .make_process .content_box .slick-slide:nth-child(6) li .content_process ul li:nth-child(3):before, .make_process .content_box .slick-slide:nth-child(7) li .content_process ul li:nth-child(3):before{border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #aaa;content:"";position: absolute;left:-70px;top:50%;transform:translateY(-50%);} .make_process .slick-slide:nth-child(7) .content_process ul li span em{font-size:20px;line-height:34px;} @media only screen and (max-width:1450px){ .make_process.voucher_process .content_process .link_voucher{margin-left:10px;padding-left:50px;} .make_process.voucher_process .content_process .link_voucher p{font-size:24px;} .make_process.voucher_process .content_process .link_voucher a{width:180px;font-size:16px;} .sub_homepage .make_process .content_box .slick-slide:nth-child(6) li .content_process ul li:nth-child(2), .sub_homepage .make_process .content_box .slick-slide:nth-child(6) li .content_process ul li:nth-child(3), .sub_homepage .make_process .content_box .slick-slide:nth-child(6) li .content_process ul li:nth-child(4){margin-left:-30px;} .make_process .slick-slide:nth-child(7) .content_process ul li span em{font-size:16px;line-height:25px;} } /*신청 방법 안내*/ .sub_application{/* background:rgba(18,61,140,0.06); */box-sizing:border-box;padding:100px 0 100px;margin-top:23px;} .sub_application ol{font-size:0;text-align: center;margin-top:35px;} .sub_application ol li{display: inline-block;box-sizing:border-box;vertical-align: top;width:calc(20% - 36px);position: relative;} .sub_application ol li + li{margin-left:45px;} .sub_application ol li + li:before{width:9px;height:9px;content:"";border:2px solid #888;border-width:2px 2px 0 0;transform:rotate(45deg);position: absolute;left:-31px;top:94px;} .sub_application ol li .thumb{width:100%;box-sizing:border-box;border-radius:10px;box-shadow: 0px 5px 24px 0 rgba(126, 150, 192, 0.4);overflow:hidden;} .sub_application ol li .thumb dt{width:100%;height:50px;line-height:50px;box-sizing:border-box;border-radius:10px 10px 0 0;background:#333;font-size:18px;color:#fff;font-weight:500;letter-spacing:-0.36px;font-family:'Inter';} .sub_application ol li .thumb dd{width:100%;box-sizing:border-box;border-radius:0 0 10px 10px;background:#fff;height:140px;display:flex;justify-content: center;align-items: center;padding:20px 0;} .sub_application ol li .thumb img{max-width:90%;margin:0 auto;} .sub_application ol li .thumb dd a{display:block;position: relative;font-size:16px;color:#2846b2;font-weight:400;letter-spacing:-0.32px;margin-top:20px;padding-right:9px;} .sub_application ol li .thumb dd a:before{width:6px;height:6px;content:"";border:1px solid #2846b2;border-width:1px 1px 0 0;transform:rotate(45deg);position: absolute;right:0;top:8px;} .sub_application ol li p{font-size:20px;color:#222;font-weight:400;letter-spacing:-0.4px;line-height:30px;margin-top:24px;} .sub_application ol li p span{display: block;font-size:16px;color:#555;font-weight:400;letter-spacing:-0.32px;} .sub_application ol li:last-of-type .thumb dt{background:#2846b2;} .sub_application ol li:last-of-type p{color:#2846b2;font-weight:700;} @media only screen and (max-width:1450px){ .sub_application ol li{width:calc(20% - 24px);} .sub_application ol li + li{margin-left:30px;} .sub_application ol li + li:before{left:-22px;} .sub_application ol li p{font-size:16px;line-height:24px;} .sub_application ol li p span{font-size:13px;} } /*사업유형*/ .voucher_type{padding-top:100px;} .voucher_type:before{width:495px;height:495px;content:"";box-sizing:border-box;border-radius:100%;background:#2846b2;position: absolute;top:-6.5vh;left:-5vw;} .voucher_type .type_list{display:flex;flex-wrap:wrap;font-size:0;position: relative;z-index:2;margin-top:35px;} .voucher_type .type_list li{box-sizing:border-box;vertical-align: top;display:flex;align-items:center;margin:0 0 22px 22px;border-radius:10px;box-shadow:0 5px 24px 0 rgba(158,171,196,0.4);border:1px solid #ddd;background:#fff url('../image/sub/icon-chk.png')no-repeat left 20px center;width:calc(33.3333% - 15px);height:80px;padding-left:75px;} .voucher_type .type_list li:nth-of-type(3n+1){margin-left:0;} .voucher_type .type_list li span{font-size:20px;color:#222;font-weight:400;letter-spacing:-0.4px;text-align: left;position: relative;} .voucher_type .type_list li span em{display: block;font-size:18px;color:inherit;font-weight:inherit;} @media only screen and (max-width:1500px){ .voucher_type:before{left:-12vw;} .voucher_type .type_list li span{font-size:18px;} .voucher_type .type_list li span em{font-size:15px;} } @media only screen and (max-width:1300px){ .voucher_type:before{left:-16vw;} .voucher_type .type_list li{background-position:left 10px center;padding-left:55px;} .voucher_type .type_list li span{font-size:16px;} .voucher_type .type_list li span em{font-size:13px;} } /*지원대상*/ .voucher_target{padding-top:98px;padding-bottom:120px;} .voucher_target:before{width:100%;height:32.4%;content:"";background:#1a285d;position: absolute;bottom:0;left:0;} .voucher_target .target_table{width:100%;box-sizing:border-box;border-radius:10px;overflow:hidden;border:1px solid #ddd;box-shadow:0px 5px 24px 0 rgba(42, 57, 85, 0.4);margin-top:34px;position: relative;} .voucher_target .w_set:before{width:270px;height:270px;content:"";box-sizing:border-box;border-radius:100%;background:#f1f4f8;position: absolute;right:-7vw;top:9px;} .voucher_target .target_table table{width:100%;border-collapse:collapse;table-layout:fixed;} .voucher_target .target_table table thead tr th{background:#f5f5f5;border-bottom:1px solid #ddd;box-sizing:border-box;font-size:20px;color:#333;font-weight:500;letter-spacing:-0.4px;vertical-align: middle;padding:20px 0;} .voucher_target .target_table table thead tr th + th{border-left:1px solid #ddd;} .voucher_target .target_table table tbody tr th{background:#f1f4f8;box-sizing:border-box;font-size:24px;color:#2846b2;font-weight:500;letter-spacing:-0.48px;border-bottom:1px solid #ddd;border-right:1px solid #ddd;} .voucher_target .target_table table tbody tr td{font-size:17px;color:#777;font-weight:400;letter-spacing:-0.34px;line-height:26px;vertical-align: middle;font-family:'Noto Sans KR';border-bottom:1px solid #ddd;padding:14px 10px 16px 20px;background:#fff;} .voucher_target .target_table table tbody tr td + td{border-left:1px solid #ddd;} .voucher_target .target_table table tbody tr td strong{font-weight:400;color:#2d4ab4;} .voucher_target .target_table table tbody tr td ul li{padding-left:14px;position: relative;} .voucher_target .target_table table tbody tr td ul li:before{width:4px;height:4px;content:"";background:#999;box-sizing:border-box;border-radius:100%;position: absolute;left:0;top:12px;} .voucher_target .target_table table tbody tr td ul li + li{margin-top:4px;} .voucher_target .target_table table tbody tr td ul li span{display: block;} .voucher_target .target_table table tbody tr td p{font-size:17px;color:#333;font-weight:400;letter-spacing:-0.34px;} @media only screen and (max-width:1600px){ .voucher_target .w_set:before{right:3vw;} } @media only screen and (max-width:1500px){ .voucher_target .target_table table thead tr th{font-size:18px;} .voucher_target .target_table table tbody tr th{font-size:20px;} .voucher_target .target_table table tbody tr td{font-size:14px;} .voucher_target .target_table table tbody tr td p{font-size:15px;} } @media only screen and (max-width:1300px){ .voucher_target .target_table table tbody tr td{padding:14px 5px 16px 10px;} .voucher_target .target_table table tbody tr td ul li{padding-left:9px;} } /*─────────────────────────────────────────────────────────── 부가서비스 - 유지관리 ───────────────────────────────────────────────────────────*/ #container.addition_container{width:100%;} #container.addition_container *{font-family:'Noto Sans KR';} #container.addition_container #contents{padding:0;} #container.addition_container #contents > div{box-sizing:border-box;position: relative;} /*sub visual*/ .addition_container .sub_visual{width:100%;height:500px;} .addition_container .sub_visual .visual_title{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align: center;box-sizing:border-box;padding:0 30px;} .addition_container .sub_visual .visual_title h2{font-size:74px;color:#fff;font-weight:700;letter-spacing:-1.48px;} .addition_container .sub_visual .visual_title p{font-size:22px;color:#fff;font-weight:400;letter-spacing:-0.4px;margin-top:14px;} .sub_ma .sub_visual{background:url('../image/sub/ma-bg.jpg')no-repeat center;background-size:cover;} .sub_ma .sub_visual:before{background:url('../image/sub/visual_txt_ma.png')no-repeat left center;height:125px;} /*서비스*/ .sub_addition_service{margin-top:80px;} .sub_addition_service:before{width:495px;height:495px;content:"";box-sizing:border-box;border-radius:100%;position: absolute;left:-69px;bottom:-235px;background:#2846b2;z-index:2;} .sub_addition_service .service_step{font-size:0;text-align: center;display:flex;margin-top:44px;position: relative;z-index:4;} .sub_addition_service .service_step:before{width:270px;height:270px;content:"";background:#f1f4f8;box-sizing:border-box;border-radius:100%;position: absolute;right:-143px;top:-135px;} .sub_addition_service .service_step li{display: inline-block;vertical-align: top;width:calc(25% - 45px);border-radius:10px; box-shadow: 0px 5px 24px 0 rgba(126, 150, 192, 0.4);background:#fff;position: relative;border:none !important;padding:0;} .sub_addition_service .service_step li + li{margin-left:60px;} .sub_addition_service .service_step li + li:before{width:10px;height:10px;content:"";border:2px solid #888;border-width:2px 2px 0 0;transform:rotate(45deg);position: absolute;left:-40px;top:47.5%;} .sub_addition_service .service_step li:after{} .sub_addition_service .service_step li dl{box-sizing:border-box;padding:29px 10px 35px;position: relative;overflow:hidden;border-radius:10px;} .sub_addition_service .service_step li dl:before{width:100%;height:4px;content:"";background:#497ddb;position: absolute;top:0;left:0;} .sub_addition_service .service_step li:nth-child(1) dl:before, .sub_addition_service .service_step li:nth-child(2) dl:before{background:#497ddb;} .sub_addition_service .service_step li:nth-child(3) dl:before{background:#0e48b1;} .sub_addition_service .service_step li:nth-child(4) dl:before{background:#343eb7;} .sub_addition_service .service_step li dl dt{font-size:26px;color:#333;font-weight:500;letter-spacing:-1.04px;} .sub_addition_service .service_step li dl dt span{font-size:18px;color:#497ddb;font-weight:400;letter-spacing:-0.36px;display: block;font-family:'Inter';margin-bottom:12px;} .sub_addition_service .service_step li:nth-child(3) dl dt span{color:#0e48b1;} .sub_addition_service .service_step li:nth-child(4) dl dt span{color:#343eb7;} .sub_addition_service .service_step dd{font-size:18px;color:#666;font-weight:300;letter-spacing:-0.72px;line-height:28px;margin-top:20px;padding-top:62px;} .sub_addition_service .service_step li:nth-child(1) dd{background:url('../image/sub/ma-service-01.png')no-repeat center top;} .sub_addition_service .service_step li:nth-child(2) dd{background:url('../image/sub/ma-service-02.png')no-repeat center top;} .sub_addition_service .service_step li:nth-child(3) dd{background:url('../image/sub/ma-service-03.png')no-repeat center top;} .sub_addition_service .service_step li:nth-child(4) dd{background:url('../image/sub/ma-service-04.png')no-repeat center top;} /*처리현황*/ .ma_table{width:100%;background:#f3f7fb;margin-top:100px;padding:100px 0 125px;text-align: center;} .ma_table .table_box{width:100%;box-sizing:border-box; box-shadow: 0px 5px 24px 0 rgba(42, 57, 85, 0.31);border-radius:10px;overflow:hidden;margin-top:46px;} .ma_table .table_box *{font-family:'Inter', 'Noto Sans KR';} .ma_table .process_status_title{display:table;width:100%;border-collapse:collapse;text-align: center;} .ma_table .process_status_title span{display: table-cell;box-sizing:border-box;font-size:20px;color:#fff;font-weight:500;letter-spacing:-0.4px;background:#21242d;padding:15px 0;} .ma_table .process_status_title span + span{border-left:1px solid #666;} .ma_table .process_status_title span:nth-child(1){width:15%;} .ma_table .process_status_title span:nth-child(3){width:24%;} .ma_table .process_status_title span:nth-child(4){width:16%;} .ma_table .process_cont{height:560px !important} .ma_table .process_cont .process_list{display:table !important;font-size:0;} .ma_table .process_cont .slick-slide{border:none;border-top:1px solid #ddd;height:56px;box-sizing:border-box;} .ma_table .process_cont .process_list span{font-size:17px;color:#666;font-weight:400;letter-spacing:-0.34px;background:#fff;padding:14px 0;display:table-cell;box-sizing:border-box;} .ma_table .process_cont .process_list span + span{border-left:1px solid #ddd;} .ma_table .process_cont .process_list span:nth-child(1){width:15%;} .ma_table .process_cont .process_list span:nth-child(3){width:24%;} .ma_table .process_cont .process_list span:nth-child(4){width:16%;} .ma_table .process_cont .process_list + .process_list span{border-top:1px solid #ddd;} .ma_table .process_cont .process_list span.title{color:#333;} .ma_table .process_cont .process_list span.nopay{color:#28adb2;font-weight:500;} .ma_table .process_cont .process_list span.pay{color:#2846b2;font-weight:500;} .ma_table .btn_more{display: inline-block;box-sizing:border-box;background:transparent;border:1px solid #555;width:240px;height:70px;line-height:66px;font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;margin-top:60px;text-align: center;transition:all 0.5s;} .ma_table .btn_more:hover{background:#2846b2;border:1px solid #2846b2;color:#fff;transition:all 0.5s;} /*정기 유지관리*/ .regular_ma{margin-top:100px;} .ma_charge_list{font-size:0;text-align: center;margin-top:35px;} .ma_charge_list > li{display: inline-block;box-sizing:border-box;vertical-align: top;border-radius:10px;box-shadow: 0px 5px 24px 0 rgba(42, 57, 85, 0.31);width:calc(33.3333% - 27px);overflow:hidden;} .ma_charge_list > li + li{margin-left:40px;} .ma_charge_list > li .title{box-sizing:border-box;padding:27px 0 20px 0;} .ma_charge_list > li:nth-child(1) .title{background:#497ddb;} .ma_charge_list > li:nth-child(2) .title{background:#2461cf;} .ma_charge_list > li:nth-child(3) .title{background:#0e48b1;} .ma_charge_list > li .title *{font-family:'Noto Sans KR';} .ma_charge_list > li .title h4{font-size:40px;color:#fff;font-weight:700;letter-spacing:-0.8px;} .ma_charge_list > li .title h4 span{display: block;font-size:17px;color:rgba(255, 255, 255, 0.8);font-weight:400;letter-spacing:-0.34px;margin-bottom:2px;} .ma_charge_list > li .title .m_pay{display: inline-block;box-sizing:border-box;border:1px solid #fff;border-radius:18px;font-size:20px;color:#fff;font-weight:500;height:36px;line-height:36px;padding:0 12px;margin-top:17px;} .ma_charge_list > li .title .price_box{margin-top:17px;} .ma_charge_list > li .title .price_box span{display: inline-block;vertical-align: top;font-family:'Inter', 'Noto Sans KR' !important;line-height:42px;} .ma_charge_list > li .title .price_box .price{font-size:18px;color:rgba(255, 255, 255, 0.8);font-weight:400;text-decoration:line-through;padding-top:3px;} .ma_charge_list > li .title .price_box .c_price{font-size:20px;color:#fff;font-weight:400;letter-spacing:-0.8px;margin-left:17px;} .ma_charge_list > li .title .price_box .c_price strong{font-size:28px;font-weight:700;letter-spacing:-1.12px;font-family:inherit !important;} .ma_charge_list > li .cont{background:#fff;box-sizing:border-box;padding:26px 30px 20px 30px;} .ma_charge_list > li .cont ul{text-align:left;} .ma_charge_list > li .cont ul li{display:flex;align-items:center;box-sizing:border-box;justify-content:space-between;width:100%;} .ma_charge_list > li .cont ul li + li{border-top:1px solid #ddd;margin-top:10px;padding-top:9px;} .ma_charge_list > li .cont ul li *{font-family:'Noto Sans KR';} .ma_charge_list > li .cont ul li .txt{position: relative;box-sizing:border-box;padding-left:11px;} .ma_charge_list > li .cont ul li .txt:before{width:3px;height:3px;content:"";background:#aaa;box-sizing:border-box;border-radius:100%;position: absolute;left:0;top:13px;} .ma_charge_list > li .cont ul li .txt p{font-size:17px;color:#333;font-weight:500;letter-spacing:-0.34px;} .ma_charge_list > li .cont ul li .txt span{display: block;font-size:14px;color:#888;font-weight:400;letter-spacing:-0.28px;line-height:20px;margin-top:2px;} .ma_charge_list > li .cont ul li .cnt{font-size:16px;color:#666;font-weight:400;letter-spacing:-0.32px;} .regular_ma .caution{width:100%;box-sizing:border-box;font-size:0;border-radius:10px;box-shadow: 0px 5px 24px 0 rgba(42, 57, 85, 0.31);overflow:hidden;display:flex;margin-top:40px;} .regular_ma .caution dt, .regular_ma .caution dd{box-sizing:border-box;} .regular_ma .caution dt{width: 180px;background:#f5f5f5;font-size:22px;color:#333;font-weight:500;letter-spacing:-0.44px;padding-left:30px;padding-top:24px;} .regular_ma .caution dd{padding:21px 0 26px 30px;} .regular_ma .caution dd ul li{font-size:16px;color:#666;letter-spacing:-0.32px;line-height:32px;position: relative;box-sizing:border-box;padding-left:13px;} .regular_ma .caution dd ul li:before{width:3px;height:3px;content:"";background:#aaa;box-sizing:border-box;border-radius:100%;position: absolute;left:0;top:16px;} /*건별 유지관리*/ .cbc_ma{margin-top:120px;padding-bottom:120px;} .cbc_ma:before{width:100%;height:31%;content:"";background:#1b285d;position: absolute;bottom:0;left:0;} .ma_case_wrap{font-size:0;margin-top:37px;position: relative;z-index:3;} .ma_case_wrap .ma_case{display: inline-block;box-sizing:border-box;vertical-align: top;border-radius: 10px;box-shadow: 0px 5px 24px 0 rgba(42, 57, 85, 0.31);width:calc(50% - 15px);overflow:hidden;background:#fff;} .ma_case_wrap .ma_case + .ma_case{margin-left:30px;} .ma_case_wrap .ma_case table{} .ma_case_wrap .ma_case table thead tr th{font-size:20px;color:#fff;font-weight:500;letter-spacing:-0.4px;background:#21242d;padding:15px 0;text-align: center;} .ma_case_wrap .ma_case table thead tr th + th{border-left:1px solid #666;} .ma_case_wrap .ma_case table tbody tr th{border-right:1px solid #ddd;box-sizing:border-box;background:rgba(221,221,221,0.3);font-size:17px;color:#333;font-weight:400;text-align:left;line-height:22px;vertical-align: middle;padding:10px 0 10px 20px;} .ma_case_wrap .ma_case table tbody tr th span{font-size:14px;color:#666;} .ma_case_wrap .ma_case table tbody tr + tr th{border-top:1px solid #ddd;} .ma_case_wrap .ma_case table tbody tr td{font-size:16px;color:#777;font-weight:400;letter-spacing:-1px;background:#fff;padding:6px 0;vertical-align: middle;padding-left:20px;line-height:25px;} .ma_case_wrap .ma_case table tbody tr td.price{font-size:17px;color:#333;padding:0 10px;text-align: center;} .ma_case_wrap .ma_case table tbody tr + tr td{border-top:1px solid #ddd;} .ma_case_wrap .ma_case table tbody tr td + td{border-left:1px solid #ddd;} .ma_case_wrap .ma_case table tbody tr td ul li{color:#666;line-height:24px;position: relative;box-sizing:border-box;padding-left:11px;} .ma_case_wrap .ma_case table tbody tr td ul li:before{width:3px;height:3px;content:"";background:#aaa;box-sizing:border-box;border-radius:100%;position: absolute;left:0;top:12px;} .ma_case_wrap .ma_case table tbody tr td ul li + li{margin-top:12px;} /*─────────────────────────────────────────────────────────── 부가서비스 - 호스팅 ───────────────────────────────────────────────────────────*/ .sub_hosting .sub_visual{background:url('../image/sub/hosting-bg.jpg')no-repeat center;background-size:cover;} .sub_hosting .sub_visual:before{background:url('../image/sub/visual_txt_hosting.png')no-repeat center;height:126px;} /*호스팅이란*/ .sub_hosting_intro{margin-top:80px;padding-bottom:96px;} .sub_hosting_intro:before{width:100%;height:49%;content:"";background:#f3f7fb;position: absolute;bottom:0;left:0;} .sub_hosting_intro .intro_box{font-size:0;text-align: center;margin-top:56px;position: relative;z-index: 5;display:flex;} .sub_hosting_intro .intro_box > div{display: inline-block;box-sizing:border-box;vertical-align: top;position: relative;width:33.3333%;} .sub_hosting_intro .intro_box > div:nth-child(1):before, .sub_hosting_intro .intro_box > div:nth-child(3):before{width:90px;height:90px;content:"";box-sizing:border-box;border-radius:100%;position: absolute;top:20%;background:#ddd;} .sub_hosting_intro .intro_box > div:nth-child(1):before{right:-6%;} .sub_hosting_intro .intro_box > div:nth-child(3):before{left:-6%;} .sub_hosting_intro .intro_box > div:nth-child(1):after, .sub_hosting_intro .intro_box > div:nth-child(3):after{width:60px;height:60px;content:"";box-sizing:border-box;border-radius:100%;position: absolute;box-shadow: 0px 5px 24px 0 rgba(42, 57, 85, 0.4);top:23.5%;background:#222 url('../image/sub/hosting_plus.png')no-repeat center;} .sub_hosting_intro .intro_box > div:nth-child(1):after{right:-2.5%;} .sub_hosting_intro .intro_box > div:nth-child(3):after{left:-2.5%;} .sub_hosting_intro .intro_box .icon{display:flex;height:230px;align-items:center;justify-content:center;} .sub_hosting_intro .intro_box > .hosting .icon{height:230px;} .sub_hosting_intro .intro_box .icon img{height:120px;} .sub_hosting_intro .intro_box > .hosting .icon img{height:100%;} .sub_hosting_intro .intro_box .txt_box{margin-top:50px;box-sizing:border-box;} .sub_hosting_intro .intro_box .txt_box dt{font-size:28px;color:#333;font-weight:500;letter-spacing:-1.4px;} .sub_hosting_intro .intro_box .txt_box dd{font-size:18px;color:#333;font-weight:300;letter-spacing:-0.9px;line-height:28px;margin-top:8px;} .sub_hosting_intro .intro_box > .hosting .txt_box{padding-right:16px;} .sub_hosting_intro .intro_box > .hosting .txt_box dt{font-size:32px;} .sub_hosting_intro .intro_box > .hosting .txt_box dd{font-size:19px;font-weight:400;} /*비용 안내*/ .hosting_charge.sub_charge:before{bottom:-124px;} .hosting_charge.sub_charge .charge_list{margin-top:32px;} .hosting_charge.sub_charge .charge_list li{width:calc(25% - 24px);padding:30px 30px 40px 30px;} .hosting_charge.sub_charge .charge_list li + li{margin-left:32px;} .hosting_charge.sub_charge .charge_list > li > dl > dt{background:url('../image/sub/php-logo.png')no-repeat center top;font-size:40px;color:#333;font-weight:700;letter-spacing:-0.8px;padding-top:45px;} .hosting_charge.sub_charge .charge_list li dl .price{font-size:36px;font-weight:700;letter-spacing:-1.44px;font-family:'Inter', 'Noto Sans KR' !important;margin-top:7px;} .hosting_charge.sub_charge .charge_list li dl .price em{font-size:20px;font-weight:400;letter-spacing:-0.8px;} .hosting_charge.sub_charge .charge_list > li > dl > dd{box-sizing:border-box;border-top:1px solid #ddd;margin-top:23px;padding-top:19px;} .hosting_charge.sub_charge .charge_list .cont{} .hosting_charge.sub_charge .charge_list .cont dl{position: relative;padding-left:13px;box-sizing:border-box;text-align:left;} .hosting_charge.sub_charge .charge_list .cont dl:before{width:3px;height:3px;content:"";background:#aaa;box-sizing:border-box;border-radius:100%;position: absolute;left:0;top:19px;} .hosting_charge.sub_charge .charge_list .cont dl:after{clear:both;content:"";display: block;} .hosting_charge.sub_charge .charge_list .cont dl dt, .hosting_charge.sub_charge .charge_list .cont dl dd{display: inline-block;vertical-align: top;font-size:16px;color:#333;font-weight:400;letter-spacing:-0.32px;line-height:40px;} .hosting_charge.sub_charge .charge_list .cont dl dd{float: right;text-align: right;} .hosting_charge.sub_charge .charge_list li dl dd a{margin-top:19px;} .hosting_charge.sub_charge .intro_txt{font-size:18px;color:#333;letter-spacing:-0.6px;margin-top:35px;} @media only screen and (max-width:1350px){ .hosting_charge.sub_charge .charge_list > li > dl > dt{font-size:34px;} } /*선택 이유*/ .hosting_reason{background:#f3f7fb;padding:120px 0 115px;margin-top:16px;} .hosting_reason .reason_list{font-size:0;text-align: center;display:flex;justify-content:space-around;margin-top:77px;} .hosting_reason .reason_list li{display: inline-block;box-sizing:border-box;width:16.666%;} .hosting_reason .reason_list .icon{width:120px;height:120px;box-sizing:border-box;margin:0 auto;border-radius:100%;display:flex;align-items:center;justify-content:center;background:#fff;} .hosting_reason .reason_list p{font-size:20px;color:#333;font-weight:400;letter-spacing:-1px;line-height:28px;margin-top:20px;} /*─────────────────────────────────────────────────────────── 부가서비스 - ssl ───────────────────────────────────────────────────────────*/ .sub_ssl .sub_visual{background:url('../image/sub/ssl-bg.jpg')no-repeat center;background-size:cover;} .sub_ssl .sub_visual:before{background:url('../image/sub/visual_txt_ssl.png')no-repeat center;height:126px;} /*보안인증서*/ .ssl_introduce{margin-top:80px;} .ssl_introduce .introduce_wrap{margin-top:44px;position: relative;} .ssl_introduce .introduce_wrap:after{clear:both;content:"";display: block;} .ssl_introduce .ssl_compare{display: inline-block;box-sizing:border-box;vertical-align: top;border-radius: 10px;box-shadow: 0px 5px 24px 0 rgba(42, 57, 85, 0.31);} .ssl_introduce .ssl_compare dt{box-sizing:border-box;border-radius:10px 10px 0 0;text-align: center;padding:16px 40px 28px;} .ssl_introduce .ssl_compare dt h4{font-size:26px;color:#fff;font-weight:500;letter-spacing:-1.3px;} .ssl_introduce .ssl_compare dt .img{width:360px;height:50px;box-sizing:border-box;border-radius:6px;overflow:hidden;box-shadow: 8.5px 14.7px 24px 0 rgba(42, 57, 85, 0.19);margin:15px auto 0;position: relative;} .ssl_introduce .ssl_compare dd{box-sizing:border-box;border-radius:0 0 10px 10px;text-align: center;padding:22px 27px 28px 28px;position: relative;} .ssl_introduce .ssl_compare dd:before{width:100%;height:2px;content:"";position: absolute;top:39.3%;} .ssl_introduce .ssl_compare dd .sub_ssl_tit{font-size:22px;color:#333;font-weight:400;letter-spacing:-1.6px;} .ssl_introduce .ssl_compare dd .sub_ssl_tit strong{display: inline-block;position: relative;font-size:inherit;font-weight:500;} .ssl_introduce .ssl_compare dd .sub_ssl_tit strong:before{width:100%;height:10px;content:"";opacity:0.2;position: absolute;left:0;bottom:1px;} .ssl_introduce .ssl_compare dd .img_box{margin-top:21px;box-sizing:border-box;} .ssl_introduce .ssl_compare dd .img_box:after{clear:both;content:"";display: block;} .ssl_introduce .ssl_compare dd .img_box > div{display: inline-block;vertical-align: middle;} .ssl_introduce .ssl_compare dd .img_box .lock{background:#fff;margin-top:33px;position: relative;} .ssl_introduce .ssl_compare dd .img_box .lock:before{width:29px;height:28px;content:"";position: absolute;left:31%;bottom:-60px;} .ssl_introduce .ssl_compare dd .img_box .server p{text-align: center;font-size:18px;color:#333;font-weight:400;letter-spacing:-0.9px;margin-top:9px;box-sizing:border-box;} .ssl_introduce .ssl_compare dd .txt_box{width:100%;box-sizing:border-box;border-radius:10px;margin-top:21px;padding:21px 0 25px;} .ssl_introduce .ssl_compare dd .txt_box p{font-size:18px;color:#333;font-weight:500;letter-spacing:-1.1px;} .ssl_introduce .ssl_compare dd .txt_box p strong{font-size:inherit;font-weight:700;letter-spacing:inherit;} /*가운데*/ .ssl_introduce .info_write{position: absolute;width:220px;height:220px;left:50%;top:33.5%;transform:translate(-50%);text-align: center;z-index:5;} .ssl_introduce .info_write:before{width:calc(100% + 42px);height:calc(100% + 42px);content:"";box-sizing:border-box;border-radius:100%;background:#fff;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .ssl_introduce .info_write p{display: block;width:100%;height:100%;font-size:20px;color:#333;font-weight:400;letter-spacing:-1px;line-height:26px;box-sizing:border-box;background:url('../image/sub/sec-info.png')no-repeat center top;margin-top:-29px;padding-top:164px;position: relative;z-index:3;} .ssl_introduce .info_write:after{width:100%;height:100%;content:"";box-sizing:border-box;border-radius:100%;background:#f3f7fb;position: absolute;left:0;top:0;} /*위험*/ .ssl_introduce .ssl_compare.no_ssl{float: left;} .ssl_introduce .ssl_compare.no_ssl dt{background:#ba3422;} .ssl_introduce .ssl_compare.no_ssl dt .img:before{width:175px;height:30px;content:"";box-sizing:border-box;border-radius:15px;border:2px solid #ba3422;box-shadow: 8.5px 14.7px 24px 0 rgba(42, 57, 85, 0.19);position: absolute;top:10px;left:110px;} .ssl_introduce .ssl_compare.no_ssl dd{border:2px solid #ba3422;} .ssl_introduce .ssl_compare.no_ssl dd:before{background:#ba3422;right:-34%;} .ssl_introduce .ssl_compare.no_ssl dd .sub_ssl_tit strong{color:#ba3422;} .ssl_introduce .ssl_compare.no_ssl dd .sub_ssl_tit strong:before{background:#ba3422;} .ssl_introduce .ssl_compare.no_ssl dd .img_box{text-align: left;padding-left:20px;padding-right:80px;} .ssl_introduce .ssl_compare.no_ssl dd .img_box .lock{padding:0 24px 0 5px;float: right;} .ssl_introduce .ssl_compare.no_ssl dd .img_box .lock:before{background:url('../image/sub/ssl-arw-danger.png')no-repeat center;} .ssl_introduce .ssl_compare.no_ssl dd .txt_box{text-align: right;background:#fbf5f4 url('../image/sub/sec-danger.png')no-repeat right 30px top 20px;padding-right:104px;} .ssl_introduce .ssl_compare.no_ssl dd .txt_box p strong{color:#ba3422;} /*보안*/ .ssl_introduce .ssl_compare.ssl{float:right;width:36%;} .ssl_introduce .ssl_compare.ssl dt{background:#2846b2;} .ssl_introduce .ssl_compare.ssl dt .img:before{width:100px;height:30px;content:"";box-sizing:border-box;border-radius:15px;border:2px solid #2846b2;box-shadow: 8.5px 14.7px 24px 0 rgba(42, 57, 85, 0.19);position: absolute;top:10px;left:110px;} .ssl_introduce .ssl_compare.ssl dd{border:2px solid #2846b2;} .ssl_introduce .ssl_compare.ssl dd:before{background:#2846b2;left:-35%;} .ssl_introduce .ssl_compare.ssl dd .sub_ssl_tit strong{color:#2846b2;} .ssl_introduce .ssl_compare.ssl dd .sub_ssl_tit strong:before{background:#2846b2;} .ssl_introduce .ssl_compare.ssl dd .img_box{text-align:right;padding-right:7px;padding-left:81px;} .ssl_introduce .ssl_compare.ssl dd .img_box .lock{padding:0 22px 0 22px;float: left;} .ssl_introduce .ssl_compare.ssl dd .img_box .lock:before{background:url('../image/sub/ssl-arw-safe.png')no-repeat center;left:35%;} .ssl_introduce .ssl_compare.ssl dd .img_box .server p{padding-right:30px;} .ssl_introduce .ssl_compare.ssl dd .txt_box{text-align:left;background:#ebf1f7 url('../image/sub/sec-safe.png')no-repeat left 30px top 20px;padding-left:104px;} .ssl_introduce .ssl_compare.ssl dd .txt_box p strong{color:#2846b2;} /*도입효과*/ .ssl_effect{background:#f3f7fb;margin-top:120px;padding:120px 0 85px;} .ssl_effect .effect_list{display:flex;text-align: center;justify-content:space-between;margin-top:44px;} .ssl_effect .effect_list li{display: inline-block;box-sizing:border-box;background:#fff;border-radius: 10px;box-shadow: 0px 5px 24px 0 rgba(126, 150, 192, 0.4);width:calc(25% - 24px);padding:30px 10px 35px 10px;} .ssl_effect .effect_list li .icon{height:128px;display:flex;justify-content:center;align-items:center;} .ssl_effect .effect_list li dl{margin-top:20px;} .ssl_effect .effect_list li dt{font-size:30px;color:#333;font-weight:400;letter-spacing:-1.2px;} .ssl_effect .effect_list li dd{font-size:17px;color:#666;font-weight:300;letter-spacing:-0.85px;line-height:28px;margin-top:12px;} @media only screen and (max-width:1400px){ .ssl_effect .effect_list li dd{font-size:15px;line-height:25px;} } @media only screen and (max-width:1300px){ .ssl_introduce .ssl_compare dt h4{font-size:22px;} .ssl_introduce .ssl_compare dd .txt_box p{font-size:16px;} .ssl_introduce .info_write{width:200px;height:200px;} .ssl_introduce .info_write:before{width:calc(100% + 20px);height:calc(100% + 20px);} .ssl_introduce .info_write p{font-size:18px;} .ssl_effect .effect_list li dd{font-size:14px;} } /*─────────────────────────────────────────────────────────── 부가서비스 - 도메인 ───────────────────────────────────────────────────────────*/ .sub_domain .sub_visual{background:url('../image/sub/domain-bg.jpg')no-repeat center;background-size:cover;} .sub_domain .sub_visual:before{background:url('../image/sub/visual_txt_domain.png')no-repeat center;height:126px;} /*도메인 검색*/ .domain_wrap{margin-top:89px;} .domain_wrap h3{font-size:28px;color:#222;font-weight:400;letter-spacing:-0.56px;text-align: center;} .domain_wrap .domain_search_box{margin-top:32px;} .domain_wrap .domain_search_box .search_box{width:100%;box-sizing:border-box;background:#2846b2;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:50px 0;} .domain_wrap .domain_search_box .search_box span{font-size:30px;color:#fff;font-weight:400;font-family:'Inter' !important;} .domain_wrap .domain_search_box .search_box input[type="text"]{height:60px;box-sizing:border-box;border-radius:6px;box-shadow: 8.5px 14.7px 24px 0 rgba(42, 57, 85, 0.19);font-size:20px;color:#888;font-weight:400;letter-spacing:-0.4px;border:none;outline:none;padding-left:20px;margin-left:22px;width:69.5%;} .domain_wrap .domain_search_box .search_box input[type="text"]::placeholder{color:#888;} .domain_wrap .domain_search_box .search_box input[type="text"]:focus{color:#000;} .domain_wrap .domain_search_box .search_box .btn_search{width:180px;height:60px;line-height:60px;box-sizing:border-box;border-radius:6px;box-shadow: 8.5px 14.7px 24px 0 rgba(42, 57, 85, 0.19);margin-left:10px;font-size:20px;color:#fff;font-weight:500;letter-spacing:-0.4px;text-align: center;background:#21242d url('../image/sub/icon-search.png')no-repeat 36% center;padding-left:34px;cursor:pointer;} /*리스트*/ .domain_list_box{margin-top:50px;} .domain_list_box:after{clear:both;content:"";display: block;} .domain_list_box .domain_list, .domain_list_box .application_box{display: inline-block;box-sizing:border-box;vertical-align: top;} .domain_list_box .domain_list{width:68.8%;} .domain_list_box .domain_list li:first-of-type{border-top:1px solid #000;} .domain_list_box .domain_list li{box-sizing:border-box;border-bottom:1px solid #ddd;padding:0 20px;} .domain_list_box .domain_list li .cont{display:flex;justify-content:space-between;} .domain_list_box .domain_list li .cont .domain_name span{display: inline-block;font-size:18px;color:#222;font-weight:400;letter-spacing:-0.36px;line-height:60px;font-family:'Inter', 'Noto Sans KR' !important;} .domain_list_box .domain_list li .cont .domain_name em{font-size:16px;color:#2846b2;font-weight:400;letter-spacing:-0.32px;display: inline-block;margin-left:10px;} .domain_list_box .domain_list li .price_box{display:flex;align-items:center;} .domain_list_box .domain_list li .price_box .regist_domain{color:#d71419;font-weight:500;} .domain_list_box .domain_list li .price_box .price{} /* .domain_list_box .domain_list li .price_box .price span{display: inline-block;font-size:16px;color:#333;font-weight:400;letter-spacing:-0.32px;font-family:'Inter', 'Noto Sans KR' !important;} .domain_list_box .domain_list li .price_box .price .c_price{font-size:18px;color:#2846b2;font-family:'Inter', 'Noto Sans KR' !important;} .domain_list_box .domain_list li .price_box .price .c_price em{font-size:16px;color:inherit;font-family:inherit !important;} .domain_list_box .domain_list li .price_box .price .l_price em{font-size:inherit;color:inherit;font-weight:inherit;text-decoration:line-through;font-family:inherit !important;} */ .domain_list_box .domain_list li .price_box button{width:80px;height:35px;line-height:33px;box-sizing:border-box;border-radius:4px;border:1px solid #2846b2;background:#fff;font-size:16px;color:#2846b2;font-weight:400;letter-spacing:-0.32px;margin-left:24px;} .domain_list_box .domain_list li .price_box button.no_regist{background:#d71419;border:1px solid #d71419;color:#fff;} .domain_list_box .domain_list li .price_box button.no_regist:hover{background:#d71419;border:1px solid #d71419;color:#fff;} .domain_list_box .domain_list li:hover, .domain_list_box .domain_list li.on{background:#f3f7fb;} .domain_list_box .domain_list li .price_box button:hover{background:#2846b2;color:#fff;} .domain_list_box .domain_list li .price_box button.on{background:#555;color:#fff;border-color:#555;} .application_box{border-radius:10px;background:#f3f7fb;float: right;width:28.1%;position:sticky;top:150px;padding:24px 30px 30px 30px;} .application_box dl dt{position: relative;box-sizing:border-box;border-bottom:1px solid #ccc;padding-bottom:15px;} .application_box dl dt p{font-size:18px;color:#333;font-weight:400;letter-spacing:-0.36px;font-family:'Inter', 'Noto Sans KR' !important;} .application_box dl dt p strong{font-size:inherit;color:#2846b2;font-weight:inherit;} .application_box .app_all_chk{width:13px;height:12px;background:url('../image/sub/choice-del.png')no-repeat center;position: absolute;right:0;top:8px;cursor:pointer;} .application_box dl .choice_list{margin-top:17px;} .application_box dl .choice_list li{position: relative;font-size:18px;color:#222;font-weight:400;letter-spacing:-0.36px;line-height:42px;font-family:'Inter', 'Noto Sans KR' !important;} .application_box dl .choice_list li .btn_del{width:13px;height:12px;background:url('../image/sub/choice-del.png')no-repeat center;position: absolute;right:0;top:14px;cursor:pointer;} .application_box dl .btn_applicate{width:100%;box-sizing:border-box;border-radius:10px;height:60px;line-height:58px;background:#2846b2;text-align: center;font-size:20px;color:#fff;font-weight:500;letter-spacing:-0.4px;display: block;margin-top:75px;} /*로고*/ .domain_logo{margin-top:50px;} .domain_logo ul{display:flex;flex-wrap:wrap;box-sizing:border-box;border-radius:10px;border:1px solid #ddd;border-width:0 1px;overflow:hidden;} .domain_logo ul li{box-sizing:border-box;width:20%;border:1px solid #ddd;border-width:1px 0;display: flex;justify-content: center;align-items: center;height:160px} .domain_logo ul li:nth-child(n+6){border-top:none;} .domain_logo ul li + li{border-left:1px solid #ddd;} .domain_logo ul li:nth-of-type(5n+1){border-left:none;} /*유의사항*/ .domain_caution{margin-top:40px;box-sizing:border-box;border-radius:10px;background:#f5f5f5;padding:34px 40px 40px 40px;} .domain_caution dt{font-size:22px;color:#333;font-weight:500;letter-spacing:-0.44px;} .domain_caution dd ul{margin-top:17px;} .domain_caution dd ul li{font-size:16px;color:#666;font-weight:400;letter-spacing:-0.6px;line-height:28px;position: relative;padding-left:13px;} .domain_caution dd ul li:before{width:3px;height:3px;content:"";background:#aaa;box-sizing:border-box;border-radius:100%;position: absolute;left:0;top:13px;} /*─────────────────────────────────────────────────────────── 부가서비스 - 제품 촬영 ───────────────────────────────────────────────────────────*/ .sub_shot .sub_visual{background:url('../image/sub/shot-bg.jpg')no-repeat center;background-size:cover;} .sub_shot .sub_visual:before{background:url('../image/sub/visual_txt_shot.png')no-repeat center;height:126px;} /*제품촬영 서비스*/ .sub_charge.shot_service{padding-top:80px;} .sub_charge.shot_service:before{bottom:-97px;} .sub_shot .shot_service .main_title p em{display: block;font-size:18px;color:#777;font-weight:300;margin-top:10px;} .sub_charge.shot_service .charge_list{display:flex;margin-top:49px;} .sub_charge.shot_service .charge_list:before{top:-163px;} .sub_charge.shot_service .charge_list li{width:calc(33.3333% - 67px);border:none !important;padding:0;} .sub_charge.shot_service .charge_list li > div{position: relative;box-sizing:border-box;overflow:hidden;padding:39px 10px 46px 10px;border-radius:10px;} .sub_charge.shot_service .charge_list li > div:before{width:100%;height:4px;content:"";background:#497ddb;position: absolute;top:0;left:0;} .sub_charge.shot_service .charge_list li:nth-child(3) > div:before{background:#2846b2;} .sub_charge.shot_service .charge_list li + li{margin-left:100px;} .sub_charge.shot_service .charge_list li + li:before{width:9px;height:9px;content:"";border:2px solid #555;border-width:2px 2px 0 0;transform:rotate(45deg);position: absolute;top:48%;left:-58px;} .sub_charge.shot_service .charge_list li span{font-size:18px;color:#497ddb;font-weight:400;letter-spacing:-0.36px;font-family:'Inter' !important;} .sub_charge.shot_service .charge_list li:nth-child(3) span{color:#0e48b1;} .sub_charge.shot_service .charge_list li .icon{height:67px;display:flex;justify-content: center;align-items: center;margin-top:23px;} .sub_charge.shot_service .charge_list li dl{margin-top:27px;} .sub_charge.shot_service .charge_list li dl dt{font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;line-height:32px;} .sub_charge.shot_service .charge_list li dl dd{font-size:16px;color:#666;font-weight:300;letter-spacing:-0.64px;line-height:26px;margin-top:10px;} /*포트폴리오*/ .shot_portfolio{margin-top:20px;} .shot_portfolio .portfolio_list{margin-top:43px;} .shot_portfolio .portfolio_list li, .shot_portfolio .portfolio_list li:nth-of-type(3n+1){float:none;} .shot_portfolio .portfolio_list li{width:calc(25% - 6px);margin:0 0 8px 0;} .shot_portfolio .portfolio_list li.grid_h{height:420px;} .shot_portfolio .portfolio_list li:nth-child(13), .shot_portfolio .portfolio_list li:nth-child(15){height:420px;} .shot_portfolio .portfolio_list li.grid_h .thumb{padding-bottom:133.75%;} .shot_portfolio .portfolio_list li:nth-child(13) .thumb, .shot_portfolio .portfolio_list li:nth-child(15) .thumb{padding-bottom:133.75%;} .shot_portfolio .portfolio_list li .thumb{border-radius:6px;padding-bottom:76.5%;} /*pop*/ #layerDim{width:100%;height:100%;position: fixed;top:0;left:0;z-index:31;background:rgba(0,0,0,0.5);} .portfolio_pop{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:32;display: none;width:550px;} .portfolio_pop.on{display: block;} .portfolio_pop .pop_box{position: relative;} .portfolio_pop .pop_box .btn_close{width:25px;height:25px;position: absolute;right:-30px;top:-30px;} .portfolio_pop .pop_box .btn_close a{display: block;width:100%;height:100%;position: relative;} .portfolio_pop .pop_box .btn_close a span{display: inline-block;width:100%;height:2px;background:#fff;position: absolute;top:50%;left:0;} .portfolio_pop .pop_box .btn_close a span:nth-child(1){transform:rotate(-45deg);} .portfolio_pop .pop_box .btn_close a span:nth-child(2){transform:rotate(45deg);} .portfolio_pop img{max-width:100%;} /*문의하기*/ .shot_contact{display:flex;margin-top:140px;} .shot_contact > div{width:50%;text-align: center;box-sizing:border-box;} .shot_contact > div + div{border-left:1px solid #ddd;} .shot_contact > div h4{font-size:34px;color:#333;font-weight:500;letter-spacing:-1.36px;position: relative;z-index:3;} .shot_contact > div h4 p{font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;margin-top:11px;} .shot_contact .img{position: relative;z-index:1;} .shot_contact .img img{max-width:100%;} .shot_contact > div:nth-child(1) .img{transform:translateY(-28px);} .shot_contact > div:nth-child(2) .img{margin-top:65px;} .shot_contact > div a{display: inline-block;box-sizing:border-box;vertical-align: top;width:240px;height:70px;line-height:68px;border:1px solid #555;font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;transition:all 0.5s;} .shot_contact > div a:hover{background:#2846b2;border:1px solid #2846b2;color:#fff;transition:all 0.5s;} .shot_contact > div:nth-child(1) a{position: relative;z-index: 4;margin-top:-58px;} /*컷종류*/ .cut_des{background:rgba(18,61,140,0.06);margin-top:160px;padding:140px 0 120px;} .cut_des:before{width:100%;height:21%;content:"";background:#1b285d;position: absolute;bottom:0;left:0;} .cut_des .cut_sort{} .cut_des .cut{display:flex;align-items:center;} .cut_des .cut + .cut{margin-top:120px;justify-content:flex-end;} .cut_des .cut > div{width:50%;box-sizing:border-box;} .cut_des .cut > div.img_box{width:calc(50% - 20px);font-size:0;} .cut_des .cut .img{display: inline-block;width:100%;box-sizing:border-box;border-radius:10px;box-shadow:0 0 35px 0 rgba(0,0,0,0.17);position: relative;height:0;padding-bottom:61.2%;} .cut_des .cut .img img{border-radius:10px;width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .cut_des .txt_box{} .cut_des .txt_box h4{font-size:40px;color:#333;font-weight:500;letter-spacing:-1.6px;} .cut_des .txt_box p{font-size:20px;color:#333;font-weight:300;letter-spacing:-0.8px;line-height:32px;margin-top:22px;} .cut_des .txt_box a{display: inline-block;box-sizing:border-box;vertical-align: top;width:200px;height:70px;line-height:68px;border:1px solid #555;font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;transition:all 0.5s;text-align: center;margin-top:43px;} .cut_des .txt_box a:hover{background:#2846b2;border:1px solid #2846b2;color:#fff;transition:all 0.5s;} /*누끼컷*/ .cut_des .cut_cut .img{width:calc(50% - 10px);} .cut_des .cut_cut .img + .img{margin-left:10px;} .cut_des .cut_cut .img + .img:before{width:46px;height:46px;content:"";background:#fff;box-sizing:border-box;border-radius:100%;box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.17);position: absolute;left:-28px;top:44%;z-index:5;} .cut_des .cut_cut .img + .img:after{width:9px;height:9px;content:"";border:2px solid #aaa;border-width:2px 2px 0 0;transform:rotate(45deg);position: absolute;top: 48.5%;left: -13px;z-index:6;} .cut_des .cut_cut .txt_box{padding-left:68px;} /*컨셉컷*/ .cut_des .concept_cut .txt_box{text-align: right;padding-right:80px;} .cut_des .concept_cut .img{} /*유의사항*/ .cut_caution{width:100%;box-sizing:border-box;background:#fff;border-radius:10px;margin-top:120px;box-shadow:0 0 35px 0 rgba(0,0,0,0.11);padding:34px 40px 35px 40px;} .cut_caution dt{font-size:22px;color:#333;font-weight:500;letter-spacing:-0.44px;} .cut_caution dd ul{margin-top:12px;} .cut_caution dd ul li{font-size:16px;color:#666;font-weight:400;letter-spacing:-0.5px;line-height:32px;position: relative;box-sizing:border-box;padding-left:13px;} .cut_caution dd ul li strong{font-size:inherit;color:#333;font-weight:inherit;} .cut_caution dd ul li:before{width:3px;height:3px;content:"";background:#aaa;box-sizing:border-box;border-radius:100%;position: absolute;left:0;top:15px;} @media only screen and (max-height:800px){ .portfolio_pop .pop_list{max-height:500px;overflow-y:auto;} .portfolio_pop .pop_list::-webkit-scrollbar{width:5px;background:#eee;} .portfolio_pop .pop_list::-webkit-scrollbar-thumb{width:5px;background:#333;} } @media only screen and (max-width:1400px){ .shot_contact .img{height:344px;} .shot_contact > div:nth-child(1) .img{transform:none;margin-top:65px;} .shot_contact > div:nth-child(1) .img img{transform:translateY(-85px);} .shot_contact > div:nth-child(1) a{margin-top:0;} } @media only screen and (max-width:1300px){ .shot_portfolio .portfolio_list li.grid_h , .shot_portfolio .portfolio_list li:nth-child(13), .shot_portfolio .portfolio_list li:nth-child(15){height:400px;} } /*─────────────────────────────────────────────────────────── 부가서비스 - 제휴서비스 ───────────────────────────────────────────────────────────*/ .sub_shopping_service .sub_visual{background:url('../image/sub/service-bg.jpg')no-repeat center;background-size:cover;} .sub_shopping_service .sub_visual span{display: inline-block;position: relative;vertical-align: top;} .sub_shopping_service .sub_visual span + span{margin-left:25px;padding-left:25px;} .sub_shopping_service .sub_visual span + span:before{width:3px;height:3px;content:"";box-sizing:border-box;border-radius:100%;position: absolute;left:0;top:17px;background:#fff;} /*3d/vr 촬영*/ .sub_vrShot .sub_visual:before{background:url('../image/sub/visual_txt_vr.png')no-repeat center;height:126px;} .sub_3d_shot{padding-top:23px;padding-bottom:137px;} .sub_3d_shot:before{width:100%;height:29.6%;content:"";background:#1a285d;position: absolute;bottom:0;left:0;} /*텍스트*/ .shot_txt{margin-top:59px;} .shot_txt h3{font-size:50px;color:#222;font-weight:500;letter-spacing:-1.6px;} .shot_txt h3 strong{font-size:inherit;color:#2846b2;font-weight:inherit;} .shot_txt h4{font-size:20px;color:#333;font-weight:400;letter-spacing:-1.2px;margin-top:21px;} .shot_txt p{font-size:18px;color:#444;font-weight:300;line-height:34px;margin-top:38px;letter-spacing:-1.1px;} .sub_3d_shot .vr_list{text-align: center;display:flex;justify-content:space-around;margin-top:55px;} .sub_3d_shot .vr_list li{width:20%;} .sub_3d_shot .vr_list li .icon{height:73px;display:flex;justify-content: center;align-items: center;} .sub_3d_shot .vr_list li p{font-size:20px;color:#333;font-weight:400;letter-spacing:-1px;margin-top:26px;} /*vr 투어*/ .vr_tour{margin-top:105px;text-align: center;position: relative;z-index:4;} .vr_tour .main_title h3{font-family:'Inter' !important;padding:15px 0 0 0;font-weight:600;} .vr_tour .tour_box{display:flex;justify-content:space-between;margin-top:42px;position: relative;} .vr_tour .tour_box .tour{width:calc(50% - 20px);box-sizing:border-box;position: relative;border-radius:10px;overflow:hidden;height:0;padding-bottom:31.2%;} .vr_tour .tour_box .tour a{display: block;width:100%;height:100%;position: absolute;top:0;left:0;z-index:5;} .vr_tour .tour_box .tour img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .vr_tour .tour_box .tour > p{font-size:30px;color:#fff;font-weight:700;letter-spacing:-0.9px;position: absolute;bottom:31px;left:40px;} .vr_tour .tour_box .tour .ov_box{width:100%;height:100%;background:rgba(0,0,0,0.4);position: absolute;top:0;left:0;z-index:3;display:flex;align-items: center;justify-content: center;display: none;} .vr_tour .tour_box .tour:hover .ov_box{display: flex;} .vr_tour .tour_box .tour .ov_box p{font-size:22px;color:#fff;font-weight:500;letter-spacing:-0.66px;background:url('../image/sub/vr-click-icon.png')no-repeat center top;padding-top:106px;} .vr_tour .intro_txt{text-align: right;font-size:16px;color:rgba(255,255,255,0.7);font-weight:300;letter-spacing:-0.8px;margin-top:15px;} @media only screen and (max-width:1300px){ .sub_3d_shot .vr_list li p{font-size:18px;} } /*ocr*/ .sub_ocr .sub_visual:before{background:url('../image/sub/visual_txt_ocr.png')no-repeat center;height:126px;} .ocr_service{padding:80px 0 0;text-align: center;} .ocr_service .main_title > span{font-size:20px;color:#666;font-weight:300;letter-spacing:-1px;line-height:34px;display: block;margin-top:30px;} .ocr_service .main_title > span strong{font-size:inherit;color:#333;font-weight:400;letter-spacing:inherit;} .ocr_service .ocr_receipt{display: flex;align-items: center;justify-content: center;margin-top:33px;} .ocr_service .ocr_receipt .receipt_chk{width:400px;box-sizing:border-box;border-radius:10px;box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.22);border:3px solid #2846b2;background:#fff;padding:20px 30px 30px 27px;margin-left:24px;position: relative;} .ocr_service .ocr_receipt .receipt_chk:before{width:484px;height:100%;content:"";background:url('../image/sub/ocr-shadow.png')no-repeat center;background-size:auto 100%;position: absolute;left:-123%;top:0;} .ocr_service .ocr_receipt .receipt_chk .title{box-sizing:border-box;border-bottom:1px solid #ddd;font-size:24px;color:#222;font-weight:500;letter-spacing:-1.2px;margin-bottom:23px;padding-bottom:16px;} .ocr_service .ocr_receipt .receipt_chk .title strong{font-size:inherit;color:#2846b2;font-weight:inherit;} .ocr_service .ocr_receipt .receipt_chk .cont{} .ocr_service .ocr_receipt .receipt_chk .cont table{text-align:left;} .ocr_service .ocr_receipt .receipt_chk .cont table thead tr th{font-size:18px;color:#222;font-weight:500;letter-spacing:-0.9px;padding-bottom:10px;} .ocr_service .ocr_receipt .receipt_chk .cont table tbody tr th{font-size:18px;color:#777;font-weight:400;letter-spacing:-0.9px;} .ocr_service .ocr_receipt .receipt_chk .cont table tbody tr td{width:200px;height:50px;padding:5px 0;} .ocr_service .ocr_receipt .receipt_chk .cont table tbody tr td p {display: block;width:100%;height:100%;background:#f5f5f5;padding:0 0 0 15px;line-height:48px;font-size:18px;color:#222;font-weight:500;letter-spacing:-0.9px;font-family:'Inter', 'Noto Sans KR' !important;box-sizing:border-box;border-radius:4px;} .ocr_service .sub_title{font-size:30px;color:#333;font-weight:500;letter-spacing:-1.5px;margin-top:68px;} /*ocr 분야*/ .ocr_field{background:#f3f7fb;margin-top:118px;position: relative;box-sizing:border-box;padding:101px 0 125px;} .ocr_field.new{padding-bottom:140px;} .ocr_field:before{width:1px;height:100px;content:"";background:#000;top:-40px;left:calc(50% - 1px);position: absolute;} .ocr_field.new:after{width:100%;height:280px;content:"";background:#1b285d;bottom:0;left:0;z-index:1;position: absolute;} .ocr_field h4{font-size:50px;color:#222;font-weight:500;letter-spacing:-1px;position: relative;} .ocr_field h4:before{} .ocr_field ul{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:38px;} .ocr_field ul li{box-sizing:border-box;border-radius: 10px;box-shadow: 0px 5px 24px 0 rgba(126, 150, 192, 0.4);width:calc(25% - 15px);margin-bottom:20px;display:flex;align-items:center;background:#fff;padding:24px 0 24px 31px;} .ocr_field ul li .icon{width:54px;} .ocr_field ul li p{font-size:24px;color:#222;font-weight:400;letter-spacing:-0.48px;padding-left:31px;} .ocr_field .ocr_img{box-sizing:border-box;border-radius: 10px;box-shadow: 0px 5px 24px 0 rgba(126, 150, 192, 0.4);background:#fff;padding:40px 40px;margin-top:30px;position: relative;z-index:2;} .ocr_field .ocr_img .img_box img{width:100%;} .ocr_field .ocr_img .txt_box{width:100%;box-sizing:border-box;border-radius:10px;background:#f5f5f5;text-align: left;margin-top:40px;padding:33px 0 33px 40px;} .ocr_field .ocr_img .txt_box p{font-size:18px;color:#333;font-weight:400;line-height:32px;letter-spacing:-0.6px;} .ocr_field a{display: inline-block;box-sizing:border-box;vertical-align: top;width:240px;height:70px;line-height:68px;border:1px solid #555;font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;transition:all 0.5s;text-align: center;margin-top:40px;} .ocr_field a:hover{background:#2846b2;border:1px solid #2846b2;color:#fff;transition:all 0.5s;} /* 포트폴리오 */ .ocr_portfolio{padding:100px 0 118px; border-bottom:1px solid #ddd; box-sizing:border-box;} .ocr_portfolio .port_list{display:flex; flex-wrap:wrap; gap:60px 25px; margin-top:50px;} .ocr_portfolio .port_list .thumb + .desc{margin-top:30px;} .ocr_portfolio .port_list > li{width:calc(100% / 3 - 16.67px); text-align:center; box-sizing:border-box;} .ocr_portfolio .port_list .thumb{display:block; box-shadow:0 5px 24px rgba(126, 150, 192, 0.4); border-radius:10px; overflow:hidden;} .ocr_portfolio .port_list .thumb img{max-width:100%; max-height:100%;} .ocr_portfolio .port_list .desc dt{font-size:22px; font-weight:400; color:#333; line-height:1.36; letter-spacing:-0.03em;} .ocr_portfolio .port_list .desc dt + dd{margin-top:10px;} .ocr_portfolio .port_list .desc dd{font-size:18px; font-weight:400; color:#777; line-height:1.45; letter-spacing:-0.03em;} /*물류서비스*/ .sub_logis .sub_visual:before{background:url('../image/sub/visual_txt_logis.png')no-repeat center;height:126px;} .sub_dist{margin-top:80px;} .sub_dist .main_title span{font-size:20px;color:#666;font-weight:300;letter-spacing:-1px;line-height:34px;display: block;margin-top:30px;} /*탭*/ .sub_dist .dist_tab{font-size:0;box-sizing:border-box;text-align: center;margin-top:47px;} .sub_dist .dist_tab li{display: inline-block;box-sizing:border-box;vertical-align: top;width:16.6666%;border:1px solid #ccc;border-bottom:none;height:149px;cursor:pointer;padding:23px 10px 0 10px;} .sub_dist .dist_tab li + li{border-left:none;} .sub_dist .dist_tab li:nth-child(1){border-radius:10px 0 0 0;} .sub_dist .dist_tab li:nth-child(6){border-radius:0 10px 0 0;} .sub_dist .dist_tab li .icon{display:flex;justify-content: center;align-items: center;height:66px;width:100%;} .sub_dist .dist_tab li:nth-child(1) .icon{background:url('../image/sub/dist-tab-01.png')no-repeat center;} .sub_dist .dist_tab li:nth-child(2) .icon{background:url('../image/sub/dist-tab-02.png')no-repeat center;} .sub_dist .dist_tab li:nth-child(3) .icon{background:url('../image/sub/dist-tab-03.png')no-repeat center;} .sub_dist .dist_tab li:nth-child(4) .icon{background:url('../image/sub/dist-tab-04.png')no-repeat center;} .sub_dist .dist_tab li:nth-child(5) .icon{background:url('../image/sub/dist-tab-05.png')no-repeat center;} .sub_dist .dist_tab li:nth-child(6) .icon{background:url('../image/sub/dist-tab-06.png')no-repeat center;} .sub_dist .dist_tab li p{font-size:24px;color:#222;font-weight:400;letter-spacing:-0.48px;margin-top:6px;} /*on*/ .sub_dist .dist_tab li.on, .sub_dist .dist_tab li:hover{box-shadow: 0px 5px 24px 0 rgba(0, 0, 0, 0.24);background:#2846b2;border-color:#2846b2;} .sub_dist .dist_tab li:nth-child(1).on .icon, .sub_dist .dist_tab li:nth-child(1):hover .icon{background:url('../image/sub/dist-tab-01-ov.png')no-repeat center;} .sub_dist .dist_tab li:nth-child(2).on .icon, .sub_dist .dist_tab li:nth-child(2):hover .icon{background:url('../image/sub/dist-tab-02-ov.png')no-repeat center;} .sub_dist .dist_tab li:nth-child(3).on .icon, .sub_dist .dist_tab li:nth-child(3):hover .icon{background:url('../image/sub/dist-tab-03-ov.png')no-repeat center;} .sub_dist .dist_tab li:nth-child(4).on .icon, .sub_dist .dist_tab li:nth-child(4):hover .icon{background:url('../image/sub/dist-tab-04-ov.png')no-repeat center;} .sub_dist .dist_tab li:nth-child(5).on .icon, .sub_dist .dist_tab li:nth-child(5):hover .icon{background:url('../image/sub/dist-tab-05-ov.png')no-repeat center;} .sub_dist .dist_tab li:nth-child(6).on .icon, .sub_dist .dist_tab li:nth-child(6):hover .icon{background:url('../image/sub/dist-tab-06-ov.png')no-repeat center;} .sub_dist .dist_tab li:hover p, .sub_dist .dist_tab li.on p{color:#fff;} /*내용*/ .dist_wrap{box-sizing:border-box;background:#f3f7fb;border-top:1px solid #ccc;padding-bottom:101px;} .dist_wrap .dist_box{height:0;overflow:hidden;opacity:0;} .dist_wrap .dist_box.on{height:auto;overflow:visible;opacity:1;} .dist_wrap .dist_box h4{font-size:40px;color:#333;font-weight:500;letter-spacing:-0.8px;margin-top:46px;} .dist_wrap .dist_box h4 span{display: inline-block;font-size:18px;color:#666;font-weight:400;letter-spacing:-0.6px;margin-left:8px;vertical-align: middle;} .dist_wrap .content{display: block;font-size:0;margin-top:30px;} .dist_wrap .content:after{clear:both;content:"";display: block;} .dist_wrap .dist_adv{font-size:0;width:57.1%;display: flex;flex-wrap: wrap;float: left;} .dist_wrap .dist_adv:after{clear:both;content:"";display: block;} .dist_wrap .dist_adv li{float: left;display:flex;align-items:center;width:calc(50% - 5px);box-sizing:border-box;background: #fff;border-radius:10px;box-shadow:0 5px 24px 0 rgba(0,0,0,0.14);padding:0 16px 0 21px;height:110px;} .dist_wrap .dist_adv li:nth-child(n+3){margin-top:10px;} .dist_wrap .dist_adv li:nth-of-type(2n){margin-left:10px;} .dist_wrap .dist_adv li:nth-of-type(2n+1){clear:both;float: left;} .dist_wrap .dist_adv li .icon{width:61px;text-align: center;} .dist_wrap .dist_adv li .txt_box{padding-left:18px;} .dist_wrap .dist_adv li .txt_box dt{font-size:24px;color:#333;font-weight:500;letter-spacing:-0.96px;} .dist_wrap .dist_adv li .txt_box dd{font-size:17px;color:#666;font-weight:400;letter-spacing:-1px;line-height:24px;margin-top:5px;} .dist_wrap .dist_img{width:40.6%;position: relative;float: right;display: inline-block;vertical-align: top;} .dist_wrap .dist_img .img{box-sizing:border-box;border-radius:10px;overflow:hidden;} .dist_wrap .dist_img p{font-size:30px;color:rgba(51, 51, 51, 0.08);font-weight:600;letter-spacing:0;font-family:'Inter' !important;position: absolute;transform:rotate(90deg);} .dist_wrap #dist01 .dist_img p{right:-140px;bottom:74px;} .dist_wrap #dist02 .dist_img p{right:-130px;bottom:64px;} .dist_wrap #dist03 .dist_img p{right:-148px;bottom:83px;} .dist_wrap #dist04 .dist_img p{right:-147px;bottom:83px;} .dist_wrap #dist05 .dist_img p{right:-174px;bottom:105px;} .dist_wrap #dist06 .dist_img p{right:-128px;bottom:63px;} /* .dist_wrap #dist01 .dist_img{background:url('../image/sub/dist-01-img.jpg')no-repeat center;background-size:cover;} */ @media only screen and (max-width:1500px){ .dist_wrap .w_set{width:100%;padding:0 90px;} .dist_wrap .dist_box h4 span{max-width:75%;} .dist_wrap .dist_adv li .txt_box dt{font-size:20px;} .dist_wrap .dist_adv li .txt_box dd{font-size:15px;} } /*pg*/ .sub_pg .sub_visual:before{background:url('../image/sub/visual_txt_pg.png')no-repeat center;height:126px;} .pg_box{margin-top:80px;position: relative;padding-bottom: 114px;} .pg_box:before{width:100%;height:44.5%;content:"";background:url('../image/sub/pg-bg.jpg')no-repeat center;background-size:cover;position: absolute;bottom:0;left:0;} .pg_box .main_title h3{font-family:'Inter' !important;background:url('../image/sub/kcp_logo.png')no-repeat left 40px;padding-left:200px;display: inline-block;} .pg_box .pg_list{text-align: center;margin-top:42px;} .pg_box .pg_list h4{font-size:32px;color:#333;font-weight:300;letter-spacing:-1.5px;} .pg_box .pg_list h4 strong{display: inline-block;font-size:inherit;color:#2846b2;font-weight:700;position: relative;} .pg_box .pg_list h4 strong:before{width:100%;height:1px;content:"";background:#2846b2;position: absolute;bottom:7px;left:0;} .pg_box .pg_list ul{font-size:0;text-align: center;margin-top:53px;} .pg_box .pg_list ul li{display: inline-block;vertical-align: top;} .pg_box .pg_list ul li + li{margin-left:150px;} .pg_box .pg_list ul li .img_box{position: relative;width:210px;height:210px;margin:0 auto;box-sizing:border-box;border-radius:100%;background:#2846b2;display: flex;align-items: center;} .pg_box .pg_list ul li .icon{position: relative;width:160px;height:160px;margin:0 auto;box-sizing:border-box;border-radius:100%;background:#fff;box-shadow: 0px 10px 16px 0 rgba(0, 0, 0, 0.17);display: flex;align-items: center;justify-content:center;} .pg_box .pg_list ul li p{font-size:30px;color:#fff;font-weight:500;letter-spacing:-1.5px;margin-top:20px;} .pg_box .pg_list > p{font-size:16px;color:rgba(255, 255, 255, 0.7);font-weight:300;letter-spacing:-0.8px;margin-top:49px;} /*─────────────────────────────────────────────────────────── 회사소개 - 회사소개 ───────────────────────────────────────────────────────────*/ .sub_about_visual{width:100%;height:860px;box-sizing:border-box;position: relative;background:url('../image/sub/about_company_bg.jpg')no-repeat center;background-size:cover;} .sub_about_visual:before{width:1280px;height:132px;content:"";background:url('../image/sub/visual-txt-company.png')no-repeat right center;position: absolute;left:50%;bottom:0;transform:translate(-50%);} .sub_about_visual .txt_box{position: absolute;top:21%;left:50%;transform:translate(-50%);} .sub_about_visual .txt_box > p{font-size:60px;color:#fff;font-weight:300;letter-spacing:-3px;} .sub_about_visual .txt_box h2{font-size:70px;color:#fff;font-weight:700;letter-spacing:-3.5px;line-height:84px;margin-top:5px;height:168px;} .sub_about_visual .txt_box h2 span{font-size:inherit;color:inherit;font-weight:inherit;letter-spacing:inherit;} .sub_about_visual .txt_box > span{display: block;font-size:26px;color:rgba(255, 255, 255, 0.9);font-weight:300;letter-spacing:-0.52px;line-height:42px;margin-top:63px;} .scroll_down_wrap{position: absolute;left:50%;transform:translate(-50%);bottom:0;} .sub_about_visual .scroll_down{z-index:5;cursor:pointer;height:146px;} .sub_about_visual .scroll_down .down_box{position: relative;display: inline-block;height:100%;} .sub_about_visual .scroll_down .down_box:before{width:1px;height:100px;content:"";box-sizing:border-box;background:#fff;opacity:0.2;position: absolute;left:22px;bottom:0px;} .sub_about_visual .scroll_down .down_box:after{width:5px;height:5px;content:"";box-sizing:border-box;border-radius:100%;background:#fff;position: absolute;top:35%;left:20px;animation:scroll 4s ease-in Infinite Alternate;} @keyframes scroll{ 0%{top:35%;} 50%{top:90%;} 100%{top:35%;} } .sub_about_visual .scroll_down .down_box span{font-size:16px;color:rgba(255,255,255,0.7);font-weight:300;display: block;transform:rotate(-90deg);letter-spacing:0;font-family:'Inter' !important;} /*─────────────────────────────────────────────────────────── 회사소개 - 제공혜택 ───────────────────────────────────────────────────────────*/ .sub_benefit_container{padding-bottom:72px;} .sub_benefit_container .sub_visual{background:url('../image/sub/benefit-bg.jpg')no-repeat center;background-size:cover;} .sub_benefit_container .sub_visual:before{background:url('../image/sub/visual-txt-benefit.png')no-repeat center;height:126px;} .sub_benefit_container .main_benefit:before{display: none;} .sub_benefit_container .main_benefit .benefit_list{margin-top:17px;} .sub_benefit_container .main_benefit .w_set:before{top:-72px;} .sub_benefit_container .main_benefit .w_set:after{width:220px;height:220px;content: "";box-sizing: border-box;border-radius: 100%;background: #2846b2;position: absolute;bottom:-90px;right:-97px;} @media only screen and (max-width:1500px){ .sub_benefit_container .main_benefit .w_set:after{right:-60px;} } /*─────────────────────────────────────────────────────────── 회사소개 - 전문집필서적 ───────────────────────────────────────────────────────────*/ .sub_book{} /*visual*/ .sub_book .book_visual{width:100%;height:500px;} .sub_book .visual_ul, .sub_book .slick-list, .sub_book .slick-track, .sub_book .slick-slide, .sub_book .slick-slide div{height:100%;} .sub_book .book_visual .slide01{background:url('../image/sub/book-visual-01.jpg')no-repeat center;background-size:cover;} .sub_book .book_visual .slide02{background:url('../image/sub/book-visual-02.jpg')no-repeat center;background-size:cover;} .sub_book .book_visual .slide03{background:url('../image/sub/book-visual-03.jpg')no-repeat center;background-size:cover;} .sub_book .book_visual .visual_slide{height:100%;position: relative;} .sub_book .book_visual .visual_slide:before{width:1280px;position: absolute;left:50%;transform:translate(-50%);bottom:-5px;content:"";height:132px;background:url('../image/sub/visual-txt-book.png')no-repeat left center;} .sub_book .book_visual .txt_box{position: absolute;left:50%;transform:translate(-50%);top:29.5%;} .sub_book .book_visual .txt_box h3{font-size:68px;color:#fff;font-weight:700;letter-spacing:-3.4px;} .sub_book .book_visual .txt_box p{font-size:20px;color:#fff;font-weight:300;letter-spacing:-0.8px;line-height:32px;margin-top:17px;} .sub_book .book_visual .txt_box h3, .sub_book .book_visual .txt_box p{transform:translateY(50px);transition:all 0.5s;opacity:0;} .sub_book .book_visual .active .txt_box h3, .sub_book .book_visual .active .txt_box p{transform:translateY(0);transition:all 0.5s;opacity:1;} .sub_book .book_visual .active .txt_box p{transition-delay:0.5s;} .sub_book .book_visual .slick-dots{text-align: center;position: absolute;bottom:20px;width:100%;left:0;} .sub_book .book_visual .slick-dots li{display: inline-block;margin:0 6px;width:8px;height:8px;} .sub_book .book_visual .slick-dots li button{font-size:0;width:100%;height:100%;padding:0;box-sizing:border-box;border-radius:100%;background:#fff;opacity:0.5;} .sub_book .book_visual .slick-dots li.slick-active button{opacity:1;} .sub_book .book_visual .slick-dots li button:before{display: none;} /*리스트*/ .sub_book .book_list{margin-top:120px;display:flex;flex-wrap:wrap;justify-content:flex-start;} .sub_book .book_list li{width:33.3333%;text-align: center;margin-bottom:97px;box-sizing:border-box;} .sub_book .book_list li:nth-of-type(3n+1){padding-left:16px;} .sub_book .book_list li:nth-of-type(3n){padding-right:16px;} .sub_book .book_list li .thumb img{box-shadow: 1.5px 2.6px 38px 0 rgba(0, 0, 0, 0.29);} .sub_book .book_list li .txt_box{margin-top:28px;} .sub_book .book_list li .txt_box .title{font-size:22px;color:#333;font-weight:400;letter-spacing:-1.1px;} .sub_book .book_list li .txt_box .info{font-size:0;margin-top:9px;} .sub_book .book_list li .txt_box .info span{display: inline-block;font-size:16px;color:#888;font-weight:400;letter-spacing:-0.32px;} .sub_book .book_list li .txt_box .info span + span{font-family:'Inter' !important;} .sub_book .book_list li .txt_box .info span + span:before{width:1px;height:12px;content:"";background:#ddd;display: inline-block;vertical-align: middle;margin:0 15px;} @media only screen and (max-width:1350px){ .sub_book .book_visual .visual_slide:before{width:100%;background-position:30px center;} } /*─────────────────────────────────────────────────────────── 회사소개 - 수상내역 ───────────────────────────────────────────────────────────*/ .sub_award_container .sub_visual{background:url('../image/sub/award-bg.jpg')no-repeat center;background-size:cover;} .sub_award_container .sub_visual:before{background:url('../image/sub/visual-txt-award.png')no-repeat center;height:126px;} .sub_award_container .award_list{padding:40px 0 128px;width:1200px;margin:0 auto;box-sizing:border-box;position: relative;} .sub_award_container .award_list li{display:flex;box-sizing:border-box;padding:80px 60px;justify-content:space-between;position: relative;} .sub_award_container .award_list li:before{content:"";position: absolute;box-sizing:border-box;border-radius:100%;background:#2846b2;} .sub_award_container .award_list li:nth-of-type(2):before{width:400px;height:400px;left:-45.5%;top:-24%;} .sub_award_container .award_list li:nth-of-type(4):before{width:100px;height:100px;right:-21%;bottom:5%;} .sub_award_container .award_list li:nth-of-type(8):before{width:30px;height:30px;left:-15.5%;top:53%;} .sub_award_container .award_list li:nth-of-type(15):before{width:320px;height:320px;right:-43.5%;top:-42%;} .sub_award_container .award_list li:nth-of-type(20):before{width:200px;height:200px;left:-24.5%;top:-9%;} .sub_award_container .award_list li:nth-of-type(23):before{width:100px;height:100px;right:-19.5%;bottom:-3%;} .sub_award_container .award_list li + li{border-top:1px solid #eee;} .sub_award_container .award_list li .txt_box{padding-top:18px;max-width:53%;} .sub_award_container .award_list li .title span{font-size:20px;color:#555;font-weight:300;letter-spacing:-0.8px;} .sub_award_container .award_list li .title p{font-size:50px;color:#333;font-weight:500;letter-spacing:-1px;margin-top:2px;} .sub_award_container .award_list li .cont{margin-top:31px;} .sub_award_container .award_list li .cont dl{} .sub_award_container .award_list li .cont dl + dl{margin-top:13px;} .sub_award_container .award_list li .cont dl dt, .sub_award_container .award_list li .cont dl dd{display: inline-block;vertical-align: top;font-size:18px;font-family:'Inter', 'Noto Sans KR' !important;line-height:26px;letter-spacing:-0.36px;} .sub_award_container .award_list li .cont dl dt{font-weight:700;color:#333;width:95px;} .sub_award_container .award_list li .cont dl dt em{font-size:inherit;color:#2846b2;font-weight:inherit;} .sub_award_container .award_list li .cont dl dd{color:#777;font-weight:300;} .sub_award_container .award_list li .cont dl dd a{font-size:inherit;color:inherit;font-weight:inherit;} .sub_award_container .award_list li .thumb{position: relative;overflow:hidden;box-sizing:border-box;border-radius: 10px;box-shadow: 11.7px 18.7px 62px 0 rgba(61, 70, 85, 0.33);width: 42.6%;height: 0;padding-bottom: 29.63%;} .sub_award_container .award_list li .thumb a{display: block;width:100%;height:100%;position: absolute;top:0;left:0;z-index:5;} .sub_award_container .award_list li .thumb img{width:100%;transform:scale(1);transition:all 0.5s;transform-origin:center;} .sub_award_container .award_list li .thumb .ov_box{width:100%;height:100%;background:rgba(0,0,0,0.4);position: absolute;top:0;left:0;display: none;} .sub_award_container .award_list li .thumb .ov_box .plus{width:70px;height:70px;box-sizing:border-box;border-radius:100%;background:#2846b2;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .sub_award_container .award_list li .thumb .ov_box .plus:before{width:24px;height:2px;content:"";background:#fff;position: absolute;top:34px;left:23px;} .sub_award_container .award_list li .thumb .ov_box .plus:after{width:2px;height:24px;content:"";background:#fff;position: absolute;top:23px;left:34px;} .sub_award_container .award_list li:hover .ov_box{display: block;} .sub_award_container .award_list li:hover .thumb img{transform:scale(1.05);transform-origin:center;transition:all 0.5s;} /*─────────────────────────────────────────────────────────── 회사소개 - 인증서 ───────────────────────────────────────────────────────────*/ .sub_about_certificate .sub_visual{background:url('../image/sub/certificate-bg.jpg')no-repeat center;background-size:cover;} .sub_about_certificate .sub_visual:before{background:url('../image/sub/visual-txt-certificate.png')no-repeat center;height:126px;} .sub_about_certificate .sub_visual:after{width:1280px;height:302px;content:"";position: absolute;left:51.5%;transform:translate(-50%);top:29px;background:url('../image/sub/certificate-title-mark.png')no-repeat right center;} .sub_about_certificate .certificate_list{margin-top:120px;display:flex;flex-wrap:wrap;justify-content:flex-start;} .sub_about_certificate .certificate_list li{width:33.3333%;text-align: center;margin-bottom:97px;box-sizing:border-box;} .sub_about_certificate .certificate_list li:nth-of-type(3n+1){padding-left:16px;} .sub_about_certificate .certificate_list li:nth-of-type(3n){padding-right:16px;} .sub_about_certificate .certificate_list li .thumb img{box-shadow:8.2px 14.9px 24px 0 rgba(0, 0, 0, 0.15);} .sub_about_certificate .certificate_list li p{margin-top:28px;font-size:22px;color:#333;font-weight:400;letter-spacing:-1.1px;} .sub_about_certificate .certificate_list li p span{font-size:18px;color:#777;font-weight:400;letter-spacing:-1.1px; margin-top:6px; display: block;} /*─────────────────────────────────────────────────────────── 회사소개 - 주요고객사 ───────────────────────────────────────────────────────────*/ .sub_about_partner .sub_visual{background:url('../image/sub/partner-bg.jpg')no-repeat center;background-size:cover;} .sub_about_partner .sub_visual:before{background:url('../image/sub/visual-txt-customer.png')no-repeat center;height:126px;} .sub_about_partner .about_customer{margin-top:97px;} .sub_about_partner .about_customer .main_customer{display:flex;flex-wrap:wrap;margin-top:36px;} .sub_about_partner .about_customer .main_customer li{margin:0 0 25px 25px;width:calc(33.3333% - 17px);box-sizing:border-box;border-radius:10px;box-shadow:0 5px 24px rgba(158,171,196,0.4);overflow:hidden;} .sub_about_partner .about_customer .main_customer li:nth-of-type(3n+1){margin-left:0;} .sub_about_partner .about_customer .main_customer li img{max-width:100%;} .sub_about_partner .about_customer .sub_partner_list{} .sub_about_partner .about_customer .sub_partner_list ul{display:flex;flex-wrap:wrap;margin-top:16px;} .sub_about_partner .about_customer .sub_partner_list ul li{margin:0 0 10px 10px;width:calc(16.666% - 9px);box-sizing:border-box;border-radius:10px;box-shadow:0 5px 24px rgba(158,171,196,0.4);overflow:hidden;} .sub_about_partner .about_customer .sub_partner_list ul li:nth-of-type(6n+1){margin-left:0;} .sub_about_partner .about_customer .sub_partner_list ul li img{max-width:100%;} .sub_about_partner .about_partner{margin-top:100px;box-sizing:border-box;background:#f3f7fb;padding:100px 0;} .sub_about_partner .about_partner .about_partner_list{display:flex;flex-wrap:wrap;margin-top:38px;} .sub_about_partner .about_partner .about_partner_list li{margin:0 0 16px 16px;width:calc(25% - 12px);box-sizing:border-box;border-radius:10px;box-shadow:0 5px 24px rgba(158,171,196,0.4);overflow:hidden;} .sub_about_partner .about_partner .about_partner_list li:nth-of-type(4n+1){margin-left:0;} .sub_about_partner .about_partner .about_partner_list li img{max-width:100%;} /*─────────────────────────────────────────────────────────── 회사소개 - 연혁 ───────────────────────────────────────────────────────────*/ .sub_about_history .sub_visual{background:url('../image/sub/visual-history.jpg')no-repeat center;background-size:cover;} .sub_about_history .sub_visual:before{background:url('../image/sub/visual-txt-history.png')no-repeat center;height:126px;} .sub_history_box{position: relative;padding-bottom:230px;font-size:0;margin-top:140px;} .sub_history_box .history_img{width:45.2%;padding-right:100px;position:sticky;top:180px;display: inline-block;vertical-align: top;} .sub_history_box .history_img .img_box{box-sizing:border-box;width:100%;height:600px;transition:all 0.5s;overflow:hidden;border-radius:0 10px 0 0;} .sub_history_box .history_img .img_box.history01{background:url('../image/sub/hitory-img-01.jpg')no-repeat center;background-size:cover;} .sub_history_box .history_img .img_box.history02{background:url('../image/sub/hitory-img-02.jpg')no-repeat center;background-size:cover;} .sub_history_box .history_img .img_box.history03{background:url('../image/sub/hitory-img-03.jpg')no-repeat center;background-size:cover;} .sub_history_box .history_cont{width:48.8%;display: inline-block;vertical-align: top;margin:0;} .sub_history_box .history_cont ol{border-left:1px solid #eee;} .sub_history_box .history_cont ol > li:first-of-type{padding-top:23px;} .sub_history_box .history_cont ol > li:first-of-type:after{top:54px;} .sub_history_box .history_cont ol > li:first-of-type.on:after{top:50px;} .sub_history_box .history_cont ol > li:last-of-type{padding-bottom:44px;} .sub_history_box .history_cont ol > li{position: relative;padding:0 0 86px 77px;} .sub_history_box .history_cont ol > li:before{width:1px;height:0;content:"";background:#2846b2;position: absolute;top:0;left:-1px;transition:all 0.7s;} .sub_history_box .history_cont ol > li:after{width:5px;height:5px;content:"";box-sizing:border-box;border-radius:100%;background:#2846b2;left:-3px;top:28px;position: absolute;} .sub_history_box .history_cont ol li .year{font-size:40px;color:#333;font-weight:700;font-family:'Inter' !important;letter-spacing:-0.8px;} .sub_history_box .history_cont ol li dl{margin-top:18px;} .sub_history_box .history_cont ol li dl dd{width:95%;margin-left:8px;} .sub_history_box .history_cont ol li dl dd ul li{font-size:18px;color:#222;font-weight:400;line-height:50px;position: relative;padding-left:16px;letter-spacing:-0.9px;} .sub_history_box .history_cont ol li dl dd ul li strong{color:#3b56b9;font-weight:400;} .sub_history_box .history_cont ol li dl dd ul li:before{width:4px;height:4px;content:"";background:#aaa;position: absolute;left:0;top:25px;box-sizing:border-box;border-radius:100%;} .sub_history_box .history_cont ol li dl dd ul li a{display: block;font-size:16px;color:#777;font-weight:300;font-family:'Inter' !important;line-height:initial;letter-spacing:0;} .sub_history_box .history_cont ol li .logo_box{} .sub_history_box .history_cont ol li .logo_box .logo{font-size:0;display:flex;margin-top:10px;} .sub_history_box .history_cont ol li .logo_box .logo .img{display:flex;align-items: center;justify-content: center;box-sizing:border-box;vertical-align: top;width:220px;border-radius:10px;background:#fff; box-shadow: 3.8px 8.2px 24px 0 rgba(0, 0, 0, 0.16);overflow:hidden;} .sub_history_box .history_cont ol li .logo_box .logo .img + .img{margin-left:20px;} .sub_history_box .history_cont ol li .logo_box .logo .img img{max-width:100%;} /*on*/ .sub_history_box .history_cont ol > li.on:before{height:calc(100% + 28px);transition:all 0.7s;} .sub_history_box .history_cont ol > li.on:after{box-shadow:0px 0 0px 5px rgba(40,70,178,0.2);} @media only screen and (max-width:1700px){ .sub_history_box .history_cont{width:45.8%;} } @media only screen and (max-width:1600px){ .sub_history_box .history_img .img_box{height:430px;} } @media only screen and (max-width:1500px){ .sub_history_box .history_cont ol li .logo_box .logo .img{width:calc(50% - 10px);} .sub_history_box .history_cont ol li dl dd ul li{font-size:16px;} } @media only screen and (max-width:1400px){ .sub_history_box .history_cont ol li dl dd ul li{line-height:30px;} .sub_history_box .history_cont ol li dl dd ul li:before{top:14px;} } /*─────────────────────────────────────────────────────────── 회사소개 - 오시는길 ───────────────────────────────────────────────────────────*/ .sub_about_location{margin-top:70px;} .sub_about_location .location_box{position: relative;padding-bottom:140px;} .sub_about_location .location_box:before{width:100%;height:25.05%;content:"";background:#f3f6fb;position: absolute;left:0;bottom:0;} .sub_about_location .sub_location + .sub_location{margin-top:120px;} .sub_about_location .location_cont{width:100%;box-sizing:border-box;border-radius:10px;overflow:hidden;box-shadow: 3.8px 8.2px 24px 0 rgba(0, 0, 0, 0.16);background:#fff;margin-top:37px;} .sub_about_location .location_cont .map_box{width:100%;height:0;padding-bottom:37.5%;position: relative;} .sub_about_location .location_cont .map_box iframe{width:100%;height:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .sub_about_location .location_cont .info{box-sizing:border-box;padding:40px 40px 40px 40px;} .sub_about_location .location_cont .info > dl{position: relative;padding-left:56px;font-size:0;} .sub_about_location .location_cont .info > dl + dl{margin-top:35px;} .sub_about_location .location_cont .info > dl:before{width:40px;height:40px;content:"";box-sizing:border-box;border-radius:100%;background:#2846b2 url('../image/sub/loc-icon-01.png')no-repeat center;position: absolute;left:0;top:-3px;} .sub_about_location .location_cont .info > dl + dl:before{background:#2846b2 url('../image/sub/loc-icon-02.png')no-repeat center;} .sub_about_location .location_cont .info > dl > dt, .sub_about_location .location_cont .info > dl > dd{display: inline-block;vertical-align: top;} .sub_about_location .location_cont .info > dl > dt{font-size:20px;color:#333;font-weight:700;font-family:'Inter' !important;width:140px;} .sub_about_location .location_cont .info > dl > dt em{font-size:inherit;color:#2846b2;font-weight:inherit;} .sub_about_location .location_cont .info > dl dd{width:calc(100% - 140px);} .sub_about_location .location_cont .info > dl dd p{font-size:18px;color:#222;font-weight:400;letter-spacing:-0.9px;} .sub_about_location .location_cont .info > dl dd .subway{margin-top:11px;} .sub_about_location .location_cont .info > dl dd .subway p{font-size:17px;letter-spacing:-0.85px;font-weight:500;display: inline-block;vertical-align: middle;} .sub_about_location .location_cont .info > dl dd .subway .howto{display:inline-block;vertical-align: middle;} .sub_about_location .location_cont .info > dl dd .subway .howto span{display: inline-block;box-sizing:border-box;vertical-align:middle;height:24px;line-height:22px;border-radius:12px;border:1px solid #02a34c;font-size:15px;color:#02a34c;font-weight:400;letter-spacing:-0.75px;padding:0 8px;margin:0 4px 0 12px;} .sub_about_location .location_cont .info > dl dd .subway .howto p{font-size:16px;color:#666;font-weight:400;} .sub_about_location .sub_location + .sub_location .location_cont .info > dl dd .subway .howto span{border-color:#f25c2b;color:#f25c2b;} .sub_about_location .location_cont .info > dl.cs_info dd span{display: inline-block;vertical-align: middle;position: relative;} .sub_about_location .location_cont .info > dl.cs_info dd .tel, .sub_about_location .location_cont .info > dl.cs_info dd .fax{font-size:20px;color:#222;font-weight:400;letter-spacing:-1px;font-family:'Inter' !important;} .sub_about_location .location_cont .info > dl.cs_info dd .fax:before{width:1px;height:12px;content:"";background:#ddd;display: inline-block;vertical-align: middle;margin:0 18px;} .sub_about_location .location_cont .info > dl.cs_info dd .cs_hours{font-size:16px;color:#777;font-weight:400;letter-spacing:-0.8px;margin-left:22px;} @media only screen and (max-width:1300px){ .sub_about_location .location_cont .info > dl.cs_info dd .cs_hours{margin-left:0;display: block;margin-top:10px;} } /*─────────────────────────────────────────────────────────── shoppingmall_page (200914) ───────────────────────────────────────────────────────────*/ .pageinfo.whyneed {background:url("../image/sub/bg_whyneed.png") no-repeat right 5% top;box-sizing:border-box;background-size:315px 242px} .pageinfo.whyneed .title {background:url("../image/sub/shadowText_why.png") no-repeat 0 top;background-size:270px 72px;} .pageinfo.photo {background:url("../image/sub/bg_photo.png") no-repeat right 5% top;box-sizing:border-box;background-size:410px 270px} .pageinfo.photo .title {background:url("../image/sub/shadowText_photo.png") no-repeat 0 top;background-size:460px 73px;} .pageinfo.admin {background:url("../image/sub/bg_admin.png") no-repeat right 5% top;box-sizing:border-box;background-size:469px 234px} .pageinfo.admin .title {background:url("../image/sub/shadowText_admin.png") no-repeat 0 top;background-size:375px 73px;} .pageinfo.hosting {background:url("../image/sub/bg_hosting.png") no-repeat right 5% top;box-sizing:border-box;background-size:380px 223px} .pageinfo.hosting .title {background:url("../image/sub/shadowText_hosting.png") no-repeat 0 top;background-size:417px 73px;} .detailpage {padding-top:40px;text-align:center;} .detailpage .subTitle {font-size:20px;color:#aaaaaa;letter-spacing:15px;margin-bottom:30px} .detailpage .title {font-size:40px;color:#333333;line-height:44px;padding-bottom:70px;position:relative} .detailpage .title::after {content:"";width:1px;height:40px;background:#ccc;position:absolute;bottom:0;left:50%;} .detailpage ul {margin-top:15px;overflow:hidden} .detailpage ul li {width:30%;float:left} .detailpage ul li + li {margin-left:5%;} .detailpage ul li dl {border:1px solid #cccccc} .detailpage ul li dl dt {text-align:center;font-size:22px;color:#333333;padding:10px;border-bottom:1px solid #ccc;background:#f5f5f5} .detailpage ul li dl dd {padding:20px;text-align:left;height:212px;box-sizing:border-box} .detailpage ul li dl dd .question {padding-left:35px;font-size:18px;color:#333333;line-height:26px;margin-bottom:20px;background:url("../image/sub/bg_question.png") no-repeat 0 0;background-size:28px;min-height:28px} .detailpage ul li dl dd .answer {padding-left:35px;font-size:16px;color:#666;line-height:25px;background:url("../image/sub/bg_answer.png") no-repeat 0 0;background-size:28px;min-height:28px} .detailpage ul li dl dd .answer span {color:#d81419} .production .productionMenu {overflow:visible;margin-bottom:40px} .production .productionMenu::after {content:"";width:0;height:0;display:block;clear:both} .production .productionMenu > li {width:31%;float:left;box-sizing:border-box;position:relative} .production .productionMenu > li + li {margin-left:3.5%} .production .productionMenu > li dl dt {background:#777777;text-align:center;padding:35px 0;height:150px;box-sizing:border-box} .production .productionMenu > li dl dt span {display:block;font-size:24px;color:#fff;} .production .productionMenu > li dl dt span:last-child {font-size:28px;color:#fff;font-weight:600;} .production .productionMenu > li dl dt span.etc {} .production .productionMenu > li dl dd {border:1px solid #ddd;border-top:none;background:#fff} .production .productionMenu > li dl dd ul li {padding:15px 10px;position:relative;padding-left:20px;} .production .productionMenu > li dl dd ul li::before {content:"";width:4px;height:4px;background:#aaaaaa;position:absolute;top:26px;left:10px;border-radius:10px;} .production .productionMenu > li dl dd ul li span {font-size:16px;color:#333333;} .production .productionMenu > li dl dd ul li span:last-child {font-size:16px;color:#666666;} .production .productionMenu > li dl dd ul li:first-child {height:160px;box-sizing:border-box;font-size:16px;color:#333;text-align:center;display:table;width:100%;padding:0} .production .productionMenu > li dl dd ul li:first-child::before {display:none} .production .productionMenu > li dl dd ul li:first-child span {display:table-cell;vertical-align:middle;} .production .productionMenu > li dl dd ul li + li {border-top:1px solid #ddd} .production .productionMenu > li.point dl dt {background:#c61b22;} .production .productionMenu > li.point dl dd {border:1px solid #c61b22;border-top:none} .production .productionMenu.photo > li dl dd ul li:first-child {height:110px;padding:30px 0;box-sizing:border-box} .production .productionMenu.photo > li dl dd ul li:first-child span {display:block;font-size:16px;color:#333333} .production .productionMenu.photo > li dl dd ul li:first-child span.point {font-size:18px;color:#333333} .production .productionMenu.photo > li dl dd ul li:nth-child(2) {height:93px;box-sizing:border-box;padding:15px 10px;padding-left:20px;} .production .productionMenu.photo > li dl dd ul li:nth-child(2) span {display:table-cell} .production .productionMenu.photo > li dl dd ul li:nth-child(2) span:last-child {padding-left:10px} .production .productionMenu.photo > li .plus {position:absolute;top:-35px;right:20px;border-radius:100%;text-align:center;background:#e7b902;border:2px solid #fff;color:#fff;font-size:14px;line-height:16px;padding:12px 8px} .production .productionInfo {} .production .productionInfo li {font-size:14px;color:#666666} .production .productionInfo li::before {content:"-";display:inline-block;margin-right:5px} .production .productionInfo li + li {margin-top:10px} .productionStep .step {overflow:hidden;margin-bottom:90px} .productionStep .step li {padding-top:220px;width:16%;float:left;text-align:center;box-sizing:border-box;position:relative} .productionStep .step li + li {margin-left:5%;} .productionStep .step li + li::before {content:"";width:32px;height:22px;background:url("../image/sub/step_arrow.png") no-repeat 0 0;transform:rotate(-90deg);position:absolute;top:85px;left:-20%;background-size:100%} .productionStep .step li span {font-size:24px;color:#333333;margin-bottom:10px;display:block;} .productionStep .step li span:last-child {font-size:16px;color:#777777} .productionStep .step li:nth-child(1) {background:url("../image/sub/portfolioStep01.png") no-repeat center 0;background-size:190px} .productionStep .step li:nth-child(2) {background:url("../image/sub/portfolioStep02.png") no-repeat center 0;background-size:190px} .productionStep .step li:nth-child(3) {background:url("../image/sub/portfolioStep03.png") no-repeat center 0;background-size:190px} .productionStep .step li:nth-child(4) {background:url("../image/sub/portfolioStep04.png") no-repeat center 0;background-size:190px} .productionStep .step li:nth-child(5) {background:url("../image/sub/portfolioStep05.png") no-repeat center 0;background-size:190px} .portfolioWrap .portfolio {font-size:18px;color:#333333;overflow:hidden; display:flex; justify-content:space-around; flex-wrap:wrap;} .portfolioWrap .portfolio li {width:22%;float:left;text-align:center} .portfolioWrap .portfolio li + li {margin-left:4%} .portfolioWrap .portfolio li:nth-child(4n + 1) {margin-left:0} .portfolioWrap .portfolio li:nth-child(n + 5) {margin-top:30px} .portfolioWrap .portfolio li img {width:100%} .portfolioWrap .portfolio li span {display:block} .portfolioWrap .portfolio li span + span {margin-top:10px} .portfolioWrap .portfolio li span a {border:1px solid #ddd;display:block} .cautionInfo .cautiontitle {text-align:center;font-size:42px;color:#333333;padding-bottom:25px;margin-bottom:35px;position:relative} .cautionInfo .cautiontitle::after {content:"";width:30px;height:2px;background:#333333;position:absolute;bottom:0;left:50%;margin-left:-15px} .cautionInfo ul li {} .cautionInfo ul li + li {margin-top:60px} .cautionInfo ul li dt {padding-left:35px;background:url("../image/sub/bul_cautionInfo.png") no-repeat 0 center;font-size:24px;color:#333333;margin-bottom:20px;background-size:30px 28px} .cautionInfo ul li dd {font-size:16px;color:#777;line-height:26px;} .cautionInfo ul li dd span {display:block;margin-top:10px;font-size:14px;} .exPhoto {padding-bottom:100px} .exPhoto + .exPhoto {border-top:1px dashed #ddd;padding-top:100px} .exPhoto .title {font-size:40px;color:#333333;text-align:center;margin-bottom:20px} .exPhoto .subTitle {font-size:18px;color:#555555;text-align:center;margin-bottom:50px} .exPhoto .ex {overflow:hidden;margin-bottom:50px} .exPhoto .ex li {width:18%;float:left} .exPhoto .ex li + li {margin-left:2.5%} .exPhoto .ex li span {display:block;font-size:16px;color:#333333;text-align:center} .exPhoto .ex li span:last-child {margin-top:10px} .exPhoto .ex li span img {width:100%} .exPhoto .ex.style6 li {width:16%;float:left} .exPhoto .ex.style6 li + li {margin-left:0.8%} .exPhoto .ps {font-size:14px;color:#888888;text-align:right;margin-top:-40px;margin-bottom:40px} .exPhoto .photoInfo {padding:30px;background:#fff;} .exPhoto .photoInfo ul li {font-size:16px;color:#666666;position:relative;padding-left:10px} .exPhoto .photoInfo ul li + li {margin-top:5px} .exPhoto .photoInfo ul li::before {content:"-";position:absolute;top:0;left:0} .exPhoto .photoInfo ul li.point {color:#c61b22} .exPhoto .photoInfo .tip {margin-top:20px;font-size:16px;color:#333333} .exPhoto .photoInfo .tip::before {content:"TIP";padding:2px 10px;color:#d81419;border:1px solid #d81419;border-radius:30px;font-weight:600;margin-right:5px} .faqList {margin:50px 0 0 20px;background:#eeeeee;position:relative} .faqList ul {position:relative;top:-20px;left:-20px;background:#fff;width:100%;border:1px solid #ddd;box-sizing:border-box;padding:50px} .faqList ul li {} .faqList ul li + li {margin-top:45px} .faqList ul li dt {padding-left:35px;background:url("../image/sub/icon_q.png") no-repeat 0 0;background-size:28px;font-size:18px;color:#333333;margin-bottom:10px;min-height:28px} .faqList ul li dd {padding-left:35px;background:url("../image/sub/icon_a.png") no-repeat 0 0;background-size:28px;font-size:16px;color:#777777;min-height:28px} .faqList ul li dd span {font-size:14px;color:#999999} .service .serviceBox > ul {overflow:hidden;position:relative} .service .serviceBox > ul::before {content:"";width:100%;height:100%;position:absolute;top:0;left:0;} .service .serviceBox > ul > li {float:left;width:21%} .service .serviceBox > ul > li:first-child {width:37%} .service .serviceBox > ul > li + li {margin-left:-1px} .service .serviceBox ul li dl {overflow:hidden;border-top:2px solid #333;position:relative;} .service .serviceBox ul li dt {font-size:24px;color:#333333;text-align:center;border:1px solid #ddd;border-bottom:none;padding:20px 0;margin-top:-1px} .service .serviceBox ul li dt span {font-size:18px;color:#d81419;display:block;} .service .serviceBox ul li dd {border:1px solid #ddd;border-right:none;border-left:none} .service .serviceBox ul li + li dd {border-left:1px solid #ddd} .service .serviceBox ul li:last-child dt {border-right:none} .service .serviceBox ul li dd table {border-collapse:collapse;width:100%} .service .serviceBox ul li dd th {background:#f5f5f5;font-size:18px;color:#333333;font-weight:400;padding:10px 0 10px 20px;border-bottom:1px solid #ddd;border-right:1px solid #ddd} .service .serviceBox ul li dd td {padding:15px 10px 15px 20px;border-bottom:1px solid #ddd;font-size:16px;color:#777777;line-height:24px;text-align:center;letter-spacing:-1px;} .service .serviceBox ul li dd td ul {text-align:left} .service .serviceBox ul li dd td li {display:block;font-size:16px;color:#777777} .service .serviceBox ul li dd td li::before {content:"-";margin-right:5px} .service .serviceBox ul li dd td span {display:block;text-decoration:line-through} .service .serviceBox ul li dd td span:last-child {color:#555;font-size:16px;text-decoration:none;font-weight:600;} .service .serviceBox ul li dd tr:first-child td {height:150px} .service .serviceBox ul li dd tr:last-child th {border-bottom:none} .service .serviceBox ul li dd tr:last-child td {border-bottom:none} .service .serviceBox ul li:first-child dt {width:59.6%;float:right} .service .serviceBox ul li:first-child dd {float:right;width:100%;box-sizing:border-box} .service .serviceBox ul li:nth-child(n+2) dd th {display:none} .service .serviceBox ul li dd .rowspaned {border-bottom:none;height:134px;padding:0;} .serviceStep {padding-top:80px} .serviceStep .step {overflow:hidden;margin-bottom:30px} .serviceStep .step li {width:15%;float:left;vertical-align:middle;display:table;position:relative} .serviceStep .step li + li {padding-left:6.2%;} .serviceStep .step li + li::before {content:"";width:100%;height:1px;background:#ddd;position:absolute;top:20%;left:-50%;transform:rotate(25deg);z-index:0;} .serviceStep .step li + li::after {content:"";width:14px;height:14px;background:url("../image/sub/bul_serviceStep.png") no-repeat 0 0;background-size:100%;position:absolute;top:26%;left:11%;z-index:5;} .serviceStep .step li + li:nth-child(odd)::before {transform:rotate(-25deg);top:80%;} .serviceStep .step li + li:nth-child(odd)::after {top:68%;left:10%;} .serviceStep .step li:nth-child(even) {margin-top:80px} .serviceStep .step li:last-child div {background:#c61b22} .serviceStep .step li div {padding:20px;border-radius:100%;color:#fff;font-size:18px;text-align:center;box-sizing:border-box;height:180px;background:#555555;display:table-cell;vertical-align:middle;position:relative;z-index:10} .serviceStep .step li span {display:block;} .serviceStep .step li span + span {margin-top:5px} .serviceStep .step li:nth-child(even) {margin-top:80px} .serviceStep .stepBox {width:100%;margin-bottom:30px} .serviceStep .stepBox img {width:100%;display:block;} .serviceStep .stepBox img.mo {display:none;max-width:710px;margin:0 auto} .mainserviceStep .step {overflow:hidden;margin-bottom:90px} .mainserviceStep .step li {padding-top:130px;width:260px;float:left;text-align:center;box-sizing:border-box;position:relative;} .mainserviceStep .step li + li {margin-left:80px;} .mainserviceStep .step li + li::before {content:"";width:32px;height:22px;background:url("../image/sub/step_arrow.png") no-repeat 0 0;transform:rotate(-90deg);position:absolute;top:118px;left:-52px;background-size:100%;} .mainserviceStep .step li span {font-size:24px;color:#333333;margin-bottom:10px;display:block; font-weight:500;} .mainserviceStep .step li span:last-child {font-size:16px;color:#777777} .mainserviceStep .step li span.stepnumber {color:#d81419; font-size:18px; margin-bottom:0;} .mainserviceStep .step li:nth-child(1) {background:url("../image/sub/portfolioStep01.png") no-repeat center 0;background-size:190px} .mainserviceStep .step li:nth-child(2) {background:url("../image/sub/portfolioStep02.png") no-repeat center 0;background-size:190px} .mainserviceStep .step li:nth-child(3) {background:url("../image/sub/portfolioStep03.png") no-repeat center 0;background-size:190px} .mainserviceStep .step li:nth-child(4) {background:url("../image/sub/portfolioStep04.png") no-repeat center 0;background-size:190px} .cautionBox {border:1px solid #ddd;border-top:1px solid #333;padding:30px;background:#f5f5f5} .cautionBox p {font-size:24px;color:#333333;padding-left:25px;background:url("../image/sub/icon_cuation.png") no-repeat 0 center;background-size:22px;margin-bottom:20px} .cautionBox .cautionWrap {overflow:hidden} .cautionBox .cautionWrap ul {float:left;width:50%;box-sizing:border-box;border-right:1px dashed #ddd;box-sizing:border-box;padding:0 30px;padding-left:0} .cautionBox .cautionWrap ul + ul {border-right:none;padding:0 30px;} .cautionBox .cautionWrap ul li {font-size:16px;color:#666666;position:relative;padding-left:10px} .cautionBox .cautionWrap ul li::before {content:"-";position:absolute;top:0;left:0} .cautionBox .cautionWrap ul li + li {margin-top:5px} .servicePrice .servicePriceTable table {border-top:2px solid #333333;width:100%;border-collapse:collapse} .servicePrice .servicePriceTable thead th {font-size:24px;color:#333333;text-align:center;padding:15px 0;font-weight:400} .servicePrice .servicePriceTable tbody th {font-size:18px;color:#333;background:#f5f5f5;border:1px solid #ddd;padding:15px 10px;font-weight:400;} .servicePrice .servicePriceTable tbody th.title {font-size:16px;color:#666666;text-align:center;border:1px solid #ddd;padding:15px 15px;background:#fff;} .servicePrice .servicePriceTable tbody td {font-size:16px;color:#666666;text-align:center;border:1px solid #ddd;padding:15px 15px;} .servicePrice .servicePriceTable tbody td.title {text-align:left;color:#333333} .servicePrice .servicePriceTable tbody th:first-child {border-left:none} .servicePrice .servicePriceTable tbody th:last-child {border-right:none} .servicePrice .servicePriceTable tbody td:first-child {border-left:none} .servicePrice .servicePriceTable tbody td:last-child {border-right:none} .strength {margin-top:50px} .strength ul {overflow:hidden} .strength li {width:49%;box-sizing:border-box;padding:30px 30px 30px 200px;border:1px solid #ddd;float:left;min-height:250px} .strength li + li {margin-left:2%} .strength li .title {font-size:28px;color:#333333;margin-bottom:10px} .strength li .cnt {font-size:16px;color:#777777;line-height:26px} .strength li:nth-child(1) {background:url("../image/sub/icon_strength01.png") no-repeat 40px center;background-size:100px 134px} .strength li:nth-child(2) {background:url("../image/sub/icon_strength02.png") no-repeat 40px center;background-size:130px 116px} .spec {background:url("../image/sub/bg_spec.png") no-repeat right center;background-size:382px 273px;padding:20px 0} .spec p {font-size:36px;color:#333;font-weight:500;position:relative;padding-bottom:20px;margin-bottom:30px} .spec p::after {content:"";width:30px;height:1px;background:#333;position:absolute;bottom:0;left:0} .spec li {padding-left:35px;background:url("../image/sub/bul_cautionInfo.png") no-repeat 0 center;font-size:18px;color:#333333;background-size:30px 28px;height:auto;} .spec li + li {margin-top:15px} .bbs .bbsInfo {font-size:14px;color:#666;margin-bottom:30px} .bbs .bbsInfo span {color:#333} .bbs .bbsSrh {overflow:hidden;margin-bottom:20px} .bbs .bbsSrh .total {float:left;font-size:16px;color:#666;} .bbs .bbsSrh .srhBox {float:right;} .bbs .bbsSrh .srhBox select {height:35px;font-size:14px;border:1px solid #ddd;padding:0 10px;-webkit-appearance:menulist;-moz-appearance:menulist;appearance:menulist;} .bbs .bbsSrh .srhBox input {height:35px;border:1px solid #ddd;font-size:14px;box-sizing:border-box;margin-left:5px;padding:0 10px; } .bbs .bbsSrh .srhBox button {height:35px;background:#1c1c1d;color:#fff;font-size:14px;margin-left:5px;padding:0 20px} .bbs table {width:100%;border-top:2px solid #333;border-collapse:collapse;table-layout:fixed} .bbs table th {padding:10px;font-size:16px;font-weight:400;text-align:center;border-bottom:2px solid #ddd} .bbs table td {border-bottom:1px solid #ddd;padding:10px;font-size:15px;color:#777;text-align:center} .bbs table td.subject {text-align:left} .bbs table td.subject a {width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#777;display:block} .bbs table td .bbs_icon_chk {padding:5px 10px;background:#d81419;color:#fff;font-size:12px;display:block;box-sizing:border-box} .bbs table td .bbs_icon_answer {padding:5px 10px;background:#1c1c1d;color:#fff;font-size:12px;display:block;box-sizing:border-box} .bbs table td .bbs_icon_completion {padding:5px 10px;background:#d1d1d1;color:#fff;font-size:12px;display:block;box-sizing:border-box} .paging-sec {margin-top:30px;} .paging-sec .paging-block {} .paging-sec .paging-block .paging {text-align:center;display:block;} .paging-sec .paging-block .paging li {display:inline-block;overflow:hidden} .paging-sec .paging-block .paging li + li {margin-left:5px} .paging-sec .paging-block .paging li a {display:block;font-size:14px;color:#777;width:24px;height:24px;text-align:center;line-height:23px;box-sizing:border-box} .paging-sec .paging-block .paging li.active a {border:1px solid #ddd;color:#d81419;} .paging-sec .paging-block .paging li a img {display:block} .paging-sec .bbs-write {display:inline-block;padding:10px 25px;background:#1c1c1d;color:#fff;font-size:14px} .bbs.write table th {font-size:18px;color:#333;font-weight:500;padding:15px 0} .bbs.write table td {text-align:left} .bbs.write table td.editor {padding:0;} .bbs.write table td input {height:35px;border:1px solid #ddd;width:90%;box-sizing:border-box;padding:0 10px} .bbs.write table td input.tel {width:29%;} .bbs.write table td input.tel + .tel {margin-left:1%} .bbs.write table td input.checkCode-input {width:100px} .bbs.write table td select {height:35px;border:1px solid #ddd;width:90%;box-sizing:border-box;padding:0 10px;-webkit-appearance:menulist;-moz-appearance:menulist;appearance:menulist;} .asChart .asChart_txt{margin-bottom:30px} .asChart .asChart_txt h3{font-size:16px;color:#333;font-weight:500;position:relative;margin-bottom:5px;} .asChart .asChart_txt h3:before{width:10px;height:10px;content:"";border:1px solid #000;border-width:1px 1px 0 0;transform:rotate(-135deg);display:inline-block;} .asChart .asChart_txt h3:after{width:10px;height:10px;content:"";border:1px solid #000;border-width:1px 1px 0 0;transform:rotate(45deg);display:inline-block;} .asChart .bbsInfo {font-size:14px;color:#666;} .asChart .bbsInfo span {color:#333} .asChart table {width:100%;border-top:2px solid #333;border-collapse:collapse;table-layout:fixed} .asChart table thead th {padding:10px 0;background:#f9f9f9;font-size:16px;text-align:center;border:1px solid #ddd} .asChart table th, .asChart table td {text-align:center;border:1px solid #ddd;font-size:14px;color:#777;padding:10px 10px;font-weight:400;} .asChart table td strong, .asChart table th strong {font-weight:400;color:#333} .asChart table td em, .asChart table th em {color:#d81419} .agreement-txt {border:1px solid #ddd;padding:10px; font-size:13px;line-height:20px;font-weight:400;color:#888} /* 200914 상세페이지 리뉴얼 */ .w_custom {margin-left:auto;margin-right:auto;padding:0;box-sizing:border-box;width:100%;max-width:1280px;} .sub_re_detail, .sub_re_detail h2, .sub_re_detail h3, .sub_re_detail div, .sub_re_detail div:before, .sub_re_detail div:after, .sub_re_detail p, .sub_re_detail ul, .sub_re_detail li, .sub_re_detail li:before, .sub_re_detail strong, .sub_re_detail li em {box-sizing:border-box;white-space:normal;word-break:keep-all;word-wrap:break-word;} .sub_re_detail h3 {margin-top:17px;margin-bottom:45px;line-height:27px;font-size:18px;font-weight:400;color:#666;text-align:center;} .sub_re_detail h3 em {margin-bottom:10px;line-height:47px;font-size:40px;font-weight:300;color:#333;display:block;} .sub_re_detail h3 em strong {line-height:inherit;font-size:inherit;font-weight:700;color:inherit;display:inline-block;} .sub_re_detail .re_detail_step h3 em, .sub_re_detail .re_detail_portfolio h3 em, .sub_re_detail .re_detail_caution h3 em {font-weight:500;} .sub_re_detail .re_detail_why h3 {margin-bottom:43px;} .sub_re_detail .re_detail_step h3 {margin-bottom:50px;} .sub_re_detail .re_detail_caution h3 {margin-bottom:27px;} /* 상세페이지 타이틀 상단 */ .re_detail_top {height:0;padding:714px 0 0;position:relative;z-index:1;background:#333a42;width:100%;overflow:hidden;} .re_detail_top .w_custom {box-sizing:border-box;position:absolute;left:50%;top:45%;transform:translate(-50%, -50%);z-index:10;} .re_detail_top h2, .sub_re_detail .re_detail_top h3, .re_detail_top p {font-weight:400;display:block;text-align:left;color:#fff;} .re_detail_top h2[data-aos=fade-down] {transform:translate3d(0px,-30px,0);} .re_detail_top h3[data-aos=fade-up], .re_detail_top p[data-aos=fade-up] {transform:translate3d(0px,50px,0);} .re_detail_top h2[data-aos^=fade][data-aos^=fade].aos-animate, .re_detail_top h3[data-aos^=fade][data-aos^=fade].aos-animate, .re_detail_top p[data-aos^=fade][data-aos^=fade].aos-animate {transform:translateZ(0);} .re_detail_top h2 {line-height:37px;font-size:32px;} .sub_re_detail .re_detail_top h3 {margin-top:19px;margin-bottom:23px;line-height:69px;font-size:54px;font-weight:300;} .sub_re_detail .re_detail_top h3 em {line-height:inherit;font-size:inherit;font-weight:500;color:inherit;} .re_detail_top p {line-height:30px;font-size:18px;font-weight:400;} .re_detail_top p br {} .re_detail_top .bg_circle {margin:0;padding:0;position:absolute;display:inline-block;} .re_detail_top .bg_circle01 {left:-3%;bottom:-14%;width:283px;height:524px;background:url(../image/sub/bg_top_circle01.png) no-repeat 50% 50%;background-size:cover;} .re_detail_top .bg_circle02 {left:49%;top:0;width:264px;height:100px;background:url(../image/sub/bg_top_circle02.png) no-repeat 50% 50%;background-size:cover;} .re_detail_top .bg_circle03 {left:52%;top:2%;width:148px;height:148px;background:url(../image/sub/bg_top_circle03.png) no-repeat 50% 50%;background-size:cover;} .re_detail_top .bg_thumb {margin:0;padding:0;position:absolute;display:inline-block;} .re_detail_top .bg_thumb01[data-aos=fade-up-left], .re_detail_top .bg_thumb02[data-aos=fade-up-left] {transform:translate3d(25px,50px,0);} .re_detail_top .bg_thumb03[data-aos=fade-up-left], .re_detail_top .bg_thumb04[data-aos=fade-up-left], .re_detail_top .bg_thumb05[data-aos=fade-up-left], .re_detail_top .bg_thumb06[data-aos=fade-up-left] {transform:translate3d(50px,75px,0);} .re_detail_top .bg_thumb07[data-aos=fade-up-left], .re_detail_top .bg_thumb08[data-aos=fade-up-left], .re_detail_top .bg_thumb09[data-aos=fade-up-left] {transform:translate3d(75px,100px,0);} .re_detail_top .bg_thumb04[data-aos=fade-up] {transform:translate3d(0px,50px,0);} .re_detail_top .bg_thumb[data-aos^=fade][data-aos^=fade].aos-animate {transform:translateZ(0);} .re_detail_top .bg_thumb img {width:100%;height:auto;} .re_detail_top .bg_thumb.bg_thumb01 {left:calc(46.4% + 132px);top:-7%;width:372px;z-index:2;}/*height:272px;*/ .re_detail_top .bg_thumb.bg_thumb02 {left:calc(46.4% + 328px);top:-11.5%;width:371px;z-index:1;}/*64.5% height:236px;*/ .re_detail_top .bg_thumb.bg_thumb03 {left:46.4%;top:32.4%;width:461px;z-index:6;}/*height:443px;*/ .re_detail_top .bg_thumb.bg_thumb04 {left:calc(46.4% + 240px);top:13.2%;width:486px;z-index:5;}/*59.7% height:447px;*/ .re_detail_top .bg_thumb.bg_thumb04.on {} .re_detail_top .bg_thumb.bg_thumb05 {left:calc(46.4% + 470px);top:12.5%;width:478px;z-index:4;}/*72.1% height:339px;*/ .re_detail_top .bg_thumb.bg_thumb06 {left:calc(46.4% + 678px);top:4.1%;width:376px;z-index:3;}/*82.8% height:304px;*/ .re_detail_top .bg_thumb.bg_thumb07 {left:calc(46.4% + 128px);top:78%;width:441px;z-index:9;}/*height:304px;*/ .re_detail_top .bg_thumb.bg_thumb08 {left:calc(46.4% + 444px);top:61.6%;width:599px;z-index:8;}/*69.8% height:563px;*/ .re_detail_top .bg_thumb.bg_thumb09 {left:calc(46.4% + 710px);top:48.1%;width:350px;z-index:7;}/*84.1% height:481px;*/ /* 상세페이지 왜 고민하세요? */ .re_detail_why {padding-bottom:39px;background:#fff;position:relative;z-index:1;} .re_detail_why:before {transform:translate(-50%, 0) rotate(-4.5deg);top:-104px;left:50%;width:100%;height:100%;min-width:3000px;background:#fff;display:inline-block;content:"";position:absolute;z-index:2;} .re_detail_why .w_custom {box-sizing:border-box;position:relative;z-index:5;overflow:hidden;} .re_detail_why h3 {} .re_detail_why h3 em {} .re_detail_why .why_list {text-align:center;vertical-align:top;font-size:0;} .re_detail_why .why_list li {width:calc(33.3% - 26px);display:inline-block;vertical-align:top;} .re_detail_why .why_list li + li {margin-left:39px;} .re_detail_why .why_list li .why_thumb {} .re_detail_why .why_list li .why_thumb img {width:100%;height:auto;} .re_detail_why .why_list li p {margin-top:11px;line-height:30px;font-size:16px;font-weight:400;color:#333;} .re_detail_why .why_list li p br {} /* 상세페이지 제작비용 */ .re_detail_cost {padding-top:233px;padding-bottom:207px;position:relative;z-index:2;} .re_detail_cost:before {width:100%;height:0;padding:1580px 0 0;left:50%;top:50%;transform:translate(-50%, -50%) rotate(0deg);background:url(../image/sub/bg_grey_a.png) no-repeat 50% 0;background-size:cover;display:inline-block;content:"";position:absolute;z-index:-1;} .re_detail_cost h3 {} .re_detail_cost h3 em {} .re_detail_cost h3 em strong {} .re_detail_cost .cost_list {padding-bottom:10px;text-align:center;vertical-align:top;font-size:0;} .re_detail_cost .cost_list > li {width:calc(33.32% - 26px);display:inline-block;vertical-align:top;background:#fff;border:1px #ddd solid;padding:39px;transition:all 0.3s;} .re_detail_cost .cost_list > li + li {margin-left:39px;} .re_detail_cost .cost_list li .cost_title, .re_detail_cost .cost_list li .cost_spec {padding:0;display:block;} .re_detail_cost .cost_list li .cost_title {padding-bottom:39px;text-align:center;} .re_detail_cost .cost_list li .cost_title h4 {padding:19px 0 23px;line-height:31px;font-size:24px;font-weight:400;color:#333;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:39px;line-height:26px;font-size:18px;font-weight:400;color:#333;} .re_detail_cost .cost_list li .cost_title .cost_price {line-height:26px;font-size:18px;font-weight:400;color:#333;vertical-align:top;} .re_detail_cost .cost_list li .cost_title .cost_price strong {padding-bottom:2px;line-height:22px;font-size:24px;font-weight:400;display:inline-block;vertical-align:top;} .re_detail_cost .cost_list li .cost_spec {padding-top:39px;position:relative;z-index:1;text-align:Center;} .re_detail_cost .cost_list li .cost_spec:before {width:100%;height:1px;background:#ddd;position:absolute;display:inline-block;content:"";left:0;top:0;} .re_detail_cost .cost_list li .cost_spec ul {min-height:256px;padding-bottom:30px;display:inline-block;margin:0 auto;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:30px;line-height:23px;font-size:16px;font-weight:400;color:#333;text-align:left;position:relative;z-index:1;} .re_detail_cost .cost_list li .cost_spec ul li:before {width:14px;height:11px;background:url(../image/sub/icon_check_cost.gif) no-repeat 50% 50%;background-size:cover;left:0;top:6px;position:absolute;display:inline-block;content:"";transition:all 0.3s;} .re_detail_cost .cost_list li .cost_spec ul li + li {margin-top:7px;} .re_detail_cost .cost_list li:nth-of-type(1):hover {border-color:#ff5e62;} .re_detail_cost .cost_list li:nth-of-type(2):hover {border-color:#4472c4;} .re_detail_cost .cost_list li:nth-of-type(3):hover {border-color:#70ad49;} .re_detail_cost .cost_list li:nth-of-type(1):hover .cost_spec ul li:before {background:url(../image/sub/icon_check_cost1.gif) no-repeat 50% 50%;background-size:cover;} .re_detail_cost .cost_list li:nth-of-type(2):hover .cost_spec ul li:before {background:url(../image/sub/icon_check_cost2.gif) no-repeat 50% 50%;background-size:cover;} .re_detail_cost .cost_list li:nth-of-type(3):hover .cost_spec ul li:before {background:url(../image/sub/icon_check_cost3.gif) no-repeat 50% 50%;background-size:cover;} .re_detail_cost .cost_list li:nth-of-type(1) .cost_title h4, .re_detail_cost .cost_list li:nth-of-type(1) .cost_title .cost_price strong {color:#ff5e62;} .re_detail_cost .cost_list li:nth-of-type(2) .cost_title h4, .re_detail_cost .cost_list li:nth-of-type(2) .cost_title .cost_price strong {color:#4472c4;} .re_detail_cost .cost_list li:nth-of-type(3) .cost_title h4, .re_detail_cost .cost_list li:nth-of-type(3) .cost_title .cost_price strong {color:#70ad49;} .re_detail_cost .btnBox {} .re_detail_cost .btnBox p {margin-top:32px;line-height:26px;font-size:16px;font-weight:400;color:#666;text-align:center;} .re_detail_cost .btnBox p br {} /* 상세페이지 제작절차 */ .re_detail_step {padding-bottom:95px;} .re_detail_step h3 {} .step_circle_5 {vertical-align:top;text-align:center;font-size:0;} .step_circle_5 li {max-width:190px;display:inline-block;vertical-align:top;position:relative;z-index:1;} .step_circle_5 li + li {margin-left:80px;} .step_circle_5 li + li:before {width:32px;height:22px;background:url("../image/sub/step_arrow.png") no-repeat 50% 50%;background-size:cover;transform:translate(-50%, -50%) rotate(-90deg);top:95px;left:-40px;position:absolute;display:inline-block;content:"";} .step_circle_5 li + li.step05:before {} .step_circle_5 li .circle_box, .step_circle_5 li .step_txt {display:block;text-align:center;width:100%;} .step_circle_5 li .circle_box {} .step_circle_5 li .step_txt {} .step_circle_5 li .circle_box img {height:auto;width:190px;display:inline-block;} .step_circle_5 li h4 {margin-top:32px;margin-bottom:18px;line-height:33px;font-size:24px;font-weight:400;color:#333;text-align:center;} .step_circle_5 li p {line-height:24px;font-size:16px;font-weight:400;color:#666;text-align:center;} .step_circle_5 li p br {} .step_circle_5 li.step01 {} .step_circle_5 li.step02 {} .step_circle_5 li.step03 {} .step_circle_5 li.step04 {} .step_circle_5 li.step05 {} /* 상세페이지 포트폴리오 */ .re_detail_portfolio {padding-bottom:180px;position:relative;z-index:2;} .re_detail_portfolio:before {width:100%;height:0;padding:1300px 0 0;left:50%;bottom:-80px;transform:translate(-50%, 0) rotate(180deg);background:url(../image/sub/bg_grey_a.png) no-repeat 50% 100%;background-size:cover;display:inline-block;content:"";position:absolute;z-index:-1;} .re_detail_portfolio h3 {} .re_detail_portfolio .portfolio {font-size:18px;color:#333;overflow:hidden; display:flex; justify-content:space-around; flex-wrap:wrap;} .re_detail_portfolio .portfolio + .portfolio {margin-top:30px;} .re_detail_portfolio .portfolio li {width:22%;float:left;text-align:center;} .re_detail_portfolio .portfolio li[data-aos^=flip][data-aos^=flip] {opacity:0;} .re_detail_portfolio .portfolio li[data-aos=flip-left].aos-animate, .re_detail_portfolio .portfolio li[data-aos=flip-up].aos-animate, .re_detail_portfolio .portfolio li[data-aos=flip-right].aos-animate, .re_detail_portfolio .portfolio li[data-aos=flip-down].aos-animate {opacity:1;} .re_detail_portfolio .portfolio li + li {margin-left:4%} .re_detail_portfolio .portfolio li:nth-child(4n + 1) {margin-left:0} .re_detail_portfolio .portfolio li:nth-child(n + 5) {margin-top:30px} .re_detail_portfolio .portfolio li img {width:100%} .re_detail_portfolio .portfolio li span {display:block} .re_detail_portfolio .portfolio li span + span {margin-top:10px} .re_detail_portfolio .portfolio li span a {border:1px solid #ddd;display:block} .re_detail_portfolio .portfolio.m_portfolio {display:none;} .re_detail_portfolio .btnBox {} /* 상세페이지 제작 유의사항 */ .re_detail_caution {padding-bottom:22px;} .re_detail_caution h3 {} .re_detail_caution .caution_list {} .re_detail_caution .caution_list > li {padding-top:60px;padding-bottom:48px;position:relative;z-index:1;} .re_detail_caution .caution_list > li + li {} .re_detail_caution .caution_list > li:before {height:1px;width:100%;background:url(../image/sub/bg_dash_line.gif) repeat-x 0 0;background-size:auto 100%;display:inline-block;content:"";position:absolute;bottom:0;left:0;} .re_detail_caution .caution_list li h4 {margin-bottom:18px;padding:0;padding-left:58px;line-height:42px;font-size:30px;font-weight:500;color:#333;text-align:left;position:relative;z-index:1;} .re_detail_caution .caution_list li h4:before {width:40px;height:40px;top:50%;left:0;transform:translateY(-50%);background:url(../image/sub/icon_check_red_c.png) no-repeat 50% 50%;background-size:cover;display:inline-block;content:"";position:absolute;} .re_detail_caution .caution_list li ul {padding-left:58px;} .re_detail_caution .caution_list li ul li {padding-left:10px;line-height:27px;font-size:18px;font-weight:400;color:#666;text-align:left;position:relative;z-index:1;} .re_detail_caution .caution_list li ul li:before {line-height:inherit;font-size:inherit;font-weight:inherit;color:inherit;display:inline-block;content:"-";position:absolute;left:0;top:0;} .re_detail_caution .caution_list li ul li + li {margin-top:9px;} /* 상세페이지 폼 */ .re_detail_form {} @media only screen and (max-width:1297px) { .w_custom {padding-left:20px;padding-right:20px;max-width:100%;} .sub_re_detail h3 {margin-bottom:42px;line-height:25px;font-size:18px;} .sub_re_detail h3 em {margin-bottom:10px;line-height:45px;font-size:38px;} .sub_re_detail .re_detail_why h3 {margin-bottom:40px;} .sub_re_detail .re_detail_step h3 {margin-bottom:45px;} .sub_re_detail .re_detail_caution h3 {margin-bottom:24px;} /* 상세페이지 타이틀 상단 */ .re_detail_top {padding-top:714px;} .re_detail_top .w_custom {top:40%;} .re_detail_top h2 {line-height:37px;font-size:32px;} .sub_re_detail .re_detail_top h3 {margin-top:19px;margin-bottom:23px;line-height:69px;font-size:54px;} .re_detail_top p {line-height:30px;font-size:18px;} .re_detail_top .bg_thumb.bg_thumb01 {left:calc(36.4% + 132px);} .re_detail_top .bg_thumb.bg_thumb02 {left:calc(36.4% + 328px);} .re_detail_top .bg_thumb.bg_thumb03 {left:36.4%;} .re_detail_top .bg_thumb.bg_thumb04 {left:calc(36.4% + 240px);} .re_detail_top .bg_thumb.bg_thumb05 {left:calc(36.4% + 470px);} .re_detail_top .bg_thumb.bg_thumb06 {left:calc(36.4% + 678px);} .re_detail_top .bg_thumb.bg_thumb07 {left:calc(36.4% + 128px);} .re_detail_top .bg_thumb.bg_thumb08 {left:calc(36.4% + 444px);} .re_detail_top .bg_thumb.bg_thumb09 {left:calc(36.4% + 710px);} /* 상세페이지 왜 고민하세요? */ .re_detail_why {padding-bottom:39px;} .re_detail_why .why_list li p {margin-top:11px;line-height:28px;font-size:16px;} /* 상세페이지 제작비용 */ .re_detail_cost .cost_list {padding-bottom:10px;} .re_detail_cost .cost_list > li {width:calc(33.32% - 26px);padding:36px;} .re_detail_cost .cost_list > li + li {margin-left:36px;} .re_detail_cost .cost_list li .cost_title {padding-bottom:36px;} .re_detail_cost .cost_list li .cost_title h4 {padding:19px 0 23px;line-height:30px;font-size:24px;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:36px;line-height:24px;font-size:17px;} .re_detail_cost .cost_list li .cost_title .cost_price {line-height:26px;font-size:18px;} .re_detail_cost .cost_list li .cost_title .cost_price strong {padding-bottom:2px;line-height:22px;font-size:24px;} .re_detail_cost .cost_list li .cost_spec {padding-top:36px;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:30px;line-height:23px;font-size:16px;} .re_detail_cost .cost_list li .cost_spec ul li:before {width:14px;height:11px;top:6px;} .re_detail_cost .cost_list li .cost_spec ul li + li {margin-top:7px;} .re_detail_cost .btnBox p {margin-top:32px;line-height:23px;font-size:15px;} /* 상세페이지 제작절차 */ .re_detail_step {padding-bottom:95px;} .step_circle_5 li {max-width:154px;} .step_circle_5 li + li {margin-left:68px;} .step_circle_5 li + li:before {width:30px;height:21px;top:77px;left:-30px;} .step_circle_5 li .circle_box img {width:100%;height:auto;} .step_circle_5 li h4 {margin-top:32px;margin-bottom:18px;line-height:33px;font-size:24px;} .step_circle_5 li p {line-height:21px;font-size:14px;letter-spacing:-0.4px;} /* 상세페이지 포트폴리오 */ .re_detail_portfolio {padding-bottom:140px;} .re_detail_portfolio:before {padding-top:1200px;bottom:-75px;} .re_detail_portfolio .portfolio li span + span {margin-top:10px} /* 상세페이지 제작 유의사항 */ .re_detail_caution {padding-bottom:20px;} .re_detail_caution .caution_list > li {padding-top:60px;padding-bottom:48px;} .re_detail_caution .caution_list li h4 {margin-bottom:19px;padding-left:54px;line-height:39px;font-size:28px;} .re_detail_caution .caution_list li h4:before {width:37px;height:37px;} .re_detail_caution .caution_list li ul {padding-left:54px;} .re_detail_caution .caution_list li ul li {padding-left:9px;line-height:25px;font-size:17px;} } @media only screen and (max-width:1100px) { .sub_re_detail h3 {margin-bottom:40px;line-height:28px;font-size:17px;} .sub_re_detail h3 em {margin-bottom:9px;line-height:43px;font-size:36px;} .sub_re_detail .re_detail_why h3 {margin-bottom:37px;} .sub_re_detail .re_detail_step h3 {margin-bottom:45px;} .sub_re_detail .re_detail_caution h3 {margin-bottom:24px;} /* 상세페이지 타이틀 상단 */ .re_detail_top {padding-top:67%;} .re_detail_top h2 {line-height:34px;font-size:30px;} .sub_re_detail .re_detail_top h3 {margin-top:16px;margin-bottom:20px;line-height:65px;font-size:51px;} .re_detail_top p {line-height:27px;font-size:17px;} .re_detail_top .bg_circle01 {width:243px;height:424px;} .re_detail_top .bg_circle02 {width:224px;height:80px;} .re_detail_top .bg_circle03 {width:118px;height:118px;} .re_detail_top .bg_thumb.bg_thumb01 {left:calc(40.4% + 132px);} .re_detail_top .bg_thumb.bg_thumb02 {left:calc(40.4% + 328px);} .re_detail_top .bg_thumb.bg_thumb03 {left:40.4%;} .re_detail_top .bg_thumb.bg_thumb04 {left:calc(40.4% + 240px);} .re_detail_top .bg_thumb.bg_thumb05 {left:calc(40.4% + 470px);} .re_detail_top .bg_thumb.bg_thumb06 {left:calc(40.4% + 678px);} .re_detail_top .bg_thumb.bg_thumb07 {left:calc(40.4% + 128px);} .re_detail_top .bg_thumb.bg_thumb08 {left:calc(40.4% + 444px);} .re_detail_top .bg_thumb.bg_thumb09 {left:calc(40.4% + 710px);} /* 상세페이지 왜 고민하세요? */ .re_detail_why {padding-bottom:42px;} .re_detail_why:before {transform:translate(-50%, 0) rotate(-4.5deg);top:-88px;min-width:3000px;} .re_detail_why .why_list li p {margin-top:12px;line-height:26px;font-size:16px;} /* 상세페이지 제작비용 */ .re_detail_cost {padding-top:150px;padding-bottom:150px;} .re_detail_cost:before {padding-top:1360px;} .re_detail_cost .cost_list > li {width:calc(33.32% - 26px);padding:32px;} .re_detail_cost .cost_list > li + li {margin-left:32px;} .re_detail_cost .cost_list li .cost_title {padding-bottom:32px;} .re_detail_cost .cost_list li .cost_title h4 {padding:16px 0 20px;line-height:28px;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:28px;line-height:22px;font-size:16px;} .re_detail_cost .cost_list li .cost_title .cost_price {font-size:17px;} .re_detail_cost .cost_list li .cost_title .cost_price strong {padding-bottom:3px;line-height:23px;} .re_detail_cost .cost_list li .cost_spec {padding-top:32px;} .re_detail_cost .cost_list li .cost_spec ul {min-height:226px;padding-bottom:20px;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:27px;line-height:21px;font-size:15px;} .re_detail_cost .cost_list li .cost_spec ul li:before {width:13px;height:10px;top:5px;} .re_detail_cost .cost_list li .cost_spec ul li + li {margin-top:6px;} .re_detail_cost .btnBox {} .re_detail_cost .btnBox p {margin-top:28px;line-height:21px;font-size:14px;}/*19 13*/ .re_detail_cost .btnBox p br {} .re_detail_cost .btnBox p .m_br, .re_detail_cost .btnBox p .m_br + br {display:none;} /* 상세페이지 제작절차 */ .re_detail_step {padding-bottom:88px;} .step_circle_5 li h4 {margin-top:24px;margin-bottom:8px;} .step_circle_5 li.step05 {display:table;margin:44px auto 0;max-width:100%;width:328px;border-collapse:collapse;} .step_circle_5 li.step05:before {left:77px;top:-22px;transform:translate(-50%, -50%) rotate(0deg);} .step_circle_5 li.step05 .circle_box, .step_circle_5 li.step05 .step_txt {display:table-cell;vertical-align:middle;box-sizing:border-box;border-collapse:collapse;} .step_circle_5 li.step05 .circle_box {width:154px;} .step_circle_5 li.step05 .circle_box img {width:154px;} .step_circle_5 li.step05 .step_txt {text-align:left;padding-left:20px;} .step_circle_5 li.step05 h4, .step_circle_5 li.step05 p {text-align:left;} /* 상세페이지 포트폴리오 */ .re_detail_portfolio {padding-bottom:120px;} .re_detail_portfolio:before {padding-top:1000px;bottom:-60px;} .re_detail_portfolio .portfolio {font-size:17px;} .re_detail_portfolio .portfolio li {width:calc(25% - 18px);} .re_detail_portfolio .portfolio li + li {margin-left:24px} .re_detail_portfolio .portfolio li:nth-child(4n + 1) {margin-left:0} .re_detail_portfolio .portfolio li:nth-child(n + 5) {margin-top:24px} /* 상세페이지 제작 유의사항 */ .re_detail_caution .caution_list > li {padding-top:50px;padding-bottom:42px;} .re_detail_caution .caution_list li h4 {padding-left:48px;line-height:37px;font-size:26px;} .re_detail_caution .caution_list li h4:before {width:32px;height:32px;} .re_detail_caution .caution_list li ul {padding-left:48px;} .re_detail_caution .caution_list li ul li {line-height:23px;font-size:16px;} } @media only screen and (max-width:1023px) { .sub_re_detail h3 {margin-bottom:36px;line-height:29px;font-size:16px;} .sub_re_detail h3 em {margin-bottom:7px;line-height:37px;font-size:32px;} .sub_re_detail .re_detail_why h3 {margin-bottom:32px;} .sub_re_detail .re_detail_step h3 {margin-bottom:40px;} .sub_re_detail .re_detail_caution h3 {margin-bottom:19px;} /* 상세페이지 타이틀 상단 */ .re_detail_top {padding-top:72%;} .re_detail_top .w_custom {top:40%;} .re_detail_top h2 {line-height:28px;font-size:25px;} .sub_re_detail .re_detail_top h3 {margin-top:11px;margin-bottom:15px;line-height:54px;font-size:43px;} .re_detail_top p {line-height:22px;font-size:15px;} .re_detail_top .bg_circle01 {left:-3%;bottom:-14%;width:223px;height:394px;} .re_detail_top .bg_circle02 {left:49%;top:0;width:204px;height:74px;} .re_detail_top .bg_circle03 {left:52%;top:2%;width:108px;height:108px;} .re_detail_top .bg_thumb.bg_thumb01 {left:calc(32.4% + 152px);top:-6%;width:292px;} .re_detail_top .bg_thumb.bg_thumb02 {left:calc(32.4% + 298px);top:-10.5%;width:291px;} .re_detail_top .bg_thumb.bg_thumb03 {left:32.4%;top:29.4%;width:461px;} .re_detail_top .bg_thumb.bg_thumb04 {left:calc(32.4% + 230px);top:13.2%;width:406px;} .re_detail_top .bg_thumb.bg_thumb05 {left:calc(32.4% + 410px);top:11.5%;width:398px;} .re_detail_top .bg_thumb.bg_thumb06 {left:calc(32.4% + 610px);top:3.1%;width:296px;} .re_detail_top .bg_thumb.bg_thumb07 {left:calc(32.4% + 186px);top:83%;width:361px;} .re_detail_top .bg_thumb.bg_thumb08 {left:calc(32.4% + 442px);top:66.6%;width:519px;} .re_detail_top .bg_thumb.bg_thumb09 {left:calc(32.4% + 710px);top:53.1%;width:270px;} /* 상세페이지 왜 고민하세요? */ .re_detail_why:before {transform:translate(-50%, 0) rotate(-4.5deg);top:-68px;min-width:1400px;} .re_detail_why .why_list li {width:calc(33.3% - 16px);} .re_detail_why .why_list li + li {margin-left:24px;} .re_detail_why .why_list li p {line-height:21px;font-size:15px;} /* 상세페이지 제작비용 */ .re_detail_cost {padding-top:130px;padding-bottom:130px;} .re_detail_cost:before {padding-top:1140px;} .re_detail_cost .cost_list {padding-bottom:10px;} .re_detail_cost .cost_list > li {width:calc(33.32% - 16px);padding:20px;} .re_detail_cost .cost_list > li + li {margin-left:24px;} .re_detail_cost .cost_list li .cost_title {padding-bottom:24px;} .re_detail_cost .cost_list li .cost_title h4 {padding:11px 0 13px;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:22px;} .re_detail_cost .cost_list li .cost_title .cost_price {font-size:15px;} .re_detail_cost .cost_list li .cost_title .cost_price strong {padding-bottom:5px;line-height:21px;} .re_detail_cost .cost_list li .cost_spec {padding-top:24px;} .re_detail_cost .cost_list li .cost_spec:before {width:100%;height:1px;left:0;top:0;} .re_detail_cost .cost_list li .cost_spec ul {min-height:210px;padding-bottom:12px;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:20px;line-height:20px;font-size:14px;} .re_detail_cost .cost_list li .cost_spec ul li:before {width:11px;height:9px;} .re_detail_cost .btnBox p {line-height:20px;font-size:13px;} /* 상세페이지 제작절차 */ .re_detail_step {padding-bottom:82px;} .step_circle_5 li {width:calc(50% - 32px);max-width:calc(50% - 32px);padding:0 5px;} .step_circle_5 li + li {margin-left:64px;} .step_circle_5 li + li.step03, .step_circle_5 li + li.step04 {margin-top:64px;} .step_circle_5 li + li:before {width:26px;height:18px;top:calc(50% - 25px);left:-26px;transform:translate(-50%, -50%) rotate(-90deg);} .step_circle_5 li .circle_box img {width:100%;max-width:160px;height:auto;} .step_circle_5 li h4 {margin-top:20px;margin-bottom:0;line-height:30px;font-size:24px;} .step_circle_5 li p {display:none;} .step_circle_5 li.step01 {float:left;} .step_circle_5 li.step03 {clear:both;float:right;margin-bottom:64px;margin-left:64px;} .step_circle_5 li.step04 {float:right;margin-left:0;margin-bottom:64px;} .step_circle_5 li.step05 {clear:both;margin:0 auto;max-width:calc(50% - 32px);width:calc(50% - 32px);transform:translateX(-34%);} .step_circle_5 li.step03:before, .step_circle_5 li.step05:before {left:calc(30% - 16px);top:-26px;transform:translate(-50%, -50%) rotate(0deg);} .step_circle_5 li.step03:before {left:50%;} .step_circle_5 li.step04:before {left:auto;right:-26px;transform:translate(50%, -50%) rotate(90deg);} .step_circle_5 li.step05 .circle_box {width:50%;padding:0 5px;} .step_circle_5 li.step05 .circle_box img {width:100%;max-width:160px;} /* 상세페이지 포트폴리오 */ .re_detail_portfolio {padding-bottom:120px;} .re_detail_portfolio:before {padding-top:900px;bottom:-50px;} .re_detail_portfolio .portfolio {font-size:16px;} .re_detail_portfolio .portfolio li {width:calc(25% - 15px);} .re_detail_portfolio .portfolio li + li {margin-left:20px} .re_detail_portfolio .portfolio li:nth-child(4n + 1) {margin-left:0} .re_detail_portfolio .portfolio li:nth-child(n + 5) {margin-top:24px} /* 상세페이지 제작 유의사항 */ .re_detail_caution .caution_list > li {padding-top:36px;padding-bottom:36px;} .re_detail_caution .caution_list li h4 {padding-left:40px;line-height:30px;font-size:22px;} .re_detail_caution .caution_list li h4:before {width:28px;height:28px;} .re_detail_caution .caution_list li ul {padding-left:40px;} .re_detail_caution .caution_list li ul li {line-height:22px;font-size:15px;} } @media only screen and (max-width:860px) { .w_custom {padding-left:15px;padding-right:15px;} .sub_re_detail h3 {font-size:15px;} .sub_re_detail h3 em {line-height:33px;font-size:29px;} .sub_re_detail .re_detail_why h3 {margin-bottom:29px;} .sub_re_detail .re_detail_step h3 {margin-bottom:37px;} .sub_re_detail .re_detail_caution h3 {margin-bottom:16px;} /* 상세페이지 타이틀 상단 */ .re_detail_top {padding-top:76%;} .re_detail_top .w_custom {top:34%;} .re_detail_top h2 {line-height:26px;font-size:22px;} .sub_re_detail .re_detail_top h3 {line-height:46px;font-size:36px;} .re_detail_top p {line-height:20px;font-size:14px;font-weight:300;} .re_detail_top .bg_circle01 {left:-4%;bottom:-16%;width:203px;height:364px;} .re_detail_top .bg_circle02 {left:49%;top:0;width:184px;height:68px;} .re_detail_top .bg_circle03 {left:52%;top:2%;width:88px;height:88px;} .re_detail_top .bg_thumb.bg_thumb01 {left:calc(32.4% + 142px);top:-4%;width:252px;} .re_detail_top .bg_thumb.bg_thumb02 {left:calc(32.4% + 288px);top:-8.5%;width:251px;} .re_detail_top .bg_thumb.bg_thumb03 {left:32.4%;top:29.4%;width:421px;} .re_detail_top .bg_thumb.bg_thumb04 {left:calc(32.4% + 220px);top:13.2%;width:366px;} .re_detail_top .bg_thumb.bg_thumb05 {left:calc(32.4% + 392px);top:11.5%;width:358px;} .re_detail_top .bg_thumb.bg_thumb06 {left:calc(32.4% + 600px);top:3.1%;width:256px;} .re_detail_top .bg_thumb.bg_thumb07 {left:calc(32.4% + 176px);top:82%;width:321px;} .re_detail_top .bg_thumb.bg_thumb08 {left:calc(32.4% + 412px);top:65.6%;width:479px;} .re_detail_top .bg_thumb.bg_thumb09 {left:calc(32.4% + 680px);top:52.1%;width:230px;} /* 상세페이지 왜 고민하세요? */ .re_detail_why:before {top:-64px;min-width:1200px;} .re_detail_why .why_list li {width:calc(33.3% - 13.4px);} .re_detail_why .why_list li + li {margin-left:20px;} .re_detail_why .why_list li p {line-height:20px;font-size:14px;} /* 상세페이지 제작비용 */ .re_detail_cost {padding-top:110px;padding-bottom:110px;} .re_detail_cost:before {padding-top:1000px;} .re_detail_cost .cost_list > li {width:calc(33.32% - 13.4px);padding:16px;} .re_detail_cost .cost_list > li + li {margin-left:20px;} .re_detail_cost .cost_list li .cost_title {padding-bottom:16px;} .re_detail_cost .cost_list li .cost_title h4 {padding:11px 0 13px;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:22px;line-height:21px;font-size:15px;} .re_detail_cost .cost_list li .cost_title .cost_price {font-size:15px;} .re_detail_cost .cost_list li .cost_title .cost_price strong {padding-bottom:5px;line-height:21px;} .re_detail_cost .cost_list li .cost_spec {padding-top:16px;} .re_detail_cost .cost_list li .cost_spec ul {padding-bottom:13px;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:19px;line-height:20px;font-size:14px;} .re_detail_cost .btnBox p {line-height:19px;font-size:13px;} /* 상세페이지 제작절차 */ .re_detail_step {padding-bottom:76px;} .step_circle_5.w_custom {max-width:640px;} .step_circle_5 li + li:before {width:22px;height:17px;top:calc(50% - 25px);left:-28px;} .step_circle_5 li h4 {margin-top:12px;line-height:28px;font-size:22px;} .step_circle_5 li.step05 {margin:0 auto;max-width:100%;width:100%;transform:translateX(0);} .step_circle_5 li.step03:before, .step_circle_5 li.step05:before {left:calc(25% - 16px);top:-24px;} .step_circle_5 li.step03:before {left:50%;} .step_circle_5 li.step04:before {left:auto;right:-28px;} .step_circle_5 li.step05 .circle_box {width:45%;} /* 상세페이지 포트폴리오 */ .re_detail_portfolio {padding-bottom:100px;} .re_detail_portfolio:before {padding-top:840px;bottom:-52px;} .re_detail_portfolio .portfolio {font-size:15px;} .re_detail_portfolio .portfolio li {width:calc(25% - 15px);} .re_detail_portfolio .portfolio li + li {margin-left:20px} .re_detail_portfolio .portfolio li:nth-child(4n + 1) {margin-left:0} .re_detail_portfolio .portfolio li:nth-child(n + 5) {margin-top:20px} /* 상세페이지 제작 유의사항 */ .re_detail_caution .caution_list > li {padding-top:32px;padding-bottom:32px;} .re_detail_caution .caution_list li h4 {padding-left:34px;line-height:28px;font-size:21px;} .re_detail_caution .caution_list li h4:before {width:26px;height:26px;} .re_detail_caution .caution_list li ul {padding-left:34px;} .re_detail_caution .caution_list li ul li {line-height:20px;font-size:14px;} } @media only screen and (max-width:767px) { .sub_re_detail h3 {font-size:14px;} .sub_re_detail h3 em {line-height:29px;font-size:26px;} .sub_re_detail .re_detail_why h3 {margin-bottom:27px;} .sub_re_detail .re_detail_step h3 {margin-bottom:35px;} .sub_re_detail .re_detail_caution h3 {margin-bottom:14px;} /* 상세페이지 타이틀 상단 */ .re_detail_top .w_custom {top:28%;} .re_detail_top h2 {line-height:24px;font-size:20px;} .sub_re_detail .re_detail_top h3 {line-height:42px;font-size:33px;} .re_detail_top p {line-height:19px;font-size:13px;} .re_detail_top .bg_circle01 {left:-4%;bottom:-16%;width:183px;height:334px;} .re_detail_top .bg_circle02 {left:49%;top:0;width:164px;height:54px;} .re_detail_top .bg_circle03 {left:52%;top:2%;width:78px;height:78px;} .re_detail_top .bg_thumb.bg_thumb01 {left:calc(32.4% + 142px);top:-5%;width:202px;} .re_detail_top .bg_thumb.bg_thumb02 {left:calc(32.4% + 252px);top:-9.5%;width:201px;} .re_detail_top .bg_thumb.bg_thumb03 {left:32.4%;top:27.4%;width:371px;} .re_detail_top .bg_thumb.bg_thumb04 {left:calc(32.4% + 198px);top:8.2%;width:316px;} .re_detail_top .bg_thumb.bg_thumb05 {left:calc(32.4% + 338px);top:9.5%;width:308px;} .re_detail_top .bg_thumb.bg_thumb06 {left:calc(32.4% + 556px);top:1.1%;width:206px;} .re_detail_top .bg_thumb.bg_thumb07 {left:calc(32.4% + 162px);top:82%;width:271px;} .re_detail_top .bg_thumb.bg_thumb08 {left:calc(32.4% + 400px);top:65.6%;width:429px;} .re_detail_top .bg_thumb.bg_thumb09 {left:calc(32.4% + 668px);top:52.1%;width:180px;} /* 상세페이지 왜 고민하세요? */ .re_detail_why:before {transform:translate(-50%, 0) rotate(-4.5deg);top:-64px;min-width:1200px;}/**/ .re_detail_why .why_list li {width:100%;padding:0 5px;} .re_detail_why .why_list li + li {margin-left:0;margin-top:34px;} .re_detail_why .why_list li p {line-height:19px;font-size:14px;}/*19 14*/ .re_detail_why .why_list li p br {} /* 상세페이지 제작비용 */ .re_detail_cost {padding-top:102px;padding-bottom:102px;} .re_detail_cost:before {padding-top:1520px;} .re_detail_cost .cost_list {padding-bottom:30px;} .re_detail_cost .cost_list > li {width:100%;padding:14px;display:table;border-collapse:collapse;} .re_detail_cost .cost_list > li + li {margin-left:0;margin-top:20px;} .re_detail_cost .cost_list li .cost_title, .re_detail_cost .cost_list li .cost_spec {display:table-cell;vertical-align:middle;text-align:left;border-collapse:collapse;} .re_detail_cost .cost_list li .cost_title {padding-bottom:0;width:47.5%;padding-left:15px;} .re_detail_cost .cost_list li .cost_title h4 {padding:11px 0 13px;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:22px;line-height:22px;font-size:16px;} .re_detail_cost .cost_list li .cost_title .cost_price {font-size:15px;} .re_detail_cost .cost_list li .cost_title .cost_price strong {padding-bottom:5px;line-height:21px;} .re_detail_cost .cost_list li .cost_spec {padding-left:20px;padding-top:14px;padding-bottom:14px;width:52.5%;} .re_detail_cost .cost_list li .cost_spec:before {width:1px;height:calc(100% - 28px);left:0;top:14px;} .re_detail_cost .cost_list li .cost_spec ul {min-height:inherit;padding-top:13px;padding-bottom:13px;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:19px;line-height:20px;font-size:14px;} .re_detail_cost .btnBox p {line-height:19px;font-size:13px;} .re_detail_cost .btnBox p br {} /* 상세페이지 제작절차 */ .step_circle_5.w_custom {max-width:520px;} .step_circle_5 li + li:before {width:20px;height:16px;top:calc(50% - 18px);left:-30px;} .step_circle_5 li h4 {margin-top:9px;line-height:26px;font-size:20px;} .step_circle_5 li.step03:before, .step_circle_5 li.step05:before {left:calc(25% - 18px);top:-30px;} .step_circle_5 li.step03:before {left:50%;} .step_circle_5 li.step04:before {left:auto;right:-30px;} /* 상세페이지 포트폴리오 */ .re_detail_portfolio {padding-bottom:100px;} .re_detail_portfolio:before {padding-top:840px;bottom:-52px;} .re_detail_portfolio .portfolio {font-size:15px;display:flex; justify-content:space-around; flex-wrap:wrap;} .re_detail_portfolio .portfolio li {width:calc(33.3% - 12px);} .re_detail_portfolio .portfolio li + li, .re_detail_portfolio .portfolio li:nth-child(4n + 1) {margin-left:18px} .re_detail_portfolio .portfolio li:nth-child(3n + 1) {margin-left:0} .re_detail_portfolio .portfolio li:nth-child(n + 4) {margin-top:18px} /* 상세페이지 제작 유의사항 */ .re_detail_caution .caution_list > li {padding-top:32px;padding-bottom:32px;} .re_detail_caution .caution_list li h4 {padding-left:34px;line-height:26px;font-size:20px;} .re_detail_caution .caution_list li h4:before {width:26px;height:26px;} .re_detail_caution .caution_list li ul {padding-left:0;} .re_detail_caution .caution_list li ul li {line-height:20px;font-size:14px;} } @media only screen and (max-width:640px) { .sub_re_detail h3 em {font-size:24px;} /* 상세페이지 타이틀 상단 */ .re_detail_top .w_custom {top:10%;transform:translate(-50%, 0%);} .re_detail_top h2 {line-height:22px;font-size:18px;} .sub_re_detail .re_detail_top h3 {line-height:36px;font-size:29px;} .re_detail_top p {line-height:18px;font-size:12px;} .re_detail_top .bg_circle01 {left:-4%;bottom:-16%;width:163px;height:304px;} .re_detail_top .bg_circle02 {left:49%;top:0;width:144px;height:48px;} .re_detail_top .bg_circle03 {left:52%;top:2%;width:70px;height:70px;} .re_detail_top .bg_thumb.bg_thumb01 {left:calc(32.4% + 122px);top:-4%;width:142px;} .re_detail_top .bg_thumb.bg_thumb02 {left:calc(32.4% + 198px);top:-8.5%;width:141px;} .re_detail_top .bg_thumb.bg_thumb03 {left:32.4%;top:26.4%;width:311px;} .re_detail_top .bg_thumb.bg_thumb04 {left:calc(32.4% + 168px);top:7.2%;width:256px;} .re_detail_top .bg_thumb.bg_thumb05 {left:calc(32.4% + 338px);top:8.5%;width:248px;} .re_detail_top .bg_thumb.bg_thumb06 {left:calc(32.4% + 556px);top:0.1%;width:146px;} .re_detail_top .bg_thumb.bg_thumb07 {left:calc(32.4% + 146px);top:85%;width:211px;} .re_detail_top .bg_thumb.bg_thumb08 {left:calc(32.4% + 300px);top:65.6%;width:369px;} .re_detail_top .bg_thumb.bg_thumb09 {left:calc(32.4% + 528px);top:51.1%;width:120px;} /* 상세페이지 왜 고민하세요? */ .re_detail_why:before {transform:translate(-50%, 0) rotate(-4.5deg);top:-64px;min-width:1200px;} .re_detail_why .why_list li {width:100%;padding:0 5px;} .re_detail_why .why_list li + li {margin-left:0;margin-top:34px;} .re_detail_why .why_list li p {line-height:19px;font-size:14px;} .re_detail_why .why_list li p br {} /* 상세페이지 제작비용 */ .re_detail_cost {padding-top:102px;padding-bottom:102px;} .re_detail_cost:before {padding-top:1520px;} .re_detail_cost .cost_list {padding-bottom:30px;} .re_detail_cost .cost_list li .cost_title {padding-bottom:0;width:47.5%;padding-left:15px;} .re_detail_cost .cost_list li .cost_title h4 {padding:11px 0 13px;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:22px;line-height:22px;font-size:16px;max-width:160px;} .re_detail_cost .cost_list li .cost_title p br {display:none;} .re_detail_cost .cost_list li:nth-of-type(3) .cost_title p br {display:inline-block;} .re_detail_cost .cost_list li:nth-of-type(3) .cost_title p {max-width:106px;} .re_detail_cost .cost_list li .cost_title .cost_price {font-size:15px;} .re_detail_cost .cost_list li .cost_title .cost_price strong {padding-bottom:5px;line-height:21px;} .re_detail_cost .cost_list li .cost_spec {padding-left:20px;padding-top:14px;padding-bottom:14px;width:52.5%;} .re_detail_cost .cost_list li .cost_spec:before {width:1px;height:calc(100% - 28px);left:0;top:14px;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:19px;line-height:20px;font-size:14px;} .re_detail_cost .btnBox p {line-height:19px;font-size:13px;} /* 상세페이지 제작절차 */ .step_circle_5.w_custom {max-width:460px;} .step_circle_5 li h4 {margin-top:9px;line-height:25px;font-size:20px;} /* 상세페이지 포트폴리오 */ .re_detail_portfolio {padding-bottom:80px;} .re_detail_portfolio:before {padding-top:1200px;bottom:-112px;} .re_detail_portfolio .portfolio {font-size:15px;display:flex; justify-content:space-around; flex-wrap:wrap;} .re_detail_portfolio .portfolio li {width:calc(33.3% - 12px);} .re_detail_portfolio .portfolio li + li, .re_detail_portfolio .portfolio li:nth-child(4n + 1) {margin-left:18px} .re_detail_portfolio .portfolio li:nth-child(3n + 1) {margin-left:0} .re_detail_portfolio .portfolio li:nth-child(n + 4) {margin-top:18px} /* 상세페이지 제작 유의사항 */ .re_detail_caution .caution_list > li {padding-top:32px;padding-bottom:32px;} .re_detail_caution .caution_list li h4 {padding-left:34px;line-height:26px;font-size:19px;} .re_detail_caution .caution_list li h4:before {width:26px;height:26px;} .re_detail_caution .caution_list li ul {padding-left:0;} .re_detail_caution .caution_list li ul li {line-height:20px;font-size:14px;} } @media only screen and (max-width:500px) { .sub_re_detail h3 {margin-bottom:32px;} /* 상세페이지 타이틀 상단 */ .re_detail_top {padding-top:76%;} .re_detail_top .w_custom {top:9%;transform:translate(-50%, 0%);} .re_detail_top h2 {line-height:21px;font-size:16px;} .sub_re_detail .re_detail_top h3 {line-height:32px;font-size:24px;} .re_detail_top p {line-height:17px;font-size:11px;} .re_detail_top p br {} .re_detail_top .bg_circle01 {left:-4%;bottom:-20%;width:123px;height:224px;} .re_detail_top .bg_circle02 {left:49%;top:0;width:104px;height:32px;} .re_detail_top .bg_circle03 {left:52%;top:2%;width:60px;height:60px;} .re_detail_top .bg_thumb.bg_thumb01 {left:calc(41.4% + 122px);top:1%;width:122px;} .re_detail_top .bg_thumb.bg_thumb02 {left:calc(41.4% + 188px);top:-3.6%;width:121px;} .re_detail_top .bg_thumb.bg_thumb03 {left:41.4%;top:29.4%;width:291px;} .re_detail_top .bg_thumb.bg_thumb04 {left:calc(41.4% + 152px);top:9.2%;width:236px;} .re_detail_top .bg_thumb.bg_thumb05 {left:calc(41.4% + 322px);top:10.5%;width:228px;} .re_detail_top .bg_thumb.bg_thumb06 {left:calc(41.4% + 540px);top:1.1%;width:126px;} .re_detail_top .bg_thumb.bg_thumb07 {left:calc(41.4% + 144px);top:88%;width:191px;} .re_detail_top .bg_thumb.bg_thumb08 {left:calc(41.4% + 298px);top:68.6%;width:349px;} .re_detail_top .bg_thumb.bg_thumb09 {left:calc(41.4% + 526px);top:54.1%;width:100px;} /* 상세페이지 왜 고민하세요? */ .re_detail_why:before {top:-18px;} .re_detail_why .why_list li {width:100%;padding:0 5px;} .re_detail_why .why_list li + li {margin-left:0;margin-top:34px;} .re_detail_why .why_list li p {line-height:19px;font-size:14px;} .re_detail_why .why_list li p br {} /* 상세페이지 제작비용 */ .re_detail_cost {padding-top:102px;padding-bottom:102px;} .re_detail_cost:before {padding-top:1520px;} .re_detail_cost .cost_list {padding-bottom:30px;} .re_detail_cost .cost_list > li {width:100%;padding:14px;display:table;border-collapse:collapse;} .re_detail_cost .cost_list > li + li {margin-left:0;margin-top:20px;} .re_detail_cost .cost_list li .cost_title, .re_detail_cost .cost_list li .cost_spec {display:table-cell;vertical-align:middle;text-align:left;border-collapse:collapse;} .re_detail_cost .cost_list li .cost_title {padding-bottom:0;width:47.5%;padding-left:15px;} .re_detail_cost .cost_list li .cost_title h4 {padding:11px 0 13px;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:22px;line-height:22px;font-size:16px;max-width:160px;} .re_detail_cost .cost_list li .cost_title p br {display:none;} .re_detail_cost .cost_list li:nth-of-type(3) .cost_title p br {display:inline-block;} .re_detail_cost .cost_list li:nth-of-type(3) .cost_title p {max-width:106px;} .re_detail_cost .cost_list li .cost_title .cost_price {font-size:15px;} .re_detail_cost .cost_list li .cost_title .cost_price strong {padding-bottom:5px;line-height:21px;} .re_detail_cost .cost_list li .cost_spec {padding-left:20px;padding-top:14px;padding-bottom:14px;width:52.5%;} .re_detail_cost .cost_list li .cost_spec:before {width:1px;height:calc(100% - 28px);left:0;top:14px;} .re_detail_cost .cost_list li .cost_spec ul {min-height:inherit;padding-top:13px;padding-bottom:13px;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:19px;line-height:20px;font-size:14px;} .re_detail_cost .btnBox p {line-height:19px;font-size:13px;} .re_detail_cost .btnBox p br {} .re_detail_cost .btnBox p .m_br + br {display:inline-block;} /* 상세페이지 제작절차 */ .re_detail_step {padding-bottom:70px;} .re_detail_step h3 {} .step_circle_5.w_custom {max-width:460px;} .step_circle_5 li {width:calc(50% - 32px);max-width:calc(50% - 32px);padding:0 5px;} .step_circle_5 li + li {margin-left:64px;} .step_circle_5 li + li.step03, .step_circle_5 li + li.step04 {margin-top:64px;} .step_circle_5 li + li:before {width:20px;height:16px;top:calc(50% - 18px);left:-30px;transform:translate(-50%, -50%) rotate(-90deg);}/*-10 */ .step_circle_5 li + li.step05:before {} .step_circle_5 li .circle_box, .step_circle_5 li .step_txt {} .step_circle_5 li .circle_box {} .step_circle_5 li .circle_box img {width:100%;max-width:160px;height:auto;} .step_circle_5 li h4 {margin-top:9px;line-height:25px;font-size:20px;} .step_circle_5 li.step01 {float:left;} .step_circle_5 li.step02 {} .step_circle_5 li.step03 {clear:both;float:right;margin-bottom:64px;margin-left:64px;}/*margin-top:36px;*/ .step_circle_5 li.step04 {float:right;margin-left:0;margin-bottom:64px;} .step_circle_5 li.step05 {clear:both;display:table;margin:0 auto;max-width:100%;width:100%;transform:translateX(0);border-collapse:collapse;} .step_circle_5 li.step03:before, .step_circle_5 li.step05:before {left:calc(25% - 18px);top:-30px;transform:translate(-50%, -50%) rotate(0deg);} .step_circle_5 li.step03:before {left:50%;} .step_circle_5 li.step04:before {left:auto;right:-30px;transform:translate(50%, -50%) rotate(90deg);} .step_circle_5 li.step05 .circle_box, .step_circle_5 li.step05 .step_txt {display:table-cell;vertical-align:middle;box-sizing:border-box;border-collapse:collapse;} .step_circle_5 li.step05 .circle_box {width:45%;padding:0 5px;} .step_circle_5 li.step05 .circle_box img {width:100%;max-width:160px;} .step_circle_5 li.step05 .step_txt {text-align:left;padding-left:20px;} .step_circle_5 li.step05 h4, .step_circle_5 li.step05 p {text-align:left;} /* 상세페이지 포트폴리오 */ .re_detail_portfolio {padding-bottom:80px;} .re_detail_portfolio:before {padding-top:1200px;bottom:-112px;} .re_detail_portfolio .portfolio {font-size:15px;} .re_detail_portfolio .portfolio li {width:calc(33.3% - 8px);} .re_detail_portfolio .portfolio li + li, .re_detail_portfolio .portfolio li:nth-child(4n + 1) {margin-left:12px} .re_detail_portfolio .portfolio li:nth-child(3n + 1) {margin-left:0} .re_detail_portfolio .portfolio li:nth-child(n + 4) {margin-top:12px} /* 상세페이지 제작 유의사항 */ .re_detail_caution .caution_list > li {padding-top:32px;padding-bottom:32px;} .re_detail_caution .caution_list li h4 {padding-left:34px;line-height:26px;font-size:18px;} .re_detail_caution .caution_list li h4:before {width:26px;height:26px;} .re_detail_caution .caution_list li ul {padding-left:0;} .re_detail_caution .caution_list li ul li {line-height:20px;font-size:14px;} } @media only screen and (max-width:375px) { .sub_re_detail h3 {margin-bottom:28px;} /* 상세페이지 타이틀 상단 */ .re_detail_top {padding-top:84%;} .re_detail_top h2 {line-height:21px;font-size:16px;text-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);} .sub_re_detail .re_detail_top h3 {line-height:32px;font-size:24px;text-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);} .re_detail_top p {line-height:17px;font-size:11px;text-shadow:0px 0px 4px rgba(0, 0, 0, 0.3);} .re_detail_top .bg_circle01 {left:-4%;bottom:-20%;width:123px;height:224px;} .re_detail_top .bg_circle02 {left:49%;top:0;width:104px;height:32px;} .re_detail_top .bg_circle03 {left:52%;top:2%;width:60px;height:60px;} .re_detail_top .bg_thumb.bg_thumb01 {left:calc(41.4% + 88px);top:-3%;width:124px;} .re_detail_top .bg_thumb.bg_thumb02 {left:calc(41.4% + 150px);top:-8.0%;width:128px;} .re_detail_top .bg_thumb.bg_thumb03 {left:41.4%;top:28.4%;width:231px;} .re_detail_top .bg_thumb.bg_thumb04 {left:calc(41.4% + 120px);top:7.2%;width:224px;} .re_detail_top .bg_thumb.bg_thumb05 {left:calc(41.4% + 322px);top:10.5%;width:208px;} .re_detail_top .bg_thumb.bg_thumb06 {left:calc(41.4% + 540px);top:1.1%;width:106px;} .re_detail_top .bg_thumb.bg_thumb07 {left:calc(41.4% + 100px);top:84%;width:171px;} .re_detail_top .bg_thumb.bg_thumb08 {left:calc(41.4% + 254px);top:64.6%;width:329px;} .re_detail_top .bg_thumb.bg_thumb09 {left:calc(41.4% + 482px);top:50.1%;width:80px;} /* 상세페이지 왜 고민하세요? */ .re_detail_why:before {top:-18px;} .re_detail_why .why_list li p {line-height:19px;font-size:14px;} /* 상세페이지 제작비용 */ .re_detail_cost {padding-top:92px;padding-bottom:102px;} .re_detail_cost:before {padding-top:1460px;} .re_detail_cost .cost_list {padding-bottom:30px;} .re_detail_cost .cost_list li .cost_title {width:45%;padding-left:10px;} .re_detail_cost .cost_list li .cost_title h4 {padding:11px 0 13px;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:22px;line-height:22px;font-size:16px;max-width:160px;} .re_detail_cost .cost_list li .cost_title p br {display:none;} .re_detail_cost .cost_list li:nth-of-type(3) .cost_title p br {display:inline-block;} .re_detail_cost .cost_list li:nth-of-type(3) .cost_title p {max-width:106px;} .re_detail_cost .cost_list li .cost_title .cost_price {font-size:15px;} .re_detail_cost .cost_list li .cost_title .cost_price strong {padding-bottom:5px;line-height:21px;} .re_detail_cost .cost_list li .cost_spec {padding-left:10px;padding-top:12px;padding-bottom:12px;width:55%;} .re_detail_cost .cost_list li .cost_spec:before {height:calc(100% - 24px);top:12px;} .re_detail_cost .cost_list li .cost_spec ul {padding-top:13px;padding-bottom:13px;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:14px;line-height:20px;font-size:13px;} .re_detail_cost .btnBox p {line-height:19px;font-size:13px;} .re_detail_cost .btnBox p br {} .re_detail_cost .btnBox p .m_br + br {display:inline-block;} /* 상세페이지 제작절차 */ .re_detail_step {padding-bottom:70px;} .re_detail_step h3 {} .step_circle_5.w_custom {max-width:340px;} .step_circle_5 li {width:calc(50% - 32px);max-width:calc(50% - 32px);padding:0 5px;} .step_circle_5 li + li {margin-left:64px;} .step_circle_5 li + li.step03, .step_circle_5 li + li.step04 {margin-top:64px;} .step_circle_5 li + li:before {width:20px;height:16px;top:calc(50% - 18px);left:-30px;transform:translate(-50%, -50%) rotate(-90deg);}/*-10 */ .step_circle_5 li + li.step05:before {} .step_circle_5 li .circle_box, .step_circle_5 li .step_txt {} .step_circle_5 li .circle_box {} .step_circle_5 li .circle_box img {width:100%;max-width:160px;height:auto;} .step_circle_5 li h4 {margin-top:9px;line-height:25px;font-size:18px;} .step_circle_5 li.step01 {float:left;} .step_circle_5 li.step02 {} .step_circle_5 li.step03 {clear:both;float:right;margin-bottom:64px;margin-left:64px;}/*margin-top:36px;*/ .step_circle_5 li.step04 {float:right;margin-left:0;margin-bottom:64px;} .step_circle_5 li.step05 {clear:both;display:table;margin:0 auto;max-width:100%;width:100%;transform:translateX(0);border-collapse:collapse;} .step_circle_5 li.step03:before, .step_circle_5 li.step05:before {left:calc(25% - 18px);top:-30px;transform:translate(-50%, -50%) rotate(0deg);} .step_circle_5 li.step03:before {left:50%;} .step_circle_5 li.step04:before {left:auto;right:-30px;transform:translate(50%, -50%) rotate(90deg);} .step_circle_5 li.step05 .circle_box, .step_circle_5 li.step05 .step_txt {display:table-cell;vertical-align:middle;box-sizing:border-box;border-collapse:collapse;} .step_circle_5 li.step05 .circle_box {width:45%;padding:0 5px;} .step_circle_5 li.step05 .circle_box img {width:100%;max-width:160px;} .step_circle_5 li.step05 .step_txt {text-align:left;padding-left:20px;} .step_circle_5 li.step05 h4, .step_circle_5 li.step05 p {text-align:left;} /* 상세페이지 포트폴리오 */ .re_detail_portfolio {padding-bottom:80px;} .re_detail_portfolio:before {padding-top:1200px;bottom:-112px;} .re_detail_portfolio .portfolio {font-size:14px;} .re_detail_portfolio .portfolio li {width:calc(33.3% - 8px);} .re_detail_portfolio .portfolio li + li, .re_detail_portfolio .portfolio li:nth-child(4n + 1) {margin-left:12px} .re_detail_portfolio .portfolio li:nth-child(3n + 1) {margin-left:0} .re_detail_portfolio .portfolio li:nth-child(n + 4) {margin-top:12px} /* 상세페이지 제작 유의사항 */ .re_detail_caution .caution_list > li {padding-top:32px;padding-bottom:32px;} .re_detail_caution .caution_list li h4 {padding-left:34px;line-height:26px;font-size:18px;} .re_detail_caution .caution_list li h4:before {width:26px;height:26px;} .re_detail_caution .caution_list li ul {padding-left:0;} .re_detail_caution .caution_list li ul li {line-height:20px;font-size:14px;} } @media only screen and (max-width:360px) { .w_custom {padding-left:12px;padding-right:12px;} /* 상세페이지 타이틀 상단 */ .re_detail_top p {width:47%;} .re_detail_top p br {display:none;} /* 상세페이지 왜 고민하세요? */ /* 상세페이지 제작비용 */ .re_detail_cost:before {padding-top:1440px;} .re_detail_cost .cost_list li .cost_title {width:46%;padding-left:10px;} .re_detail_cost .cost_list li .cost_title h4 {font-size:22px;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:22px;line-height:20px;font-size:13px;max-width:127px;} .re_detail_cost .cost_list li .cost_title p br {display:inline-block;} .re_detail_cost .cost_list li .cost_title .cost_price {font-size:14px;} .re_detail_cost .cost_list li .cost_title .cost_price strong {font-size:22px;} .re_detail_cost .cost_list li .cost_spec {padding-left:10px;width:54%;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:12px;line-height:20px;font-size:12px;} .re_detail_cost .cost_list li .cost_spec ul li:before {width:9px;height:8px;top:6px;} /* 상세페이지 제작절차 */ /* 상세페이지 포트폴리오 */ .re_detail_portfolio .portfolio {font-size:13px;} .re_detail_portfolio .portfolio li {width:calc(33.3% - 4px);} .re_detail_portfolio .portfolio li + li, .re_detail_portfolio .portfolio li:nth-child(4n + 1) {margin-left:6px} } @media only screen and (max-width:320px) { .w_custom {padding-left:12px;padding-right:12px;} .sub_re_detail h3 {font-size:13px;margin-bottom:26px;} .sub_re_detail h3 em {line-height:22px;font-size:22px;} .sub_re_detail .re_detail_why h3 {margin-bottom:16px;} .sub_re_detail .re_detail_step h3 {margin-bottom:24px;} .sub_re_detail .re_detail_caution h3 {margin-bottom:6px;} /* 상세페이지 타이틀 상단 */ .re_detail_top {padding-top:84%;} .re_detail_top .w_custom {top:9%;} .re_detail_top h2 {line-height:20px;font-size:15px;} .sub_re_detail .re_detail_top h3 {line-height:30px;font-size:22px;} .re_detail_top p {line-height:17px;font-size:11px;width:47%;} .re_detail_top p br {display:none;} .re_detail_top .bg_circle01 {left:-4%;bottom:-20%;width:123px;height:224px;} .re_detail_top .bg_circle02 {left:49%;top:0;width:104px;height:32px;} .re_detail_top .bg_circle03 {left:52%;top:2%;width:60px;height:60px;} .re_detail_top .bg_thumb.bg_thumb01 {left:calc(41.4% + 88px);top:-5%;width:124px;} .re_detail_top .bg_thumb.bg_thumb02 {left:calc(41.4% + 150px);top:-10.0%;width:128px;} .re_detail_top .bg_thumb.bg_thumb03 {left:41.4%;top:28.4%;width:231px;} .re_detail_top .bg_thumb.bg_thumb04 {left:calc(41.4% + 120px);top:7.2%;width:224px;} .re_detail_top .bg_thumb.bg_thumb05 {left:calc(41.4% + 322px);top:10.5%;width:208px;} .re_detail_top .bg_thumb.bg_thumb06 {left:calc(41.4% + 540px);top:1.1%;width:106px;} .re_detail_top .bg_thumb.bg_thumb07 {left:calc(41.4% + 100px);top:84%;width:171px;} .re_detail_top .bg_thumb.bg_thumb08 {left:calc(41.4% + 254px);top:64.6%;width:329px;} .re_detail_top .bg_thumb.bg_thumb09 {left:calc(41.4% + 482px);top:50.1%;width:80px;} /* 상세페이지 왜 고민하세요? */ .re_detail_why:before {top:-18px;} .re_detail_why .why_list li p {line-height:19px;font-size:13px;} /* 상세페이지 제작비용 */ .re_detail_cost {padding-top:72px;padding-bottom:82px;} .re_detail_cost:before {padding-top:1460px;} .re_detail_cost .cost_list {padding-bottom:20px;} .re_detail_cost .cost_list li .cost_title {width:46%;padding-left:10px;} .re_detail_cost .cost_list li .cost_title h4 {font-size:20px;} .re_detail_cost .cost_list li .cost_title p {padding-bottom:20px;line-height:19px;font-size:12px;max-width:127px;} .re_detail_cost .cost_list li .cost_title p br {display:inline-block;} .re_detail_cost .cost_list li .cost_title .cost_price {font-size:13px;} .re_detail_cost .cost_list li .cost_title .cost_price strong {font-size:20px;} .re_detail_cost .cost_list li .cost_spec {padding-left:10px;width:54%;} .re_detail_cost .cost_list li .cost_spec:before {height:calc(100% - 24px);top:12px;} .re_detail_cost .cost_list li .cost_spec ul {padding-top:13px;padding-bottom:13px;} .re_detail_cost .cost_list li .cost_spec ul li {padding-left:12px;line-height:19px;font-size:11px;} .re_detail_cost .btnBox p {line-height:19px;font-size:13px;} .re_detail_cost .btnBox p br {} .re_detail_cost .btnBox p .m_br + br {display:inline-block;} /* 상세페이지 제작절차 */ .re_detail_step {padding-bottom:70px;} .re_detail_step h3 {} .step_circle_5.w_custom {max-width:280px;} .step_circle_5 li {width:calc(50% - 30px);max-width:calc(50% - 30px);padding:0 5px;} .step_circle_5 li + li {margin-left:60px;} .step_circle_5 li + li.step03, .step_circle_5 li + li.step04 {margin-top:60px;} .step_circle_5 li + li:before {width:20px;height:16px;top:calc(50% - 18px);left:-30px;transform:translate(-50%, -50%) rotate(-90deg);}/*-10 */ .step_circle_5 li + li.step05:before {} .step_circle_5 li .circle_box, .step_circle_5 li .step_txt {} .step_circle_5 li .circle_box {} .step_circle_5 li .circle_box img {width:100%;max-width:160px;height:auto;} .step_circle_5 li h4 {margin-top:9px;line-height:25px;font-size:16px;} .step_circle_5 li.step01 {float:left;} .step_circle_5 li.step02 {} .step_circle_5 li.step03 {clear:both;float:right;margin-bottom:60px;margin-left:60px;}/*margin-top:36px;*/ .step_circle_5 li.step04 {float:right;margin-left:0;margin-bottom:60px;} .step_circle_5 li.step05 {clear:both;display:table;margin:0 auto;max-width:100%;width:100%;transform:translateX(0);border-collapse:collapse;} .step_circle_5 li.step03:before, .step_circle_5 li.step05:before {left:calc(25% - 18px);top:-30px;transform:translate(-50%, -50%) rotate(0deg);} .step_circle_5 li.step03:before {left:50%;} .step_circle_5 li.step04:before {left:auto;right:-30px;transform:translate(50%, -50%) rotate(90deg);} .step_circle_5 li.step05 .circle_box, .step_circle_5 li.step05 .step_txt {display:table-cell;vertical-align:middle;box-sizing:border-box;border-collapse:collapse;} .step_circle_5 li.step05 .circle_box {width:39%;padding:0 5px;} .step_circle_5 li.step05 .circle_box img {width:100%;max-width:160px;} .step_circle_5 li.step05 .step_txt {text-align:left;padding-left:20px;} .step_circle_5 li.step05 h4, .step_circle_5 li.step05 p {text-align:left;} /* 상세페이지 포트폴리오 */ .re_detail_portfolio .portfolio {font-size:12px;} .re_detail_portfolio .portfolio li {width:calc(33.3% - 4px);} .re_detail_portfolio .portfolio li + li, .re_detail_portfolio .portfolio li:nth-child(4n + 1) {margin-left:6px} .re_detail_portfolio .portfolio li:nth-child(3n + 1) {margin-left:0} .re_detail_portfolio .portfolio li:nth-child(n + 4) {margin-top:10px} /* 상세페이지 제작 유의사항 */ .re_detail_caution .caution_list > li {padding-top:28px;padding-bottom:28px;} .re_detail_caution .caution_list li h4 {padding-left:30px;line-height:24px;font-size:16px;} .re_detail_caution .caution_list li h4:before {width:22px;height:22px;} .re_detail_caution .caution_list li ul li {line-height:19px;font-size:13px;} } /*─────────────────────────────────────────────────────────── 맞춤제작 191202 ───────────────────────────────────────────────────────────*/ .sub01_visual{background:#111134;position:relative;height:580px;overflow:hidden;} .sub02 .sub01_visual{background:#d81419;} .sub01_visual .txt{position:relative;z-index:4;left:50%;top:50%;width:auto;display:inline-block;transform:translate(-640px, -70%);animation:txt_play 2.5s ease-in-out alternate;left:50%;top:50%;opacity:1;} .sub01_visual .txt b, .sub01_visual .txt strong, .sub01_visual .txt strong em, .sub01_visual .txt span{display:block;color:#ffffff;font-weight:400;} .sub01_visual .txt b{font-size:20px;line-height:20px;} .sub01_visual .txt strong{font-size:50px;line-height:65px;margin:28px 0 46px;} .sub01_visual .txt strong em{font-size:60px;font-weight:500;} .sub01_visual .txt span{font-size:16px;line-height:16px;} .sub01_visual .item{animation-timing-function:ease-in-out;position:absolute;} .sub01_visual .item1{background:url('../image/sub/sub01_visual_item01.png') no-repeat 0 0;width:302px;height:302px;animation:play1 1s linear infinite alternate;left:-30px;bottom:-30px;} .sub01_visual .item2{background:url('../image/sub/sub01_visual_item02.png') no-repeat 0 0;width:400px;height:329px;animation:play2 1s linear infinite alternate;left:50%;top:0;} .sub01_visual .item3{background:url('../image/sub/sub01_visual_item03.png') no-repeat 0 0;width:22px;height:26px;animation:play3 1s linear infinite alternate;left:50%;margin-left:-312px;bottom:100px;} .sub01_visual .item4{background:url('../image/sub/sub01_visual_item04.png') no-repeat 0 0;width:40px;height:43px;animation:play4 1s linear infinite alternate;right:180px;bottom:230px;} .sub01_visual .item5{background:url('../image/sub/sub01_visual_item05.png') no-repeat 0 0;width:127px;height:81px;animation:play5 1s linear infinite alternate;top:90px;left:120px;z-index:1;} .sub02 .sub01_visual .item1{background:url('../image/sub/sub02_visual_item01.png') no-repeat 0 0;left:78px;bottom:-100px;width:302px;height:302px;} .sub02 .sub01_visual .item2{background:url('../image/sub/sub02_visual_item02.png') no-repeat 0 0;height:218px;margin-left:-200px;} .sub02 .sub01_visual .item4{background:url('../image/sub/sub02_visual_item04.png') no-repeat 0 0;width:148px;height:137px;right:264px;bottom:108px;} .sub01_visual .img{animation-timing-function:ease-in-out;position:absolute;transition:1.5s;-webkit-box-shadow:10px 10px 59px 0px rgba(0,0,0,0.41);-moz-box-shadow:10px 10px 59px 0px rgba(0,0,0,0.41);box-shadow:10px 10px 59px 0px rgba(0,0,0,0.41);} .sub01_visual .img1{background:url('../image/sub/sub01_visual_img1.png') no-repeat 0 0;width:498px;height:392px;animation:img_play1 1.5s ease-in-out alternate;left:50%;margin-left:150px;top:50%;opacity:1;transform:translateY(-40%);z-index:1;box-shadow:none !important;} .sub01_visual .img2{background:url('../image/sub/sub01_visual_img2.png') no-repeat 0 0;width:395px;height:242px;z-index:2;left:50%;margin-left:-30px;top:55px;opacity:0;border-radius:6px;} .sub01_visual .img3{background:url('../image/sub/sub01_visual_img3.png') no-repeat 0 0;width:395px;height:242px;z-index:3;left:50%;margin-left:-150px;bottom:70px;opacity:0;border-radius:6px;} .sub01_visual .img4{background:url('../image/sub/sub01_visual_img4.png') no-repeat 0 0;width:128px;height:272px;z-index:4;left:50%;margin-left:550px;bottom:70px;opacity:0;} .sub01_visual .img5{background:url('../image/sub/sub01_visual_img5.png') no-repeat 0 0;width:123px;height:267px;z-index:5;-webkit-box-shadow:10px 10px 36px -2px rgba(0,0,0,0.75);-moz-box-shadow:10px 10px 36px -2px rgba(0,0,0,0.75);box-shadow:10px 10px 36px -2px rgba(0,0,0,0.75);border-radius:5px;left:50%;margin-left:490px;bottom:75px;opacity:0;} .sub02 .sub01_visual .img1{background:url('../image/sub/sub02_visual_img1.png') no-repeat 0 0;} .sub02 .sub01_visual .img2{background:url('../image/sub/sub02_visual_img2.png') no-repeat 0 0;} .sub02 .sub01_visual .img3{background:url('../image/sub/sub02_visual_img3.png') no-repeat 0 0;} @-webkit-keyframes txt_play{ from{ left:50%;top:50%;transform:translateY(-70%);margin-left:-800px;opacity:0; } to{ left:50%;top:50%;transform:translateY(-70%);margin-left:-640px;opacity:1; } } @-webkit-keyframes img_play1{ from{ left:50%;margin-left:200px;top:50%;opacity:0.5;transform:translateY(-40%); } to{ left:50%;margin-left:150px;top:50%;opacity:1;transform:translateY(-40%); } } /* active */ .active_effect{position:relative;bottom:-100px;opacity:0;transition-delay:0.2s;transition:0.4s;} .active .active_effect{bottom:0;opacity:1;overflow:hidden;} .sub02 .main_reason ul li:nth-of-type(1){background-image:url('../image/sub/sub2_reason_ico01.png');} .sub02 .main_reason ul li:nth-of-type(2){background-image:url('../image/sub/sub2_reason_ico02.png');} .sub02 .main_reason ul li:nth-of-type(3){background-image:url('../image/sub/sub2_reason_ico03.png');} .sub02 .main_reason ul li:nth-of-type(4){background-image:url('../image/sub/sub2_reason_ico04.png');} .sub02 .main_reason ul li:nth-of-type(5){background-image:url('../image/sub/sub2_reason_ico05.png');} .sub02 .main_reason ul li:nth-of-type(6){background-image:url('../image/sub/sub2_reason_ico06.png');} .main_award{background:url('../image/sub/sub_award_bg.jpg') no-repeat center top;background-attachment:fixed;} .main_award .w_set{padding:85px 0 100px;text-align:center;} .main_award .w_set p{padding-top:115px;position:relative;font-size:52px;line-height:52px;color:#ffffff;transition:0.4s;} .main_award .w_set p:after{content:"";display:block;position:absolute;left:0;top:0;width:100%;background:url('../image/sub/sub_awrad_txt.png') no-repeat center top;height:58px;} .main_award .w_set p strong{font-weight:500;} .main_award .w_set span{display:block;font-size:16px;color:#ffffff;margin:50px 0 70px;line-height:24px;transition:0.8s;} .main_award .w_set ul{display:inline-block;vertical-align:middle;font-size:0;transition:1s;} .main_award .w_set ul li{padding:0 10px 0 70px;position:relative;line-height:30px;text-align:left;font-size:16px;color:#ffffff;} .main_award .w_set ul li + li{padding-top:6px;margin-top:5px;border-top:1px solid #76715a;} .main_award .w_set ul li span{position:absolute;left:13px;top:7px;margin:0;line-height:16px;opacity:0.7;} .main_award .w_set ul li + li span{top:13px} .main_interview{margin:80px auto 60px;} .main_interview .sub_title_wrap{margin:0 0 40px;} .main_interview .swiper_box{overflow:hidden;} .main_interview .swiper-container{overflow:visible;} .main_interview .box{padding:40px 40px 30px 40px;box-sizing:border-box;border:1px solid #dddddd;height:276px;} .main_interview .box .id{font-size:16px;color:#333333;} .main_interview .box .score{padding:28px 0;border-bottom:1px solid #dddddd;box-sizing:border-box;} .main_interview .box .score dt, .main_interview .box .score dd{display:inline-block;vertical-align:middle;box-sizing:border-box;line-height:14px;height:14px;} .main_interview .box .score dt{font-size:14px;color:#333333;} .main_interview .box .score dd{background:url('../image/sub/sub_interview_score.jpg') no-repeat 7px;min-width:99px;} .main_interview .box .score dd + dt{padding-left:26px;} .main_interview .box .cont{line-height:24px;height:72px;color:#888888;font-size:12px;padding-top:13px;word-break:keep-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;} .main_interview .swiper-wrapper{padding-bottom:60px;} /* .main_interview .swiper-wrapper .swiper-slide-active{margin-left:1px;} */ .main_interview .swiper-container-horizontal>.swiper-scrollbar{max-width:500px;margin:0 auto;left:50%;transform:translateX(-50%);} .main_interview .swiper-scrollbar{background:#f2f2f2;} .main_interview .swiper-scrollbar-drag{background:#d81419;} .main_making{background:#eef0f3;padding:40px 0 70px;} .main_making .w_set{} .main_making .w_set .sub_title_wrap{margin-bottom:40px;} .main_making .w_set ul{width:calc(100% + 60px);margin-left:-60px;font-size:0;position:relative;height:0;overflow:hidden;} .main_making .w_set ul.active_effect {min-height:340px;} .main_making .w_set ul li{width:calc(33.3% - 60px);margin-left:60px;text-align:center;padding:40px 0 14px 0;border:1px solid #dddddd;box-sizing:Border-box;background:#fff;display:inline-block;vertical-align:top;} .main_making .w_set ul li + li{} .main_making .w_set ul li .ct{font-size:20px;text-align:center;padding:0 40px;line-height:40px;background:#f9fcf8;border:1px solid #acd598;border-radius:40px;display:inline-block;} .main_making .w_set ul li p{font-size:20px;line-height:26px;color:#333333;margin:22px 0 29px;} .main_making .w_set ul li strong{display:block;margin:0 0 32px;font-size:16px;color:#666666;line-height:22px;padding-top:18px;box-sizing:border-box;font-weight:400;} .main_making .w_set ul li strong em{font-size:40px;color:#62af2f;line-height:1em;vertical-align:top;display:inline-block;margin-top:-16px;} .main_making .w_set ul li .bg{font-size:16px;color:#ffffff;line-height:25px;padding:22px 5%;text-align:center;word-break:keep-all;} .main_making .w_set ul li .bg em{font-weight:500;} .main_making .w_set ul li dl{border-top:1px solid #dddddd;padding:20px 0;text-align:left;width:calc(100% - 80px);margin:0 auto;text-align:center;} .main_making .w_set ul li dl + dl{} .main_making .w_set ul li dl dt, .main_making .w_set ul li dl dd{display:inline-block;vertical-align:top;box-sizing:border-box;line-height:30px;} .main_making .w_set ul li dl dt{color:#888888;font-size:14px;} .main_making .w_set ul li dl dd{padding-left:16px;font-size:15px;color:#333333;} .main_making .w_set ul li dl dd b{font-weight:600;} .sub02 .main_making .w_set ul li{padding-bottom:0;} .sub02 .main_making .w_set ul li:nth-of-type(1) strong{margin-bottom:41px;} .sub02 .main_making .w_set ul li:nth-of-type(2) p{margin:22px 0 18px;} .sub02 .main_making .w_set ul li:nth-of-type(2) strong{margin-bottom:26px;} .main_making .w_set ul li:nth-of-type(1) .ct{color:#62af2f;border-color:#acd598;} .main_making .w_set ul li:nth-of-type(1) .bg{background:#62af2f;} .main_making .w_set ul li:nth-of-type(1) strong em{color:#62af2f;} .main_making .w_set ul li:nth-of-type(2) .ct{color:#565cd0;border-color:#565cd0;} .main_making .w_set ul li:nth-of-type(2) .bg{background:#565cd0;} .main_making .w_set ul li:nth-of-type(2) strong em{color:#565cd0;} .main_making .w_set ul li:nth-of-type(3) .ct{color:#d81419;border-color:#d81419;} .main_making .w_set ul li:nth-of-type(3) .bg{background:#d81419;} .main_making .w_set ul li:nth-of-type(3) strong em{color:#d81419;font-size:22px;line-height:49px;display:block;} .section .sub_title_wrap{margin:60px 0 45px;} .section.w_set .productionStep .step{height:0;padding-bottom:27.2%;position:relative;margin-bottom:0;} .section.w_set .productionStep .step li span:last-child{font-size:24px;color:#333333;margin-bottom:10px;display:block;} .section.w_set .mainserviceStep .step{height:0;padding-bottom:25.2%;position:relative;margin-bottom:0;} .section.w_set .mainserviceStep .step li span:last-child{font-size:24px;color:#333333;margin-bottom:70px;display:block;} /* active */ .section.w_set .productionStep .step li{} .section.active .productionStep .step li{transform:translateX(0%);} .section.active .productionStep .step li br{display:none;} .section.active .productionStep .step li:nth-of-type(1){background:url("../image/sub/s_portfolioStep01.png") no-repeat center 0;background-size:190px;} .section.active .productionStep .step li:nth-of-type(2){background:url("../image/sub/s_portfolioStep02.png") no-repeat center 0;background-size:190px;} .section.active .productionStep .step li:nth-of-type(3){background:url("../image/sub/s_portfolioStep03.png") no-repeat center 0;background-size:190px;} .section.active .productionStep .step li:nth-of-type(4){background:url("../image/sub/s_portfolioStep04.png") no-repeat center 0;background-size:190px;} .section.active .productionStep .step li:nth-of-type(5){background:url("../image/sub/s_portfolioStep05.png") no-repeat center 0;background-size:190px;} .section.w_set + .main_port{padding-bottom:50px;padding-top:40px;} .section.w_set .mainserviceStep .step li{} .section.active .mainserviceStep .step li{} .section.active .mainserviceStep .step li br{display:none;} .section.active .mainserviceStep .step li:nth-of-type(1){background:url("../image/sub/s_mainserviceStep01.png") no-repeat center 0;background-size:260px;} .section.active .mainserviceStep .step li:nth-of-type(2){background:url("../image/sub/s_mainserviceStep02.png") no-repeat center 0;background-size:260px;} .section.active .mainserviceStep .step li:nth-of-type(3){background:url("../image/sub/s_mainserviceStep03.png") no-repeat center 0;background-size:260px;} .section.active .mainserviceStep .step li:nth-of-type(4){background:url("../image/sub/s_mainserviceStep04.png") no-repeat center 0;background-size:260px;} @media only screen and (max-width:1350px) { .sub01_visual .txt{width:100%;box-sizing:border-box;left:0;padding:0 30px;transform:translate(0, -70%);} @-webkit-keyframes txt_play{ from{ left:0;top:50%;transform:translateY(-70%);margin-left:-200px;opacity:0; } to{ left:0;top:50%;transform:translateY(-70%);margin-left:0;opacity:1; } } } /*─────────────────────────────────────────────────────────── 랜딩페이지 191206 ───────────────────────────────────────────────────────────*/ .randing_visual{height:940px;background:url('../image/sub/r_visual_bg.jpg') no-repeat bottom;background-size:cover;position:relative;} .randing_visual .txt{position:absolute;left:0;top:5%;width:100%;text-align:center;} .randing_visual .txt b, .randing_visual .txt strong, .randing_visual .txt span{display:block;transition:1s;} .randing_visual .txt b{font-size:72px;line-height:86px;color:#ffffff;font-weight:600;opacity:0;position:relative;top:-100px;} .randing_visual .txt strong{margin:22px 0 9px;font-size:36px;line-height:49px;color:#ffffff;font-weight:400;opacity:0;position:relative;bottom:-100px;} .randing_visual .txt span{font-size:20px;line-height:35px;color:#ffffff;opacity:0;position:relative;bottom:-100px;} .randing_visual .txt.on b{opacity:1;top:0;} .randing_visual .txt.on strong{opacity:0.8;bottom:0;} .randing_visual .txt.on span{opacity:0.7;bottom:0;} .randing_visual .txt_box_wrap{position:absolute;left:50%;top:34%;transform:translateY(-23%);margin-left:0;z-index:5;overflow:hidden;opacity:0;transition:1.5s;transition-timing-function:ease-in-out;transform:translateX(-50%);min-width:740px;} .randing_visual .txt_box{display:table;width:400px;height:400px;float:left;} .randing_visual .txt_box div{display:table-cell;vertical-align:middle;text-align:center;color:#fff;font-size:28px;line-height:28px;} .randing_visual .txt_box div b{display:block;color:#fff;font-size:44px;line-height:44px;margin-bottom:23px;} .randing_visual .txt_box.txt1{background:url('../image/sub/r_txtbox_bg1.png') no-repeat center;} .randing_visual .txt_box.txt2{background:url('../image/sub/r_txtbox_bg2.png') no-repeat center;margin-left:40px;} .randing_visual .txt_box_wrap.on{opacity:1;} .randing_visual .img{position:absolute;bottom:0;opacity:0;transition:1s;} .randing_visual .img.img1{z-index:3;width:640px;height:526px;background:url('../image/sub/r_visual_img01.png') no-repeat center;left:50%;transform:translateX(-50%);-webkit-box-shadow:0px -10px 30px 0px rgba(0,0,0,0.53);-moz-box-shadow:0px -10px 30px 0px rgba(0,0,0,0.53);box-shadow:0px -10px 30px 0px rgba(0,0,0,0.53);} .randing_visual .img.img2{z-index:2;width:410px;height:486px;background:url('../image/sub/r_visual_img03.png') no-repeat center;left:50%;transform:translateX(-150%);transition:1s;} .randing_visual .img.img3{z-index:2;width:410px;height:486px;background:url('../image/sub/r_visual_img02.png') no-repeat center;right:50%;transform:translateX(150%);transition:1s;} .randing_visual .img.img4{z-index:1;width:286px;height:447px;background:url('../image/sub/r_visual_img05.png') no-repeat center;left:50%;transform:translateX(-280%);transition:1.5s;} .randing_visual .img.img5{z-index:1;width:286px;height:447px;background:url('../image/sub/r_visual_img04.png') no-repeat center;right:50%;transform:translateX(280%);transition:1.5s;} .randing_visual .img1.on{opacity:1;} .randing_visual .img2.on{opacity:1;transform:translateX(-178%);} .randing_visual .img3.on{opacity:1;transform:translateX(178%);} .randing_visual .img4.on{opacity:1;transform:translateX(-322%);} .randing_visual .img5.on{opacity:1;transform:translateX(322%);} .main_why{margin:112px auto 48px;} .main_why .tit, .main_why .tit strong{display:block;} .main_why .tit{text-align:center;font-size:30px;line-height:30px;color:#333;transition:0.8s;} .main_why .tit strong{font-size:60px;line-height:60px;color:#333333;margin-top:26px;font-weight:500;} .main_why .tit strong em{color:#d81419;font-weight:600;} .main_why .why{margin-top:75px;font-size:160px;line-height:120px;color:#333333;font-weight:900;text-align:center;padding-bottom:306px;position:relative;transition:1.2s;} .main_why .why:after{content:"";display:block;background:url('../image/sub/r_why_img.png') no-repeat bottom;height:100%;position:absolute;left:0;width:100%;bottom:0;} .main_why .txt{font-size:30px;color:#333333;line-height:40px;text-align:center;margin-top:54px;transition:1.5s;word-break:keep-all;} .main_why .txt strong{display:block;margin-top:23px;font-size:50px;line-height:50px;color:#333333;word-break:keep-all;} .main_function{padding:4% 0 3.7%;background:#f1f1f1;} .main_function .w_set{min-width:1000px;width:1000px;text-align:center;} .main_function .w_set ul{width:calc(100% + 80px);margin-left:-80px;padding-bottom:117px;margin-bottom:52px;position:relative;font-size:0;transition:0.8s;} .main_function .w_set ul:after{content:"";display:block;width:calc(100% - 80px);height:95px;background:url('../image/sub/r_function_plus.png') no-repeat center bottom;position:absolute;left:80px;bottom:0;transition:1.5s;} .main_function .w_set ul li{padding-top:19.5%;background-repeat:no-repeat;background-position:center top;background-size:100% auto;width:calc(25% - 80px);margin-left:80px;position:relative;display:inline-block;vertical-align:middle;text-align:center;} .main_function .w_set ul li + li{} .main_function .w_set ul li + li:before{content:"";display:block;width:12px;height:12px;background:#dddddd;border-radius:100px;position:absolute;top:50%;margin-top:-32px;left:-26%;} .main_function .w_set ul li:nth-of-type(1){background-image:url('../image/sub/r_function_ico01.png');} .main_function .w_set ul li:nth-of-type(2){background-image:url('../image/sub/r_function_ico02.png');} .main_function .w_set ul li:nth-of-type(3){background-image:url('../image/sub/r_function_ico03.png');} .main_function .w_set ul li:nth-of-type(4){background-image:url('../image/sub/r_function_ico04.png');} .main_function .w_set ul li span{display:block;font-size:24px;color:#333333;} .main_function .w_set ul li + li:before{margin-top:-20px;} .main_function .w_set strong{display:inline-block;padding:0 75px;line-height:140px;border-radius:140px;background:#333333;font-size:40px;color:#fff;margin:0 auto;font-weight:500;transition:2s;} .main_shop{width:calc(100% - 300px);margin:0 auto 0;} .main_shop .tit{text-align:center;font-size:30px;color:#333333;margin:100px 0 50px;} .main_shop .tit strong{font-size:50px;color:#333333;line-height:50px;} .main_shop ul{font-size:0px;width:calc(100% + 62px);margin-left:-62px;} .main_shop ul li{position:relative;bottom:-20px;opacity:0;display:inline-block;vertical-align:top;width:calc(33.3% - 62px);margin-left:62px;text-align:center;} .main_shop ul li img{width:100%;border:1px solid #dddddd;box-sizing:border-box;} .main_shop ul li span{display:block;font-size:24px;color:#666666;line-height:63px;margin-bottom:29px;} .main_shop ul li.active{bottom:0;transition:1s;opacity:1;} /*─────────────────────────────────────────────────────────── 페이스북 광고 랜딩페이지 191220 ───────────────────────────────────────────────────────────*/ .content_wrap {width:100%;margin:0;padding:0;overflow:hidden;border-top:1px solid #ddd;background:#fff;} .content_wrap .dart_randing_con {} .content_wrap .dart_randing_con h3.dart_randing_title {text-align:center;margin:0;padding:0;border:0;display:block;} .content_wrap .dart_randing_con h3.dart_randing_title:before {display:none;} .content_wrap .dart_randing_con h3.dart_randing_title em, .dart_randing_con h3.dart_randing_title span {display:block;margin:0;padding:0;font-style:normal;} .content_wrap .dart_randing_con h3.dart_randing_title em {padding-top:2.3em;font-size:50px;line-height:1em;letter-spacing:-0.2px;font-weight:700;color:#333;} .content_wrap .dart_randing_con h3.dart_randing_title span {font-size:22px;line-height:1em;font-weight:400;color:#666;} .content_wrap .dart_randing_con h3.dart_randing_title em + span {padding:1em 0 3.7em;} /*타이틀영역*/ .randing_title {background:url(../image/sub/bg_dart_randing.jpg) no-repeat 50% 50%;background-size:cover;height:0;padding-top:400px;position:relative;z-index:1;margin:0;width:100%;} .randing_title .randing_title_txt {height:124px;width:auto;transform:translate(-50%, -50%);position:absolute;left:50%;top:50%;} .randing_title .randing_title_txt img {width:auto;height:100%;} .randing_title .randing_title_txt img.pc_tit {display:block;} .randing_title .randing_title_txt img.m_tit {display:none;} /*질문영역*/ .randing_qa {text-align:Center;} .randing_qa h3 {padding:2.4em 0 1.16em 0;font-size:50px;line-height:1em;text-align:center;margin:0;font-weight:500;color:#333;white-space:normal;word-break:keep-all;word-wrap:break-word; } .randing_qa h3 br {display:none;} .randing_qa ul {padding-bottom:11.6%;position:relative;z-index:1;} .randing_qa ul:after {clear:both;content:"";display:block;} .randing_qa li {float:left;border-width:3px;border-radius:8px;width:31.25%;box-shadow:1.6em 1.6em 0 0 rgba(238, 238, 238, 1);margin-top:2em;font-size:12px;text-align:center;border-style:solid;border-color:#e70012;display:inline-block;box-sizing:border-box;} .randing_qa li p {font-size:34px;line-height:1.35em;padding:2em 0 1.2em;color:#e70012;font-weight:600;position:relative;z-index:1;} .randing_qa li p:before {padding:0 0.6em;width:2.3em;height:2.3em;background:#fff url(../image/sub/icon_check_qa.png) no-repeat 50% 50%;background-size:2.3em auto;font-size:inherit;margin:0 auto;transform:translate(-50%, -50%);top:0;left:50%;position:absolute;display:inline-block;content:"";} .randing_qa li p br {} .randing_qa li + li {margin-left:3.125%;} .randing_qa ul:before {width:11.6%;height:22.7%;background:url(../image/sub/icon_arrow_qa.png) no-repeat 50% 50%;background-size:100% auto;position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:inline-block;content:"";} .randing_qa .qa_answer {font-size:44px;line-height:1.4em;margin:2em auto 3.3em;border-bottom:3px #222 solid;padding:0;color:#222;font-weight:400;text-align:center;position:relative;z-index:1;display:inline-block;white-space:normal;word-break:keep-all;word-wrap:break-word;} .randing_qa .qa_answer strong {font-weight:500;color:#e70012;font-size:56px;line-height:inherit;} .randing_qa .qa_answer br {display:none;} .randing_qa .qa_answer:before, .randing_qa .qa_answer:after{display:none;} /*어바웃영역*/ .dart_counter {text-align:center;margin:0;padding:0;background:url(../image/main/bg_main_fixed.jpg) no-repeat 50% 50%;background-attachment:fixed;background-size:100% auto;} .content_wrap .dart_randing_con .dart_counter h3.dart_randing_title em {color:#fff;} .content_wrap .dart_randing_con .dart_counter h3.dart_randing_title span {color:#ccc;line-height:1.45em;} .dart_counter ul {} .dart_counter ul:after {} .dart_counter ul li {float:left;width:33.33%;font-size:28px;font-weight:500;line-height:1em;display:inline-block;vertical-align:top;text-align:center;color:#fff;} .dart_counter ul li + li {} .dart_counter ul li span {margin-bottom:0.95em;font-size:20px;letter-spacing:1px;font-weight:400;color:#ccc;display:block;} .dart_counter ul li p {padding-top:0.83em;padding-bottom:2em;font-size:60px;line-height:1em;vertical-align:top;} .dart_counter ul li p b {padding-top:0.3em;font-size:34px;line-height:inherit;font-weight:500;display:inline-block;box-sizing:border-box;vertical-align:top;} .dart_counter ul li p strong {font-size:inherit;line-height:inherit;font-weight:700;display:inline-block;vertical-align:top;} /*레드배경영역*/ .randing_red {background:url(../image/sub/brand_bg.jpg) no-repeat 50% 0;} .content_wrap .dart_randing_con .randing_red h3.dart_randing_title em {color:#fff;font-size:60px;} .content_wrap .dart_randing_con .randing_red h3.dart_randing_title em + span {padding:0.8em 0 1.5em;font-size:30px;line-height:1.4em;color:#fff;white-space:normal;word-break:keep-all;word-wrap:break-word;} .content_wrap .dart_randing_con .randing_red h3.dart_randing_title em + span span.t_br, .content_wrap .dart_randing_con .randing_red h3.dart_randing_title em + span span.t_br + br, .content_wrap .dart_randing_con .randing_red h3.dart_randing_title em + span span.m_br, .content_wrap .dart_randing_con .randing_red h3.dart_randing_title em + span span.m_br + br {display:none;} .randing_red p {padding:1.84em 0 2.4em;font-size:50px;line-height:1em;font-weight:400;color:#fff;text-align:center;position:relative;z-index:1;} .randing_red p:before {width:1px;height:1.2em;opacity:0.8;background:#fff;margin:0;padding:0;top:0;left:50%;display:inline-block;content:"";position:absolute;} .randing_red p strong {font-weight:700;} /*4스텝영역*/ .randing_4step {padding-top:10%;padding-bottom:8%;} .randing_4step .step_title {padding-top:28.125%;width:100%;background:url(../image/sub/bg_randing_tip.png) no-repeat 50% 0;background-size:cover;height:0;margin:0;position:relative;z-index:1;text-align:center;} .randing_4step .step_title .title_txt {transform:translate(-50%, -0%);left:50%;top:19.4%;position:absolute;width:100%;} .randing_4step .step_title h3 {font-size:22px;height:2.27em;line-height:2.27em;padding:0 2.5em;border-radius:1em;background:#fff;color:#353545;font-weight:400;display:inline-block;margin:0 auto;} .randing_4step .step_title p {font-size:46px;padding-top:0.34em;line-height:1.2em;font-weight:400;color:#fff;} .randing_4step .step_title p strong {font-weight:700;} .randing_4step .step_list {} .randing_4step .step_list ul {padding-top:6.25%;} .randing_4step .step_list ul:after {clear:both;content:"";display:block;} .randing_4step .step_list ul li {float:left;width:25%;font-size:26px;padding:10.5em 0 0 0;line-height:1em;text-align:center;color:#333;font-weight:400;} .randing_4step .step_list ul li p {} .randing_4step .step_list ul li + li {} .randing_4step .step_list ul li.step01 {background:url(../image/sub/icon_step4_01.png) no-repeat 50% 0;background-size:8.85em auto;} .randing_4step .step_list ul li.step02 {background:url(../image/sub/icon_step4_02.png) no-repeat 50% 0;background-size:8.85em auto;} .randing_4step .step_list ul li.step03 {background:url(../image/sub/icon_step4_03.png) no-repeat 50% 0;background-size:8.85em auto;} .randing_4step .step_list ul li.step04 {background:url(../image/sub/icon_step4_04.png) no-repeat 50% 0;background-size:8.85em auto;color:#e70012;} .content_wrap .dart_randing_con {} .content_wrap .dart_randing_con {} .content_wrap .dart_randing_con .our_value {padding-top:176px;}/*104*/ .content_wrap .dart_randing_con .our_history {padding-top:0;} .content_wrap .dart_randing_con .dart_innovat {background:#eee;} .content_wrap .dart_randing_con .dart_innovat h3.dart_randing_title em + span {padding-bottom:0;} .content_wrap .dart_randing_con .dart_innovat .merit_slide + .merit_slide {background:#fff;} .content_wrap .dart_randing_con .dart_innovat .merit_slide + .merit_slide + .merit_slide {background:#eee;} .content_wrap .dart_randing_con .main_port {padding-top:0;} .content_wrap .dart_randing_con .main_port h3.dart_randing_title em {padding-bottom:1.08em;} .content_wrap .dart_randing_con .our_client {padding-top:0;} .content_wrap .dart_randing_con .our_client h3.dart_randing_title em {padding-bottom:1.45em;} .content_wrap .dart_randing_con .main_visitor {margin-top:0;margin-bottom:0;} .content_wrap .dart_randing_con .merit_slide .merit_slide_wrap .sld_li img {border-color:#ddd;} /*─────────────────────────────────────────────────────────── 페이스북 광고 랜딩페이지 191220 ───────────────────────────────────────────────────────────*/ @media only screen and (max-width:1937px) { .main_port ul li {width:20%;display:inline-block;} .main_port ul li:nth-of-type(n + 16) {display:none;} } @media only screen and (max-width:1697px) { .main_port ul li {width:25%;display:inline-block;} .main_port ul li:nth-of-type(n + 13) {display:none;} } @media only screen and (max-width:1900px) { .randing_visual .txt b{} .randing_visual .txt strong{} .randing_visual .txt span{} .randing_visual .img{background-size:auto 100% !important;} .randing_visual .img.img1{height:400px;width:485px;} .randing_visual .img.img2{height:400px;width:310px;} .randing_visual .img.img3{height:400px;width:300px;} .randing_visual .img.img4{height:350px;width:282px;transform:translateX(-189%);} .randing_visual .img.img5{height:350px;width:282px;transform:translateX(189%);} .randing_visual .img.img1.on{} .randing_visual .img.img2.on{transform:translateX(-166%);} .randing_visual .img.img3.on{transform:translateX(168%);} .randing_visual .img.img4.on{transform:translateX(-240%);} .randing_visual .img.img5.on{transform:translateX(240%);} .randing_visual .txt_box{width:350px;height:350px;background-size:cover !important;} .randing_visual .txt_box div b{font-size:38px;line-height:38px;margin-bottom:4%;} } @media only screen and (max-width:1460px) { /*─────────────────────────────────────────────────────────── HEADER 190514 ───────────────────────────────────────────────────────────*/ #header > .w_set {} #header .hd_logo {left:40px;width:244px;} #header .hd_logo a {height:30px;background-size:auto 30px;} #header .hd_menu {right:40px;} #header .hd_menu > li {} #header .hd_menu li.hd_lnb {padding:0 25px;} #header .hd_menu li.hd_lnb a, #header .hd_menu li.bar a, #header .hd_menu li.btn_search a, #header .hd_menu li.btn_blog a {line-height:24px;height:24px;} #header .hd_menu li.hd_lnb a {font-size:16px;} #header .hd_menu li.hd_lnb.on > a, #header .hd_menu li.hd_lnb:hover > a {} #header .hd_menu li.hd_lnb:nth-of-type(4) a {color:#e70012;} #header .hd_menu li .hd_menu_sub {top:22px;min-width:160px;padding-top:30px;} #header .hd_menu li.on .hd_menu_sub, #header .hd_menu li:hover .hd_menu_sub {} #header .hd_menu li .hd_menu_sub ul.hd_sub_wrap {padding:20px 10px;} #header .hd_menu li .hd_menu_sub ul.hd_sub_wrap:before {height:26px;} #header .hd_menu li .hd_menu_sub ul.hd_sub_wrap li {padding:4px 0;} #header .hd_menu li .hd_menu_sub ul.hd_sub_wrap li a {font-size:14px;line-height:22px;} #header .hd_menu li .hd_menu_sub ul.hd_sub_wrap li:hover a {} #header .hd_menu li.bar {padding:0 10px 0 25px;} #header .hd_menu li.bar:before {width:1px;height:12px;} #header .hd_menu li.bar a {font-size:14px;} #header .hd_menu li.btn_search, #header .hd_menu li.btn_blog {padding:0 10px;} #header .hd_menu li.btn_search {} #header .hd_menu li.btn_search a {background-size:auto 24px;width:24px;} #header .hd_menu li.btn_blog {} #header .hd_menu li.btn_blog a {background-size:auto 24px;width:17px;font-size:0;} #header.bg_w {height:80px;} #header.main_hd .hd_logo a {background-size:auto 100%;} #header.main_hd .hd_menu li.hd_lnb a, #header.main_hd .hd_menu li.bar a, #header.main_hd .hd_menu li.btn_search a, #header.main_hd .hd_menu li.btn_blog a {} #header.main_hd .hd_menu li.btn_search a {background-size:auto 24px;} #header.main_hd .hd_menu li.btn_blog a {background-size:auto 24px;} #header.main_hd .hd_menu li.bar:before {} #header.main_hd .hd_menu li .hd_menu_sub ul.hd_sub_wrap {} #header.main_hd.bg_w .hd_logo a {background-size:auto 100%;} #header.main_hd.bg_w .hd_menu li.hd_lnb a, #header.main_hd.bg_w .hd_menu li.bar a, #header.main_hd.bg_w .hd_menu li.btn_search a, #header.main_hd.bg_w .hd_menu li.btn_blog a {} #header.main_hd.bg_w .hd_menu li.btn_search a {background-size:auto 24px;} #header.main_hd.bg_w .hd_menu li.btn_blog a {background-size:auto 24px;} #header.main_hd.bg_w .hd_menu li.bar:before {} #header.main_hd.bg_w .hd_menu li .hd_menu_sub ul.hd_sub_wrap {} /*─────────────────────────────────────────────────────────── MAIN 190514 ───────────────────────────────────────────────────────────*/ /* 파트너사 */ .main_partner {} .main_partner ul {} .main_partner ul li {width:16.6%;} .main_partner ul li p {} .main_partner ul li span {font-size:13px;line-height:21px;padding:5px 0 0 0;} .main_partner ul li + li {} .main_partner ul li + li:before {top:8px;height:80px;} /*─────────────────────────────────────────────────────────── 랜딩페이지 191206 ───────────────────────────────────────────────────────────*/ .randing_visual{height:850px;background-position:center 100px;background-color:#0e1324;} .randing_visual .txt b{font-size:60px;line-height:80px;} .randing_visual .txt strong{font-size:30px;line-height:40px;} .randing_visual .txt span{} .randing_visual .img{background-size:auto 100% !important;} .randing_visual .img.img1{height:400px;width:485px;} .randing_visual .img.img2{height:400px;width:310px;transform:translateX(-118%);} .randing_visual .img.img3{height:400px;width:300px;transform:translateX(118%);} .randing_visual .img.img4{height:350px;width:282px;transform:translateX(-189%);} .randing_visual .img.img5{height:350px;width:282px;transform:translateX(189%);} .randing_visual .img.img1.on{} .randing_visual .img.img2.on{transform:translateX(-126%);} .randing_visual .img.img3.on{transform:translateX(128%);} .randing_visual .img.img4.on{transform:translateX(-200%);} .randing_visual .img.img5.on{transform:translateX(200%);} } @media only screen and (max-width:1280px) { /*─────────────────────────────────────────────────────────── HEADER 190514 ───────────────────────────────────────────────────────────*/ #header > .w_set {} #header .hd_logo {left:1.5%;width:214px;} #header .hd_logo a {height:26px;background-size:auto 100%;} #header .hd_menu {right:1.5%;} #header .hd_menu > li {} #header .hd_bnr{left:15px;} #header .hd_menu li.hd_lnb {padding:0 16px;} #header .hd_menu li.hd_lnb a, #header .hd_menu li.bar a, #header .hd_menu li.btn_search a, #header .hd_menu li.btn_blog a {line-height:24px;height:24px;} #header .hd_menu li.hd_lnb a {font-size:16px;} #header .hd_menu li.hd_lnb.on > a, #header .hd_menu li.hd_lnb:hover > a {} #header .hd_menu li .hd_menu_sub {top:22px;min-width:160px;padding-top:30px;} #header .hd_menu li.on .hd_menu_sub, #header .hd_menu li:hover .hd_menu_sub {} #header .hd_menu li .hd_menu_sub ul.hd_sub_wrap {padding:18px 10px;} #header .hd_menu li .hd_menu_sub ul.hd_sub_wrap:before {height:26px;} #header .hd_menu li .hd_menu_sub ul.hd_sub_wrap li {padding:2px 0;} #header .hd_menu li .hd_menu_sub ul.hd_sub_wrap li a {font-size:14px;line-height:22px;} #header .hd_menu li .hd_menu_sub ul.hd_sub_wrap li:hover a {} #header .hd_menu li.bar {padding:0 6px 0 16px;} #header .hd_menu li.bar:before {width:1px;height:12px;} #header .hd_menu li.bar a {font-size:14px;} #header .hd_menu li.btn_search, #header .hd_menu li.btn_blog {padding:0 6px;} #header .hd_menu li.btn_search {} #header .hd_menu li.btn_search a {background-size:100% auto;width:22px;} #header .hd_menu li.btn_blog {} #header .hd_menu li.btn_blog a {background-size:100% auto;width:16px;font-size:0;} #header.bg_w {height:80px;} #header.main_hd .hd_logo a {background-size:auto 100%;} #header.main_hd .hd_menu li.hd_lnb a, #header.main_hd .hd_menu li.bar a, #header.main_hd .hd_menu li.btn_search a, #header.main_hd .hd_menu li.btn_blog a {} #header.main_hd .hd_menu li.btn_search a {background-size:100% auto;} #header.main_hd .hd_menu li.btn_blog a {background-size:100% auto;} #header.main_hd .hd_menu li.bar:before {} #header.main_hd .hd_menu li .hd_menu_sub ul.hd_sub_wrap {} #header.main_hd.bg_w .hd_logo a {background-size:auto 100%;} #header.main_hd.bg_w .hd_menu li.hd_lnb a, #header.main_hd.bg_w .hd_menu li.bar a, #header.main_hd.bg_w .hd_menu li.btn_search a, #header.main_hd.bg_w .hd_menu li.btn_blog a {} #header.main_hd.bg_w .hd_menu li.btn_search a {background-size:100% auto;} #header.main_hd.bg_w .hd_menu li.btn_blog a {background-size:100% auto;} #header.main_hd.bg_w .hd_menu li.bar:before {} #header.main_hd.bg_w .hd_menu li .hd_menu_sub ul.hd_sub_wrap {} /*─────────────────────────────────────────────────────────── MAIN 190514 ───────────────────────────────────────────────────────────*/ .main_cont_wrap {padding-bottom:0px;} /* 서비스 */ .main_service {padding-top:5.25%;} .main_service .cont01 {padding-top:36.5%;} .main_service .cont01 .cont01_txt {padding-right:2%;width:56%;} .main_service .cont01 .cont01_txt p.title {font-size:36px;line-height:42px;} .main_service .cont01 .cont01_txt p.title b {} .main_service .cont01 .cont01_txt p.cont {font-size:16px;line-height:24px;font-weight:300;padding-top:2%;} .main_service .cont01 .cont01_txt .btns_wrap {padding-top:9.3%;} .main_service .cont01 .cont01_txt .btns_wrap a {font-size:14px;letter-spacing:-0.05em;line-height:20px;width:23.5%;padding-top:72px;} .main_service .cont01 .cont01_txt .btns_wrap a + a {margin-left:2%;} .main_service .cont01 .cont01_txt .btns_wrap a span {font-size:16px;line-height:20px;padding-bottom:9px;} .main_service .cont01 .cont01_txt .btns_wrap a.service01 {} .main_service .cont01 .cont01_txt .btns_wrap a.service02 {} .main_service .cont01 .cont01_txt .btns_wrap a.service03 {} .main_service .cont01 .cont01_txt .btns_wrap a.service04 {;} .main_service .cont01 .cont01_img {width:44%;} .main_service .cont01 .cont01_img .position {} .main_service .cont01 .cont01_img .position > div {} .main_service .cont01 .cont01_img .img01 {} .main_service .cont01 .cont01_img .img02 {} .main_service .cont01 .cont01_img .box {} /* 고객사 */ .main_customer {} .main_customer dl {} .main_customer dl dt, .main_customer dl dd {} .main_customer dl dt {font-size:22px;line-height:26px;width:14.5%;} .main_customer dl dt strong {font-size:38px;line-height:46px;padding-bottom:6px;} .main_customer dl dd {width:85.5%;} .main_customer dl dd ul {} .main_customer dl dd ul li, .main_customer dl dd ul li a {} .main_customer dl dd ul li {width:20%;height:160px;line-height:160px;} .main_customer dl dd ul li + li {} .main_customer dl dd ul li + li + li + li + li + li {} .main_customer dl dd ul li a {height:42px;} .main_customer dl dd ul li img {} /* 파트너사 */ .main_partner {padding-top:20px;padding-bottom:32px;} .main_partner ul {} .main_partner ul li {width:17%;} .main_partner ul li:nth-of-type(3) {width:19.5%;} .main_partner ul li:nth-of-type(6) {width:12.5%;} .main_partner ul li p {} .main_partner ul li span {display:none;} .main_partner ul li + li {} .main_partner ul li + li:before {top:2px;height:40px;} /* 무료상담신청 */ .main_visitor {border:0;} /*─────────────────────────────────────────────────────────── sub공통 ───────────────────────────────────────────────────────────*/ .subWrap .subheadWrap .subhead {width:100%;height:100%} .subWrap .subCntWrap .subCnt .section {width:100%;margin:0 auto;padding:35px 10px 70px 10px;} .pageinfo.whyneed p {width:68%} .pageinfo.photo p {width:57%;} .pageinfo.hosting p {width:55%;} .pageinfo.admin p {width:52%;} /*─────────────────────────────────────────────────────────── sub ───────────────────────────────────────────────────────────*/ .production .productionMenu.photo > li.option {} .detailpage ul li {width:100%;float:none} .detailpage ul li + li {margin-left:0;margin-top:30px} .detailpage ul li dl dd {height:auto} .production .productionMenu > li {} .production .productionMenu > li + li {} .service .serviceBox > ul::before {display:none} .service .serviceBox > ul > li {float:left;width:48%} .service .serviceBox > ul > li:first-child {width:48%} .service .serviceBox > ul > li:nth-child(even) {margin-left:4%} .service .serviceBox > ul > li:nth-child(n+3) {margin-top:30px} .service .serviceBox > ul > li + li {margin-left:0} .service .serviceBox ul li:first-child dt {width:100%;float:none;box-sizing:border-box} .service .serviceBox ul li:nth-child(n+2) dd th {display:table-cell} .strength li {width:100%;float:none;display:block} .strength li + li {margin-left:0%;margin-top:30px} .service .serviceBox ul li dt {border-left:none;border-right:none} .service .serviceBox ul li + li dd {border-left:none} /*─────────────────────────────────────────────────────────── 맞춤제작 191202 ───────────────────────────────────────────────────────────*/ .sub01_visual .txt b{font-size:16px;line-height:16px;} .sub01_visual .txt strong{font-size:40px;line-height:55px;margin:20px 0 40px;} .sub01_visual .txt span{font-size:14px;line-height:14px;} .sub01_visual .txt strong em{font-size:50px;} .sub01_visual .img{background-size:auto 100% !important;} .sub01_visual .img1{height:300px;} .sub01_visual .img2{height:160px;width:261px;} .sub01_visual .img3{height:200px;width:327px;} .sub01_visual .img2{top:21%;margin-left:1%;} .sub01_visual .img3{bottom:20%;margin-left:-7%;} .sub01_visual .img4{height:240px;margin-left:33%;} .sub01_visual .img5{height:240px;width:110px;margin-left:33%;} .main_interview .box .score dt{width:20%;} .main_interview .box .score dd{width:60%;} .main_interview .box .score dd + dt{padding-left:0;} .main_interview .box .score dd + dt, .main_interview .box .score dd + dt + dd{margin-top:4%;} .main_making .w_set ul{width:calc(100% + 3%);margin-left:-3%;} .main_making .w_set ul li{padding:6% 0 14px 0;width:calc(33.3% - 3%);margin-left:3%;} .main_making .w_set ul li .ct{padding:0 35px;} .main_making .w_set ul li p{margin:6% 0;} .main_making .w_set ul li dl{padding:5% 0;width:calc(100% - 23%);} .main_making .w_set ul li dl dt{} .main_making .w_set ul li dl dd{} /*─────────────────────────────────────────────────────────── 랜딩페이지 191206 ───────────────────────────────────────────────────────────*/ .randing_visual{height:700px !important;background-position:center 150px;} .randing_visual .txt b{font-size:60px;line-height:80px;} .randing_visual .txt strong{font-size:30px;line-height:40px;} .randing_visual .txt span{} .randing_visual .img{background-size:auto 100% !important;} .randing_visual .img.img1{height:350px;width:425px;} .randing_visual .img.img2{height:350px;width:260px;transform:translateX(-98%);bottom:-30px;} .randing_visual .img.img3{height:350px;width:260px;transform:translateX(98%);bottom:-30px;} .randing_visual .img.img4{height:300px;width:232px;transform:translateX(-141%);bottom:-20px;} .randing_visual .img.img5{height:300px;width:232px;transform:translateX(141%);bottom:-20px;} .randing_visual .img.img1.on{} .randing_visual .img.img2.on{transform:translateX(-126%);} .randing_visual .img.img3.on{transform:translateX(128%);} .randing_visual .img.img4.on{transform:translateX(-200%);} .randing_visual .img.img5.on{transform:translateX(200%);} .randing_visual .txt_box_wrap{min-width:540px;top:57%;} .randing_visual .txt_box{width:250px;height:250px;background-size:cover !important;} .randing_visual .txt_box div{font-size:20px;line-height:20px;} .randing_visual .txt_box div b{font-size:30px;line-height:30px;margin-bottom:4%;} .main_why{margin:10.5% auto;} .main_why .tit{font-size:25px;line-height:25px;} .main_why .tit strong{font-size:50px;line-height:50px;margin-top:2%;word-break:keep-all;} .main_why .why{margin-top:6.5%;font-size:130px;line-height:90px;padding-bottom:20%;} .main_why .why:after{bottom:-50px;background-size:auto 100%;} .main_why .txt{font-size:25px;margin-top:calc(4% + 50px);line-height:35px;} .main_why .txt strong{font-size:40px;line-height:40px;margin-top:2%;} .main_function .w_set{min-width:inherit;width:calc(100% - 200px);} .main_function .w_set ul{width:calc(100% + 7.6%);margin-left:-7.6%;margin-bottom:6%;padding-bottom:10%;} .main_function .w_set ul li{width:calc(25% - 7.6%);margin-left:7.6%;} .main_function .w_set ul li + li:before{margin-top:-20px;width:6px;height:6px;} .main_function .w_set ul li span{font-size:20px;line-height:20px;} .main_function .w_set ul:after{height:55px;background-size:auto 100%;left:7.6%;width:calc(100% - 7.6%);} .main_function .w_set strong{padding:0 60px;line-height:100px;border-radius:100px;font-size:30px;} .main_shop{width:calc(100% - 150px);} .main_shop .tit{font-size:25px;margin:9.5% 0 4.7%;} .main_shop .tit strong{font-size:40px;line-height:40px;} .main_shop ul{width:calc(100% + 5.6%);margin-left:-5.6%;} .main_shop ul li{margin-left:5.6%;width:calc(33.3% - 5.6%);} .main_shop ul li span{font-size:20px;line-height:50px;margin-bottom:9.4%;} .content_wrap .dart_randing_con .our_value {padding-top:166px;} .randing_4step.w_set {padding-left:0 !important;padding-right:0 !important;} } @media only screen and (max-width:1200px) { /*─────────────────────────────────────────────────────────── FOOTER 190514 ───────────────────────────────────────────────────────────*/ /* 스크롤 배너 */ .sc_wrap {display:none;} 2021-03-23 .ft_gnb dl + dl {padding-left:40px;} /*─────────────────────────────────────────────────────────── MAIN 190514 ───────────────────────────────────────────────────────────*/ /* 메인 비주얼 영역 */ .visual_wrap_pc{display:none;} .visual_wrap_m{display:block;} .visual_wrap{min-width:100%;width:100%;height:500px;overflow:hidden;} .visual_wrap ul{} /*.visual_wrap ul li{height:500px;position:relative;background-size:cover !important;} .visual_wrap ul li .visual_txt{width:100%;top:50%;left:0%;transform:translate(0%, -50%);} .visual_wrap ul li .visual_txt p{letter-spacing:0px;line-height:54px;font-size:46px;} .visual_wrap ul li .visual_txt p strong{letter-spacing:0px;}*/ .visual_wrap ul li{position:relative;background-size:cover !important;} .visual_wrap ul li .visual_txt{width:100%;top:50%;left:0%;transform:translate(0%, -50%);} .visual_wrap ul li .visual_txt p{width:calc(100% - 50px);letter-spacing:0px;line-height:34px;font-size:25px;} .visual_wrap ul li .visual_txt p strong{letter-spacing:0px;font-size:25px;line-height:25px;padding-bottom:20px;/* margin-bottom:30px; */} .visual_wrap ul li .visual_txt p b { font-size:30px; line-height:30px; } .visual_wrap ul li .visual_txt p em {font-size:14px;padding-top:20px;} /*.visual_wrap ul li.visual01{background:url('../image/main/bnr_visual01.jpg') no-repeat center top;} .visual_wrap ul li.visual02{background:url('../image/main/bnr_visual01.jpg') no-repeat center top;} .visual_wrap ul li.visual03{background:url('../image/main/bnr_visual01.jpg') no-repeat center top;} .visual_wrap ul li.visual01{background:url('../image/main/visual01.jpg') no-repeat center top;} .visual_wrap ul li.visual02{background:url('../image/main/visual02.jpg') no-repeat center top;} .visual_wrap ul li.visual03{background:url('../image/main/visual03.jpg') no-repeat center top;} .visual_wrap ul li.visual01 {background-position:50% 50% !important;} .visual_wrap ul li.visual02 {background-position:50% 50% !important;} .visual_wrap ul li.visual03 {background-position:50% 50% !important;}*/ /* 메인 비주얼 영역 */ /* 191217 비주얼 변경 */ .main_cont_wrap .visual_wrap.visual_wrap_renew, .main_cont_wrap .visual_wrap.visual_wrap_renew ul li.slick-slide {height:600px;} /*─────────────────────────────────────────────────────────── shopingmall_page ───────────────────────────────────────────────────────────*/ .productionStep .step li {width:19%} .productionStep .step li:nth-child(1) {background-size:100%} .productionStep .step li:nth-child(2) {background-size:100%} .productionStep .step li:nth-child(3) {background-size:100%} .productionStep .step li:nth-child(4) {background-size:100%} .productionStep .step li:nth-child(5) {background-size:100%} .productionStep .step li span {font-size:18px;letter-spacing:-1px} .productionStep .step li span:last-child {font-size:16px} .productionStep .step li + li {margin-left:1%} .productionStep .step li + li::before {display:none} .serviceStep .step li {width:45%;height:auto;float:left;position:relative;display:table;box-sizing:border-box;padding:0 10%} .serviceStep .step li + li {padding:0 10%;} .serviceStep .step li + li::before {content:"";width:100%;height:1px;background:#ddd;position:absolute;top:40%;left:-50%;transform:rotate(18deg);z-index:0;} .serviceStep .step li + li::after {content:"";width:14px;height:14px;background:url("../image/sub/bul_serviceStep.png") no-repeat 0 0;background-size:100%;position:absolute;top:31%;left:-11%;z-index:5;} .serviceStep .step li + li:nth-child(odd)::before {transform:rotate(-25deg);top:0%;left:60%;} .serviceStep .step li + li:nth-child(odd)::after {top:-4%;left:110%;} .serviceStep .step li:nth-child(even) {margin-top:80px;margin-left:10%} .serviceStep .step li div {margin:0 auto;display:table-cell;height:240px} .spec {background:url("../image/sub/bg_spec.png") no-repeat center bottom;background-size:260px 182px;padding:0 0 200px 0} .bbs.list table col:nth-child(1) {display:none} .bbs.list table col:nth-child(4) {display:none} .bbs.list table th:nth-child(1) {display:none} .bbs.list table th:nth-child(4) {display:none} .bbs.list table td:nth-child(1) {display:none} .bbs.list table td:nth-child(4) {display:none} /*─────────────────────────────────────────────────────────── 맞춤제작 191202 ───────────────────────────────────────────────────────────*/ .section .sub_title_wrap{margin:8.6% 0 4.5%;} .sub01_visual .item5{top:30px;z-index:1;} .sub01_visual .img1{margin-left:5%;transform:translateY(-30%);} .sub01_visual .img2{top:30%;margin-left:3%;} .sub01_visual .img3{margin-left:-10%;} .sub01_visual .img4{} .sub01_visual .img5{} .sub01_visual .item{background-size:auto 100% !important;} .sub01_visual .item1{height:200px;} .sub01_visual .item2{height:200px;} .sub01_visual .item3{bottom:30%;} .sub01_visual .item4{bottom:inherit;top:30%;} .sub02 .sub01_visual .item1{} .sub02 .sub01_visual .item2{height:150px;} .sub02 .sub01_visual .item4{top:inherit;bottom:14%;right:2%;height:100px;} @-webkit-keyframes img_play1{ from{ left:50%;margin-left:10%;top:50%;opacity:0.5;transform:translateY(-30%); } to{ left:50%;margin-left:5%;top:50%;opacity:1;transform:translateY(-30%); } } .main_reason ul li{height:85px;} .main_reason ul li strong{font-size:16px;line-height:16px;padding-top:3%;} .main_reason ul li p{font-size:13px;margin-top:5%;} .main_award .w_set p{padding-top:10%;} .main_making .w_set ul{} .main_making .w_set ul li{} .main_making .w_set ul li .ct{font-size:16px;} .main_making .w_set ul li p{font-size:16px;line-height:20px;} .main_making .w_set ul li strong{font-size:14px;line-height:35px;margin:0 0 9%;} .main_making .w_set ul li dl{} .main_making .w_set ul li dl dt{font-size:13px;line-height:25px;} .main_making .w_set ul li dl dd{font-size:14px;padding-left:5%;line-height:25px;} .section.w_set .productionStep .step{padding-bottom:30%;} .section.w_set .productionStep .step li{width:16% !important;padding-top:18%;} .section.active .productionStep .step li:nth-of-type(1), .section.active .productionStep .step li:nth-of-type(2), .section.active .productionStep .step li:nth-of-type(3), .section.active .productionStep .step li:nth-of-type(4), .section.active .productionStep .step li:nth-of-type(5){background-size:100%;} .section.w_set .mainserviceStep .step{padding-bottom:30%;} .section.w_set .mainserviceStep .step li{width:20% !important;padding-top:10%;} .section.active .mainserviceStep .step li:nth-of-type(1), .section.active .mainserviceStep .step li:nth-of-type(2), .section.active .mainserviceStep .step li:nth-of-type(3), .section.active .mainserviceStep .step li:nth-of-type(4), .section.active .mainserviceStep .step li:nth-of-type(5){background-size:100%;} .section.active .mainserviceStep .step li:nth-of-type(1){transform:translateX(-400%);} .section.active .mainserviceStep .step li:nth-of-type(2){transform:translateX(-267%);} .section.active .mainserviceStep .step li:nth-of-type(3){transform:translateX(-134%);float:right;} .section.active .mainserviceStep .step li:nth-of-type(4){transform:translateX(0%);} .mainserviceStep .step li + li::before {top:40%;left:-23%;} } @media only screen and (max-width:1217px) { /* 200129 비주얼 변경 */ .main_cont_wrap .visual_wrap.visual_wrap_renew2, .main_cont_wrap .visual_wrap.visual_wrap_renew2 ul li.slick-slide, .main_cont_wrap .visual_wrap.visual_wrap_renew2 ul li.slick-slide .img {height:740px;} .main_cont_wrap .visual_wrap.visual_wrap_renew2 .txt {} .main_cont_wrap .visual_wrap.visual_wrap_renew2 .txt strong {font-size:65px;line-height:70px;letter-spacing:15px;} .main_cont_wrap .visual_wrap.visual_wrap_renew2 .txt a {width:150px;line-height:45px;font-size:15px;background:transparent url('../image/main/mainvisual_more_arw.png') no-repeat 110px;background-size:auto 7px;} .main_cont_wrap .visual_wrap.visual_wrap_renew2 .txt p {font-size:27px;line-height:27px;} }