@charset "utf-8";

body.product #wrapper {background:url('../../img/product/product_bg.png') no-repeat center bottom; background-size:100% auto;}
body.product #container {position:relative; max-width:none;}
body.product #fboardlist {display:block; position:relative; max-width:1400px; margin:0 auto;}
body.product .circle0101 {left:1.71%; bottom:-5vw; width:12.5vw; height:12.5vw; background:#fde97d;
    -webkit-animation:cirMove 1s infinite alternate;
    -moz-animation:cirMove 1s infinite alternate;
    animation:cirMove 1s infinite alternate;
}
body.product .circle0201 {left:93.444%; top:0; width:160px; height:160px; background:#b0e3e5; z-index:10;
    -webkit-animation:cirMove 1.5s infinite alternate;
    -moz-animation:cirMove 1.5s infinite alternate;
    animation:cirMove 1.5s infinite alternate;
}
body.product .circle0202 {left:106.527%; top:225px; width:40px; height:40px; background:#c6bfdd;
    -webkit-animation:cirMove 1s 400ms infinite alternate;
    -moz-animation:cirMove 1s 400ms infinite alternate;
    animation:cirMove 1s 400ms infinite alternate;
}
body.product .start .move-circle {top:100%; bottom:100%;}
body.product .tit-wrap {max-width:1400px; margin:0 auto;}

