@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:200px;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; text-align:center;} .sub_visual .cont{position:relative; z-index:6; padding-top:110px; } .sub_visual h3{font-size:40px; font-weight:700; 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;} /* 인풋 #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 .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 20px 0; font-size:24px;line-height:1;font-weight:600;color:#222;text-align:center;} #wrap .item_goods_sec p.detail_stit{font-size:14px;color:#ff4646;margin-bottom:30px;} #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:50px; } /* 상품 정보내용 탭 */ #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('../../data/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('../../data/images/sub/step_icon01.png') no-repeat center;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(2) .icon {background:#fff url('../../data/images/sub/step_icon02.png') no-repeat center;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(3) .icon {background:#fff url('../../data/images/sub/step_icon03.png') no-repeat center;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(4) .icon {background:#fff url('../../data/images/sub/step_icon04.png') no-repeat center;} #wrap .item_goods_sec .step_cont ol li:nth-of-type(5) .icon {background:#fff url('../../data/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;} #wrap .item_goods_sec .production_cont ul li {/*width: calc(50% - 16px);*/width:96%;height:80px;margin-left:20px;border:1px solid #ddd;border-radius:10px;box-sizing:border-box;display: flex;vertical-align: top;margin-bottom:20px;align-items:center;align-content: left;padding-left:20px;} #wrap .item_goods_sec .production_cont ul li + li {} /*#wrap .item_goods_sec .production_cont ul li:nth-of-type(5n+1) {margin-left:0;clear:both;}*/ #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:left;} #wrap .item_goods_sec .production_cont .design_scope {margin-top:60px;} #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 li{margin-bottom:15px; padding:0 10px; box-sizing:border-box;} #wrap .item_goods_sec .production_cont ul li + li{margin-left:10px; } #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);} #wrap .item_goods_sec .production_cont ul li{width:calc(100% / 4 - 11.25px); margin-right:15px;} #wrap .item_goods_sec .production_cont ul li + li{margin-left:0;} #wrap .item_goods_sec .production_cont ul li:nth-child(4n){margin-right:0;} } @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 ul li:nth-child(4n){margin-right:15px;} #wrap .item_goods_sec .production_cont ul li:nth-child(3n){margin-right:0;} #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:10px;} #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:nth-child(3n){margin-right:15px;} #wrap .item_goods_sec .production_cont ul li:nth-child(2n){margin-right:0;} #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/company.php*/ .our_company_info{padding:0 0 120px 0;} .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%;margin-top:50px;} .our_company_info .info_box .company_info dl {font-size:0;} .our_company_info .info_box .company_info dl dt{font-size:18px;color:#333;font-weight:500;border-bottom:1px solid #000;width:140px;height:70px;line-height:70px;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{font-size:18px;color:#444;font-weight:400;border-bottom:1px solid #ddd;box-sizing:border-box;padding-left:40px;display: inline-block;width:calc(100% - 143px);line-height:70px;} .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;} /*조직도*/ .our_organization{padding:120px 0;} .our_organization .oranization_box ul{font-size:0;} .our_organization .oranization_box ul li{text-align:center;margin:0 auto;position: relative;} .our_organization .oranization_box ul li span{font-size:20px;font-weight:500;display: inline-block;width:224px;height:60px;line-height:60px;border:1px solid #aaa;box-sizing:border-box;position: relative;} .our_organization .oranization_box .ceo{position: relative;width:180px;height:180px;box-sizing:border-box;border:4px solid #e70012;border-radius:100%;margin:0 auto;text-align:center;line-height:1;} .our_organization .oranization_box .ceo span{position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;color:#666;font-weight:500;display: block;width:100%;height:auto;line-height:1;border:none;} .our_organization .oranization_box .ceo strong{font-size:28px;color:#222;font-weight:700;display: block;line-height:1;margin-top:20px;} .our_organization .oranization_box div.our_help{width:768px;margin:0 auto;margin-top:9px;} .our_organization .oranization_box div.our_help:after{clear:both;content:"";display: block;} .our_organization .oranization_box div.our_help div{display: inline-block;box-sizing:border-box;color:#333;border:1px solid #333;position: relative;float: right;width:226px;height:62px;z-index:2;} .our_organization .oranization_box div.our_help span{display: block;width:100%;height:100%;font-size: 20px;font-weight: 500;color:#333;position: relative;line-height:60px;text-align: center;background:#fff;} .our_organization .oranization_box div.our_help div:before{width:100%;height:1px;content:"";background:#ccc;top:50%;left:-70%;position: absolute;z-index:0;} .our_organization .oranization_box .b_part{position: relative;} .our_organization .oranization_box .b_part:before{width:1057px;height:1px;content:"";background:#ccc;position: absolute;left:50%;top:90px;transform:translate(-50%);} .our_organization .oranization_box ul li.our_council{margin-top:18px;} .our_organization .oranization_box ul li.our_council:before{width:1px;height:90px;content:"";background:#ccc;position: absolute;top:-90px;left:50%;} .our_organization .oranization_box ul li.our_council:after{width:1px;height:30px;content:"";background:#ccc;position: absolute;top:60px;left:50%;} .our_organization .oranization_box ul li.our_council li:before{width:1px;height:30px;content:"";background:#ccc;position: absolute;top:-30px;left:50%;z-index:-1;} .our_organization .oranization_box ul li.our_council span{border:1px solid #333;background:#333;color:#fff;} .our_organization .oranization_box ul li .sub_part{margin-top:60px;} .our_organization .oranization_box ul li .sub_part > li{display: inline-block;vertical-align:top;} .our_organization .oranization_box ul li .sub_part > li + li{margin-left:40px;} .our_organization .oranization_box ul li .sub_part > li span{border:1px solid #888;background:#888;} .our_organization .oranization_box ul li .sub_part .last_part li:nth-child(1){margin-top:20px;} .our_organization .oranization_box ul li .sub_part .last_part li + li{margin-top:10px;} .our_organization .oranization_box ul li .sub_part .last_part li span{font-size:18px;color:#333;background:#fff;border:1px solid #aaa;} /*회사 내부*/ .our_photo{background:#f5f5f5;padding:120px 0 115px 0;} .our_photo .photo_box .photo_list{font-size:0;} .our_photo .photo_box .photo_list:after{clear:both;display: block;content:"";} .our_photo .photo_box .photo_list li{margin-bottom:5px;float: left;} .our_photo .photo_box .photo_list li + li{margin-left:5px;} .our_photo .photo_box .photo_list li:nth-child(1){width:447px;height:227px;background:url('../images/sub/company_photo_01.jpg')no-repeat;background-size:cover;} .our_photo .photo_box .photo_list li:nth-child(2){width:374px;height:227px;background:url('../images/sub/company_photo_02.jpg')no-repeat;background-size:cover;} .our_photo .photo_box .photo_list li:nth-child(3){width:447px;height:227px;background:url('../images/sub/company_photo_03.jpg')no-repeat;background-size:cover;} .our_photo .photo_box .photo_list li:nth-child(4){clear:both;float: left;margin-left:0;width:261px;height:187px;background:url('../images/sub/company_photo_04.jpg')no-repeat;background-size:cover;} .our_photo .photo_box .photo_list li:nth-child(5){width:253px;height:187px;background:url('../images/sub/company_photo_05.jpg')no-repeat;background-size:cover;} .our_photo .photo_box .photo_list li:nth-child(6){width:340px;height:187px;background:url('../images/sub/company_photo_06.jpg')no-repeat;background-size:cover;} .our_photo .photo_box .photo_list li:nth-child(7){width:407px;height:187px;background:url('../images/sub/company_photo_07.jpg')no-repeat;background-size:cover;} /*기술력 /sub/sub_tech.html*/ .sub_tech{margin-top:60px;;} .sub_tech h2{font-size:40px;color:#333;font-weight:500;text-align:center;line-height:1;margin-bottom:40px;} .sub_tech .tabs{text-align:center;width:100%;font-size:0;} .sub_tech .tabs li{width:190px;height:50px;line-height:50px;box-sizing:border-box;border:1px solid #ccc;cursor:pointer;text-align:center;display: inline-block;font-size:18px;color:#333;font-weight:400;} .sub_tech .tabs li.current{border:1px solid #333;background:#333;color:#fff;} .sub_tech .tabs li + li{margin-left:9px;} .sub_tech .tabs li a {color:inherit;font-size:inherit;font-weight:inherit;} .sub_tech .tab-content{width:1280px;margin:0 auto;display: none;} .sub_tech .tab-content.current{display: block;} .sub_tech .tab-content .tech_tit h3{font-size:32px;color:#333;font-weight:400;line-height:1;padding-left:33px;margin:40px 0 20px 0;position: relative;} .sub_tech .tab-content .tech_tit h3:before{width:20px;height:2px;content:"";background:#c61b22;display: inline-block;vertical-align:middle;position: absolute;left:0;top:50%;transform:translateY(-50%);} .sub_tech .tab-content .tech_tit p{font-size:18px;color:#333;font-weight:300;} .sub_tech .tab-content .tech_list{margin-top:40px;font-size:0;margin-bottom:90px;} .sub_tech .tab-content .tech_list li{margin-bottom:40px;text-align:center;width:calc(20% - 24px);display: inline-block;vertical-align:top;} .sub_tech .tab-content .tech_list li + li{margin-left:30px;} .sub_tech .tab-content .tech_list li:nth-of-type(5n+1){margin-left:0;} .sub_tech .tab-content .tech_list li .tech_img{box-sizing:border-box;border:8px solid #ddd;} .sub_tech .tab-content .tech_list li .tech_img img{width:100%;} .sub_tech .tab-content .tech_list li p{font-size:16px;color:#333;font-weight:400;line-height:1.4;margin-top:20px;letter-spacing:-0.05em;} /*회사연혁 /sub/sub_history.html*/ .sub_history{margin-top:60px;margin-bottom:90px;} .sub_history h2{font-size:40px;color:#333;font-weight:500;text-align:center;line-height:1;margin-bottom:30px;} .sub_history p{font-size:18px;color:#333;font-weight:300;text-align:center;} .history_cont{box-sizing:border-box;width:1280px;margin:0 auto;margin-top:50px;} .history_cont > ul{box-sizing:border-box;border-top:1px solid #000;} .history_cont > ul > li{box-sizing:border-box;vertical-align:top;width:100%;} .history_cont > ul > li + li{border-top:1px solid #ddd;} .history_cont > ul > li .history_box .history_year{padding-top:27px;padding-left:50px;float: left;} .history_cont > ul > li .history_box .history_year span{font-size:34px;color:#000;font-weight:600;} .history_cont > ul > li .history_box .history_detail{padding:40px 0 40px 164px;float: left;} .history_cont > ul > li .history_box .history_detail .detail{font-size:17px;color:#444;font-weight:300;position: relative;padding-left:13px;} .history_cont > ul > li .history_box .history_detail .detail:before{width:3px;height:3px;content:"";background:#888;border-radius:100%;position: absolute;left:0;top:50%;transform:translateY(-50%);} .history_cont > ul > li .history_box .history_detail .detail + .detail{margin-top:15px;} /*210329*/ /*210330*/ /*파트너*/ #wrapper .sub_partner{margin:60px auto 154px auto;} .sub_partner .partner_tit h2{font-size:40px;color:#333;font-weight:500;text-align:center;line-height:1;margin-bottom:30px;} .sub_partner .partner_tit p{font-size:18px;color:#333;font-weight:300;text-align:center;} .sub_partner .partner_tit p + p{margin-top:5px;} .sub_partner .sub_partner_list h3{font-size:32px;color:#333;font-weight:400;line-height:1;padding-left:33px;margin:60px 0 30px 0;position: relative;} .sub_partner .sub_partner_list h3:before{width:20px;height:2px;content:"";background:#c61b22;display: inline-block;vertical-align:middle;position: absolute;left:0;top:50%;transform:translateY(-50%);} .sub_partner .sub_partner_list .list_box{width:100%;font-size:0;} .sub_partner .sub_partner_list .list_box li{margin-bottom:10px;box-sizing:border-box;border:1px solid #ddd;display: inline-block;} .sub_partner .sub_partner_list .list_box li img{width:100%;} .sub_partner .sub_partner_list .list_box li + li{margin-left:10px;} .sub_partner .sub_partner_list.business_partner .list_box li{width:calc(16.6666% - 9px);} .sub_partner .sub_partner_list.business_partner .list_box li:nth-of-type(6n+1){margin-left:0;} .sub_partner .sub_partner_list.main_partner h3{margin:50px 0 30px 0;} .sub_partner .sub_partner_list.main_partner .list_box li{width:calc(14.2857% - 9px);} .sub_partner .sub_partner_list.main_partner .list_box li:nth-of-type(7n+1){margin-left:0;} /*오시는 길*/ .sub_location_wrap{margin:60px auto 184px auto;width:1280px;} .sub_location_wrap .location_tit h2{font-size:40px;color:#333;font-weight:500;text-align:center;line-height:1;} /*210330*/ /* .our_value {padding:104px 0 144px;background:url(../image/sub/bg_value.gif) no-repeat 120% 0;} .our_value .value_wrap {} .our_value .value_wrap h4, .our_value .value_wrap p {box-sizing:border-box;width:100%;margin:0;padding:0;text-align:left;} .our_value .value_wrap h4 {letter-spacing:-0px;color:#333;font-weight:100;font-size:70px;line-height:84px;padding:0 0 22px;border-bottom:1px #ddd solid;margin:0 0 23px;} .our_value .value_wrap h4 strong, .our_value .value_wrap h4 em {font-weight:500;} .our_value .value_wrap p strong {font-weight:700;} .our_value .value_wrap h4 strong {} .our_value .value_wrap h4 em {color:#e70012;} .our_value .value_wrap h4 span {font-style:italic;} .our_value .value_wrap p {color:#888;font-size:20px;line-height:34px;} .our_value .value_odd {} .our_value .value_even {padding:12px 0;} .our_value .value_even h4, .our_value .value_even p {padding-left:45%;} */ .our_ceo.company_wrap {padding:0;} .our_ceo .ceo_img {position:relative;z-index:1;margin:0;height:0;width:100%;padding:0 0 787px;background:url(../image/sub/bg_ceo.jpg) no-repeat 50% 50%;background-size:cover;} .our_ceo .ceo_txt {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);} .our_ceo .ceo_txt h3:before {display:none;} .our_ceo .ceo_txt h3, .our_ceo .ceo_txt p {color:#fff;margin:0;padding:0;text-align:left;} .our_ceo .ceo_txt h3 {font-size:20px;font-weight:700;letter-spacing:1em;line-height:1em;} .our_ceo .ceo_txt p {font-size:20px;font-weight:400;line-height:1.6em;padding-top:2em;} .our_ceo .ceo_info {background:#eee;text-align:center;padding:62px 0;} .our_ceo dl {} .our_ceo dl:after {clear:both;content:"";display:block;} .our_ceo dt, .our_ceo dd {text-align:left;color:#000;margin:0;padding:0;position:relative;z-index:1;box-sizing:border-box;display:inline-block;vertical-align:top;} .our_ceo dt {font-size:50px;line-height:1em;font-weight:400;width:37.2%;letter-spacing:-1.0px;float:left;} .our_ceo dt em {font-size:21px;line-height:1.1em;letter-spacing:0;width:18%;font-weight:inherit;display:inline-block;} .our_ceo dt em span {font-size:25px;line-height:1.1em;letter-spacing:1.2px;font-weight:inherit;display:inline-block;width:100%;} .our_ceo dt:before {content:"";display:inline-block;width:44%;height:1px;background:#000;opacity:0.8;position:absolute;right:0;top:50%;} .our_ceo dd {padding-left:3.8%;width:62.8%;} .our_ceo dd ul {font-size:0;text-align:left;width:50%;} .our_ceo dd li {box-sizing:border-box;display:inline-block;vertical-align:top;position:relative;z-index:1;letter-spacing:-0.4px;padding:6px 0 6px 12px;line-height:1.3em;font-size:18px;width:100%;} .our_ceo dd li:before {content:"";display:inline-block;width:4px;height:4px;background:#000;opacity:0.8;position:absolute;left:0;top:50%;margin-top:-2px;} .our_ceo dd ul:nth-of-type(odd) {float:left;} .our_ceo dd ul:nth-of-type(even) {float:right;} .our_history {padding:104px 0 70px;} .our_history .title_liner {padding-bottom:124px;} .our_history h4 {float:right;color:#ddd;font-size:80px;font-weight:600;letter-spacing:-2px;text-align:right;line-height:1em;margin:0;} .our_history ol {text-align:left;position:relative;z-index:1;} .our_history ol:after {clear:both;content:"";display:block;} .our_history li {position:relative;z-index:1;display:inline-block;vertical-align:top;float:left;width:16.65%;box-sizing:border-box;padding-right:28px;padding-bottom:48px;} .our_history li:before, .our_history strong:before, .our_history li p:before {content:"";display:inline-block;position:absolute;margin:0;padding:0;box-sizing:border-box;} .our_history li:before {background:#ccc;height:1px;width:100%;left:0;top:57px;} .our_history strong:before {background:#e70d1d;border:4px #fff solid;border-radius:100%;width:16px;height:16px;left:28px;top:50px;} .our_history li:last-child {padding-right:0;} .our_history li strong {line-height:36px;font-size:33px;font-weight:600;margin:0;padding:0 0 48px;display:block;} .our_history li p {position:relative;z-index:1;padding-left:8px;line-height:26px;font-size:14px;letter-spacing:-0.4px;font-weight:400;color:#565656;white-space:normal;word-break:keep-all;word-wrap:break-word;} .our_history li p:before {height:1px;background:#565656;left:0;top:13px;width:4px;} .our_history li p + p {margin-top:10px;} .our_history + .merit_slide {background:#eee;} .our_client {background:#eee;position:relative;z-index:1;padding:84px 0 46px;} .our_client h4 {text-align:left;font-weight:400;display:inline-block;margin:0 auto 0 0;width:auto;position:relative;z-index:1;} .our_client h4:before {top:50%;left:0;height:2px;width:20px;margin-top:-1px;content:"";display:inline-block;background:#c61b23;margin:0;padding:0;position:absolute;} .our_client ul {display:block;width: calc(100% + 8px);margin-left:-8px;padding:12px 0 54px;} .our_client ul:after {clear:both;content:"";display:block;} .our_client li {width:14.28%;box-sizing:border-box;padding:8px 0 0 8px;display:inline-block;vertical-align:top;float:left;} .our_client li:nth-of-type(7n + 1) {clear:both;float:left;} .our_client li + li {} .our_client li img {width:100%;height:auto;} .m_img{display: none;} @media only screen and (max-width:1300px){ .our_organization .oranization_box .b_part:before{width:calc(100% - (20% - 16px));} .our_organization .oranization_box ul li .sub_part{width:100%;} .our_organization .oranization_box ul li .sub_part > li{width:calc(20% - 16px);} .our_organization .oranization_box ul li .sub_part > li + li{margin-left:20px;} .our_organization .oranization_box ul li .sub_part > li > span{width:100%;} .our_organization .oranization_box ul li span{font-size:16px;} .our_organization .oranization_box ul li .sub_part .last_part li span{font-size:14px;width:100%;} .our_photo .photo_box .photo_list li:nth-child(1), .our_photo .photo_box .photo_list li:nth-child(2), .our_photo .photo_box .photo_list li:nth-child(3){width:calc(33.3333% - 4px);} .our_photo .photo_box .photo_list li:nth-child(4), .our_photo .photo_box .photo_list li:nth-child(5), .our_photo .photo_box .photo_list li:nth-child(6), .our_photo .photo_box .photo_list li:nth-child(7){width:calc(25% - 4px);} } @media only screen and (max-width:900px){ .our_ceo dt{width:100%;float:none;} .our_ceo dt:before{display: none;} .our_ceo dt em{width:auto;} .our_ceo dd{display: block;padding:0;width:100%;clear:both;padding-top:30px;} .our_ceo dd:after{clear:both;content:"";display: block;} .our_organization .oranization_box .b_part:before{width:calc(100% - (20% - 10px));} .our_organization .oranization_box div.our_help{width:100%;} .our_organization .oranization_box div.our_help div{width:29.5%;} .our_organization .oranization_box ul li .sub_part > li{width:calc(20% - 8px);} .our_organization .oranization_box ul li .sub_part > li + li{margin-left:10px;} .our_organization .oranization_box ul li .sub_part > li > span{line-height: 18px;display: flex;align-items: center;justify-content: center;} .our_organization .oranization_box ul li span{font-size:14px;} .our_photo .photo_box .photo_list li:nth-child(1), .our_photo .photo_box .photo_list li:nth-child(2), .our_photo .photo_box .photo_list li:nth-child(3){height:130px;} .our_photo .photo_box .photo_list li:nth-child(4), .our_photo .photo_box .photo_list li:nth-child(5), .our_photo .photo_box .photo_list li:nth-child(6), .our_photo .photo_box .photo_list li:nth-child(7){height:100px;} } @media only screen and (max-width:640px){ .sub_cont.merit{display: none;} .m_img{display: block;} }