/*===============================================================*/
/*======================= Mobile 520 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:520px){
.pct {display:none !important;}
.tablet {display:none !important;}
.mobile {display:block !important;}
img {max-width:100%;}
img.tablet_img {display:none;}
img.pct_img {display:none;}
img.mobile_img {display:block;}
table.mobile {display:table;}



/* ListStyle */

.ListType02 li span {font-size:3.2vw; line-height:7vw;}

.ListType03 {margin-top:-3%;}
.ListType03 li {width:48.5%; margin-left:3%; margin-top:3%;}
.ListType03 li:nth-child(3n-2) {margin-left:3%;}
.ListType03 li:nth-child(2n-1) {margin-left:0;}
.ListType03 li:after {top:calc(100% - 7vw);}
.ListType03 li span {font-size:3.2vw; line-height:7vw;}
.ListType03 li:hover span {bottom:50%; margin-bottom:-20%;}
.ListType03 li:hover span:before {height:8vw; background-size:16%; background-image:url('/images/common/icon/icon_more_m.png'); background-size:16%;}

/* SelectStyle */
.selectType01 {background-image:url('/images/common/icon/icon_select_arrow_m.png'); background-size:3vw; background-position:calc(100% - 2vw) center;}
.selectType01.on {background-image:url('/images/common/icon/icon_select_arrow_m_on.png');}

/* LayerStyle */
.LayerType01 {top:10%; left:4%; width:92%; height:70%; margin-left:0; margin-top:0;}
.LayerType01 .LayerTitleArea {padding:0 4%; line-height:12vw;}
.LayerType01 .LayerTitleArea strong {font-size:4.5vw;}
.LayerType01 .LayerTitleArea .btn_close {right:4%; width:3vw; background-size:100%;}
.LayerType01 .LayerContents {height:calc(100% - 16vw); padding:4%;}
.LayerType01 .LayerContents p {padding-top:3%; font-size:3.2vw; line-height:4.5vw;}

/* TableStyle */
.TableType01 {margin-top:2%;}

.TableType01 .category-check-box label,
.TableType01 .category-check-box strong {font-size:3.5vw;}
.TableType01 .category-check-box label input.checkbox {margin-right:5px;}
.TableType01 .table-list {padding:4%;}
.TableType01 .table-list .checkarea {padding-right:11px;}
.TableType01 .table-list .prdBox .prd_thumb {display:block; width:100%;}
.TableType01 .table-list .priceWrap {padding-top:2%; padding-left:24px;}
.TableType01 .table-list .priceWrap .priceCon {display:block; overflow:hidden;}
.TableType01 .table-list .priceWrap .amountWrap {float:left; display:block; width:auto;}
.TableType01 .table-list .priceWrap .point {float:right; display:block; font-size:3.5vw; font-weight:600; line-height:5.5vw;}
.TableType01 .table-list .nodata {padding:20vw 0;}



.TableType03 thead th,
.TableType03 tbody td,
.TableType03 tfoot td,
.TableType04 thead th,
.TableType04 tbody td {padding:3% 0; line-height:5vw;}
.TableType04 tbody td {font-size:3.2vw;}

/* 제품 리스트 갤러리형 */
#shop.thumb ul {margin-top:-8vw;}
#shop.thumb li {width:42.5vw; margin-top:8vw;}
#shop.thumb li:nth-child(3n) {margin-right:4%;}
#shop.thumb li:nth-child(2n) {margin-right:0;}
#shop .prd_info {padding-top:7%;position: relative;}
#shop.thumb li .prd_thumb:after {background-size:23%;}
#shop.thumb li .prd_thumb img {object-fit: cover; height:100%}
#shop.thumb li .prd_thumb {height:42.5vw; }
#shop .prd_info .prd_name { font-size:4.8vw; line-height:4.5vw;}
#shop .prd_info .price {padding-top:1%; font-size:4.3vw;}
#shop .prd_info .detail {padding-top:2%; font-size:2.7vw;}
#shop.thumb .main_prd_slider .prd_info {padding-bottom:1px;}
#shop.thumb li.nodata {padding:5% 0; font-size:3.5vw;}



