@charset "utf-8";

/*
 * content CSS Document
 * KOWEB
 */

@media screen and (min-width:1081px){
.subBody #header .gnb_catagory.hide{overflow: hidden; height: 0;}
.subBody #header .gnb_catagory .catagory{border-top-width:0;}
.subBody .gnb_func .top_login{right: 0;}
.subBody .gnb_func .top_search{left: 0;}
}

select:disabled{background-color:#ececec;}
*[data-shop-view="point"].col > div{width:100%;}
*[data-shop-view="point"].col em{width:20%;}
*[data-shop-view="point"].col span{width:78%;}
*[data-cart-option="total"] > span{margin:0 12px;}
*[data-shop-view="addcordion_conts"].custom{position:relative;}
*[data-shop-view="addcordion_conts"].custom .designCheck.top{position:absolute; top:0px; right:0px;}
*[data-shop-view="price"] dd,
*[data-shop-view] dd select,
*[data-shop-view] dd{font-size:13px;}

.button{background:#353535; border-color:#353535;}
.bbsList thead tr:first-child th,
ul.bbsList,
.bbsTitle{border-top:1px solid #666;}
#content h3{margin-top:50px; margin-bottom:10px; font-size:20px; font-weight:300; color:#222;}
.shopConts{margin-top:10px;}
.txt_point01{color:#2377d0 !important;}
*[data-shop-accordion="eval"] > *{margin:0px;}
.area_shop_agree dd .designCheck label{font-size:15px;}

.area_tip{position:relative; padding-left:22px; margin-bottom:5px; margin-top:15px; font-weight:500; color:#111;}
.area_tip:before{content:''; display:block; position:absolute; top:1px; left:0px; width:18px; height:18px; background:url(../images/contents/icon_info.png) no-repeat 50% 0; background-size:100%;}

#__daum__layer_2{min-width:auto !important;}
#postCodebox{width:100% !important;}

/*content.css*/
.sub_header{border-top:1px solid #ebebeb;}
.sub_header .inner{position: relative;}
.sub_header .sub_nav{font-size: 0; text-align: center;}
.sub_header .sub_nav > li{display: inline-block;}
.sub_header .sub_nav > li > a{display: block; padding: 15px 24px 14px; font-size: 16px; font-weight: 600;}

.content_menu_link{display: block; position: absolute; top: 10px; left: auto; padding: 11px 17px 10px 38px; line-height: 1;  font-size: 13px; font-weight: 400; letter-spacing: -0.025em; background: #231916; border-radius: 20px; transition: background 300ms;}
.content_menu_link span{color: #fff;}
.content_menu_link .ico{display:block; position:absolute; top:50%; left:15px; margin-top:-6px; width:17px; height:12px; cursor:pointer;}
.content_menu_link .ico .ico_line{display:block; position:relative; width:100%; background:#fff; height:2px; transition:all .3s;}
.content_menu_link .ico .ico_line + .ico_line{margin-top:3px;}
.content_menu_link .ico_line:nth-child(1){animation:ease .4s top2 forwards;}
.content_menu_link .ico_line:nth-child(2){animation:ease .4s middle2 forwards;}
.content_menu_link .ico_line:nth-child(3){animation:ease .4s bottom2 forwards;}
.content_menu_link.open{background-color: #f39800;}
.content_menu_link.open .ico_line:nth-child(1){animation:ease .4s top forwards;}
.content_menu_link.open .ico_line:nth-child(2){animation:ease .4s middle forwards;}
.content_menu_link.open .ico_line:nth-child(3){animation:ease .4s bottom forwards;}
.full_menu_layer{overflow: hidden; position:absolute; top:100%; height: 0; left:0; z-index:4; width:100%; transition:height .6s;}
.full_menu_layer.open{height: 350px;}
.full_menu_layer .full_menu_inner{background:#fff; border:1px solid #333;}
.full_menu_layer .layer_top{overflow: hidden; display: table; width: 100%; padding:25px 0;}
.full_menu_layer .layer_top > *{display: table-cell; width: 50%; padding-right: 30px; vertical-align: middle;}
.full_menu_layer .sub_gnb{display:table; width:100%; font-size:0;}
.full_menu_layer .sub_gnb > li{display:table-cell; width:33.333%; padding:0 10px; border-right:1px solid #ddd; vertical-align:top; text-align: center;}
.full_menu_layer .sub_gnb > li > a{display:block; margin-bottom:10px; font-size:17px; font-weight:600; text-align:center;}
.full_menu_layer .sub_gnb .depth > li{padding:0 10px;}
.full_menu_layer .sub_gnb .depth > li > a{display:block; padding:6px 0; font-size: 14px; color:#616161; transition:all 230ms; text-shadow:0 0 1px rgba(0,0,0,.2); word-break:keep-all;}
.full_menu_layer .sub_gnb .depth > li:hover > a{color:#EAAB39;}
.full_menu_layer .sub_quick{display:table; width:100%; border-top:1px solid #ddd;}
.full_menu_layer .sub_quick li{display:table-cell; width:20%; background:#f9f9f9; border-right:1px solid #e6e6e6; text-align:center; vertical-align:middle; transition:all 230ms;}
.full_menu_layer .sub_quick li > a{display:block; padding:19px 0; font-weight: 600; color:#444;}
.full_menu_layer .sub_quick li:last-child{border-right:0;}
.full_menu_layer .sub_quick li:hover{background-color: #f1f1f1;}
.full_menu_layer .sub_quick li i{color: #f39800;}
.full_menu_layer .gnb_catagory .catagory{display: block; position: relative; border-top:0; font-size: 0;}
.full_menu_layer .gnb_catagory .catagory:after{content:""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #f8f8f8;}
.full_menu_layer .gnb_catagory .catagory > li{display: inline-block; width: 50%; margin: 0; border:1px solid #f8f8f8; border-width:0 0 1px 0; vertical-align: middle;}
.full_menu_layer .gnb_catagory .catagory > li > a{font-weight: 300; font-size: 15px;}
.full_menu_layer .gnb_catagory .catagory > li br{display: none;}

#container.subSkin,
#container.subContainer{position: relative; padding-top:57px; padding-bottom: 120px; border-top:1px solid #ebebeb;}
.category_tit{position: relative; padding: 38px 50px 36px; margin-bottom: 54px; background: #f9f9f9;}
.category_tit h2{font-size: 34px; font-weight: 300; color: #222; letter-spacing:-0.03em;}
.content_tit{position: relative; margin-bottom: 28px;}
.content_tit h2{display: block; line-height: 1; font-size: 40px; font-weight: 300; color: #222}
.content_tit .cnt_btn{position: absolute; top: 3px; right: 0; min-width:130px; border-radius:30px; border-color:#ddd; color:#777;}
.content p{line-height:1.7; color: #666;}

.lnb ul{display: table; width: 100%; margin-bottom: 55px;}
.lnb li{display: table-cell; width: 25%; border: 1px solid #ddd; background: #f9f9f9; border-width:1px 0 1px 1px; border-bottom-color:#f39800; text-align: center; vertical-align: middle;}
.lnb li:last-child{border-right-width:1px;}
.lnb li > a{display: block; padding: 18px 8px; line-height:1.3; font-size: 15px; font-weight: 500; color: inherit; word-break:keep-all; transition: color 300ms;}
.lnb li br{display: none;}
.lnb li:hover{color:#f39800;}
.lnb li.active{position: relative; z-index:1; background: #fff; border-color:#f39800; border-bottom-color: #fff; color:#f39800;}
.lnb li.active:after{content:""; display: block; position: absolute; top: 0; right: -1px; width: 1px; height: 100%; height: calc(100%  + 1px); background: #f39800;}

.cnt_btn{overflow:hidden; display:inline-block; position:relative; line-height:1; box-sizing:border-box; padding:10px 16px 11px; background:transparent;  border:1px solid transparent; border-color:#222; font-weight:600; letter-spacing:-0.025em; color:#222; text-align:center; vertical-align:middle; transition:color .3s;}
.cnt_btn span{position:relative; font-size:0.875rem; z-index:2;}
.cnt_btn:before{content:""; display:block; position:absolute; left:0; top:0; width:120%; height:100%; background-color:#222; transform-origin:right top; transform:translateX(-101%) skewX(-17.62deg); transition:transform .55s cubic-bezier(.52,.08,.18,1); backface-visibility:hidden;}
.cnt_btn:hover{color:#fff;}
.cnt_btn:hover:before{transform:translateX(0) skewX(-17.62deg); transform-origin:left top;}

*[class^="colum"]{font-size:0;}
*[class^="colum"] > li{display:inline-block; position:relative; box-sizing:border-box; vertical-align:top; text-align: center;}
.colum3{width:103%;}
.colum3 > li{width:30.33%; margin:0 3% 0 0;}
.colum_prg_list > li{padding:40px 30px 30px; font-size: 1rem; border:1px solid #ddd;}
.colum_prg_list > li b{display:block; margin-bottom: 12px; line-height:1.6; font-size:20px; font-weight:600; color:#222; letter-spacing:0.05em; margin-left:0.05em;}
.colum_prg_list > li .ico{width: 90px; height: 90px; margin: 0 auto;}
.colum_prg_list > li .en{color:#ddd; text-transform:uppercase;}
.colum_prg_list > li .num{position:absolute; top:20px; left:28px; line-height:1; font-size:42px; font-weight:200; color:#ccc;}
.colum_prg_list > li p{word-break:keep-all;}
.colum_prg_list > li .btn_shop{margin-top: 12px; border-radius:30px;}

.about_intro{padding: 50px 0; display: table; width: 100%; table-layout: fixed;}
.about_intro .intro_img{display: table-cell; width: 48%; vertical-align: top;}
.about_intro .intro_text{display: table-cell; width: 52%; padding-left: 50px; vertical-align: middle;}
.about_intro h3{margin-bottom: 35px; font-size: 32px; font-weight: 300; line-height: 1.43; letter-spacing: -0.01em; color: #222;}
.about_intro p{line-height: 2; margin-bottom: 5px; font-weight: 300; letter-spacing: -0.01em; color: #666;}

/*아이콘*/
.ico{display: inline-block; background:no-repeat 50% 50% / contain; vertical-align: middle;}
.ico.ico_map{width: 28px; height: 28px; background-image:url(/images/contents/icon_map.svg); transition:transform .3s;}
.ico.ico_map:hover{transform:translateY(-4px);}

/*배송가능지역*/
.area_delivery{position: relative; padding: 80px; background-color: #f9f9f9; text-align: center;}
.area_delivery strong{display: block; margin-bottom: 30px; font-size: 40px; font-weight: 400; color: #000; word-break:keep-all;}
.area_delivery p{margin-bottom: 20px; word-break:keep-all;}
.serach_bar{display: inline-block; position: relative; width: 100%; max-width: 580px; height: 48px; border: 1px solid #e3e3e3; padding-right: 48px; background: #fff; vertical-align: top;}
.serach_bar input{width: 100%; height: 100%; margin: 0; border:0;}
.serach_bar button{position: absolute; top: 0; right: 0; width: 48px; height: 100%; background: #fff url(/images/contents/icon_search.png) no-repeat 50% 50%; border: none;}

.area_delivery_result{padding-top: 80px;}
.area_delivery_result .result_top{position: relative; padding-bottom: 20px;}
.area_delivery_result .result_top strong{display: block; margin-bottom: 20px; line-height:1; font-size: 30px; font-weight: bold; color: #222; letter-spacing: 0;}
.area_delivery_result .result_top p{font-size: 17px;}
.area_delivery_result .result_cont{border-top:2px solid #222;}
.area_delivery_result .list_result{width: 102%; font-size: 0;}
.area_delivery_result .list_result > li{display: inline-block; width: 48%; margin: 2% 2% 0 0; padding: 20px; background:#f9f9f9; font-size: 1rem; text-align: center;}
.area_delivery_result .list_result > li em{display: block; font-size: 19px; font-weight: bold;}
.area_delivery_result .list_result > li em:before{content:""; display: block; width: 94px; height: 68px; margin: 0 auto 6px; background:no-repeat 50% 50% / contain;}
.area_delivery_result .list_result > li.eq1 em:before{background-image:url(/images/contents/icon_ship1.png);}
.area_delivery_result .list_result > li.eq2 em:before{background-image:url(/images/contents/icon_ship2.png);}
.area_delivery_result .list_result > li .sort{display: block; font-size: 17px; font-weight: 500;}
.area_delivery_result .list_result > li .sort.sort1{color: #6fb2bd;}
.area_delivery_result .list_result > li .sort.sort2{color:#ff7372;}

/*리스트*/
.info_intro{padding: 34px 39px; margin-bottom: 34px; background: #fff; border:1px solid #e6e6e6; color: #222;}
.info_intro.type1{background:#f9f9f9; border-width:0;}
.bul_list > li{position:relative; margin-top: 6px; padding-left: 16px;}
.bul_list > li:before{content:""; display:block; position:absolute; left:0; top:8px; width:4px; height:4px; background:#848380; border-radius:50%;}
.bul_list > li:first-child{margin-top:0;}
.bul_list > li b{display:block; font-weight:600; color:#333;}

table .bul_list > li{margin-top: 3px;}
#content .info_intro table.table:first-child{margin-top: 0;}
#content table.table thead th{background-color:#def2f3;}

/* table list */
.list_table{margin-top:20px; padding-top:20px; border-top:1px solid #ededed;}
.list_table.none{padding-top:0px; border-top-width:0px;}
.list_table > li{display:table; width:100%;}
.list_table > li > em,
.list_table > li > span{display:table-cell; vertical-align:top;}
.list_table > li > em{width:15%; padding:2px 0px;}
.list_table > li > em > span{display:block; min-width:80px; box-sizing:border-box; padding:2px 5px; border:1px solid #d1d1d1; border-radius:50rem; line-height:1.2; word-break:keep-all; font-size:14px; color:#222; text-align:center; font-weight:500;}
.list_table > li > span{padding:2px 0 2px 15px; word-break:keep-all;}

/*회원가입*/
.area_join .join_top{position: relative; margin-bottom: 20px;}
.area_join .join_top h2{display: block; line-height:1; font-size: 30px; font-weight: bold; color: #222; letter-spacing: 0;}
.area_join .join_cont{padding: 60px 0; border-top:2px solid #222; text-align: center;}
.area_join .join_cont .tit{display: block; margin-bottom: 20px; font-size: 30px;}
.area_join .join_cont .text{color: #5f5f5f;}
.area_join .join_cont .info_intro{margin-top: 40px; margin-bottom: 0;}
.join_step_mark{position: absolute; top: 50%; right: 0; font-size: 0; transform:translateY(-50%);}
.join_step_mark > li{display: inline-block; position: relative; width: 30px; height: 30px; margin-left: 14px; background:#f3f3f3 url(/images/contents/icon_check.svg) no-repeat 50% 50% / contain; border-radius:50%; border:1px solid #cacaca; font-size: 1rem;}
.join_step_mark > li:after{content:""; display: block; position: absolute; top: 50%; right: 100%; width: 15px; height: 1px; background: #cacaca;}
.join_step_mark > li.complete{background-color:#a3dcde; background-image:url(/images/contents/icon_check_ok.svg); border-color:#5fa4a7;}
.join_step_mark > li.complete:after{background:#5fa4a7;}
.join_step_mark > li:first-child{margin-left: 0;}
.join_step_mark > li:first-child:after{content:none;}

/*마이페이지*/
.sm_link{display:inline-block; position:relative; height:38px; padding:0 18px; line-height:36px; background-color:#fff; border:1px solid rgb(221, 221, 221); border-radius:19px; font-size:13px; font-weight: 400; color:rgb(34, 34, 34); text-align:center; transition:border-color .2s;}
.sm_link:hover{border-color:#999; box-shadow:0 1px 1px rgba(0,0,0,.12);}

.info_grade_intro{display: table; width: 100%; table-layout:fixed; padding-right: 0;}
.info_grade_intro > div{display: table-cell; vertical-align: middle;}
.info_grade_intro .my_grade{width: 25%;}
.info_grade_intro .my_benefit{font-size: 0;}
.my_grade .grade{display: block; font-size: 32px;}
.my_benefit > li{display: inline-block; width: 33.333%; border:1px solid #dedede; border-width:0 0 0 1px; font-size: 1rem; text-align: center;}
.my_benefit > li:first-child{border-left-width:0;}
.my_benefit > li .sort{display: block; font-weight: 400;}
.my_benefit > li .sort:before{content:""; display: block; margin: 0 auto 12px; width: 104px; height: 104px; background:#f9f9f9 no-repeat 50% 50%; border-radius:50%;}
.my_benefit > li .sort.ship:before{background-image:url(/images/contents/icon_ship1.png);}
.my_benefit > li .sort.coupon:before{background-image:url(/images/contents/icon_coupon.png);}
.my_benefit > li .sort.savings:before{background-image:url(/images/contents/icon_savings.png);}
.my_benefit > li .value{display: block; line-height:1;}
.my_benefit > li .value strong{display: inline-block; margin: 2px; font-size: 24px; font-weight: 600; color: #f39800;}
.area_shopMypage .link > a{width:calc(100% / 3 - 15.1px);}

/* 장바구니 */
.area_shopCart *[data-cart-option="img"] > div em .unable{display:inline-block; padding:1px 4px; background:#fff; border:1px solid #e41f44; border-radius:50rem; line-height:1.2; font-size:11px; font-weight:400; color:#e41f44; vertical-align:middle;}
.pickup_place{display:inline-block; padding:1px 4px; margin-top:-2px; margin-left:5px; background:#fff; border:1px solid #f39800; border-radius:50rem; line-height:1.2; font-size:11px; font-weight:400; color:#e69000; vertical-align:middle;}



/*로그인*/

@keyframes hover-color {
	from{border-color:#c0c0c0;}
	to{border-color:#3e97eb;}
}
.login_check_box{padding-top:20px;}
.login_check_box .label_txt{padding-left:24px; vertical-align:top; font-size:14px; cursor:pointer; transition:0.3s ease;}
.login_check_box .label_txt:hover{color:#236af7;}
.input_check{position:absolute; display:none;}
.input_check[disabled]{cursor:not-allowed;}
.input_check+label{position:relative; display:block; padding-left:30px; cursor:pointer; vertical-align:middle;}
.input_check+label:hover:before{animation-duration:0.4s; animation-fill-mode:both; animation-name:hover-color;}
.input_check+label:before{position:absolute; top:0; left:0; display:inline-block; width:16px; height:16px; content:''; border:1px solid #c0c0c0;}
.input_check+label:after{position:absolute; display:none; content:'';}
.input_check[disabled]+label{cursor:not-allowed; color:#e4e4e4;}	
.input_check[disabled]+label:hover,
.input_check[disabled]+label:before,
.input_check[disabled]+label:after{cursor:not-allowed;}
.input_check[disabled]+label:hover:before{border:1px solid #e4e4e4; animation-name:none;}
.input_check[disabled]+label:before{border-color:#e4e4e4;}
.input_check:checked+label:before{animation-name:none;}
.input_check:checked+label:after{display:block;}
.input_check+label:before{border-radius:0px;}
.input_check+label:after{top:1px; left:6px; box-sizing:border-box; width:5px; height:11px; transform:rotate(45deg); border-width:2px; border-style:solid; border-color:#fff; border-top:0; border-left:0;}
.input_check:checked+label:before {border:#3e97eb; background:#3e97eb;}
.input_check:checked[disabled]+label:before{border:#c9e2f9; background: #c9e2f9;}


@media screen and (max-width:1380px){
	.full_menu_layer{width:calc(100% - 40px); left: 20px;}

	.about_intro .intro_img{width: 40%;}
	.about_intro .intro_text{width: 60%; padding-left: 6%;}
}

@media screen and (max-width:1220px){
	*[data-shop-view="addcordion_conts"].custom .designCheck.top{position:static;}
}

@media screen and (max-width:1080px){
	body,html{font-size: 14px;}
	*[data-shop-view="tab"].fix{top:57px;}

	.subBody #header{border-bottom:1px solid #ddd;}
	#container.subSkin,
	#container.subContainer{padding-top: 97px; padding-bottom: 87px;}
	.category_tit{padding: 30px 42px 28px; margin-bottom: 44px;}
	.category_tit h2{font-size: 26px;}
	.content_tit{margin-bottom: 20px;}
	.content_tit h2{font-size: 30px; font-weight: 600;}
	.sub_header{display: none;}
	.lnb ul{margin-bottom: 35px;}
	.lnb li > a{padding: 14px 8px; font-size: 14px;}

	.colum3 > li{width: 47%; margin-bottom: 3%;}
	.colum_prg_list > li{padding: 36px 30px 30px;}
	.colum_prg_list > li .num{font-size: 38px;}
	.colum_prg_list > li b{font-size: 18px;}
	.colum_prg_list > li p br{display: none;}

	.info_intro{padding: 24px 26px;}
	.bul_list > li{padding-left: 10px;}

	.area_delivery{padding: 60px;}
	.area_delivery strong{font-size: 32px; margin-bottom: 20px;}
	.area_delivery_result{padding-top: 60px;}
	.area_delivery_result .result_top strong{margin-bottom: 12px; font-size: 24px;}
	.area_delivery_result .result_top p{font-size: 15px;}
	.area_delivery_result .list_result > li em:before{width: 80px; height: 58px;}
	.area_delivery_result .list_result > li em{font-size: 18px;}
	.area_delivery_result .list_result > li .sort{font-size: 16px;}

	.area_join .join_top{position: relative; margin-bottom: 20px;}
	.area_join .join_top h2,
	.area_join .join_cont .tit{font-size: 24px; word-break:keep-all;}

	.my_grade .grade{font-size: 28px;}
	.my_benefit > li .sort:before{width: 84px; height: 84px; background-size: auto 52px;}
}

@media screen and (max-width:1024px){
	*[data-cart-option="total"] > div{border-bottom-width:0px;}
}

@media screen and (max-width:768px){
	*[data-shop-view="point"].col em{width:30%;}
	*[data-shop-view="point"].col span{width:68%;}
	*[data-shop-view="point"].col span select{width:100%;}

	#container.subSkin,
	#container.subContainer{padding-bottom: 37px;}
	.category_tit{padding: 26px 26px 24px; margin-bottom: 38px; text-align: center;}
	.category_tit h2{font-size: 22px;}
	.content_tit h2{font-size: 26px;}

	.about_intro{display: block; padding-top: 0; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; flex-direction:column; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
	.about_intro .intro_img{overflow: hidden; display: block; position: relative; width: 100%; height: 0; padding-top: 60%; margin-top: 20px; -ms-flex-order:2; -webkit-order:2; -webkit-box-ordinal-group:3; order:2;}
	.about_intro .intro_img img{position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
	.about_intro .intro_text{display: block; width: 100%; padding-left: 0; -ms-flex-order:1; -webkit-order:1; -webkit-box-ordinal-group:2; order:1;}
	.about_intro h3{margin-bottom: 20px; font-size: 26px;}
	.about_intro p{display: inline; margin-bottom: 0;}
	.about_intro br{display: none;}

	.sm_link{padding: 0 8px; border-radius:0;}

	.info_grade_intro{display: block; padding: 20px 16px;}
	.info_grade_intro > div{display: block; width: 100%;}
	.info_grade_intro .my_grade{position: relative; width: 100%; margin-bottom: 14px; padding-bottom: 14px; border-bottom:1px solid #ccc;}
	.info_grade_intro .my_grade .sm_link{position: absolute; top: 0; right: 0;}
	.my_grade .grade{font-size: 22px;}
	.my_benefit > li .sort:before{width: 68px; height: 68px; background-size: auto 43px;}

	.area_shopMypage .link > a{width:calc(100% / 2 - 15.1px);}
}

@media screen and (max-width:640px){
	td[data-shop="name"]{padding-left: 10px !important;}
	.bbsList.deliverList{display:block;}
	.bbsList.deliverList tbody{display:block;}
	.bbsList.deliverList tbody tr td:nth-of-type(2){padding-top:15px;}
	.bbsList.deliverList tbody tr td:nth-of-type(4){top:12px;}
}

@media screen and (max-width:540px){
	.m_none{display: none !important;}
	.lnb li > a{padding: 12px 8px; font-size: 13px;}

	.category_tit{padding: 22px 22px 20px;}
	.category_tit h2{font-size: 18px;}
	.content_tit h2{font-size:23px;}
	.join_area > p{font-size:15px;}

	#content{font-size: 14px;}

	*[class^="colum"]{width: 100%;}
	*[class^="colum"] > li{width: 100%;}
	.colum_prg_list > li{padding: 20px 20px 26px;}
	.colum_prg_list > li .num{font-size: 32px;}
	.colum_prg_list > li .en{font-size: 14px;}
	.colum_prg_list > li b{font-size: 16px;}
	.colum_prg_list > li p br{display: block;}

	.about_intro h3{margin-bottom: 10px; font-size: 22px;}

	.area_delivery{padding: 40px 28px;}
	.area_delivery strong{font-size: 28px; margin-bottom: 14px;}
	.area_delivery p{margin-bottom: 8px;}

	.area_delivery_result{padding-top: 40px;}
	.area_delivery_result .result_top{padding-bottom: 14px;}
	.area_delivery_result .result_top strong{font-size: 18px; margin-bottom: 8px;}
	.area_delivery_result .result_top p{font-size: 1rem;}
	.area_delivery_result .list_result > li em:before{width: 70px; height: 51px;}
	.area_delivery_result .list_result > li em{font-size: 17px;}
	.area_delivery_result .list_result > li .sort{font-size: 15px;}

	.area_join .join_top{margin-bottom: 14px;}
	.area_join .join_top h2,
	.area_join .join_cont .tit{font-size: 18px;}
	.area_join .join_cont .tit{margin-bottom: 8px;}
	.area_join .join_cont{padding: 40px 0;}
	.area_join .join_cont .info_intro{margin-top: 28px;}

	.join_step_mark > li{width: 26px; height: 26px; margin-left: 7px;}
	.join_step_mark > li:after{width: 8px;}

	.my_benefit > li{display: block; width: 100%; margin-top: 10px; padding-top: 10px; border-width:1px 0 0 0; border-style:dashed; text-align: left;}
	.my_benefit > li:first-child{margin-top: 0; padding: 0; border-top-width:0;}
	.my_benefit > li .sort{display: inline-block; position: relative; width: 148px; height:68px; line-height:68px; padding-left: 72px;}
	.my_benefit > li .sort:before{position: absolute; top: 0; left: 0;}
	.my_benefit > li .value{display: inline-block; width: calc(100% - 168px); text-align: right; vertical-align:middle;}

	.area_shopList .total .sort > li > a{font-size:12px;}
	.info_intro{padding:20px 15px;}

	.join_area .box.find p{word-break:keep-all;}
	.join_area .box.find p br{display:none}
}

@media screen and (max-width:500px){
	.area_shopLogin{margin-top:30px;}
	.area_shopLogin .title{font-size:17px;}	
}

@media screen and (max-width:380px){
	.area_delivery{padding: 36px 20px;}
	.area_delivery strong{font-size: 22px;}
	.area_delivery_result .result_top strong{font-size: 18px;}
	.area_delivery_result .list_result > li em:before{width: 64px; height: 47px;}
	.area_delivery_result .list_result > li em{font-size: 16px;}

	.btn_area .button{min-width:inherit; font-size:14px;}
	*[data-shop-view="info"] .box_btn .button{font-size:14px;}
}

@media screen and (max-width:345px){
	#content h3{margin-top:40px;}

	.list_table > li > em, 
	.list_table > li > span{display:block;}
	.list_table > li > em{width:auto;}
	.list_table > li > em > span{display:inline-block; min-width:inherit; padding:2px 15px;}
	.list_table > li > span{margin-bottom:10px;}

	.area_shopCart *[data-cart-table="price"],
	.area_shopCart *[data-cart-table="count"]{display:block; width:100%;}
	.area_shopCart *[data-cart-table="count"]{margin-left:0px;}
}

@keyframes top{
	0%{top:0;transform:rotate(0);}
	50%{top:3px;transform:rotate(0);}
	100%{top:5px;transform:rotate(45deg);}
}
@keyframes top2{
	0%{top:5px;transform:rotate(45deg);}
	50%{top:5px;transform:rotate(0deg);}
	100%{top:0;transform:rotate(0deg);}
}
@keyframes bottom{
	0%{bottom:0;transform:rotate(0);}
	50%{bottom:5px;transform:rotate(0);}
	100%{bottom:5px;transform:rotate(135deg);}
}
@keyframes bottom2{
	0%{bottom:5px;transform:rotate(135deg);}
	50%{bottom:5px;transform:rotate(0);}
	100%{bottom:0;transform:rotate(0);}
}
@keyframes middle{
	50%{transform:scale(0);}
	100%{transform:scale(0);}
}
@keyframes middle2{
	0%{transform:scale(0);}
	50%{transform:scale(0);}
	100%{transform:scale(1);}
}