@charset "utf-8";

/* /////////////// jinstar /////////////// */

@media (max-width:959px){
	#wrap{ display:block;}

	/* header */
	header.header#pc{ display:none;}
	header.header#mobile{ display:block;}

	header.header#mobile .header_fixed{ position:fixed; left:0; right:0; width:100%; top:0; z-index:10;}
	header.header#mobile .header_fixed .header_topbox{ position:relative; padding:15px 20px; background-color:var(--white); border-bottom:1px solid var(--bordercolor);}
	header.header#mobile .header_fixed .header_topbox .ham_menu{ position:absolute; z-index:1; left:20px; top:15px;}
	header.header#mobile .header_fixed .header_topbox .ham_menu i{ font-size:1.2em; cursor:pointer;}
	header.header#mobile .header_fixed .header_topbox #logo{ width:100%; text-align:center; font-size:1em;}
	header.header#mobile .header_fixed .header_topbox #logo a img{ max-height:13px;}
	header.header#mobile .header_fixed .header_topbox nav#tnb{ position:absolute; z-index:1; right:20px; top:15px;}
	header.header#mobile .header_fixed .header_topbox nav#tnb ul{}
	header.header#mobile .header_fixed .header_topbox nav#tnb ul li{ display:inline-block; vertical-align:middle; margin-left:10px; position:relative;}
	header.header#mobile .header_fixed .header_topbox nav#tnb ul li a{ }
	header.header#mobile .header_fixed .header_topbox nav#tnb ul li i{ font-size:1.2em;}
	header.header#mobile .header_fixed .header_topbox nav#tnb ul li span{ position:absolute; display:block; top:-5px; right:-9px; border-radius:50%; width:17px; height:17px; line-height:17px; background-color:var(--black); color:var(--white); font-size:0.6em; text-align:center;}

	header.header#mobile .header_menu_wrap{ opacity:0; position:relative; position:fixed; top:0; left:-80%; right:0; width:70%; height:100%; background-color:var(--white); z-index:150; background:linear-gradient(to bottom, var(--subcolor), var(--maincolor)); overflow-y:auto; overflow-x:visible;}
	header.header#mobile .header_menu_wrap.active{ opacity:1; left:0;}
	header.header#mobile .header_menu_wrap .header_menu_close{ position:absolute; right:20px; top:20px; cursor:pointer;}
	header.header#mobile .header_menu_wrap .header_menu_close i{ font-size:1em; color:var(--white);}
	header.header#mobile .header_menu_wrap .header_mobilebox{ padding:20px;}
	header.header#mobile .logo{ display:flex; gap:10px; align-items: center;}
	header.header#mobile .logo a{ }
	header.header#mobile .logo a img{ max-width:60px;}
	header.header#mobile .logo p{ color:var(--white);}
	header.header#mobile .logo p b{ color:var(--white); font-size:1.2em;}
	header.header#mobile nav#my_menu{ }
	header.header#mobile nav#my_menu ul{ }
	header.header#mobile nav#my_menu ul li{ display:inline-block; vertical-align:middle; margin-right:20px;}
	header.header#mobile nav#my_menu ul li a{ font-weight:500; color:var(--white); text-transform:uppercase; font-size:0.9em;}
	header.header#mobile .diy_gift{ margin-top:10px;}
	header.header#mobile .diy_gift a{ }
	header.header#mobile .diy_gift a i{ margin-right:5px;}
	header.header#mobile .diy_gift a:hover i{ color:var(--white);}
	header.header#mobile nav#gnb{ margin-top:20px;}
	header.header#mobile nav#gnb .nav_1st_wrap{ }
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item{ margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.5); position:relative;}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item > a,
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item > p{ display:block; color:var(--white); font-weight:500; position:relative;}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item > p:after{ content:'+'; position:absolute; top:-3px; right:0; color:var(--white);}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item.active > p:after{ content:'-';}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item > a b,
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item > p b{ color:var(--white); display:block; margin-bottom:2px; cursor:pointer;}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item > a span,
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item > p span{ color:var(--white); font-size:0.8em; display:block; opacity:0.6;}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item .nav_2nd_wrap{ opacity:0; height:1px;}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item.active .nav_2nd_wrap{ opacity:1; height:auto; margin-top:15px;}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item .nav_2nd_wrap ul{ }
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item .nav_2nd_wrap .nav_2nd_item{ margin:5px 0; padding-left:10px;}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item .nav_2nd_wrap .nav_2nd_item a{ color:var(--white); font-size:1em; position:relative; display:inline-block; vertical-align:middle;}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item .nav_2nd_wrap .nav_2nd_item a:after{ content:''; width:1px; height:1px; opacity:0; position:absolute; z-index:1; bottom:-2px; left:0; background-color:rgba(255,255,255,0.5);}
	header.header#mobile nav#gnb .nav_1st_wrap .nav_1st_item .nav_2nd_wrap .nav_2nd_item a:hover:after{ width:100%; opacity:1;}
	header.header#mobile nav#snb{ margin-top:10px;}
	header.header#mobile nav#snb ul{}
	header.header#mobile nav#snb ul li{ margin-bottom:10px;}
	header.header#mobile nav#snb ul li a{ color:var(--white); font-weight:500; opacity:0.6;}
	header.header#mobile nav#snb ul li a:hover{ opacity:1;}
	header.header#mobile .header_customer{ }
	header.header#mobile .header_customer a i{ margin-right:5px;}
	header.header#mobile .header_customer a:hover i{ color:var(--white);}
	header.header#mobile .header_customer dl{ display:flex; flex-wrap:wrap; margin-top:10px;}
	header.header#mobile .header_customer dl dt,
	header.header#mobile .header_customer dl dd{ font-size:0.8em; color:var(--white); text-transform:uppercase; margin-bottom:10px;}
	header.header#mobile .header_customer dl dt{ width:80px;}
	header.header#mobile .header_customer dl dd{ width:calc(100% - 80px); color:#c4e880;}

	#top_area{ display:none;}

	/* footer */
	footer#footer{ position:relative; left:0; padding:20px 0; text-align:center;}
	footer#footer cite{ text-align:center;}

	/* content */
	#contants{ padding:70px 0 50px; width:auto;}
	.width_box{ padding:0 20px;}
	.sit_admin{ top:11px; right:100px}

	/* popup layer */
	.pop_wrap .pop_box .pop_inner .pop_con .pop_item_cate .pop_ic_box p,
	.pop_wrap .pop_box .pop_inner .pop_con .pop_item_cate .pop_ic_search p{ width:100%; margin-bottom:10px; font-weight:500;}
	.pop_wrap .pop_box .pop_inner .pop_con .pop_item_cate .pop_ic_box{ margin-bottom:20px;}
	.pop_wrap .pop_box .pop_inner .pop_con .pop_item_cate .pop_ic_box select{ width:23%;}

	/* product */
	.pro_list_wrap{ margin-top:40px; padding-top:40px;}
	#newarrival{ margin-top:40px; padding-top:40px;}
	.pro_list_wrap .pro_tab ul{ flex-wrap:wrap; gap:10px; justify-content:flex-start;}
	.pro_list_wrap .pro_tab ul li{ width:calc(50% - 5px);}
	.pro_list_wrap .pro_tab ul li a{ width:100%; padding:0 5px; line-height:40px; height:40px; text-align:center; border: 1px solid var(--bordercolor);}
	.pro_list_wrap .pro_more{ margin-top:20px;}

	.pro_list_wrap .pro_list ul{ gap:10px;}
	.pro_list_wrap .pro_list ul li{ width:calc(50% - 5px);}

	/* cart */

	/* payment */

	/* mypage */

	/* board */
	.itemqa_item_li ul{ display:block;}
	.itemqa_item_li ul li{ width:auto; margin-bottom:5px;}

	/* member */
}