/* 제품 상세 */
#shop.view .ProductView .prdthumbArea {position:relative;overflow:hidden;float:none; width:100%;}
#shop.view .ProductView .prdthumbArea .prdthumbWrap {float:none; width:100%;}
#shop.view .ProductView .PrdInfo {padding:5.9%;box-sizing:border-box;float:none; width:100%;}
#shop.view .ProductView .PrdInfo .PrdInfoCon {padding-bottom:2%;}
#shop.view .ProductView .PrdInfo .prdSubject {padding-top:2%; font-size:5.6vw;display:block; font-weight:600; color:#222;}
#shop.view .ProductView .PrdInfo .prdSubject .view_price {color:#4242FA; float:right; font-size:22px; font-weight:bold}
#shop.view .ProductView .PrdInfo .prdSubject .view_price .ico_point {width:22px; vertical-align: middle; margin-top:-6px; margin-right:8px}
#shop.view .ProductView .PrdInfo .prdDeatilTxt {padding-top:1%; font-size:3.4vw;}
#shop.view .ProductView .PrdInfo .price {padding-top:2.5%; font-size:5.4vw; font-weight:600;}
#shop.view .ProductView .PrdInfo .priceWrap {padding-top:1%;}
#shop.view .ProductView .PrdInfo .InfoSection table tbody th {width:30%;} 
#shop.view .ProductView .PrdInfo .InfoSection table tbody th,
#shop.view .ProductView .PrdInfo .InfoSection table tbody td { font-size:4vw; line-height:1em;padding:6%}
#shop.view .ProductView .PrdInfo .InfoSection table tbody td select {width:100%; font-size:4vw;height:2.4em; border-radius:8px; border-color:#777777}
input[name=productQty] {height:6vw}
#shop.view .ProductView .PrdInfo .InfoSection table tbody th span {padding-left:6vw;}
#shop.view .ProductView .PrdInfo .InfoSection table tbody th.address span {background-image:url('/images/common/icon/icon_address_m.png'); background-size:4vw;}
#shop.view .ProductView .PrdInfo .InfoSection table tbody th.phone span {background-image:url('/images/common/icon/icon_phone_m.png'); background-size:4vw;}
#shop.view .ProductView .PrdInfo .InfoSection table tbody th.time span {background-image:url('/images/common/icon/icon_checkinout_m.png'); background-size:4vw;}

