443 lines
27 KiB
CSS
443 lines
27 KiB
CSS
@charset "utf-8";
|
|
|
|
/* reset */
|
|
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,.side_cate,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,blockquote{margin:0;padding:0; -webkit-text-size-adjust:none; word-break: keep-all;word-wrap: break-word;}
|
|
body,table{font-size: 13px;font-family: 'Noto Sans Korean', sans-serif; color:#333;letter-spacing:0em;vertical-align: middle;}
|
|
*{box-sizing: border-box;word-break: keep-all;word-wrap: break-word;}
|
|
body{background:#fff;-webkit-text-size-adjust:none;width: 100%; height: 100%;}
|
|
fieldset,img,iframe,frame{border:0}
|
|
|
|
legend,caption{overflow:hidden;position:absolute;font-size:0;line-height:0;visibility:hidden}
|
|
h1,h2,h3,h4,h5,h6{font-size:1em}
|
|
img{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
|
|
img,input,textarea,fieldset{border:0 none;outline:none}
|
|
ul,ol,dl,li,dt,dd{list-style:none;margin:0;padding:0;}
|
|
em,address{font-style:normal}
|
|
a{color:#373e40;text-decoration:none;outline: none;}
|
|
a:link,a:visited,a:hover,a:active{text-decoration:none;outline: none;}
|
|
strong{font-weight:bold}
|
|
legend,hr,caption{display:none}
|
|
table{border-spacing:0; text-align: center;}
|
|
input,textarea,button,select,option{font-family: inherit; text-decoration: none;letter-spacing:0em; outline: 0;-webkit-tap-highlight-color:transparent;vertical-align: middle;}
|
|
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
|
|
select{text-indent:5px;}
|
|
ul{text-decoration:none;}
|
|
figure{margin:0;padding:0;}
|
|
html{width: 100%; height: 100%;}
|
|
/* layout */
|
|
.innopay{width: 100%; height: 100%;}
|
|
.popup_notice{width: 100%;height: 100%;display: none;position: fixed; top: 0;left: 0;}
|
|
.popup_notice .dim{background: #888; opacity: 0.94;width: 100%; height: 100%;position: fixed;top: 0;left: 0;vertical-align: middle;z-index: 100;}
|
|
.popup_notice .text{padding:0;color: #fff;text-align: center;position: fixed;top: 50%;width: 100%;z-index: 1000;}
|
|
.popup_notice p{padding:0 20px;color: #fff;text-align: center;font-size: 30px; width: 100%;font-weight: 500;width: 100%;line-height: 1.3;}
|
|
.popup_notice span{padding:0 30px;color: #fff;font-size: 20px;text-align: center;font-weight: normal;line-height: 28px;width: 100%;display: block;}
|
|
.innopay_wrap{width:680px;}
|
|
.contents{background: #f0f1f2;}
|
|
.contents:after{content:"";display:block;clear:both;}
|
|
.con_wrap{padding:24px 30px; width: 460px; height: 600px;float: left;position: relative; }
|
|
.con_wrap:after{content:"";display:block;clear:both;}
|
|
.float_wrap{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
|
|
.receipt_wrap{width: 500px;position: relative;background: #f0f1f2;}
|
|
.receipt_wrap:after{content:"";display:block;clear:both;}
|
|
.notice{color: #999; font-size: 12px;padding:6px 0px 0px 0px;line-height: 16px;float: left;}
|
|
|
|
|
|
/* form common */
|
|
input{width: 100%; height: 30px;padding-left: 15px; line-height: 13px; border:none;-webkit-appearance:none;border-radius:0 3px 3px 0;font-weight: 500;font-size: 13px;vertical-align: middle;}
|
|
::-webkit-input-placeholder{ color: #999;font-weight: normal;}:-moz-placeholder {color: #999;font-weight: normal;}::-moz-placeholder { color: #999;font-weight: normal;}:-ms-input-placeholder { color: #999;font-weight: normal;}
|
|
::-ms-clear {display: none;}
|
|
input[type="number"]::-webkit-outer-spin-button,
|
|
input[type="number"]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
input.security{-webkit-text-security:disc;}
|
|
/*check*/
|
|
.checks {line-height: 15px;padding:5px 0;float: right;font-weight: 500;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;}
|
|
.checks input[type="checkbox"] { /* 실제 체크박스는 화면에서 숨김 */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0 }
|
|
.checks input[type="checkbox"] + label { display: inline-block; position: relative; padding-left: 32px; /* 글자와 체크박스 사이의 간격을 변경 */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
|
|
.checks input[type="checkbox"] + label:before { /* 가짜 체크박스 */ content: ''; position: absolute; left: 0; top: -5px; /* 이 값을 변경해서 글자와의 정렬 */ width: 24px; height: 24px;line-height: 24px; text-align: center; background: #fff; border: 1px solid #ccc; border-radius : 3px;}
|
|
.checks:hover input[type="checkbox"] + label:before { /* 가짜 체크박스 */ border: 1px solid #6e91d2;}
|
|
.checks input[type="checkbox"] + label:active:before, .checks input[type="checkbox"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); }
|
|
.checks input[type="checkbox"]:checked + label:before { /* 체크박스를 체크했을때 */ content: '';background: #1e5dd2; border-color: #1e5dd2; background-image: url('../images/check.png'); background-repeat: no-repeat; background-size: 14px 14px; -webkit-background-size: 14px 14px; background-position: center center;}
|
|
|
|
/* select */
|
|
select::-ms-expand {display: none;}
|
|
.select_type1{position:relative;height: 30px;}
|
|
.select_type1 select{z-index: 2;position: absolute; top: 0; background-color: rgba(255, 255, 255, 0);font-weight: 500;width:100%;height: 30px;padding: 0px 0 0px 10px;border:none;border-radius:0 3px 3px 0;font-size:13px;color:#222;font-family: 'Noto Sans Korean', sans-serif;-webkit-appearance:none;appearance: none;vertical-align: middle;}
|
|
.select_type1:after{z-index: 1; content:"";display:block;position:absolute;right:10px;top:11px;width:14px;height:8px;background: url(../images/arrow_b_gray.png) no-repeat 0 0px;background-size:14px 8px;}
|
|
|
|
/*btn*/
|
|
a.btn{font-size: 16px;height: 40px; line-height: 38px; text-align: center; display: inline-block;border:none; border-radius: 3px;font-weight: 500; -webkit-tap-highlight-color:transparent;color: #fff; width: 100%;vertical-align: middle;}
|
|
a.btn_s{font-size: 14px;height: 32px; line-height: 30px; text-align: center; display: inline-block;border:none; border-radius: 3px;font-weight: 500; -webkit-tap-highlight-color:transparent;color: #fff; width: 18%;vertical-align: middle;margin-left: 2%;}
|
|
.btn_blue{background-color: #1e5dd2;}
|
|
.btn_gray{background-color: #9e9fa1;}
|
|
.btn_blue:hover{background-color: #0d47b4;}
|
|
.btn_gray:hover{background-color: #7e7f81;}
|
|
.btn_blue:active{background-color: #0d47b4;}
|
|
.btn_gray:active{background-color: #7e7f81;}
|
|
.btn_blue:focus{background-color: #0d47b4;}
|
|
.btn_gray:focus{background-color: #7e7f81;}
|
|
.btn_black{background-color: #222;}
|
|
.btn_black:hover{background-color: #111;}
|
|
.btn_black:active{background-color: #111;}
|
|
.btn_black:focus{background-color: #111;}
|
|
.btn_wrap{padding: 0 30px 30px 30px;width: 100%; position: absolute; bottom: 0; right: 0;}
|
|
.btn_wrap:after{content:"";display:block;clear:both;}
|
|
.btn_wrap div{margin: 0 auto;width: 50%;}
|
|
.btn_wrap_multi{padding: 0 30px 30px 30px;width: 100%; position: absolute; bottom: 0; right: 0;}
|
|
.btn_wrap_multi:after{content:"";display:block;clear:both;}
|
|
.btn_wrap_multi div{margin: 0 auto;}
|
|
.btn_wrap_multi a:first-child{margin-right:3%;}
|
|
.btn_wrap_multi a{float:left;display: inline-block;width:48.5%;}
|
|
|
|
/*layer_popup*/
|
|
.terms1, .terms2, .terms3, .terms4{display: none;}
|
|
.pop_dim{width: 100%; height: 100%; background-color:#333; opacity: 0; position: fixed; z-index: 100; top: 0; left: 0;}
|
|
a.pop_btn_close{ width: 20px; height: 20px; padding: 15px;position: fixed; right: 0; top: 0; z-index: 1000; background: url('../images/btn_layer_close.png') no-repeat 15px 15px; background-size: 20px 20px;}
|
|
a.btn_close.pop_close{width: 50px; height: 50px; position: absolute;top: 0; right: 0;background:url('../images/i_x.png') no-repeat center center;}
|
|
a.btn_close.pop_close:hover{background:url('../images/i_x_on.png') no-repeat center center;}
|
|
a.btn_close.pop_close:active{background:url('../images/i_x_on.png') no-repeat center center;}
|
|
a.btn_close.pop_close:focus{background:url('../images/i_x_on.png') no-repeat center center;}
|
|
.popup{width: 400px; height: 490px;position:absolute; z-index: 1000; top:50%; left:50%;margin:0; background-color: #fff; border-radius: 3px; overflow: hidden;}
|
|
.popup:after{content:"";display:block;clear:both;}
|
|
.popup h3.popup_title{font-size: 14px; color: #222; font-weight: 500; line-height: 14px; width: 100%;padding:18px 0 18px 30px;z-index: 1000; background-color:#fff; border-bottom: 1px solid #0d47b4;}
|
|
.popup .popup_cont{width: 100%;}
|
|
.popup .popup_cont .popup_scroll{width: 100%; height: 439px; overflow: auto;}
|
|
.popup.conditions_text .popup_cont .popup_scroll_in{padding: 30px 30px 80px 30px;max-width:640px;margin:0 auto; }
|
|
.popup.conditions_text p{font-size: 12px; color: #666; font-weight: normal; line-height: 18px;z-index: 1000; margin-bottom: 20px;}
|
|
.popup_btn_wrap{position: absolute; bottom: 0;width: 100%;padding:15px 0; background-color: #fff;padding: 20px 20px;height: 80px; background:url('../images/btn_area.png') repeat-x 0 0; background-size: 10px 80px; }
|
|
.popup_btn_wrap .btn{font-size: 14px; line-height: 40px;height: 40px;margin: 0 auto;}
|
|
.card_frame{ display: none; }
|
|
|
|
/*카드사 팝업*/
|
|
.popup.card_pay{width: auto; height:auto;position:absolute; z-index: 1000; top:50%; left:50%;background-color: #fff; border-radius: 3px; overflow: hidden;padding: 24px 0 0 0;}
|
|
.popup.card_pay a.btn_close.pop_close{width: 24px; height: 24px; position: absolute;top: 0; right: 0;background:url('../images/i_x.png') no-repeat center center;}
|
|
.popup.card_pay a.btn_close.pop_close:hover{background:url('../images/i_x_on.png') no-repeat center center;}
|
|
.popup.card_pay a.btn_close.pop_close:active{background:url('../images/i_x_on.png') no-repeat center center;}
|
|
.popup.card_pay a.btn_close.pop_close:focus{background:url('../images/i_x_on.png') no-repeat center center;}
|
|
.popup.card_pay iframe{border-top: 1px solid #eee;width: 200px;height: 200px;}
|
|
|
|
|
|
/*gnb*/
|
|
.gnb{width: 100%; height: 50px;background-color:#fff;}
|
|
.gnb:after{content:"";display:block;clear:both;}
|
|
.gnb .logo{padding-top:13px; padding-left: 30px;float: left;}
|
|
.gnb .logo img{height: 26px; width: auto;}
|
|
.gnb .kind{line-height:50px; font-size: 14px; font-weight: normal; color:#1e5dd2; padding-right: 30px; text-align: center;float: right;}
|
|
|
|
/*contents*/
|
|
h2{font-size: 14px; line-height: 26px; color:#444; font-weight: 500;padding-bottom: 6px;float: left;}
|
|
.footer{font-size: 11px; color: #fff; position: absolute; bottom: 30px; left: 30px; opacity: 0.5; letter-spacing:0.1em;}
|
|
|
|
/*결제요청셈플*/
|
|
/**
|
|
article h2{display: block;width: 100%;font-size: 16px;}
|
|
form{}
|
|
form table{padding:20px 0 0 0px;width: 100%;}
|
|
form td{padding:0 0px 5px 0;text-align: left;}
|
|
form td.title{width: 150px;}
|
|
form input{border: 1px solid #aaa;border-radius: 0;padding-left: 10px;width: 100%;}
|
|
form .btn_submit{width: 100%; border-radius: 4px; padding: 0; margin: 20px 0;height: 40px;background-color: #1e5dd2;border: none;color: #fff;font-weight: bold;}
|
|
**/
|
|
|
|
/*주문정보*/
|
|
.order_info{width:220px; background: #1e5dd2; color: #fff;height: 600px;float: left;}
|
|
.order_info .step{width:220px;font-size: 12px; font-weight: normal;border-bottom: 1px solid;border-color: rgba(255,255,255,0.15);background-image: url('../images/arrow_r_white.png'), url('../images/arrow_r_white.png');background-repeat: no-repeat; background-size: auto 40px;background-position: 33.3% 0, 66.6% 0;}
|
|
.order_info .step:after{content:"";display:block;clear:both;}
|
|
.order_info .step li{float: left; width: 33.3%;text-align: center;line-height: 40px;opacity: 0.3;}
|
|
.order_info .step li.on{opacity: 1;}
|
|
.order_info .product_info{padding: 38px 30px 0 30px;}
|
|
.order_info .product_info:after{content:"";display:block;clear:both;}
|
|
.order_info .product_info li{display: table;width: 100%;}
|
|
.order_info .product_info li.company_name{font-size: 12px; font-weight: 500;color: #fff;line-height:16px;}
|
|
.order_info .product_info li.product_name{font-size: 12px; font-weight: 500;color: #fff;line-height:16px;word-break: keep-all;margin-top: 12px;}
|
|
.order_info .product_info li.price{font-size: 18px; line-height: 18px; color:#ffa800; font-weight: bold;margin-top: 12px;}
|
|
.order_info .product_info li.price span{font-size: 13px; line-height: 20px;color:#ffa800;font-weight: 500;}
|
|
.order_info .product_info li.term{font-size: 12px; font-weight: normal;color: #fff;line-height:18px;padding-top: 12px;}
|
|
.order_info .product_info li div{display: table-cell;}
|
|
.order_info .product_info div.info_title{font-size: 12px; font-weight: 200;color: #fff;opacity: 0.5;width: 54px!important;text-align: left;}
|
|
|
|
/*약과동의*/
|
|
.terms{float: left; width: 100%;}
|
|
.terms > ul{float: left;width: 100%;padding:18px 24px;background: #fff; border-radius:3px; }
|
|
.terms > ul li{float: left; width: 100%;padding-bottom: 8px;}
|
|
.terms > ul li:last-child{padding-bottom: 0;}
|
|
.terms > ul li > span{float: left;line-height: 15px;font-size: 13px; color: #666;padding:5px 0; }
|
|
.terms > ul li > a{opacity: 0.7; line-height: 13px;padding:6px 0;margin-right: 10px; color: #1e5dd2; padding-right:10px; float:right; background: url(../images/arrow_r_blue.png) no-repeat right 8px; background-size: 6px 10px;-webkit-tap-highlight-color:transparent;}
|
|
.terms > ul li > a:hover{opacity: 1;}
|
|
|
|
/*결제 정보 입력*/
|
|
.payment_input{float: left; width: 100%;margin-top: 24px}
|
|
.payment_input > div{float: left;width: 100%;}
|
|
.payment_input .input_section{width:100%;display: table;margin-bottom: 6px; border:1px solid #ddd; border-radius: 3px;background: #fff;}
|
|
.payment_input .input_section:last-child{margin-bottom: 0;}
|
|
.payment_input .input_title{display: table-cell;width: 96px; height: 30px; line-height: 13px; padding: 8px 0 8px 12px; font-size: 13px; border-right: 1px solid #eee;color:#666; }
|
|
.payment_input .input_section .card_num{color: #999;padding-left: 10px;}
|
|
.payment_input .input_section .card_num input{width: 40px;padding: 0px;text-align: center;}
|
|
.payment_input .input_section .card_num input.security{width: 54px;}
|
|
.payment_input .select_type1{display: table-cell;}
|
|
.payment_input .input_type1{display: table-cell;position: relative;}
|
|
.payment_input .input_type1 input:-ms-input-placeholder { color: #999; }
|
|
.payment_input .input_type1 input::-webkit-input-placeholder { color: #999; }
|
|
.payment_input .input_type1 input::-moz-placeholder { color: #999; }
|
|
.payment_input .input_type1 input.e_mail {}
|
|
.payment_input .input_section .input_type_split{color: #999;}
|
|
.payment_input .input_section .input_type_split{padding-left: 10px;}
|
|
.payment_input .input_section .input_type_split input{width: 42px;padding: 0 5px;text-align: center;}
|
|
.payment_input .s3{display: none;}
|
|
.payment_input .s4{display: none;}
|
|
|
|
/*install_notice*/
|
|
.install_notice{display: none;}
|
|
.install_notice .popup_cont{position: absolute;width: 100%; z-index: 1000; top: 0; left: 0;text-align: center; padding-top: 220px;}
|
|
.install_notice .dim_blue{display: block;width: 100%; height: 100%; background-color:#1e5dd2; opacity: 0.96; position: absolute; z-index: 100; top: 0; left: 0;}
|
|
.install_notice p{font-size: 16px; color: #fff; font-weight: normal; line-height: 24px; text-align: center; padding-top: 26px;word-break: keep-all; word-wrap:normal; }
|
|
.install_mpi_notice{display: none;}
|
|
.install_mpi_notice .popup_cont{position: absolute;width: 100%; z-index: 1000; top: 0; left: 0;text-align: center; padding-top: 220px;}
|
|
.install_mpi_notice .dim_blue{display: block;width: 100%; height: 100%; background-color:#1e5dd2; opacity: 0.96; position: absolute; z-index: 100; top: 0; left: 0;}
|
|
.install_mpi_notice p{font-size: 16px; color: #fff; font-weight: normal; line-height: 24px; text-align: center; padding-top: 26px;word-break: keep-all; word-wrap:normal; }
|
|
|
|
/*모바일ISP*/
|
|
.ips_notice{float: left; width: 100%;margin: 20px 0 15px 0;color:#666;font-size:14px;line-height: 22px; text-align: center;}
|
|
.ips_notice b{color:#1e5dd2; }
|
|
.ips_notice .title{font-size: 16px; font-weight: 500; color: #222;margin-bottom: 10px;}
|
|
.ips_notice .btn_wrap{text-align: center;padding: 15px 0 0 0;position: static;}
|
|
.ips_notice .btn_black.btn{border-radius: 18px; width: 180px;font-size: 14px; height: 36px;line-height: 34px;}
|
|
|
|
/*결제확인*/
|
|
|
|
.payment_info{float: left; width: 100%;}
|
|
.payment_info ul{float: left;width: 100%;padding:20px 30px;background: #fff; border-radius:3px;}
|
|
.payment_info ul li{display:table;margin-bottom:6px;width: 100%;}
|
|
.payment_info ul li:last-child{margin-bottom:0px;}
|
|
.payment_info ul div{display:table-cell;font-size: 13px; line-height: 20px; color:#222; font-weight: 500;}
|
|
.payment_info ul div.info_title{font-size: 13px; line-height: 20px; color:#999; font-weight: normal;width: 70px;}
|
|
.confirm_notice{float: left; width: 100%;margin: 60px 0 0 0;color:#666;font-size:14px;line-height: 22px; text-align: center;}
|
|
.confirm_notice.small{float: left; width: 100%;margin: 20px 0 0 0;color:#666;font-size:14px;line-height: 22px; text-align: center;}
|
|
.confirm_notice.small p{word-break: keep-all;}
|
|
.confirm_notice b{color:#1e5dd2; }
|
|
|
|
/*결제완료*/
|
|
.success_notice{float: left; width: 100%;text-align: center;}
|
|
.success_notice > div{width: 170px; height: 50px; background: #fff; border-radius: 25px;margin: 0 auto; text-align: center;}
|
|
.success_notice > div > div{display: inline-block;margin-top: 13px;}
|
|
.success_notice > div > div:after{content:"";display:block;clear:both;}
|
|
.success_notice img{float: left; width: 20px; height: auto;}
|
|
.success_notice p{ font-size: 16px; float: left;color: #222; font-weight: 500;line-height: 20px; padding-left: 12px;}
|
|
.complete_info{float: left; width: 100%;margin: 20px 0 0 0;}
|
|
.complete_info ul{float: left;width: 100%;padding:20px 30px;background: #fff; border-radius:0 0 3px 3px;}
|
|
.complete_info ul.top_info{float: left;width: 100%;padding:20px 30px;background: #fff; border-radius:3px 3px 0 0;border-bottom: 1px solid #eee;word-break: keep-all;}
|
|
.complete_info ul li{display:table;margin-bottom:6px;width: 100%;}
|
|
.complete_info ul li:last-child{margin-bottom:0px;}
|
|
.complete_info ul li div.price{font-size: 20px; line-height: 20px; color:#1e5dd2; font-weight: bold;}
|
|
.complete_info ul li div.price > span {font-size: 13px; line-height: 20px;color:#1e5dd2;font-weight: 500;}
|
|
.complete_info ul div{display:table-cell;font-size: 13px; line-height: 20px; color:#666; font-weight: normal;}
|
|
.complete_info ul div.blue{color:#1e5dd2;}
|
|
.complete_info ul div.red{color: #ee6a71;}
|
|
.complete_info ul.top_info div{color:#222; font-weight: 500;}
|
|
.complete_info ul div.info_title{font-size: 13px; line-height: 20px; color:#999; font-weight: normal;width: 70px;}
|
|
|
|
/*영수증*/
|
|
.receipt_wrap .receipt{padding: 30px 30px 0 30px;background: #f1f2f3;font-size: 12px; line-height: 18px;}
|
|
.receipt .info{width:100%; padding: 30px 24px 34px 24px; margin:0 auto;
|
|
background: url('../images/receipt_bg_top.png'), url('../images/receipt_bg_bottom.png'), url('../images/receipt_bg_middle.png');
|
|
background-repeat: no-repeat, no-repeat, repeat-y;
|
|
background-position: 0 0, bottom left, 0 0;
|
|
background-size: 440px auto;
|
|
position: relative;
|
|
height: 600px;
|
|
}
|
|
.receipt .info h3{color: #6e91d2;font-weight: 500;padding-bottom: 10px;}
|
|
.receipt .info ul{padding-bottom: 14px; border-bottom: 1px solid #eee; margin-bottom:14px;position: relative;}
|
|
.receipt .info ul:after{content:"";display:block;clear:both;}
|
|
.receipt .info ul:last-child{padding-bottom:0; border-bottom:none; margin-bottom:0px;}
|
|
.receipt .info ul li{display:table;margin:0 10px 4px 0;width: 175px;float: left;}
|
|
.receipt .info ul li:last-child{margin-bottom:0px;}
|
|
.receipt .info ul li div{display:table-cell;font-weight: 500;color: #222;}
|
|
.receipt .info ul.top{padding-bottom: 0; border-bottom: none;}
|
|
.receipt .info ul.top:after{content:"";display:block;clear:both;}
|
|
.receipt .info ul.top li{width: 100%;}
|
|
.receipt .info ul.top .price_wrap{width: 100%; padding: 16px 30px;float: left;margin-top: 12px;background: #f4f4f4;border: 2px solid #f4f4f4;}
|
|
.receipt .info ul.top .price_wrap:after{content:"";display:block;clear:both;}
|
|
.receipt .info ul.top div.time{font-size: 12px; margin-bottom: 0;}
|
|
.receipt .info ul.top div.time.blue{color: #6e91d2;}
|
|
.receipt .info ul.top div.time.red{color: #ee6a71;}
|
|
.receipt .info ul.top div.p_name{font-size: 16px; font-weight: 500;margin-bottom: 10px;color: #222;}
|
|
.receipt .info ul.top div.price_detail{font-size: 16px; line-height: 20px; color:#222; font-weight: 500;text-align: right;}
|
|
.receipt .info ul.top div.price_detail span{font-size: 12px; line-height: 20px; color:#222; font-weight: 500;}
|
|
.receipt .info ul.top li.price_sum div.price{font-size: 24px; line-height: 20px; color:#0d47b4; font-weight: bold;text-align: right;}
|
|
.receipt .info ul.top li.price_sum div.price > span {margin-left: 2px; font-size: 14px; line-height: 20px;color:#0d47b4;font-weight: 500;}
|
|
.receipt .info ul.bottom li div{font-weight: normal;color: #666;}
|
|
.receipt .info ul li div.info_title{color:#aaa; font-weight: normal;width: 66px;vertical-align: top;font-size: 12px;}
|
|
.receipt .info .price_wrap div.info_title{vertical-align: bottom;color: #666;}
|
|
.receipt_wrap .notice{color: #999; font-size: 12px;padding:6px 30px 20px 30px;line-height: 16px;}
|
|
.receipt_wrap .btn_wrap_multi{position: static;}
|
|
.receipt_wrap .payment_input{margin-top: 0;padding: 0 30px;}
|
|
.receipt_wrap .payment_input:after{content:"";display:block;clear:both;}
|
|
.receipt_wrap .payment_input > div{margin-bottom: 20px; padding: 0px; background: none;}
|
|
.receipt_wrap .payment_input .input_section{width: 80%;float: left;margin: 0;}
|
|
.receipt_wrap .payment_input .input_section .input_title{width: 70px;}
|
|
.stamp{position: absolute;top: 30px; right: 0px;width: 100px; height: auto;opacity: 0.8;}
|
|
|
|
|
|
|
|
/*프린트*/
|
|
.print_bg{display: none;}
|
|
@media print {
|
|
.receipt_wrap, .receipt_con { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
.btn_wrap_multi{display: none;}
|
|
.gnb{border:1px solid #ddd;}
|
|
.print_bg{position: absolute; top: 0; left: 0; z-index: 100;display: block;}
|
|
.receipt_wrap{position: absolute; top: 0; left: 0; z-index: 1000;}
|
|
.receipt_wrap .payment_input{display: none;}
|
|
}
|
|
.receipt .info.h500{height: 500px;}
|
|
|
|
/*error*/
|
|
.btn_wrap_fl{padding: 50px 30% 0;width: 100%;}
|
|
.error_notice .popup_cont{position: absolute;width: 100%; z-index: 1000; top: 50%; left: 50%;text-align: center;}
|
|
.error_notice img{text-align: center;}
|
|
.error_notice p{font-size: 16px; color: #222; font-weight: 500; line-height: 24px; text-align: center; padding-top: 26px;word-break: keep-all; word-wrap:normal; }
|
|
/**************************************************************************************************************/
|
|
|
|
/*모바일* */
|
|
@media screen
|
|
and (max-device-width : 736px){
|
|
|
|
.select_type1{position:relative;height: 40px;}
|
|
.select_type1 select{height: 40px;}
|
|
.select_type1:after{right:10px;top:16px;width:14px;height:8px;background-size:14px 8px;}
|
|
input{height: 20px;line-height: 20px;top: 10px;}
|
|
|
|
/* layout */
|
|
.innopay{width: 100%; height: 100%;background: #f1f2f3;}
|
|
.innopay_wrap{width:100%;position: static;margin:0;height: auto;}
|
|
.con_wrap{padding:24px 15px 0 15px; width: 100%; height: auto;}
|
|
.con_wrap:after{content:"";display:block;clear:both;}
|
|
.float_wrap{width: 100%; height: 100%; position: fixed; top: 0; left: 0;z-index: 1000;}
|
|
|
|
|
|
/*btn*/
|
|
.btn_wrap_multi{position: static;float: left;padding: 30px 0;height: auto;}
|
|
.btn_wrap_multi div:after{content:"";display:block;clear:both;}
|
|
/*layer_popup*/
|
|
.pop_dim{width: 100%; height: 100%;position: fixed;opacity: 0;}
|
|
.popup{width: 90%;top: 50px;left: 5%; height: auto;position: absolute;margin: 0;}
|
|
|
|
/*gnb*/
|
|
.gnb{position: fixed;top: 0;border-bottom: 0.16mm solid rgba(30,93,210,0.5);z-index: 100;}
|
|
.gnb .logo{padding-left: 15px;float: left;}
|
|
.gnb .kind{padding-right: 15px;}
|
|
|
|
/*contents*/
|
|
.footer{position: static;width: 100%;float: left;padding-bottom: 12px;color: #999;text-align: center;opacity: 1;line-height: 11px;}
|
|
|
|
/*주문정보*/
|
|
.order_info{width:100%;height: auto;}
|
|
.order_info .step{width:100%;margin-top: 50px;}
|
|
.order_info .product_info{padding: 30px 40px 30px 40px;}
|
|
.order_info .product_info li.product_name{font-size: 14px;line-height:18px;}
|
|
.order_info .product_info div.info_title{font-weight: 300;width: 70px!important;}
|
|
|
|
|
|
|
|
|
|
/*약과동의*/
|
|
|
|
/*결제 정보 입력*/
|
|
.payment_input .input_title{display: table-cell;width: 86px; height: 14px; line-height: 13px; padding: 13px 0 13px 12px; font-size: 13px; border-right: 1px solid #eee;color:#666;box-sizing:content-box;}
|
|
|
|
/*install_notice*/
|
|
.install_notice .popup_cont{width: 330px; top: 50%; left: 50%; margin-left: -165px; padding-top: 0; margin-top: -100px;}
|
|
|
|
/*결제확인*/
|
|
.confirm_notice{margin: 50px 0 25px;}
|
|
|
|
/*결제완료*/
|
|
|
|
.btn_wrap{padding: 30px 0px 30px 0px;width: 100%; position: static; bottom: 0; right: 0;float: left;}
|
|
.btn_wrap div{width: 100%;}
|
|
|
|
/*영수증*/
|
|
.receipt_wrap{margin:0 auto;width: 100%;}
|
|
.receipt_wrap .receipt_con{width: 500px;margin: 0 auto;}
|
|
.receipt_wrap .gnb{position: relative;border-bottom:none;width: 100%;}
|
|
.receipt_wrap .gnb .logo{ padding-left: 30px;}
|
|
.receipt_wrap .gnb .kind{ padding-right: 30px;}
|
|
.receipt_wrap .btn_wrap_multi{position: relative;padding:0 30px 30px 30px;width: 100%;}
|
|
.receipt_wrap .payment_input > div{padding: 0px; background: none;}
|
|
.receipt_wrap a.btn_s{height: 42px; line-height: 40px; }
|
|
|
|
form{width: 100%;}
|
|
}/*(max-width : 736px)*/
|
|
|
|
@media screen
|
|
and (max-device-width : 499px){
|
|
|
|
/*영수증*/
|
|
.receipt_wrap{width: 100%;}
|
|
.receipt_wrap .receipt_con{width: 100%;margin: 0 auto;}
|
|
.receipt_wrap .gnb{position: fixed;top: 0;border-bottom: 0.16mm solid rgba(30,93,210,0.5);z-index: 100;}
|
|
.receipt_wrap .gnb .logo{padding-left: 15px;float: left;}
|
|
.receipt_wrap .gnb .kind{padding-right: 15px;}
|
|
.receipt{margin-top: 50px;padding: 30px 0 0 0;}
|
|
.receipt .info{width:280px; padding: 30px 20px 40px 20px; margin:0 auto;
|
|
background: url('../images/receipt_bg_top_m.png'), url('../images/receipt_bg_bottom_m.png'), url('../images/receipt_bg_middle_m.png');
|
|
background-repeat: no-repeat, no-repeat, repeat-y;
|
|
background-position: 0 0, bottom left, 0 0;
|
|
background-size: 280px auto;
|
|
position: relative;
|
|
height: auto;
|
|
}
|
|
.receipt .info.h500{height: auto;}
|
|
.receipt .info ul li{display:table;margin:0 0 5px 0;width: 100%;float: left;}
|
|
.receipt .info ul.top .price_wrap{padding: 20px 16px;}
|
|
.receipt_wrap .btn_wrap_multi{position: relative;padding:0 30px 30px 30px;width: 100%;}
|
|
.receipt_wrap .notice{margin: 0 auto;float: none;width: 280px;padding: 6px 0 30px 0;}
|
|
|
|
}/*(max-width : 499px)*/
|
|
|
|
@media screen
|
|
and (max-device-width : 400px){
|
|
|
|
/*약과동의*/
|
|
.terms > ul{float: left;width: 100%;padding:18px 20px;background: #fff; border-radius:3px; }
|
|
.terms > ul li{height: 50px;position: relative; border-bottom: 1px solid #eee;margin-bottom: 10px;padding-bottom: 12px;}
|
|
.terms > ul li:after{content:"";display:block;clear:both;}
|
|
.terms > ul li:last-child{padding-bottom: 0;margin-bottom: 0;border-bottom: none;}
|
|
.terms > ul li > span{line-height: 15px;font-size: 13px; color: #666;padding:5px 0 20px 0; }
|
|
.terms > ul li > a{position: absolute; left: 0; top: 18px;}
|
|
.terms > ul li .checks {margin-top: 8px;}
|
|
|
|
}/*(max-width : 390px)*/
|
|
|
|
@media screen
|
|
and (max-device-width : 360px){
|
|
|
|
.terms > ul{padding:18px 16px;}
|
|
.order_info .product_info{padding: 30px 34px 30px 34px;}
|
|
.select_type1 select{padding:2px;}
|
|
input{padding-left: 4px;}
|
|
.payment_input .input_section .card_num{padding-left: 4px;}
|
|
.payment_input .input_section .card_num input{width: 36px;padding: 0;text-align: center;}
|
|
.payment_input .input_section .card_num input.security{width: 36px;}
|
|
.payment_input .input_section .input_type_split{padding-left: 2px;}
|
|
.payment_input .input_section .input_type1{padding-left: 2px;}
|
|
.install_notice .popup_cont{width: 260px; margin-left: -130px; margin-top: -120px;}
|
|
.payment_info ul{padding:20px;}
|
|
.complete_info ul.top_info{padding:20px;}
|
|
.complete_info ul{padding:20px;}
|
|
|
|
}/*(max-width : 350px)*/
|
|
@media screen
|
|
and (max-device-width : 320px){
|
|
|
|
.terms > ul{padding:18px 14px;}
|
|
.receipt_wrap .receipt{padding: 30px 20px 0 20px;}
|
|
.receipt_wrap .payment_input{padding: 0 20px;}
|
|
.receipt_wrap .btn_wrap_multi{padding:0 20px 30px 20px;}
|
|
}/*(max-width : 320px)*/
|
|
|
|
.excel {position:relative;float:right;top:0}
|