@media (max-width:767px){
	/* header */

	/* footer */

	/* content */
	.page_title{ margin-bottom:20px;}
	.owl-nav button{ width:50px; height:50px;}
	.owl-nav button span{ line-height:55px; font-size:2em;}

	/* popup layer */
	.pop_wrap .pop_box .pop_inner .pop_con .write_table input{ width:100%;}
	.pop_wrap .pop_box .pop_inner .pop_con .pd_list_name{ width:100%;}
	.pop_wrap .pop_box .pop_inner .pop_con .adrs_poplist ul li{ width:100%;}
	.pop_wrap .pop_box .pop_inner .pop_con .pop_item_cate .pop_ic_box select{ width:100%; margin-bottom:5px;}
	.pop_wrap .pop_box .pop_inner .pop_con .pop_item_cate .pop_ic_search select{ width:100%; margin:0 0 5px;}
	.pop_wrap .pop_box .pop_inner .pop_con .pop_item_cate .pop_ic_search input{ width:100%; margin:0 0 5px;}
	.pop_wrap .pop_box .pop_inner .pop_con .pop_item_cate .pop_ic_search button{ width:100%; margin:0;}

	/* product */
	.pro_list_wrap .pro_list{ margin-top:20px;}

	.pd_list{ }
	.pd_list table{ display:block; margin:0; padding:0; width:100%;}
	.pd_list table tbody{ display:block; margin:0; padding:0; width:100%;}
	.pd_list table tbody tr{ display:block; margin:0; padding:20px 20px 20px 0; border-bottom:1px solid var(--bordercolor); width:100%; position:relative;}
	.pd_list table tbody tr th{ display:block; width:100% !important; margin:0 !important; padding:0 !important; border:0 !important;}
	.pd_list table tbody tr td{ display:block; width:100% !important; margin:0 !important; padding:0 !important; border:0 !important;}
	.pd_list table tbody tr td.pd_list_pay{ position:absolute; bottom:26px; right:0; width:auto !important;}
	.pd_list table tbody tr td.pd_list_del{ position:absolute; top:20px; right:0; width:auto !important;}

	/* cart */

	/* payment */
	.payment_wrap{ margin-top:10px;}
	.payment_wrap .payment_form .payment_box{ margin-bottom:10px;}

	.write_adrs td > input{ width:calc(100% - 108px) !important;}
	.write_adrs td > button{ float:right; margin:0;}

	.payment_wrap .pip_box dt.pipbox_height2{ height:120px; line-height:120px;}
	.payment_wrap .pip_box dd.pipbox_height2{ height:120px;}
	.payment_wrap .pip_box dt.pipbox_height3{ height:65px; line-height:65px;}
	.payment_wrap .pip_box dd.pipbox_height3{ height:65px; line-height:1; padding-top:10px;}

	.payment_wrap .payment_info .pi_method ul{ display:block;}
	.payment_wrap .payment_info .pi_method ul li{ width:auto;}
	.payment_wrap .payment_info .pi_method ul li label{ padding-left:70px;}
	.payment_wrap .payment_info .pi_method ul li.method_bank label{ background-position:25px 15px;}
	.payment_wrap .payment_info .pi_method ul li.method_vbank label{ background-position:25px 15px;}
	.payment_wrap .payment_info .pi_method ul li.method_iche label{ background-position:25px 15px;}
	.payment_wrap .payment_info .pi_method ul li.method_phone label{ background-position:31px 15px;}
	.payment_wrap .payment_info .pi_method ul li.method_card label{ background-position:25px 15px;}
	.payment_wrap .payment_info .pi_method ul li.method_payco label{ background-position:50% 50%; font-size:0;}
	.payment_wrap .payment_info .pi_method ul li.method_npay label{ background-position:50% 50%; font-size:0;}
	.payment_wrap .payment_info .pi_method ul li.method_kapay label{ background-position:50% 50%; font-size:0;}
	.payment_wrap .payment_info .pi_method ul li.method_lpay label{ background-position:50% 50%; font-size:0;}
	.payment_wrap .payment_info .pi_method ul li.method_iniciskapay label{ background-position:50% 50%; font-size:0;}

	.payment_wrap .pib_mobile_align .pip_box{ display:block;}
	.payment_wrap .pib_mobile_align .pip_box dt{ display:block; width:auto; border-bottom:0; padding-top:10px; padding-bottom:5px; line-height:1.2; height:auto;}
	.payment_wrap .pib_mobile_align .pip_box dd{ display:block; width:auto; text-align:left; border-top:0; padding-bottom:10px; line-height:1.2; height:auto;}

	/* mypage */
	.mypage_tab ul li a{ font-size:0.8em;}
	.my_process_wrap .my_proc_box{ display:block;}
	.my_process_wrap .my_proc_box .my_proc_ul{ width:100%;}
	.my_process_wrap .my_proc_box .my_proc_ather{ width:100%; margin-top:20px;}

	/* board */
	.board_title h4 span{ margin:5px 0;}
	.board_title h4 p{ display:block;}

	.board_info dl{ flex-wrap:wrap;}
	.board_info dl dt{ width:60px; margin:0 0 5px;}
	.board_info dl dd{ width:calc(100% - 60px); margin:0 0 5px;}

	.reply_wrap .reply_list ul.reply_ul li.reply_li ul.re_reply_ul{ margin-left:-80px;}
	.reply_form{ display:block;}
	.reply_form textarea{ display:block; width:100%;}
	.reply_form button{ display:block; width:100%; height:35px; line-height:35px; margin-top:5px;}
	.reply_nomember input{ width:100%;}

	/* member */
}