@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------------------------------*/
/* LAYOUT */

@media screen and (max-width: 1023px){
/* desktop to ipad */
#wrap { min-width:768px; transition:transform 0.5s ease; -webkit-transition:transform 0.5s ease; -moz-transition:transform 0.5s ease; }
#wrap .container { max-width:768px; padding:0 15px; }

#toolbar .toolbar_area { display:none; }

#top .logo { width:393px; padding:20px 0; }
#top .mobile_btn { display:block; }
#top .menu_area { display:none; }

#mobile_menu { display:block; }

#banner .banner_show .banner img { max-width:768px; }
#banner .inner_banner .banner_alpha { max-width:768px !important; }

#main .path_area { padding-right:0; }

#main .left_side { width:100%; }
#main .left_menu { display:none; }
#main .left_select { display:block; }

#main .right_side { width:100%; padding-right:0; }

#main .multipage a { display:none; }
#main .multipage select { display:block; margin:0 auto; }

#footer p { padding-left:0; }
}

@media screen and (max-width: 767px){
/* ipad to iphone 6 plus */
#wrap { min-width:100px; }
#wrap .container { max-width:none; }

#top .logo { width:343px; }

#banner .banner_show .owl-controls { bottom:10px; }

#banner .banner_title { position:absolute; left:0; bottom:12px; }
#banner .banner_title h2 { font-size:34px; }

#sitemap { xdisplay:none; background-size:cover; }
#sitemap .sitemap_list { display:block; }
#sitemap .sitemap_row { display:block; width:100%; padding:15px 0; }
#sitemap .sitemap_row p { padding-bottom:6px; font-size:20px; }

#footer p { width:100%; text-align:center; }
#footer ul { width:100%; xdisplay:none; text-align:center; }
}

@media screen and (max-width: 620px){
#top .mobile_btn { margin-top:-17px; }
#top .mobile_btn a { width:34px; height:34px; font-size:20px; line-height:34px; }

#mobile_menu { width:250px; transform:translate3d(-250px, 0, 0); -webkit-transform:translate3d(-250px, 0, 0); -moz-transform:translate3d(-250px, 0, 0); }

.openResponsive #wrap { transform:translate3d(250px, 0, 0); -webkit-transform:translate3d(250px, 0, 0); -moz-transform:translate3d(250px, 0, 0); }
}

@media screen and (max-width: 479px){
/* below iphone 6 plus */
#top .logo { width:293px; }
}

@media screen and (max-width: 374px){
#top .logo { width:243px; }
}

/*-------------------------------------------------------------------------------------*/
/* INDEX */

@media screen and (max-width: 1023px){
.index_about_section .index_about_area { padding:0 0; }

.index_news_section .index_news_list { max-width:508px; margin:0 auto; }
.index_news_section .index_news_item { width:50%; padding:8px; }

.index_contact_section { padding-left:0; padding-right:0; }
.index_contact_section p { font-size:30px; line-height:79px; }
.index_contact_section a { width:120px; height:79px; background-size:100% 100%; margin-left:14px; font-size:20px; line-height:70px; }

.index_brands_section { padding-left:0; padding-right:0; }
.index_brands_section .index_brands { height:86px; }
}

@media screen and (max-width: 767px){
.index_box_section .index_box_item { width:100%; padding:19px 0; }
.index_box_section .index_box { height:auto; }

.index_news_section .index_news_list { width:calc(100% + 16px); margin:0 -8px; }

.index_contact_section p { font-size:28px; line-height:normal; }
.index_contact_section a { display:block; margin:10px auto 0 auto; }

.index_brands_section .index_brands { height:76px; }
}

@media screen and (max-width: 479px){
.index_news_section .index_news_list { max-width:238px; margin:0 auto; }
.index_news_section .index_news_item { width:100%; padding:8px 0; }
}

/*-------------------------------------------------------------------------------------*/
/* ABOUT US */

@media screen and (max-width: 1023px){
.download_content .download_box { padding:20px 15px; }
.download_content .download_box_icon { width:100%; padding-bottom:10px; text-align:left; }
.download_content .download_box_info { width:100%; }
}

