.section.hot-role{position: relative;margin: 60px 0;padding: 60px 0;overflow: hidden}
.hot-role .heading-block{margin-bottom: 50px;}
.hot-role .heading-block h2{font-size: 30px;}
.hot-role .heading-block span{font-size: 13px;margin-top: 4px;font-weight: 400;}
.hot-role .singer-wrap{display: block;position: relative;width: 100%;margin: 0 auto;height: 300px;}
.hot-role .singer-wrap .singer-bb-image{position: absolute;left: 50%;top: 50%;width: 80px;height: 80px;border-radius: 50%;border: 1px solid #777;background-repeat: no-repeat;background-position: center center;background-size: cover;transition: transform .4s ease;}
.hot-role .singer-wrap .singer-bb-image.big{left: 50%;top: 50%;width: 300px;height: 300px;margin-top: -150px;margin-left: -150px;}
.hot-role .singer-wrap .singer-bb-image:before{opacity: 0;content: "";position: absolute;width: 100%;height: 100%;z-index: -1;border-radius: 50%;background-color: rgba(0,0,0,0.6);transition: background-color: .4s ease, opacity .4s ease;}
.hot-role .singer-wrap .singer-bb-image.big span{font-size: 34px;line-height: 1.4;}
.hot-role .singer-wrap .singer-bb-image span{opacity: 0;display: block;text-align: center;color: #fff;z-index: 2;position: absolute;top: 50%;left: 50%;font-size: 12px;line-height: 15px;transform: translate(-50%,-50%);transition: opacity .4s ease;}
.hot-role .singer-wrap .singer-bb-image:hover span, .singer-wrap .singer-bb-image:hover:before{opacity: 1}
.hot-role .singer-wrap .singer-bb-image.big:hover{transform: scale(1.02)}
.hot-role .heading-block:after{content: none}

.role-data{margin-bottom: 100px;}
.role-data .flip-card{margin-bottom: 30px;}
.role-data .flip-card .front:after, .role-data .flip-card .back:after{background-color: transparent;}
.role-data .flip-card .inner p{color: #000}
.role-data .flip-card .inner .fbox-desc{overflow: hidden}
.role-data .flip-card .inner .fbox-desc p{font-size: 16px;max-height: 100px;overflow: hidden;overflow-y: auto}
.role-data .creator{display: block;float: none}
.role-data .flip-card .inner .fbox-desc .border-vertical{background-color: #ddd;min-height: 147px;width: 1px;display: block;margin: auto;}
.role-data .flip-card .inner .fbox-desc .role-desc{padding-bottom: 40px;position: relative;min-height: 147px;}
.role-data .flip-card .inner .fbox-desc .role-desc button{position: absolute;bottom: 0;right: 0;}
.role-data .flip-card .inner .feature-box.media-box{position: absolute;top: 50%;;left: 50%;transform: translate(-50%,-50%);height: auto;width: 98%;}
/*.flip-card .inner{height: 400px;}*/

.mb-4, .my-4{margin-bottom: 1.5rem;}
.img-hover-card > a:after{background-color: rgba(0,0,0,0)}
.img-hover-card img{width: 100%;height: 100%;}
.img-hover-detail h3.img-hover-title,.img-hover-detail small{color: #fff;text-shadow: 2px 2px 6px #000;font-size: 16px;}
.img-hover-detail h3.img-hover-title{font-size: 20px;}
/*.img-hover-wrap .img-link{opacity: 1;display: none}*/
/*.img-hover-wrap:hover .img-link{display: block}*/
.flip-card .front, .flip-card .back{height: 400px}
.img-hover-card{padding: 15px;}
.img-hover-wrap .img-hover-detail{display: none}
.img-hover-wrap:hover .img-hover-card .img-hover-detail{display: block}

.hot-role .singer-wrap a:first-of-type{z-index: 1}
.hot-role .singer-wrap a:nth-of-type(2){top: 0!important;left: 3%!important;}
.hot-role .singer-wrap a:nth-of-type(3){top: 43%!important;margin-left: -49%!important;}
.hot-role .singer-wrap a:nth-of-type(4){top: 34%!important;margin-left: -38%!important;}
.hot-role .singer-wrap a:nth-of-type(5){top: 0!important;margin-left: -33%!important;}
.hot-role .singer-wrap a:nth-of-type(6){top: 0!important;margin-left: -20%!important;}
.hot-role .singer-wrap a:nth-of-type(7){top: auto!important;bottom: 0!important; margin-left: -42%!important;}
.hot-role .singer-wrap a:nth-of-type(8){top: 34%!important; margin-left: -27%!important;}
.hot-role .singer-wrap a:nth-of-type(9){top: auto!important;bottom: 0!important;margin-left: -31%!important;}
.hot-role .singer-wrap a:nth-of-type(10){top: auto!important;bottom: 5%!important;margin-left: -21%!important;}
.hot-role .singer-wrap a:nth-of-type(11){top: 0!important;left: auto!important;right: 4%!important;}
.hot-role .singer-wrap a:nth-of-type(12){top: 44%!important;margin-left: 41%!important;}
.hot-role .singer-wrap a:nth-of-type(13){top: 32%!important;margin-left: 30%!important;}
.hot-role .singer-wrap a:nth-of-type(14){top: auto!important;bottom: 2%!important;margin-left: 34%!important;}
.hot-role .singer-wrap a:nth-of-type(15){top: 1%!important;margin-left: 26%!important;}
.hot-role .singer-wrap a:nth-of-type(16){top: 4%!important;margin-left: 14%!important;}
.hot-role .singer-wrap a:nth-of-type(17){top: auto!important;bottom: 0!important;margin-left: 23%!important;}
.hot-role .singer-wrap a:nth-of-type(18){top: auto!important;bottom: 36%!important;margin-left: 19%!important;}
.hot-role .singer-wrap a:last-of-type{top: auto!important;bottom: 0!important;margin-left: 12.5%!important;}
.slider-caption.slider-caption-right{right: auto;left: 90px;}
.creatorGuide .banner,#slider{margin-bottom: 60px;}
.about-page h3,.guide-2 h3{display: inline-block;border-bottom: 2px solid #333;margin-bottom: 20px;padding-bottom: 5px;font-size: 36px;}
.guide-2{margin-bottom: 60px;}
.about-page .col-sm-7 p,.guide-2 .col-sm-7 p{margin-right: 15%;font-size: 20px;line-height: 28px;}
.textNext .circle-disc{width: 11%;display: inline-block;margin-left: 1.5%;margin-right: 1.5%;vertical-align: top}
.textNext .divider-icon-next{width: 2%;display: inline-block;height: 170px;line-height: 200px;}
.textNext .circle-disc img{margin-bottom: 15px;border: 1px solid transparent;transition: all .4s}
.creatorGuide button{padding-top: 0;padding-bottom: 0;}
.textNext .circle-disc:hover img{border-color: #1fc0a0;transform: scale(1.12)}
.about-page p,.textL p,.textNext p,.textNext .circle-disc p{transition: all .4s;font-size: 20px;line-height: 26px;}
.textNext .circle-disc:hover p{color: #1fc0a0;transform: scale(1.12)}
.textNext{padding-top: 100px;padding-bottom: 100px;}
.textNext .feature-box.media-box .fbox-desc{height: 267px;}
.textNext .feature-box.media-box .fbox-desc ul{margin: 0;overflow: hidden;overflow-y: auto;height: 220px;}
.textNext .feature-box.media-box .fbox-desc li{margin-bottom: 5px;text-align: left;margin-left: 30px;line-height: 26px;height: 26px;list-style: disc}
.textNext .feature-box.media-box .fbox-desc li a{display: block}
.textNext .feature-box.media-box .fbox-desc li a h3{line-height: 22px;}
.textNext .feature-box.media-box .fbox-desc li:hover a h3{color: #1fc0a0}
.about-page h4,.textL h4,.textNext h4{font-size: 36px;font-weight: 500;display: inline-block;padding-bottom: 5px;border-bottom: 2px solid #333;margin-top: 60px;}
.justify-content-center i,.justify-content-center .static-pic{height: 566px;line-height: 566px;font-size: 54px;color: #1fc0a0}
.justify-content-center .static-pic{position: relative;line-height: 500px;}
.justify-content-center .static-pic p{position: absolute;height: 20px;line-height: 20px;top: 80%;width: 100%;font-weight: 500;font-size: 22px;color: #333}
.stage-sop,.free-will-price{padding-top: 50px;padding-bottom: 50px;position: relative}
.stage-sop .ss-cube,.free-will-price .fw-cube{width: 33%;display: inline-block;vertical-align: top}
.stage-sop .ss-cube img,.free-will-price .fw-cube img{width: 90%;}
.stage-sop .ss-cube p,.free-will-price .fw-cube p{margin-top: 10px;width: 90%;}
.stage-sop .ss-cube.ss-cube-1 p,.stage-sop .ss-cube.ss-cube-1 img,.free-will-price .fw-cube.fw-cube-1 p,.free-will-price .fw-cube.fw-cube-1 img{margin-right: 10%;}
.stage-sop .ss-cube.ss-cube-2 h5,.stage-sop .ss-cube.ss-cube-2 p,.stage-sop .ss-cube.ss-cube-2 img,.free-will-price .fw-cube.fw-cube-2 p,.free-will-price .fw-cube.fw-cube-2 img{margin-right: 5%;margin-left: 5%;}
.stage-sop .ss-cube.ss-cube-3 h5,.stage-sop .ss-cube.ss-cube-3 p,.stage-sop .ss-cube.ss-cube-3 img,.free-will-price .fw-cube.fw-cube-3 p,.free-will-price .fw-cube.fw-cube-3 img{margin-left: 10%;}
.stage-sop .ss-cube.ss-cube-3 h5{margin-right: 0;}
.stage-sop .ss-icon,.free-will-price .fw-icon{width: 4%;display: inline-block;font-size: 50px;top: 50%;transform: translateY(-50%);position: absolute}
.free-will-price .fw-icon span.plus{position: absolute;left: -100%;}
.free-will-price .fw-icon span.equal{position: absolute;left: -40%;}
.textL h4+p{text-align: center;margin-left: 0;margin-bottom: 20px;}
.creatorGuide label{cursor: auto;font-size: 24px;line-height: 26px;display: block;margin-top: 60px;margin-bottom: 20px;}
.footer-newsletter .subscribe{margin: 0;padding: 0 15px;height: 42px;}
.email{padding: 0;}
.textL label span{display: inline-block;width: calc(100% - 30px);vertical-align: top}
.textNext.how-to-active{margin-bottom: 80px;padding-top: 80px;}
.elem span{width: 22.5%;padding-top: 22.5%;display: inline-block;background-size: cover;background-position: center center;margin: 1%;}
.screenshot .col-sm-8 a:hover{opacity: .5}
.screenshot .col-sm-8 a span{transition: all .5s}
.screenshot .col-sm-8 a:hover span{transform: scale(1.1)}
.stage-sop .ss-icon{color: #1fc0a0}












@media only screen and (max-width: 1199px){
	.flip-card .front, .flip-card .back{background-size: contain;background-repeat: no-repeat;height: 320px;}
	.ps{margin-top: 130px;}
}
@media only screen and (max-width: 991px){
	.about-page .col-sm-7 p, .guide-2 .col-sm-7 p{margin-right: 0;}
	.ps{margin-top: 0;}
	.about-page-3{padding: 160px 100px;}
	.flip-card .front, .flip-card .back{height: 245px;}
	.role-data .flip-card .inner .fbox-desc h3{font-size: 20px;}
	.role-data .flip-card .inner .fbox-desc .col-sm-2{padding-right: 0;}
	.role-data .flip-card .inner .fbox-desc .col-sm-9{padding-left: 0;}
	.role-data{margin-top: 30px;}
	.hot-role .singer-wrap a:first-of-type{width: 250px;height: 250px;left: 50%;transform: translateX(-50%)}
	.hot-role .singer-wrap a:nth-of-type(2){top: -30px !important;left: 7% !important;}
	.hot-role .singer-wrap a:nth-of-type(3){top: 48% !important;margin-left: -47% !important;}
	.hot-role .singer-wrap a:nth-of-type(4){top: 79% !important;margin-left: -50% !important;}
	.hot-role .singer-wrap a:nth-of-type(5){top: 52px !important;margin-left: -48% !important;}
	.hot-role .singer-wrap a:nth-of-type(6){top: -6px !important;margin-left: -28% !important;}
	.hot-role .singer-wrap a:nth-of-type(7){top: auto!important;bottom: -78px!important; margin-left: -37.5% !important;}
	.hot-role .singer-wrap a:nth-of-type(8){top: 28%!important; margin-left: -35.5% !important;}
	.hot-role .singer-wrap a:nth-of-type(9){top: auto!important;bottom: 18px!important; margin-left: -34% !important;}
	.hot-role .singer-wrap a:nth-of-type(10){top: auto!important;bottom: -18%!important; margin-left: -24% !important;}
	.hot-role .singer-wrap a:nth-of-type(11){top: 16% !important;right: 3% !important;}
	.hot-role .singer-wrap a:nth-of-type(12){top: 80% !important;margin-left: 38% !important;}
	.hot-role .singer-wrap a:nth-of-type(13){top: 49% !important;margin-left: 36% !important;}
	.hot-role .singer-wrap a:nth-of-type(14){top: auto!important;bottom: -30%!important; margin-left: 26% !important;}
	.hot-role .singer-wrap a:nth-of-type(15){top: -14% !important;margin-left: 32% !important;}
	.hot-role .singer-wrap a:nth-of-type(16){top: 6% !important;margin-left: 22% !important;}
	.hot-role .singer-wrap a:nth-of-type(18){top: auto!important;bottom: 32% !important;margin-left: 24% !important;}
	.hot-role .singer-wrap a:last-of-type{top: auto!important;bottom: -70px!important; margin-left: 13% !important;}
	.hot-role .singer-wrap .singer-bb-image.big:hover{transform: scale(1.02) translateX(-50%)}
}
@media only screen and (max-width: 767px){
	.about-page-1 .col-sm-5 img{width: 100%;}
	.stage-sop .ss-cube, .free-will-price .fw-cube{width: 32%;}
	.ss-icon .arrow-right{margin-left: -18px;}
	.stage-sop .ss-icon{font-size: 30px;}
	.about-page-3{padding: 160px 0;}
	.about-page h3{font-size: 33px;}
	.elem span{width: 30.5%;padding-top: 30.5%;}
	.slider-element .container{height: 500px;}
	.free-will-price .fw-cube:last-of-type{margin-top: 100px;}
	.textNext .circle-disc{width: 22%;margin-left: 3%;margin-right: 3%;}
	.creatorGuide button{width: auto;}
	.justify-content-center .static-pic p{bottom: -10%;top: auto}
	.free-will-price .fw-cube{width: 49%;}
	.free-will-price .fw-icon.plus-outer{top: 25%;left: 49%;}
	.footer-newsletter{margin-bottom: 0;}
	.free-will-price .fw-icon.equal-outer{left: 50%;transform: rotate(90deg);}
	.justify-content-center i{transform: rotate(90deg);margin-top: -160px;}
	.justify-content-center .col-sm-1{height: 200px;}
	.flip-card .front, .flip-card .back{background-size: cover}
	.role-data .flip-card .inner .fbox-desc .role-desc button{width: auto;}
	.role-data .flip-card .inner .fbox-desc .col-xs-0{display: none}
	.img-hover-wrap .img-hover-detail{left: 30px;bottom: 30px;}
	.hot-role .singer-wrap a.singer-bb-image:first-of-type{width: 150px;height: 150px;left: 50%;transform: translateX(-50%);top: -12%!important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(2){top: -3% !important;left: 14% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(3){top: 48% !important;margin-left: -47% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(4){top: 79% !important;margin-left: -52% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(5){top: 52px !important;margin-left: -48% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(6){top: 27% !important;margin-left: -28% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(7){top: auto!important;bottom: -26%!important; margin-left: -32.5% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(8){top: 42%!important; margin-left: -9.5% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(9){top: auto!important;bottom: 8%!important; margin-left: -27.5% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(10){top: auto!important;bottom: -14%!important; margin-left: -12% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(11){top: 41% !important;right: -1% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(12){top: 102% !important;margin-left: 29% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(13){top: 91% !important;margin-left: 8% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(14){top: auto!important;bottom: -54%!important; margin-left: 2% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(15){top: -9% !important;margin-left: 25% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(16){top: 34% !important;margin-left: 11% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(17){top: auto !important;bottom: 5%!important; margin-left: 5% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(18){top: auto!important;bottom: -5% !important;margin-left: 27% !important;}
	.hot-role .singer-wrap a.singer-bb-image:last-of-type{top: auto!important;bottom: -43%!important; margin-left: -16% !important;}
	.role-data{margin-top: 130px;}
}
@media only screen and (max-width: 479px){
	.elem span{width: 47%;padding-top: 47%;}
	.stage-sop .ss-icon{font-size: 50px;}
	.about-page .about-page-0{margin-bottom: 60px;}
	.about-page h3{font-size: 24px;}
	.stage-sop .ss-cube{width: 100%;margin-bottom: 60px;padding-top: 30px;}
	.stage-sop .ss-icon{position: relative;display: block;margin: auto;transform: rotate(90deg)}
	.stage-sop .ss-cube.ss-cube-3 h5,.stage-sop .ss-cube.ss-cube-3 img,.stage-sop .ss-cube.ss-cube-2 h5,.stage-sop .ss-cube.ss-cube-2 img,.stage-sop .ss-cube.ss-cube-1 img,.ss-cube h5{margin-left: 0;margin-right: 0;}
	.stage-sop .ss-cube.ss-cube-3 img,.stage-sop .ss-cube.ss-cube-2 img,.stage-sop .ss-cube.ss-cube-1 img{padding: 0;width: 100%;}
	.stage-sop .ss-cube.ss-cube-3 p,.stage-sop .ss-cube.ss-cube-2 p,.stage-sop .ss-cube.ss-cube-1 p{margin: 10px 0;width: 100%;}
	.free-will-price .fw-icon.plus-outer{left: 47%;}
	.guide-2 .col-sm-7 p{margin-right: 0;}
	.textNext .bottommargin-sm{width: 49%;}
	.textNext .feature-box.media-box .fbox-desc{padding: 10px;height: 180px;}
	.textNext .feature-box.media-box .fbox-desc ul{height: 160px;}
	.textNext .feature-box.media-box .fbox-desc li{height: auto;margin-left: 24px;}
	.textNext .circle-disc{width: 94%;}
	.textNext .divider-icon-next{transform: rotate(90deg)}
	.creatorGuide button{width: 100%;}
	.flip-card .front, .flip-card .back{height: 350px;}
	.role-data .flip-card .inner .fbox-desc .col-xs-8,.role-data .flip-card .inner .fbox-desc .col-xs-4{width: 100%;padding: 15px;}
	.img-hover-wrap .img-hover-detail{left: 20px;bottom: 20px;}
	.img-hover-detail h3.img-hover-title, .img-hover-detail small{font-size: 12px;}
	.img-hover-wrap:hover .img-link{display: none}
	.hot-role .singer-wrap a.singer-bb-image:first-of-type{width: 125px;height: 125px;left: 50%;transform: translateX(-50%);top: -12%!important;margin: 0 !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(2){top: 13% !important;left: auto!important;margin-left: -50% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(3){top: 40% !important;margin-left: -50% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(4){top: 94% !important;margin-left: -50% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(5){top: 67% !important;margin-left: -50% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(6){top: 120% !important;margin-left: -50% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(7){top: auto!important;bottom: -13%!important; margin-left: -25% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(8){top: 29%!important; margin-left: -25% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(9){top: auto!important;bottom: 14%!important; margin-left: -25% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(10){top: auto!important;bottom: -40%!important; margin-left: -25% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(11){top: 39% !important;right: auto !important;margin-left: 27% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(12){top: 120% !important;margin-left: 27% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(13){top: 93% !important;margin-left: 27% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(14){top: auto!important;bottom: -13%!important; margin-left: 2% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(15){top: 12% !important;margin-left: 27% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(16){top: 29% !important;margin-left: 2% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(17){top: auto !important;bottom: 14%!important; margin-left: 2% !important;}
	.hot-role .singer-wrap a.singer-bb-image:nth-of-type(18){top: auto!important;bottom: 4% !important;margin-left: 27% !important;}
	.hot-role .singer-wrap a.singer-bb-image:last-of-type{top: auto!important;bottom: -40%!important; margin-left: 2% !important;}
	.hot-role .singer-wrap .singer-bb-image{width: 70px;height: 70px;}
}