.product {}
.product .tab {padding-bottom:300px;}
.product .tab a {width:140px;}
.product .tab h3 {font-size:50px; color:#fff; font-weight:600; margin-bottom:20px; margin-top:20px;}
.product .tab p {font-size:24px; color:#fff; margin-bottom:60px;}

/*list*/
.product .pro_list {position:relative; margin-top:-200px; margin-bottom:60px; text-align: center;}
.product .pro_list li {display:inline-block; vertical-align: top; transform: scaleX(0); width:0px; height:0; opacity:0; position:absolute; left:50%; transition:width 0.3s ease-in-out;}
.product .pro_list li.show {transform: scaleX(1); width:200px; height:auto; opacity:1; position:static; transition:width 0.3s ease-in-out;}
.product .pro_list li.all {display:inline-block; vertical-align: top; transform: scaleX(0); width:0px; height:0; opacity:0; position:absolute; left:50%; transition:width 0.3s ease-in-out;}
.product .pro_list li.all.show {transform: scaleX(1); width:200px; height:auto; opacity:1; position:static; transition:width 0.3s ease-in-out;}
.product .pro_list li:hover img {transform: translateY(-50px);}
.product .pro_list li img {position:relative; transition:0.2s all ease-in-out;}
.product .pro_list li span {display:block; opacity:0; margin:10px auto; color:#e75546; font-size:22px; font-weight:600; text-align: center;}
.product .pro_list li span.show {opacity:1; transition: 2s ease;}


/*view*/
.view {background-image:url('/setting/images/common/bg_orange.jpg');  background-position:center top; background-attachment:fixed; background-size:cover;}
.view .view_top {padding-top:100px; background:#fff;}
.view .sub_nav {color:#fea652; font-size:20px; margin-bottom:30px;}
.view .sub_nav span {display:inline-block; vertical-align: middle;}
.view .sub_nav .current {color:#e75546; font-family:'Festivo Letters No1'; font-size:27px;}
.view .pro_view {overflow:hidden; padding:30px 0 50px;}
.view .pro_view .left {width:50%; float:left; padding-right:5%; text-align: right;}
.view .pro_view .right {width:50%; float:left; padding-top:80px;}
.view .pro_view .right .pro_nm {color:#e75546; font-family:'Festivo Letters No1'; font-size:100px;}
.view .pro_view .right .pro_info {color:#fe9e49; font-size:28px; line-height:1.6em;}
.view .pro_view .right .link_btn {border-color:#ffb05c; color:#ffb05c; padding:15px 30px;}
.view .pro_view .right .link_btn .link_arrow {background-image:url('/setting/images/common/or_arrow.png');}

.view .detail_info {}
.view .detail_info .container_xs {overflow:hidden; padding:50px 0 0 10%;}
.view .detail_info .detail_tit {width:170px; float:left; margin-right:5%; font-size:30px; color:#fff; font-weight:400; padding:10px 0;}
.view .detail_info .detail_txt {width:calc(95% - 170px); float:left; color:#fff; border-top:1px solid rgba(255,255,255,0.4);}
.view .detail_info .detail_txt dl {padding:7px; border-bottom:1px solid rgba(255,255,255,0.4); overflow:hidden; line-height:1.5em;}
.view .detail_info .detail_txt dl:last-child {border-bottom:1px solid rgba(255,255,255,0.4);}
.view .detail_info .detail_txt dt {width:170px; float:left; padding:0 30px;}
.view .detail_info .detail_txt dd {width:calc(100% - 170px); float:left; padding:0 30px;}




/*************
responsive
*************/

@media screen and (max-width:1680px) {

    /*list*/
    .product .pro_list li.show, .product .pro_list li.all.show {width:170px;}
    .product .pro_list li img {width:225px;}
    .product .pro_list li span {font-size:22px;}
}
/*tablet size*/
@media screen and (max-width:1280px) {

    .product .tab {padding-bottom:200px;}
    .product .tab h3 {font-size:32px;}
    .product .tab p {font-size:17px;}
    .product .ny_bg {margin-top:-50px;}

    /*list*/
    .product .pro_list {margin-top:-150px;}
    .product .pro_list li.show, .product .pro_list li.all.show {width:115px;}
    .product .pro_list li img {width:160px;}
    .product .pro_list li span {font-size:17px;}
    .product .pro_list li:hover img {transform: translateY(-20px);}
    .product .container_xs {padding:0 3%;}


    /*view*/
    .view .view_top {padding-top:50px;}
    .view .pro_view .left {padding-right:2%;}
    .view .pro_view .left img {max-width:80%;}
    .view_top .container_xs {padding:50px 5%;}
    .view .detail_info .container_xs {padding:50px 7%;}
    .view .detail_info .detail_tit {font-size:25px; width: 140px;}
    .view .pro_view .right {padding-top:50px;}
    .view .pro_view .right .pro_nm {font-size:80px;}
    .view .pro_view .right .pro_info {font-size:20px;}
    .view .pro_view .right .link_btn {padding:10px 20px; margin-top:30px; font-size:16px;}

}
/*mobile size*/
@media screen and (max-width:768px) {

    .product .ny_bg {margin-top:0px;}
    .product .tab h3 {font-size:34px; margin-bottom:10px;}
    .product .tab p {font-size:15px;}
    .product .tab a {width:115px;}

    /*list*/
    .product .pro_list {width:360px; margin:-120px auto 0;}
    .product .pro_list li.show, .product .pro_list li.all.show {width:115px; transition:opacity 0s ease;}
    .product .pro_list li span {margin:5px auto 15px;}
    .product .pro_list li img {width:150px;}
    .product .pro_list li:hover img {transform: translateY(-10px);}

    /*view*/
    .view_top .container_xs {padding:30px 7%;}
    .view .pro_view .left {width:100%; text-align: center;}
    .view .pro_view .right {width:100%; padding-top:20px; text-align: center;}
    .view .detail_info .detail_tit {float:none;}
    .view .detail_info .detail_txt {width:100%; float:none; margin-top:50px;}
    .view .ny_bg {background-color:transparent;}
}

@media screen and (max-width:460px) {
    body {width:100%; overflow-x: hidden;}

    .product .tab {padding-bottom: 150px; padding-top:120px;}
    .product .tab h3 {width:200px; font-size:32px; margin:10px auto; line-height:1.2em;}
    .product .tab p {margin-bottom:40px;}
    .product .tab a {width:30%;}

    /*list*/
    .product .pro_list {width:320px; margin:-90px auto 0;}
    .product .pro_list li {margin-left:-10px;}
    .product .pro_list li.show, .product .pro_list li.all.show {width:100px; transition:opacity 0s ease;}
    .product .pro_list li img {width:130px;}
    .product .pro_list li span {font-size:13px;}
    .product .pro_list li:hover img {transform: translateY(0px);}

    /*view*/
    .view .tab {padding: 100px 0 0;}
    .view .view_top {padding-top:0px;}
    .view .sub_nav {font-size:16px;}
    .view .sub_nav span {font-size:16px;}
    .view .sub_nav span.current {font-size:20px;}
    .view .pro_view {padding:20px 0;}
    .view .pro_view .right .pro_nm {font-size:45px;}
    .view .pro_view .right .pro_info {font-size:16px;}
    .view .detail_info .detail_tit {font-size:20px; width: 115px;}
    .view .detail_info .detail_txt {padding-bottom:0px; margin-top:30px;}
    .view .detail_info .detail_txt dl { font-size:13px;}
    .view .detail_info .detail_txt dt {padding:0; width:90px;}
    .view .detail_info .detail_txt dd {padding:0; width:calc(100% - 90px);}
}