/* 외부연결시 */ #order_box { padding-top:0px; padding-bottom:20px; width:100%; max-width:1220px; margin:0 auto; } #order_box:after{content:""; clear:both; display:block; } #order_box .order_title { display:flex; justify-content:space-between; flex-wrap:nowrap;align-items:center; height:75px; width:100%; } #order_box .order_title div:nth-child(1) { width:50%; font-size: 22px; font-weight: 600; } #order_box .order_title div:nth-child(2) { text-align:right; width:50%; font-weight: 400;} #order_box .tbl_box {width:100%; height:100%; display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; } #order_box .tbl0 { width:34%; padding-right:20px; } #order_box .tbl1 { width:66%; height:100%; display:flex; justify-content:space-between; align-items:stretch; flex-wrap:wrap; } #order_box .tbl1 .td1 { width:68%; padding:0 20px; min-height:600px; height:100%;} #order_box .tbl1 .td1.short { min-height:505px; } #order_box .tbl1 .td2 { width:32%; padding:20px; border:1px solid #d6d6d6; border-radius:8px; flex-grow:1; } #order_box #opt_img_box {width:100%; height: 0; padding-bottom: 130%; position:relative; } #order_box #opt_img {position:absolute; top:0; left:0;width:100%; height:100%; background-color: #fff !important; background-size:cover !important; background-position: center center !important; background-repeat: no-repeat !important;} #order_box .row1 { position:relative; padding:0 0 10px 0; } #order_box .tit1 { display:inline-block; width:15%; padding-top:8px; font-weight: 600; font-size: 16px; vertical-align: top} #order_box .txt1 { display:inline-block; width:83%; padding:2px 0 2px 0px; font-size: 15px; font-weight: 400;} #order_box .txt1 .underline {border-bottom:1px solid #aaa; padding:0 3px 0px 3px; margin: 5px 0 15px 0px; font-size: 14px; font-weight: 400; display:inline-block;} #order_box .txt1 .underline > input { margin-bottom:0px; padding:2px; background-color: #eef2ff; border:none; margin-top:-3px; width:65px; display:none; height:21px;} #order_box .txt1 .underline > input:disabled {background-color: #efefef; color:#999} #order_box .txt1 .underline > select { margin-bottom:0px; padding:2px !important; height:21px; border:none; margin-top:-3px;width:65px; display:none; background-color: #eef2ff !important;} #order_box .tit2 { display:inline-block; width:70px; padding-top:5px; } #order_box #opt_design_sel {width:120px;} #order_box #qnt {width:100px;} #order_box #size_sel {width:258px; background-color: #eef2ff !important;} #order_box #size_sel1 {width:150px; background-color: #eef2ff !important;} #order_box .input_radio { display: inline-block; position: relative; padding:0px 5px 0 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #order_box .input_radio input { position: absolute; opacity: 0; } #order_box .input_radio .checkmark { font-size: 14px; font-weight: 400; padding:0px 2px; text-align:center; width:86px; height:35px; line-height:35px; border-radius: 0px; cursor: pointer; border:1px solid #d6d6d6; display:inline-block; vertical-align:middle;} #order_box .input_radio .checkmark:hover { background-color: #4285F4; color:#fff; border:1px solid #4285F4; } #order_box .input_radio input:checked ~ .checkmark { background-color: #4285F4; color:#fff; border:1px solid #4285F4; } #order_box .price_txt1 { padding:0px 0 5px 0; margin:0px 0 0 0; } #order_box .price_txt1:after{content:""; clear:both; display:block; } #order_box .price_txt1 .left { display:inline-block; float:left; font-size: 15px; font-weight: 600;} #order_box .price_txt1 .right { display:inline-block; float:right;font-size: 15px; font-weight: 400;} #order_box .price_txt1 .red {color:#ff0000!important;} #order_box .price_input {width:100px; text-align:right !important; padding:3px; height:24px!important;;} #order_box .price_input:enabled { background-color: #fff; color:#0066ff;font-size: 16px; } #order_box .price_input:disabled { background-color: #fff; color:#222;font-size: 15px; border:0px dotted red; } #order_box .price_txt2 { padding:0px 0 5px 0; margin:0px 0 0 0; color:#999;font-size: 14px; font-weight: 400;} #order_box .price_txt2:after{content:""; clear:both; display:block; } #order_box .price_txt2 .left { display:inline-block; float:left; width:60%; text-align:left;} #order_box .price_txt2 .right { display:inline-block; float:right; width:40%; text-align:right;} #order_box .price_txt3 { padding:10px 0 0px 0; margin:0px 0 0 0; font-size: 15px; font-weight: 600; border-top:1px solid #aaa;} #order_box .price_txt3:after{content:""; clear:both; display:block; } #order_box .price_txt3 .left { display:inline-block; float:left; width:35%; padding-top:5px; } #order_box .price_txt3 .right { display:inline-block; float:right; width:65%; color:#f62801; font-size:25px;font-weight: 600; letter-spacing:-1px; text-align:right; } /*쇠고리*/ #order_box #eyelet_group {display:none; margin-top:2px;} #order_box .tbl_eyelet { display:inline-block; background-color: #efefef;border-collapse: collapse; padding:1px 0px 0px 10px; width:150px; height:125px; } #order_box .tbl_eyelet td {padding:3px;} #order_box .tbl_eyelet SELECT {width:38px; text-align-last:center; padding-left:0; color:red; background-color: #fff !important; margin:0px; background: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-color: transparent;} #order_box .tbl_eyelet SELECT:disabled {color:#aaa;} #order_box #eyelet_total{ display:inline-block;color:blue; font-weight: bold; width:100%; text-align:center; font-size:1.0em;} #order_box #eyelet_preview{ display:inline-block; padding:5px; background-color: #efefef; width:250px; height:125px; text-align: center; vertical-align: top;} #order_box #size_part_txt {color:red; padding-top:5px; } #order_box #size_ratio {color:#4285F4; padding-top:5px; } #order_box #size_ratio_txt {padding-top:5px; } #order_box #size_alert_txt {display:block; color:red; padding-top:5px; } #order_box #opt4_info {position: absolute; left:40px; top:47px; display:none; text-align:center; padding:15px 5px 15px 5px ; background-color:#1E1E1E; color:#fff; font-size:13px; border-radius:8px; width:150px; line-height:1.2em; } #order_box #opt4_info .triangle_up { position: absolute; top:-8px; left:28px; width: 0px; height: 0px; border-bottom: 8px solid #1E1E1E; border-left: 7px solid transparent; border-right: 7px solid transparent; } #order_box .notice_box {margin-top:10px; padding:10px; background-color: #F9FAFC; border-radius:8px; font-size:14px;} /*템플릿(신)*/ #order_box .btn_tpl_upload {width:100%; margin-top:10px; border:1px solid #4285F4; color:#4285F4; text-align:center; padding:15px 15px; cursor:pointer; } #order_box .btn_tpl_upload:hover {background-color: #4285F4; color:#fff;} #order_box .btn_tpl_down {width:100%; margin-top:10px; border:1px solid #4285F4; background-color: #4285F4; color:#fff; text-align:center; padding:15px 15px; cursor:pointer; } #order_box .tpl_group { display:none;} @media screen and (max-width: 1219px) { #order_box .tbl0 {width:28%;} #order_box .tbl1 {width:70%;} } @media screen and (max-width: 1000px) { #order_box #opt_detail_txt {display:none;} #order_box .tbl1 .td1 {width:100%; border-right:none; min-height:inherit;} #order_box .tbl1 .td2 {width:100%; } #order_box #opt_design_sel {width:100px;} #order_box #qnt {width:40px;} } @media screen and (max-width: 800px) { #order_box .order_title div:nth-child(1) {width:100%; font-size:20px; padding-left:15px;} #order_box .order_title div:nth-child(2) {display:none;} #order_box .tbl0 {width:100%; padding-right:0px;} #order_box .tbl1 {width:calc( 100% - 30px);} #order_box #opt_img_box {padding-bottom: 100%;} #order_box #opt_img {background-size:cover !important; } #order_box .tbl1 .td1 {padding:10px;} #order_box .tbl1 .td2 {padding:10px;} #order_box .tit1 { width:16%; padding-top:8px; font-size: 14px;} #order_box .txt1 { width:82%; font-size: 12px; letter-spacing: -1px;} #order_box .tit2 { width:70px; letter-spacing: -1px; } #order_box .txt1 .underline { margin: 5px 0 5px 0px;} #order_box .txt1 .underline > input { width:50px;} #order_box .txt1 .underline > select { width:50px;} #order_box .price_txt1 .left {font-size: 14px;} #order_box .price_txt1 .right {font-size: 14px;} #order_box .input_radio .checkmark {width:90px; letter-spacing: -1px; } #order_box #eyelet_preview{ width:280px;} } /* 템플릿 */ #order_box .tbl2 select { width:120px; font-size:11px;} #order_box .tbl2 td { font-size:11px;} #order_box .btn_small { display:inline-block; text-align: center; cursor: pointer; font-size: 13px; line-height:1.2em; border:1px solid #222; color:#222; background-color:#fff; border-radius:0px; padding:7px 10px; height:33px;} #order_box .btn_sabang { display:inline-block; text-align: center; cursor: pointer; font-size: 13px; border:1px solid #d6d6d6; color:#222; background-color:#fff; padding:0px 10px; line-height:35px; height:35px; margin:0px!important; border-radius:0px;} #order_box .btn_sabang.on {background-color:#4285F4; color:#fff; border:none; border:1px solid #4285F4;} #order_box .item { margin:0; padding:2px; cursor: pointer; } #order_box .size_type { margin:0; padding:2px; } #order_box input[type=text] {padding:7px; text-align: center; font-size: 14px; margin:0px; height:35px; outline:0; -webkit-appearance: none; -webkit-border-radius: 0;} #order_box select { border:1px solid #ccc; margin:0px;height:35px; padding:0px 0 0 5px; border:1px solid #d6d6d6; width:210px; outline:0; -webkit-border-radius: 0; } #order_box select::-ms-expand {display: none;} #order_box input[type=checkbox] {padding:0px; } #order_box option {padding:5px; } #order_box .qnt:enabled { background-color: #fff; color:#222; } #order_box .qnt:disabled { background-color: #efefef; color:#333; } #order_box .input_checkbox .checkmark { display: inline-block; padding-top:1px; vertical-align:middle; } /* #order_box .input_checkbox { display: inline-block; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-top:7px; cursor: pointer; } #order_box .input_checkbox input { position: absolute; opacity: 0;} #order_box .input_checkbox .checkmark { padding:7px 10px; height:33px; text-align:center; border-radius: 0px; cursor: pointer; background-color: #ccc; font-size:14px; } #order_box .input_checkbox input:checked ~ .checkmark { background-color: #4285F4; color:#fff; } */ #opt_detail_txt {position:relative; padding:10px; border:solid 1px #d6d6d6; font-size: 15px; margin-top:10px;} #opt_detail_txt div:after{content:""; clear:both; display:block; } #opt_detail_txt .box { /*min-height:110px;*/ padding:5px;} #opt_detail_txt .tit { position:absolute; display:inline-block; width:70px; padding:3px; font-weight: 500; } #opt_detail_txt .txt { display:inline-block; width:100%; padding:3px 3px 3px 70px ; color:#666;} /*디자인신청시 제목(임시)*/ #order_box .sub_tit_box_design { display:none} /* 템플릿버튼 */ #btn_template {margin-top:5px; display:block; width:192px; padding:0 20px; text-align:left; border-radius: 17px; color:#445CF2; border:none; font-size:14px !important;cursor: pointer; border:1px solid #445CF2; background-color:#fff; height:35px; line-height:35px; background-size: 12px; background-position: 88% center; background-repeat: no-repeat ; background-image:url('/images/svg/template_down.svg'); } .template_sch_box {height:40px;margin-left:20px;margin-top:10px; display:flex; justify-content:space-between; } @media screen and (max-width: 800px) { #btn_template {display:none;} } /* 팝업_01, 02, 03*/ #popup_mask {position:fixed; display:none; width:100%; height:100%; padding:20% 5%; background:#aaa; opacity:0.7; z-index:10; text-align:center; } .popup_api {position: fixed; display:none; margin: 0 auto; left: 0; right: 0; z-index:99; cursor:pointer; top:10%; width:430px; padding:0px 0px; background-color: #fff; text-align:center; color:#000;} .popup_api img {width:100%;} .popup_api p:nth-child(1) {font-weight: 600; font-size: 20px; margin-top:40px;} .popup_api p:nth-child(2) {font-size:13px; margin-top:20px; margin-bottom:40px;} .popup_api span {color:#3366ff; } .popup_bottom {background-color: #2b2736; padding:5px 10px; color:#fff;} /*팝업하단*/ #popup_soldout { position:fixed; display:none; font-size: 5.0em; font-weight: bold; top:50%; left:50%; transform: translate(-50%, -50%); width:90%; z-index:121; text-align:center;} /*#popup_api_13 { width:430px; padding:40px 0px; background-color: #fff; text-align:center; color:#000; } 현수막분할*/ #popup_api_14 { width:516px; } /*현수막분할(롤블라인드)*/ /*#popup_api_31 { width:430px; padding:40px 0px; background-color: #fff; text-align:center; color:#000;} 게릴라안내안내*/ #popup_api_21 { width:555px; } /*UV안내*/ #popup_api_22 { width:555px; top:5%;} /*모양재단*/ /*#popup_api_23 { width:516px; } 배너양면*/ /*#popup_api_25 { width:430px; padding:40px 0px; background-color: #fff; text-align:center; color:#000;} 템플릿*/ #popup_api_2510 { width:520px; } /*a형*/ @media screen and (max-width: 800px) { #popup_soldout {font-size: 3.0em;} .popup_api {top: 20vh; width:80% !important;} .popup_api p:nth-child(1) {font-size: 15px;} } .st_delivery_box {border:0px solid red;position:relative; margin-top:34px; } .st_delivery_box > .st_txt {color:#2656F6; cursor:pointer; height:20px; font-size:14px; text-align:right; } .st_delivery_box > .st_txt img {margin-top:-2px; pointer-events:none; vertical-align:middle; width:16px;} .st_delivery_box > .st_txt:hover {color:#4285F4;} .st_delivery_box > .st_txt.on {color:#4285F4;} .st_delivery_box > .st_txt:hover img { content: url('/images/svg/question-circle_on.svg');} .st_delivery_box > .st_txt.on img { content: url('/images/svg/question-circle_on.svg');} #st_delivery_detail {display:none; position:absolute; top:30px; right:0px; border:1px solid #4285F4; border-radius:8px; padding: 20px 20px; width:308px; background-color:#fff; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); font-size:13px;text-align:center; } #st_delivery_detail .percent_box {position:relative; display:flex; justify-content:space-between; flex-wrap:nowrap; align-items:center; margin-top:30px;} #st_delivery_detail .percent_box:before { border-top:1px solid #efefef; content:" "; display:inline-block; position:absolute; top:-10px; height:1px; width:100%; } #st_delivery_detail .percent_box span {width:23%; position:relative; padding-top:10px;} #st_delivery_detail .percent_box span:before { background-color:#ccc; content:" "; display:inline-block; position:absolute; top:-15px; left:50%; transform: translate(-50%, 0); width:330px; height:150px; height:10px; width:10px; border-radius:50%; } #st_delivery_detail .percent_box span.on:before { background-color:#4285F4; } @media screen and (max-width: 1000px) { #st_delivery_detail { bottom:30px; top:initial; } } /* 팝업 print 상품 */ #popup_mask_print {position:fixed; display:none; width:100%; height:100%; top:0; left:0; padding:20% 5%; background:#aaa; opacity:0.7; z-index:98; text-align:center; } .popup_print {position: fixed; display:none; z-index:99; cursor:pointer; top:50%; left:50%; transform: translate(-50%, -50%); width:430px; padding:40px 0px; background-color: #fff; text-align:center; color:#000; } .popup_print img {width:100%;} .popup_print p:nth-child(1) {font-weight: 600; font-size: 20px;} .popup_print p:nth-child(2) {font-size:13px; margin-top:20px;} .popup_print span {color:#3366ff; } @media screen and (max-width: 800px) { .popup_print {top: 20vh; width:80% !important;} .popup_print p:nth-child(1) {font-size: 15px;} } /*유튜브링크*/ .youtube { padding:0px; width:100%; max-width:700px; margin:10px auto; border:0px solid red; } .youtube_box {width:100%; aspect-ratio:1.75; position:relative; }