.progress-box {margin:10px 0; border-left:solid 3px var(--primary);}
.progress-item {display: flex;align-items:stretch;}
.progress-item .name {flex-shrink:0;align-self:center; width:20%; padding:0 10px;}
.progress {flex-shrink:1;position: relative; width: 100%; height: 30px; margin:10px 0;overflow: hidden; background-color: initial; border-radius: 0;}
.progress .progress-bar {width:0; height: 100%; background-color:var(--primary); color:#fff; border-radius:0 100px 100px 0; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.progress .progress-bar strong {display: inline-block; line-height: 20px; padding: 5px 10px; font-weight: normal; position: absolute; z-index: 3; top: 0; left: 0;}
.progress .progress-bar span {display: inline-block;line-height:20px; padding: 5px; position: absolute; z-index: 3; top: 0; right: 10px;}
.progress-box .progress-item {padding-top: 10px;}
.progress-box .progress-item:first-child {padding-top: 0;}
.progress-box .progress {margin: 0;}
.progress-box.white {border-left-color:var(--white);}
.progress .progress-bar.white,
.progress-box.white .progress .progress-bar {background-color: var(--white); color:var(--primary);}
.progress.active .progress-bar {background-color:var(--secondary); color:var(--white);}

.playGet_panel {position: relative; margin:20px 0; background-color: #fff; border: solid 3px #00a2ea;box-shadow: 0 0 20px #ccc; box-shadow: 0 0 20px rgba(0,0,0,.3);}
.playGet_panel label {cursor: pointer;}
.playGet_panel .wrap {display: flex;align-items:stretch;}
.playGet_panel .wrap.flex-column {flex-direction:column;}
.playGet_panel *:not(.page_info) .pic {flex-shrink:0;position: relative; overflow: hidden; text-align: center;float: none;width:63%;}
.playGet_panel *:not(.page_info) .cont {flex-shrink:1; width: 100%; padding:30px; float: none;}
.playGet_panel *:not(.page_info) .pic .share {position: absolute; z-index: 3; width: 100%; box-sizing: border-box; text-align: right}
.playGet_panel .title {background: url(images/title_bg.png) no-repeat center; background-size: 100% auto; font-size: 18px; line-height: 1.2; color: #fff; padding:10px 8% 15px 8%; margin: 10px 10% 20px;}
.playGet_panel .pic_info {padding: 20px; box-sizing: border-box; width: 100%; height:100%; color: #fff; text-align: left;}
.playGet_panel .pic_info_position {position: absolute; z-index: 2; top: 0; left: 0;}
.playGet_panel .pic_info .d-table {display: table; width: 100%; height:100%;}
.playGet_panel .pic_info .d-cell {display: table-cell; vertical-align: middle;}
.playGet_panel .pic_info .title {font-size: 24px; line-height: 1.2em; margin-bottom: 20px;}
.playGet_panel .share {padding: 15px 10px; font-size: 14px; line-height: 1.2em;}
.playGet_panel .share a {display: inline-block; text-decoration: none; margin: 0 10px;}
.playGet_panel .pic .share {color: #fff; border-bottom: solid 2px #fff; border-bottom: solid 2px rgba(255,255,255,.5);}
.playGet_panel .pic .share a {color: #fff;}
.playGet_panel .btnBox {padding-top: 10px;}
.playGet_panel .btn_group {overflow: hidden;}
.playGet_panel .btn_group:after {display: block; content: '';clear: both;}
.playGet_panel .btn_group .btnBox {display: inline-block; float: left; width: 50%; padding-top: 0; margin-bottom: 0;}
.playGet_panel .bottom {background: #f5f5f5;border-top: solid 1.5px #e0e0e0; padding: 30px;}
.playGet_panel .price big {display: inline-block;font-size: 72px; line-height: 1; font-weight: bold; color: #00a2ea; }
.playGet_panel .price sup {font-size: 24px;}
.playGet_panel .price small {display: inline-block; text-align: left; font-size: 16px; line-height: 1.2em; font-weight: bold;}
.playGet_panel .price small span {display: block; font-weight: normal;}
.playGet_panel .price big + small {margin-left: 10px;}
.playGet_panel .selectQuiz .q_title {font-size: 24px;}
.playGet_panel .selectQuiz .q_title small {display:block;font-size: 16px; color: #00a2ea; font-family:'ProximaNova-Regular', sans-serif,Arial,Helvetica;}
.playGet_panel .selectQuiz label {display: block; box-sizing: border-box; padding:10px 15px; line-height: 1.2em; border-radius: 3px; background-color: #f5f5f5; cursor: pointer;}
.playGet_panel .selectQuiz label:not(.item) {margin: 10px 0;}
.playGet_panel .selectQuiz label input[type='text'] {display: block; width: 100%; padding:10px 15px; margin:-10px -15px; border:0; border-bottom:solid 2px #979797; background:#fff;}
.playGet_panel .selectQuiz label.curr input[type='text'] {border-bottom:solid 2px #e1d9ec;}
.playGet_panel .selectQuiz label:hover {background-color: #e1d9ec;}
.playGet_panel .selectQuiz label.curr {background-color: #e1d9ec;}
.playGet_panel .selectQuiz .title {margin-bottom: 10px; color:#00a2ea;}
.playGet_panel .selectQuiz .title.border_bottom {padding-bottom: 10px;}
.playGet_panel .selectQuiz .btnBox {margin-bottom: 0;}
.playGet_panel .activity_topic {position: relative;}
.playGet_panel .activity_topic .topic {max-height:550px; overflow-y: auto;}
.playGet_panel .activity_topic .topic.active:after {display: block;content: ''; position: absolute; z-index: 2; width: 100%; height: 20%; left: 0; bottom: 0;background-size:auto 100%;
	background: -moz-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, #fff 0%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, #fff 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, #fff 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to top, #fff 0%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='rgba(255,255,255,0)',GradientType=0 );}
.playGet_panel .chart {padding:0 20px;}
.playGet_panel .chart .progress-box {margin: 20px 0;}
.playGet_panel .chart .progress-item .name {width: 45%;}
.playGet_panel .cont .chart {padding: 0;}
.playGet_panel .page_info {margin-bottom: 0;}
.playGet_panel .pic_fl {border-radius: 7px 0 0 7px; overflow: hidden; position: relative;}
.playGet_panel .pic_fl .pic_info {color: #413e3f; text-align: left;}
.playGet_panel .pic_fl .pic_info .title {color: #00a2ea; margin-bottom: 10px;}
.playGet_panel .pop_tips {position: absolute; z-index: 10; text-align: center; width: 80%; margin: 0 10%; top:-2000%; opacity: 0; left: 0; background-color: #fff; box-sizing: border-box; padding:15px; border: solid 1px #979797; border-radius: 5px; box-shadow: 0 0 20px #ccc; box-shadow: 0 0 20px rgba(0,0,0,.3); -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.playGet_panel .pop_tips .btn_close {position:absolute; z-index: 5; font-weight:normal; display:block; font-size:18px; line-height:20px; width:20px; height:20px; text-align:center; top:5px; right:5px; cursor:pointer;}
.playGet_panel .pop_tips .btn_close:after {display: inline-block;font-family: 'kvFonts'; content:'\e117';}
.playGet_panel .pop_tips.active {top: 30%; opacity: 1;}
.playGet_panel .pop_tips.error {border: solid 1px #FA745F; color: #FA745F;}
.playGet_panel .chart-slides {position: relative; padding: 0 10px;}
.playGet_panel .chart-slides .slides li {display: none; padding: 0 !important; margin: 0 !important; list-style: none !important;}
.playGet_panel .chart-slides .slides li:first-child {display: block;}
.playGet_panel .chart-slides .slides,
.playGet_panel .flex-direction-nav {margin:0 !important;}
.playGet_panel .flex-direction-nav li {margin: 0 !important; padding: 0 !important; list-style: none !important;}
.playGet_panel .flex-direction-nav .flex-prev,
.playGet_panel .flex-direction-nav .flex-next {display:inline-block; position:absolute; z-index:2; width:30px; height:30px; overflow:hidden; top:50%; margin:-15px 0 0 0; font-size:30px; line-height:1; color:#00a2ea;}
.playGet_panel .flex-direction-nav .flex-prev,
.playGet_panel .flex-direction-nav .flex-next {text-decoration:none;color:#00a2ea;}
.playGet_panel .flex-direction-nav .flex-prev {left:0;}
.playGet_panel .flex-direction-nav .flex-next {right:0;}
.playGet_panel .flex-direction-nav .flex-prev:before {font-family: 'kvFonts';content:'\e92d';}
.playGet_panel .flex-direction-nav .flex-next:before {font-family: 'kvFonts';content:'\e92e';}
.playGet_panel .flex-direction-nav .flex-prev.flex-disabled,
.playGet_panel .flex-direction-nav .flex-next.flex-disabled {display:none;}

.playGet_panel .input-style {display: inline-block; vertical-align: middle;}
.playGet_panel .input-style i {display: inline-block; border:solid 2px var(--primary); width:20px; height:20px; line-height: 1; text-align: center;}
.playGet_panel .curr .input-style i:after {display: inline-block; font-family: 'kvFonts'; content: "\e116"; font-size: 14px; line-height: 14px; font-weight:bold; color:var(--primary);}
.playGet_panel .select-vs {padding:30px 20px;}
.playGet_panel .select-vs .item {margin:5% 5% 0;}

.playGet_panel .tips_title {position: absolute; z-index: 2; top:-3px; left:-3px; display: block; width: 100px; height:100px; background: url(images/tips_bg.png) no-repeat 0 0; font-size: 16px; line-height: 1.2em; font-weight:bold; color: #fff;}
.playGet_panel .tips_title span {display: none;}

@media(max-width: 800px){
	.playGet_panel .wrap {flex-direction:column;}
	.playGet_panel *:not(.page_info) .pic {width: 100%;}
	.playGet_panel .chart .progress-item .name {width: 30%;}
}
@media(max-width: 767px){
	.playGet_panel .chart .progress-item .name {width:45%;}
	.playGet_panel .title {margin: 10px 0 20px; font-size: 14px;}
	.playGet_panel .select-vs {padding: 30px 0;}
}
@media(max-width:400px){
	.playGet_panel .chart .progress-item .name {font-size: 12px;}
	.playGet_panel .title { background-color: #00a2ea; background-image: initial;}
	.playGet_panel .select-vs .item {font-size: 12px;}
}