@charset "utf-8";
body{background:#fff;color:#000;font-size:16px;font-family:"microsoft yahei",simsun;}
a{color:#000;}
a:hover{color:#c00!important;text-decoration:none;}
.fw{color:#fff;}
.fw a{color:#fff;}
.fw a:hover{color:#dfdfdf!important;}
img{display:block;max-width:100%;max-height:100%;}
h1,h2,h3,h4,h5{overflow:hidden;font-family:"microsoft yahei",simhei;}
li,p{overflow:hidden;}
table{font-size:1em;}
.photo{position:relative;overflow:hidden;}
.photo img{width:100%;height:100%;transition:transform .2s;}
.photo:hover img{transform:scale(1.02,1.02);}
.abs{position:absolute;background-position:center center;background-size:contain;background-repeat:no-repeat;opacity:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;}
#cover{position:fixed;top:0;left:0;z-index:10000;width:100%;height:100%;background:#000;}
#cover .abs{opacity:1!important;}
#digest-video,#digest-video2{position:absolute;top:0;left:0;width:100%;height:100%;}
#digest-video2{display:none;}
#cover video{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;object-fit:cover;object-position:center center;}
#cover .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:url(/uploads/image/t2dimain/cover-bg.jpg);background-position:center center;background-size:cover;background-repeat:no-repeat;}
#cover .logo0{top: 4%;left: 2%;width: 10.8%;height: 14%;background-image:;}
#cover .topic0{top: 21%;left: 25.5%;width: 42%;height: 26%;background-image:;}


#cover .btn{position:absolute;width:10em;height:2.4em;border-radius:1.2em;background:rgba(255,255,255,.5);color:#c00;text-align:center;font-weight:700;font-size:1.1em;line-height:2.4em;opacity:0;}
#cover .btn1{top:5%;right:5%;}
#cover .btn2{bottom:8%;left:50%;margin-left:-5em;background:rgba(255,255,255,.6);font-size:1.2em;}
#cover .btn:hover{background-image:;color:#fff!important;}
#cover_play{top: 52.4%;left:44%;z-index:1000;width:11%;height:7.8%;background-image:;cursor:pointer;}
#music-btn{position:fixed;top:7.5%;right: 4%;z-index:8999;width:42px;height:4.33%;background-position:center center;background-size:contain;background-repeat:no-repeat;}
#music-btn:hover{transform:scale(1.02,1.02);}
#music-btn.music-on{background-image:;}
#music-btn.music-off{background-image:;}
#nav-btn{position:fixed;top:7.4%;left:22.5%;z-index:8999;width:4.4%;height:4.33%;background: no-repeat center center;background-size:contain;}
#nav-btn:hover{opacity:.7;}
#logo{position:fixed;top:7.4%;left:7.2%;z-index:8999;width:13.7%;height:4.33%;background: no-repeat center center;background-size:contain;}
#logo{position:fixed;}


#page{overflow-x:scroll;overflow-y:hidden;height:100%;max-height:1080px;white-space:nowrap;}
#page .roll{position:relative;display:inline-block;height:100%;vertical-align:top;}
.reel-left{position:relative;z-index:999;display:inline-block;height:100%;max-height:1080px;vertical-align:top;}
.reel-right{position:relative;z-index:990;display:inline-block;margin-left:-30px;width:15vh;height:100%;max-height:1080px;vertical-align:top;}
.reel-right i{z-index: -1;margin: 0 -30px 0 0;position:absolute;top:0;right:100%;width:100%;height:100%;background:url(/uploads/image/t2dimain/reel2-shadow.png);background-size:100% 100%;}
.reel-left2,.reel-right2{position:fixed;top:0;z-index:9100;display:inline-block;height:100%;max-height:1080px;vertical-align:top;}
.reel-left img,.reel-left2 img,.reel-right img,.reel-right2 img{height:100%;}
.reel-left2 img,.reel-right2 img{width:auto;max-width:none;}
.reel-left2{right:50%;}
.reel-right2{left:50%;}
#page .main{position:relative;display:inline-block;margin-left:-83px;height:100%; background: no-repeat left center;background-size:auto 100%;vertical-align:top;}

.headerbg{max-width: none;width: auto;height: 100%;position: relative;margin-left:70px;}
#header{position:relative;display:inline-block;overflow:hidden;height:100%;vertical-align:top;}
#header img{height:100%;max-width:none;}
#header .xhwlogo{top: 10%;left:5.2%;width: 12%;height: 8.3%;background-image:url(/uploads/image/t2dimain/header-xhwlogo.png);}
#header .dcxylogo{top: 14%;left: 25%;width: 21.8%;height: 9.5%;background-image:;}
/*#header .topic{top:24.7%;left:5.2%;width:13.1%;height:53.5%;background-image:;}*/
#header .title{top: 23%;left: 20%;width: 35%;height: 6%;background-image:;}
#header .title2{top: 30%;left: 15%;width: 40%;height: 19%;background-image:url(/uploads/image/t2dimain/header-title2.png);}
#header .text{top: 52%;left: 9.5%;width: 54%;height: 14.5%;background-image:url(/uploads/image/t2dimain/header-text.png);}
#header .note{top:79.4%;left:81.9%;width:4.8%;height:2%;background-image:url(/uploads/image/t2dimain/header-note.png);}
#continue{width:95vh;height:100%;}
#continue .a-replay img{position:absolute;top: 56%;left: 55%;height:6%;transition:left .2s;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);-ms-transform:translate(-50%,0);}
#continue .end-logo{position:absolute;top: 27%;left: 35%;height: 7%;}
#continue .end-editor{position:absolute;top: 40%;left: 38.8%;height: 8.2%;}
#continue .a-replay img:hover{left:52%;}
#continue,.chapter,.layout{position:relative;display:inline-block;vertical-align:top;white-space:normal;}


.chapter,.layout{opacity:0;}
.chapter{top: 5.75%;margin-right:2vh;margin-left:12vh;width: 13em;height: 55%;text-align:right;}
.chapter img{display:inline-block;max-width:100%;max-height:100%;vertical-align:top;}
#chapter01{margin: 0 0 0 -8vh;}

#chapter03.chapter{top: 5.65%;height: 63%;}
#chapter05.chapter,#chapter07.chapter,#chapter09.chapter,#chapter11.chapter{height: 60%;}
#chapter02,#chapter03,#chapter04,#chapter05,#chapter06.chapter,#chapter07.chapter{margin:0 1vh 0 5vh;}
#chapter06.chapter{height:52.5%;}
#chapter10.chapter,#chapter13.chapter,#chapter15.chapter{height:59%;}
#chapter08.chapter,#chapter10.chapter,#chapter11.chapter,#chapter12.chapter,#chapter13.chapter,#chapter14.chapter,#chapter15.chapter,#chapter16.chapter{margin:0 1vh 0 8vh;}
.layout{top: 10%;margin:0 9vh 0 1vh;width: 65vh;height: 80%;}
#layout02.layout{margin-left: -1vh;}
#chapter09.chapter{margin:0 1vh 0 10vh;}

#layout01 .topic{top: 55%;left: 8%;width: 78.5%;height: 18%;background-image:;}
#layout02 .topic{top: 55%;left: 7.5%;width: 85.5%;height: 16%;background-image:;}
#layout03 .topic{top: 53.5%;left: 2%;width: 90.5%;height: 15%;background-image:;}
#layout04 .topic{top: 53%;left: 7.2%;width: 84%;height: 19%;background-image:url(/uploads/image/t2dimain/topic04.png);}
#layout05 .topic{top: 50.5%;left:7.2%;width: 93%;height: 18%;background-image:url(/uploads/image/t2dimain/topic05.png);}
#layout06 .topic{top: 55%;left:4%;width: 96%;height: 16.5%;background-image:;}
#layout07 .topic{top: 53.5%;left:6.5%;width: 93.5%;height: 16.5%;background-image:;}
#layout08 .topic{top: 53%;left:6%;width: 96%;height: 17.5%;background-image:;}
#layout09 .topic{top: 50.5%;left: 5%;width: 92%;height: 17.5%;background-image:;}
#layout10 .topic{top: 49.5%;left:5.6%;width: 93%;height: 19%;background-image:url(/uploads/image/t2dimain/topic10.png);}
#layout11 .topic{top: 49.5%;left: 4%;width: 90.5%;height: 18.5%;background-image:url(/uploads/image/t2dimain/topic11.png);}
#layout12 .topic{top: 52%;left:8.4%;width: 90.5%;height: 17%;background-image:url(/uploads/image/t2dimain/topic12.png);}
#layout13 .topic{top: 57%;left:7.8%;width: 89.5%;height: 17%;background-image:url(/uploads/image/t2dimain/topic13.png);}
#layout14 .topic{top: 54%;left:5.6%;width: 94%;height: 18%;background-image:url(/uploads/image/t2dimain/topic14.png);}
#layout15 .topic{top: 52.5%;left: 5%;width: 92.5%;height: 19.5%;background-image:;}
#layout16 .topic{top: 32%;left:3%;width: 98%;height: 28%;background-image:url(/uploads/image/t2dimain/topic16.png);}



.layout .full{width: 14%;height: 3.6%;transition:margin .2s;}
.layout .full:hover{margin-left:.2em;}
#layout01 .full{top: 75%;left: 7.5%;}
#layout02 .full{top: 73%;left: 8%;}
#layout03 .full{top: 70.5%;left: 5%;}
#layout04 .full{top: 74%;left:7.2%;}
#layout05 .full{top: 71.5%;left: 7%;}
#layout06 .full{top: 74%;left:3.5%;}
#layout07 .full{top: 71.5%;left: 6.5%;}
#layout08 .full{top: 72.5%;left:6%;}
#layout09 .full{top: 70.5%;left: 5%;}
#layout10 .full{top: 70%;left: 5%;}
#layout11 .full{top: 68.5%;left: 4.5%;}
#layout12 .full{top: 71%;left: 7.5%;}
#layout13 .full{top: 76%;left: 6.5%;}
#layout14 .full{top:75%;left:5%;}
#layout15 .full{top: 74.5%;left: 5%;}
#layout16 .full{top: 76%;left:2.5%;}



.layout .full-color1{background-image:url(/uploads/image/t2dimain/full1.png);}
.layout .full-color2{background-image:;}

@media only screen and (max-width:1400px){
#cover .logo0{top: 4%;left: 2%;width: 14%;height: 10%;background-image:;}
#cover .topic0{top: 22%;left: 22%;width: 56%;height: 25%;background-image:;}
}



@media only screen and (min-height:1081px) and (max-height:1440px){
body{font-size:15px!important;}
.layout{margin: 0 -3.5vh 0 .5vh;}
#layout01 .topic{top:55%;left:3%;width:68%;height: 16.5%;}
#layout01 .full{top: 74%;left: 7%;}
#layout02 .topic{top: 52.5%;left:3%;width: 80%;height: 14.5%;}
#layout02 .full{top: 69.5%;left: 10%;}
#layout03 .topic{top: 60%;left: 7%;width: 70%;}
#layout03 .full{top: 76.5%;left: 10%;}
#layout04 .topic{top: 55%;left: 8%;width:66.5%;}
#layout04 .full{top:75.5%;left: 9%;}
#layout05 .topic{top: 55%;left: 10%;width:72%;height: 17%;}
#layout05 .full{top: 75%;left: 12%;}
#layout06 .topic{top:62%;left: 10%;width: 76%;height: 15%;}
#layout06 .full{top: 80%;left: 11%;}
#layout07 .topic{top:59%;left: 10%;width:76.5%;height: 14.8%;}
#layout07 .full{top: 77%;left: 12%;}
#layout08 .topic{top:62%;left: 12%;width: 77%;height: 15.5%;}
#layout08 .full{top: 80%;left: 13%;}
#layout09 .topic{top: 60%;left: 12%;width: 76%;height: 15.5%;}
#layout09 .full{top: 79%;left: 14%;}
#layout10 .topic{top: 62%;left: 15%;width:73.5%;height: 18%;}
#layout10 .full{top: 83%;left: 16%;}
#layout11 .topic{top: 58%;left: 12%;width: 75%;height: 15%;}
#layout11 .full{top: 76%;left: 13%;}
#layout12 .topic{top: 61%;left: 15%;width: 71%;height: 15%;}
#layout12 .full{top: 78%;left: 25%;}
#layout13 .topic{top: 60%;left: 10%;width: 74%;height: 16%;}
#layout13 .full{top: 78%;left: 11%;}
#layout14 .topic{top: 62%;left: 10%;width: 77%;height:15.5%;}
#layout14 .full{top: 80%;left: 10%;}
#layout15 .topic{top: 60.5%;left: 12%;width: 73.5%;height: 18.5%;}
#layout15 .full{top: 81%;left: 14%;}
#layout16 .topic{top: 35%;left: 0%;width: 82.5%;height: 22.5%;}
#layout16 .full{top:79%;left:4%;}
#continue{width:80vh;height:100%;}
#chapter04.chapter{margin:0 1vh 0 7.5vh;}
#chapter06.chapter,#chapter12.chapter,#chapter14.chapter{margin:0 1vh 0 0;}
#chapter02.chapter,#chapter03.chapter,#chapter07.chapter,#chapter08.chapter{margin:0 1vh 0 2vh;}
#chapter09.chapter,#chapter13.chapter,#chapter14.chapter{margin:0 1vh 0 8vh;}
}

@media only screen and (max-height:965px){body{font-size:14px!important;}
}
@media only screen and (max-height:813px){body{font-size:13px!important;}
}
@media only screen and (max-height:750px){body{font-size:12px!important;}
}
@media only screen and (max-height:688px){body{font-size:11px!important;}
}
@media only screen and (max-height:625px){body{font-size:10px!important;}
}