@charset "utf-8";
html{height: 100%;overflow: hidden;}
body{background: url(../images/preview_bg.jpg) no-repeat;background-size: 100% 100%;}
.topBox{background: #303030;}
.topBox h3{color: #fff;font-size: 16px;font-weight: normal;line-height: 70px;text-align: center;}
.foot_linksbg,
.footbg{display: none;}
.hide_setting {position:absolute;top:0;width:106px;height:16px;overflow:hidden;z-index:9031;left:50%;margin-left:-53px}
.hide_setting .hide_setting_col {display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#666;transition: all .5s;cursor:pointer;border-radius:0 0 16px 16px;}
.hide_setting .hide_setting_col:hover {background-color:#0076db;}
.hide_setting .hide_setting_col i{position: relative;width:12px;height:12px;fill:#ccc;transition:all .3s;transform: rotate(90deg);}
.hide_setting .hide_setting_col i:after{content:" ";position: absolute;top: 3px;left: 1px;width: 6px;height: 6px;border: 1px solid #fff;border-style: solid solid none none;transform: rotate(45deg);}
.hide_setting .hide_setting_col.hidden i{transform: rotate(-90deg);}
.top_left{position: absolute;top: 25px;left: 150px;display: flex;align-items: center;}
.terminal_select div{width: 22px;height: 20px;float:left;margin-right: 10px;background: url(../images/btn.png) no-repeat;filter: grayscale(100%) brightness(100%);cursor:pointer;transition: all .5s;}
.terminal_select div.active, .terminal_select div:hover{filter: none;}
.terminal_select .padImg{background-position: -22px 0;}
.terminal_select .phoneImg{margin-right: 0;background-position: -44px 0;}
.model_type {margin-left:25px;}
.model_type .type_name{float:left;color:#999;font-size:14px;}
.return{position: absolute;top: 0;right: 260px;width: 70px;height: 70px;}
.return i{display: block;width: 20px;height: 20px;margin: 25px;background: url(../images/btn.png) right no-repeat;filter: grayscale(100%) brightness(100%);transition: all .5s;}
.return:hover i{filter: none;}

.cw_index_content {width:100%;height: calc(100vh - 70px) !important;position:relative;max-width:100%;transition: all .5s;}
.cw_index_content .pc_content_preview {width:100%;height:100%;display:block;}
.cw_index_content .pc_content_preview > iframe {border:none;}
.cw_index_content .pc_content_preview img {max-width:100%;}
.cw_index_content .content_preview {width:400px;height:calc(100% - 200px);position:relative;top:50%;left:0;right:0;bottom:0;margin:auto;max-height:650px;transform:translateY(-50%);transition: all 0.5s ease 0s;}
.cw_index_content .content_preview .header {position:relative;top: -49px;width:100%;height: 50px;background:#f4f5f7;border-radius: 30px 30px 0 0;}
.cw_index_content .content_preview .header .header_icon {position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:50px;height:10px;border-radius:10px;background:#ccc;}
.cw_index_content .content_preview .header .header_icon:before{content: " ";position: absolute;left: -20px;width: 10px;height: 10px;border-radius: 50%;background: #333;}
.cw_index_content .content_preview .content {width:400px;overflow:hidden;max-height:100%;height:100%;background-color: #f4f5f7;position:relative;top: -50px;padding: 0 10px;box-sizing: border-box;transition: all 0.5s ease 0s;}
.cw_index_content .content_preview .content iframe{border-radius: 10px;}
.cw_index_content .content_preview .footer {position:relative;top: -51px;width:100%;height: 50px;background:#f4f5f7;border-radius: 0 0 30px 30px;}
.cw_index_content .content_preview .footer .footer_icon {position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:30px;height:30px;border-radius:100%;background:#ccc;border: 1px solid #adadad;}
.cw_index_content .content_preview.pad{width: 600px;max-height: 800px;}
.cw_index_content .content_preview.pad .content{width: 600px;}
.phone_content_preview {height:100%;display:none;}
@media screen and (max-width:1024px){
.topBox{display:none;}
.cw_index_content {width:100%;}}
@media only screen and (max-width:1366px) {
.cw_index_content .content_preview,
.cw_index_content .content_preview.pad{max-height: calc(100% - 120px) !important;}}
@media only screen and (min-width:1367px) and (max-width:1900px) {
.cw_index_content .content_preview {height: calc(100% - 120px) !important;}}