@charset "utf-8";

/*-----------------section5 product-----------------*/
#product_wrap{margin-top: 90px;}
#product_wrap .product_box{position: relative; float: left; margin-right: 25px; width: 370px; height: 485px;}
#product_wrap .product_box:last-child{margin-right: 0;}
#product_wrap .img_pro{width: 100%; height: 365px;}
#product_wrap .txt_product_wrap{position: absolute; bottom: 25px; left: 12.5px; padding: 30px; width: 345px; box-sizing: border-box; border-radius: 14px; box-shadow: 3px 3px 5px 1px #0000003b; background-color: #fff; text-align: center;}
#product_wrap .txt_product_wrap .txt_title{font-size: 24px; color: #111; font-weight: 700;}
#product_wrap .txt_product_wrap .txt_text{margin: 20px 0; font-size: 18px; color: #666; font-weight: 300; word-break: keep-all;}
#product_wrap .txt_product_wrap .btn_plus{display: inline-block; width: 40px; height: 40px; border-radius: 20px; color: #111; background-color: #eee; font-size: 30px; font-weight: 100; text-align: center; line-height: 37px;}


/*-----------------------responsive-----------------------*/


/*tab*/
@media all and (max-width:1199px) and (min-width:768px){
   
    /*-----------------section5 product-----------------*/
    #product_wrap{width: 100%;}
    #product_wrap .product_box{margin-right: 2%; width: 32%; height: 485px;}
    #product_wrap .img_pro{width: 100%; height: 28vw;}
    #product_wrap .txt_product_wrap{bottom: 60px; left: 5%; padding: 20px; width: 90%;}
    #product_wrap .txt_product_wrap .txt_title{font-size: 20px;}
    #product_wrap .txt_product_wrap .txt_text{font-size: 16px;}
    #product_wrap .txt_product_wrap .btn_plus{width: 35px; height: 35px; font-size: 25px; line-height: 32px;}

}

/*mobile*/
@media all and (max-width:767px){
  
    /*-----------------section5 product-----------------*/
    #product_wrap{margin-top: 80px;}
    #product_wrap .product_box{display: flex; justify-items: center;align-items: stretch;  margin-right: 0%; margin-bottom: 20px; width: 100%; height: auto;}
    #product_wrap .img_pro{width: 50%; height: auto; overflow: hidden; }
    #product_wrap .txt_product_wrap{position: inherit; bottom: 0; left: 0; padding: 30px; width: 50%; box-sizing: border-box; 
        box-shadow: 3px 1px 8px 0.1px #00000012; border-radius: 0; border-top-right-radius: 14px; border-bottom-right-radius: 14px; text-align: right;}
    #product_wrap .txt_product_wrap .txt_title{font-size: 22px;  text-align: left; word-break: keep-all;}
    #product_wrap .txt_product_wrap .txt_text{margin: 30px 0; font-size: 18px; text-align: left; word-break: keep-all;}

    #product_wrap .product_box:nth-child(2n){flex-direction: row-reverse;}
    #product_wrap .product_box:nth-child(2n) .txt_product_wrap{
        box-shadow: -3px 1px 8px 0.1px #00000012; border-radius: 0; border-top-left-radius: 14px; border-bottom-left-radius: 14px; text-align: left;}
    #product_wrap .product_box:nth-child(2n) .txt_product_wrap .txt_title{text-align: right;}
    #product_wrap .product_box:nth-child(2n) .txt_product_wrap .txt_text{ text-align: right;}

    #product_wrap .txt_product_wrap .btn_plus{position: absolute; bottom: 30px; right: 30px;}
    #product_wrap .product_box:nth-child(2n) .txt_product_wrap .btn_plus{position: absolute; bottom: 30px; right: inherit; left: 30px;}

}


@media all and (max-width:500px){   

    /*-----------------section5 product-----------------*/
    #product_wrap .txt_product_wrap{ padding: 25px 15px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
    #product_wrap .txt_product_wrap .img_pro{}
    #product_wrap .txt_product_wrap .txt_title{font-size: 16px;  text-align: left;}
    #product_wrap .txt_product_wrap .txt_text{margin: 15px 0 30px 0; font-size: 14px; text-align: left;}

    #product_wrap .product_box:nth-child(2n) .txt_product_wrap{border-top-left-radius: 10px; border-bottom-left-radius: 10px;}

    #product_wrap .txt_product_wrap .btn_plus{width: 23px; height: 23px; line-height: 20px; font-size: 24px;}
    #product_wrap .txt_product_wrap .btn_plus{bottom: 20px; right:15px;}
    #product_wrap .product_box:nth-child(2n) .txt_product_wrap .btn_plus{bottom: 25px; left: 15px;}

}