/* Common */ .errorMSG {position:relative; overflow:hidden; margin-top:3px; padding-left:2px; font-size:11px; line-height:17px;} /****************************************************************************************************************************************** * DIV Table Type Form *******************************************************************************************************************************************/ /* COL Division (Only GCMS) */ .col {box-sizing:content-box; box-sizing:border-box; position:relative; min-height:1px; padding:0px;} .col.d-1 {width:calc(10% - 10px) !important;} .col.d-2 {width:calc(20% - 10px) !important;} .col.d-3 {width:calc(30% - 10px) !important;} .col.d-4 {width:calc(40% - 10px) !important;} .col.d-5 {width:calc(50% - 10px) !important;} .col.d-6 {width:calc(60% - 10px) !important;} .col.d-7 {width:calc(70% - 10px) !important;} .col.d-8 {width:calc(80% - 10px) !important;} .col.d-9 {width:calc(90% - 10px) !important;} .col.d-10 {width:100% !important;} @media screen and (max-width:1280px) { .col.d-1, .col.d-2, .col.d-3, .col.d-4, .col.d-5, .col.d-6, .col.d-7, .col.d-8, .col.d-9, .col.d-10 {width:100% !important;} } /* Form Section */ .form-section {position:relative; margin-bottom:10px; padding:0; background-color:#fff; border:1px solid #dbdde2; -webkit-box-shadow: 0px 8px 10px -7px rgba(0,0,0,0.2); box-shadow: 0px 8px 10px -7px rgba(0,0,0,0.2);} .form-section:after, .form-section:before {content:" "; display:table} .form-section:after {clear:both} /* Form Section - Header */ .form-section .form_header {padding:20px 25px; line-height:34px;} .form-section .form_header:after, .form-section .form_header:before {content:" "; display:table} .form-section .form_header:after {clear:both} .form-section .form_header H6 {float:left; color:#000; font-weight:700; font-size:16px;} .form-section .form_header .select-option { display: block; position: absolute; right:80px; color: #007acc; letter-spacing: -1px; } @media (max-width:980px) { .form-section .form_header {padding:10px 15px; line-height:34px;} .form-section .form_header H6 {font-size:14px;} } .folderLayer {position:relative; min-height:34px; line-height:34px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .folderLayer .header_btn {position:absolute; top:0; right:0; overflow:hidden; width:100%; height:34px; background:transparent; outline:0; cursor:pointer; font-size:0; text-indent:-1000em} .folderLayer .header_btn:before {content:''; position:absolute; right:0px; display:block; width:34px; height:34px; border:1px solid #CCC} .folderLayer .header_btn.active:before {content:''; position:absolute; right:0px; display:block; width:34px; height:34px; border:1px solid #eb3300} .folderLayer .header_btn:after {content: ''; clear: both; position:absolute; transition:all 0.2s; top:10px; right:11px; width:10px; height:10px; border:2px solid #999; border-top:none; border-right:none; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .folderLayer .header_btn.active:after {top:14px; right:11px; border:2px solid #eb3300; border-top:none; border-right:none; -webkit-transform: rotate(135deg); transform:rotate(135deg);} /* Form Section - Content */ .form-section .form_content {width:100%; border-top:1px solid #e2e6ee} .form-section .form_content.off {display:none;} .form-section .form_content:after, .form-section .form_content:before {content:""; display:table} .form-section .form_content:after {clear:both} .form-section .form_content H7 {float:left; width:180px;} .form-section .form_content H7+.input-content {padding-left:185px} .form-section .form_content H7+.input-content img {display:inline-block; margin-top:10px; max-width:100%; height:auto; text-align:center;} @media (max-width:980px) { .form-section .form_content H7 {width:90px;} .form-section .form_content H7+.input-content {padding-left:95px} } .input-content H8 {display:block; color:#555; font-size:13px; font-weight:500; line-height:22px; margin-bottom:2px; letter-spacing:-0.75px;} /* Title in input-content */ .form-section .contentBox {padding:0 30px} .form-section .contentBox:after, .form-section .contentBox:before {content:""; display:table} .form-section .contentBox:after {clear:both} .form-section .contentBox .forminBox {margin-top:-1px; border-top:1px solid #000} .form-section .contentBox .forminBox:after, .form-section .contentBox .forminBox:before {content: " "; display:table} .form-section .contentBox .forminBox:after {clear:both} .form-section .contentBox .forminBox:last-child {padding-bottom:15px} .form-section .contentBox .forminBox> H7 {display:block; color:#545454; font-size:14px; font-weight:500; line-height:25px; letter-spacing:-1px; margin-bottom:2px; border:0px} .form-section .contentBox>.forminBox:first-child, .form-section .contentBox>:first-child>.forminBox:first-child, .form-section .contentBox>:first-child>:first-child>.forminBox:first-child, .form-section .contentBox>:first-child>:first-child>:first-child>.forminBox:first-child {padding-top:20px; border-top:0} .form-section .contentBox>.forminBox:last-child {padding-bottom:20px ;border-top:1px solid #e3e7ee;} .graph_rating {overflow:hidden;display:inline-block;float:left; width:70px; height:14px; background:url('/img/common/star_rating.png') no-repeat 0 0; background-size:70px auto;} .graph_rating span{display:inline-block; height:14px; background:url('/img/common/star_rating.png') no-repeat 0 -14px; background-size:70px auto; font-size:0; line-height:0;} @media (max-width:980px) { .form-section .contentBox {padding: 0 15px} .form-section .contentBox .forminBox {padding-top:20px; padding-bottom:10px} .form-section .contentBox>.forminBox:last-child {;border-top:1px solid #e3e7ee;} .form-section .contentBox .forminBox> H7 {font-size:13px;} /* If BBS View Page */ .form-section .form_content.bbs_view H7 {display:none;} .form-section .form_content.bbs_view H7+.input-content {padding-left:0px} } .input-group {width:100%; position:relative; display:table; border-collapse:separate} .input-group[class*=col] {float:left; padding:0; margin-right:20px;} .input-group[class*=col]:last-child {margin:0px !important;} @media (max-width:980px) { .input-group[class*=col] {float:left; padding:0; margin:0 0 10px 0;} } /* Input Add On Button */ .input-group-addon {display:table-cell; width:1%; padding:0px 10px; font-size:0.7rem; font-weight:400; text-align:center; background-color:#F8F8F8; border:1px solid #DDD; line-height:24px; white-space:nowrap; vertical-align:middle} .input-group-addon:last-child {border-left:0} /* In Box forminBox */ .form-section .inbox_forminBox {/*margin: 0 -35px;*/ padding:20px 35px; background-color: #f8f9fd} .form-section .inbox_forminBox:after, .form-section .inbox_forminBox:before {content: " "; display: table} .form-section .inbox_forminBox:after {clear:both} @media (max-width:980px) { .form-section .inbox_forminBox {position:relative; padding: 0 10px;} } /* Option Line */ #cert_detail ul li, #area_detail ul li {margin-bottom:5px;} .sub-text {clear:both; display:block; font-size:12px; line-height:18px; margin-top:4px;} /* Image Add On */ .addPDimg .img-list:after, .addPDimg .img-list:before {content:" "; display:table} .addPDimg .img-list:after {clear:both} .addPDimg .img-list li {position:relative; float:left; margin:0 10px 10px 0; padding:0; border-top:0} .addPDimg .img-list li .img {position:relative} .addPDimg .img-list li .btns{display:inline-block; margin-top:8px; width:140px; text-align:center; vertical-align:middle; touch-action:manipulation; cursor:pointer; white-space:nowrap; padding:1px 15px; border-radius:0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none} .addPDimg .img-list li .img:before {position:absolute; left:0; right:0; top:0; bottom:0; opacity:.1; filter:alpha(opacity=10); border:1px solid #000; content:""} .addPDimg .img-list li .img:after {position:absolute; left:0; right:0; top:auto; bottom:0; height:45px; background-color:#000; opacity:.4; filter:alpha(opacity=40); z-index:10; content:""} .addPDimg .img-list li .register-img {display:table-cell; vertical-align:middle; text-align:center; overflow:hidden; position:relative; width:140px; height:140px;} .addPDimg .img-list li .register-img input {z-index:2; font-size:0; opacity:0; filter:alpha(opacity=0); cursor:pointer} .addPDimg .img-list li .register-img .btn-add-img, .addPDimg .img-list li .register-img input {position:absolute; left:0; right:0; top:0; bottom:0; width:140px; height:140px; cursor: pointer;} .addPDimg .img-list li .register-img .btn-add-img .imgGuideTxt {margin-top:51px; font-size:13px; line-height:18px; color:#aaa; text-align: center; vertical-align:middle;} .addPDimg .img-list li .register-img:before {position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed #c1c5cd; content:""; height:140px} @media (max-width:980px) { .addPDimg .img-list li {margin:0 7px 10px 0} .addPDimg .img-list li .img:after {height:40px!important} .addPDimg .img-list li .img img, .addPDimg .img-list li .register-img, .addPDimg .img-list li .register-img .btn-add-img, .addPDimg .img-list li .register-img input {width:160px; height:160px} .addPDimg .img-list li .register-img:before {height:160px} .addPDimg.add-img {overflow:hidden; margin-bottom:0} } /****************************************************************************************************************************************** * Goods Basic List : 2021.09.13 *******************************************************************************************************************************************/ .lum-lightbox {z-index:50} .GBL {position:relative; display:inline-block; width:calc(100% + 20px); margin:0 auto 0 -10px;} .GBL ul {display:-webkit-box; display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap: wrap; flex-wrap:wrap; box-sizing: border-box; flex-direction:row; align-items:auto; justify-content:space-between; align-content:start;} .GBL ul:after {display:block; content:""; margin:15px; flex:999 999 auto;} .GBL ul.div4 li {width:calc(25% - 20px);} .GBL ul.div3 li {width:calc(33.333% - 20px);} .GBL ul.div2 li {width:calc(50% - 20px);} .GBL li {overflow:hidden; position:relative; padding:0px; border-radius:0px; -webkit-box-sizing: border-box; box-sizing:border-box; margin:30px 10px; padding:0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;} .GBL li:hover {transform:translateY(-6px); box-shadow:0 10px 15px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.06); transition: 0.3s; -webkit-box-shadow:0 10px 15px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.06); -moz-box-shadow:0 10px 15px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.06);} .GBL li .thmb {position:relative; width:100%; /*height:0; padding-bottom:100%;*/ height:220px; overflow:hidden; -webkit-perspective:1200px; perspective:1200px; cursor:pointer; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; z-index:1} .GBL li .thmb img {position:absolute; top:50%; left:50%; width:auto; max-width:450px; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); -webkit-transform:translate3d(-50%,-50%,0); transform:translate3d(-50%,-50%,0); -webkit-transition:opacity 0.85s, -webkit-transform 0.85s; transition:opacity 0.85s, transform 0.85s;} .GBL li .thmb img.nImg {height:auto !important; width:100% !important; min-height:100%;} /* 세로 긴형 */ .GBL li:hover .thmb img {-webkit-transform:translate3d(-50%,-50%,80px); transform:translate3d(-50%,-50%,80px); -webkit-transition:opacity 0.4s, -webkit-transform 0.4s; transition:opacity 0.4s, transform 0.4s;} /* Product Summary */ .detailArea {float:left; text-align:center; position:relative; background:#FFFFFF; box-sizing:content-box; box-sizing:border-box; width:100%; /*height:80px;*/ margin:0; padding:20px;} .gbl_subject {display:block; text-align:center; width:100%; max-height:40px; overflow:hidden; margin-bottom:5px; font-size:14px; font-weight:500; line-height:17px; color:#111; letter-spacing:-0.5px; word-wrap:break-word; word-break: break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; white-space:pre-wrap;} /* SIZING */ @media screen and (max-width:1024px) { .GBL ul.div4 li {width:calc(50% - 20px);} } @media screen and (max-width:750px) { .GBL ul.div4 li {width:calc(50% - 20px);} } @media screen and (max-width:500px) { .GBL {position:relative; display:inline-block; width:calc(100% + 6px); margin:0 auto 0 -3px;} .GBL ul.div4 li {width:calc(50% - 20px);} } @media screen and (max-width:320px) { .GBL ul.div4 li {width:calc(100% - 0px);} }