@charset "utf-8"; /*─────────────────────────────────────────────────────────── " board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods " " layout/popup.html " 위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다. ** header, footer, main 관련은 /css/skin.css 에 있습니다. ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── common.css 커스텀 css 아래에 작성 ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── font common ───────────────────────────────────────────────────────────*/ body {}/*letter-spacing:-0.2px;*/ div, dd, li, p, span, td, dt, h1, h2, h3, h4, h5, h6, strong, b, em, th {} b, dt, strong, em, th, h1, h2, h3, h4, h5, h6 {font-weight:700;}/* Noto Sans KR은 500 사용 */ input, button, textarea, select {} /* webfont */ .ff_open {font-family: 'Open Sans', 'Nanum Gothic', sans-serif !important;} .ff_noto {font-family: "Noto Sans KR", 'Nanum Gothic', sans-serif !important;} .ff_mont {font-family: 'Montserrat', 'Nanum Gothic', sans-serif !important;} .ff_nanum {font-family: 'Lato','Nanum Gothic', dotum, sans-serif !important;} .ff_lato {font-family: 'Lato', 'Nanum Gothic', sans-serif !important;} .ff_nbg {font-family: 'Nanum Barun Gothic','Nanum Gothic', sans-serif !important;} .ff_open, .ff_open a, .ff_open span, .ff_open div, .ff_open ul, .ff_open li, .ff_open p {font-family: 'Open Sans' !important;} .ff_noto, .ff_noto a, .ff_noto span, .ff_noto div, .ff_noto ul, .ff_noto li, .ff_noto p {font-family: 'Noto Sans KR', 'Noto Sans' !important; font-weight:400;} /* font weight */ .fw_t {font-weight:300;} .fw_n {font-weight:400;} .fw_b {font-weight:700;}/* Noto Sans KR은 500 사용 */ .fw_eb {font-weight:800;}/* Noto Sans KR은 700 사용 */ /*** common ***/ /*** TABLE | 서브페이지 전체 사용 ( board / member / layout ) ***/ /*** BOARD ***/ /*** GOODS ***/ /*** MEMBER ***/ /*** SERVICE ***/ /*─────────────────────────────────────────────────────────── ** navigation, button 관련 css 영역 ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── navigation common ───────────────────────────────────────────────────────────*/ .nav_wrap {} .nav_wrap .nav_box {padding:7.0% 0 3% 0;border:0;margin:0;position:relative;z-index:1;} .nav_wrap .nav_box:after {clear:both;content:"";display:block;} .nav_wrap .nav_box h2 {font-size:40px;line-height:56px;padding:0;margin:0;text-align:center;color:#333;font-weight:600;z-index:1;} .nav_wrap .nav_box p {font-size:17px;line-height:22px;padding:1% 0 0 0;color:#666;font-weight:400;text-align:center;} .nav_wrap .nav_box ul {line-height:18px;top:20%;position:absolute;left:0;font-size:0;padding:0;z-index:5;display:block;} .nav_wrap .nav_box ul li {line-height:18px;height:18px;font-size:8px;text-align:left;vertical-align:top;padding:0;color:#aaa;display:inline-block;} .nav_wrap .nav_box ul li + li {padding-left:5px;} .nav_wrap .nav_box ul li span, .nav_wrap .nav_box ul li strong, .nav_wrap .nav_box ul li > a {line-height:18px;height:18px;padding:0 4px 0px 0;font-size:12px;display:inline-block;width:auto;color:#666;vertical-align:top;margin:0;box-sizing:border-box;} .nav_wrap .nav_box ul li a.home {padding-left:0px;font-size:12px;color:#666666;} .nav_wrap .nav_box ul li a.home:before {width:11px;height:11px;margin:0 5px 2px 0;content:"";display:inline-block;background:url("../images/common/sub_locate_home.png") no-repeat left center #333333;background-size:auto 13px;vertical-align:middle;} .nav_wrap .nav_box ul li:last-child a, .nav_wrap .nav_box ul li:last-child span, .nav_wrap .nav_box ul li:last-child strong {color:#444;font-weight:700;padding-right:0;} .nav_wrap .nav_box ul li .navi_select {min-width:150px;border: 1px solid #999;cursor: pointer;margin-top: -3px;position:relative;box-sizing: border-box;} .nav_wrap .nav_box ul li .navi_select .navi_tit {padding: 2px 10px;line-height: 18px;height: auto;display: block;} .nav_wrap .nav_box ul li .navi_select .navi_tit:after {content:"";display:inline-block;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #999;position:absolute;right: 10px;top: 9px;transition:all .2s;} .nav_wrap .nav_box ul li .navi_select ul {display:none;position:absolute;left: -1px;top: 100%;width:150px;background:#fff;padding:6px 0 6px 0;border: 1px solid #888;box-sizing: border-box;} .nav_wrap .nav_box ul li .navi_select ul li {display: block;line-height: 1;height: auto;font-size: 12px;padding: 0;} .nav_wrap .nav_box ul li .navi_select ul li a {display:block;padding:5px 10px;font-size: 12px;line-height: 1;height: auto;transition:all .2s;} .nav_wrap .nav_box ul li .navi_select ul li a:hover {background:#999;color:#fff;} .nav_wrap .nav_box ul li .navi_select:hover .navi_tit:after {transform: rotate(180deg);} .nav_wrap .nav_box ul li .navi_select:hover ul {display:block;} @media only screen and (max-width:1200px) { } @media only screen and (max-width:1023px) { .nav_wrap .nav_box {padding:4.0% 0 3.8% 0;} .nav_wrap .nav_box h2 {font-size:36px;line-height:42px;} .nav_wrap .nav_box p, .nav_wrap .nav_box ul {display:none;} } @media only screen and (max-width:860px) { .nav_wrap .nav_box {padding:4.8% 0 3.2% 0;} .nav_wrap .nav_box h2 {font-size:28px;line-height:32px;} } @media only screen and (max-width:767px) { } @media only screen and (max-width:640px) { .nav_wrap .nav_box {padding:6.2% 0 6% 0;} .nav_wrap .nav_box h2 {font-size:24px;line-height:28px;} } @media only screen and (max-width:479px) { .nav_wrap .nav_box {padding:0 0 0;margin-left:-12px;margin-right:-12px;width: calc(100% + 24px);} .nav_wrap .nav_box h2 {padding:8.8% 0 4.8% 0;margin-left: -12px;margin-right: -12px;font-size:20px;line-height:28px;} } /*─────────────────────────────────────────────────────────── button common ───────────────────────────────────────────────────────────*/ /* custom button type */ /* button 공통 요소 */ .btn, .btn_lg, .btn_sm, .btn_md {font-weight:700;border-style:solid !important;border-width:1px !important;padding:0;margin:0;text-indent:0;vertical-align:top !important;text-align:center;display:inline-flex; align-items:center; justify-content:center;box-sizing:border-box;cursor:pointer;box-shadow:none;outline:0 !important; border-radius:30px;} /* button 크기별 */ .btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;} .btn {width:160px;height:60px;line-height:1;font-size:20px; font-weight:bold;} .btn_lg {width:92px;height:72px;line-height:70px;font-size:14px;} .btn_md {width:60px;line-height:28px;height:30px;font-size:13px;} .btn_sm {height:30px;line-height:28px;width:auto !important;padding:0 8px;font-size:inherit;border-color:#aaa !important;background-color:#aaa !important;color:#fff !important;} /* button 색상별 */ .btn_point, .btn_point:hover {border-color:#f38d09 !important;background-color:#f38d09 !important;color:#fff !important;} .btn_basic, .btn_basic:hover {border-color:#777 !important;background-color:#777 !important;color:#fff !important;} .btn_default, .btn_default:hover {border-color:#aaa !important;background-color:#aaa !important;color:#fff !important;} .btn_info, .btn_info:hover {border-color:#d3d3d3 !important;background-color:#fff !important;color:#555 !important;} .btn_reset, .btn_reset:hover {border-color:#d3d3d3 !important;background:#fff url(../images/common/icon_btn_reset.gif) no-repeat 9px 50% !important;padding:0 10px 0 30px !important;color:#555 !important;} /* button wrapper */ .btn_wrap {margin:0 auto;padding:0;padding-top:60px;font-size:0;vertical-align:top;display:inline-block;} .btn_wrap.ta_center {width:100%;} .btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a {margin-left:15px;vertical-align:top;} .btn_wrap button > a, .btn_wrap a > a{margin-left:0;} .view_btn .btn_wrap.ta_right {position:absolute;right:0px;top:0px;} @media only screen and (max-width:1297px) { .btn {width:150px;height:55px; font-size:19px;} } @media only screen and (max-width:1023px) { /* button wrapper */ .view_btn .btn_wrap.ta_left {position:absolute;left:0px;top:0px;} .btn {width:140px;height:50px; font-size:18px;} } @media only screen and (max-width:860px) { } @media only screen and (max-width:767px) { .btn {width:130px;height:45px; font-size:16px;} } @media only screen and (max-width:640px) { .btn_wrap{padding-top:40px;} } @media only screen and (max-width:479px) { /* button 크기별 */ .btn {width:120px;height:40px; font-size:15px;} .btn_wd {font-size:16px;} .btn_lg {width:72px;font-size:13px;} .btn_md {width:60px;font-size:12px;} .btn_sm {padding:0 4px;font-size:12px;} /* button wrapper */ .btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a {margin-left:6px;} .view_btn .paging {width:100%;min-height:87px;} .view_btn .paging + .btn_wrap.ta_right{top:70px;} } @media only screen and (max-width:431px) { .btn {width:110px} } @media only screen and (max-width:320px) { /* button 크기별 */ .btn_md {width:44px;font-size:12px;} } /*─────────────────────────────────────────────────────────── 서브 공통 ───────────────────────────────────────────────────────────*/ /* 서브 비주얼 */ .sub_visual{position:relative;height:400px;background:linear-gradient(45deg, rgba(0,218,236,1) 0%, rgba(0,218,236,1) 10%, rgba(0,5,235,1) 100%);border-radius:0 0 60px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom: 114px; text-align:center;} .sub_visual .cont{position:relative; z-index:6; padding-top:110px; } .sub_visual h3{font-size:60px; font-weight:900; color:#fff;} .sub_visual h3 + p{margin-top: 30px;} .sub_visual p{font-size:18px; font-weight:400; color:#fff;letter-spacing:0.01em; line-height:145%;} .sub_visual p + p{margin-top: 11px;} .sub_visual p a{font-size:inherit; font-weight:inherit; color:inherit;} .sub_visual p a.tel:before{display:inline-flex; content:''; width:25px; height:25px; background:url('../images/sub/sub_visual_tel.png') no-repeat center; margin-right:15px; vertical-align:middle;} .sub_visual p a.mail:before{display:inline-flex; content:''; width:25px; height:25px; background:url('../images/sub/sub_visual_mail.png') no-repeat center; margin-right:15px; vertical-align:middle;} .sub_visual .bg_icon{position:absolute; font-size:0;} .sub_visual .bg_icon.icon01{top: 21.2%;left: -8.7%;z-index: 2;} .sub_visual .bg_icon.icon02{top: -45%;right: -11.3%;z-index: 1;} .sub_visual .bg_icon.icon03{top: 30%;left: -12%;z-index: 1;} .sub_visual .bg_icon.icon04{top: 27%;right: -7.5%;} .sub_visual .bg_icon.icon05{top: -166%;left: -14.5%;} /* 키프레임 */ .sub_visual .bg_icon{animation-name: sub_visualBg; animation-duration:2s; animation-duration: leaner; animation-iteration-count:infinite; animation-direction:alternate; animation-fill-mode: forwards;} .sub_visual .bg_icon.icon02{animation-duration:2.5s; } .sub_visual .bg_icon.icon03{animation-duration:3s; } .sub_visual .bg_icon.icon04{animation-duration:3.5s; } .sub_visual .bg_icon.icon05{animation-duration:4s; } @keyframes sub_visualBg{ 0%{transform: translateY(30px);} 100%{transform: translateY(0);} } /* 타이틀 */ .sub_tittle{} .sub_tittle.center{text-align:center;} .sub_tittle.hd{margin-bottom:66px;} .sub_tittle h4{font-size:32px; font-weight:bold; color:#333; line-height:135%;} .sub_tittle h4 + h5{margin-top: 17px;} .sub_tittle h5{font-size:22px;font-weight:400;color:#444;line-height:135%;letter-spacing: 0;} .sub_tittle h4 small{font-size:78%; font-weight:700; color:inherit;} .sub_tittle h4 small strong{color:#f38d09;} .sub_tittle p{font-size:18px; font-weight:400; color:#333; line-height:188%;} /* 인풋 */ #wrap input[type="text"], #wrap input[type="password"], #wrap input[type="number"], #wrap textarea{border:1px solid #ddd; border-radius:6px; padding:0 20px; box-sizing:border-box;} #wrap input[type="text"]:focus, #wrap input[type="password"]:focus, #wrap input[type="number"]:focus, #wrap textarea:focus{outline:none; border-color:#000;} #wrap input[type="text"]::placeholder, #wrap input[type="password"]::placeholder, #wrap input[type="number"]::placeholder{color:#999;} #wrap textarea{padding-top:17px; padding-bottom:17px; resize:none;} #wrap .textarea_wrap{background:#f5f5f5; padding:10px;} #wrap .textarea_wrap textarea{background:#f5f5f5; border:0; padding:17px 20px; font-size:16px; color:#888; letter-spacing:-0.05em; line-height:162%;} #wrap .textarea_wrap textarea::-webkit-scrollbar { width: 4px;} #wrap .textarea_wrap textarea::-webkit-scrollbar-thumb {background-color: #888; border-radius: 0;} #wrap .textarea_wrap textarea::-webkit-scrollbar-track {border-radius: 0;background:#ccc;} #wrap input[type="checkbox"] { display:none; } #wrap input[type="checkbox"] + label {cursor:pointer;} #wrap input[type="checkbox"] + label strong{font-weight:inherit; font-size:inherit; color:#f38d09;} #wrap input[type="checkbox"] + label:before, input[type="checkbox"] + label::before { display:inline-block; content:""; width:25px; height:25px; margin:-2px 15px 0 0; vertical-align:middle; background:url("../images/sub/icon_chk.png") no-repeat 0 50%; cursor:pointer; } #wrap input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked + label::before { background:url("../images/sub/icon_chk_on.png") no-repeat 0 50%; } /* sub_location */ .sub_location{display:none; align-items:center; justify-content:center; height:45px; padding:0 15px; box-sizing:border-box; border-bottom:1px solid #ddd; margin-top:-114px; margin-bottom:114px;} .sub_location li{} .sub_location li + li{margin-left:30px;} .sub_location li a{font-size:15px; font-weight:600; color:#333;} .sub_location li.on a{color:#f38d09;} @media only screen and (max-width:1297px){ .sub_visual .cont{padding-top:8vw;} .sub_visual h3{font-size:4.6vw;} .sub_visual p{font-size:17px;} .sub_visual .bg_icon.icon01{width: 38.6vw;} .sub_visual .bg_icon.icon02{width: 45.3vw;} .sub_visual .bg_icon.icon03{width: 111.9vw;} .sub_visual .bg_icon.icon04{width: 78.5vw;} .sub_visual .bg_icon.icon05{width: 114.4vw;} .sub_tittle h4{font-size:30px;} .sub_tittle h5{font-size:21px;} #wrap .textarea_wrap textarea{font-size:15px;} } @media only screen and (max-width:1023px){ .sub_visual{height:37vw; min-height:180px;} .sub_visual .cont{padding-top:0;} .sub_tittle h4{font-size:28px;} .sub_tittle h5{font-size:20px;} #wrap input[type="text"], #wrap input[type="password"], #wrap input[type="number"], #wrap textarea{padding-left:15px; padding-right:15px;} #wrap textarea{padding-top:10px; padding-bottom:10px;} .sub_location{display:flex; } } @media only screen and (max-width:860px){ .sub_visual{margin-bottom:80px;} .sub_tittle.hd{margin-bottom:40px;} .sub_tittle h4{font-size:26px;} .sub_tittle h5{font-size:19px;} .sub_visual p{font-size:16px;} .sub_visual p a.tel:before, .sub_visual p a.mail:before{width:22px; height:22px; background-size:100% auto;} #wrap .textarea_wrap textarea{font-size:14px;} .sub_location{margin-top:-80px; margin-bottom:80px;} } @media only screen and (max-width:640px){ .sub_visual{border-radius:0 0 30px;} .sub_visual h3{font-size:29px;} .sub_visual h3 + p{margin-top:20px;} .sub_tittle h4{font-size:24px;} .sub_tittle h5{font-size:17px;} .sub_visual p{font-size:15px;} .sub_visual p a.tel:before, .sub_visual p a.mail:before{width:20px; height:20px; } #wrap input[type="text"], #wrap input[type="password"], #wrap input[type="number"], #wrap textarea{border-radius:3px;} #wrap input[type="checkbox"] + label:before, input[type="checkbox"] + label::before{width:20px; height:20px; background-size:100% !important; margin-right:10px;} #wrap .textarea_wrap textarea{font-size:13px; padding:7px 10px;} } @media only screen and (max-width:479px){ .sub_visual{margin-bottom:50px;} .sub_visual h3{font-size:27px;} .sub_visual h3 + p{margin-top:15px;} .sub_tittle.hd{margin-bottom:30px;} .sub_tittle h4{font-size:22px;} .sub_tittle h4 + h5{margin-top:12px;} .sub_tittle h5{font-size:15px;} .sub_visual p{font-size:14px;} .sub_visual p + p{margin-top: 7px;} .sub_visual p a.tel:before, .sub_visual p a.mail:before{width:18px; height:18px; margin-right:10px;} .sub_location{margin-top:-50px; margin-bottom:50px;} } @media only screen and (max-width:431px){ .sub_tittle.hd{margin-bottom:25px;} .sub_tittle h4{font-size:20px;} .sub_tittle h4 + h5{margin-top:10px;} .sub_tittle h5{font-size:14px;} } @media only screen and (max-width:374px){ .sub_visual h3{font-size:25px;} .sub_tittle h4{font-size:18px;} .sub_tittle h4 + h5{margin-top:7px;} .sub_tittle h5{font-size:13px;} .sub_visual p{font-size:13px;} .sub_visual p + p{margin-top: 5px;} .sub_visual p a.tel:before, .sub_visual p a.mail:before{width:16px; height:16px; } } /*─────────────────────────────────────────────────────────── board ───────────────────────────────────────────────────────────*/ /*** TABLE write ( board/_form_board_write ｜ board/_form_board_answer_write ｜ member/join ｜ member/mypage ｜ member/withdrawal ｜ member/change_pw ｜ member/periodic_change_pw ) ***/ #wrap .table_wrap{border:1px solid #333;border-radius:10px;overflow:hidden;box-sizing:border-box;padding: 27px 0;} #wrap .table_wrap.point{border-color:#f38d09;} #wrap .table_wrap.gray{border-color:#ddd;} #wrap .table_wrap.policy{padding-top:12.5px; padding-bottom:12.5px;} #wrap .table_wrap + .table_wrap{margin-top:40px;} #wrap table.bbs_write {table-layout:fixed;width:100%;text-align:left;box-sizing:border-box; border:0} #wrap table.bbs_write.bbs_title{} #wrap table.bbs_write th, #wrap table.bbs_write td{font-size:17px;padding-top:12.5px;padding-bottom:12.5px;padding-left:20px;padding-right:40px;line-height:30px;border-bottom: 0;font-weight:300;color:#333;text-align:left;vertical-align:middle;box-sizing:border-box;letter-spacing: -0.05em;} #wrap table.bbs_write th {padding-left:40px;padding-right:20px;font-size: 20px;font-weight: bold;color:#444;background-color: #fff;} #wrap table.bbs_write th span.important{font-size:inherit; font-weight:inherit; color:inherit;} #wrap table.bbs_write th span.important:after{display:inline-flex; content:'*'; color:#f38d09; margin-left:4px; vertical-align:top;} #wrap table.bbs_write td {} #wrap table.bbs_write th, #wrap table.bbs_write td, #wrap table.bbs_write tr span, #wrap table.bbs_write tr input, #wrap table.bbs_write tr select {vertical-align:middle;} #wrap table.bbs_write tr span, #wrap table.bbs_write tr input, #wrap table.bbs_write tr select, #wrap table.bbs_write tr label {color:#666;font-size:inherit;font-weight:400;} #wrap table.bbs_write tr select {background:#fff;} #wrap table.bbs_write tr label.ex_radio {width:100%;display:block;} #wrap table.bbs_write tr input[type="radio"] + label.ex_radio:before, #wrap table.bbs_write tr input[type="radio"] + label.ex_radio::before {margin:-2px 5px 0 0;} #wrap table.bbs_write tr td #captcha_box {display:inline-block;width:auto;vertical-align:middle;margin:0;} #wrap table.bbs_write tr td input[name="captcha"], #wrap table.bbs_write tr td .btn_reset, #wrap table.bbs_write tr td #refreshCode {vertical-align:middle !important;} #wrap table.bbs_write th .require_dot, #wrap table.bbs_write th .require_dot:before {line-height:inherit;height:inherit;color:#444;font-weight:400;display:inline-block;} #wrap table.bbs_write th .require_dot {padding-left:4px;} #wrap table.bbs_write th .require_dot:before {content:' *';font-size:inherit;vertical-align:middle;} #wrap table.bbs_write td p {line-height:20px;padding:5px 0 0;font-size:inherit;display:inline-block;margin:0;vertical-align:top;} #wrap table.bbs_write td div.view_cont {padding:8px 10px 50px 10px; line-height:26px; min-height:150px;} #wrap table.bbs_write td select, #wrap table.bbs_write td input[type="text"], #wrap table.bbs_write td input[type="password"], #wrap table.bbs_write td input[type="number"], #wrap table.bbs_write td input[type="date"] {min-width:25%;width: 100%; height:55px;} #wrap table.bbs_write td input[name="title"] {width:100%;} #wrap table.bbs_write td input[name="zip"] {width:80px;min-width:70px;} #wrap table.bbs_write td input[name="address"], #wrap table.bbs_write td input[name="address2"] {width:55%;min-width:450px;} #wrap table.bbs_write td input.tel {min-width:50px;} #wrap table.bbs_write td textarea {min-width:100%;height:100px;} #wrap table.bbs_write td select.mail_select {margin-left:0px;margin-right:5px;} #wrap table.bbs_write td input[name="email_id"] {width:16%;min-width:120px;} #wrap table.bbs_write td input[name="email_domain"], #wrap table.bbs_write td select.mail_select {width:20%;min-width:140px;} #wrap table.bbs_write td input[name="email_domain"] {display:inline-block !important;} #wrap table.bbs_write .input_file {} #wrap table.bbs_write .input_file td, #wrap table.bbs_write .input_file td input {vertical-align:middle;} #wrap table.bbs_write td .file_name {display: inline-block;vertical-align: top;} #wrap table.bbs_write td .file_name a {display:inline-block;vertical-align:middle;line-height:23px;} #wrap table.bbs_write td .file_name .file_no {margin-left:5px;} #wrap table.bbs_write td .at {display:inline-block;vertical-align:middle;margin:0 0 0 3px;} #wrap table.bbs_write .input_email input {display:inline-block !important;} #wrap table.bbs_write .file_wrap{position:relative;display:inline-block;vertical-align:middle;margin-right: 24px;} #wrap table.bbs_write .file_wrap .file_name{width:370px; padding-right:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #wrap table.bbs_write .file_wrap input[type="file"] + label{position:absolute; top:0; right:0; display:inline-flex; align-items:center; justify-content:center; width:130px; height:100%; background:#333; color:#fff; border-radius:0 6px 6px 0; cursor:pointer;} #wrap table.bbs_write .noti_wrap{display:block; margin-top:15px;} #wrap table.bbs_write p.noti{display:inline-block; font-size:16px;color:#666;vertical-align:middle;font-weight: 500;padding: 0;letter-spacing: 0.03em; line-height:145%;} #wrap table.bbs_write p.noti a{font-size:inherit; font-weight:bold; color:#333;} #wrap table.bbs_write p.noti a.mailto{cursor:inherit;} #wrap table.bbs_write .mail_copy_btn{display:inline-flex;font-size:16px;color:#444;border:1px solid #050001;box-sizing:border-box;border-radius:4px;margin-left:10px;cursor:pointer;padding: 5px 9px;line-height: 1;font-weight: 500;} /* 캡챠 */ #wrap table.bbs_write tr td .captcha_box{margin: 0 7px 0 0;border:1px solid #ddd;padding: 7px 10px 6px;border-radius:4px;overflow:hidden;font-size:0;box-sizing: border-box; display:inline-block; vertical-align:middle;} #wrap table.bbs_write tr td .captcha_box img#captcha{} #wrap table.bbs_write tr td .captcha_box #refreshCode{font-size:0; padding:0 !important; width:40px !important; height:40px !important; background:#fff url(../images/common/icon_btn_reset.gif) no-repeat 50% 50% !important; border-radius:4px; overflow:hidden; margin-left:10px;} #wrap table.bbs_write tr td input#captcha{width: 200px;min-width: 20px; height:55px;} /* 게시판 개인정보취급 */ #wrap table.bbs_write .policy_cont {position:relative;} #wrap table.bbs_write .policy_cont > div {padding:0;} #wrap table.bbs_write .policy_cont > div input[type=checkbox] {} #wrap table.bbs_write .policy_cont > div label {margin:0;} #wrap table.bbs_write .policy_cont .toggle_btn{position:absolute; top:0; right:0; font-size:16px; font-weight:400; color:#666;} #wrap table.bbs_write .policy_cont .toggle_btn:after{display:inline-flex;content:'';width:7px;height:7px;border:1px solid #fff0;border-top-color:#666;border-right-color:#666;margin-left:12px;transform: rotate(135deg) translate(-1px, 5px);} #wrap table.bbs_write .policy_cont .toggle_btn.on:after{transform: rotate(-45deg) translate(-3px, -1px);border-top-color:#666;border-right-color:#666;} #wrap table.bbs_write .policy_cont .textarea_wrap{margin-top:30px;} #wrap table.bbs_write .policy_cont .textarea_wrap textarea {height:110px;} @media only screen and (max-width:1297px){ #wrap table.bbs_write th{font-size:19px;} #wrap table.bbs_write td{font-size:17px;} #wrap table.bbs_write p.noti{font-size:15px; } #wrap table.bbs_write .policy_cont .textarea_wrap{margin-top:25px;} #wrap table.bbs_write .policy_cont .toggle_btn{font-size:15px;} #wrap table.bbs_write .mail_copy_btn{font-size:15px;} } @media only screen and (max-width:1023px){ #wrap table.bbs_write th{font-size:18px; padding-left:30px; padding-right:7.5px;} #wrap table.bbs_write td{font-size:16px; padding-right:30px; padding-left:7.5px;} #wrap table.bbs_write td select, #wrap table.bbs_write td input[type="text"], #wrap table.bbs_write td input[type="password"], #wrap table.bbs_write td input[type="number"], #wrap table.bbs_write td input[type="date"]{height:50px;} #wrap table.bbs_write .policy_cont .textarea_wrap{margin-top:20px;} #wrap table.bbs_write.bbs_bottom td{padding-left:30px; padding-right:30px;} #wrap table.bbs_write .mail_copy_btn{font-size:14px;} } @media only screen and (max-width:900px){ #wrap table.bbs_write p.noti{display:block;} #wrap table.bbs_write .mail_copy_btn{margin:10px 0 0;} } @media only screen and (max-width:860px){ #wrap table.bbs_write th{font-size:17px; padding-left:20px;} #wrap table.bbs_write td{font-size:15px; padding-right:20px;} #wrap table.bbs_write p.noti{font-size:14px;} #wrap table.bbs_write .policy_cont .toggle_btn{font-size:14px;} #wrap table.bbs_write .policy_cont .textarea_wrap{margin-top:15px;} #wrap table.bbs_write.bbs_bottom td{padding-left:20px; padding-right:20px;} } @media only screen and (max-width:767px){ #wrap .table_wrap.policy{padding-top:30px; padding-bottom:30px;} #wrap table.bbs_write tr{display:flex; width:calc(100vw - 30px); flex-wrap:wrap;} #wrap table.bbs_write tr + tr, #wrap table.bbs_write tr td + th{margin-top:10px;} #wrap table.bbs_write tr th, #wrap table.bbs_write tr td{width:100%; padding:0 15px;} #wrap table.bbs_write tr th + td{margin-top:5px;} #wrap table.bbs_write th{font-size:16px;} #wrap table.bbs_write td{font-size:14px; } #wrap table.bbs_write td select, #wrap table.bbs_write td input[type="text"], #wrap table.bbs_write td input[type="password"], #wrap table.bbs_write td input[type="number"], #wrap table.bbs_write td input[type="date"]{height:45px;} #wrap table.bbs_write.bbs_content th{display:block;} #wrap table.bbs_write .policy_cont .toggle_btn{font-size:13px;} #wrap table.bbs_write .policy_cont .textarea_wrap{margin-top:12px;} #wrap table.bbs_write.bbs_bottom td{padding-left:15px; padding-right:15px;} } @media only screen and (max-width:640px){ #wrap table.bbs_write p.noti, #wrap table.bbs_write .mail_copy_btn{font-size:13px;} } @media only screen and (max-width:540px){ #wrap table.bbs_write tr td input#captcha{width:100%; height:45px; margin-top:10px;} } @media only screen and (max-width:479px){ #wrap .table_wrap{border-radius:5px;} #wrap table.bbs_write th{font-size:15px;} #wrap table.bbs_write tr th + td{margin-top:3px;} #wrap table.bbs_write td select, #wrap table.bbs_write td input[type="text"], #wrap table.bbs_write td input[type="password"], #wrap table.bbs_write td input[type="number"], #wrap table.bbs_write td input[type="date"]{height:40px;} #wrap table.bbs_write .file_wrap{width:100%;} #wrap table.bbs_write .file_wrap .file_name{width:100%; padding-right:115px;} #wrap table.bbs_write .file_wrap input[type="file"] + label{width:100px;} #wrap table.bbs_write tr td input#captcha{height:40px;} } @media only screen and (max-width:431px){ #wrap table.bbs_write th{font-size:14px;} #wrap table.bbs_write td{font-size:14px;} #wrap table.bbs_write .policy_cont .toggle_btn{display:block; position:relative; top:0; right:0;text-align:right; line-height:145%;} #wrap table.bbs_write p.noti, #wrap table.bbs_write .mail_copy_btn{font-size:12px;} } @media only screen and (max-width:350px){ } /*** FAQ ***/ /* 말머리 */ .preface_list{display:flex; justify-content:center; margin-bottom:50px;} .preface_list > li{} .preface_list > li + li{margin-left:20px;} .preface_list > li a{display:flex; align-items:center; height:70px; font-size:19px; font-weight:400; color:#333; background:#f5f5f5; border-radius:35px; padding:0 49px; transition:all 0.4s; box-sizing:border-box;} .preface_list > li a.on{background:#f38d09; font-weight:bold; color:#fff;} /* over */ @media only screen and (min-width:1024px){ .preface_list > li a:hover{background:#f38d09; font-weight:bold; color:#fff;} } /* FAQ List */ .faq_list{border-top:2px solid #000;} .faq_list > li{border-bottom:1px solid #ddd; width:100%; box-sizing:border-box;} .faq_list > li dl{} .faq_list > li dl .question, .faq_list > li dl .answer{position:relative;} .faq_list > li dl .question:before, .faq_list > li dl .answer:before{position:absolute; width:40px; height:40px; border-radius:100%; top:30px; left:60px; font-size:20px; font-weight:bold; color:#fff; display:inline-flex; align-items:center; justify-content:center; padding-top:2px; box-sizing:border-box;} .faq_list > li dl .question:before{content:'Q'; background:#333; top:50% !important; transform:translateY(-50%) !important;} .faq_list > li dl .answer:before{content:'A'; background:#f38d09; padding-left:2px;} .faq_list > li dl .question{font-size:20px;font-weight:bold;color:#333;padding: 38px 140px; cursor:pointer; line-height:135%;} .faq_list > li dl .question:after{position:absolute;content:'';top: 35px;right: 64px;width:16px;height:16px;border:1px solid #fff0;border-bottom-color:#333;border-right-color:#333;transform: rotate(45deg);} .faq_list > li dl .question.on:after{border-bottom-color:#fff0;border-right-color:#fff0;border-top-color:#f38d09;border-left-color:#f38d09;top: 47px;} .faq_list > li dl .answer{display:none; font-size:16px;font-weight:400;color:#666;line-height:187%;background:#f5f5f5;padding: 35px 140px; border-top:1px solid #ddd;} @media only screen and (max-width:1297px){ .preface_list > li a{font-size:18px; height:65px;} .faq_list > li dl .question{font-size:19px;} .faq_list > li dl .question:before, .faq_list > li dl .answer:before{font-size:19px;} } @media only screen and (max-width:1023px){ .preface_list{margin-bottom:40px;} .preface_list > li + li{margin-left:15px;} .preface_list > li a{font-size:17px; height:60px;} .faq_list > li dl .question{padding:36px 120px; font-size:18px;} .faq_list > li dl .answer{padding:32px 120px; font-size:15px; line-height:160%;} .faq_list > li dl .question:before, .faq_list > li dl .answer:before{left:50px; top:25px; font-size:18px;} .faq_list > li dl .question:after{width:14px; height:14px; right:50px;} } @media only screen and (max-width:860px){ .preface_list{margin-bottom:35px;} .preface_list > li a{font-size:16px; height:55px; padding:0 40px;} .faq_list > li dl .question{padding:34px 80px; font-size:17px;} .faq_list > li dl .answer{padding:32px 80px;font-size:14px;} .faq_list > li dl .question:before, .faq_list > li dl .answer:before{left:30px; top:25px; font-size:17px; width:36px; height:36px;} .faq_list > li dl .question:after{width:12px; height:12px; right:30px; top:32px;} .faq_list > li dl .question.on:after{top:42px;} #wrap .table_wrap + .table_wrap{margin-top:30px;} } @media only screen and (max-width:640px){ .preface_list{margin-bottom:30px;} .preface_list > li a{font-size:15px; height:50px; padding:0 35px;} .faq_list > li dl .question{padding: 26px 62px;font-size:16px;} .faq_list > li dl .answer{padding: 26px 62px;font-size:13px;} .faq_list > li dl .question:before, .faq_list > li dl .answer:before{left:15px;top: 19px;font-size:16px;width: 31px;height: 31px;} .faq_list > li dl .question:after{width:10px;height:10px;right:15px;top: 24px;} .faq_list > li dl .question.on:after{top: 34px;} #wrap .table_wrap + .table_wrap{margin-top:20px;} } @media only screen and (max-width:479px){ .preface_list{margin-bottom:25px;} .preface_list > li a{font-size:14px; height:45px; padding:0 30px;} .faq_list > li dl .question{padding: 21px 45px 21px 55px;font-size:15px;} .faq_list > li dl .answer{padding: 18px 45px 18px 55px;font-size: 12px;} .faq_list > li dl .question:before, .faq_list > li dl .answer:before{left:15px;top: 14px;font-size:15px;width: 28px;height: 28px;padding-left: 0;} .faq_list > li dl .question:after{width: 8px;height: 8px;right:15px;top: 22px;} .faq_list > li dl .question.on:after{top: 28px;} #wrap .table_wrap + .table_wrap{margin-top:15px;} } @media only screen and (max-width:431px){ .preface_list{margin-bottom:20px; justify-content:space-between;} .preface_list > li{width:100%;} .preface_list > li a{font-size:14px; height:40px; padding:0 15px; justify-content:center;} } @media only screen and (max-width:374px){ .preface_list > li a{font-size:13px; height:38px; padding:0 15px;} .faq_list > li dl .question{padding: 20px 45px 20px 55px;font-size:14px;} .faq_list > li dl .answer{} .faq_list > li dl .question:before, .faq_list > li dl .answer:before{left:15px;top: 14px;font-size: 14px;width: 29px;height: 28px;padding-left: 0;} .faq_list > li dl .question:after{width: 8px;height: 8px;right:15px;top: 22px;} .faq_list > li dl .question.on:after{top: 28px;} } @media only screen and (max-width:320px){ .preface_list > li + li{margin-left:10px;} } /*─────────────────────────────────────────────────────────── goods ───────────────────────────────────────────────────────────*/ #wrap .sub_list .list_array{margin:0 0 30px;} #wrap .sub_list .list_array .list_count{font-size:15px;line-height:135%;height:auto;font-weight:400;vertical-align:top;display:inline-block;text-align:left; color:#333; float:none;} #wrap .sub_list .list_array .list_count strong {color:#333;font-weight:900;} /* 갤러리형 | layout/goods/gallery.html */ #wrap .sub_list .list_Galleryform ul {margin:0;padding:0; display:flex; flex-wrap:wrap;} #wrap .sub_list .list_Galleryform ul li {float:none; width: calc(100% / 3 - 24px); margin:0 36px 0 0;box-sizing:border-box;position:relative;z-index:1;} #wrap .sub_list .list_Galleryform ul li:nth-child(3n){margin-right:0;} #wrap .sub_list .list_Galleryform ul li:nth-child(n+4){margin-top:60px;} #wrap .sub_list .list_Galleryform ul li > a {} #wrap .sub_list .list_Galleryform ul li .thumb {padding:0;width:100%;border:0;font-size:0;margin:0;height:281.5px;position:relative;z-index:1;text-align:center;box-sizing:border-box;overflow:hidden;vertical-align:top; border-radius:10px; box-shadow:4.5px 7.8px 21px 0 rgba(0, 0, 0, 0.38);} #wrap .sub_list .list_Galleryform ul li .thumb img {width:100%;height:100%; object-fit:cover; transform:none;position:relative;left:auto;top:auto;vertical-align:top;} #wrap .sub_list .list_Galleryform ul li .txt_info {padding-top:32px;margin:0;width:100%; text-align:center;} #wrap .sub_list .list_Galleryform ul li .txt_info span {font-size:15px;line-height:1;height:auto;color:#666;font-weight:900; letter-spacing:0;} #wrap .sub_list .list_Galleryform ul li .txt_info strong{display:block; padding: 15px 0 0 0; font-size: 20px; font-weight: 600; color: #333} #wrap .sub_list .list_Galleryform ul li .txt_info p{padding:0; font-size:inherit; font-weight:inherit; color:inherit;} /* pagaing wrap */ #wrap .paging {text-align:center;padding-top:2px;line-height:35px;font-size:0;margin:2.8% auto 0 auto;vertical-align:top;box-sizing:border-box;} #wrap .paging span {display:inline-block;vertical-align:top;} #wrap .paging a {display: inline-flex;font-size: 13px;color:#777;padding:0 5px;border: 0;box-sizing:border-box;height: 32px;line-height: 1;min-width: 32px;text-align:center;vertical-align:top;align-items: center;justify-content: center;border-radius: 100%;} #wrap .paging a img {height:33px;width:33px;vertical-align:top;} #wrap .paging span + span a, #wrap .paging a + a, #wrap .paging a + span a{border-left:0;} #wrap .paging .on a{color: #f38d09;font-weight:bold;border: 1px solid #f38d09;} #wrap .paging a.on{color:#222222;font-weight:700;} #wrap .paging .arrow a {font-size:0;width:34px;} #wrap .paging .arrow a img {display:none;} #wrap .paging .arrow.first a {background:#fff url("../images/common/paging_first.gif") no-repeat left 50%;background-size:cover;} #wrap .paging .arrow.prev a {background:#fff url("../images/common/paging_prev.gif") no-repeat left 50%;background-size:cover;} #wrap .paging .arrow.next a {background:#fff url("../images/common/paging_next.gif") no-repeat right 50%;background-size:cover;} #wrap .paging .arrow.last a {background:#fff url("../images/common/paging_last.gif") no-repeat right 50%;background-size:cover;} #wrap .view_btn {text-align:center;line-height:40px;position:relative;min-height:80px;} #wrap .view_btn .paging {display:inline-block;} @media only screen and (max-width:1297px){ #wrap .sub_list .list_Galleryform ul li .thumb{height:21.7vw;} #wrap .sub_list .list_array{margin-bottom:25px;} #wrap .sub_list .list_Galleryform ul li .txt_info strong{font-size:19px;} } @media only screen and (max-width:1023px){ #wrap .sub_list .list_array{margin-bottom:20px;} #wrap .sub_list .list_Galleryform ul li .thumb{height:22vw;} #wrap .sub_list .list_Galleryform ul li {width: calc(100% / 3 - 10px); margin-right:15px;} #wrap .sub_list .list_Galleryform ul li .txt_info strong{font-size:18px;} } @media only screen and (max-width:860px){ #wrap .sub_list .list_Galleryform ul li {width: calc(100% / 2 - 7.5px);} #wrap .sub_list .list_Galleryform ul li:nth-child(3n){margin-right:15px;} #wrap .sub_list .list_Galleryform ul li:nth-child(2n){margin-right:0;} #wrap .sub_list .list_Galleryform ul li:nth-child(n+3){margin-top:50px;} #wrap .sub_list .list_Galleryform ul li .thumb{height:33vw;} #wrap .sub_list .list_Galleryform ul li .txt_info{padding-top:25px;} #wrap .sub_list .list_Galleryform ul li .txt_info span{font-size:14px;} #wrap .sub_list .list_Galleryform ul li .txt_info strong{font-size:17px; padding-top:12px;} } @media only screen and (max-width:767px){ #wrap .sub_list .list_Galleryform ul li .txt_info{padding-top:20px;} #wrap .sub_list .list_Galleryform ul li .txt_info span{font-size:13px;} #wrap .sub_list .list_Galleryform ul li .txt_info strong{font-size:16px; padding-top:10px;} } @media only screen and (max-width:640px){ #wrap .sub_list .list_array{margin-bottom:15px;} #wrap .sub_list .list_array .list_count{font-size:14px;} #wrap .sub_list .list_Galleryform ul li:nth-child(n+3){margin-top:40px;} #wrap .sub_list .list_Galleryform ul li .thumb{border-radius:5px;} } @media only screen and (max-width:479px){ #wrap .sub_list .list_array{margin-bottom:12px;} #wrap .sub_list .list_Galleryform ul li .txt_info span{font-size:12px;} #wrap .sub_list .list_Galleryform ul li .txt_info strong{font-size:15px; padding-top:8px;} } /* 상세페이지 | goods/goods_view.html */ #wrap .sub_view {} #wrap .sub_view .goods_info {display:flex; align-items:flex-start;} #wrap .sub_view .goods_info .thumb {width: 630px; height:440px; border:1px solid #ccc;border-radius: 10px;overflow: hidden;box-shadow: 4.5px 7.8px 21px 0 rgba(0, 0, 0, 0.38);box-sizing: border-box; } #wrap .sub_view .goods_info .thumb img{width:100%; height:100%; object-fit:cover;} #wrap .sub_view .goods_info .info_cont {width: calc(100% - 630px); padding: 0 0 0 80px;box-sizing:border-box;} #wrap .sub_view .item_detail_tit{position:relative; padding: 0 0 30px 0; border-bottom: 1px solid #ccc;} #wrap .sub_view .item_detail_tit .sample_name{display: block; font-size: 15px; font-weight: 500; color: #666; margin-bottom: 15px} #wrap .sub_view .item_detail_tit .skin_name{font-size: 36px; font-weight: 600; color: #333} #wrap .sub_view .item_detail_tit .skin_name p{margin:0; font-size:inherit; font-weight:inherit; color:inherit; height:auto; line-height:130%; display:block;} #wrap .item_detail_tit .item_price {display:flex; align-items:center; font-size:16px;font-weight:400;color:#666;margin-top:16px;} #wrap .item_detail_tit .item_price span {font-size:20px;font-weight:400;color:#333;vertical-align:middle;} #wrap .item_detail_tit .item_price strong {font-size:30px;font-weight:600;color:#f38d09;letter-spacing:-0.9px;vertical-align:middle; margin-left:4px; margin-right:3px;} #wrap .item_detail_tit .item_price em {font-size:16px;font-weight:400;color:#f38d09;vertical-align:middle;} /* 상품상세 공통 */ #wrap .item_detail_list{border-bottom: 0; margin:16px 0 0 0;} #wrap .item_detail_list dl{display:flex; width:100%; min-height:24px; padding:7px 0 6px 0;} #wrap .item_detail_list dt{width: 100px;margin: 0;color: #222; word-wrap:break-word;font-size: 15px;font-weight: 500;line-height: 28px;} #wrap .item_detail_list dd{width: calc(100% - 100px);font-size: 15px;line-height: 28px;font-weight: 400;color: #666;letter-spacing: -0.3px;} #wrap .item_detail_list dd em{font-size:inherit;color:inherit;font-weight:inherit;text-decoration: line-through;} #wrap .btn_choice_box{display:flex;width:100%; padding:20px 0 0 0; justify-content:space-between;} #wrap .btn_choice_box .btn_sample_view, #wrap .btn_choice_box .btn_add_order {height:70px;font-size:22px;line-height:70px;letter-spacing:-0.66px;color:#fff;font-weight:600;border:0;border-radius:35px;box-shadow: 2px 3.5px 24px 0 rgba(0, 0, 0, 0.18);display: inline-flex;width:100%;align-items: center;justify-content: center;} #wrap .btn_choice_box .btn_sample_view {background:#333333;} #wrap .btn_choice_box .btn_add_order {margin-left:20px;background:#f38d09;} #wrap .item_goods_sec{position:relative;text-align:center; padding:120px 0 0 0;} #wrap .item_goods_sec h3{padding:0 0 40px 0; font-size:24px;line-height:1;font-weight:600;color:#222;text-align:center;} #wrap .item_goods_sec .detail_cont{padding-bottom:100px;} #wrap .item_goods_sec .detail_cont, #wrap .item_goods_sec .step_cont, #wrap .item_goods_sec .production_cont {margin-top:80px; } /* 상품 정보내용 탭 */ #wrap .item_goods_tab{border-bottom: 0;} #wrap .item_goods_tab ul{width: 100%;height: 60px; margin:0 auto; padding:0; font-size:0;position: relative; display:flex; justify-content:space-between;} #wrap .item_goods_tab ul:after {content:'';display:block;position:absolute;width:100%;height:1px;background:#333;bottom:0;left:0;z-index:10;} #wrap .item_goods_tab li{position:relative;width: 100%;font-size: 0; text-align:center; z-index:10;} #wrap .item_goods_tab li + li {margin-left:15px;} #wrap .item_goods_tab li.on{margin-top: 0; z-index:20;} #wrap .item_goods_tab li a{display: flex;height: 100%;margin: 0;padding: 0;color: #666;font-size: 16px;border: 0;border-bottom: 0;background: #f5f5f5;box-sizing: border-box;border-radius: 10px 10px 0 0;align-items: center;justify-content: center;} #wrap .item_goods_tab li.on a{padding-top: 0;margin-top: 0; color:#333333; font-weight:bold;border: 1px solid #333;border-bottom: none;background: #fff;} #wrap .item_goods_tab li.on a span{display:inline-block; position:relative; top:-3px;} #wrap .item_goods_tab li:first-child a{margin-left:0;} #wrap .item_goods_tab li a strong{color:#f38d09;} /* 제작절차 */ #wrap .item_goods_sec .step_cont {margin-bottom:50px;} #wrap .item_goods_sec .step_cont ol {display: flex; justify-content: space-between;} #wrap .item_goods_sec .step_cont ol li {position:relative;width: 100%;box-sizing: border-box;} #wrap .item_goods_sec .step_cont ol li + li {margin-left:20px;padding-left:60px;} #wrap .item_goods_sec .step_cont ol li + li:before {content:'';display:block;position:absolute;width:40px;height:40px;background:#ccc url('../images/sub/step_arw_icon.png') no-repeat center;left:0;top:27%;border-radius:100%;} #wrap .item_goods_sec .step_cont ol li .icon {display:block;width: 100%;padding-top: 100%;height: auto;border:1px solid #ddd;border-radius:100%;box-sizing:border-box;margin: 0 auto;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(1) .icon {background: #fff url('../images/sub/step_icon01.png') no-repeat center;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(2) .icon {background:#fff url('../images/sub/step_icon02.png') no-repeat center;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(3) .icon {background:#fff url('../images/sub/step_icon03.png') no-repeat center;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(4) .icon {background:#fff url('../images/sub/step_icon04.png') no-repeat center;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(5) .icon {background:#fff url('../images/sub/step_icon05.png') no-repeat center;} #wrap .item_goods_sec .step_cont ol li .txt_box {margin-top:27px;} #wrap .item_goods_sec .step_cont ol li .txt_box em {display:block;font-size:17px;line-height:1;font-weight:500;color:#222;} #wrap .item_goods_sec .step_cont ol li .txt_box strong {display:block;font-size:18px;line-height:1;font-weight:600;color:#222;margin-top:18px;} #wrap .item_goods_sec .step_cont ol li:last-child .txt_box strong {color:#f38d09;} #wrap .item_goods_sec .step_cont ol li .txt_box p {font-size:14px;line-height:1;font-weight:500;color:#666;margin-top:8px;} /* 제작범위 */ #wrap .item_goods_sec .production_cont {margin-top:60px;} #wrap .item_goods_sec .production_cont h3 {font-size:18px;line-height:30px;font-weight:600;color:#333;letter-spacing:-0.36px;text-align:left;padding-bottom:30px;} #wrap .item_goods_sec .production_cont h3 span {display:inline-block;background:#999;border-radius:15px;font-size:16px;font-weight:500;color:#fff;line-height:28px;padding:0 16px;margin-right:10px; vertical-align:middle;} #wrap .item_goods_sec .production_cont ul {display: flex;flex-wrap: wrap;gap:20px;} #wrap .item_goods_sec .production_cont ul li {width: calc(25% - 16px);height:80px;border:1px solid #ddd;border-radius:10px;box-sizing:border-box;display: flex;vertical-align: top;align-items: center;align-content: center;} #wrap .item_goods_sec .production_cont ul li p {font-size:15px;line-height:24px;font-weight:500;color:#444;display: block;width: 100%;text-align: center;} #wrap .item_goods_sec .production_cont .design_scope {margin-top:80px;} #wrap .item_goods_sec .production_cont .design_scope .for_m {display:none;} #wrap .item_goods_sec .production_cont .design_scope img {border:1px solid #ddd;box-sizing:border-box;} @media only screen and (max-width:1297px){ #wrap .sub_view .goods_info .info_cont{padding-left:6vw;} #wrap .sub_view .item_detail_tit .skin_name{font-size:34px;} #wrap .item_detail_tit .item_price strong{font-size:28px;} #wrap .item_detail_tit .item_price span{font-size:18px;} #wrap .item_detail_tit .item_price, #wrap .item_detail_tit .item_price em{font-size:15px;} #wrap .item_detail_list dt{width:90px;} #wrap .item_detail_list dd{width:calc(100% - 90px);} #wrap .btn_choice_box .btn_sample_view, #wrap .btn_choice_box .btn_add_order{height:65px; font-size:20px;} } @media only screen and (max-width:1217px){ #wrap .sub_view .goods_info .thumb{width:53vw; height:36vw;} #wrap .sub_view .goods_info .info_cont{width:calc(100% - 53vw); padding-left:4vw;} #wrap .sub_view .item_detail_tit{padding-bottom:20px;} #wrap .sub_view .item_detail_tit .skin_name{font-size:32px;} #wrap .item_detail_tit .item_price strong{font-size:26px;} #wrap .item_detail_tit .item_price span{font-size:17px;} #wrap .item_detail_tit .item_price, #wrap .item_detail_tit .item_price em{font-size:14px;} #wrap .item_detail_list{margin-top:12px;} #wrap .item_detail_list dt, #wrap .item_detail_list dd{font-size:14px; line-height:25px;} #wrap .item_detail_list dt{width:80px;} #wrap .item_detail_list dd{width:calc(100% - 80px);} #wrap .btn_choice_box{padding-top:15px;} #wrap .item_goods_sec .step_cont ol li + li{padding-left:55px;} #wrap .item_goods_sec .step_cont ol li + li:before{width:35px; height:35px;} #wrap .item_goods_sec .step_cont ol li .txt_box{margin-top:20px;} #wrap .item_goods_sec .step_cont ol li .txt_box em{font-size:16px;} #wrap .item_goods_sec .step_cont ol li .txt_box strong{font-size:17px; margin-top:10px; line-height:135%;} #wrap .item_goods_sec .step_cont ol li .icon{background-size:auto 5vw !important;} } @media only screen and (max-width:1023px){ #wrap .sub_view .item_detail_tit{padding-bottom:15px;} #wrap .sub_view .item_detail_tit .sample_name{font-size:14px; margin-bottom:10px;} #wrap .sub_view .item_detail_tit .skin_name{font-size:29px;} #wrap .item_detail_tit .item_price{margin-top:10px;} #wrap .btn_choice_box .btn_sample_view, #wrap .btn_choice_box .btn_add_order{height:60px; font-size:19px;} #wrap .item_goods_sec h3{font-size:23px; padding-bottom:30px;} #wrap .item_goods_sec .step_cont ol li + li{padding-left:40px; margin-left:10px;} #wrap .item_goods_sec .step_cont ol li + li:before{width:30px; height:30px; background-size:5px auto;} #wrap .item_goods_sec .step_cont ol li .txt_box em{font-size:15px;} #wrap .item_goods_sec .step_cont ol li .txt_box strong{font-size:16px;} #wrap .item_goods_sec .step_cont ol li .txt_box p{font-size:13px; margin-top:5px; line-height:135%;} #wrap .item_goods_sec .production_cont h3{font-size:17px;} #wrap .item_goods_sec .production_cont h3 span{font-size:15px;} #wrap .item_goods_sec .production_cont ul{gap:15px;} #wrap .item_goods_sec .production_cont ul li{padding:0 10px; box-sizing:border-box;width:calc(25% - 11.25px);} #wrap .item_goods_sec .production_cont ul li p{font-size:14px;line-height: 145%;} #wrap .item_goods_sec .production_cont ul li p br{display:none;} } @media only screen and (max-width:975px){ #wrap .sub_view .item_detail_tit .skin_name{font-size:27px;} #wrap .item_detail_list dt{width:70px;} #wrap .item_detail_list dd{width:calc(100% - 70px);} } @media only screen and (max-width:860px){ #wrap .sub_view .goods_info{display:block;} #wrap .sub_view .goods_info .thumb{width:630px; height:440px; margin:0 auto;} #wrap .sub_view .goods_info .info_cont{width:630px; padding-left:0; margin:25px auto 0;} #wrap .btn_choice_box .btn_sample_view, #wrap .btn_choice_box .btn_add_order{height:55px; font-size:17px;} #wrap .item_goods_sec{padding-top:100px;} #wrap .item_goods_tab ul{height:55px;} #wrap .item_goods_tab li a{font-size:15px;} #wrap .item_goods_sec h3{font-size:22px; padding-bottom:25px;} #wrap .item_goods_sec .step_cont ol li + li{padding-left:35px;} #wrap .item_goods_sec .step_cont ol li + li:before{width:25px; height:25px; background-size:4px auto;} #wrap .item_goods_sec .step_cont ol li .txt_box{margin-top:15px;} #wrap .item_goods_sec .step_cont ol li .txt_box em{font-size:14px;} #wrap .item_goods_sec .step_cont ol li .txt_box strong{font-size:15px; margin-top:7px;} #wrap .item_goods_sec .step_cont ol li .txt_box p{font-size:12px; margin-top:2px;} #wrap .item_goods_sec .production_cont ul li{width:calc(100% / 3 - 10px); } #wrap .item_goods_sec .production_cont h3 span{font-size:14px;} #wrap .item_goods_sec .production_cont h3{font-size:16px;} } @media only screen and (max-width:767px){ #wrap .item_goods_sec .step_cont ol li + li{padding-left:30px;} #wrap .item_goods_sec .step_cont ol li + li:before{width:20px; height:20px;} #wrap .item_goods_sec .step_cont ol li .txt_box em{font-size:13px;} #wrap .item_goods_sec .step_cont ol li .txt_box strong{font-size:14px;} } @media only screen and (max-width:680px){ #wrap .sub_view .goods_info .thumb{width:100%; height:66.7vw;} #wrap .sub_view .goods_info .info_cont{width:100%;} } @media only screen and (max-width:640px){ #wrap .sub_view .goods_info .thumb{border-radius:7.5px;} #wrap .btn_choice_box .btn_sample_view, #wrap .btn_choice_box .btn_add_order{height:50px; font-size:16px;} #wrap .item_goods_sec{padding-top:70px;} #wrap .item_goods_sec .detail_cont, #wrap .item_goods_sec .step_cont, #wrap .item_goods_sec .production_cont{margin-top:50px;} #wrap .item_goods_tab ul{height:50px;} #wrap .item_goods_tab li a{font-size:14px; border-radius:5px 5px 0 0;} #wrap .item_goods_sec h3{font-size:20px; padding-bottom:20px;} #wrap .item_goods_sec .step_cont ol li + li:before{top:22%;} #wrap .item_goods_sec .step_cont ol li .txt_box em{font-size:12px;} #wrap .item_goods_sec .step_cont ol li .txt_box strong{font-size:13px;} #wrap .item_goods_sec .step_cont ol li .txt_box p{font-size:11px;} #wrap .item_goods_sec .production_cont ul li p{font-size:12px;} } @media only screen and (max-width:580px){ #wrap .item_goods_sec .step_cont ol li + li:before{top:18%;} } @media only screen and (max-width:540px){ #wrap .item_goods_sec .step_cont ol{display:block;} #wrap .item_goods_sec .step_cont ol li{width: 100%;border: 1px solid #ddd;border-radius: 10px;display: flex;align-items: center;justify-content: flex-start;box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.1);} #wrap .item_goods_sec .step_cont ol li .icon{width: 26%;height: 90px;padding:0;border: 0;margin: 0;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(1) .icon{background-size: 43px auto !important;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(2) .icon{background-size: 47px auto !important;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(3) .icon{background-size: 37px auto !important;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(4) .icon{background-size: 41px auto !important;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(5) .icon{background-size: 45px auto !important;} #wrap .item_goods_sec .step_cont ol li + li{margin: 15px 0 0;padding: 0;} #wrap .item_goods_sec .step_cont ol li + li:before{width: 30px;height: 30px;top: auto;bottom: calc(100% - 7px);left:50%;transform:translateX(-50%) rotate(90deg);background-size: 5px auto;background-color: #aaa;} #wrap .item_goods_sec .step_cont ol li .txt_box{text-align:left; margin:0;} #wrap .item_goods_sec .step_cont ol li .txt_box em{font-size:14px;font-weight: 600;width: 62px;display: inline-block;} #wrap .item_goods_sec .step_cont ol li .txt_box strong{font-size:15px;display: inline-block;font-weight: 700;} #wrap .item_goods_sec .step_cont ol li .txt_box p{font-size:12px;display: inline-block;vertical-align: middle;margin-left: 3px;} #wrap .item_goods_sec .production_cont ul li{width:calc(100% / 2 - 7.5px); } #wrap .item_goods_sec .production_cont ul li p{font-size:13px;} } @media only screen and (max-width:479px){ #wrap .sub_view .item_detail_tit .skin_name{font-size:24px;} #wrap .item_detail_tit .item_price{margin-top:8px;} #wrap .item_detail_tit .item_price strong{font-size:22px;} #wrap .item_detail_tit .item_price span{font-size:16px;} #wrap .item_detail_tit .item_price, #wrap .item_detail_tit .item_price em{font-size:13px;} #wrap .sub_view .item_detail_tit .sample_name{margin-bottom:7px;} #wrap .item_detail_list{margin-top:10px;} #wrap .item_detail_list dt, #wrap .item_detail_list dd{line-height:23px;} #wrap .item_goods_sec h3{font-size:19px; padding-bottom:15px;} #wrap .item_goods_sec .production_cont .design_scope{margin-top:50px;} #wrap .item_goods_sec .production_cont h3 span{font-size:13px; display:block; width:78px; box-sizing:border-box; margin-bottom:10px;} #wrap .item_goods_sec .production_cont h3{font-size:15px; line-height:145%; padding-bottom:15px;} } @media only screen and (max-width:431px){ #wrap .sub_view .item_detail_tit .skin_name{font-size:22px;} #wrap .item_detail_tit .item_price strong{font-size:20px;} #wrap .item_detail_tit .item_price span{font-size:15px;} #wrap .item_detail_tit .item_price, #wrap .item_detail_tit .item_price em{font-size:12px;} #wrap .btn_choice_box .btn_sample_view, #wrap .btn_choice_box .btn_add_order{height:45px; font-size:15px;} #wrap .item_goods_sec .detail_cont, #wrap .item_goods_sec .step_cont, #wrap .item_goods_sec .production_cont{margin-top:30px;} #wrap .item_goods_sec h3{font-size:20px;} #wrap .item_goods_tab ul{height:45px;} #wrap .item_goods_tab li + li{margin-left:5px;} #wrap .item_goods_tab li a{font-size:13px;} } @media only screen and (max-width:374px){ #wrap .item_goods_sec h3{font-size:19px;} #wrap .item_goods_tab ul{height:42px;} #wrap .item_goods_tab li a{font-size:12px;} #wrap .item_goods_sec .production_cont ul li p{font-size:12px;} } /*─────────────────────────────────────────────────────────── service ───────────────────────────────────────────────────────────*/ /* 고객 지원 센터*/ .sub_content .cs_center{} .sub_content .cs_center .cs_list{display:flex; justify-content:space-between;} .sub_content .cs_center .cs_list > li{position:relative;width:100%;border:1px solid #ddd;border-radius:15px;overflow:hidden;padding: 167px 15px 53px;box-sizing:border-box; transition:all 0.4s;} .sub_content .cs_center .cs_list > li + li{margin-left:40px;} .sub_content .cs_center .cs_list > li:before{position:absolute;content:'';top: 63px;left:50%;transform:translateX(-50%);} .sub_content .cs_center .cs_list > li:nth-child(1):before{width:72px; height:72px; background:url('../images/sub/cs_center_icon01.png') no-repeat center; background-size:100% auto;} .sub_content .cs_center .cs_list > li:nth-child(2):before{width:79px; height:79px; background:url('../images/sub/cs_center_icon02.png') no-repeat center; background-size:100% auto;} .sub_content .cs_center .cs_list > li:nth-child(3):before{width:82px; height:82px; background:url('../images/sub/cs_center_icon03.png') no-repeat center; background-size:100% auto;} .sub_content .cs_center .cs_list > li > a{position:absolute; top:0; left:0; width:100%; height:100%;} .sub_content .cs_center .cs_list > li dl{text-align:center;} .sub_content .cs_center .cs_list > li dl dt{font-size:30px; font-weight:900; color:#000;} .sub_content .cs_center .cs_list > li dl dt + dd{margin-top: 20px;} .sub_content .cs_center .cs_list > li dl dd{font-size:16px;font-weight:400;color:#666;line-height:175%;letter-spacing: 0;} /* over */ @media only screen and (min-width:1024px){ .sub_content .cs_center .cs_list > li:hover{box-shadow:0 0 20px rgba(0,0,0,0.1); border-color:#f38d09; transform:translateY(-10px);} } @media only screen and (max-width:1297px){ .sub_content .cs_center .cs_list > li dl dt{font-size:29px;} } @media only screen and (max-width:1023px){ .sub_content .cs_center .cs_list > li + li{margin-left:15px;} .sub_content .cs_center .cs_list > li dl dt{font-size:27px;} .sub_content .cs_center .cs_list > li dl dd{font-size:15px;} } @media only screen and (max-width:860px){ .sub_content .cs_center .cs_list > li{padding:145px 15px 40px;} .sub_content .cs_center .cs_list > li:before{top:50px;} .sub_content .cs_center .cs_list > li:nth-child(1):before{width:62px;} .sub_content .cs_center .cs_list > li:nth-child(2):before{width:68px;} .sub_content .cs_center .cs_list > li:nth-child(3):before{width:70px;} .sub_content .cs_center .cs_list > li dl dt{font-size:25px;} .sub_content .cs_center .cs_list > li dl dt + dd{margin-top:15px;} .sub_content .cs_center .cs_list > li dl dd{font-size:14px; line-height:150%;} } @media only screen and (max-width:767px){ .sub_content .cs_center .cs_list > li{padding:120px 15px 30px;} .sub_content .cs_center .cs_list > li:before{top:35px;} .sub_content .cs_center .cs_list > li:nth-child(1):before{width:55px;} .sub_content .cs_center .cs_list > li:nth-child(2):before{width:58px;} .sub_content .cs_center .cs_list > li:nth-child(3):before{width:58px;} .sub_content .cs_center .cs_list > li dl dt{font-size:22px;} .sub_content .cs_center .cs_list > li dl dt + dd{margin-top:12px;} .sub_content .cs_center .cs_list > li dl dd{font-size:13px;} .sub_content .cs_center .cs_list > li dl dd br{display:none;} } @media only screen and (max-width:640px){ .sub_content .cs_center .cs_list{display:block;} .sub_content .cs_center .cs_list > li{padding:115px 15px 30px; border-radius:7.5px;} .sub_content .cs_center .cs_list > li:before{top:30px;} .sub_content .cs_center .cs_list > li:nth-child(1):before{width:55px;} .sub_content .cs_center .cs_list > li:nth-child(2):before{width:58px;} .sub_content .cs_center .cs_list > li:nth-child(3):before{width:58px;} .sub_content .cs_center .cs_list > li + li{margin:15px 0 0;} .sub_content .cs_center .cs_list > li dl dt{font-size:21px;} .sub_content .cs_center .cs_list > li dl dd br{display:block;} } @media only screen and (max-width:479px){ .sub_content .cs_center .cs_list > li dl dt{font-size:20px;} } @media only screen and (max-width:374px){ .sub_content .cs_center .cs_list > li dl dt{font-size:18px;} } /*about*/ /* 인트로 */ .sub_about .intro{background:rgba(252,245,235,0.7); padding-top:190px; padding-bottom:130px; margin-bottom:114px;} .sub_about .intro br{display: none;} .sub_about .intro .sub_tittle h4{margin:1em 0;} .sub_about .intro .sub_tittle h5{margin-top:15px;} /* 회사 정보 */ .our_company_info{padding:0 0 120px 0; overflow:hidden;} .our_company_info .info_box h2{font-size:30px;color:#333;font-weight:400;line-height:1;} .our_company_info .info_box .company_info{width:100%;} .our_company_info .info_box .company_info dl {font-size:0;display: flex;} .our_company_info .info_box .company_info dl dt, .our_company_info .info_box .company_info dl dd{font-size:18px;padding-top: 21px;padding-bottom: 21px;line-height: 150%;} .our_company_info .info_box .company_info dl dt{color:#333;font-weight:500;border-bottom:1px solid #000;width:140px;text-align:left;box-sizing:border-box;padding-left:10px;display: inline-block;vertical-align: top;} .our_company_info .info_box .company_info dl dd{color:#444;font-weight:400;border-bottom:1px solid #ddd;box-sizing:border-box;padding-left:40px; padding-right:40px; display: inline-block;width:calc(100% - 140px);} .our_company_info .info_box .company_info dl dd a{font-size:inherit; font-weight:inherit; color:inherit;} .our_company_info .info_box .company_info dl:nth-child(1) dt{border-top:1px solid #000;} .our_company_info .info_box .company_info dl:nth-child(1) dd{border-top:1px solid #ddd;} @media only screen and (max-width:1297px){ .our_company_info .info_box .company_info dl dt, .our_company_info .info_box .company_info dl dd{font-size:17px;} } @media only screen and (max-width:1023px){ .our_company_info .info_box h2{font-size:28px;} .our_company_info .info_box .company_info dl dt, .our_company_info .info_box .company_info dl dd{font-size:16px;} .our_company_info .info_box .company_info dl dd{padding-left:30px;} } @media only screen and (max-width:860px){ .sub_about .intro{padding:6em 0;margin-bottom:6em;} .sub_about .logo{height:60px;} .sub_about .logo img{height:100%;} .sub_about .sub_tittle p{font-size:16px;line-height:165%;} .sub_about .sub_tittle h5{font-size:18px;} .our_company_info .info_box h2{font-size:27px;} .our_company_info .info_box .company_info dl dt, .our_company_info .info_box .company_info dl dd{font-size:15px;} .our_company_info .info_box .company_info dl dt{width:120px;} .our_company_info .info_box .company_info dl dd{padding-left:20px; padding-right:20px; width:calc(100% - 120px);} } @media only screen and (max-width:640px){ .sub_about .intro{padding:5em 0;margin-bottom:5em;} .sub_about .logo{height:50px;} .sub_about .sub_tittle p{font-size:15px;} .sub_about .sub_tittle h5{font-size:17px;} .our_company_info .info_box h2{font-size:26px;} .our_company_info .info_box .company_info dl dt, .our_company_info .info_box .company_info dl dd{padding-top:15px; padding-bottom:15px;} .our_company_info .info_box .company_info dl dt{width:110px;} .our_company_info .info_box .company_info dl dd{padding-left:15px; padding-right:15px; width:calc(100% - 110px);} } @media only screen and (max-width:479px){ .sub_about .logo{height:40px;} .sub_about .intro br{display:inline;} .sub_about .sub_tittle p{font-size:14px;} .sub_about .sub_tittle h5{font-size:16px;} .our_company_info .info_box h2{font-size:25px;} .our_company_info .info_box .company_info{margin-top:20px;} .our_company_info .info_box .company_info dl dt, .our_company_info .info_box .company_info dl dd{font-size:14px;} .our_company_info .info_box .company_info dl dt{width:100px;} .our_company_info .info_box .company_info dl dd{padding-left:10px; padding-right:10px; width:calc(100% - 100px);} } @media only screen and (max-width:431px){ .our_company_info .info_box .company_info dl dt{width:90px;} .our_company_info .info_box .company_info dl dd{padding-left:10px; padding-right:10px; width:calc(100% - 90px);} } @media only screen and (max-width:374px){ .sub_about .sub_tittle p{font-size:12px;} .sub_about .intro .sub_tittle h5{font-size:14px;} .our_company_info .info_box .company_info dl dt, .our_company_info .info_box .company_info dl dd{font-size:13px;} .our_company_info .info_box .company_info dl dt{width:80px;} .our_company_info .info_box .company_info dl dd{width:calc(100% - 80px);} } @media only screen and (max-width:320px){ } /* 기술력 */ .sub_about .technology{overflow:hidden; padding-bottom:120px;} .sub_about .technology .tab_list{display:flex; justify-content:center; margin-top:-20px; margin-bottom:80px;} .sub_about .technology .tab_list li{display: inline-flex;align-items:center;justify-content:center;font-size:17px;font-weight: 700;color:#333;width: 180px;height:50px;border:1px solid #ddd;box-sizing:border-box; margin-right:15px; border-radius:10px; cursor:pointer; transition:all 0.4s;} .sub_about .technology .tab_list li:last-child{margin-right:0;} .sub_about .technology .tab_list li.on{color:#fff; background:#f38d09; border-color:#f38d09;} .sub_about .technology .tab_cont_list{position:relative;} .sub_about .technology .tab_cont_list > .cont{height:0; opacity:0; overflow:hidden; } .sub_about .technology .tab_cont_list > .cont.on{height:auto; overflow:visible; opacity:1;} .sub_about .technology .TechSwiper{position:relative; overflow:hidden; box-sizing:border-box; width:calc(100% - 140px); margin:0 auto;} .sub_about .technology .TechSwiper .swiper-slide{} .sub_about .technology .swiper-btn{position:absolute; top:160px; width:50px; height:50px; border:1px solid #ddd; border-radius:100%; font-size:0; transition:all 0.4s; z-index:5; opacity:0; pointer-events:none;} .sub_about .technology .swiper-btn.on{opacity:1; pointer-events:inherit;} .sub_about .technology .swiper-btn.swiper-button-prev{left: 0; right:calc(100% + 15px); background:#fff url('../images/skin/main_visual_prev_ov.png') no-repeat center;} .sub_about .technology .swiper-btn.swiper-button-next{right: 0;background:#fff url('../images/skin/main_visual_next_ov.png') no-repeat center;} .sub_about .technology .swiper-btn:after{display:none;} .sub_about .technology .swiper-pagination-progressbar{display:none; position:absolute; left:0; bottom:0;width:100%; height:2px; background:#ddd; opacity:0; transition:all 1s;} .sub_about .technology .swiper-pagination-progressbar.on{opacity:1;} .sub_about .technology .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#f38d09;} .sub_about .certificate_list li{text-align: center;box-sizing:border-box;} .sub_about .certificate_list li .thumb img{box-shadow:8.2px 14.9px 24px 0 rgba(0, 0, 0, 0.15);} .sub_about .certificate_list li .txt_box{margin-top:28px;} .sub_about .certificate_list li .title{font-size:22px;color:#333;font-weight:700;letter-spacing:-1.1px;} .sub_about .certificate_list li .info{font-size:0;margin-top:9px;} .sub_about .certificate_list li .info span{display: inline-block;font-size:16px;color:#888;font-weight:400;letter-spacing:-0.32px;vertical-align: middle;} .sub_about .certificate_list li .info span + span{font-family:'Inter' !important;} .sub_about .certificate_list li .info span + span:before{width:1px;height:12px;content:"";background:#ddd;display: inline-block;vertical-align: middle;margin: 0 15px 4px;} /* over */ @media only screen and (min-width:1024px){ .sub_about .technology .tab_list li:hover{color:#fff; background:#f38d09; border-color:#f38d09;} .sub_about .technology .swiper-btn:hover{background-color:#f38d09; border-color:#f38d09;} .sub_about .technology .swiper-btn.swiper-button-prev:hover{background-image:url('../images/skin/main_visual_prev.png');} .sub_about .technology .swiper-btn.swiper-button-next:hover{background-image:url('../images/skin/main_visual_next.png');} } .sub_about .award_list{width:100%;box-sizing:border-box;position: relative;} .sub_about .award_list li{display:flex;box-sizing:border-box;padding:80px 60px;justify-content:space-between;position: relative;} .sub_about .award_list li:first-child{padding-top:0;} .sub_about .award_list li:before{content:"";position: absolute;box-sizing:border-box;border-radius:100%;background:#2846b2;} .sub_about .award_list li:before{animation-name: sub_visualBg; animation-duration:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-fill-mode: forwards;} .sub_about .award_list li:nth-of-type(2):before{width:400px;height:400px;left:-45.5%;top:-24%;} .sub_about .award_list li:nth-of-type(4):before{width:100px;height:100px;right:-21%;bottom:5%;} .sub_about .award_list li:nth-of-type(8):before{width:30px;height:30px;left:-15.5%;top:53%;} .sub_about .award_list li:nth-of-type(15):before{width:320px;height:320px;right:-43.5%;top:-42%;} .sub_about .award_list li:nth-of-type(20):before{width:200px;height:200px;left:-24.5%;top:-9%;} .sub_about .award_list li:nth-of-type(23):before{width:100px;height:100px;right:-19.5%;bottom:-3%;} .sub_about .award_list li + li{border-top:1px solid #eee;} .sub_about .award_list li .txt_box{width:57.4%; padding:18px 30px 0 0; box-sizing:border-box;} .sub_about .award_list li .title span{font-size:20px;color:#555;font-weight: 500;letter-spacing:-0.8px;} .sub_about .award_list li .title p{font-size:50px;color:#333;font-weight: 700;letter-spacing:-1px;margin-top: 16px;} .sub_about .award_list li .cont{margin-top:31px;} .sub_about .award_list li .cont dl{font-size:0;} .sub_about .award_list li .cont dl + dl{margin-top:13px;} .sub_about .award_list li .cont dl dt, .sub_about .award_list li .cont dl dd{display: inline-block;vertical-align: top;font-size:18px;font-family:'Inter', 'Noto Sans KR' !important;line-height:144%;letter-spacing:-0.36px;} .sub_about .award_list li .cont dl dt{font-weight:700;color:#333;width:95px;} .sub_about .award_list li .cont dl dt em{font-size:inherit;color:#2846b2;font-weight:inherit;} .sub_about .award_list li .cont dl dd{color:#777;font-weight:300; width:calc(100% - 95px);} .sub_about .award_list li .cont dl dd a{font-size:inherit;color:inherit;font-weight:inherit;} .sub_about .award_list li .thumb{position: relative;overflow:hidden;box-sizing:border-box;border-radius: 10px;box-shadow: 11.7px 18.7px 62px 0 rgba(61, 70, 85, 0.33);width: 42.6%;height: 0;padding-bottom: 29.63%;} .sub_about .award_list li .thumb a{display: block;width:100%;height:100%;position: absolute;top:0;left:0;z-index:5;} .sub_about .award_list li .thumb img{width:101%; max-width:none; position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all 0.5s;} .sub_about .award_list li .thumb .ov_box{width:100%;height:100%;background:rgba(0,0,0,0.4);position: absolute;top:0;left:0; opacity:0; transition:all 0.4s;} .sub_about .award_list li .thumb .ov_box .plus{width:70px;height:70px;box-sizing:border-box;border-radius:100%;background:#2846b2;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .sub_about .award_list li .thumb .ov_box .plus:before{width:24px;height:2px;content:"";background:#fff;position: absolute;top:34px;left:23px;} .sub_about .award_list li .thumb .ov_box .plus:after{width:2px;height:24px;content:"";background:#fff;position: absolute;top:23px;left:34px;} /* over */ @media only screen and (min-width:1024px){ .sub_about .award_list li:hover .ov_box{opacity:1;} .sub_about .award_list li:hover .thumb img{transform:scale(1.05) translate(-50%,-50%);transform-origin:center;} } @media only screen and (max-width:1297px){ .sub_about .certificate_list li .title{font-size:21px;} .sub_about .certificate_list li .thumb img{width:69%;} .sub_about .technology .swiper-btn{top:12vw;} .sub_about .award_list li{padding:6vw 4.5vw;} .sub_about .award_list li .title span{font-size:19px;} .sub_about .award_list li .title p{font-size:3.85vw;} .sub_about .award_list li .cont dl dt, .sub_about .award_list li .cont dl dd{font-size:17px;} } @media only screen and (max-width:1023px){ .sub_about .technology .tab_list li{width:160px; height:45px; font-size:16px;} .sub_about .certificate_list li .title{font-size:20px;} .sub_about .certificate_list li .info span{font-size:15px;} .sub_about .technology .swiper-btn{width:45px; height:45px;} .sub_about .technology .swiper-btn.swiper-button-prev, .sub_about .technology .swiper-btn.swiper-button-next{background-size:7px auto;} .sub_about .award_list li{padding:60px 30px;} .sub_about .award_list li .txt_box{padding-top:10px;} .sub_about .award_list li .title span{font-size:18px;} .sub_about .award_list li .cont{margin-top:20px;} .sub_about .award_list li .cont dl + dl{margin-top:7px;} .sub_about .award_list li .cont dl dt, .sub_about .award_list li .cont dl dd{font-size:16px;} .sub_about .award_list li:before{display:none;} } @media only screen and (max-width:975px){ .sub_about .award_list li .title span{font-size:17px;} .sub_about .award_list li .cont{margin-top:15px;} .sub_about .award_list li .cont dl + dl{margin-top:5px;} .sub_about .award_list li .cont dl dt, .sub_about .award_list li .cont dl dd{font-size:15px;} .sub_about .award_list li .cont dl dt{width:85px;} .sub_about .award_list li .cont dl dd{width:calc(100% - 85px);} } @media only screen and (max-width:860px){ .our_company_info{padding-bottom:100px;} .sub_about .technology{padding-bottom:100px;} .sub_about .technology .tab_list{margin-top:0; margin-bottom:60px;} .sub_about .technology .tab_list li{width:140px;} .sub_about .certificate_list li .title{font-size:18px;} .sub_about .certificate_list li .info span{font-size:14px;} .sub_about .technology .swiper-btn{top:18vw; width:40px; height:40px;} .sub_about .technology .swiper-btn.swiper-button-prev, .sub_about .technology .swiper-btn.swiper-button-next{background-size:6px auto;} .sub_about .award_list li{padding:50px 0;} .sub_about .award_list li .title span{font-size:16px;} .sub_about .award_list li .title p{font-size:30px; margin-top:14px;} .sub_about .award_list li .cont dl dt, .sub_about .award_list li .cont dl dd{font-size:14px; line-height:142%;} .sub_about .award_list li .cont dl dt{width:75px;} .sub_about .award_list li .cont dl dd{width:calc(100% - 75px);} } @media only screen and (max-width:640px){ .our_company_info{padding-bottom:70px;} .sub_about .technology{padding-bottom:70px;} .sub_about .technology .tab_list{margin-bottom:50px;} .sub_about .technology .tab_list li{width:120px; height:43px; font-size:15px; border-radius:5px;} .sub_about .certificate_list li .thumb img{box-shadow:1.7px 4.7px 15px 0 rgba(0, 0, 0, 0.15); width:auto;} .sub_about .certificate_list li .title{font-size:17px; line-height:145%;} .sub_about .technology .TechSwiper{padding-right:55vw; width:100%; overflow:visible; padding-bottom:40px;} .sub_about .technology .swiper-btn{display:none;} .sub_about .technology .swiper-pagination-progressbar{display:block;} .sub_about .certificate_list li .txt_box{margin-top:20px;} .sub_about .certificate_list li .info span + span:before{height:10px;} .sub_about .award_list li{flex-direction:column-reverse; flex-wrap:wrap;} .sub_about .award_list li .thumb{box-shadow:1.7px 4.7px 15px 0 rgba(61, 70, 85, 0.33); width:100%; padding-bottom:68%;} .sub_about .award_list li .thumb img{ height:101%; object-fit:cover;} .sub_about .award_list li .txt_box{width:100%; padding-top:18px;} } @media only screen and (max-width:479px){ .sub_about .technology{padding-bottom:80px;} .sub_about .technology .tab_list{margin-bottom:40px;} .sub_about .technology .tab_list li{width:100%; height:41px; font-size:14px;} .sub_about .certificate_list li .title{font-size:16px;} .sub_about .certificate_list li .txt_box{margin-top:10px;} .sub_about .certificate_list li .info{margin-top:7px;} .sub_about .certificate_list li .info span{display:block;} .sub_about .certificate_list li .info span + span{margin-top:5px;} .sub_about .certificate_list li .info span + span:before{display:none;} .sub_about .award_list li{padding:40px 0;} } @media only screen and (max-width:431px){ .sub_about .award_list li{padding:30px 0;} } @media only screen and (max-width:375px){ .sub_about .award_list li{padding:25px 0;} } @media only screen and (max-width:374px){ .sub_about .technology .tab_list li{height:38px; font-size:13px;} .sub_about .certificate_list li .title{font-size:15px;} .sub_about .technology .tab_list li{margin-right:10px;} .sub_about .award_list li .title span{font-size:15px;} .sub_about .award_list li .title p{font-size:27px;} .sub_about .award_list li .cont dl dt, .sub_about .award_list li .cont dl dd{font-size:13px;} } /* 연혁 */ .sub_history_box{position: relative;padding-bottom:100px;font-size:0;} .sub_history_box .history_img{width: 50.44%;padding-right:5.2vw;position:sticky;top:150px;display: inline-block;vertical-align: top;box-sizing:border-box;} .sub_history_box .history_img .img_box{box-sizing:border-box;width:100%;height:31.25vw;transition:all 0.5s;overflow:hidden;border-radius:0 10px 0 0;} .sub_history_box .history_img .img_box.history01{background:url('../images/sub/hitory-img-01.jpg')no-repeat center;background-size:cover;} .sub_history_box .history_img .img_box.history02{background:url('../images/sub/hitory-img-02.jpg')no-repeat center;background-size:cover;} .sub_history_box .history_img .img_box.history03{background:url('../images/sub/hitory-img-03.jpg')no-repeat center;background-size:cover;} .sub_history_box .history_cont{width: 49.56%;display: inline-block;vertical-align: top;margin:0;} .sub_history_box .history_cont ol{border-left:1px solid #eee;} .sub_history_box .history_cont ol > li{position: relative;padding:0 30px 4.5vw 4vw;} .sub_history_box .history_cont ol > li:first-of-type{padding-top:23px;} .sub_history_box .history_cont ol > li:first-of-type:after{top:54px;} .sub_history_box .history_cont ol > li:first-of-type.on:after{top:50px;} .sub_history_box .history_cont ol > li:last-of-type{padding-bottom:44px;} .sub_history_box .history_cont ol > li:before{width:1px;height:0;content:"";background:#2846b2;position: absolute;top:0;left:-1px;transition:all 0.7s;} .sub_history_box .history_cont ol > li:after{width:5px;height:5px;content:"";box-sizing:border-box;border-radius:100%;background:#2846b2;left:-3px;top:28px;position: absolute;} .sub_history_box .history_cont ol li .year{font-size:40px;color:#333;font-weight:700;font-family:'Inter' !important;letter-spacing:-0.8px;} .sub_history_box .history_cont ol li dl{margin-top:33px;} .sub_history_box .history_cont ol li dl dd{width: 100%;margin-left:8px;} .sub_history_box .history_cont ol li dl dd ul li{font-size:18px;color:#222;font-weight: 500;line-height: 50px;line-height:150%;position: relative;padding-left:16px;letter-spacing:-0.9px;} .sub_history_box .history_cont ol li dl dd ul li + li{margin-top: 18px;} .sub_history_box .history_cont ol li dl dd ul li strong{color:#3b56b9;font-weight:400;} .sub_history_box .history_cont ol li dl dd ul li:before{width:4px;height:4px;content:"";background:#aaa;position: absolute;left:0;top: 10px;box-sizing:border-box;border-radius:100%;} .sub_history_box .history_cont ol li dl dd ul li a{display: block;font-size:16px;color:#777;font-weight:300;font-family:'Inter' !important;line-height:initial;letter-spacing:0;margin-top: 8px;} .sub_history_box .history_cont ol li .logo_box{} .sub_history_box .history_cont ol li .logo_box .logo{font-size:0;display:flex;margin-top:10px;} .sub_history_box .history_cont ol li .logo_box .logo .img{display:flex;align-items: center;justify-content: center;box-sizing:border-box;vertical-align: top;width:220px;border-radius:10px;background:#fff; box-shadow: 3.8px 8.2px 24px 0 rgba(0, 0, 0, 0.16);overflow:hidden;} .sub_history_box .history_cont ol li .logo_box .logo .img + .img{margin-left:20px;} .sub_history_box .history_cont ol li .logo_box .logo .img img{max-width:100%;} .sub_history_box .history_cont .his_ab{position:absolute; bottom:0; left:0; transition:none; transform:none;} /*on*/ .sub_history_box .history_cont ol > li.on:before{height:calc(100% + 28px);transition:all 0.7s;} .sub_history_box .history_cont ol > li.on:after{box-shadow:0px 0 0px 5px rgba(40,70,178,0.2);} @media only screen and (max-width:1700px){ .sub_history_box .history_cont{width:45.8%;} .sub_history_box .history_img{width:54.2%;} } @media only screen and (max-width:1500px){ .sub_history_box .history_cont ol li .logo_box .logo .img{width:calc(50% - 10px);} .sub_history_box .history_cont ol li dl dd ul li{font-size:16px;} } @media only screen and (max-width:1297px){ .sub_history_box .history_cont ol li .year{font-size:37px;} .sub_history_box .history_cont ol li dl{margin-top:25px} } @media only screen and (max-width:1023px){ .sub_history_box .history_cont ol li .year{font-size:34px;} .sub_history_box .history_cont ol li dl{margin-top:20px;} .sub_history_box .history_cont ol li dl dd ul li{font-size:15px;} .sub_history_box .history_cont ol li dl dd ul li:before{top:8px;} .sub_history_box .history_cont ol li dl dd ul li + li{margin-top:15px;} .sub_history_box .history_cont ol li dl dd ul li a{font-size:14px; margin-top:5px;} } @media only screen and (max-width:860px){ .sub_history_box{padding-bottom:60px;} .sub_history_box .history_img{padding-right:30px;} .sub_history_box .history_cont ol > li{padding:0 15px 40px 30px;} .sub_history_box .history_cont ol li .year{font-size:31px;} .sub_history_box .history_cont ol li dl{margin-top:15px;} .sub_history_box .history_cont ol li dl dd ul li{font-size:14px;} .sub_history_box .history_cont ol li dl dd ul li:before{top:8px;} .sub_history_box .history_cont ol li dl dd ul li + li{margin-top:10px;} .sub_history_box .history_cont ol li dl dd ul li a{font-size:13px; margin-top:5px;} } @media only screen and (max-width:767px){ .sub_history_box .history_cont ol li dl dd ul li a{font-size:12px;} } @media only screen and (max-width:640px){ .sub_history_box{padding-bottom:40px;} .sub_history_box .history_img{display:none;} .sub_history_box .history_cont{display:block; width:calc(100% - 30px); margin:0 auto;} .sub_history_box .history_cont ol > li{padding-right:0;} .sub_history_box .history_cont ol > li:first-of-type{padding-top:10px;} .sub_history_box .history_cont ol > li:first-of-type.on:after{top:20px;} .sub_history_box .history_cont ol > li:after{top:13px;} .sub_history_box .history_cont ol > li.on:before{height:calc(100% + 13px);} .sub_history_box .history_cont ol li .year{font-size:27px;} .sub_history_box .history_cont ol li dl{margin-top:10px;} .sub_history_box .history_cont ol li dl dd{margin-left:0;} .sub_history_box .history_cont ol li .logo_box .logo .img{border-radius:5px; box-shadow:1.9px 4.1px 12px 0 rgba(0, 0, 0, 0.16);} .sub_history_box .history_cont .his_ab{bottom:-200px;} } @media only screen and (max-width:479px){ .sub_history_box{padding-bottom:20px;} .sub_history_box .history_cont ol li .year{font-size:23px;} .sub_history_box .history_cont ol li dl{margin-top:5px;} .sub_history_box .history_cont ol li dl dd ul li{line-height:143%; padding-left:9px; font-weight:700;} .sub_history_box .history_cont ol li dl dd ul li:before{width:2px; height:2px; top:9px;} } @media only screen and (max-width:431px){ .sub_history_box .history_cont ol li .year{font-size:20px;} } @media only screen and (max-width:374px){ .sub_history_box .history_cont ol > li{padding-left:25px;} .sub_history_box .history_cont ol li .year{font-size:19px;} .sub_history_box .history_cont ol li dl dd ul li{font-size:13px;} } /*─────────────────────────────────────────────────────────── service | event ───────────────────────────────────────────────────────────*/ /*visual*/ .sub_event .main_visual .slick-slide{display:block;} .sub_event .main_visual .slick-slide .txt_box h5{font-weight:500;} .sub_event .main_visual .slick-slide .txt_box h3{font-size:70px;line-height:1.29;margin:27px 0 56px;} .sub_event .main_visual .slick-slide .txt_box h3 strong{color:#31afff;} .sub_event .main_visual .slick-slide .txt_box p{font-size:20px;color:#fff;font-weight:400;line-height:1.6;} .sub_event .main_visual .slick-slide .txt_box .more_btn{margin-top:53px;} /*benefit*/ #wrap .event_benefit{margin-top:120px;display: flex;flex-wrap:wrap;align-items: center;gap:0 80px;padding-bottom:70px;} .event_benefit .title{text-align:left;width:calc(42.2% - 80px);} .event_benefit .title h3{font-size:45px;color:#222;font-weight:800;line-height:1.4;} .event_benefit .title h3 strong{font-size:inherit;color:#f33e0d;font-weight:inherit;} .event_benefit .title p{font-size:16px;color:#666;font-weight:400;line-height:1.75;margin-top:19px;} .event_benefit .list{width:57.8%;display: flex;flex-wrap:wrap;gap:20px 20px;} .event_benefit .list li{width:calc(100% / 3 - 14px);box-sizing:border-box;border-radius:10px;box-shadow:0 0 18px 0 rgba(0,0,0,0.09);display: flex;flex-direction: column;align-items: center;text-align: center;padding:30px 15px;} .event_benefit .list li span{display: inline-flex;box-sizing:border-box;width:34px;height:34px;border-radius:100%;background:rgba(243,62,13,0.1);align-items: center;justify-content:center;text-align: center;font-size:14px;color:#f33e0d;font-weight:800;} .event_benefit .list li p{font-size:20px;color:#333;font-weight:800;line-height:1.5;margin-top:26px;} .event_benefit .list li p strong{font-size:inherit;color:#f33e0d;font-weight:inherit;} /*package*/ .sub_event .main_package{margin-top:190px;} /*procedure*/ .sub_event .main_procedure{margin-top:140px;} .sub_event .main_procedure .procedure_list li.on{width:45%;} .sub_event .main_procedure .procedure_list li:nth-child(1):before{width:66px; height:66px; background:url('../images/sub/event_procedure_icon01.png') no-repeat center;} .sub_event .main_procedure .procedure_list li:nth-child(2):before{width:64px; height:61px; background:url('../images/skin/main_procedure_icon01.png') no-repeat center;} .sub_event .main_procedure .procedure_list li:nth-child(3):before{width:60px; height:58px; background:url('../images/skin/main_procedure_icon02.png') no-repeat center;} .sub_event .main_procedure .procedure_list li:nth-child(4):before{width:68px; height:60px; background:url('../images/skin/main_procedure_icon03.png') no-repeat center; background-size:100% auto;} .sub_event .main_procedure .procedure_list li:nth-child(5):before{width:57px; height:55px; background:url('../images/skin/main_procedure_icon04.png') no-repeat center;} .sub_event .main_procedure .procedure_list li:nth-child(6):before{width:65px; height:60px; background:url('../images/skin/main_procedure_icon05.png') no-repeat center;} /*faq*/ .sub_event .faq_box{margin-top:120px;} .sub_event .faq_box .main_tittle{margin-bottom:40px;} /*ft bnr*/ .main_ftr_bnr .main_tittle.sub_ft_bnr{flex-direction: column;} .main_ftr_bnr .main_tittle.sub_ft_bnr p{font-size:18px;color:#fff;font-weight:400;} .main_ftr_bnr .main_tittle.sub_ft_bnr h6{margin:20px 0 30px;} @media only screen and (max-width:1317px){ /*visual*/ .sub_event .main_visual .slick-slide .txt_box h3{font-size:5vw;margin:20px 0 40px;} .sub_event .main_visual .slick-slide .txt_box p{font-size:18px;} .sub_event .main_visual .slick-slide .txt_box .more_btn{margin-top:30px;} /*package*/ .sub_event .main_package{margin-top:150px;} } @media only screen and (max-width:1297px){ /*procedure*/ .sub_event .main_procedure .procedure_list li:nth-child(1):before{width:4.7vw; height:4.7vw; } .sub_event .main_procedure .procedure_list li:nth-child(2):before{width:4.93vw; height:4.7vw; } .sub_event .main_procedure .procedure_list li:nth-child(3):before{width:4.62vw; height:4.47vw;} .sub_event .main_procedure .procedure_list li:nth-child(4):before{width:5vw; height:4.5vw;} .sub_event .main_procedure .procedure_list li:nth-child(5):before{width:4.39vw; height:4.2vw;} .sub_event .main_procedure .procedure_list li:nth-child(6):before{width:5vw; height:4.62vw;} } @media only screen and (max-width:1200px){ /*benefit*/ #wrap .event_benefit{gap:0 40px;padding-bottom:50px;} .event_benefit .title{width:calc(42.2% - 40px);} .event_benefit .list li p br{display: none;} } @media only screen and (max-width:1024px){ /*benefit*/ #wrap .event_benefit{margin-top:100px;} .event_benefit .title h3 br, .event_benefit .title p br{display: none;} /*package*/ .sub_event .main_package{margin-top:120px;} /*procedure*/ .sub_event .main_procedure{margin-top:100px;} /*faq*/ .sub_event .faq_box{margin-top:100px;} .sub_event .faq_box .main_tittle{margin-bottom:30px;} } @media only screen and (max-width:860px){ /*benefit*/ #wrap .event_benefit{gap:40px 0;} .event_benefit .title{width:100%;} .event_benefit .title p br{display:inline;} .event_benefit .list{width:100%;} /*package*/ .sub_event .main_package{margin-top:100px;} /*procedure*/ .main_procedure .procedure_list li.on dl dt{font-size:10px;} /*ft bnr*/ .main_ftr_bnr .main_tittle.sub_ft_bnr p{font-size:16px;} .main_ftr_bnr .main_tittle.sub_ft_bnr h6{margin:15px 0 20px;} } @media only screen and (max-width:640px){ /*visual*/ .sub_event .main_visual .slick-slide .txt_box h3{font-size:35px;margin:15px 0 25px;width:75%;} .sub_event .main_visual .slick-slide .txt_box p{font-size:16px;} .sub_event .main_visual .slick-slide .txt_box .more_btn{margin-top:20px;} /*benefit*/ .event_benefit .title h3{font-size:35px;} .event_benefit .title p{font-size:15px;} .event_benefit .list li p{font-size:18px;margin-top:15px;} /*package*/ .sub_event .main_package{margin-top:80px;} /*procedure*/ .sub_event .main_procedure{margin-top:80px;} .sub_event .main_procedure .procedure_list li.on{width:100%;} .sub_event .main_procedure .procedure_list li.on dl dt{font-size:15px;} .sub_event .main_procedure .procedure_list li:nth-child(1):before{width:37px; height:37px; } .sub_event .main_procedure .procedure_list li:nth-child(2):before{width:38px; height:37px; } .sub_event .main_procedure .procedure_list li:nth-child(3):before{width:36px; height:35px;} .sub_event .main_procedure .procedure_list li:nth-child(4):before{width:38px; height:31px;} .sub_event .main_procedure .procedure_list li:nth-child(5):before{width:34px; height:33px;} .sub_event .main_procedure .procedure_list li:nth-child(6):before{width:39px; height:36px;} .sub_event .main_procedure .procedure_list li.on:nth-child(1):before{background-image:url('../images/sub/event_procedure_icon01_on.png');} .sub_event .main_procedure .procedure_list li.on:nth-child(2):before{background-image:url('../images/skin/main_procedure_icon01_on.png');} .sub_event .main_procedure .procedure_list li.on:nth-child(3):before{background-image:url('../images/skin/main_procedure_icon02_on.png');} .sub_event .main_procedure .procedure_list li.on:nth-child(4):before{background-image:url('../images/skin/main_procedure_icon03_on.png');} .sub_event .main_procedure .procedure_list li.on:nth-child(5):before{background-image:url('../images/skin/main_procedure_icon04_on.png');} .sub_event .main_procedure .procedure_list li.on:nth-child(6):before{background-image:url('../images/skin/main_procedure_icon05_on.png');} /*faq*/ .sub_event .faq_box{margin-top:80px;} .sub_event .faq_box .main_tittle{margin-bottom:20px;} /*ft bnr*/ .main_ftr_bnr .main_tittle.sub_ft_bnr h6{margin:10px 0 0;} } @media only screen and (max-width:479px){ /*visual*/ .sub_event .main_visual .slick-slide .txt_box h3{font-size:28px;width:90%;} .sub_event .main_visual .slick-slide .txt_box h3 br{display: none;} .sub_event .main_visual .slick-slide .txt_box p{font-size:14px;} /*benefit*/ #wrap .event_benefit{margin-top:70px;gap:25px 0;padding-bottom:30px;} .event_benefit .title h3{font-size:28px;} .event_benefit .title p{margin-top:10px;font-size:14px;} .event_benefit .title p br{display: none;} .event_benefit .list{gap:15px;} .event_benefit .list li{width:calc(50% - 7.5px);padding:20px 15px;border-radius:5px;} .event_benefit .list li span{width:30px;height:30px;font-size:12px;} .event_benefit .list li p{font-size:16px;margin-top:12px;} /*package*/ .sub_event .main_package{margin-top:60px;} /*procedure*/ .sub_event .main_procedure{margin-top:60px;} /*faq*/ .sub_event .faq_box{margin-top:60px;} /*ft bnr*/ .main_ftr_bnr .main_tittle.sub_ft_bnr p{font-size:14px;} }