.prdBtnBox {position:fixed; width:100%; left:0; bottom:0; padding:2%; background:#eee; box-sizing:border-box; z-index:100;}
.prdBtnBox p {float:left; width:49.5%;  color:#222; padding-left:2%; font-size:3.8vw; line-height:12vw; box-sizing:border-box;}
.prdBtnBox p strong {color:#e00000;}


#shop.view .BookDetail .PrdQuick ul li {font-size:3.2vw; line-height:9vw;}
#shop.view .BookDetail .prdsection .DetailBox { font-size:3.2vw; line-height:5vw}

#shop.view .BookDetail h3 {text-align:center; color:#4242FA;line-height:52px; border-top:1px solid #D3D3D3; font-size:5vw; width:90%; margin:10px auto 0 }


/*sub contents*/

.contentsArea { padding:0% 2% 12% 2%;min-height:680px; box-sizing:border-box}
.TitleArea {margin-bottom:0;clear:both}
.TitleArea h4 {text-align:Center;color:#0F0F0F; font-weight:400; font-size:4vw; padding:2px}
.TitleArea02 {margin-bottom:4%;}
.TitleArea02 h4 {font-size:5vw;}
.TitleArea02 .selectType01 {width:28%;}
.TitleArea .info {display:block; width:100%; padding-left:0; padding-top:10px;padding:0 2% 3% 2%; font-size:3.2vw; box-sizing:border-box;}
.pd0 .contentsArea {padding:0 0 12% 0;}
.pd0 .TitleArea h3 {padding:7% 4% 4%; border-bottom:none;}
.section_TitleArea {padding:2% 4%; margin-bottom:0; border-top:1px solid #000;}

.contentsArea .section .info_txt02 {padding-top:2%; font-size:3.2vw; line-height:4.5vw;}

/* 서브메뉴 */
#SNB {margin-bottom:0; border-bottom:1px solid #ccc;}
#SNB ul {padding:0 2%;border:none;}
#SNB ul li {height:inherit; font-size:3.2vw; background:none; border:none; line-height:10vw;width:25%}
#SNB ul li a {position:relative; display:inline-block; font-weight:300;}
#SNB ul li.on {border-bottom:2px solid #5042fa; }
#SNB ul li.on a {color:#5042fa; font-weight:600}

.OrderStep ul li {letter-spacing:0;}

/* 주문/결제 */

.TableType02_wrap .CheckArea {padding-bottom:4%;}
.TableType02_wrap label {margin-right:5%; font-size:3.5vw;}
.TableType02 tbody th, 
.TableType02 tbody td {display:block; width:100%;}
.TableType02 tbody th {padding-top:6%; line-height:1;}
.TableType02 tbody tr:first-child th {padding-top:0;}
.TableType02 tbody tr td {padding-top:3% !important; line-height:5vw;}
.TableType02.view tbody td {padding-top:2% !important;}
.TableType02 tbody td input.name {width:50%;}
.TableType02 tbody td .NumArea select.phone, 
.TableType02 tbody td .NumArea input.phone {width:25%;}
.TableType02 tbody td .EmailArea select {margin-top:2%;}
.TableType02 tbody td input.mem_add2 {margin-top:2%;}
.TableType02 tbody td .EmailArea .at {font-size:3.5vw;}
.TableType02 tbody td input.text {padding:0 2vw;}
.TableType02 tbody td .selectType01 {padding-left:2vw;}


#order.payment .TableType01 .table-list .prdBox {padding-right:0;}
#order.payment .TableType01 .category-check-box {position:relative; padding-right:8%; background:url('/images/common/icon/icon_arrow02_m_rotate.png') no-repeat 96% center; background-size:3%; cursor:pointer;}
#order.payment .TableType01.off .category-check-box {background-image:url('/images/common/icon/icon_arrow02_m.png');}
#order .payment_info_box table tbody td.point_info dl dd input.text {padding:0 2vw;}
#order .prdBtnBox.on {display:block;}

.AddressList li label {padding:4% 3%; font-size:3.2vw;}
.AddressList li .AddressArea {width:90%; padding-left:1%;}
.AddressList li .AddressArea strong {padding-bottom:2%; font-size:3.6vw;}
.AddressList li .AddressArea p {line-height:4.5vw;}


/* 주문완료 / 주문실패 */
#order.order_complete .BtnArea {margin-top:8%;}
#order .TableType02_wrap.bg {background-size:80%;}
.precautions {padding:0 4%; margin-top:4%;}
.precautions ul li {padding-left:5.5%; margin-top:2%; background-image:url('/images/common/icon/icon_caut_m.png'); background-position:0 0.7vw; background-size:3.5vw; line-height:5.5vw;}

.InfoBox_01 {padding:10% 4%;}
.InfoBox_01 p {font-size:3.8vw; line-height:5vw;}
.InfoBox_01 p.complete_txt {padding-top:16%; background-image:url('/images/common/icon/icon_complete_m.png'); background-size:13%;}
.InfoBox_01 p.fail_txt {padding-top:16%; background-image:url('/images/common/icon/icon_fail_m.png'); background-size:13%;}

/* 마이페이지 공통 */
#Member.contentsArea {padding:4% 2% 12% 2%;}
#Member.meminfo .TableType02 tbody th,
#Member.meminfo .TableType02 tbody td {padding-top:6%;}
#Member .BtnArea {margin:2% 0 0 0;}
#Member .BtnArea a {border-radius:8px}

#orderLayer { border-bottom:3px input #777}

#orderLayer.contentsArea .TableType02 tbody th  {padding-top:3%;}
#orderLayer.contentsArea .TableType02 tbody td {padding-top:3%;}
#orderLayer.contentsArea .BtnArea {margin:2% 0 0 0;}
#orderLayer.contentsArea .BtnArea a {border-radius:8px; box-sizing: border-box; font-size:3.4vw; font-weight:600}
.BtnArea a {border-radius:8px; box-sizing: border-box; font-size:3.4vw; display:inline-block; height:42px; line-height:42px}

/* 예약내역 */
.order_table_wrap .table_header ul li {line-height:50px;}
.my_order_state .order_state_box .prdWrap .prdBox .prdCon {padding-right:0;}
.my_order_state .order_state_box .nodata {line-height:350px;}


.my_order_state .order_state_box .nodata {line-height:25vh;}

.my_order_state .order_state_box .prdWrap .prdBox .prd_thumb {width:30%;padding:3%}

.my_order_state .order_state_box .prdWrap .prdBox .prd_info {display:block; width:100%; padding-left:5%; box-sizing:border-box}

.my_order_state .order_state_box .prdWrap .order_state {padding-top:2%;width:100%; display:block; box-sizing: border-box; overflow: hidden; }
.my_order_state .order_state_box .prdWrap .order_state strong {padding-right:2%; line-height:7.5vw; }
.my_order_state .order_state_box .prdWrap .order_state span {padding:2%; font-weight:bold;color:#ff6c27;}

/* 구매 - 상세보기 */
#order .orderInfo .prd_order_num {padding:0 2%; margin-bottom:-2%; line-height:11vw;}
#order .orderInfo .prd_order_num p {font-size:3.5vw; font-weight:500;}
#order .orderInfo .prd_order_num p span {padding-right:2%; font-size:3.2vw; font-weight:300; vertical-align:middle;}

#Member .TableType01 .table-list {padding:2%;}

.TableType01 .table-list .order_state strong {padding-right:2%; font-size:3.5vw; line-height:7vw;}
#Member #order.payment .TableType01 .category-check-box {padding-left:2%;}
#Member .section_TitleArea {padding:2%; border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf;}
#Member .TableType02_wrap {padding:4% 2%;}
#Member #order .payment_info_box table thead th {padding:3% 2%;}
#Member #order .payment_info_box table tbody td {padding:0 2%;}
#Member #order .payment_info_box table tfoot th,
#Member #order .payment_info_box table tfoot td {padding:4% 2%;}
#Member #order .payment_info_box .payment-btnarea {margin:2% 0 0 0;}

/* 내 포인트현황 */
#Member.mypoint .section {padding-top:8%;}
#Member.mypoint .point_box {margin-top:8%;}
#Member.mypoint .total_point {padding:3% 4%;}
#Member.mypoint .total_point dl {line-height:6vw;}
#Member.mypoint .total_point .usable {padding-bottom:3%; margin-bottom:3%;}
#Member.mypoint .TableType03 thead th.date {width:32%;}
#Member.mypoint .TableType04 thead th.date {width:28%; min-width:inherit;}
#Member.mypoint .TableType04 thead th.point {width:28%; min-width:inherit;}

.TableType02_wrap table td input {border-radius:0px}