@media screen and (max-width: 767px){
.download_content .download_box_area { display:block; }
.download_content .download_box_item { width:100%; display:block; }
.download_content .download_box_icon { width:100px; padding-bottom:0; text-align:right; }
.download_content .download_box_info { width:calc(100% - 130px); }

.information_list .information_row { width:100%; }
.information_list .information_info { padding-bottom:22px; }
}

@media screen and (max-width: 479px){
.download_content .download_box { padding:20px 15px; }
.download_content .download_box_icon { width:100%; padding-bottom:10px; text-align:left; }
.download_content .download_box_info { width:100%; }
}

/*-------------------------------------------------------------------------------------*/
/* PRODUCTS */

@media screen and (max-width: 1023px){
.filter_mobile_btn { display:block; }

.products_filter_area { width:100%; padding-left:0; }
.products_filter_area .products_filter_box { position:fixed; left:0; bottom:0; z-index:5001; height:0; max-height:100%; overflow-x:hidden; overflow-y:auto; padding:0; background-color:#ffffff; box-shadow:0 0 5px rgba(0,0,0,0.6); transition:height 0s ease; -webkit-transition:height 0s ease; -moz-transition:height 0s ease; }
.products_filter_area .products_filter_item { padding:15px; box-sizing:border-box; font-size:0; }
.products_filter_area .products_filter_item button { width:calc(50% - 15px); height:42px; line-height:42px; }
.products_filter_area .products_filter_item button:first-child { margin-right:30px; }

.open_filter,
.open_filter body { height:100%; overflow:hidden; }
.open_filter #wrap { height:100%; } 
.open_filter .filter_overlay { width:100%; height:100%; opacity:1; }
.open_filter .products_filter_box { height:auto; }

.products_content { width:100%; padding-right:0; }

.products_search { position:relative; top:0; width:100%; }

.products_cate_list { padding-top:30px; margin:0 -14px; }
.products_cate_list .products_cate_item { width:33.33%; }

.products_list .products_info { width:400px; }

.products_detail .products_detail_title { padding-left:0; padding-right:0; }
.products_detail .products_detail_photo { width:350px; padding-left:0; }
.products_detail .products_detail_photo .sub_photo { width:calc(25% - 10px); }
.products_detail .products_detail_logo { width:calc(100% - 365px); }
.products_detail .products_detail_info { width:calc(100% - 365px); padding-right:0; }
.products_detail .products_detail_desc { padding-left:0; padding-right:0; }
.products_detail .products_detail_desc .tab_bar { padding-left:20px; }
.products_detail .products_detail_desc .tab_bar:before { right:12px; }
.products_detail .products_detail_desc .tab_content { padding:12px 20px; }

.products_detail .products_detail_btn { width:calc(100% + 10px); margin:0 -5px; }
.products_detail .products_detail_btn a { margin:8px 5px; }

.food_packaging_contact_box { padding:58px 10px; }
.food_packaging_contact_box .food_packaging_contact_list { width:calc(100% + 20px); margin:0 -10px; }
}

@media screen and (max-width: 767px){
.products_cate_list .products_cate_item { width:50%; }

.products_list .products { padding:18px 10px 16px 10px; text-align:center; }
.products_list .products_logo { float:none; display:inline-block; vertical-align:top; width:40%; max-width:124px; padding:0 10px; }
.products_list .products_info { float:none; width:100%; text-align:left; }

.products_detail .products_detail_photo { width:100%; padding-bottom:36px; }
.products_detail .products_detail_photo .large_photo, 
.products_detail .products_detail_photo .sub_photo_area { max-width:496px; margin:0 auto; text-align:center; }
.products_detail .products_detail_photo .sub_photo_list { font-size:0; }
.products_detail .products_detail_photo .sub_photo { float:none; display:inline-block; vertical-align:top; }

.products_detail .products_detail_logo { width:100%; }
.products_detail .products_detail_info { width:100%; }

.food_packaging_highlight .highlight_photo { width:250px; }
.food_packaging_highlight .highlight_photo img { max-width:100%; }
.food_packaging_highlight .highlight_info { padding-left:10px; }

.food_packaging_contact_box { padding:30px 10px; }
.food_packaging_contact_box .food_packaging_contact_list { padding-top:26px; }
.food_packaging_contact_box .food_packaging_contact_item { width:100%; padding:15px 10px; }
.food_packaging_contact_box .food_packaging_contact_item:after { content:""; clear:both; display:block; }

.food_packaging_contact_box .food_packaging_contact_icon { float:left; width:90px; }
.food_packaging_contact_box .food_packaging_contact_info { float:right; width:calc(100% - 100px); padding-top:0; text-align:left; }
.food_packaging_contact_box .food_packaging_contact_btn { padding-top:20px; }

}

@media screen and (max-width: 479px){
.food_packaging_highlight .highlight_content { display:block; }
.food_packaging_highlight .highlight_photo { display:block; width:100%; text-align:center; }
.food_packaging_highlight .highlight_photo img { max-width:280px; }
.food_packaging_highlight .highlight_info { display:block; width:100%; padding:20px 0 0 0; }
.food_packaging_highlight .highlight_info h3 { font-size:26px; }
.food_packaging_highlight .highlight_info p { font-size:20px; }
}

@media screen and (max-width: 413px){
.food_packaging_contact_box .food_packaging_contact_icon { width:60px; }
.food_packaging_contact_box .food_packaging_contact_info { width:calc(100% - 70px); }
}

@media screen and (max-width: 374px){
.products_cate_list { max-width:271px; margin:0 auto; }
.products_cate_list .products_cate_item { width:100%; }

.products_detail .products_detail_info .info_table .table_cell:first-child { width:106px; }
}

/*-------------------------------------------------------------------------------------*/
/* NEWS */

@media screen and (max-width: 1023px){
.news_content { padding-bottom:40px; }

.news_cate_title { padding:14px 10px; }
.news_filter_area { padding:13px 10px; }
.news_filter_area select { background-color:#efefef; border:1px solid #cccccc; color:#000000; }

.news_list .news_item { padding:26px 10px; }
.news_list .news_photo { width:182px; }
.news_list .news_photo+.news_info { width:calc(100% - 200px); }
}

@media screen and (max-width: 767px){
.news_list .news_photo { width:132px; }
.news_list .news_photo+.news_info { width:calc(100% - 150px); }
}

@media screen and (max-width: 479px){
.news_filter_area label { padding-right:25px; }
.news_filter_area select { width:180px; }

.news_list .news_photo { width:100px; }
.news_list .news_photo+.news_info { width:calc(100% - 120px); }
.news_list .news_date { font-size:16px; }
.news_list .news_title a { font-size:18px; }
.news_list .news_desc { display:none; }

.news_detail { padding-left:0; padding-right:0; }
}

@media screen and (max-width: 374px){
.news_filter_area label { padding-right:18px; font-size:22px; }
.news_filter_area select { width:150px; }

.news_list .news_photo { width:100%; padding-bottom:12px; }
.news_list .news_photo+.news_info { width:100%; }
}

/*-------------------------------------------------------------------------------------*/
/* CONTACT US */

@media screen and (max-width: 1023px){
.contact_us_content .contact_us_form , .contact_us_content .contact_us_form.inquiry_sp1000px { width:100%; max-width:700px; }
}

@media screen and (max-width: 767px){
.contact_us_content .contact_us_form .form_row .phone_field { xwidth:100%; xpadding-top:8px; }
/*
.contact_us_content .contact_us_form .form_row .field input[name=phone] { width:100%; margin-top:8px; }
*/
.contact_us_content .contact_us_form .form_row .title_option+.option_field { width:calc(100% - 210px); }

.contact_us_info { padding:20px 0; }
}

@media screen and (max-width: 479px){
.contact_us_content .contact_us_form .form_row .option { width:100%; padding-right:0; }

.contact_us_content .contact_us_form .form_row .title_option+.option_field { width:100%; }
}

@media screen and (max-width: 413px){
.contact_us_content .contact_us_form .form_row .phone_code_field { width:100%; }
.contact_us_content .contact_us_form .form_row .phone_code_field label { display:none; }
.contact_us_content .contact_us_form .form_row .phone_field { width:100%; padding-top:8px; }
}

/*-------------------------------------------------------------------------------------*/
/* REGISTER FORM */

@media screen and (max-width: 1023px){
.inquiry_show_list { width:100%; }
.inquiry_show_list .products_info { width:330px; }
}

@media screen and (max-width: 767px){
.inquiry_show_list .products_info { width:100%; }
}