.prd-list-wrap {margin:0 -20px; padding:0 20px; overflow:hidden;}
.prd-list .gall_now {display:none;}
.prd-box .thumb {overflow:hidden; border:1px solid #e5e5e5; background:#fff;}
.prd-box .thumb .link {display:none; position:absolute; left:0; top:0; width:100%; height:100%; font-size:0; text-indent:-9999px;}
.prd-box .detail {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; background:rgba(0,0,0,0.7);
    -webkit-transition:opacity 300ms;
    -moz-transition:opacity 300ms;
    -o-transition:opacity 300ms;
    transition:opacity 300ms;
}
.prd-box .detail .vertical-box {width:100%; height:100%; text-align:center;}
.prd-box .detail span {display:inline-block;}
.prd-box .detail .shop {margin-left:5%;}
.prd-box .detail a {display:inline-block; width:130px; height:130px; font-size:1.125em; letter-spacing:-0.05em; line-height:128px; border:1px solid transparent; border-radius:50%;
    -webkit-transition:300ms;
    -moz-transition:300ms;
    -o-transition:300ms;
    transition:300ms;
}
.prd-box .detail .view a {border-color:#fff; background:#fff;}
.prd-box .detail .shop a {color:#fff; border-color:#8e80bd; background:#8e80bd;}
.prd-box .detail span:hover a {color:#8e80bd; border-color:#8e80bd; background:#fff;
    -webkit-animation:btnMove 500ms ease-in infinite alternate;
    -moz-animation:btnMove 500ms ease-in infinite alternate;
    animation:btnMove 500ms ease-in infinite alternate;
}
.prd-box .prd-name {font-size:1.250em; letter-spacing:-0.02em; text-align:center;}
.prd-box:hover .detail {opacity:1;}
.prd-box:hover .prd-name a,
.prd-box:hover .prd-name label {color:#8e80bd;}

@keyframes -webkit-btnMove{
    to {-webkit-transform:translateY(-5%); transform:translateY(-5%);}
}
@keyframes -moz-btnMove{
    to {-moz-transform:translateY(-5%); transform:translateY(-5%);}
}
@keyframes -o-btnMove{
    to {-o-transform:translateY(-5%); transform:translateY(-5%);}
}
@keyframes btnMove{
    to {
        -webkit-transform:translateY(-5%);
        -moz-transform:translateY(-5%);
        -ms-transform:translateY(-5%);
        -o-transform:translateY(-5%);
        transform:translateY(-5%);
    }
}

body.product-detail #wrapper {background:url('../../img/product/product_detail_bg_btm.png') no-repeat center bottom; background-size:100% auto;}
body.product-detail #container_wr {background:url("../../img/product/product_detail_bg.png") no-repeat left top; background-size:100% auto;}
body.product-detail #container {max-width:none; padding-left:0; padding-right:0; padding-bottom:0; overflow:hidden;}
body.product-detail #fboardlist {max-width:1440px; margin:0 auto; padding:0 20px 160px;}
body.product-detail #bo_v {max-width:none;}
body.product-detail .prd-list-wrap {margin:0; padding:0;}

.prd-detail {position:relative; *zoom:1;}
.prd-detail:after {content:""; display:block; visibility:hidden; clear:both;}
.prd-detail .circle0101 {left:92.5%; top:67.647%; width:9.375vw; height:9.375vw; background:#8ed7da; z-index:-1;
    -webkit-animation:cirMove 1s infinite alternate;
    -moz-animation:cirMove 1s infinite alternate;
    animation:cirMove 1s infinite alternate;
}

.detail-img {float:left; width:50%; max-width:680px;}
.detail-img .img-view {overflow:hidden; border:1px solid #dfdfdf; border-radius:30px; background:#fff;}
.detail-img .img-view img {width:100%;}
.detail-img .img-view .swiper-pagination {display:none;}
.detail-img .img-thumb {position:relative; margin:20px 0 0;}
.detail-img .img-thumb .img-thumb-in {position:relative; margin:0 -5px; overflow:hidden;}
.detail-img .img-thumb .img-thumb-in:before,
.detail-img .img-thumb .img-thumb-in:after {content:""; position:absolute; top:0; bottom:0; width:25px; z-index:9;}
.detail-img .img-thumb .img-thumb-in:before {left:0; background:linear-gradient(to right, #fff, rgba(255,255,255,0));}
.detail-img .img-thumb .img-thumb-in:after {right:0; background:linear-gradient(to left, #fff, rgba(255,255,255,0));}
.detail-img .img-thumb .swiper-container {padding:0 40px 0 0; overflow:visible;}
.detail-img .img-thumb .swiper-slide {width:25.5%;}
.detail-img .img-thumb .thumb {margin:0 5px; overflow:hidden; cursor:pointer; border:1px solid #dfdfdf; border-radius:30px;}
.detail-img .img-thumb .swiper-slide-thumb-active .thumb {border:2px solid #a499c9;}
#thumb_next {display:block; right:-15px; width:40px; height:40px; font-size:0; background:url("../../img/product/prd_slide_next.png") no-repeat center center; background-size:cover; z-index:10;}
#thumb_prev {display:block; left:-15px; width:40px; height:40px; font-size:0; background:url("../../img/product/prd_slide_prev.png") no-repeat center center; background-size:cover; z-index:10;}
#thumb_next:after,
#thumb_prev:after {display:none;}
.detail-img .img-center {text-align:center;}
.detail-img .img-center .swiper-slide {display:inline-block;}

.detail-info {float:right; position:relative; width:50%; padding:60px 0 0 140px; z-index:1;}
.detail-info .prd-name {display:block; font-family:"Baloo Thambi 2",sans-serif; font-size:3.125em; letter-spacing:0.01em; line-height:1.4em;}
.detail-info .explain {margin:2em 0 0;color:#555; font-size:1.250em; letter-spacing:-0.02em; line-height:1.700em;}
.detail-info .sub-info {display:table; table-layout:fixed; width:100%; margin:1em 0 0; color:#555; font-size:1.250em; letter-spacing:-0.02em; line-height:1.800em;}
.detail-info dl {display:table-row;}
.detail-info dt {display:table-cell; padding:10px 0; width:7.5em; font-weight:600; vertical-align:top;}
.detail-info dd {display:table-cell; padding:10px 0; vertical-align:top;}
.detail-info .btn-wrap {margin:50px 0 0; text-align:left;}
.detail-info .btn-prd {width:260px;}
.detail-info .btn-prd:nth-child(even) {float:right;}
.detail-info .btns .btn-confirm {width:32%; min-width:auto;}
.detail-info .btns .btn-download {width:65%; padding:0 10px;}

.prd-extend {margin:120px 0 0;}

.related-prd {padding:110px 0 0;}
.prd-tit {font-family:"Baloo Thambi 2",sans-serif; font-size:3.125em; letter-spacing:0.01em; text-align:center; line-height:1;}
.related-list .gallery-item {width:25%;}
.related-list .prd-box .detail a {width:110px; height:110px; line-height:108px;}


@media screen and (max-width:1440px){
body.product .circle0201 {left:auto; right:-12px; top:-5vw;}
body.product .circle0202 {left:auto; right:15.21%; top:-57px;}

.detail-info {padding:5vw 0 0 60px;}

.prd-list-wrap {overflow:visible;}

.related-list .prd-box .detail a {width:100px; height:100px; line-height:98px;}
}


@media screen and (max-width:1023px){
body.product .circle0101 {bottom:-2vw;}
body.product .circle0201 {width:16vw; height:16vw;}
body.product .circle0202 {width:5.33vw; height:5.33vw;}

.prd-list .gallery-item {width:33.333%;}
.prd-box .thumb img {vertical-align:top;}
.prd-box .thumb .link {display:block;}
.prd-box .detail {display:none;}
.prd-box .prd-name {font-size:1.167em;}

body.product-detail #fboardlist {padding:0 20px 130px;}

.prd-detail .circle0101 {left:auto; right:-7px; top:95%; width:12vw; height:12vw;}

.detail-img .img-view {border-radius:22px;}
.detail-img .img-thumb .thumb {border-radius:22px;}
.detail-img .img-thumb .swiper-slide {width:34%;}

.detail-info {padding:0 0 0 60px;}
.detail-info .prd-name {font-size:2.5em;}
.detail-info .explain {font-size:1.167em;}
.detail-info .sub-info {font-size:1.167em;}
.detail-info .btn-wrap {margin:35px 0 0;}

.prd-extend {margin:16% 0 0;}

.prd-tit {font-size:2.5em;}
}


@media screen and (max-width:1023px) and (min-width:768px){
.detail-info .btns .btn-prd {width:100%; margin:0 0 10px;}
}


@media screen and (max-width:767px){
body.product .circle0201 {top:0;}

.prd-list {margin:0 -7px; padding:5px 0 0;}
.prd-list .gallery-item {width:50%;}
.prd-box {margin:20px 7px 0;}
.prd-box .info {padding:15px 0 20px;}

body.product-detail #container {padding:0;}
body.product-detail #bo_v {position:relative; padding:0; z-index:1;}
body.product-detail #bo_gall {background:url('../../img/product/m/product_detail_bg_btm.png') no-repeat center top; background-size:100% auto;}
body.product-detail #fboardlist {padding:0 20px 100px;}
body.product-detail .tit-wrap {display:none;}

.prd-detail .circle0101 {display:none;}

.detail-img {float:none; width:auto; max-width:none; margin:0 -20px;}
.detail-img .img-view {border:0 none; border-radius:0;}
.detail-img .img-view .swiper-pagination {display:block; bottom:0; padding:0 60px; font-size:0;}
.detail-img .img-view .swiper-pagination-bullet {width:25%; height:24px; margin:0; opacity:1; outline:0 none; border:0 none; border-top:4px solid #fafafa; border-radius:0; background:transparent;}
.detail-img .img-view .swiper-pagination-bullet-active {border-top-color:#333;}
.detail-img .img-thumb {display:none;}

.detail-info {float:none; width:auto; padding:13.33vw 0 0;}
.detail-info .prd-name {font-size:2.083em;}
.detail-info .explain {margin:15px 0 0;}
.detail-info dt {padding:3px 0;}
.detail-info dd {padding:3px 0;}
.detail-info .btn-wrap {margin:25px 0 0;}
.detail-info .btn-prd {width:160px;}

.related-prd {padding:40% 0 0;}
.prd-tit {font-size:2.083em;}
}