@import url('./font.css');
html, body{width:100%; height:100%; margin:0; padding:0; font-family:'font'}
body{display:flex; flex-direction:column;}

#title{height:100px; text-align:center;}
#title > img{cursor:pointer;}
.auto_width{max-width:1200px; margin:0 auto;}

/*#footer{width:100%; background-color:#545443; margin-top:40px; font-size:12px;}*/
#footer{width:100%; margin-top:40px; font-size:12px; border-top:1px solid #EBEBEB;}
.footer_content{max-width:1200px; margin:0 auto; padding:10px; color:#545443; height:60px; line-height:20px;}
.footer_left{width:16%; float:left;}.footer_center{width:1%;float:left;}.footer_right{width:65%; float:left;}

#top{display:none; position:fixed; width:80px; height:80px; background-color:#25AAE1; color:#FFF; line-height:80px; text-align:center; z-index:100; border-radius:100px; bottom:20px; right:20px; cursor:pointer; font-size:20px; opacity:0.7; font-weight:900}

#menu_bar{width:100%; height:40px; background-color:#D5E9F8; display:flex; justify-content:center;}
.menu_btn{width:150px; height:40px; line-height:40px; font-size:13px; color:#464646; text-align:center; float:left; cursor:pointer;}
.menu_btn:hover{background-color:#87C4EB;}
.menu_select{background-color:#25AAE1; color:#D5E9F8;}
.sticky_bar{position:fixed; top:0;}

#pageTitle{width:100%; height:50px;}
#pageTitle > section{line-height:50px; text-align:center; font-size:20px; color:#000; font-weight:400;}
.b_line{width:80%; margin:0 auto; margin-top:10px; border-bottom:2px solid #000;}

.page_subTitle{width:80%; height:50px; margin:0 auto; background-color:#D5E9F8; margin-bottom:15px;}
.subTitle{width:150px; height:50px; line-height:50px; font-size:1.2em; color:#464646; text-align:center; cursor:pointer;}
.subTitle:hover{background-color:#87C4EB; font-weight:600;}
.title_select{background-color:#25AAE1; font-weight:900; color:#FFF;}

#head{/*height:140px;*/}
#body{margin-top:10px; /*min-height:calc(100% - 250px); display:flex; flex-direction:column; justify-content:center; align-items:center;*/}
#infoBody{width:80%; float:right;}
.ad_info{width:100%; text-align:center;}
.ad_info > img{width:90%; height:auto;}
#info_side{width:20%; float:left;}
.info_side_sticky{top:55px;  position:fixed;}
.info_side_content{width:80%; margin:0 auto;}
.info_side_content > div{width:100%; max-width:200px; height:50px; line-height:50px; text-align:center;color:#464646; cursor:pointer; border:1px solid #EBEBEB; font-size:14px; box-sizing:border-box;}
.info_side_content > div:hover{background-color:#D5E9F8;}
.info_side_select{background-color:#59B4E6; color:#D5E9F8;}
.info_side_subject{width:100%; max-width:200px; height:85px; line-height:85px; text-align:center; background-color:#25AAE1; color:#D5E9F8; font-weight:900; font-size:23px;}
.sub_left{width:87%; margin-left:5%; float:left;} .sub_right{display:none; width:6%; float:right; font-weight:800} .info_side_select > .sub_right{display:block;} 
#shop_body{width:100%; height:100%;}
.shop_product{width:240px; height:300px; float:left; margin:20px 30px;cursor:pointer;}
.product_img, .product_img2, .product_img3{padding:10px; width:200px; height:200px; display:flex; justify-content:center; align-items:center;}
.product_img2 > img {width:auto; height:55%;}
.product_img2:hover > img{width:auto; height:60%;}
.product_img3 > img{width:auto; height:65%;}
.product_img3:hover >img{width:auto; height:70%;}
.product_img > img {width:auto; height:80%;}
.shop_product:hover > .product_img > img {width:auto; height:85%;}
.product_name{width:100%; height:30px; padding-left:12px; text-align:left; font-size:1.0em; color:#464646; font-weight:600; word-break:break-all;}
.product_price{width:100%; height:35px; padding-right:20px; padding-left:12px; text-align:right; font-size:1.2em; color:#464646; line-height:35px;}
.ori_price{width:50%; text-align:center; text-decoration:line-through; color:#C9C9C9; float:left; font-size:0.9em;}
.sale_price{width:50%; text-align:center; font-size:0.9em; color:#000; float:right;}
#product{width:100%; height:100%; margin-top:20px;}
.detail_img{width:500px; height:500px; display:flex; justify-content:center; align-items:center; float:left; margin-right:48px;}
.detail_img > img {width:auto; height:80%;}
.detail_info{width:calc(100% - 550px); height:500px; border-top:2px solid #464646; float:right;}
.detail_name{width:100%; height:100px; line-height:100px; font-size:24px; color:#464646; padding-left:20px; font-weight:600;}
.detail_option{width:100%; height:250px;}
.detail_left{width:20%; height:30px; line-height:30px; font-size:13px; float:left; color:#464646;}
.detail_right{width:80%; height:30px; line-height:30px; font-size:13px; float:right; color:#464646; text-align:left; font-weight:600;}
.detail_btn{width:100%; height:110px;}
.detail_count{width:100%; height:40px;}
.count_subject{width:50%; float:left; line-height:40px; font-size:16px;}
.count_down, .count_up{width:30px; height:30px; font-size:15px; float:right; text-align:center; cursor:pointer; line-height:30px;}
.count_down:hover, .count_up:hover{background-color:#EBEBEB;}
.count_num{width:42px; height:30px; line-height:30px; float:right; font-size:15px; border:1px solid #DEE3EB; box-sizing:border-box; text-align:center;}
.count_num:hover{background-color:#EBEBEB;}
.count_cost{width:50%; float:left; line-height:40px; font-size:24px; color:#F24A51; font-weight:900; text-align:right;}
.detail_cart{width:50%; height:50px; float:left; background-color:#464646; color:#FFF; font-weight:600; text-align:center; line-height:50px; font-size:16px; cursor:pointer; margin-top:10px;}
.detail_order{width:50%; height:50px; float:right; background-color:#25AAE1; color:#FFF; font-weight:600; text-align:center; line-height:50px; font-size:16px; cursor:pointer; margin-top:10px;}
.detailp_btn{width:100%; height:50px; margin-top:30px; float:left;}
.detailp_detail, .detailp_deliver{width:50%; height:50px; line-height:50px; text-align:center; float:left; font-size:16px; font-weight:900; border:1px solid #25AAE1; color:#25AAE1; box-sizing:border-box; cursor:pointer;}
.detailp_select{background-color:#25AAE1; color:#FFF;}
.detailp_content{width:100%; float:left; margin-top:10px;}
#detail_deliver, #detail_as, #detail_change, #detail_blockChange{width:80%; margin:0 auto; font-size:13px;}

/* #cartPage{width:100%; height:100%;} */
#cartPage{width:950px; height:100%; max-width:1200px;}

#cart_goods{width:80%; background-color:#FFF; color:#464646; padding:5px; margin:0 auto; margin-bottom:10px; min-height:250px;}
thead > tr > td > input[type=checkbox], tbody > tr > td > input[type=checkbox]{width:15px; height:15px;}
#cart_goods > table{width:100%; border-collapse:collapse; font-size:13px;}
#cart_goods > table > thead{height:40px; line-height:40px; text-align:center;border-bottom:1px solid #EBEBEB; border-top:2px solid #000; font-size:14px; font-weight:600;}
#cart_goods > table > tbody{height:45px; line-height:45px; text-align:center;}
#cart_goods > table > tbody > tr > td > div {width:45px; height:45px; border:1px solid #EBEBEB;}
#cart_goods > table > tbody > tr > td > div > img {width:auto; height:37px; margin:4px 0;}
.blank_cart{width:100%; height:150px; line-height:150px; font-size:15px; font-weight:600;}
.check_del{width:15%; height:40px; text-align:center; line-height:40px; color:#FFF; background-color:#464646; font-size:13px; margin-left:85%; cursor:pointer; margin-top:10px;}
.check_del:hover{background-color:#646464;}
#cart_bill{width:80%; height:185px; background-color:#FFF; color:#464646; padding:5px; margin:0 auto;}
.bill_left{width:40%; height:calc(100% - 40px); float:left;} .bill_right{width:60%; height:calc(100% - 40px); float:right;}
.bill_subj{width:95%; height:45px; line-height:45px; text-align:left; font-size:14px; padding-left:5%;}
.bill_cost, .bill_cost_last{width:95%; height:45px; line-height:45px; text-align:right; font-size:15px; padding-right:5%; font-weight:600;}
.bill_cost_last{color:#F24A51; font-weight:900; font-size:24px;}
.bill_order{width:15%; height:40px; text-align:center; line-height:40px; color:#FFF; background-color:#F24A51; font-size:14px; color:#FFF; float:right; cursor:pointer;}
.bill_order:hover{background-color:#F25E65;}
#check_order{width:95%; height:400px; padding:10px 0; display:flex; align-items:center; justify-content:center; flex-direction:column; margin:30px auto;}
#pageCheck{width:50%; height:150px; padding:10px; background-color:#FFF;  border:1px solid #C9C9C9;}
.checkUp{width:100%; height:25px; line-height:25px; font-size:13px; font-weight:600; margin-bottom:10px; padding-left:10px;}
.pageCheck{width:95%; height:80px; font-size:12px; margin:0 auto;}
.check_left{width:30%; height:40px; line-height:40px; text-align:center; float:left;}
.check_right{width:70%; height:40px;float:right; display:flex; justify-content:center;}
input[name=check_call1], input[name=check_call2], input[name=check_call3],
input[name=find_call1], input[name=find_call2], input[name=find_call3]
{width:20%; height:20px; margin:7px 0; float:left; font-size:13px; text-align:center;}
.check_right > div{width:4%; height:40px; text-align:center; float:left; line-height:40px; font-size:12px;}
input[name=find_num1], input[name=find_num2], input[name=change_pw1], input[name=change_pw2]
{width:33%; height:20px; margin:7px 0; float:left; font-size:13px;}
input[name=order_password],input[name=change_pw1], input[name=change_pw2]
{width:74%; height:20px; margin:7px 0; font-size:13px; padding-left:2%; font-family:'font'}
input[name=change_pw1], input[name=change_pw2]{
	width:80%;
}
input[name=order_password]::placeholder,input[name=change_pw1]::placeholder, input[name=change_pw2]::placeholder{
	color:#C9C9C9; font-size:11px; font-style:italic;
}
.checkDown{height:30px; margin-top:5px;}
.check_find, .check_back{width:10%; min-width:80px; height:30px; background-color:#535353; color:#EEE; text-align:center; line-height:30px; color:#FFF; cursor:pointer; font-size:12px; float:right;}
.check_select, .find_select, .change_com{width:10%; min-width:80px; height:30px; background-color:#25AAE1; color:#D5E9F8; text-align:center; line-height:30px; color:#FFF; cursor:pointer; font-size:12px; float:right; margin:0 5px;}
.check_find:hover, .check_back:hover{background-color:#636363;}
.check_select:hover, .find_select:hover, .change_com:hover{background-color:#59B4E6;}
#consult{width:80%; padding:10px; height:120px; margin:0 auto; display:flex; align-items:center;}
#consult_input{width:80%; margin:0 auto;}
.consult_left{width:30%; height:40px; font-size:13px; float:left; line-height:40px; text-align:center;}
.consult_center{width:50%; height:40px; font-size:13px; float:left; text-align:center;}
.consult_center  > input{width:80%; height:30px; margin:2px auto;}
.consult_right{width:20%; height:80px; float:right;}
.consult_btn{width:100%; max-width:80px; height:80px; line-height:80px; cursor:pointer; background-color:#25AAE1; color:#D5E9F8; font-size:14px; text-align:center;}
.consult_btn:hover{background-color:#59B4E6}
#quick_consult{width:80%; height:50px; padding:10px; margin:10px auto; text-align:center; font-size:16px; font-weight:900; color:#000; border-top:1px solid #535353; border-bottom: 1px solid #535353;}

#orderBody{width:85%; float:right; margin:0 auto; background-color:#DEE3EB; display:flex; flex-direction:column; align-items:center;}
#order_list{width:80%; min-height:200px; margin:0 auto;}
#order_list > table{width:100%; text-align:center; /*border-collapse:collapse;*/}
#order_list > table > thead{height:45px; line-height:45px; text-align:center; border-bottom:1px solid #EBEBEB;}
#order_list > table > tbody{height:45px; line-height:45px; text-align:center;}
#order_list > table > tbody > tr > td > div {width:45px; height:45px; border:1px solid #EBEBEB;}
#order_list > table > tbody > tr > td > div > img {width:auto; height:37px; margin:4px 0;}
#order_info{width:80%; height:200px; background-color:#FFF; padding:10px; border:1px solid #EBEBEB; box-sizing:border-box; margin:0 auto;}
#privacy_check{width:80%; margin:10px auto; padding:10px; border:1px solid #EBEBEB; box-sizing:border-box; font-size:13px;}
.privacy_subject{width:90%; height:40px; line-height:40px; padding-left:20px; font-weight:600;}
.privacy_content{width:90%; height:200px; overflow-y:auto; background-color:#EBEBEB; padding:20px; margin:0 auto; color:#464646;}
.privacy_check{width:90%; height:20px; padding-left:20px;}
.privacy_check > input[type=checkbox]{vertical-align:bottom;}
.info_title{width:100%; height:40px; line-height:40px; font-weight:600; font-size:13px; padding-left:20px;}
.info_left{width:15%; height:40px; line-height:40px; text-align:center; float:left; font-size:12px;}
.info_right{width:85%; height:40px; line-height:40px; float:right; font-size:13px;}
#receive_info{width:80%; height:250px; background-color:#FFF; padding:10px;  border:1px solid #EBEBEB; box-sizing:border-box; margin:10px auto;}
#same_order{vertical-align:text-bottom;}
#how_pay{width:80%; height:40px; background-color:#FFF; margin:0 auto; margin-top:20px;}
.pay_credit, .pay_atm{width:50%; height:40px; line-height:40px; text-align:center; border:1px solid #25AAE1; box-sizing:border-box; color:#25AAE1; background-color:#FFF; font-size:14px; font-weight:600; cursor:pointer; float:left;}
.pay_select{background-color:#25AAE1; color:#FFF;}
#order_bar{width:80%; height:50px; background-color:#EBEBEB;margin:0px auto;  line-height:50px;}
.order_left{width:80%; height:50px; float:left;}
.order_subject{width:30%; height:50px; line-height:50px; text-align:center; float:left;}
.order_totalPay{width:60%; height:50px; line-height:50px; font-size:1.5em; font-weight:900; color:#F24A51; margin-right:10%; float:right; text-align:right;}
.order_right{width:20%; height:50px; float:right;}
.order_order{width:80%; height:40px; line-height:40px; text-align:center; background-color:#25AAE1; color:#FFF; cursor:pointer; float:right; font-weight:600; font-size:14px; margin:5px 0;}
.order_back{width:50%; height:50px; line-height:50px; text-align:center; background-color:#FFF; border:2px solid #F24A51; box-sizing:border-box; color:#F24A51; cursor:pointer; float:right;  font-weight:600; font-size:1.1em;}
input[name=order_one],input[name=order_call1], input[name=order_call2], input[name=order_call3], input[name=order_pw]
,input[name=receive_one],input[name=receive_call1],input[name=receive_call2],input[name=receive_call3],input[name=addr]
,input[name=addr_number],input[name=find_addr]
{height:20px; margin:7px 0;}
input[name=order_call1], input[name=order_call2], input[name=order_call3], input[name=receive_call1], input[name=receive_call2], input[name='receive_call3']{width:8%;}
input[name=addr]{width:40%;} input[name=addr_number]{width:10%;}
input[name=find_addr]{height:26px; margin:7px 0; cursor:pointer; font-size:10px; font-family:'font'}
input[name=order_pw]{float:left;}
.check_call_1{display:none;}
.check_call_2{display:none;}
.pw_info{height:40px; line-height:40px; float:left; margin-left:15px; color:#CDCDCD; font-size:9px;}

#order_inform{width:80%; height:280px; margin:10px auto; border:1px solid #C9C9C9; padding:10px;}
#order_inform > .info_right{line-height:40px;}
#deposit_inform{width:80%; height:160px; margin:10px auto; border:1px solid #C9C9C9; padding:10px;}
#deposit_inform > .info_right{line-height:40px}
.order_inform{width:50%; float:left;}
.deliver_inform{width:50%; float:right;}
.deliver_inform > .info_right{line-height:40px;}