@charset "utf-8"; /*─────────────────────────────────────────────────────────── 공통요소 ───────────────────────────────────────────────────────────*/ /*input*/ input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"]{height:46px;line-height:44px;border:1px var(--border-color02) solid;color:var(--black-color00);font-size:var(--title-16);border-radius:0;padding:0 15px;text-indent:0;margin:0;box-sizing:border-box;vertical-align:middle;text-align:left;outline:0;appearance:none;-webkit-appearance:none;} input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="tel"]:focus{border-color:var(--black-color00);} input[type="text"]::-webkit-input-placeholder {color:var(--black-color08);} input[type="password"]::-webkit-input-placeholder {color:var(--black-color08);} input[type="text"]::-moz-placeholder {color:var(--black-color08);} input[type="password"]::-moz-placeholder {color:var(--black-color08);} input[type="text"]:-ms-input-placeholder {color:var(--black-color08);} input[type="password"]:-ms-input-placeholder {color:var(--black-color08);} input[type="text"]:-moz-placeholder {color:var(--black-color08);} input[type="password"]:-moz-placeholder {color:var(--black-color08);} input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0) inset;-webkit-text-fill-color:var(--black-color03);font-size:var(--title-17);} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; } @media (max-width:1023px) { input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"]{height:clamp(40px, 4.6vw, 46px);line-height:clamp(40px, 4.6vw, 46px);padding-inline:clamp(10px, 2vw, 15px);} } input[type="checkbox"] { display:none; } input[type="checkbox"] + label {cursor:pointer;} input[type="checkbox"] + label:before, input[type="checkbox"] + label::before { display:inline-block; content:""; width:20px; height:20px; margin:-2px 5px 0 0; vertical-align:middle; background:url("../images/sub/ico_check.png") no-repeat 0 50%; cursor:pointer;background-size:auto 100%;} input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked + label::before { background:url("../images/sub/ico_check_on.png") no-repeat 0 50%; background-size:auto 100%;} input[type="radio"] { display:none; } input[type="radio"] + label {cursor:pointer;} input[type="radio"] + label:before, input[type="radio"] + label::before { display:inline-block; content:""; width:20px; height:20px; margin:-2px 5px 0 0; vertical-align:middle; background:url('../images/sub/radio_off.png') left top no-repeat; cursor:pointer; background-size:auto 100%;} input[type="radio"]:checked + label:before, input[type="radio"]:checked + label::before { background:url('../images/sub/radio_on.png') left top no-repeat;background-size:auto 100%;} input[type="radio"] + label:first-of-type:before, input[type="radio"] + label:first-of-type::before {margin-left:0;} /* textarea type */ textarea {border:1px var(--border-color02) solid;color:var(--black-color00);font-size:var(--title-16);padding:15px;text-indent:0;margin:0;box-sizing:border-box;vertical-align:middle;text-align:left;outline:0;height:100px;resize:none;width:100%;border-radius:0;appearance:none;-webkit-appearance:none;} textarea:focus{border-color:var(--black-color03);} @media (max-width:1023px) { textarea{padding:clamp(10px, 2vw, 15px);} } /* select type */ select {color:var(--black-color00);border:1px solid var(--border-color02);height:46px;line-height:44px;font-size:var(--title-16);padding:0 15px;text-indent:0;outline:0;cursor:pointer; box-sizing:border-box;margin:0;vertical-align:middle;text-align:left;-webkit-appearance: none; -moz-appearance: none; appearance: none;-webkit-appearance: none; -moz-appearance: none; appearance: none;background:var(--point-white) url('../images/skin/sel_arw.png')no-repeat right 15px center;} select:focus{border-color:var(--black-color00);} @media (max-width:1023px) { select{height:clamp(40px, 4.6vw, 46px);line-height:clamp(40px, 4.6vw, 46px);padding-inline:clamp(10px, 2vw, 15px);background-position:right clamp(10px, 2vw, 15px) center;} } @media (max-width:640px) { select{background-size:auto 4px;} } /*button*/ .btn_center_box{text-align: center;margin-top:50px;display: flex;align-items: center;justify-content: center;gap:20px;} .btn{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;font-size:var(--title-20);color:var(--black-color03);background:var(--point-white);border:1px solid var(--border-color01);} .btn_point{border-color:var(--point-color02);background-color:var(--point-color02);color:var(--point-white);} .btn_basic{border-color:var(--black-color07);background-color:var(--black-color07);color:var(--point-white);} .btn_default{border-color:var(--black-color10);background-color:var(--black-color10);color:var(--point-white);} .btn_ok{border-color:var(--black-color03);} .btn_info{border-color:#d3d3d3 !important;background-color:var(--point-white);color:var(--black-color05) !important;} .btn_wd {width:100%;height:50px;line-height:48px;font-size:var(--title-17);border-radius:5px;} .btn_wrap .btn{width: 200px;height: 50px;border-radius: 5px;} .btn_board .btn{width:180px;height:60px;} .btn_sm{border-color: var(--black-color10);background-color: var(--black-color10);color: var(--point-white);} @media (max-width:1023px) { .btn_center_box{margin-top:clamp(30px, 5vw, 50px);gap:clamp(10px, 2vw, 20px); } .btn_wrap .btn{width:clamp(160px, 20vw, 200px);height:clamp(44px, 5vw, 50px);} .btn_board .btn{width:clamp(140px, 18vw, 180px);height:clamp(46px, 6vw, 60px);} } @media (max-width:479px) { .btn_wrap .btn{width:calc(50% - 5px);} } /* pagaing wrap */ #wrap .paging {text-align:center;padding:0;line-height:normal;font-size:0;margin:80px auto 0;vertical-align:top;box-sizing:border-box;} #wrap .paging span {display:inline-block;vertical-align:top;} #wrap .paging a {display:inline-flex;align-items:center;justify-content:center;font-size:var(--title-18);font-weight: 600;color:var(--black-color08);padding:0;border:0;box-sizing:border-box;width:40px;height:40px;line-height:1;min-width:auto;text-align:center;vertical-align:top;font-family:var(--font-type03);margin:0 5px;border-radius:100%;} #wrap .paging :is(.on a, a.on){background:var(--black-color02);color:var(--point-white);font-weight:700;} #wrap .paging .arrow a {font-size:0;width:30px; background:no-repeat center; } #wrap .paging .arrow.first a {background-image:url("../images/sub/paging_first.svg");} #wrap .paging .arrow.prev a {background-image:url("../images/sub/paging_prev.svg"); margin-right:10px;} #wrap .paging .arrow.next a {background-image:url("../images/sub/paging_next.svg"); margin-left:10px;} #wrap .paging .arrow.last a {background-image:url("../images/sub/paging_last.svg");} @media screen and (max-width:1023px) { #wrap .paging{margin-top:clamp(30px, 7vw, 80px)} } @media screen and (max-width:640px) { #wrap .paging a{width:30px;height:30px;} #wrap .paging .arrow a{width:20px;} } /* reCAPTCHA v3 */ .recaptcha_notice { margin-top: 6px; font-size: 12px; color: #999; line-height: 1.4; } .recaptcha_notice a { color: #888; text-decoration: none; } .recaptcha_notice a:hover { text-decoration: underline; } .grecaptcha-badge { visibility: hidden; } /*─────────────────────────────────────────────────────────── sub common ───────────────────────────────────────────────────────────*/ /*visual*/ .sub_visual{width:100%;height:500px;position: relative;box-sizing:border-box;overflow:hidden;display: flex;align-items: center;justify-content: center;} .sub_visual .visual_img{width:100%;height:100%;object-fit:cover;position: absolute;inset:0;} .sub_visual .visual_title{text-align: center;font-size:var(--title-20);color:var(--point-white);font-weight:700;} .sub_visual .visual_title h2, .sub_visual .visual_title h1{font-size:370%;color:inherit;font-weight:inherit;letter-spacing:-1.48px;} .sub_visual .visual_title p{font-size:110%;color:inherit;font-weight:400;letter-spacing:-0.4px;margin-top:16px;font-family:var(--font-type03);} .sub_visual .vis_en{position: absolute;bottom:0;left:50%;transform:translate(-50%);width:100%;text-align: center;box-sizing:border-box;padding:0 30px;} /*title*/ .sub_title{text-align: center;box-sizing:border-box;padding:110px 0 30px;font-size:var(--title-20);color:var(--black-color02);font-weight:600;} .sub_title h2, .sub_title h1{font-size:200%;} /*bullet*/ .bullet_list{position: relative;width: 100%; box-sizing: border-box;} .bullet_list > li{position: relative; font-size: var(--title-16);font-weight: 400;color: var(--black-color06);line-height: 1.78;display: flex;align-items: baseline;gap:10px;letter-spacing: -0.04em;} .bullet_list > li:before{display: inline-flex;content:'';width:3px;aspect-ratio:auto 1;border-radius:100%;background: var(--black-color06);flex-shrink: 0;transform: translateY(-5px);} /*sub cs*/ .main_inq.sub_contact{margin:0 !important;} .sub_contact{background:url('../images/sub/contact-bg.png')no-repeat left -95px bottom -355px;padding:0;} .sub_contact .w_custom{display: flex;flex-direction: column;align-items: center;padding-block:clamp(70px, 12vw, 120px);font-size:var(--title-20);} .sub_contact h3{font-size:130%;color:var(--black-color03);font-weight:400;line-height:1.6;text-align: center;} .sub_contact h3 strong{font-weight:600;} .sub_contact .w_custom:before{width:100%;height:clamp(34px, 6vw, 86px);content:"";background:url('../images/sub/contact_logo.png')no-repeat right center;background-size:auto 100%;position: absolute;right:-89px;bottom:0;filter:grayscale(1);} @media (max-width:1500px) { .sub_contact{background-size:41vw auto;background-position:left -16% top 73%;} .sub_contact .w_custom:before{right:0;} } .sub_content > section{position: relative;box-sizing:border-box;} @media (max-width:1400px) { /*visual*/ .sub_visual{height:37vw;} } @media (max-width:1023px) { /*visual*/ .sub_visual{height:clamp(300px, 37vw, 370px);} .sub_visual .visual_title h2, .sub_visual .visual_title h1{font-size:clamp(250%, 6.5vw, 370%);} /*title*/ .sub_title{padding-top: clamp(44px, 10vw, 110px);} } @media (max-width:860px) { /*bullet*/ .bullet_list > li{line-height:1.6;} .bullet_list > li + li{margin-top:7px;} } @media (max-width:640px) { /*visual*/ .sub_visual .visual_title p{margin-top:8px;} .sub_visual .vis_en{padding:0 15px;} /*bullet*/ .bullet_list > li{gap:6px;} .bullet_list > li:before{transform:translateY(-4px);} } @media (max-width:479px) { /*visual*/ .sub_visual{min-height: 220px;height: auto;padding: 35px 0;} .sub_visual .visual_title p{font-size:100%;} .sub_visual .vis_en{display: none;} /*title*/ .sub_title h2, .sub_title h1{font-size:160%;} /*bullet*/ .bullet_list > li{line-height:1.6;} .bullet_list > li + li{margin-top:3px;} } /*─────────────────────────────────────────────────────────── 제작서비스 ───────────────────────────────────────────────────────────*/ /*quick*/ .left_quick{position:fixed;left:0;top:42.8%;z-index:10;transition:all 0.5s;} .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:flex;align-items: center;width:100%;height:100%;box-sizing:border-box;position: relative;text-align: left;padding-left:12px;font-size:var(--title-16);color:var(--point-white);font-weight:400;} .left_quick ul li span:before{width:6px;height:6px;content:"";border:1px solid var(--point-white);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{background:var(--point-color02);width:140px;transition:width 0.5s;} .left_quick ul li.on span:before{right:18px;opacity:1;transition:all 0.5s;} /*over*/ @media (pointer: fine) and (hover: hover) { .left_quick ul li:hover{background:var(--point-color02);width:140px;transition:width 0.5s;} .left_quick ul li:hover span:before{right:18px;opacity:1;transition:all 0.5s;} } @media (max-width:1023px) { .left_quick{display: none;} } /*비주얼*/ .sub_prd_visual{width:100%;height:820px;box-sizing:border-box;position: relative;background:url('../images/sub/sub_visual_bg.jpg')no-repeat center;background-size:cover;overflow:hidden;display: flex;align-items: center;background-size:cover !important;} .sub_prd_visual .visual_txt{position: absolute;left:50%;bottom:0;transform:translate(-50%);} /*오브젝트*/ /*홈페이지*/ .sub_prd_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 .sub_prd_visual{background:url('../images/sub/shopping_visual_bg.jpg')no-repeat center;background-size:cover;} .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_innovation .visual_obj .obj01{top:78px;left:4%;animation:innovani1 3s linear Infinite Alternate;} .sub_innovation .visual_obj .obj02{top:104px;right:12%;animation:innovani2 4s linear Infinite Alternate;} .sub_innovation .visual_obj .obj03{bottom:125px;left:8%;animation:innovani3 6s linear Infinite Alternate;} .sub_innovation .visual_obj .obj04{bottom:80px;right:3.7%;animation:innovani4 6s linear Infinite Alternate;} @keyframes innovani1 { 0%{top:78px;left:4%;} 50%{top:50px;left:6.2%;} 100%{top:78px;left:4%;} } @keyframes innovani2 { 0%{top:104px;} 50%{top:130px;} 100%{top:104px;} } @keyframes innovani3 { 0%{bottom:125px;} 50%{bottom:150px;} 100%{bottom:125px;} } @keyframes innovani4 { 0%{bottom:80px;right:3.7%;} 50%{bottom:50px;right:1%;} 100%{bottom:80px;right:3.7%;} } /*텍스트, 이미지*/ .sub_prd_visual .txt_wrap{display:flex;align-items: center;justify-content: space-between;position: relative;z-index:5;} .sub_prd_visual .txt_box, .sub_prd_visual .img_box{display: inline-block;box-sizing:border-box;} .sub_prd_visual .txt_box *{font-family:var(--font-type03);} .sub_prd_visual .txt_box{font-size:var(--title-20);} .sub_prd_visual .txt_box span{font-size:125%;color:var(--point-white);font-weight:700;letter-spacing:0;} .sub_prd_visual .txt_box h2, .sub_prd_visual .txt_box h1{font-size:370%;color:var(--point-white);font-weight:700;letter-spacing:0;margin-top:15px;} .sub_prd_visual .txt_box p{font-size:100%;color:var(--point-white);font-weight:400;letter-spacing:0;line-height:1.6;position: relative;margin-top:29px;padding-top:43px;} .sub_prd_visual .txt_box p:before{width:110px;height:2px;content:"";background:var(--point-white);position: absolute;top:0;left:0;opacity:0.2;} .sub_prd_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:var(--border-color03);} .sub_prd_visual .img_box .content .top{width:100%;position: relative;} .sub_prd_visual .img_box .content .top .circle{display: flex;align-items: center;justify-content: flex-end;padding:13px 22px;display: flex;align-items: center;gap:7px;} .sub_prd_visual .img_box .content .top .circle li{display: inline-block;box-sizing:border-box;vertical-align: top;width:10px;aspect-ratio:auto 1;border-radius:100%;background:var(--border-color05);} .sub_prd_visual .img_box .img{width:100%;height:424px;position: relative;overflow:hidden;} .sub_prd_visual .img_box .img img{width:100%;position: absolute;top:0;left:0;animation:subVisual 90s linear Infinite Alternate;transform:translateY(0);max-width:initial;max-height:initial;} @keyframes subVisual { 0%{transform:translateY(0);} 50%{transform:translateY(calc(-100% + 424px));} 100%{transform:translateY(0);} } @media (max-width:1300px) { .sub_prd_visual{height:71vw;} .sub_prd_visual .txt_wrap{flex-wrap:wrap;} .sub_prd_visual .txt_box{width:43%;padding-right:20px;} .sub_prd_visual .txt_box h2, .sub_prd_visual .txt_box h1{font-size:300%;} .sub_prd_visual .img_box{width:57%;height:38vw;} } @media (max-width:1023px) { .sub_prd_visual .txt_box h2, .sub_prd_visual .txt_box h1{font-size:clamp(250%, 5.5vw, 300%);} } @media (max-width:860px) { .sub_prd_visual{height:auto;padding:60px 0;} .sub_prd_visual .visual_txt{display: none;} .sub_prd_visual .txt_wrap{justify-content: center;} .sub_prd_visual .txt_box{width:100%;text-align: center;padding:0;} .sub_prd_visual .txt_box p{padding-top:0;} .sub_prd_visual .txt_box p:before{display: none;} .sub_prd_visual .img_box{width:80%;height:45vw;margin-top:40px;} /*오브젝트*/ /*홈페이지*/ .sub_homepage .visual_obj .obj01{display: none;} .sub_homepage .visual_obj .obj02{left:3%;} .sub_homepage .visual_obj .obj02 img{width:14vw;} .sub_homepage .visual_obj .obj03 img{width:10vw;} .sub_homepage .visual_obj .obj04 img{width:10vw;} .sub_homepage .visual_obj .obj05 img{width:3vw;} .sub_homepage .visual_obj .obj06 img{width:10vw;} /*쇼핑몰*/ .sub_shopping .visual_obj .obj01, .sub_shopping .visual_obj .obj06{display: none;} .sub_shopping .visual_obj .obj02{left:3%;} .sub_shopping .visual_obj .obj02 img{width:14vw;} .sub_shopping .visual_obj .obj03 img{width:10vw;} .sub_shopping .visual_obj .obj04 img{width:20vw;} .sub_shopping .visual_obj .obj05{right:-4%;} .sub_shopping .visual_obj .obj05 img{width:19vw;} @keyframes shopani4 { 0%{bottom:50px;left:-3.3%;} 50%{bottom:70px;left:-1.3%;} 100%{bottom:50px;left:-3.3%;} } @keyframes shopani5 { 0%{bottom:-50px;} 50%{bottom:-10px;} 100%{bottom:-50px;} } /*상세페이지*/ .sub_detail .visual_obj .obj02{display: none;} .sub_detail .visual_obj .obj01 img{width:17vw;} .sub_detail .visual_obj .obj02 img{width:14vw;} .sub_detail .visual_obj .obj03{right:-3%;} .sub_detail .visual_obj .obj03 img{width:18vw;} .sub_detail .visual_obj .obj04 img{width:15vw;} .sub_detail .visual_obj .obj05{right:-4%;} .sub_detail .visual_obj .obj05 img{width:16vw;} @keyframes detailani1 { 0%{top:10px;left:1%;} 50%{top:-30px;left:-2%;} 100%{top:10px;left:1%;} } @keyframes detailani3 { 0%{top:45%;} 50%{top:50%;} 100%{top:45%;} } @keyframes detailani4 { 0%{bottom:10%;left:-1.7%;} 50%{bottom:12%;left:1%;} 100%{bottom:10%;left:-1.7%;} } /*수출바우처*/ .sub_voucher .visual_obj .obj02{display: none;} .sub_voucher .visual_obj .obj01 img{width:15vw;} .sub_voucher .visual_obj .obj02 img{width:14vw;} .sub_voucher .visual_obj .obj03{right:-3%;} .sub_voucher .visual_obj .obj03 img{width:18vw;} .sub_voucher .visual_obj .obj04 img{width:18vw;} .sub_voucher .visual_obj .obj05{right:-4%;} .sub_voucher .visual_obj .obj05 img{width:16vw;} @keyframes voucherani1 { 0%{top:20%;left:1%;} 50%{top:15%;left:-2%;} 100%{top:20%;left:1%;} } @keyframes voucherani3 { 0%{top:10%;} 50%{top:13%;} 100%{top:10%;} } @keyframes voucherani4 { 0%{bottom:-2%;left:-1.7%;} 50%{bottom:8%;left:1%;} 100%{bottom:-2%;left:-1.7%;} } } @media (max-width:479px) { .sub_prd_visual{padding:25px 0 60px;} .sub_prd_visual .txt_box span{font-size:100%;} .sub_prd_visual .txt_box h2, .sub_prd_visual .txt_box h1{margin-top:5px;} .sub_prd_visual .txt_box p{margin-top:10px;} .sub_prd_visual .img_box{width:calc(100% - 70px);height:190px;border-radius:8px;} .sub_prd_visual .img_box .content .top .circle{padding:6px 8px;} .sub_prd_visual .img_box .content .top .circle li{width:4px;height:4px;} .sub_prd_visual .img_box .content .top .circle li + li{margin-left:4px;} .sub_prd_visual .img_box .content .img img{animation:subVisual 40s linear Infinite Alternate;} } /*제작 비용 안내*/ .sub_charge{padding:103px 0 100px;position: relative;} .sub_charge:before{width:495px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border-radius:100%;position: absolute;left:-69px;bottom:-235px;background:var(--point-color02);z-index:2;} .sub_charge .w_custom:before{width:270px;aspect-ratio:auto 1;content:"";background:var(--point-color07);box-sizing:border-box;border-radius:100%;position: absolute;right:-143px;top:0;} .sub_charge .charge_container{position: relative;z-index:4;overflow:visible;} .sub_charge .charge_list{width:100%;font-size:0;text-align: center;margin-top:46px;position: relative;z-index:4;display: flex;flex-wrap:wrap;gap:32px;} .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:var(--radius-10);width:calc(25% - 24px);border-top:10px solid var(--point-color08);background:var(--point-white);padding:30px 10px 50px 10px;position: relative;z-index:3;height:auto;display: flex;flex-direction: column;justify-content: space-between;font-size:var(--title-20);} .sub_charge .charge_list li:nth-child(2){border-color:var(--point-color13);} .sub_charge .charge_list li:nth-child(3){border-color:var(--point-color09);} .sub_charge .charge_list li:nth-child(4){border-color:var(--point-color10);} .sub_charge .charge_list li dl dt{font-size:150%;color:var(--black-color03);font-weight:400;letter-spacing:-0.05em;} .sub_charge .charge_list li dl dd .icon{text-align: center;font-size:0;margin-top:16px;display: flex;flex-wrap:wrap;justify-content: center;gap:3px 6px;} .sub_charge .charge_list li dl dd .icon span{display: inline-flex;box-sizing:border-box;vertical-align: top;font-size:var(--title-16);color:var(--point-color08);font-weight:500;letter-spacing:-0.03em;height:30px;border-radius:15px;padding:0 11px;border:1px solid var(--point-color08);align-items: center;justify-content: center;} .sub_charge .charge_list li:nth-child(2) dl dd .icon span{color:var(--point-color13);border-color:var(--point-color13);} .sub_charge .charge_list li:nth-child(3) dl dd .icon span{color:var(--point-color10);border-color:var(--point-color10);} .sub_charge .charge_list li dl .txt{font-size:var(--title-18);color:var(--black-color06);font-weight:300;letter-spacing:-0.05em;line-height:1.5;font-family:var(--font-type03);margin-top:19px;} .sub_charge .charge_list li dl .txt strong{font-size:inherit;color:var(--black-color03);font-weight:500;} .sub_charge .charge_list li .btn_box{font-size:var(--title-30);} .sub_charge .charge_list li .price{font-size:180%;color:var(--point-color08);font-weight:700;font-family:var(--font-type05);letter-spacing:0;margin-top:27px;} .sub_charge .charge_list li:nth-child(2) .price{color:var(--point-color13);} .sub_charge .charge_list li:nth-child(3) .price{color:var(--point-color09);} .sub_charge .charge_list li:nth-child(4) .price{color:var(--point-color10);letter-spacing:-2px;} .sub_charge .charge_list li .price span{font-size:66%;color:inherit;font-weight:500;font-family:var(--font-type02);letter-spacing:-0.02em;} .sub_charge .charge_list li a{display: inline-flex;align-items: center;justify-content: center;box-sizing:border-box;width:180px;height:52px;border:1px solid var(--black-color03);font-size:var(--title-18);color:var(--black-color02);font-weight:400;letter-spacing:-0.03em;margin-top:41px;} .sub_charge .intro_txt{text-align: right;font-size:var(--title-16);color:var(--black-color08);font-weight:400;letter-spacing:-0.02em;margin-top:35px;display: flex;justify-content: flex-end;} .sub_charge .intro_txt p{font-size:inherit;color:inherit;font-weight:inherit;} @media (pointer: fine) and (hover: hover) { .sub_charge .charge_list li .btn_box a:hover{color:var(--point-white);} .sub_charge .charge_list li:nth-child(1) .btn_box a:hover{background:var(--point-color08);border:1px solid var(--point-color08);} .sub_charge .charge_list li:nth-child(2) .btn_box a:hover{background:var(--point-color13);border:1px solid var(--point-color13);} .sub_charge .charge_list li:nth-child(3) .btn_box a:hover{background:var(--point-color09);border:1px solid var(--point-color09);} .sub_charge .charge_list li:nth-child(4) .btn_box a:hover{background:var(--point-color10);border:1px solid var(--point-color10);} } @media (max-width:1400px) { .sub_charge:before{width: 36vw;left: -11%;bottom: -3%;} .sub_charge .w_custom:before{width: 20vw;right: -12%;} } @media (max-width:1023px) { .sub_charge{padding-block:clamp(50px, 10vw, 100px);} .sub_charge .charge_list{gap:20px;} .sub_charge .charge_list li{width:calc(25% - 15px);} .sub_charge .intro_txt p{max-width:75%;} .sub_charge .charge_list li a{width:100%;} } @media (max-width:860px) { .sub_charge:before{bottom:5%;} .sub_charge .charge_list{flex-wrap:initial;gap:0;} .sub_charge .charge_list li .price{margin-top:10px;} .sub_charge .charge_list li a{width:180px;margin-top:15px;} } @media (max-width:479px) { .sub_charge:before{bottom:14%;} .sub_charge .charge_list{margin-top:30px;} .sub_charge .charge_list li a{width:140px;height:40px;} } /*제작 절차*/ .make_process{box-sizing:border-box;position: relative;padding:120px 0;background:rgba(18,61,140,0.06);} .make_process:before{width:26.3%;height:119.6%;content:"";background:var(--point-color15);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;overflow:visible;} .make_process .process_tab .swiper-wrapper{flex-wrap:wrap;height:100%;} .make_process .process_tab li{width:270px;height:65px;box-sizing:border-box;vertical-align: top;border-radius:10px;background:var(--point-white);transition:width 0.5s;cursor:pointer;flex-shrink:0;} .make_process .process_tab li dl{display: flex;box-sizing:border-box;width:100%;height:100%;flex-wrap:wrap;gap:18px;padding-left:20px;align-items: center;position: relative;font-size:var(--title-20);} .make_process .process_tab li dl dt{display: block;width:100%;box-sizing:border-box;position: relative;font-size:110%;color:var(--black-color04);font-weight:400;letter-spacing:-0.07em;font-family:var(--font-type03);width:calc(100% - 58px);} .make_process .process_tab li dl dd{display: none;} .make_process .process_tab .swiper-slide:last-of-type dl dt{color:var(--point-color02);} .make_process .process_tab li dl:before{counter-increment: section;content: counter(section, decimal-leading-zero);font-size:var(--title-18);color:var(--point-color02);font-weight:400;letter-spacing:-0.02em;font-family:var(--font-type04);width:40px;height:40px;box-sizing:border-box;border-radius:100%;background:var(--point-color16);display: inline-flex;align-items: center;justify-content: center;text-align: center;} .make_process .process_tab li dl:after{width:9px;height:9px;content:"";border:1px solid var(--point-white);border-width:1px 1px 0 0;transform:translateY(-50%) rotate(45deg);position: absolute;top:50%;right:50px;opacity:0;transition:all 0.5s;} /*on*/ .make_process .process_tab .swiper-slide-thumb-active{width:330px !important;background:var(--point-color02);box-shadow: 0px 5px 24px 0 rgba(42, 57, 85, 0.4);transition:width 0.5s;} .make_process .process_tab .swiper-slide-thumb-active dl dt{color:var(--point-white) !important;} .make_process .process_tab .swiper-slide-thumb-active dl:before{background:var(--point-white);} .make_process .process_tab .swiper-slide-thumb-active dl: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;overflow:visible;} .make_process .content_box .swiper-slide{width:100%;box-sizing:border-box;background:var(--point-white);border-radius:10px;box-shadow: 0px 5px 24px 0 rgba(126, 150, 192, 0.4);padding:72px 30px 80px 80px;display: flex;flex-direction: column;justify-content: space-between;} .make_process .content_box .title{font-size:var(--title-20);display: flex;flex-wrap:wrap;} .make_process .content_box .title dt{font-size:180%;color:var(--point-color02);font-weight:500;letter-spacing:-0.03em;display: inline-block;vertical-align: top;font-family:var(--font-type03);} .make_process .content_box .title dt:before{counter-increment: sectionCont;content:counter(sectionCont, decimal-leading-zero);font-size:var(--title-18);color:var(--point-color02);font-weight:400;letter-spacing:-0.02em;font-family:var(--font-type04);width:40px;height:40px;box-sizing:border-box;border-radius:100%;background:var(--point-color16);display: inline-flex;align-items: center;justify-content: center;text-align: center;margin-right:18px;margin-top:8px;vertical-align: top;} .make_process .content_box .title dd{font-size:var(--title-18);color:var(--black-color03);font-weight:400;letter-spacing:-0.5px;line-height:1.67;font-family:var(--font-type03);display: inline-block;vertical-align: top;margin-left:59px;} .make_process .content_box .title dd strong{color:var(--point-color02);} .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-flex;align-items: center;justify-content: center;box-sizing:border-box;vertical-align: top;width:220px;border-radius:100%;text-align: center;position: relative;font-size:var(--title-20);aspect-ratio:1;} .make_process .content_process ul li + li{margin-left:-22px;} .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;} .make_process .content_process ul li:nth-child(3){background:rgba(18, 56, 126, 0.9);z-index:2;} .make_process .content_process ul li:nth-child(4){background:rgba(13, 36, 78, 0.9);z-index:1;} .make_process .content_process ul li span{font-size:160%;color:var(--point-white);font-weight:500;letter-spacing:-0.03em;line-height:1.35;width:100%;display: block;} .make_process .content_process ul li span em{font-size:var(--title-18);line-height:1.45;display: block;font-weight:inherit;} .make_process .content_process ul li:nth-child(1) span{color:var(--black-color04);} .make_process .content_process .txt{margin-left:40px;font-size:var(--title-20);} .make_process .content_process .txt .dots{vertical-align: middle;display: inline-flex;align-items: center;} .make_process .content_process .txt .dots li{width:6px;height:6px;display: inline-block;box-sizing:border-box;border-radius:100%;background:var(--black-color10);} .make_process .content_process .txt .dots li + li{margin-left:10px;} .make_process .content_process .txt p{font-size:160%;color:var(--black-color10);font-weight:400;display: inline-block;vertical-align: middle;padding-left:30px;} .make_process .content_process.arw_box li:nth-child(3){margin-left:130px;} .make_process .content_process.arw_box 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 .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 var(--black-color10);content:"";position: absolute;left:-70px;top:50%;transform:translateY(-50%);} @media (pointer: fine) and (hover: hover) { .make_process .process_tab li:hover{width:330px !important;background:var(--point-color02);box-shadow: 0px 5px 24px 0 rgba(42, 57, 85, 0.4);transition:width 0.5s;} .make_process .process_tab li:hover dl dt{color:var(--point-white) !important;} .make_process .process_tab li:hover dl:before{background:var(--point-white);} .make_process .process_tab li:hover dl:after{right:28px;opacity:1;transition:all 0.5s;} } @media (max-width:1600px) { .make_process:before{width:21%;height:111%;} } @media (max-width:1400px) { .make_process .content_box{width:calc(100% - 290px);} .make_process .content_process ul li{width:190px;} } @media (max-width:1300px) { .make_process:before{display: none;} } @media (max-width:1200px) { .make_process .process_tab .swiper-slide-thumb-active{width:300px !important;} .make_process .content_box{height:470px;} .make_process .content_box .swiper-slide{padding:50px 30px 50px 40px;} .make_process .content_process .txt{margin-left:20px;} .make_process .content_process .txt p{padding-left:15px;} .make_process .content_process ul li{width:160px;} .make_process .content_process ul li span{font-size:88%;} .make_process .content_process.arw_box li:nth-child(3){margin-left:60px;} .make_process .content_process.arw_box li:nth-child(3):before{left:-35px;} .make_process .process_tab li:hover{width:300px !important;} } @media (max-width:1023px) { .make_process{padding-block:clamp(50px, 10vw, 100px);} .make_process .process_box{margin-top:35px;} .make_process .content_box{height:380px;} .make_process .content_box .swiper-slide{padding:40px 20px;} .make_process .content_box .title dt:before{margin-top:4px;margin-right:10px;} .make_process .content_box .title dd{margin-left:50px;} .make_process .content_box .title dd br{display: none;} .make_process .content_process{margin-top:20px;} .make_process .content_process ul li{width:135px;} } @media (max-width:960px) { .make_process .content_process ul li{width:126px;} .make_process .content_process .txt{margin-left:12px;} .make_process .content_process .txt p{padding-left:8px;} } @media (max-width:860px) { .make_process .process_tab{position: static;width:100%;} .make_process .process_tab .swiper-wrapper{height:auto !important;transform:none !important;} .make_process .process_tab li{width:100%;height:auto;transition:all 0.5s;} .make_process .process_tab .swiper-slide-thumb-active, .make_process .process_tab li:hover{width:100% !important;} .make_process .process_tab li dl{padding:20px 20px;gap:0 10px;} .make_process .process_tab li dl dd{width:100%;font-size:var(--title-18);color:var(--point-white);font-weight:300;box-sizing:border-box;padding-left:50px;} .make_process .process_tab .swiper-slide-thumb-active dl dd{display: block;} .make_process .content_box{height:0;overflow:hidden;} } @media (max-width:640px) { .make_process .process_tab li dl:before{width:30px;height:30px;} .make_process .process_tab li dl:after{display: none;} .make_process .process_tab li dl dd{padding-left:40px;} } @media (max-width:479px) { .make_process .process_box{margin-top:25px;} .make_process .process_tab li{border-radius:5px;} .make_process .process_tab li dl{padding:15px 15px;} } /*─────────────────────────────────────────────────────────── 무료 컨설팅 성공 사례 ───────────────────────────────────────────────────────────*/ .sub_consult .consult_list_box{margin-top:120px;} .sub_consult .consult_list_box .main_title{margin-bottom:clamp(20px, 4vw, 46px);} .sub_consult .default_swiper{position: relative;} .sub_consult .default_swiper:before{width:160px;aspect-ratio:auto 1;box-sizing:border-box;content:"";border-radius:100%;background: var(--point-color23);position: absolute;top:-65px;right:-79px;} .sub_consult .default_swiper:after{width:260px;aspect-ratio:auto 1;box-sizing:border-box;content:"";border-radius:100%;background: var(--point-color02);position: absolute;bottom:-114px;left:-119px;} .sub_consult .consult_list{display: flex;flex-wrap:wrap;gap:40px;} .sub_consult .consult_list li{width:calc(100% / 3 - 26.7px);height:auto;box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--border-color01);background:var(--point-white);box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10);position: relative;overflow:clip;z-index:3;} .sub_consult .consult_list li .title{text-align: center;box-sizing:border-box;background:var(--point-color15);display: flex;flex-direction: column;align-items: center;justify-content: center;gap:9px;padding:30px 0 27px;font-size:var(--title-20)} .sub_consult .consult_list li:nth-child(2) .title{background:var(--point-color22);} .sub_consult .consult_list li:nth-child(3) .title{background:var(--point-color02);} .sub_consult .consult_list li .title span{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;height:36px;background: var(--point-white);border-radius:var(--radius-40);font-size:80%;color:var(--point-color15);font-weight:600;padding:0 14px;letter-spacing:-0.03em;} .sub_consult .consult_list li:nth-child(2) .title span{color:var(--point-color22);} .sub_consult .consult_list li:nth-child(3) .title span{color:var(--point-color02);} .sub_consult .consult_list li .title strong{font-size:170%;color:var(--point-white);font-weight:600;letter-spacing:-0.04em;} .sub_consult .consult_list li .consult_cont{box-sizing:border-box;padding:20px 20px;display: flex;flex-direction: column;justify-content: space-between;height:calc(100% - 153px);} .sub_consult .consult_list .des{box-sizing:border-box;padding:9px 10px 0;font-size:var(--title-20);} .sub_consult .consult_list .des div + div{margin-top:19px;} .sub_consult .consult_list .des div span{display: inline-flex;box-sizing:border-box;background:var(--gray-bg01);border-radius:35px;align-items: center;justify-content: center;text-align: center;font-size:85%;color:var(--black-color00);font-weight:500;padding:0 14px;height:32px;letter-spacing:-0.01em;} .sub_consult .consult_list .des div p{margin-top:12px;font-size:85%;color:var(--black-color03);font-weight:400;line-height:1.7;letter-spacing:-0.04em;} .sub_consult .consult_list .des div p em{font-size:inherit;color:inherit;font-weight:500;text-decoration: underline;text-underline-offset:2px;} .sub_consult .consult_list .result{box-sizing:border-box;background:var(--point-color04);border-radius:var(--radius-10);margin-top:20px;display: flex;flex-direction: column;align-items: center;gap:10px;padding:25px 20px 20px;font-size:var(--title-20);} .sub_consult .consult_list .result span{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;background:var(--black-color03);border-radius:35px;font-size:85%;color:var(--point-white);font-weight:400;padding:0 14px;height:32px;} .sub_consult .consult_list .result p{font-size:90%;color:var(--black-color00);font-weight:400;line-height:1.7;text-align: center;letter-spacing:-0.04em;} .sub_consult .consult_list .result p strong{font-size:inherit;color:var(--point-color02);font-weight:600;line-height:inherit;} .sub_consult_down{text-align: center;margin-top:100px;font-size:var(--title-20)} .sub_consult_down h3{font-size:130%;color:var(--black-color02);font-weight: 400;letter-spacing: -0.9px;line-height:1.6;} .sub_consult_down .btn_box{display: flex;align-items: center;justify-content: center;gap:20px;margin-top: 53px;} .sub_consult_down a{display: inline-flex;align-items: center;justify-content: center;text-align: center;box-sizing: border-box;vertical-align: top;width:360px;height: 80px;box-shadow: 0 0 51px 0 rgba(0, 0, 0, 0.34);background: var(--point-color02);font-size:120%;color: var(--point-white);font-weight: 500;letter-spacing: -0.96px;} .sub_consult_down .report_sample{background:var(--black-color00);} @media (max-width:1023px) { .sub_consult .consult_list_box{margin-top:clamp(60px, 12vw, 120px);} .sub_consult .default_swiper:before{width:14vw;top:-10%;right:-6%;;} .sub_consult .default_swiper:after{width:20vw;bottom:-14%;left:-12%;;} .sub_consult .consult_list{gap:21px;} .sub_consult .consult_list > li{width:calc(100% / 3 - 14px);} .sub_consult .consult_list li .title{height:142px;} .sub_consult .consult_list li .title strong{font-size:150%;} .sub_consult .consult_list li .consult_cont{padding:20px 15px;height:calc(100% - 142px);} .sub_consult_down{margin-top:clamp(50px, 10vw, 100px);} .sub_consult_down .btn_box{margin-top:clamp(30px, 5vw, 50px);} .sub_consult_down a{height:clamp(50px, 8vw, 80px);width:clamp(200px, 36vw, 360px);} } @media (max-width:860px) { .sub_consult .consult_list{flex-wrap:initial;gap:0;} } @media (max-width:479px) { .sub_consult .default_swiper:after{bottom:-4%;} .sub_consult .consult_list li .title{padding:20px 0;height:110px;} .sub_consult .consult_list li .title span{height:30px;padding:0 10px;} .sub_consult .consult_list li .title strong{font-size:130%;} .sub_consult .consult_list li .consult_cont{height:calc(100% - 110px);} .sub_consult .consult_list .des{padding:0;} .sub_consult .consult_list .result{padding:15px 10px;} .sub_consult_down h3{font-size:110%;} .sub_consult_down .btn_box{gap:10px;} .sub_consult_down a{font-size:90%;width:calc(50% - 5px);box-shadow:0 0 18px 0 rgba(0, 0, 0, 0.34);} } /*─────────────────────────────────────────────────────────── 무료 컨설팅 신청 ───────────────────────────────────────────────────────────*/ body:has(.free_consulting) .quick_right{display:none;} .free_consulting{padding-block:76px 150px; font-family:var(--font-type03);} .free_consulting .main_title{display:flex;flex-direction:column;align-items: center;gap: 11px;margin-bottom:80px;} .free_consulting .main_title h2, .free_consulting .main_title h1{padding-top:0;font-size:250%;} .free_consulting .main_title h2:before, .free_consulting .main_title h1:before{display:none;} .free_consulting .inquiryStep{display:flex;counter-reset: inquiryStep;margin-bottom:20px;} .free_consulting .inquiryStep > li{position:relative;width:100%;font-size:var(--title-20);font-weight:400;color:var(--border-color06);line-height:1.3;display: flex;align-items: baseline;gap: 20px;padding-right: 30px;box-sizing: border-box; transition:all 0.4s;} .free_consulting .inquiryStep > li:before{content: counter(inquiryStep, decimal-leading-zero);counter-increment: inquiryStep;font-size:90%;font-weight:inherit;color:inherit;font-family:var(--font-type05);translate: 0 -1px;} .free_consulting .inquiryStep > li.on{color:var(--black-color00);} .free_consulting progress{width:100%;height:2px;appearance: none; margin-bottom:40px;} .free_consulting progress::-webkit-progress-bar {background-color: var(--border-color01); } .free_consulting progress::-webkit-progress-value { background-color: var(--black-color00);transition:all 1.2s; transition-timing-function:linear;} .free_consulting progress::-moz-progress-bar { background-color: var(--black-color00); transition:all 1.2s; transition-timing-function:linear;} .free_consulting .info_title{position:relative; margin-bottom:50px} .free_consulting .info_title h3{font-size:var(--title-20); font-weight:400; color:var(--black-color03); line-height:1.6; letter-spacing:-0.03em;} .free_consulting .inp_list{display:flex; flex-wrap:wrap; gap:30px 40px;} .free_consulting .inp_list > li{position:relative;width:calc(100% / 2 - 20px);font-size:var(--title-18);font-weight: 500;color: var(--black-color00);letter-spacing: -0.03em;line-height: 1.3;display: flex;flex-flow: column;gap: 18px;} .free_consulting .inp_list > li.bk{width:100%;} .free_consulting .inp_list label{display:block; width:fit-content;} .free_consulting .inp_list label.required:after{display:inline-flex; content:' *'; color:var(--point-color01); margin-left:4px;} .free_consulting .inp_list :where([type="text"], [type="number"], select, textarea)::placeholder{color:var(--black-color07);} .free_consulting .inp_list textarea{height:100px; padding-block:20px; line-height:1.3;} .free_consulting .inp_list .email_box{display:flex; align-items:center; gap:10px;} .free_consulting .inp_list .gapBox{display:flex; align-items:center; gap:10px;} .free_consulting .inp_list :where(#email2, #emails){max-width:170px;} .free_consulting .inp_list :where(#email1){width:100%;} .free_consulting .stepCont{display:grid;gap:30px;} .free_consulting .stepCont .item{transition:all 0.6s;} /* .free_consulting .stepCont .item:not(.on){translate:70px; opacity:0; height:0; overflow:hidden;} .free_consulting .stepCont .item:has(~ .item.on){translate:-70px; opacity:0; height:0; overflow:hidden;} */ .free_consulting .submit_box{display:flex;flex-wrap:wrap;justify-content: center;gap:20px;margin-top: 60px;font-size:var(--title-20);} .free_consulting .submit_box :where(button, a){display:flex;align-items:center;justify-content: center;text-align: center;min-width: 200px;height: auto;padding: 21px 25px;background:var(--black-color10);font-size:110%;font-weight: 400;color: var(--point-white);line-height: 1.3;letter-spacing: -0.03em;} .free_consulting .submit_box :where(button, a):last-child{background:var(--point-color02);} .free_consulting .chk_wrap{display:flex; flex-wrap:wrap; gap:16px;} .free_consulting .chk_wrap label{display:flex;align-items:center;justify-content: center;width: auto;height: auto;border: 1px solid var(--border-color02);background: var(--point-white);border-radius:var(--radius-04);padding: 13px 20px; font-weight:400; color:var(--black-color05); transition:all 0.4s; cursor:pointer;} .free_consulting .chk_wrap label:has(:checked){border-color:var(--black-color00); color:var(--black-color00);} .free_consulting .chk_wrap [type="radio"]{display:none;} .free_consulting .main_visitor{margin:22px 0 0;} .free_consulting .channel_list{display:grid;grid-template: auto / repeat(2, 1fr);gap: 40px;} .free_consulting .channel_list > li{border:1px solid var(--border-color01);padding: 60px;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 26px;text-align: center;border-radius:var(--radius-20);} .free_consulting .channel_list .desc{display: flex;flex-direction: column;align-items: center;gap: 26px;} .free_consulting .channel_list .desc dt{display:flex;align-items: flex-start;height: 54px;} .free_consulting .channel_list .desc dd{font-size:var(--title-18);font-weight:400;color:var(--black-color03);line-height:1.8;letter-spacing:-0.03em;} .free_consulting .channel_list .desc dd strong{font-weight:500;} .free_consulting .channel_list .link_btn{display:flex;align-items: center;justify-content: center;min-width: 180px;padding: 17px 25px;background: var(--point-white);border: 1px solid var(--black-color03);font-size:var(--title-18);font-weight: 500;color: var(--black-color03);letter-spacing: -0.03em;line-height: 1.3;box-sizing: border-box; transition:all 0.4s;} /* over */ @media (pointer: fine) and (hover: hover) { .free_consulting .channel_list .link_btn:hover{background:var(--point-color02); border-color:var(--point-color02); color:var(--point-white);} } @media (max-width:1350px) { .free_consulting .inp_list{flex-direction: column;} .free_consulting .inp_list > li{width:100%;flex-direction: row;align-items: center;} .free_consulting .inp_list > li > label{width:120px;flex-shrink:0;} } @media (max-width:1023px) { .free_consulting{padding-block:clamp(40px, 7.6vw, 76px) clamp(80px, 15vw, 150px);} .free_consulting .main_title{margin-bottom:clamp(30px, 8vw, 80px);} .free_consulting .main_title h2, .free_consulting .main_title h1{font-size:clamp(200%, 4.5vw, 250%);} .free_consulting progress{margin-bottom:clamp(20px, 4vw, 40px);} .free_consulting .submit_box{margin-top:clamp(30px, 6vw, 60px);} .free_consulting .submit_box :where(button, a){min-width:180px;padding:clamp(12px, 2vw, 21px) clamp(15px, 2.5vw, 25px);} } @media (max-width:767px) { .free_consulting .stepCont, .free_consulting .inp_list{gap:20px;} .free_consulting .inp_list > li{flex-direction: column;align-items: flex-start;gap:10px;} .free_consulting .inp_list > li > label{width:fit-content;} .free_consulting .inp_list :where([type="text"], [type="number"], select, textarea){width:100%;} .free_consulting .inp_list .email_box{flex-direction: column;align-items: flex-start;width:100%;} .free_consulting .inp_list .gapBox{width:100%;} .free_consulting .inp_list :where(#email1, #email2, #emails){max-width:100%;} } @media (max-width:640px) { .free_consulting .scrBox{width:calc(100% + 30px);margin-left:-15px;box-sizing:border-box;overflow: hidden;overflow-x: auto; scroll-behavior:smooth;} .free_consulting .scrBox {-ms-overflow-style: none; scrollbar-width: none;} .free_consulting .scrBox::-webkit-scrollbar {display: none;} .free_consulting .scrBox .cont{position:relative;width: 860px; padding-inline:15px;box-sizing:border-box;} .free_consulting .inquiryStep{margin-bottom:15px;} .free_consulting .inquiryStep > li{gap:10px;padding-right:20px;} } @media (max-width:479px) { .free_consulting .submit_box{gap:10px;} .free_consulting .submit_box :where(button, a){min-width:130px;} } /*layer*/ body:has(.consult_report.on){overflow:hidden;} .consult_report{position: fixed;top:0;left:0;z-index:9999;width:100%;height:100%;display:none;align-items: center;justify-content: center;background:rgba(0,0,0,0.6);} .consult_report.on{display: flex;} .consult_report .layer_wrap{position: relative;} .consult_report .layer_wrap .btn_close{width:25px;aspect-ratio:auto 1;position: absolute;top:30px;right:-55px;} .consult_report .layer_wrap .btn_close button{display: block;width:100%;height:100%;position: relative;} .consult_report .layer_wrap .btn_close span{display: inline-block;width:100%;height:2px;background: var(--point-white);position: absolute;top:50%;left:0;} .consult_report .layer_wrap .btn_close span:nth-child(1){transform:rotate(45deg);} .consult_report .layer_wrap .btn_close span:nth-child(2){transform:rotate(-45deg);} .consult_report .layer_cont{border-radius:var(--radius-10);background: var(--point-white);max-height:70vh;overflow-y:auto;} .consult_report .layer_cont .layer_scroll{box-sizing:border-box;padding:48px 0 40px;} .consult_report .title{text-align: center;font-size:var(--title-20);} .consult_report .title h3{font-size:250%;color:var(--black-color00);font-weight:500;} .consult_report .title .tit_info{display: flex;align-items: center;justify-content: center;margin-top:13px;} .consult_report .title .tit_info span{font-size:90%;color:var(--black-color06);font-weight:400;line-height:1.3;display: inline-flex;align-items: center;} .consult_report .title .tit_info span + span:before{width:1px;height:16px;content:"";background: var(--border-color01);display: inline-block;margin:0 20px;} .consult_report .report_box{margin-top:40px;} .consult_report .tab{position:sticky;top:0;left:0;width:100%;background: var(--point-white);box-sizing:border-box;border-bottom:1px solid var(--border-color01);padding:0 40px;z-index:3;} .consult_report .tab ul{display: flex;} .consult_report .tab ul li{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:20%;font-size:var(--title-18);color:var(--black-color05);font-weight:400;line-height:1.3;letter-spacing:-0.02em;padding:20px 0;position: relative;cursor:pointer;} .consult_report .tab ul li:before{width:0;height:2px;content:"";background:var(--black-color03);position: absolute;bottom:-1px;left:50%;transform:translate(-50%);transition:width 0.5s;} .consult_report .tab ul li.on{color:var(--black-color00);font-weight:500;} .consult_report .tab ul li.on:before{width:100%;} .consult_report .slogan{margin:40px auto 0;width:calc(100% - 80px);background: var(--point-color04);box-sizing:border-box;border-radius:var(--radius-10);text-align: center;padding:32px 30px;} .consult_report .slogan p{font-size:var(--title-20);color:var(--point-color02);font-weight:500;line-height:1.3;} .consult_report .report_sec_box{box-sizing:border-box;padding:0 40px;} .consult_report .report_sec{padding-top:80px;text-align: center;font-size:var(--title-20);} .consult_report .report_sec:nth-child(1){padding-top:60px;} .consult_report .report_sec h4{font-size:200%;color:var(--black-color00);font-weight:500;line-height:1.3;margin-bottom:30px;} .consult_report .report_sec .analysis_box{display: flex;flex-wrap:wrap;} .consult_report .report_sec .analysis_box.line2{gap:40px 40px;} .consult_report .report_sec .analysis_box.line1{gap:30px 30px;} .consult_report .report_sec .analysis_box.line2 > section{width:calc(50% - 20px);} .consult_report .report_sec .analysis_box.line1 > section{width:100%;} .consult_report .report_sec .analysis_box > section{box-sizing:border-box;border-radius:var(--radius-10);overflow:clip;border:1px solid var(--border-color01);font-size:var(--title-20);} .consult_report .report_sec .analysis_box > section h5{text-align: center;box-sizing:border-box;background: var(--black-color11);font-size:100%;color:var(--point-white);font-weight:400;display:flex;height:60px;align-items: center;justify-content: center;} .consult_report .report_sec section > ul{display: flex;flex-direction: column;gap:12px;box-sizing:border-box;padding:30px 30px;} .consult_report .report_sec .bullet_list li{display: flex;align-items: baseline;gap:10px;font-size:var(--title-17);color:var(--black-color03);font-weight:400;line-height:1.3;text-align:left;margin:0;} .consult_report .report_sec .bullet_list li:before{width:4px;aspect-ratio:auto 1;box-sizing:border-box;content:"";border-radius:100%;background: var(--black-color09);display: inline-block;flex-shrink:0;transform:translateY(-4px);} .consult_report .report_sec .chk_list li{display: flex;align-items: baseline;gap:10px;font-size:var(--title-17);color:var(--black-color03);font-weight:400;line-height:1.3;text-align:left;} .consult_report .report_sec .chk_list li:before{width:16px;height:12px;content:"";background:url('../images/sub/report_chk.svg')no-repeat center;background-size:auto 100%;transform:translateY(1px);flex-shrink:0;} .consult_report .report_sec .chk_list li strong{font-size:inherit;color:inherit;font-weight:500;} .consult_report .report_sec .analysis_box .money_list{padding:0;gap:0;} .consult_report .money_analysis .money_box{box-sizing:border-box;display: flex;background: var(--gray-bg01);} .consult_report .money_analysis .money_box + .money_box{border-top:1px solid var(--border-color01);} .consult_report .money_analysis .money_box h6{width:203px;box-sizing:border-box;padding:20px 20px;text-align:left;font-size:var(--title-17);color:var(--black-color03);font-weight:500;flex-shrink:0;} .consult_report .money_analysis .money_box p{text-align: left;box-sizing:border-box;padding:20px 20px;font-size:var(--title-17);color:var(--black-color03);font-weight:400;border-left:1px solid var(--border-color01);background: var(--point-white);width:calc(100% - 203px);} .consult_report .report_sec.sec04{font-size:var(--title-20);} .consult_report .report_sec.sec04 > div + div{margin-top:53px;} .consult_report .report_sec.sec04 h5{text-align:left;font-size:120%;color:var(--black-color03);font-weight:500;margin-bottom:23px;} .consult_report .report_sec .effect_box ul{display: flex;flex-wrap:wrap;gap:34px;} .consult_report .report_sec .effect_box ul li{width:calc(25% - 25.5px);box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--border-color01);padding:31px 20px;} .consult_report .report_sec .effect_box ul li span{font-size:var(--title-18);color:var(--black-color08);font-weight:500;line-height:1.6;font-family:var(--font-type04);} .consult_report .report_sec .effect_box ul li .txt_box{margin-top:10px;display: flex;align-items: center;justify-content: center;height:58px;} .consult_report .report_sec .effect_box ul li p{font-size:var(--title-18);color:var(--black-color03);font-weight:500;line-height:1.6;} .consult_report .report_sec .effect_box ul li p strong{font-size:inherit;color:var(--point-color02);font-weight:inherit;} .consult_report .report_sec .loadmap ol{display: flex;flex-wrap:wrap;gap:80px;} .consult_report .report_sec .loadmap ol li{width:calc(25% - 60px);box-sizing:border-box;position: relative;box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);border-radius:var(--radius-10);} .consult_report .report_sec .loadmap ol li .cont{overflow:clip;display: flex;flex-direction: column;gap:20px;padding:30px 20px;position: relative;} .consult_report .report_sec .loadmap ol li .cont:before{width:100%;height:4px;content:"";border-radius:10px 10px 0 0;position: absolute;top:0;left:0;background: var(--point-color08);} .consult_report .report_sec .loadmap ol li .cont:nth-child(3):before{background: var(--point-color09);} .consult_report .report_sec .loadmap ol li .cont:nth-child(4):before{background: var(--point-color10);} .consult_report .report_sec .loadmap ol li + li:after{width:13px;aspect-ratio:auto 1;content:"";border:2px solid var(--black-color08);border-width:2px 2px 0 0;position: absolute;top:50%;transform:rotate(45deg) translateY(-50%);left:-55px;} .consult_report .report_sec .loadmap ol li h6{font-size:var(--title-18);color:var(--point-color08);font-weight:600;line-height:1.3;} .consult_report .report_sec .loadmap ol li:nth-child(3) h6{color:var(--point-color09);} .consult_report .report_sec .loadmap ol li:nth-child(4) h6{color:var(--point-color10);} .consult_report .report_sec .loadmap ol li .icon{height:70px;display: flex;align-items: center;justify-content: center;} .consult_report .report_sec .loadmap ol li .icon img{max-height:100%;} .consult_report .report_sec .loadmap ol li p{font-size:var(--title-17);color:var(--black-color03);font-weight:500;line-height:1.3;letter-spacing:-0.03em;} .consult_report .report_step{margin-top:80px;box-sizing:border-box;border-radius:var(--radius-10);background:var(--point-color04);text-align: center;padding:50px 30px;font-size:var(--title-20);} .consult_report .report_step .txt h4{font-size:150%;color:var(--black-color00);font-weight:500;line-height:1.3;} .consult_report .report_step .txt p{margin-top:20px;font-size:85%;color:var(--black-color03);font-weight:400;line-height:1.8;} .consult_report .report_step a{display: inline-flex;box-sizing:border-box;margin:30px auto 0;width:300px;height:70px;align-items: center;justify-content: center;text-align: center;background: var(--point-color02);box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.20);font-size:120%;color:var(--point-white);font-weight:500;} @media (max-width:1450px) { .consult_report .layer_wrap .btn_close{top:-40px;right:0;} } @media (max-width:1023px) { .consult_report .title h3{font-size:clamp(200%, 4.5vw, 250%);} .consult_report .report_box{margin-top:clamp(20px, 4vw, 40px);} .consult_report .tab{padding:0 20px;} .consult_report .slogan{width:calc(100% - 40px);padding:20px 15px;} .consult_report .report_sec{padding-top:clamp(40px, 8vw, 80px)} .consult_report .report_sec:nth-child(1){padding-top:clamp(30px, 6vw, 60px);} .consult_report .report_sec_box{padding:0 20px;} .consult_report .report_sec h4{margin-bottom:clamp(10px, 3vw, 30px);font-size:clamp(150%, 3.5vw, 200%);} .consult_report .report_sec .analysis_box.line2{gap:20px;} .consult_report .report_sec .analysis_box.line2 > section{width:calc(50% - 10px);} .consult_report .report_sec section > ul{padding:clamp(20px, 3vw, 30px) clamp(15px, 3vw, 30px);} .consult_report .report_sec .analysis_box > section h5{padding:12px 0;height:auto;} .consult_report .report_sec.sec04 h5{margin-bottom:12px;} .consult_report .report_sec .effect_box ul{gap:20px;} .consult_report .report_sec .effect_box ul li{width:calc(25% - 15px);padding:20px 10px;} .consult_report .report_sec .effect_box ul li .txt_box{margin-top:5px;height:auto;} .consult_report .report_sec.sec04 > div + div{margin-top:clamp(25px, 5.3vw, 53px);} .consult_report .report_sec .loadmap ol{gap:50px;} .consult_report .report_sec .loadmap ol li{width:calc(25% - 38px);} .consult_report .report_sec .loadmap ol li + li:after{left:-40px;} .consult_report .report_sec .loadmap ol li .cont{gap:14px;padding:20px 15px;} .consult_report .report_sec .loadmap ol li .icon{height:56px;} .consult_report .report_step{margin-top:clamp(40px, 8vw, 80px);padding:30px 20px;} .consult_report .report_step .txt h4{font-size:130%;margin-bottom:0;} .consult_report .report_step .txt p{margin-top:10px;} .consult_report .report_step a{margin-top:20px;width:auto;padding:0 60px;height:clamp(50px, 7vw, 70px);} } @media (max-width:767px) { .consult_report .title .tit_info{flex-direction: column;gap:12px;} .consult_report .title .tit_info span + span:before{display: none;} .consult_report .tab ul li{padding:12px 10px;font-size:var(--title-16);} .consult_report .report_sec .effect_box ul li{width:calc(50% - 10px);} .consult_report .report_sec .loadmap ol{gap:20px;} .consult_report .report_sec .loadmap ol li{width:calc(50% - 10px);} .consult_report .report_sec .loadmap ol li + li:after{display: none;} } @media (max-width:640px) { .consult_report .report_sec .analysis_box.line2 > section{width:100%;} .consult_report .report_sec section > ul{gap:6px;} .consult_report .report_sec .chk_list li:before{width:11px;height:8px;transform:translateY(-2px);} .consult_report .money_analysis .money_box h6{width:30%;padding:15px 10px;} .consult_report .money_analysis .money_box p{width:70%;padding:15px 10px;} } @media (max-width:479px) { .consult_report .layer_cont .layer_scroll{padding:25px 0 20px;} .consult_report .title .tit_info{gap:8px;} .consult_report .tab{padding:0;} .consult_report .tab ul li{padding: 8px 5px;font-size: var(--title-14);} .consult_report .slogan{margin-top:25px;} .consult_report .slogan{width:calc(100% - 30px);} .consult_report .report_sec_box{padding:0 15px;} .consult_report .report_sec .analysis_box > section h5{padding:10px 0;} .consult_report .report_sec .bullet_list li{gap:6px;} .consult_report .report_sec .bullet_list li:before{width:3px;} } /*─────────────────────────────────────────────────────────── 로그인 ───────────────────────────────────────────────────────────*/ /*로그인*/ .sub_login .login_box {width:calc(100% - 30px);max-width:420px; margin:0 auto; padding:0} .sub_login .login_box ul li {padding-bottom:2.4%;} .sub_login .login_box ul li input {width:100%;} .sub_login .login_box ul li:last-of-type {padding-top:2.4%;} .sub_login .login_box ul.login_link {border-top:1px solid var(--border-color01); width:100%; margin-top:7%; text-align:center;padding-top:3.6%;display: flex;align-items: center;justify-content: center;gap:50px;} .sub_login .login_box ul.login_link li {display:inline-block;position: relative;padding:0;} .sub_login .login_box ul.login_link li + li:before {display:inline-block;content:"";width:1px;height:12px;background:var(--border-color01);vertical-align:middle;position: absolute;left:-25px;top:50%;transform:translateY(-50%);} .sub_login .login_box ul.login_link li a {color:var(--black-color09);font-size:var(--title-14); font-weight:500;} /*비밀번호 변경 안내*/ .sub_login.add .pw_change {font-size:var(--title-20)} .sub_login.add .pw_change h3 {font-size:110%;color:var(--black-color02);font-weight:500;padding-bottom:1.2%;} .sub_login.add .bbs_sub_title {text-indent:0;line-height:1.5;color:var(--black-color07);font-size:var(--title-14);font-weight:500;text-align:left;padding-bottom:14px;height: auto;display: block;} .sub_login.add .bbs_sub_title span {color:var(--black-color04); font-size:var(--title-14); font-weight:500;} .sub_login.add .pw_change table.bbs_write input {max-width:200px;} .bbs_write_info {font-size:var(--title-14);line-height:1.5;padding-top:2.4%;color:var(--black-color06);} .bbs_write_info strong {font-size:inherit;color:var(--black-color02);font-weight:700;} @media (max-width:1200px) { /*비밀번호 변경 안내*/ .sub_login.add .pw_change table.bbs_write col:nth-child(1){width:20%;} .sub_login.add .pw_change table.bbs_write input{max-width:100%;} } @media (max-width:479px) { /*로그인*/ .sub_login .login_box ul.login_link{gap:30px;} .sub_login .login_box ul.login_link li + li:before{height:10px;left:-15px;top:55%;} /*비밀번호 변경 안내*/ .sub_login.add .pw_change table.bbs_write col:nth-child(1){width:42%;} } /*─────────────────────────────────────────────────────────── 회원가입 ───────────────────────────────────────────────────────────*/ /* 약관동의 */ .sub_agree_box{width:100%;box-sizing:border-box;vertical-align: top;} .sub_agree_box .all_agree{width:100%;box-sizing:border-box;vertical-align: top;margin-bottom:39px;padding-bottom:40px;border-bottom:1px solid var(--black-color00);} .sub_agree_box .all_agree label{font-size:var(--title-20);color:var(--black-color03);font-weight:500;letter-spacing:-0.8px;display: block;box-sizing: border-box;position: relative;} .sub_agree_box .all_agree input[type="checkbox"] + label:before{margin-right:10px;margin-top:-4px;} .sub_agree_box .agree_cont{} .sub_agree_box .agree_cont + .agree_cont{margin-top:40px;} .sub_agree_box .agree_cont .cont_title{display: flex;align-items: center;justify-content: space-between;} .sub_agree_box .agree_cont .cont_title .chk{display: inline-block;vertical-align: top;} .sub_agree_box .agree_cont .cont_title label{font-size:var(--title-20);color:var(--black-color03);font-weight:400;letter-spacing:-0.8px;} .sub_agree_box .agree_cont .cont_title label span{font-size:inherit;color:inherit;font-weight:inherit;} .sub_agree_box .agree_cont .cont_title label strong{font-size:inherit;color:var(--point-color01);font-weight:inherit;} .sub_agree_box .agree_cont .view_cont{display:inline-block;float: right;vertical-align: top;font-size:var(--title-16);color:var(--black-color08);font-weight:400;letter-spacing:-0.64px;position: relative;padding-right:20px;cursor:pointer;} .sub_agree_box .agree_cont .view_cont:before{width:5px;height:5px;content:"";border:1px solid var(--black-color08);border-width:1px 1px 0 0;position: absolute;right:0;top:4px;transform:rotate(135deg);} .sub_agree_box .agree_cont .view_cont.on:before{transform:rotate(-45deg);top:8px;} .sub_agree_box .agree_box{margin-top:21px;display: none;} .sub_agree_box .agree_box textarea{width:100%;height:160px;background:var(--gray-bg01);box-sizing:border-box;border:1px solid var(--gray-bg01);outline:none;font-size:var(--title-15);color:var(--black-color06);font-weight:400;letter-spacing:-0.6px;padding:30px;} .sub_agree_box .agree_box textarea::-webkit-scrollbar{width:4px;border-radius:2px;background:var(--border-color02);} .sub_agree_box .agree_box textarea::-webkit-scrollbar-thumb{width:4px;border-radius:2px;background:var(--black-color09);} @media (max-width:1023px) { .sub_agree_box .agree_cont .view_cont:before{top:6px;} .sub_agree_box .agree_cont .view_cont.on:before{top:10px;} } @media (max-width:640px) { .sub_agree_box{margin-top:20px;} .sub_agree_box .all_agree{margin-bottom:20px;padding-bottom:20px;} .sub_agree_box .agree_cont + .agree_cont{margin-top:20px;} .sub_agree_box .agree_cont .view_cont{padding-right:16px;} .sub_agree_box .agree_cont .view_cont.on:before{top:9px;} .sub_agree_box .agree_box{margin-top:10px;} .sub_agree_box .agree_box textarea{height:100px;} } /*회원가입*/ .sub_join .bbs_tit{position: relative;display: flex;align-items: baseline;justify-content: space-between;font-size:var(--title-20);} .sub_join .bbs_write_title{font-size:150%;color:var(--black-color03);font-weight:500;letter-spacing:-0.9px;display: inline-block;vertical-align: top;padding:0;} .sub_join .bbs_tit span{display: inline-block;font-size:80%;color:var(--black-color07);font-weight:400;letter-spacing:-0.48px;} .sub_join .bbs_tit span strong{font-size:inherit;color:var(--point-color01);font-weight:inherit;letter-spacing:inherit;} .sub_board .btn_sm{height:50px;padding:0 8px;border-radius:5px;} table.bbs_write {border-top:2px solid var(--black-color03);border-bottom:1px solid var(--border-color01);display:table;} .bbs_tit + table.bbs_write {margin-top: 25px;} table.bbs_write th, table.bbs_write td {padding:15px 20px;font-size:var(--title-16);font-weight:300;color:var(--black-color07);letter-spacing:-0.48px;text-align:left;vertical-align:middle;box-sizing:border-box;} table.bbs_write tr:first-of-type th, table.bbs_write tr:first-of-type td{padding-top:30px;} table.bbs_write tr:last-of-type th, table.bbs_write tr:last-of-type td{padding-bottom:30px;} table.bbs_write th {padding-left:16px;padding-right:16px;font-size:var(--title-20);font-weight:500;color:var(--black-color03);word-break:break-all;} table.bbs_write th label{font-size:inherit;color:inherit;font-weight:inherit;} table.bbs_write tr span, table.bbs_write tr input, table.bbs_write tr select {vertical-align:top;} table.bbs_write tr span, table.bbs_write tr input, table.bbs_write tr select, table.bbs_write tr textarea{color:var(--black-color06);font-weight:400;} table.bbs_write th .require_dot, table.bbs_write th .require_dot:before {line-height:initial;height:inherit;color:var(--point-color01);font-weight:400;display:inline-block;font-size:inherit;margin-left:1px;} table.bbs_write th .require_dot {vertical-align:super;} table.bbs_write th .require_dot:before {content:' *';font-size:var(--title-16);vertical-align:middle;} table.bbs_write td p {line-height:20px;padding:5px 0 0;font-size:inherit;display:inline-block;margin:0;vertical-align:top;} table.bbs_write td .td_txt{font-size:var(--title-16);color:var(--black-color07);font-weight:300;letter-spacing:-0.48px;vertical-align: top;word-break:keep-all;} table.bbs_write td input[type="text"], table.bbs_write td input[type="password"], table.bbs_write td input[type="number"], table.bbs_write td input[type="date"] {min-width:31%; } table.bbs_write td input[name="title"] {width:100%;} table.bbs_write td .radio_list{width:100%;height:50px;display: flex;flex-wrap:wrap;align-items: center;gap:20px;} table.bbs_write td .radio_list li label{font-size: var(--title-16);color: var(--black-color07);font-weight: 300;} table.bbs_write td .flex_box{display: flex;flex-wrap:wrap;align-items: center;gap:10px;font-size: var(--title-16);color: var(--black-color07);font-weight: 300;} table.bbs_write td input[name="zip"] {width:150px;min-width:70px;} table.bbs_write td input[name="address"], table.bbs_write td input[name="address2"] {width:55%;} table.bbs_write td textarea {min-width:100%;height:200px;} table.bbs_write td.td_mail select.mail_select {width:23%;margin-left:10px;} table.bbs_write td.td_mail select.mail_select.on{display: inline-block;} table.bbs_write td input[name="email_id"] {width:16%;min-width:120px;} table.bbs_write td input[name="email_domain"], table.bbs_write td select.mail_select {width:20%;min-width:140px;} table.bbs_write td input[name="email_domain"] {display:inline-block !important;} table.bbs_write .mail td .changeEmail{margin-top:10px;display:inline-block;font-size:var(--title-16);color:var(--black-color07);font-weight: 300;letter-spacing: -0.48px;} .sub_mypage #verifyEmail{display: none;} .sub_mypage #verifyEmail.on{display: inline-block;} .sub_mypage #codeHere{display: none;} .sub_mypage #codeHere.on{display:table-row;} table.bbs_write .input_file td, table.bbs_write .input_file td input {vertical-align:middle;} table.bbs_write td .file_name {display: inline-block;vertical-align: top;} table.bbs_write td .file_name a {display:inline-block;vertical-align:middle;line-height:23px;} table.bbs_write td .file_name .file_no {margin-left:5px;} table.bbs_write td.join_birth select, table.bbs_write td.join_birth input{width:10.5%;min-width:initial;} table.bbs_write td.join_birth select{margin:0 10px;} table.bbs_write .input_email input {display:inline-block !important;} table.bbs_write td #country{width:23%;} /* 캡챠 */ table.bbs_write tr td .captcha_wrap{border:1px solid var(--border-color01);padding:6px;box-sizing: border-box; display: flex; gap:10px;border-radius:5px;} table.bbs_write tr td #captcha_box {margin:0;font-size:0;} table.bbs_write tr td #captcha_box img{width:155px !important;height:36px !important;box-sizing:border-box;border-radius:5px;border:1px solid var(--border-color01);} table.bbs_write tr td #refreshCode{display: inline-flex; background: url('../images/sub/icon_reset.png') no-repeat center; font-size: 0; cursor: pointer; min-width:36px;width:36px;height:36px; border:1px solid var(--border-color01); box-sizing: border-box;border-radius:5px;} table.bbs_write tr td input#captcha{max-width: 300px; margin:0;} @media (max-width:1023px) { table.bbs_write td input[name="address"], table.bbs_write td input[name="address2"]{width:100%;} .sub_board .btn_sm{height:clamp(40px, 5vw, 50px);font-size:var(--title-16);} } @media (max-width:767px) { table.bbs_write col:nth-child(1){width:23%;} table.bbs_write col:nth-child(2){width:77%;} } @media (max-width:640px) { .bbs_tit + table.bbs_write{margin-top:15px;} table.bbs_write th, table.bbs_write td{padding:10px 10px;} table.bbs_write tr:first-of-type th, table.bbs_write tr:first-of-type td{padding-top:20px;} table.bbs_write tr:last-of-type th, table.bbs_write tr:last-of-type td{padding-bottom:20px;} table.bbs_write td input[type="text"], table.bbs_write td input[type="password"], table.bbs_write td input[type="number"], table.bbs_write td input[type="date"]{width:100%;} table.bbs_write td .radio_list{height:40px;gap:10px;} table.bbs_write td input#userid{width:calc(100% - 137px);} table.bbs_write td input[name="email_id"]{width:130px;} table.bbs_write td input[name="email_domain"]{width:calc(100% - 161px);} table.bbs_write td select.mail_select{width:calc(100% - 137px);} table.bbs_write td input#zip{width:calc(100% - 89px);} table.bbs_write tr td input#captcha{max-width:100%;} } @media (max-width:479px) { table.bbs_write col:nth-child(1){width:35%;} table.bbs_write col:nth-child(2){width:65%;} table.bbs_write th{font-size:var(--title-18);} table.bbs_write td .flex_box{gap:5px;} table.bbs_write td input#userid{width:100%;} table.bbs_write td input[name="email_id"]{width:calc(100% - 16px);min-width:initial;} table.bbs_write td input[name="email_domain"]{width:100%;min-width:initial;} table.bbs_write td select.mail_select{width:100%;min-width:initial;} table.bbs_write .email_chk, table.bbs_write .id_chk{width:100%;} table.bbs_write td input#zip{width:calc(100% - 69px);} table.bbs_write tr td #captcha_box{width:calc(100% - 46px);} table.bbs_write tr td #captcha_box img{width:100% !important;} } @media (max-width:370px) { table.bbs_write th, table.bbs_write td{padding:10px 5px;} } @media (max-width:310px) { table.bbs_write td select.mail_select{width:100%;} } /*회원가입 완료*/ .sub_ok {max-width:100%;box-sizing:border-box; margin:0 auto; border:20px solid var(--border-color03); outline:1px solid var(--border-color01);} .sub_ok .ok_box {width:100%;box-sizing:border-box; margin:0 auto; padding:6% 0;text-align:center; font-size:var(--title-20);font-weight:700; color:var(--black-color03);} .sub_ok .ok_box h3 {padding-bottom:1.4%; font-size:160%;font-weight:inherit;color:inherit;} .sub_ok .ok_box p {padding-bottom:2.8%; font-size:var(--title-16); color:var(--black-color07); line-height:26px; font-weight:500;} .sub_ok .ok_box p strong {color:var(--black-color02); font-weight:500;} .sub_ok .ok_box .login_bt a {display:inline-flex;align-items: center;justify-content: center; font-size:var(--title-15);color:var(--point-white);font-weight:500;width:120px; height:40px; background:var(--black-color02); border:1px solid var(--black-color02); text-align:center;box-sizing:border-box;border-radius:5px;} @media (max-width:1023px) { .sub_ok {border-width:16px;} .sub_ok .ok_box {padding:6% 12px;} .sub_ok .ok_box h4 {padding-bottom:4%;} } @media (max-width:860px) { .sub_ok .ok_box {padding:4% 12px;} .sub_ok .ok_box p {padding-bottom:3%;} } @media (max-width:767px) { .sub_ok {border-width:12px;} } @media (max-width:640px) { .sub_ok {border-width:8px;} .sub_ok .ok_box {padding:6% 12px;} .sub_ok .ok_box p {padding-bottom:6%;} } /*─────────────────────────────────────────────────────────── 마이페이지 ───────────────────────────────────────────────────────────*/ .bbs_title_box{display: flex;align-items: center;justify-content: space-between;font-size:var(--title-20);margin-bottom:20px;} .bbs_title_box .btn_box{display: flex;align-items: center;gap:5px;} @media (max-width:1023px) { .bbs_title_box{margin-bottom:clamp(10px, 2vw, 20px);} } /*─────────────────────────────────────────────────────────── 게시판 ───────────────────────────────────────────────────────────*/ /* 일반 */ .nodata{position: relative; text-align: center; font-size: var(--title-18); font-weight: 600; color: var(--black-color06); padding-block: 50px;} .bbs_table{position: relative; width: 100%; table-layout: fixed; font-size: var(--title-20); border-top: 1px solid var(--black-color01);} .bbs_table :where(th, td){line-height: 1.3;border-bottom: 1px solid var(--border-color01);padding: 26px 10px;text-align: center;letter-spacing: 0;} .bbs_table th{font-size:100%; font-weight: 500; color: var(--black-color01);} .bbs_table td{font-size:100%;font-weight: 400; color: var(--black-color08);font-family:var(--font-type03);} .bbs_table td.left{text-align: left; padding-inline: 20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break: break-all;color:var(--black-color03);font-weight:400;font-family:var(--font-type01);} .bbs_table td.status .st{display: inline-block;box-sizing:border-box;border-radius:var(--radius-04);font-size:var(--title-16);color:var(--black-color06);font-weight:500;padding:5px 10px;border:1px solid var(--border-color01);} .bbs_table td.status .st.reply{color:var(--point-white);background:var(--point-color01);border-color:var(--point-color01);} .bbs_table td.status .st.done{color:var(--point-white);background:var(--point-color02);border-color:var(--point-color02);} .bbs_table .for_t{display: none;} @media (max-width:1023px) { .bbs_table .notice .tag{padding:6px 15px 4px;} } @media (max-width:860px) { .bbs_table{display: block; } .bbs_table thead{display: none;} .bbs_table :where(tbody, tr, th, td){display: block; width: 100%; border:0; padding:0; text-align: left;} .bbs_table tr{padding:20px;display: flex;flex-wrap: wrap;gap: 10px 20px;border-bottom: 1px solid var(--border-color01);align-items: center;} .bbs_table td{width: auto;} .bbs_table td.left{width: 100%; padding: 0;} .bbs_table td.num{display: none;} .bbs_table .for_pc{display: none;} .bbs_table .for_t{display: inline-block;} } @media (max-width:479px) { .bbs_table tr{padding:15px;gap:5px 10px;} .bbs_table td.status .st{padding:3px 6px;} } /*공지사항*/ .sub_board .main_board{padding:0;background:none;} .sub_board .main_board .notice_box{width:100%;} .board_notice{box-sizing:border-box;border-top:2px solid var(--black-color00);} .sub_board .main_board .notice_box ul li{box-sizing:border-box;border-bottom:1px solid var(--border-color01);border-width:0 0 1px 0;} .sub_board .main_board .notice_box ul li a{padding:25px 30px;} .sub_board .main_board .notice_box ul li .txt:after{display: none;} .sub_board .main_board .notice_box ul li .txt{width:calc(100% - 260px);} .sub_board .main_board .notice_box ul li p{font-size:120%;} .sub_board .main_board .notice_box ul li .thumb{width:230px;overflow:hidden;} /* over */ @media (pointer: fine) and (hover: hover) { .sub_board .main_board .notice_box ul li:hover .thumb img{scale:1.05;} } @media (max-width:1023px) { .sub_board .main_board .notice_box ul li a{padding:clamp(20px, 2.5vw, 25px) clamp(15px, 2.5vw, 30px);} .sub_board .main_board .notice_box ul li .txt{width:calc(100% - clamp(140px, 20vw, 230px) - clamp(15px, 3vw, 30px));} .sub_board .main_board .notice_box ul li p{font-size:100%;} .sub_board .main_board .notice_box ul li .thumb{width:clamp(140px, 20vw, 230px);} } @media (max-width:479px) { .sub_board .main_board .notice_box ul li a{flex-direction: column-reverse;} .sub_board .main_board .notice_box ul li .txt{width:100%;} .sub_board .main_board .notice_box ul li .thumb{width:100%;} } /*view*/ .bbs_view .view_title{display: flex;flex-direction: column;gap:30px;box-sizing:border-box;padding-bottom:40px;border-bottom:1px solid var(--border-color01);font-size:var(--title-20);align-items: flex-start;} .bbs_view .view_title.notice_title{align-items: center;text-align: center;} .bbs_view .view_title .st{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:80px;height:36px;border-radius:36px;background:var(--main-point04);font-size:var(--title-18);color:var(--point-white);font-weight:600;flex-shrink:0;} .bbs_view .view_title .st2{background:var(--main-point01);} .bbs_view .view_title h3, .bbs_view .view_title h1{display: flex;align-items:flex-start;gap:20px;} .bbs_view .view_title h3 .notice, .bbs_view .view_title h1 .notice{display: inline-flex;align-items: center;justify-content: center;box-sizing:border-box;font-size:var(--title-16);color:var(--point-white);font-weight:600;background:var(--point-color01);padding:10px 21px 8px;border-radius:50px;line-height:1;flex-shrink:0;translate:0 14px;} .bbs_view .view_title h3 strong, .bbs_view .view_title h1 strong{font-size:200%;color:var(--black-color03);font-weight:600;line-height:1.4;} .bbs_view .view_title .name_box{display: flex;align-items: center;gap:40px;} .bbs_view .view_title .name_box dl{display: flex;align-items: center;gap:16px;position: relative;} .bbs_view .view_title .name_box dl + dl:before{width:1px;height:12px;content:"";background:var(--border-color01);display: inline-block;position: absolute;left:-20px;top:50%;translate:0 -50%;} .bbs_view .view_title .name_box dl dt, .bbs_view .view_title .name_box dl dd{font-size:95%;font-weight:500;font-family:var(--font-type03);} .bbs_view .view_title .name_box dl dt{color:var(--black-color06);} .bbs_view .view_title .name_box dl dd{color:var(--black-color08);} #wrap .bbs_view div.view_cont{border-bottom:1px solid var(--border-color01);padding:40px 0;} #wrap .sub_board .bbs_view .extra_editor_wrap{display: flex;box-sizing:border-box;border-radius:var(--radius-10);background:var(--gray-bg01);align-items: center;padding:27px 0;border:none;margin-top:40px;} #wrap .sub_board .bbs_view .extra_editor_wrap h4, #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont{display: block;font-size:var(--title-20);padding:0;} #wrap .sub_board .bbs_view .extra_editor_wrap h4{text-align: center;font-size:var(--title-19);color:var(--black-color03);font-weight:500;width:180px;flex-shrink:0;background:none;} #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont{box-sizing:border-box;padding:0 30px 0 60px;position: relative;} #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont:before{width:1px;height:12px;content:"";background:var(--border-color01);display: inline-block;position: absolute;left:0;top:50%;translate:0 -50%;} #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont a{font-size:var(--title-19);color:var(--black-color06) !important;font-weight:400;} #wrap .bbs_answer{margin-top:100px;box-sizing:border-box;} #wrap .bbs_answer .view_title{padding-bottom:20px;} #wrap .bbs_answer .view_title h3 strong{font-size:160%;} .notice_view img{text-align: center;} @media (max-width:1023px) { #wrap .bbs_answer{margin-top:clamp(60px, 10vw, 100px);} .bbs_view .view_title .st{height:clamp(30px, 3.6vw, 36px);width:clamp(64px, 8vw, 80px);} } @media (max-width:860px) { .bbs_view .view_title {gap:15px;padding-bottom:25px;} .bbs_view .view_title h3, .bbs_view .view_title h1{gap:12px;} .bbs_view .view_title h3 .notice, .bbs_view .view_title h1 .notice{padding:8px 16px 8px;translate:0 11px;} .bbs_view .view_title h3 strong, .bbs_view .view_title h1 strong{font-size:170%;} .bbs_view .view_title .name_box{gap:20px;} .bbs_view .view_title .name_box dl{gap:10px;} .bbs_view .view_title .name_box dl + dl:before{left:-10px;} #wrap .sub_board .bbs_view .extra_editor_wrap{padding:20px 0;margin-top:30px;} #wrap .sub_board .bbs_view .extra_editor_wrap h4{width:120px;} #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont{padding:0 20px 0 30px;} #wrap .bbs_answer .view_title h3 strong{font-size:130%;} } @media (max-width:640px) { .bbs_view .view_title h3 .notice, .bbs_view .view_title h1 .notice{translate:0 9px;} } @media (max-width:479px) { .bbs_view .view_title h3, .bbs_view .view_title h1{flex-direction: column;align-items: center;} .bbs_view .view_title h3 strong, .bbs_view .view_title h1 strong{font-size:150%;} .bbs_view .view_title h3 .notice, .bbs_view .view_title h1 .notice{padding:7px 13px;} .bbs_view .view_title .name_box{flex-direction: column;gap:8px;} .bbs_view .view_title .name_box dl + dl:before{display: none;} #wrap .bbs_view div.view_cont{padding:20px 0;} #wrap .sub_board .bbs_view .extra_editor_wrap{padding:15px 0;margin-top:20px;} #wrap .sub_board .bbs_view .extra_editor_wrap h4{width:90px;} #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont{padding:0 20px;} } /*ok*/ .write_ok_wrap{text-align: center;padding-top:clamp(50px, 18vw, 180px);} .write_ok_wrap .write_ok{display: flex;flex-direction: column;gap:clamp(10px, 2vw, 20px);font-size:var(--title-20);margin-bottom:clamp(30px, 5vw, 50px);} .write_ok_wrap .write_ok span{display: inline-flex;box-sizing:border-box;border-radius:100%;background:var(--point-color04);display: flex;align-items: center;justify-content: center;width:clamp(40px, 6vw, 60px);aspect-ratio:auto 1;margin:0 auto;} .write_ok_wrap .write_ok span img{max-width:clamp(15px, 2.6vw, 26px);} .write_ok_wrap .write_ok h3, .write_ok_wrap .write_ok h1{font-size:150%;color:var(--black-color03);font-weight:500;line-height:1.66;} .write_ok_wrap .write_ok p{font-size:110%;color:var(--black-color03);font-weight:400;line-height:1.4;} /*─────────────────────────────────────────────────────────── 포트폴리오 ───────────────────────────────────────────────────────────*/ .sub_tab_box{ margin-bottom:clamp(30px, 6vw, 60px);display:grid;gap:clamp(15px, 3vw, 40px);padding-top:clamp(50px, 8vw, 80px);} .sub_board .sub_tab_box{padding-top:0;} .sub_tab_box .cate_tab{display: flex; justify-content: center; gap: 10px;flex-wrap: wrap;} .sub_tab_box .cate_tab a{padding:9px 28px; border: 1px solid var(--border-color03); border-radius: 50px;color:var(--black-color00);font-size:var(--title-17);font-weight:400; transition: all 0.2s; background:var(--point-white);min-width:120px;text-align: center;display: inline-block;cursor:pointer;} .sub_tab_box .cate_tab a.active {background:var(--black-color00);color:var(--point-white);border-color:var(--black-color00); font-weight:600;} #wrap .sub_tab_box .cate_tab a.link_award{color:var(--point-color21);} .home_cate{display: flex;flex-wrap:wrap;gap:clamp(6px, 1vw, 10px) clamp(10px, 2vw, 40px);justify-content: center;} .home_cate li a{display: inline-flex;font-size:var(--title-17);color:var(--black-color05);font-weight:400;align-items: center;} .home_cate li.on a{color:var(--point-color01);font-weight:600;} .sub_portfolio .main_portfolio{padding-top:0;display: none;margin-bottom:clamp(60px, 11.5vw, 115px);} .sub_portfolio .main_portfolio.portfolio_all{display: block;} .sub_portfolio .main_portfolio .portfolio_list{margin-top:0;} .sub_portfolio .main_portfolio .portfolio_list:before{display: none;} .sub_portfolio .p-list{display:grid;gap:clamp(40px, 5vw, 75px) clamp(15px, 3vw, 32px);grid-template-columns:repeat(3, 1fr);} .sub_portfolio .p-list li{box-sizing: border-box;position: relative;text-align: center;} .sub_portfolio .p-list .p-img a{display: block;width:100%;aspect-ratio:auto 1;box-sizing:border-box;overflow:hidden;border-radius:var(--radius-06);} .sub_portfolio .p-list .p-img img{width:100%;height:100%;object-fit:cover;} .sub_portfolio .p-list .p-info{font-size:var(--title-20);margin-top:clamp(10px, 1.2vw, 24px);} .sub_portfolio .p-list .p-title{font-size:110%;color:var(--black-color00);font-weight: 400;font-family:var(--font-type03);letter-spacing: -0.02em;} .sub_portfolio .p-list .p-tags-wrap{margin-top:clamp(8px, 1.2vw, 15px);display: flex;align-items: center;justify-content: center;gap: 2px 8px;flex-wrap: wrap;} .sub_portfolio .p-list .p-tags-wrap a{display: inline-block;font-size:75%;color:var(--black-color05);font-weight: 400;font-family:var(--font-type03);} .sub_portfolio .p-list .p-btns{display: flex;flex-wrap: wrap;margin-top:clamp(20px, 3vw, 30px);align-items: center;justify-content: center;gap: 8px;font-size:var(--title-20);} .sub_portfolio .p-list .p-btns a{display: inline-flex;width: calc(50% - 4px);height:clamp(40px, 4.5vw, 48px);box-sizing: border-box;align-items: center;justify-content: center;border-radius:var(--radius-04);border: 1px solid var(--border-color02);font-size:75%;color:var(--black-color03);font-weight: 400;letter-spacing: -0.02em;} #contentsArw{display: flex;align-items: center;justify-content: center;margin-top:clamp(50px, 8vw, 80px);} #contentsArw:before{width:clamp(12px, 2vw, 20px);aspect-ratio:auto 1;content:"";border:2px solid var(--black-color08);border-width:2px 2px 0 0;rotate:135deg;display: inline-block;} /*maincase*/ .maincase .portfolio_list{display:grid;grid: auto / repeat(3, 1fr);gap:clamp(20px, 3.3vw, 36px) clamp(15px, 3vw, 40px);margin-top:clamp(50px, 8vw, 80px);} .maincase .portfolio_list li{position: relative;} .maincase .portfolio_list li:nth-child(1) {order: 6;} .maincase .portfolio_list li:nth-child(2) {order: 2;} .maincase .portfolio_list li:nth-child(3) {order: 9;} .maincase .portfolio_list li:nth-child(4) {order: 8;} .maincase .portfolio_list li:nth-child(5) {order: 7;} .maincase .portfolio_list li:nth-child(6) {order: 5;} .maincase .portfolio_list li:nth-child(7) {order: 3;} .maincase .portfolio_list li:nth-child(8) {order: 10;} .maincase .portfolio_list li:nth-child(9) {order: 4;} .maincase .portfolio_list li:nth-child(10) {order: 1;} .maincase .portfolio_list li:nth-child(11) {order: 11;} .maincase .portfolio_list li:nth-child(12) {order: 12;} .maincase .portfolio_list .thumb{width:100%;aspect-ratio:auto 1.2;overflow:hidden;} .maincase .portfolio_list .thumb > img{width:100%;height:100%;object-fit:cover;} .maincase .portfolio_list .award{width:84px;height:100px;position: absolute;top:0;right:20px;background:var(--point-white);text-align: center;box-sizing:border-box;padding:12px 0 10px;} .maincase .portfolio_list .award p{font-size:var(--title-18);color:var(--black-color00);font-weight:700;line-height:1.4;} .maincase .portfolio_list .txt{position: absolute;box-sizing:border-box;padding:clamp(20px, 2vw, 30px) clamp(15px, 2vw, 30px);left:0;bottom:0;display: flex;flex-direction: column;gap:4px;font-size:var(--title-20);width:100%;} .maincase .portfolio_list .txt strong{font-size:150%;color:var(--point-white);font-weight:700;line-height:1.4;} .maincase .portfolio_list .txt span{font-size:90%;color:var(--point-white);font-weight:400;line-height:1.4;} /*over*/ @media (pointer: fine) and (hover: hover) { .sub_tab_box .cate_tab a:hover{background:var(--black-color00);color:var(--point-white);border-color:var(--black-color00); font-weight:600;} #wrap .sub_tab_box .cate_tab a.link_award:hover{color:var(--point-white);background:var(--point-color21);border-color:var(--point-color21);} .home_cate li:not(.on):hover a{color:var(--point-color01);font-weight:600;} } @media (max-width:1023px) { .maincase .portfolio_list .award{width:8vw;right:10px;height:auto;padding:5px 0 5px;} .maincase .portfolio_list .award p{font-size:var(--title-16)} } @media (max-width:860px) { .maincase .portfolio_list{grid: auto / repeat(2, 1fr);} .maincase .portfolio_list .txt strong{font-size:120%;} .maincase .portfolio_list .txt span{font-size:80%;} } @media (max-width:767px) { .sub_portfolio .p-list{grid-template-columns:repeat(2, 1fr);} } @media (max-width:640px) { .maincase .portfolio_list .award{width:58px;} } @media (max-width:479px) { .maincase .portfolio_list{grid: auto / repeat(1, 1fr);} .sub_portfolio .p-list .p-btns a{width:100%;} } .spinner { width: 60px; height: 60px; margin: 0 auto; border: 8px solid #d71419; border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /*view*/ .portfolio_view_title{text-align: center;margin-block:60px;display:grid;gap:40px;font-size:var(--title-20);} .portfolio_view_title h2, .portfolio_view_title h1{font-size:200%;color:var(--black-color00);font-weight:600;} .sub_portfolio_title{display: flex;align-items: center;gap:60px;justify-content: center;} .sub_portfolio_title dl{display: flex;align-items: center;gap:20px;position: relative;} .sub_portfolio_title dl + dl:before{width:1px;height:14px;content:"";background:var(--border-color02);position: absolute;left:-30px;top:50%;translate:0 -50%;} .sub_portfolio_title dl dt{font-size:75%;color:var(--black-color00);font-weight:500;text-transform:uppercase;font-family:var(--font-type04);} .sub_portfolio_title dl dd{font-size:80%;color:var(--black-color03);font-weight:400;} .portfolio_view_title .des{font-size:100%;color:var(--black-color03);font-weight:400;margin-top:10px;} .portfolio_view_title a{display: inline-flex;box-sizing: border-box;align-items: center;justify-content: space-between;width: 200px;height: 56px;border: 1px solid var(--black-color00);border-radius:var(--radius-04);position: relative;padding: 0 20px;font-size:var(--title-17);color:var(--black-color00);font-weight:400;margin:0 auto;transition:all 0.3s;} .portfolio_view_title a span{font-size:inherit;color:inherit;font-weight:inherit;} .portfolio_view_title a:after{width: 6px;aspect-ratio:auto 1;content: "";border: 1px solid var(--black-color00); border-width: 1px 1px 0 0;transform: rotate(45deg);display: inline-block;transition:all 0.3s;} .portfolio_view_content{position: relative;padding-bottom:140px;display:grid;gap:clamp(30px, 5vw, 50px);} .portfolio_view_content:before{width: 100%;height: 89%;background:var(--gray-bg01);content: "";position: absolute;bottom:0;left: 0;} .portfolio_view_content .main_w_custom{max-width:1000px;text-align: center;} .portfolio_view_content .img_box{padding: 20px;background:var(--point-white); box-sizing: border-box;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);border-radius:var(--radius-10);display: flex;flex-direction: column;align-items: center;} .portfolio_view_content .img_box img{width:100%;} .portfolio_des{display: flex;flex-direction: column;gap:clamp(10px, 1.2vw, 15px);background:var(--point-white);border-radius:var(--radius-10);padding:clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);font-size:var(--title-20);} .portfolio_des :is(dt, dd){color:var(--black-color03);font-weight:400;text-align: left;} .portfolio_des dt{font-size:150%;font-weight:600;display: flex;align-items: center;gap:clamp(6px, 0.8vw, 10px);} .portfolio_des dt:before{width:clamp(3px, 0.3vw, 4px);height:clamp(12px, 1.5vw, 18px);content:"";background:var(--point-color01);display: inline-block;flex-shrink:0;} .portfolio_des dd{color:var(--black-color05);font-size:100%;line-height:1.6;} .indus_box{margin-top:clamp(50px, 8vw, 80px);} .indus_swiper{overflow:hidden;} .indus_box .swiper-slide{width:calc(25% - 22.5px);} .indus_box .swiper-slide img{width:100%;aspect-ratio:auto 1;} .indus_box .swiper-slide p{text-align: center;font-size:var(--title-20);color:var(--black-color03);font-weight:500;margin-top:clamp(10px, 2vw, 20px);} .indus_box .swipe_arw{width:clamp(40px, 5vw, 50px);aspect-ratio:auto 1;border-radius:100%;background:var(--point-white);position: absolute;display: flex;align-items: center;justify-content: center;top:35%;border:1px solid var(--border-color01);transition:all 0.3s;} .indus_box .swipe_arw:before{width:20%;aspect-ratio: auto 1;content:"";border:2px solid var(--black-color08);border-width:2px 2px 0 0;rotate:-135deg;translate:3px;transition:all 0.3s;} .indus_box .prev{left:-75px;} .indus_box .next{scale:-1 -1;right:-75px;} #wrap .portfolio_inq .w_custom{padding-top:clamp(50px, 10vw, 100px);} #wrap .portfolio_inq h3{font-size:var(--title-20);} #wrap .portfolio_inq h3 strong{font-size:200%;} #wrap .portfolio_inq h3 span{font-size:130%;} /*over*/ @media (pointer: fine) and (hover: hover) { .portfolio_view_title a:hover{background:var(--black-color00);color:var(--point-white)} .portfolio_view_title a:hover:after{border-color:var(--point-white);} .indus_box .swipe_arw:hover{border-color:var(--point-color01);background:var(--point-color01);} .indus_box .swipe_arw:hover:before{border-color:var(--point-white);} } @media (max-width:1500px) { .indus_box{padding-inline:50px;} .indus_box .prev{left:-15px;} .indus_box .next{right:-15px;} } @media (max-width:1023px) { .portfolio_view_title{margin-block:clamp(30px, 6vw, 60px);gap:clamp(15px, 3vw, 40px);} .sub_portfolio_title{gap:clamp(20px, 5vw, 60px);} .sub_portfolio_title dl{gap:clamp(10px, 2vw, 20px);} .sub_portfolio_title dl + dl:before{height:clamp(10px, 1.4vw, 14px);left:calc(clamp(20px, 5vw, 60px) / 2 * -1)} .portfolio_view_title a{width:clamp(140px, 20vw, 200px);height:clamp(46px, 5vw, 56px);padding-inline:clamp(14px, 2vw, 20px);} .portfolio_view_content{padding-bottom:clamp(70px, 14vw, 140px);} .portfolio_view_content .img_box{padding:clamp(10px, 2vw, 20px);} .indus_box .swiper-slide{width:calc(100% / 3 - 13.5px);} } @media (max-width:640px) { .sub_portfolio_title{flex-direction: column;gap:10px;} .sub_portfolio_title dl + dl:before{display: none;} .indus_box{padding:0;} .indus_swiper{overflow:visible;} .indus_box .swipe_arw{display: none;} .indus_box .swiper-slide{width:40%;} } @media (max-width:479px) { .indus_box .swiper-slide{width:60%;} } /*─────────────────────────────────────────────────────────── 대표포트폴리오 ───────────────────────────────────────────────────────────*/ .maincase_visual{position: relative;height:480px;display: flex;align-items: flex-end;} .maincase_visual .img{width:100%;height:100%;position: absolute;top:0;left:0;} .maincase_visual .img img{width:100%;height:100%;object-fit:cover;} .maincase_visual .title{position: relative;font-size:var(--title-20);color:var(--point-white);display: flex;flex-direction: column;gap:5px;z-index:5;padding-bottom:60px;} .maincase_visual .title h2, .maincase_visual .title h1{font-size:400%;color:inherit;font-weight:700;line-height:1.4;max-width:calc(40% - 30px);font-family:var(--font-type06);} .maincase_visual .title p{margin-top:14px;font-size:130%;font-weight:400;} .maincase_visual .title span{font-size:90%;font-weight:300;} .maincase_visual .title a{display: inline-flex;box-sizing: border-box;align-items: center;justify-content: space-between;width: 200px;height: 56px;border: 1px solid var(--point-white);border-radius:var(--radius-04);position: relative;padding: 0 20px;margin-top: 30px;font-size:var(--title-17);color:var(--point-white);font-weight:400;transition:all 0.3s;} .maincase_visual .title a span{font-size:inherit;color:inherit;font-weight:inherit;} .maincase_visual .title a:after{width: 6px;aspect-ratio:auto 1;content: "";border: 1px solid var(--point-white); border-width: 1px 1px 0 0;transform: rotate(45deg);display: inline-block;transition:all 0.3s;} .overview_wrap{display: flex;align-items:flex-end;gap:76px;margin-top:-18%;} .overview_wrap .txt{font-size:var(--title-20);width:calc(40% - 76px);} .overview_wrap .txt h3{font-size:200%;color:var(--black-color01);font-weight:600;line-height:1.4;font-family:var(--font-type06);} .overview_wrap .txt p{margin-top:clamp(10px, 2vw, 20px);font-size:80%;color:var(--black-color08);font-weight:400;line-height:1.7;} .overview_wrap .img{width:60%;flex-shrink:0} .maincase_content{display:grid;gap:clamp(40px, 9vw, 90px);margin-top:clamp(40px, 9vw, 90px);} .maincase_content > section{position: relative;box-sizing:border-box;} .maincase_content .project_info ul{display: flex;counter-reset:projectInfoCnt;gap:10px;} .maincase_content .project_info ul li{text-align:left;display: flex;flex-direction:column;gap:15px;counter-increment:projectInfoCnt;font-size:var(--title-20);width:100%;} .maincase_content .project_info ul li:before{content:counter(projectInfoCnt, decimal-leading-zero);font-size:80%;color:var(--black-color01);font-weight:700;letter-spacing:-0.02em;width:60px;aspect-ratio:auto 1;box-sizing:border-box;border-radius:100%;border:1px solid var(--main-point05);display: flex;align-items: center;justify-content: center;} .maincase_content .project_info ul li .title{font-size:120%;color:var(--black-color01);font-weight:600;letter-spacing:-0.02em;} .maincase_content .project_info ul li .subtitle{font-size:90%;color:var(--black-color08);font-weight:400;line-height:1.4;} .maincase_content .showcase_info{margin-top:clamp(15px, 3vw, 30px);text-align: center;} .maincase_content .showcase_info .txt{font-size:var(--title-20);text-align: center;display: flex;flex-direction: column;gap:30px;margin-top:-7%;} .maincase_content .showcase_info .txt h3{font-size:250%;color:var(--black-color01);font-style: italic;font-family:var(--font-type07);} .maincase_content .showcase_info .txt h4{font-size:200%;color:var(--black-color01);font-weight:700;} .maincase_content .showcase_info .txt p{font-size:90%;color:var(--black-color06);font-weight:400;line-height:1.8;} .maincase_content .add_type{margin-top:clamp(15px, 3vw, 30px);display: grid;gap:120px;} .maincase_content .add_type .add_type_d{font-size:var(--title-18);color:var(--black-color06);font-weight:400;line-height:1.8;text-align: center;} .maincase_content .add_type .flex_box{display: flex;align-items: center;gap:40px;flex-wrap:wrap;} .maincase_content .add_type .flex_box .image-box{width:50%;flex-shrink:0;} .maincase_content .add_type .flex_box .text-box{width:calc(50% - 40px);box-sizing:border-box;font-size:var(--title-20);display: flex;flex-direction: column;gap:30px;} .maincase_content .add_type .flex_box .text-box .title{font-size:200%;color:var(--black-color01);font-weight:700;letter-spacing:-0.02em;line-height:1.35;} .maincase_content .add_type .flex_box .text-box .description{font-size:90%;color:var(--black-color06);font-weight:400;line-height:1.7;} /* .maincase_faq{margin-top:clamp(44px, 10vw, 110px);} */ .maincase_faq .sub_title{border-top:1px solid var(--border-color02);} .faq_list{display: flex;flex-direction: column;gap:15px;} .faq_list li{box-sizing:border-box;border:1px solid var(--border-color01);font-size:var(--title-20);} .faq_list li button{font-size:100%;color:var(--black-color03);font-weight:600;width:100%;text-align:left;padding-block:20px;position: relative;} .faq_list li button{&::before, &::after{width:clamp(16px, 2vw, 20px);height:2px;content:"";position: absolute;top:50%;right:clamp(15px, 2vw, 20px);translate:0 -50%;background:var(--black-color00);}} .faq_list li button:after{rotate:90deg;} .faq_list li.on button:after{display: none;} .faq_list .faq_answer{padding-bottom:20px;display: none;box-sizing:border-box;} .faq_list .faq_answer p{font-size:80%;color:var(--black-color05);font-weight:400;line-height:1.5;} .faq_list li button, .faq_list .faq_answer{padding-inline:clamp(15px, 2vw, 20px) clamp(35px, 5vw, 50px)} /*over*/ @media (pointer: fine) and (hover: hover) { .maincase_visual .title a:hover{background:var(--point-white);color:var(--black-color00)} .maincase_visual .title a:hover:after{border-color:var(--black-color00);} } @media (max-width:1400px) { .maincase_visual{height:clamp(250px, 33vw, 480px);} .maincase_visual .title h2, .maincase_visual .title h1{font-size:clamp(250%, 5vw, 400%);} .overview_wrap{margin-top:-14%;gap:30px;} .overview_wrap .txt{width:calc(45% - 30px);} .overview_wrap .img{width:55%;} } @media (max-width:1200px) { .overview_wrap{margin-top:-8%;} } @media (max-width:1023px) { .maincase_visual .title{padding-bottom:6%;} .maincase_visual .title h2, .maincase_visual .title h1{max-width:100%;} .maincase_visual .title a{width:clamp(140px, 20vw, 200px);height:clamp(46px, 5vw, 56px);padding-inline:clamp(14px, 2vw, 20px);margin-top: clamp(10px, 2vw, 30px);} .overview_wrap{margin-top:clamp(40px, 7vw, 80px);align-items: flex-start;} .maincase_content .project_info ul li:before{width:clamp(46px, 6vw, 60px);} .maincase_content .showcase_info .txt{gap:clamp(10px, 2vw, 30px);} .maincase_content .showcase_info .txt h3{font-size:clamp(180%, 4.5vw, 250%);} .maincase_content .showcase_info .txt h4{font-size:clamp(150%, 3.5vw, 200%);} .maincase_content .add_type{gap:clamp(60px, 10vw, 120px);} .maincase_content .add_type .flex_box .text-box{gap:15px;} .maincase_content .add_type .flex_box .text-box .title{font-size:clamp(150%, 3.5vw, 200%);} } @media (max-width:860px) { .overview_wrap{flex-direction: column;} .overview_wrap .txt, .overview_wrap .img{width:100%;} .maincase_content .project_info ul{gap:30px 15px;flex-wrap:wrap;justify-content: center;} .maincase_content .project_info ul li{width:calc(100% / 3 - 10px);gap:8px;align-items: center;text-align: center;} } @media (max-width:767px) { .maincase_content .add_type .flex_box{gap:30px;} .maincase_content .add_type .flex_box .image-box, .maincase_content .add_type .flex_box .text-box{width:100%;} .maincase_content .add_type .flex_box.add_type_b{flex-direction: column-reverse;} .maincase_content .add_type .flex_box.add_type_c{flex-direction: column;} } @media (max-width:640px) { .maincase_visual{height:auto;} .maincase_visual .title{padding:50px 0 30px;} .maincase_visual .title p{margin-top:8px;} .overview_wrap .txt h3{font-size:150%;} } /*─────────────────────────────────────────────────────────── 개인정보처리방침 ───────────────────────────────────────────────────────────*/ .sub_agree .agree_content{white-space:pre-line;font-size:var(--title-16);color:var(--black-color03);font-weight:400;line-height:1.5;} /*─────────────────────────────────────────────────────────── 부가서비스 - AI ───────────────────────────────────────────────────────────*/ .sub_ai img{max-width:100%; max-height:100%;} .sub_ai .sub_visual{height:auto;padding-block: 94px;} .sub_ai .sub_visual .visual_title{position:relative;transform: none;inset: auto;display: grid;gap: 18px;} .sub_ai .sub_visual .visual_title h2, .sub_ai .sub_visual .visual_title h1{font-family:var(--font-type03);} .sub_ai .sub_visual .visual_title p{font-size:100%;font-weight: 300;line-height: 1.6;letter-spacing: -0.03em;} .ai_visual .visual_title .btn_box{display:flex;justify-content:center;flex-wrap: wrap;gap: 15px;margin-top: 32px;} .ai_visual .visual_title .btn_box :where(button, a){display:flex;align-items: center;justify-content: center;text-align: center;font-size:120%;font-weight: 700;color: var(--point-color02);line-height: 1.25;background: var(--point-white);min-width: 280px;padding: 25px 25px;box-sizing: border-box; transition:all 0.4s;} .ai_visual .visual_title .btn_box :where(button, a):hover{background:var(--point-color02); color:var(--point-white);} @media (max-width:1023px) { .sub_ai .sub_visual{padding-block:clamp(50px, 9.4vw, 94px);} .ai_visual .visual_title .btn_box{margin-top:clamp(10px, 3vw, 32px);} .ai_visual .visual_title .btn_box :where(button, a){min-width:200px;padding:clamp(15px, 2.5vw, 25px);} } .shop_ai{position:relative;} .shop_ai .main_title{display:grid;gap: 15px;} .shop_ai .main_title.hd{margin-bottom:60px;} .shop_ai .main_title.hdM{margin-bottom:50px;} .shop_ai .main_title.pdT{padding-top:140px;} .shop_ai .main_title :where(h3, h5, p){letter-spacing: -0.05em;} .shop_ai .main_title h3{color:var(--black-color00);} .shop_ai .main_title p{line-height: 1.82;} .shop_ai .main_title p + h5{margin-top: 24px;} .shop_ai .main_title h5{font-size:150%;font-weight:500;color:var(--black-color01);line-height:1.34;} .shop_ai .main_title h5 em{font-weight:500; color:var(--point-color02);} @media (max-width:1023px) { .shop_ai .main_title.hd{margin-bottom:clamp(30px, 6vw, 60px);} .shop_ai .main_title.hdM{margin-bottom:clamp(25px, 5vw, 50px);} .shop_ai .main_title.pdT{padding-top:clamp(70px, 14vw, 140px);} .shop_ai .main_title.hd{margin-bottom:clamp(20px, 6vw, 60px);} } .main_title.hdLine:before{position:absolute; content:''; width:1px; height:140px; top:-60px; left:50%; background:var(--black-color03);} .main_title.hdLine h3:before{display:none;} .bl_bg{position:relative; margin-top:140px; padding-block:140px; background:var(--point-color07);} .bl_bg:before{position:absolute;content:'';width:300px;aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color02);top: 0;right: 0;translate: 35% -36%;} .bl_bg.opposite{clip-path: inset(-150% 0 0 0);} .bl_bg.opposite:before{width:400px;right:auto;left:0;translate: -37% -36%;} .bl_bg.opposite:after{position:absolute;content:'';width:460px;aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color02);opacity:0.05;bottom: 0;right: 0;translate: 20% 30%;} .bl_bg.beDn:before{display: none;} .bl_bg.mgDn{margin:0;} @media (max-width:1400px) { .bl_bg.opposite:before{width:clamp(80px, 19vw, 400px);} .bl_bg.opposite:after{width:clamp(150px, 20vw, 460px);} } @media (max-width:1023px) { .main_title.hdLine:before{height:clamp(60px, 14vw, 140px);top:clamp(-60px, -6vw, -20px);} .bl_bg{margin-top:clamp(70px, 14vw, 140px);padding-block:clamp(70px, 14vw, 140px);} } .beforeAfter{position:relative;display:grid;grid-template: auto / repeat(2, 1fr);gap: 120px;} .beforeAfter:before{position:absolute;content:'';width:160px;aspect-ratio:auto 1;border-radius: 100%;background:var(--point-color23);top: -10px;left: 0;translate: -50% -50%;} .beforeAfter > li{position:relative;text-align: center;} .beforeAfter .be_title{position: relative;background:var(--black-color08);padding: 11px 15px;border-radius: 10px 10px 0 0;font-size:var(--title-20);} .beforeAfter .be_title h5{font-size:160%;font-weight: 400;color: var(--point-white);font-family:var(--font-type05);} .beforeAfter .exp_list{position: relative;padding: 20px;display: grid;gap: 10px;background: var(--point-white);border: 1px solid var(--border-color01);border-top: 0;border-radius: 0 0 10px 10px;overflow: hidden;} .beforeAfter .exp_list > li{font-size:var(--title-20);font-weight: 400;color:var(--black-color03);line-height: 1.4;background:var(--graybg01);border-radius:var(--radius-10);padding: 16px 15px;letter-spacing: -0.05em;} .beforeAfter > li:nth-child(2){filter: drop-shadow(7px 0 15px rgba(0, 0, 0, 0.18));} .beforeAfter > li:nth-child(2):before{position:absolute;content:'';width:71px;aspect-ratio:auto 0.865;background: linear-gradient(269deg, var(--border-color02) 23.55%, var(--point-white)0 91.83%);clip-path: polygon(0% 16%, 48% 16%, 48% 0, 100% 50%, 48% 100%, 48% 84%, 0% 84%);top: 50%;right: calc(100% + 52px);translate: 50% -50%;} .beforeAfter > li:nth-child(2) .be_title{background:var(--point-color02);} .beforeAfter > li:nth-child(2) .exp_list{border-color:var(--point-color02);} .beforeAfter > li:nth-child(2) .exp_list > li{font-weight:600; color:var(--point-color02); background:var(--point-color07);} .expChk{display:flex; align-items:center; gap:60px;} .expChk .thumb{width: 48.5%;flex-shrink: 0;border-radius:var(--radius-20);overflow: hidden;font-size:0;} .expChk .cont{width:100%;display: flex;flex-direction: column;gap: 40px;} .expChk .cont .desc{display:grid;gap: 14px;font-size:var(--title-20);} .expChk .cont .desc dt{font-size:120%;font-weight: 600;color: var(--point-color02);line-height: 1.3;letter-spacing: -0.03em;display: flex;align-items: baseline;gap: 10px;} .expChk .cont .desc dt:before{display:inline-flex;content:'';width:30px;aspect-ratio:auto 1;border-radius:100%;background:var(--point-color02) url('../images/sub/chk_icon.svg') no-repeat center;translate: 0 5px;} .expChk .cont .desc dd{font-size:85%;font-weight: 400;color:var(--black-color03);line-height: 1.7;letter-spacing: -0.05em;} @media (max-width:1023px) { .expChk{gap:clamp(30px, 6vw, 60px);} .expChk .cont{gap:clamp(20px, 4vw, 40px);} } @media (max-width:640px) { .expChk{flex-direction: column;} .expChk .thumb{width:100%;} .expChk .cont .desc{gap:8px;} .expChk .cont .desc dt:before{width:24px;background-size:auto 9px;} } .vecDesc{display:grid; grid-template:auto / repeat(4, 1fr); gap:32px;position: relative;z-index:3;} .vecDesc > li{position:relative;border-radius:var(--radius-10);background: var(--point-white);box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10);text-align:center;padding: 40px;box-sizing: border-box;display: flex;flex-direction: column;gap: 22px;} .vecDesc .info{display:grid;gap: 22px;font-size:var(--title-20);} .vecDesc .info dt{display:flex;align-items: center;justify-content: center;height: 60px;letter-spacing: -0.03em;} .vecDesc .info dd{font-size:200%;font-weight:600;color:var(--point-color02);line-height:1.1;font-family:var(--font-type05);} .vecDesc .exp{display:grid;gap: 10px;font-size:var(--title-20);} .vecDesc .exp dt{font-size:100%; font-weight:500; color:var(--black-color03); line-height:1.3;} .vecDesc .exp dd{font-size:80%;font-weight:400;color:var(--black-color03);line-height:1.625;letter-spacing: -0.03em;} @media (max-width:1023px) { .vecDesc{grid-template:auto / repeat(2, 1fr);gap:clamp(20px, 3vw, 32px);} .vecDesc > li{padding:clamp(20px, 4vw, 40px);} .vecDesc .info{gap:clamp(15px, 2vw, 22px);} .vecDesc .info dt{height:clamp(45px, 6vw, 60px)} } @media (max-width:479px) { .vecDesc{grid-template:auto / repeat(1, 1fr);} } .aiproSwiper{position:relative;z-index: 2;} .aiproSwiper .swiper-slide{position:relative; height:auto; border-radius:var(--radius-20); overflow:hidden; box-shadow:0 0 30px rgba(0, 0, 0, 0.10); background:var(--point-white); display:flex;} .aiproSwiper .thumb{width: 50%;aspect-ratio:auto 1.823;overflow:hidden;flex-shrink: 0;} .aiproSwiper .thumb img{width:100%; height:100%; object-fit:cover;} .aiproSwiper .cont{padding: 70px;display: grid; align-items:start; gap: 13px;width: 100%;} .aiproSwiper .item_title{display:grid; gap: 11px;font-size:var(--title-20);} .aiproSwiper .item_title :where(h4, h6, p){letter-spacing: -0.05em;} .aiproSwiper .item_title h4{font-size:120%; font-weight:500; color:var(--black-color01); line-height:1.3; } .aiproSwiper .item_title h4 em{font-weight:600; color:var(--point-color02);} .aiproSwiper .item_title h6{font-size:85%; font-weight:400; color:var(--black-color03); line-height:1.7;} .aiproSwiper .item_title p{font-size:80%; font-weight:400; color:var(--black-color06); line-height:1.7;} .aiproSwiper .tag_list{display:flex; flex-wrap:wrap; gap:10px;font-size:var(--title-20);} .aiproSwiper .tag_list > li{font-size:80%;font-weight:400;color:var(--black-color03);line-height:1.4;background:var(--point-color04);border-radius: 50px;padding: 5px 14px;letter-spacing: -0.05em;display: flex;align-items: center;justify-content: center;text-align: center;} .aiproSwiper .desc{display:grid;gap:20px;padding-top: 18px;font-size:var(--title-20);} .aiproSwiper .desc dt{font-size:90%;font-weight:600;color:var(--black-color03);line-height:1.3;letter-spacing: -0.05em;} .aiproSwiper .desc dd{font-size:80%;font-weight:400;color:var(--black-color03);line-height:1.3;display:grid;gap:12px;letter-spacing: -0.05em; padding-left:3px;} #wrap .aiproSwiper .swiper-pagination{position:relative;inset:auto;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;text-align: center;gap: 10px;margin-bottom: 60px;font-size:var(--title-20);} #wrap .aiproSwiper .swiper-pagination span{width:auto;height: auto;margin: 0;opacity: 1;display: flex;align-items: center;justify-content: center;font-size:90%;font-weight: 400;color: var(--black-color03);line-height: 1.3;letter-spacing: -0.05em;background: var(--point-white);border-radius: 50px;padding: 10px 20px; transition:all 0.4s;} #wrap .aiproSwiper .swiper-pagination .swiper-pagination-bullet-active{background:var(--point-color02);color: var(--point-white);} /*over*/ @media (pointer: fine) and (hover: hover) { #wrap .aiproSwiper .swiper-pagination span:not(.swiper-pagination-bullet-active):hover{color:var(--point-color02);} } @media (max-width:1023px) { #wrap .aiproSwiper .swiper-pagination{margin-bottom:clamp(30px, 6vw, 60px);} .aiproSwiper .cont{padding:clamp(25px, 4vw, 40px);} } @media (max-width:640px) { .aiproSwiper .swiper-slide{flex-direction: column;box-shadow:0 0 15px rgba(0, 0, 0, 0.10);} .aiproSwiper .thumb{width:100%;} } .btm_bg{position: relative; padding-bottom: 120px;} .btm_bg:before{position: absolute; content:''; left:0; bottom:0; width: 100%; height: 300px; background:var(--point-color15);} .advantageStep{position: relative;} .advantageStep{display:grid; grid-template: auto / repeat(3, 1fr); gap: 40px;} .advantageStep > li{position:relative;text-align: center;background: var(--point-white);border-radius:var(--radius-10);display: flex;flex-direction: column;gap: 34px;padding: 60px 30px 50px;box-shadow: 0 0 20px rgba(14, 72, 177, 0.15);border-top: 10px solid var(--point-color08);} .advantageStep > li:nth-child(2){border-color:var(--point-color13);} .advantageStep > li:nth-child(3){border-color:var(--point-color09);} .advantageStep.bdDn > li{border:0; padding-block: 40px;} .advantageStep .icon{display:flex; align-items: center; justify-content: center; max-height: 80px;} .advantageStep .desc{display:grid;gap: 20px;font-size:var(--title-20);} .advantageStep .desc dt{font-size:130%;font-weight: 500;color:var(--black-color00);line-height: 1.5;letter-spacing: -0.05em;} .advantageStep .desc dd{font-size:80%;font-weight: 400;color: var(--black-color03);line-height: 1.625;letter-spacing: -0.05em;} @media (max-width:1023px) { .btm_bg{padding-bottom:clamp(60px, 12vw, 120px);} .btm_bg:before{height:clamp(150px, 30vw, 300px);} .advantageStep{gap:clamp(15px, 4vw, 40px)} .advantageStep > li{padding:clamp(30px, 6vw, 60px) clamp(15px, 3vw, 30px);gap:clamp(20px, 3.4vw, 34px);} .advantageStep .icon{max-height:clamp(50px, 8vw, 80px);} .advantageStep .desc{gap:clamp(10px, 2vw, 20px);} } @media (max-width:640px) { .advantageStep{grid-template: auto / repeat(1, 1fr);} } .exampleList{display: grid;grid-template:auto / repeat(3, 1fr);gap: 41px 40px;} .exampleList > li{position: relative;display: flex;flex-direction: column;gap: 15px;} .exampleList .link{position: absolute; inset: 0; z-index: 3; } .exampleList .thumb{display: block;aspect-ratio: auto 1.428;border-radius: 10px;overflow: hidden;} .exampleList .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;} .exampleList .desc{display: grid;gap: 9px;font-size:var(--title-20);} .exampleList .desc dt{font-size:130%;font-weight: 400;color:var(--black-color00);letter-spacing: -0.05em;line-height: 1.3;} .exampleList .desc dd{font-size:90%;font-weight: 400;color: var(--black-color03);line-height: 1.45;letter-spacing: -0.05em;display: flex;align-items: baseline;flex-wrap: wrap;} .exampleList .desc dd span:not(:last-child):after{display: inline-flex;content:'';width: 1px;height: 12px;background:var(--border-color04);margin-inline: 12px;} /*over*/ @media (pointer: fine) and (hover: hover) { .exampleList > li:hover .thumb img{scale: 1.08;} } @media (max-width:1200px) { .exampleList .desc dd{flex-direction: column;gap:4px;} .exampleList .desc dd span:not(:last-child):after{display: none;} } @media (max-width:1023px) { .exampleList{gap:clamp(35px, 4vw, 40px) clamp(15px, 4vw, 40px);} } @media (max-width:860px) { .exampleList{grid-template:auto / repeat(2, 1fr);} } @media (max-width:479px) { .exampleList{grid-template:auto / repeat(1, 1fr);} .exampleList .desc dd{flex-direction:row;gap:0;} .exampleList .desc dd span:not(:last-child):after{display:inline-flex;margin-inline:8px;height:10px;} } .bgContact{position: relative; background: url('../images/sub/bgContact.jpg') no-repeat center / cover; padding-block: 98px;} .bgContact .cont_title{display: grid; text-align: center; gap: 40px;font-size:var(--title-20);} .bgContact .cont_title h3{font-size:250%; font-weight: 400; color: var(--point-white); line-height: 1.4; letter-spacing: -0.05em;} .bgContact .cont_title h5{font-size: 130%;font-weight: 300;color: var(--point-white);line-height: 1.62;letter-spacing: -0.05em;} .bgContact .btn_box{display: flex;align-items: center;justify-content: center;gap: 15px;margin-top: 20px;font-size:var(--title-20);} .bgContact .btn_box :where(button, a){display:flex;align-items: center;justify-content: center;text-align: center;font-size:120%;font-weight: 700;color: var(--point-color02);line-height: 1.25;background: var(--point-white);min-width: 280px;padding: 25px 25px;box-sizing: border-box; transition:all 0.4s;} /*over*/ @media (pointer: fine) and (hover: hover) { .bgContact .btn_box :where(button, a):hover{background:var(--point-color02); color:var(--point-white);} } @media (max-width:1023px) { .bgContact{padding-block:clamp(50px, 10vw, 98px);} .bgContact .cont_title{gap:clamp(20px, 4vw, 40px);} .bgContact .cont_title h3{font-size:clamp(200%, 4.5vw, 250%);} .bgContact .btn_box :where(button, a){min-width: 200px;padding: clamp(15px, 2.5vw, 25px);} } @media (max-width:640px) { .bgContact .cont_title h5{font-size:100%;} } /*─────────────────────────────────────────────────────────── 부가서비스 - 제품 촬영 ───────────────────────────────────────────────────────────*/ .sub_additional *{font-family:var(--font-type03);} .sub_additional .main_title p em{font-size:var(--title-18);color:var(--black-color07);font-weight:300;display: block;margin-top:10px;} /*제품촬영 서비스*/ .sub_charge.shot_service{padding-top:80px;} .sub_charge.shot_service:before{bottom:-97px;} .sub_charge.shot_service .charge_list{display:flex;gap:0 100px;margin-top:49px;} .sub_charge.shot_service .charge_list:before{top:-163px;} .sub_charge.shot_service .charge_list li{width:calc(100% / 3 - 67px);border:none;padding:0;position: relative;box-sizing:border-box;padding:39px 10px 46px 10px;border-radius:10px;justify-content: flex-start;} .sub_charge.shot_service .charge_list li:before{width:100%;height:4px;content:"";background:var(--point-color08);position: absolute;top:0;left:0;border-radius:10px 10px 0 0;} .sub_charge.shot_service .charge_list li:nth-child(3):before{background:var(--point-color02);} .sub_charge.shot_service .charge_list li + li:after{width:9px;height:9px;content:"";border:2px solid var(--black-color04);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:var(--title-18);color:var(--point-color08);font-weight:400;letter-spacing:-0.018em;font-family:var(--font-type04);} .sub_charge.shot_service .charge_list li:nth-child(3) span{color:var(--point-color09);} .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 .icon img{max-height:100%;} .sub_charge.shot_service .charge_list li dl{margin-top:27px;} .sub_charge.shot_service .charge_list li dl dt{font-size:var(--title-20);color:var(--black-color03);font-weight:400;letter-spacing:-0.04em;line-height:1.6;} .sub_charge.shot_service .charge_list li dl dd{font-size:var(--title-16);color:var(--black-color06);font-weight:300;letter-spacing:-0.03em;line-height:1.63;margin-top:10px;} @media (max-width:1200px) { .sub_charge.shot_service:before{bottom:-3%;} .sub_charge.shot_service .charge_list{gap:0 60px;} .sub_charge.shot_service .charge_list li{width:calc(100% / 3 - 40px);} .sub_charge.shot_service .charge_list li + li:after{left:-38px;} } @media (max-width:1023px) { .sub_charge.shot_service{padding-top:clamp(50px, 8vw, 80px);} } @media (max-width:860px) { .sub_charge.shot_service .charge_list{margin-top:30px;gap:0;} .sub_charge.shot_service .charge_list li + li:after{display: none;} } @media (max-width:479px) { .sub_charge.shot_service .charge_list li .icon{height:46px;margin-top:15px;} .sub_charge.shot_service .charge_list li dl{margin-top:15px;} } /*포트폴리오*/ .sub_shot .shot_portfolio{margin-top:20px;} .sub_shot .shot_portfolio .portfolio_list{margin-top:43px;} .sub_shot .shot_portfolio .portfolio_list li{width:calc(25% - 6px);margin:0 0 8px 0;} .sub_shot .shot_portfolio .portfolio_list li.grid_h{height:420px;} .sub_shot .shot_portfolio .portfolio_list li.grid_h .thumb{aspect-ratio:auto 0.748;} .sub_shot .shot_portfolio .portfolio_list li .thumb{border-radius:6px;aspect-ratio:auto 1.308;} /*pop*/ .portfolio_pop{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:62;display: none;} .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:var(--point-white);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 .pop_list li{max-width:550px;height:700px;} .portfolio_pop img{width:100%;height:100%;object-fit:cover;} /*문의하기*/ .shot_contact{display:flex;margin-top:140px;flex-wrap:wrap;} .shot_contact > div{width:50%;text-align: center;box-sizing:border-box;font-size:var(--title-20);padding:0 10px;} .shot_contact > div + div{border-left:1px solid var(--border-color01);} .shot_contact > div h4{font-size:170%;color:var(--black-color03);font-weight:500;letter-spacing:-0.03em;position: relative;z-index:3;} .shot_contact > div h4 span{font-size:var(--title-20);color:var(--black-color03);font-weight:400;letter-spacing:-0.04em;margin-top:11px;display: block;} .shot_contact .img{position: relative;z-index:1;transform:translateY(-20px);} .shot_contact .img img{max-width:100%;} @media (max-width:1400px) { .sub_shot .shot_portfolio .portfolio_list li.grid_h{height:auto;} /*pop*/ .portfolio_pop .pop_list li{height:540px;} } @media (max-width:1023px) { .shot_contact{margin-top:clamp(70px, 14vw, 140px);} } @media (max-width:860px) { .shot_contact > div{width:100%;} .shot_contact > div + div{border:none;border-top:1px solid var(--border-color01);margin-top:-10px;padding-top:58px;} } @media (max-width:640px) { .sub_shot .shot_portfolio .portfolio_list{margin-top:30px;} .sub_shot .shot_portfolio .portfolio_list li{width:calc(50% - 4px);margin:0 0 8px 0;} /*pop*/ .portfolio_pop{width:calc(100% - 60px);} .portfolio_pop .pop_box .btn_close{right:0;} .portfolio_pop .pop_list li{text-align: center;height:90vw;} } @media (max-width:479px) { .shot_contact > div + div{margin-top:0;padding-top:30px;} .shot_contact > div h4 p{margin-top:5px;} .shot_contact .img{transform:translateY(-5px);} .shot_contact .img:nth-child(2){transform:translateY(-15px);} } /*컷종류*/ .cut_des{background:rgba(18,61,140,0.06);margin-top:160px;padding:140px 0 120px;position: relative;} .cut_des:before{width:100%;height:21%;content:"";background:var(--point-color12);position: absolute;bottom:0;left:0;} .cut_des .cut{display:flex;align-items:center;flex-wrap:wrap;} .cut_des .cut + .cut{margin-top:120px;justify-content:flex-end;flex-direction: row-reverse;} .cut_des .cut > div{width:50%;box-sizing:border-box;} .cut_des .cut > div.img_box{width:calc(50% - 20px);position: relative;} .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%;height:100%;object-fit:cover;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .cut_des .txt_box{font-size:var(--title-20)} .cut_des .txt_box h4{font-size:200%;color:var(--black-color03);font-weight:500;letter-spacing:-1.6px;} .cut_des .txt_box p{font-size:100%;color:var(--black-color03);font-weight:300;letter-spacing:-0.8px;line-height:1.6;margin-top:22px;} /*누끼컷*/ .cut_des .cut_cut .img{width:calc(50% - 10px);} .cut_des .cut_cut .img + .img{margin-left:10px;} .cut_des .cut_cut .arw{width:46px;aspect-ratio:auto 1;content:"";background:var(--point-white);box-sizing:border-box;border-radius:100%;box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.17);position: absolute;left:calc(50% - 5px);top:50%;translate:-50% -50%;z-index:5;} .cut_des .cut_cut .arw:after{width:9px;aspect-ratio:auto 1;content:"";border:2px solid var(--black-color10);border-width:2px 2px 0 0;transform:rotate(45deg);position: absolute;top:38%;left:16px;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:var(--point-white);border-radius:var(--radius-10);margin-top:120px;box-shadow:0 0 35px 0 rgba(0,0,0,0.11);padding:34px 40px 35px 40px;font-size:var(--title-20);} .cut_caution dt{font-size:110%;color:var(--black-color03);font-weight:500;letter-spacing:-0.02em;} .cut_caution dd ul{margin-top:12px;} .cut_caution dd ul li p{font-size:inherit;color:inherit;font-weight:inherit;} .cut_caution dd ul li strong{font-size:inherit;color:var(--black-color03);font-weight:inherit;} @media (max-width:1023px) { .cut_des{margin-top:clamp(80px, 16vw, 160px);padding:clamp(70px, 14vw, 140px) 0 clamp(60px, 12vw, 120px);} .cut_des .cut + .cut{margin-top:clamp(40px, 8vw, 80px);} .cut_des .cut_cut .txt_box{padding-left:30px;} .cut_des .concept_cut .txt_box{padding-right:30px;} .cut_caution{margin-top:clamp(50px, 10vw, 100px);padding:30px 20px;} } @media (max-width:640px) { .cut_des .cut > div{width:100%;} .cut_des .cut > div.img_box{width:100%;display: flex;flex-wrap:wrap;gap:20px;} .cut_des .cut_cut .img + .img{margin-left:0;} .cut_des .cut_cut .arw{left:50%} .cut_des .cut_cut .txt_box{padding:30px 0 0 0;} .cut_des .txt_box p{margin-top:10px;} .cut_des .cut + .cut{justify-content: flex-start;} .cut_des .concept_cut .txt_box{padding:30px 0 0 0;text-align:left;} .cut_caution{padding:20px 15px;} } @media (max-width:479px) { .cut_des{margin-top:0;} .cut_des .cut_cut .arw{width:40px;} .cut_des .cut_cut .arw:after{width:7px;top:37%;left:14px;} .cut_des .cut > div.img_box{gap:10px;} .cut_des .cut .img{width:calc(50% - 5px);box-shadow:0 0 20px 0 rgba(0,0,0,0.17);} #wrap .cut_des .txt_box{padding-top:20px;} .cut_des .txt_box h4{font-size:160%;} #wrap .cut_des .concept_cut .img{width:100%;} } /*─────────────────────────────────────────────────────────── 부가서비스 - 3D/VR 촬영 ───────────────────────────────────────────────────────────*/ .sub_3d_shot{padding-bottom:137px;position: relative;} .sub_3d_shot:before{width:100%;height:29.6%;content:"";background:var(--point-color15);position: absolute;bottom:0;left:0;} /*텍스트*/ .shot_txt{margin-top:59px;font-size:var(--title-20);text-align: left;} .shot_txt h3{font-size:250%;color:var(--black-color02);font-weight:500;letter-spacing:-0.02em;} .shot_txt h3 strong{font-size:inherit;color:var(--point-color02);font-weight:inherit;} .shot_txt h4{font-size:100%;color:var(--black-color03);font-weight:400;letter-spacing:-0.06em;margin-top:21px;margin-bottom:38px;} .shot_txt p{font-size:90%;color:var(--black-color04);font-weight:300;line-height:1.9;letter-spacing:-0.065em;} .sub_3d_shot .vr_list_box{margin-top:55px;} .sub_3d_shot .vr_list{text-align: center;display:flex;justify-content:center;flex-wrap:wrap;} .sub_3d_shot .vr_list li{width:20%;box-sizing:border-box;} .sub_3d_shot .vr_list li .icon{height:73px;display:flex;justify-content: center;align-items: center;} .sub_3d_shot .vr_list li .icon img{max-height:100%;} .sub_3d_shot .vr_list li p{font-size:var(--title-20);color:var(--black-color03);font-weight:400;letter-spacing:-0.05em;margin-top:26px;} @media (max-width:1023px) { .sub_3d_shot{padding-bottom:clamp(60px, 14vw, 137px);} .sub_3d_shot:before{height:20%;} .shot_txt{margin-top:clamp(40px, 6vw, 59px);} .shot_txt h4{margin:clamp(10px, 2vw, 21px) 0 clamp(15px, 4vw, 40px);} .sub_3d_shot .vr_list_box{margin-top:clamp(20px, 5.5vw, 55px);} .sub_3d_shot .vr_list{gap:20px 0;} .sub_3d_shot .vr_list li{width:calc(100% / 3);} } @media (max-width:640px) { .shot_txt h3{font-size:200%;} .sub_3d_shot .vr_list li .icon{height:60px;} } @media (max-width:479px) { .sub_3d_shot:before{height:28%;} .shot_txt h3{font-size:180%;} .sub_3d_shot .vr_list li .icon{height:50px;} .sub_3d_shot .vr_list li p{margin-top:15px;} } /*vr 투어*/ .vr_tour{margin-top:105px;text-align: center;position: relative;z-index:4;font-size:var(--title-20);} .vr_tour .main_title h3{font-family:var(--font-type04);padding:15px 0 0 0;font-weight:600;} .vr_tour .tour_box{display:flex;flex-wrap:wrap;margin-top:42px;position: relative;gap:clamp(15px, 4vw, 40px);} .vr_tour .tour_box .tour{width:calc(50% - 20px);box-sizing:border-box;position: relative;} .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_box{width:100%;box-sizing:border-box;position: relative;border-radius:var(--radius-10);overflow:hidden;height:0;padding-bottom:64.5%;} .vr_tour .tour_box .tour .img_box > img{width:100%;height:100%;object-fit:cover;position: absolute;top:0;left:0;} .vr_tour .tour_box .tour .txt{position: absolute;bottom:31px;left:0;box-sizing:border-box;padding:0 40px;width:100%;text-align:left;font-size:var(--title-20);} .vr_tour .tour_box .tour .txt p{font-size:150%;;color:var(--point-white);font-weight:700;letter-spacing:-0.03em;} .vr_tour .tour_box .tour .txt span{display: none;} .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;flex-direction: column;align-items: center;justify-content: center;display: none;font-size:var(--title-20);} .vr_tour .tour_box .tour .ov_box p{font-size:110%;;color:var(--point-white);font-weight:500;letter-spacing:-0.03em;margin-top:-17px;} .vr_tour .intro_txt{text-align: right;font-size:80%;;color:rgba(255,255,255,0.7);font-weight:300;letter-spacing:-0.05em;margin-top:15px;} /*over*/ @media (pointer: fine) and (hover: hover) { .vr_tour .tour_box .tour:hover .ov_box{display: flex;} } @media (max-width:1023px) { .vr_tour{margin-top:clamp(50px, 10vw, 105px);} .vr_tour .tour_box{margin-top:clamp(20px, 4.2vw, 42px);} .vr_tour .tour_box .tour .txt{bottom:20px;padding:0 20px;} } @media (max-width:640px) { .vr_tour .tour_box .tour{width:100%;} } @media (max-width:479px) { .vr_tour .tour_box .tour .txt{padding:0 15px;} .vr_tour .tour_box .tour .txt p{font-size:120%;} } /*─────────────────────────────────────────────────────────── 부가서비스 - OCR ───────────────────────────────────────────────────────────*/ /*서비스*/ .ocr_service{padding:80px 0 0;text-align: center;font-size:var(--title-20);} .ocr_service .ocr_receipt{display: flex;align-items: center;justify-content: center;margin-top:33px;} .ocr_service .sub_title{font-size:150%;color:var(--black-color03);font-weight:500;letter-spacing:-0.05em;margin-top:36px;padding:0;} @media (max-width:1023px) { .ocr_service{padding-top:clamp(50px, 8vw, 80px);} .ocr_service .sub_title{margin-top:clamp(10px, 3.6vw, 36px);} } @media (max-width:479px) { .ocr_service .sub_title{font-size:120%;} } /*ocr 분야*/ .ocr_field{background:var(--point-color04);margin-top:118px;position: relative;box-sizing:border-box;padding:101px 0 140px;} .ocr_field:before{width:1px;height:100px;content:"";background:var(--black-color00);top:-40px;left:calc(50% - 1px);position: absolute;} .ocr_field:after{width:100%;height:280px;content:"";background:var(--point-color12);bottom:0;left:0;z-index:1;position: absolute;} .ocr_field .main_title h3{padding:0;} .ocr_field .main_title h3:before{display: none;} .ocr_field .field_list{display:flex;flex-wrap:wrap;margin-top:38px;gap:20px;position: relative;z-index:5;} .ocr_field .field_list li{box-sizing:border-box;border-radius: 10px;box-shadow:0px 5px 24px 0 rgba(126, 150, 192, 0.4);width:calc(25% - 15px);display:flex;align-items:center;background:var(--point-white);padding:24px 0 24px 31px;flex-wrap:wrap;font-size:var(--title-20);} .ocr_field .field_list li .icon{width:54px;} .ocr_field .field_list li p{box-sizing:border-box;font-size:120%;color:var(--black-color02);font-weight:400;letter-spacing:-0.02em;padding-left:31px;width:calc(100% - 54px);text-align:left;} /*diagram*/ .ocr_img{box-sizing:border-box;background:var(--point-white);border-radius:10px;box-shadow:0px 5px 24px 0 rgba(126, 150, 192, 0.4);padding:40px 40px;position: relative;margin-top:50px;z-index:5;} .ocr_img .diagram_box{box-sizing:border-box;display: flex;align-items: center;gap:70px;} .ocr_img .diagram_box .diagram_cont{position: relative;} .ocr_img .diagram_box .diagram_cont + .diagram_cont:before{content:"";border-left:13px solid var(--black-color10);border-top:13px solid transparent;border-bottom:13px solid transparent;position: absolute;left:-40px;top:50%;transform:translateY(-50%);} .ocr_img .diagram_box .media{display: flex;flex-wrap:wrap;width:180px;gap:10px;} .ocr_img .diagram_box .media li{box-sizing:border-box;background:var(--point-color04);padding:21px 23px;border-radius:10px;width:100%;display: flex;flex-wrap:wrap;} .ocr_img .diagram_box .media li .img{width:30px;display: flex;align-items: center;justify-content: center;} .ocr_img .diagram_box .media li .img img{} .ocr_img .diagram_box .media li p{box-sizing:border-box;width:calc(100% - 30px);padding-left:20px;font-size:var(--title-18);color:var(--black-color03);font-weight:400;} .ocr_img .diagram_box .certi{display: flex;flex-wrap:wrap;width:270px;gap:10px;padding-right:25px;} .ocr_img .diagram_box .certi:after{content:"";width:25px;height:calc(100% - 60px);border:1px dashed var(--black-color10);border-width:1px 1px 1px 0;position: absolute;right:0;top:50%;transform:translateY(-50%);} .ocr_img .diagram_box .certi li{box-sizing:border-box;align-self: flex-end;align-items: center;justify-content: center;text-align: center;background:var(--point-color18);padding:14px 0;border-radius:10px;width:100%;display: flex;font-size:var(--title-20);} .ocr_img .diagram_box .certi li span{font-size:110%;color:var(--point-white);font-weight:400;} .ocr_img .diagram_box .certi li span em{font-size:90%;color:inherit;font-weight:300;} .ocr_img .diagram_box .engine{box-sizing:border-box;border:1px solid var(--point-color12);border-radius:var(--radius-10);width:272px;font-size:var(--title-20);} .ocr_img .diagram_box .engine:before{left:-43px;} .ocr_img .diagram_box .engine dt{width:100%;display: flex;align-items: center;justify-content: center;text-align: center;box-sizing:border-box;border-radius:10px 10px 0 0;background:var(--point-color12);font-size:120%;color:var(--point-white);font-weight:400;padding:17px 0;} .ocr_img .diagram_box .engine dd{box-sizing:border-box;padding:20px 20px;} .ocr_img .diagram_box .engine dd > div{display: flex;flex-wrap:wrap;box-sizing:border-box;} .ocr_img .diagram_box .engine dd > div + div{margin-top:20px;} .ocr_img .diagram_box .engine dd > div span, .ocr_img .diagram_box .engine dd > div p{display: inline-flex;box-sizing:border-box;border-radius:10px;align-items: center;justify-content: center;font-size:var(--title-20);font-weight:500;} .ocr_img .diagram_box .engine dd .object{gap:10px;} .ocr_img .diagram_box .engine dd .object span{width:calc(50% - 5px);aspect-ratio:1.37;background:var(--gray-bg01);color:var(--black-color03);} .ocr_img .diagram_box .engine dd .model{gap:20px;} .ocr_img .diagram_box .engine dd .model p{width:100%;background:var(--point-color04);height:60px;color:var(--point-color02);} .ocr_img .diagram_box .extract{box-sizing:border-box;width:240px;aspect-ratio:1;border-radius:100%;background:rgba(40,70,178,0.15);display: flex;align-items: center;justify-content: center;} .ocr_img .diagram_box .extract > div{width:calc(100% - 40px);aspect-ratio:1;border-radius:100%;background:var(--point-color02);display: flex;align-items: center;justify-content: center;text-align: center;font-size:var(--title-20);} .ocr_img .diagram_box .extract > div p{font-size:120%;color:var(--point-white);font-weight:400;line-height:1.33;} .ocr_img .txt_box{display: flex;box-sizing:border-box;margin-top:40px;padding:40px 40px;background:var(--gray-bg01);border-radius:var(--radius-10);} .ocr_img .txt_box p{font-size:var(--title-18);color:var(--black-color03);font-weight:400;line-height:1.78;} @media (max-width:1250px){ .ocr_img{padding:30px 20px;} /*diagram*/ .ocr_img .diagram_box{gap:40px;} .ocr_img .diagram_box .diagram_cont + .diagram_cont:before{left:-27px;} .ocr_img .diagram_box .media li{padding:15px 15px;} .ocr_img .diagram_box .media li p{padding-left:10px;} .ocr_img .diagram_box .certi{padding-right:15px;} .ocr_img .diagram_box .certi li{padding:14px 5px;} .ocr_img .diagram_box .certi:after{width:15px;} .ocr_img .diagram_box .extract > div p{font-size:109%;} } @media (max-width:1023px){ .ocr_field{margin-top:clamp(60px, 12vw, 120px);padding:clamp(50px, 10vw, 100px) 0 clamp(70px, 14vw, 140px);} .ocr_field .field_list li{width:calc(50% - 10px);} .ocr_field .field_list li p{padding-left:20px;} /*diagram*/ .ocr_img .diagram_box{flex-direction: column;gap:60px;} .ocr_img .diagram_box .diagram_cont + .diagram_cont:before{border-top:10px solid var(--black-color10);border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:none;top:-36px;left:50%;transform:translate(-50%);} .ocr_img .diagram_box .media{width:60%;} .ocr_img .diagram_box .media li{width:calc(50% - 5px);} .ocr_img .diagram_box .certi{width:60%;padding:0 0 30px 0;} .ocr_img .diagram_box .certi:after{width:50%;height:30px;border-width:0 1px 1px 1px;left:50%;right:auto;bottom:0;top:auto;transform:translate(-50%);} .ocr_img .diagram_box .certi li{width:calc(50% - 5px);align-self:auto;} .ocr_img .diagram_box .certi li em{display: block;} .ocr_img .diagram_box .engine{width:60%;} } @media (max-width:860px){ .ocr_field:before{height:60px;top:-30px;} .ocr_field .field_list li{padding:20px 15px;} .ocr_field .field_list li .icon{width:44px;} } @media (max-width:640px){ /*diagram*/ .ocr_img .diagram_box .media, .ocr_img .diagram_box .certi, .ocr_img .diagram_box .engine{width:100%;} .ocr_img .diagram_box .extract{width: 100%;aspect-ratio:initial;padding:10px 10px;border-radius:50px;} .ocr_img .diagram_box .extract > div{border-radius:50px;width:100%;height:100%;aspect-ratio:initial;} .ocr_img .diagram_box .extract > div p{padding:20px 20px;} .ocr_img .diagram_box .extract > div p br{display: none;} .ocr_img .txt_box{margin-top:30px;padding:20px 20px;} } @media (max-width:479px){ .ocr_field .field_list{margin-top:25px;gap:15px;} .ocr_field .field_list li{width:100%;border-radius:5px;padding:15px 15px;box-shadow:0px 5px 7px 0 rgba(126, 150, 192, 0.4);} .ocr_field .field_list li .icon{width:38px;} .ocr_field .field_list li p{width:calc(100% - 38px);} /*diagram*/ .ocr_img{margin-top:10px;padding:30px 15px;} .ocr_img .diagram_box{gap:50px;} .ocr_img .diagram_box .diagram_cont + .diagram_cont:before{top:-30px;} .ocr_img .diagram_box .media li{width:calc(100% / 3 - 8px);flex-direction: column;padding:10px 10px;align-items: center;justify-content: center;text-align: center;} .ocr_img .diagram_box .media li .img{width:25px;} .ocr_img .diagram_box .media li p{padding:0;width:100%;margin-top:10px;} .ocr_img .diagram_box .certi{gap:7px;padding-bottom:20px;} .ocr_img .diagram_box .certi:after{height:20px;} .ocr_img .diagram_box .certi li{width:calc(50% - 3.5px);border-radius:5px;} .ocr_img .diagram_box .engine dt{padding:12px 0;border-radius:5px 5px 0 0;} .ocr_img .diagram_box .engine dd{padding:15px 15px;display: flex;flex-wrap:wrap;gap:10px;} .ocr_img .diagram_box .engine dd .object{width:calc(38% - 5px);} .ocr_img .diagram_box .engine dd .object span{width:100%;aspect-ratio:initial;padding:10px 0;} .ocr_img .diagram_box .engine dd > div span, .ocr_img .diagram_box .engine dd > div p{aspect-ratio:initial;padding:10px 0;border-radius:5px;} .ocr_img .diagram_box .engine dd > div + div{margin:0;} .ocr_img .diagram_box .engine dd .model{gap:10px;width:calc(62% - 5px);} .ocr_img .diagram_box .engine dd .model p{height:auto;} .ocr_img .diagram_box .extract > div p{padding:15px 15px;} .ocr_img .txt_box{margin-top:20px;padding:15px 15px;} .ocr_img .txt_box p{line-height:1.5;} } /*포트폴리오*/ .ocr_portfolio{padding:100px 0 118px; border-bottom:1px solid var(--border-color01); box-sizing:border-box;} .ocr_portfolio .port_list{display:flex; flex-wrap:wrap; gap:60px 25px; margin-top:50px;} .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:var(--radius-10); overflow:hidden;} .ocr_portfolio .port_list .thumb img{max-width:100%; max-height:100%;object-fit:cover;} .ocr_portfolio .port_list .desc{margin-top:30px;font-size:var(--title-20);} .ocr_portfolio .port_list .desc p{font-size:110%; font-weight:400; color:var(--black-color03); line-height:1.36; letter-spacing:-0.03em;} .ocr_portfolio .port_list .desc span{font-size:90%; font-weight:400; color:var(--black-color07); line-height:1.45; letter-spacing:-0.03em;display: block;margin-top:10px;} @media (max-width:1023px){ .ocr_portfolio{padding:clamp(50px, 10vw, 100px) 0 clamp(60px, 12vw, 120px);} .ocr_portfolio .port_list{margin-top:clamp(25px, 5vw, 50px);} } @media (max-width:640px){ .ocr_portfolio .port_list{gap:30px 15px;} .ocr_portfolio .port_list > li{width:calc(50% - 7.5px);} .ocr_portfolio .port_list .thumb{box-shadow:0 5px 14px rgba(126, 150, 192, 0.4);} .ocr_portfolio .port_list .desc{margin-top:15px;} .ocr_portfolio .port_list .desc span{margin-top:5px;} } /*─────────────────────────────────────────────────────────── 부가서비스 - 물류 서비스 ───────────────────────────────────────────────────────────*/ /*탭*/ .sub_dist{margin-top:80px;} .sub_dist .dist_tab{font-size:0;box-sizing:border-box;text-align: center;margin-top:47px;display: flex;flex-wrap:wrap;} .sub_dist .dist_tab li{display: inline-block;box-sizing:border-box;vertical-align: top;width:calc(100% / 6);border:1px solid var(--border-color02);border-bottom:none;height:auto;cursor:pointer;padding:23px 10px 18px 10px;font-size:var(--title-20);} .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 .icon .img_ov{display: none;} .sub_dist .dist_tab li .icon img{max-height:100%;} .sub_dist .dist_tab li p{font-size:120%;color:var(--black-color02);font-weight:400;letter-spacing:-0.02em;margin-top:6px;} /*on*/ .sub_dist .dist_tab li.on{box-shadow: 0px 5px 24px 0 rgba(0, 0, 0, 0.24);background:var(--point-color02);border-color:var(--point-color02);} .sub_dist .dist_tab li.on .icon .img{display: none;} .sub_dist .dist_tab li.on .icon .img_ov{display: block;} .sub_dist .dist_tab li.on p{color:var(--point-white);} /*내용*/ .dist_wrap{box-sizing:border-box;background:var(--point-color04);border-top:1px solid var(--border-color02);padding-bottom:101px;} .dist_wrap .dist_box{height:0;overflow:hidden;opacity:0;font-size:var(--title-20);} .dist_wrap .dist_box.on{height:auto;overflow:visible;opacity:1;} .dist_wrap .dist_box h4{font-size:200%;color:var(--black-color03);font-weight:500;letter-spacing:-0.04em;margin-top:46px;display: flex;flex-wrap:wrap;align-items: baseline;gap:20px;} .dist_wrap .dist_box h4 span{display: inline-block;font-size:var(--title-18);color:var(--black-color06);font-weight:400;letter-spacing:-0.03em;} .dist_wrap .content{display:flex;flex-wrap:wrap;font-size:0;margin-top:30px;align-items: flex-start;} .dist_wrap .dist_adv{font-size:0;width:59.4%;display: flex;flex-wrap: wrap;box-sizing:border-box;padding-right:30px;gap:10px;} .dist_wrap .dist_adv li{display:flex;align-items:center;width:calc(50% - 5px);box-sizing:border-box;background:var(--point-white);border-radius:10px;box-shadow:0 5px 24px 0 rgba(0,0,0,0.14);padding:22px 16px 22px 21px;flex-wrap:wrap;} .dist_wrap .dist_adv li .icon{width:61px;text-align: center;} .dist_wrap .dist_adv li .txt_box{padding-left:18px;box-sizing:border-box;width:calc(100% - 61px);font-size:var(--title-20);} .dist_wrap .dist_adv li .txt_box dt{font-size:120%;color:var(--black-color03);font-weight:500;letter-spacing:-0.05em;} .dist_wrap .dist_adv li .txt_box dd{font-size:var(--title-17);color:var(--black-color06);font-weight:400;letter-spacing:-0.05em;line-height:1.5;margin-top:5px;} .dist_wrap .dist_img{width:40.6%;position: relative;display: inline-block;vertical-align: top;box-sizing:border-box;font-size:var(--title-20);} .dist_wrap .dist_img .img{box-sizing:border-box;border-radius:var(--radius-10);overflow:hidden;} .dist_wrap .dist_img p{font-size:150%;color:rgba(51, 51, 51, 0.08);font-weight:600;letter-spacing:0.02em;font-family:var(--font-type04);position: absolute;right:-56px;bottom:0;writing-mode:vertical-rl;} /*over*/ @media (pointer: fine) and (hover: hover) { /*탭*/ .sub_dist .dist_tab li:hover{box-shadow: 0px 5px 24px 0 rgba(0, 0, 0, 0.24);background:var(--point-color02);border-color:var(--point-color02);} .sub_dist .dist_tab li:hover .icon .img{display: none;} .sub_dist .dist_tab li:hover .icon .img_ov{display: block;} .sub_dist .dist_tab li:hover p{color:var(--point-white);} } @media (max-width:1450px){ .dist_wrap .dist_img{padding-right:15px;} .dist_wrap .dist_img p{right:-28px;} } @media (max-width:1023px){ .sub_dist{margin-top:clamp(40px, 8vw, 80px);} .sub_dist .dist_tab{margin-top:clamp(30px, 4.7vw, 47px);} .dist_wrap .dist_adv li{flex-direction: column;align-items: flex-start;} .dist_wrap .dist_adv li .icon{width:45px;height:43px;display: flex;align-items: center;justify-content: center;} .dist_wrap .dist_adv li .icon img{max-height:100%;} .dist_wrap .dist_adv li .txt_box{width:100%;padding:10px 0 0 0;} } @media (max-width:860px){ /*탭*/ .sub_dist .dist_tab{white-space: nowrap;overflow-x: auto;width: calc(100% + 60px);padding: 0 30px;margin-left: -30px;display: block;} .sub_dist .dist_tab li{width:calc(100% / 3);} .sub_dist .dist_tab li .icon{height:50px;} .sub_dist .dist_tab li .icon img{max-width:43%;} .dist_wrap .dist_box h4{margin-top:30px;} .dist_wrap .dist_adv{width:100%;padding-right:0;} .dist_wrap .dist_adv li{flex-direction: row;align-items: center;} .dist_wrap .dist_adv li .txt_box{padding:0 0 0 15px;width:calc(100% - 45px);} .dist_wrap .dist_img{width:68%;margin-top:30px;} } @media (max-width:640px){ .dist_wrap .dist_box h4{gap:10px;} .dist_wrap .dist_adv li{padding:20px 15px;} .dist_wrap .dist_adv li .icon{height:36px;} .dist_wrap .dist_adv li .txt_box dd{display: none;} } @media (max-width:479px){ /*탭*/ .sub_dist .dist_tab{width:calc(100% + 30px);padding:0;margin-left:-15px;} .sub_dist .dist_tab li{width:100px;padding:10px 5px;} .sub_dist .dist_tab li:nth-child(1), .sub_dist .dist_tab li:nth-child(6){border-radius:0;} .sub_dist .dist_tab li .icon{height:35px;} .sub_dist .dist_tab li p{font-size:100%;margin-top:3px;} .dist_wrap{padding-bottom:60px;} .dist_wrap .dist_box h4{gap:4px;margin-top:20px;} .dist_wrap .content{margin-top:20px;} .dist_wrap .dist_adv li{padding:10px 10px;border-radius:5px;} .dist_wrap .dist_adv li .icon{width:29px;height:28px;} .dist_wrap .dist_adv li .txt_box{width:calc(100% - 29px);padding-left:10px;} .dist_wrap .dist_adv li .txt_box dt{font-size:89%;} .dist_wrap .dist_img{width:calc(100% - 40px);padding-right:0;margin-top:25px;} .dist_wrap .dist_img .img{border-radius:5px;} .dist_wrap .dist_img p{right:-30px;} } /*─────────────────────────────────────────────────────────── 부가서비스 - pg ───────────────────────────────────────────────────────────*/ .pg_box{margin-top:80px;position: relative;padding-bottom: 114px;} .pg_box:before{width:100%;height:45.9%;content:"";background:url('../images/sub/pg-bg.jpg')no-repeat bottom 26% center;background-size:cover;position: absolute;bottom:0;left:0;} .pg_box .main_title h3{font-family:var(--font-type04);display:flex;align-items: center;justify-content: center;gap:28px;} .pg_box .main_title h3 span{font-size:inherit;color:inherit;font-weight:inherit;font-family:inherit;} .pg_box .pg_list{text-align: center;margin-top:42px;font-size:var(--title-20);} .pg_box .pg_list h4{font-size:160%;color:var(--black-color03);font-weight:300;letter-spacing:-0.05em;} .pg_box .pg_list h4 strong{display: inline-block;font-size:inherit;color:var(--point-color02);font-weight:700;position: relative;text-decoration: underline;text-underline-offset: 2px;text-decoration-thickness: 1px;} .pg_box .pg_list ul{text-align: center;margin-top:53px;display: flex;flex-wrap:wrap;gap:150px;justify-content: center;} .pg_box .pg_list ul li{display: inline-block;vertical-align: top;font-size:var(--title-20)} .pg_box .pg_list ul li .img_box{position: relative;width:210px;aspect-ratio:1;margin:0 auto;box-sizing:border-box;border-radius:100%;background:var(--point-color02);display: flex;align-items: center;} .pg_box .pg_list ul li .icon{position: relative;width:calc(100% - 50px);aspect-ratio:1;margin:0 auto;box-sizing:border-box;border-radius:100%;background:var(--point-white);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:150%;color:var(--point-white);font-weight:500;letter-spacing:-0.07em;margin-top:20px;} .pg_box .pg_list > p{font-size:80%;color:rgba(255, 255, 255, 0.7);font-weight:300;letter-spacing:-0.04em;margin-top:49px;} @media only screen and (max-width:1100px){ .pg_box .pg_list ul{gap:60px;} } @media only screen and (max-width:860px){ .pg_box{margin-top:60px;padding-bottom:80px;} .pg_box .pg_list{margin-top:30px;} .pg_box .pg_list ul{gap:30px;} .pg_box .pg_list ul li{width:calc(100% / 3 - 20px);} .pg_box .pg_list ul li .img_box{width:calc(100% - 30px);} .pg_box .pg_list ul li .icon img{max-width:50%} } @media only screen and (max-width:640px){ .pg_box:before{height:70%;} .pg_box .main_title h3{gap:20px;} .pg_box .main_title h3 img{height:24px;} .pg_box .pg_list ul{flex-direction: column;align-items: center;} .pg_box .pg_list ul li{width:45%;} } @media only screen and (max-width:479px){ .pg_box:before{height:63%;} .pg_box .main_title h3{gap:10px;padding-top:28px;flex-direction: column;} .pg_box .main_title h3 img{height:15px;} .pg_box .pg_list ul{margin-top:30px;} .pg_box .pg_list ul li{width:53.5%;} .pg_box .pg_list ul li .icon{width:calc(100% - 30px);} .pg_box .pg_list ul li .icon img{max-width:40%;} .pg_box .pg_list ul li p{margin-top:10px;} } /*─────────────────────────────────────────────────────────── 부가서비스 - 온라인서비스 ───────────────────────────────────────────────────────────*/ /*광고마케팅*/ .sub_charge.online_service{padding-bottom:120px;} .online_service .main_title p{font-size:var(--title-20);letter-spacing:-0.04em;margin-top:18px;} .sub_charge.online_service .default_swiper{position: relative;z-index:3;} .sub_charge.online_service .charge_list li{border:none;padding:0;width:calc(100% / 3 - 22px);box-shadow:0px 0px 20px 0px rgba(0, 0, 0, 0.15);} .sub_charge.online_service .charge_list{margin-top:44px;} .online_service .charge_list li .title{box-sizing:border-box;text-align: center;border-radius:10px 10px 0 0;background:var(--point-color08);padding-top:36px;padding-bottom:28px;font-size:var(--title-20);} .online_service .charge_list li:nth-child(2) .title{background: var(--point-color11);} .online_service .charge_list li:nth-child(3) .title{background: var(--point-color09);} .online_service .charge_list li .title span{display: block;font-size:100%;color:var(--point-white);font-weight:400;letter-spacing:-0.03em;} .online_service .charge_list li .title strong{display: block;font-size:180%;color:var(--point-white);font-weight:600;margin-top:2px;letter-spacing:-0.03em;} .online_service .charge_list li .cont{box-sizing:border-box;padding:9px 30px 39px;text-align: center;font-size:var(--title-20);} .online_service .charge_list li .cont .img{box-sizing:border-box;position: relative;} .online_service .charge_list li .cont .img:before{width:100%;height:1px;content:"";background: var(--border-color03);position: absolute;bottom:8px;left:0;} .online_service .charge_list li .cont > p{font-size:85%;color:var(--black-color06);font-weight:400;line-height:1.64;letter-spacing:-0.035em;margin-top:12px;} .online_service .charge_list li .cont .billing{margin-top:30px;} .online_service .charge_list li .cont .billing span{display: inline-flex;box-sizing:border-box;padding:0 14px;height:30px;align-items: center;justify-content: center;text-align: center;border-radius:var(--radius-15);font-size:80%;color:var(--point-color08);font-weight:500;border:1px solid var(--point-color08);letter-spacing:-0.015em;} .online_service .charge_list li:nth-child(2) .cont .billing span{border-color:var(--point-color11);color:var(--point-color11);} .online_service .charge_list li:nth-child(3) .cont .billing span{border-color:var(--point-color09);color:var(--point-color09);} .online_service .charge_list li .cont .billing p{font-size:90%;color:var(--black-color03);font-weight:500;letter-spacing:-0.03em;line-height:1.55;margin-top:11px;} @media (max-width:1023px) { .sub_charge.online_service{padding-bottom:clamp(60px, 12vw, 120px);} .sub_charge.online_service .charge_list{margin-top:clamp(30px, 4.4vw, 44px);} .sub_charge.online_service .charge_list li{width:calc(100% / 3 - 14px);} } @media (max-width:640px) { .online_service .charge_list li .title{padding:20px 0;} .online_service .charge_list li .title strong{font-size:150%;} .online_service .charge_list li .cont{padding:9px 15px 20px;} } /*개인화 서비스*/ .online_survey{box-sizing:border-box;background:var(--point-color04);padding:120px 0 79px;} .online_survey .main_title h3{letter-spacing:-0.045em;padding-top:23px;} .online_survey .main_title h3 strong{color:var(--point-color02);font-weight:500;} .online_survey .main_title p{font-size:130%;margin-top:23px;letter-spacing:-0.04em;line-height:1.55;} .online_survey .main_title p strong{font-weight:700;text-decoration: underline;text-decoration-thickness:1px;text-underline-offset:4px;} .online_survey .survey_box{display: flex;flex-wrap:wrap;margin-top:58px;gap:0 58px;font-size:var(--title-20);} .online_survey .survey_box .txt{box-sizing:border-box;background: var(--point-white);border-radius:var(--radius-10);filter: drop-shadow(0px 0px 11px rgba(126, 150, 192, 0.50));position: relative;padding:40px 40px;width:43.5%;} .online_survey .survey_box .txt:before{width:33px;height:20px;content:"";background:url('../images/sub/online_quote.png')no-repeat center;background-size:auto 100%;position: absolute;right:-33px;top:59px;} .online_survey .survey_box .txt p{font-size:95%;color:var(--black-color03);font-weight:400;line-height:1.68;letter-spacing:-0.04em;} .online_survey .survey_box .txt p + p{margin-top:14px;} .online_survey .survey_box .txt p strong{font-size:inherit;color:var(--point-color02);font-weight:500;} .online_survey .survey_box .cont{box-sizing:border-box;background:rgba(206, 222, 238, 0.5);border-radius:var(--radius-10);padding:37px 40px;width:calc(56.5% - 58px);font-size:var(--title-20);} .online_survey .survey_box .cont > h4{font-size:115%;color:var(--black-color03);font-weight:500;} .online_survey .survey_box .graph_box{margin-top:31px;} .online_survey .survey_box .sub_graph{display: flex;flex-wrap:wrap;gap:0 16px;align-items: center;font-size:var(--title-20);} .online_survey .survey_box .sub_graph + .sub_graph{margin-top:14px;} .online_survey .survey_box .sub_graph .bar{width:calc(100% - 76px);box-sizing:border-box;background: var(--point-white);border-radius:var(--radius-08);height:16px;position: relative;} .online_survey .survey_box .sub_graph .bar .fill{position: absolute;height:100%;box-sizing:border-box;border-radius:var(--radius-08);background: var(--point-color08);width:0;transition:width 2s;transition-delay:0.8s;} .online_survey .survey_box .sub_graph .bar .fill:after{width:16px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border-radius:100%;background: var(--point-color24);position: absolute;top:0;right:-5px;} .online_survey .survey_box .sub_graph:nth-child(2) .bar .fill {transition-delay:1.2s;background: var(--point-color11);} .online_survey .survey_box .sub_graph:nth-child(3) .bar .fill {transition-delay:1.5s;background: var(--point-color09);} .online_survey .survey_box .sub_graph:nth-child(2) .bar .fill:after{background: var(--point-color25);} .online_survey .survey_box .sub_graph:nth-child(3) .bar .fill:after{background: var(--point-color26);} .online_survey .survey_box .sub_graph:nth-child(1).aos-animate .bar .fill{width:78%;} .online_survey .survey_box .sub_graph:nth-child(2).aos-animate .bar .fill{width:77%;} .online_survey .survey_box .sub_graph:nth-child(3).aos-animate .bar .fill{width:83%;} .online_survey .survey_box .sub_graph .cnt{font-size:130%;color:var(--point-color08);font-weight:700;display: block;font-family:var(--font-type04);width:60px;} .online_survey .survey_box .sub_graph:nth-child(2) .cnt{color:var(--point-color11);} .online_survey .survey_box .sub_graph:nth-child(3) .cnt{color:var(--point-color09);} .online_survey .survey_box .sub_graph > p{width:100%;font-size:90%;color:var(--black-color03);font-weight:400;letter-spacing:-0.03em;margin-top:-5px;} .online_survey .survey_box .source{width:100%;text-align: right;font-size:16px;color:var(--black-color06);font-weight:400;margin-top:13px;letter-spacing:-0.03em;} @media (max-width:1400px){ .online_survey .survey_box .txt{padding:40px 15px;;} } @media (max-width:1023px) { .online_survey{padding:clamp(60px, 12vw, 120px) 0 clamp(40px, 8vw, 79px);} .online_survey .survey_box{margin-top:clamp(25px, 6vw, 58px);gap:10px clamp(25px, 4vw, 40px);} .online_survey .survey_box .cont{padding:clamp(20px, 3.7vw, 37px) clamp(15px, 4vw, 40px);width:calc(56.5% - 40px);} } @media (max-width:860px) { .online_survey .survey_box{flex-direction: column;} .online_survey .survey_box .txt{width:100%;} .online_survey .survey_box .txt:before{left: 20px;bottom: -18px;transform: rotate(90deg);top:auto;right:auto;} .online_survey .survey_box .cont{width:100%;margin-top:30px;} } /*서비스 지원*/ .online_support{background:url('../images/sub/online_service_bg.jpg')no-repeat center;background-size:cover;box-sizing:border-box;padding:120px 0;} .online_support .main_title h3{color:var(--point-white);} .online_support .main_title h3:before{background: var(--point-white);} .online_support .support_box{display: flex;flex-wrap:wrap;gap:0 40px;align-items:flex-end;margin-top:48px;} .online_support .support_list{box-sizing:border-box;border-radius:var(--radius-20);text-align: center;padding:20px 20px;border:1px solid rgba(255,255,255,0.2);background:rgba(0, 156, 223, 0.40);width:calc(100% / 3 - 27px);font-size:var(--title-20);} .online_support .support_list h4{font-size:110%;color:var(--point-white);font-weight:400;letter-spacing:-0.04em;line-height:1.36;} .online_support .support_list > ul{position: relative;margin-top:19px;} .online_support .support_list > ul:before{width:45px;height:calc(66.6% + 16px);content:"";box-sizing:border-box;border-radius:var(--radius-06);border:1px solid var(--point-white);border-width:2px 2px 2px 0;position: absolute;top:50%;transform:translateY(-47%);right:-42px;} .online_support .support_list > ul > li{box-sizing:border-box;border-radius:10px;background: var(--point-white);padding:17px 12px 17px 20px;text-align:left;position: relative;} .online_support .support_list > ul > li + li{margin-top:20px;} .online_support .support_list > ul > li p{font-size:var(--title-20);color:var(--point-color22);font-weight:600;letter-spacing:-0.03em;} .online_support .support_list .sub_list{margin-top:6px;font-size:var(--title-20);} .online_support .support_list .sub_list li{box-sizing:border-box;position: relative;font-size:80%;color:var(--black-color03);font-weight:400;line-height:1.5;letter-spacing:-0.05em;padding-left:10px;} .online_support .support_list .sub_list li:before{width:4px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color10);position: absolute;left:0;top:11px;} .online_support .support_list .sub_list li + li{margin-top:8px;} .online_support .support_list .sub_list li span{font-size:15px;color:var(--black-color07);} /*정성적 지원*/ .online_support .support_list.sincerity_sup{background:rgba(38, 76, 180, 0.40);;} .online_support .support_list.sincerity_sup > ul:before{right:auto;left:-42px;border-width:2px 0 2px 2px;} .online_support .support_list.sincerity_sup > ul > li p{color:var(--point-color02);} .online_support .center_box{width:calc(100% / 3 - 27px);display: flex;aspect-ratio:1;box-sizing:border-box;position: relative;border-radius:100%;margin-bottom:33px;align-items: center;justify-content: center;z-index:5;} .online_support .center_box:before{width:100%;height:100%;content:"";position: absolute;top:0;left:0;border:30px solid transparent;background:linear-gradient(0deg, var(--point-color15) 1%, var(--point-white) 49%, var(--point-color15) 100%) border-box;-webkit-mask:linear-gradient(var(--point-white) 0 0) content-box, linear-gradient(var(--point-white) 0 0);-webkit-mask-composite: xor;mask-composite: exclude;border-radius:100%;opacity:0.15;box-sizing:border-box;} .online_support .center_box .txt{width:calc(100% - 100px);display: flex;flex-direction: column;align-items: center;justify-content: center;aspect-ratio:1;background:linear-gradient(270deg, var(--point-color02) 0%, var(--point-color22) 81.83%);box-sizing:border-box;border-radius:100%;position: relative;text-align: center;font-size:var(--title-20);} .online_support .center_box .txt:before, .online_support .center_box .txt:after{width:10px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border-radius:100%;background: var(--point-white);position: absolute;top:50%;transform:translateY(-50%);} .online_support .center_box .txt:before{left:-5px;} .online_support .center_box .txt:after{right:-5px;} .online_support .center_box .txt > div{display: flex;flex-direction: column;align-items: center;justify-content: center;aspect-ratio:1;width:100%;;position: relative;text-align: center;} .online_support .center_box .txt > div:before, .online_support .center_box .txt > div:after{width:110px;;height:2px;content:"";background: var(--point-white);position: absolute;top:50%;transform:translateY(-50%);left:-110px;} .online_support .center_box .txt > div:after{left:auto;right:-110px;} .online_support .center_box .txt span{font-size:120%;color:var(--point-white);font-weight:500;line-height:1.16;} .online_support .center_box .txt strong{display: block;font-size:160%;color:var(--point-white);font-weight:700;line-height:1.25;margin-top:15px;} @media (max-width:1350px){ .online_support .support_list{width:calc(100% / 3 - 15px);} .online_support .support_list > ul > li p{font-size:18px;} .online_support .support_list .sub_list li{font-size:15px;} .online_support .support_list .sub_list li:before{top:9px;} .online_support .center_box{width:calc(100% / 3 - 50px);} } @media (max-width:1300px){ .online_support .support_box{align-items: flex-start;} .online_support .center_box{align-self: center;margin:30px 0 0 0;} .online_support .center_box:before{border-width:20px;} .online_support .center_box .txt{width:calc(100% - 60px);} } @media (max-width:1023px){ .online_support{padding:clamp(60px, 12vw, 120px) 0;} .online_support .support_box{gap:0 20px;margin-top:clamp(30px, 4.8vw, 48px);} .online_support .support_list{width:calc(100% / 3 + 20px);} .online_support .center_box{width:calc(100% / 3 - 80px);} .online_support .center_box:before{border-width:10px;} .online_support .center_box .txt{width:calc(100% - 30px);} .online_support .center_box .txt span{font-size:100%;} .online_support .center_box .txt strong{font-size:120%;} } @media (max-width:860px){ .online_support .support_box{flex-direction: column;} .online_support .center_box{width:100%;border-radius:200px;order:1;aspect-ratio:initial;padding:20px 20px;margin-top:0;margin-bottom:10px;} .online_support .center_box:before{border-radius:200px} .online_support .center_box .txt, .online_support .center_box .txt > div{aspect-ratio:initial;border-radius:200px;} .online_support .center_box .txt{padding:25px 0;} .online_support .center_box .txt strong br{display: none;} .online_support .center_box .txt:before, .online_support .center_box .txt:after, .online_support .center_box .txt > div:before, .online_support .center_box .txt > div:after{display: none;} .online_support .center_box .txt:after{display: block;width:6px;left:50%;translate:-50%;top:auto;bottom:-6px;} .online_support .center_box .txt span{font-size:110%;} .online_support .center_box .txt strong{font-size:140%;} .online_support .support_list{width:100%;} .online_support .support_list.tech_sup{order:2;} .online_support .support_list.sincerity_sup{order:3;margin-top:30px;} .online_support .support_list:before{width:2px;height:30px;content:"";background:var(--point-white);position: absolute;left:50%;translate:-50%;top:-30px;} .online_support .support_list > ul:before{display: none;} } @media (max-width:640px){ .online_support .center_box .txt{width:100%;;} .online_support .center_box .txt strong{margin-top:8px;} .online_support .support_list{padding:20px 15px;} }