/******自适应******/ /*基础---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ html,body {background-color:#000000;} } @media (max-width: 1000px){ /*Mobile*/ html,body {background-color:#000000;} } /*更多---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ /*图标*/.More-1 {fill:#FFFFFF; opacity:0.4; transition:all 0.5s linear;} a:hover .More-1 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear;} /*英文*/.More-2 {fill:#FFFFFF; opacity:0.4; transition:all 0.5s linear;} a:hover .More-2 {fill:#FF9F00; opacity:0.0; transition:all 0.5s linear;} /*中文*/.More-3 {fill:#FFFFFF; opacity:0.0; transition:all 0.5s linear;} a:hover .More-3 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear;} } @media (max-width: 1000px){ /*Mobile*/ /*图标*/.More-1 {fill:#FFFFFF; opacity:0.4; transition:all 0.5s linear;} a:hover .More-1 {fill:#FF9F00; opacity:1.4; transition:all 0.5s linear;} /*英文*/.More-2 {fill:#FFFFFF; opacity:0.0; transition:all 0.5s linear;} a:hover .More-2 {fill:#FFFFFF; opacity:0.0; transition:all 0.5s linear;} /*中文*/.More-3 {fill:#FFFFFF; opacity:0.4; transition:all 0.5s linear;} a:hover .More-3 {fill:#FF9F00; opacity:1.4; transition:all 0.5s linear;} } /*音乐---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ /*图标*/.music-1 {fill:#FFFFFF; opacity:0.4; transition:all 0.5s linear;} a:hover .music-1 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear;} /*英播*/.music-2 {fill:#FFFFFF; opacity:0.4; transition:all 0.5s linear;} a:hover .music-2 {fill:#FF9F00; opacity:0.0; transition:all 0.5s linear;} /*中播*/.music-3 {fill:#FFFFFF; opacity:0.0; transition:all 0.5s linear;} a:hover .music-3 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear;} /*图标*/.music-4 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear;} a:hover .music-4 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear;} /*英停*/.music-5 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear;} a:hover .music-5 {fill:#FF9F00; opacity:0.0; transition:all 0.5s linear;} /*中停*/.music-6 {fill:#FF9F00; opacity:0.0; transition:all 0.5s linear;} a:hover .music-6 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear;} } @media (max-width: 1000px){ /*Mobile*/ /*图标*/.music-1 {fill:#FFFFFF; opacity:0.4; transition:all 0.5s linear;} a:hover .music-1 {fill:#FF9F00; opacity:1.4; transition:all 0.5s linear;} /*英播*/.music-2 {fill:#FFFFFF; opacity:0.0; transition:all 0.5s linear;} a:hover .music-2 {fill:#FFFFFF; opacity:0.0; transition:all 0.5s linear;} /*中播*/.music-3 {fill:#FFFFFF; opacity:0.4; transition:all 0.5s linear;} a:hover .music-3 {fill:#FF9F00; opacity:1.4; transition:all 0.5s linear;} /*图标*/.music-4 {fill:#FF9F00; opacity:1.4; transition:all 0.5s linear;} a:hover .music-4 {fill:#FF9F00; opacity:1.4; transition:all 0.5s linear;} /*英停*/.music-5 {fill:#FFFFFF; opacity:0.0; transition:all 0.5s linear;} a:hover .music-5 {fill:#FFFFFF; opacity:0.0; transition:all 0.5s linear;} /*中停*/.music-6 {fill:#FF9F00; opacity:1.4; transition:all 0.5s linear;} a:hover .music-6 {fill:#FF9F00; opacity:1.4; transition:all 0.5s linear;} } /*详情---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ #Photo {width:200px; height:200px; right:400px; margin-right:-100px; top:50%; margin-top:-300px; opacity:1.0; position:absolute; overflow:hidden; z-index:99; display:none; border:5px solid #FFFFFF; border-radius:50%; background-image:url('Photo.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat;} #Name {width:600px; right:100px; margin-right:0px; top:50%; margin-top:-75px; opacity:1.0; position:absolute; overflow:hidden; z-index:99; display:none;} #Text {width:500px; right:25%; margin-right:-250px; top:50%; margin-top:-93px; opacity:1.0; position:absolute; overflow:hidden; z-index:99; display:none;} .Name {font-size:40px; color:#FFFFFF; opacity:0.4; text-decoration:none; transition:all 0.5s linear;} .Text {font-size:18px; color:#FFFFFF; opacity:0.4; text-decoration:none; transition:all 0.5s linear;} } @media (max-width: 1000px){ /*Mobile*/ #Photo {width:400px; height:400px; right:50%; margin-right:-200px; top:25%; margin-top:-230px; opacity:1.0; position:absolute; overflow:hidden; z-index:99; display:none; border:8px solid #F0F0F0; border-radius:50%; background-image:url('Photo.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat;} #Name {width:100%; left:0%; margin-left:0px; top:25%; margin-top:260px; opacity:1.0; position:absolute; overflow:hidden; z-index:99; display:none;} #Text {width:100%; left:0%; margin-left:0px; top:50%; margin-top:0px; opacity:1.0; position:absolute; overflow:hidden; z-index:99; display:none;} .Name {font-size:100px; color:#FFFFFF; opacity:0.4; text-decoration:none; transition:all 0.5s linear;} .Text {font-size:32px; color:#FFFFFF; opacity:0.4; text-decoration:none; transition:all 0.5s linear;} } /*标志---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ #Logo {width:410px; height:220px; left:75%; margin-left:-205px; top:50%; margin-top:-290px; opacity:1.0; position:absolute; overflow:hidden; z-index:97; display:none;/**/} .Logo {width:410px; height:220px; display:inline;} .Logo-1 {fill:#111111; opacity:0.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Logo-1 {fill:#111111; opacity:0.0; transition:all 0.5s linear; fill-rule:nonzero;} .Logo-2 {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Logo-2 {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} .Logo-3 {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Logo-3 {fill:#FDC134; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} #LogoBoxC {width:300px; height:157px; left:75%; margin-left:-225px; top:50%; margin-top:-228.5px; opacity:1.0; position:absolute; overflow:hidden; z-index:98; display:none;/**/ background-color:#000000; -webkit-mask-image: url('logoc.svg'); mask-image:url('logoc.svg'); /*进行视频裁剪*/} #LogoBoxC-Background {width:100%; height:100%; position:absolute; overflow:hidden; object-fit:cover; /*保证视频内容始终居中*/} #LogoBoxM {width:500px; height:262px; left:50%; margin-left:-250px; top:25%; margin-top:-11px; opacity:1.0; position:absolute; overflow:hidden; z-index:98; display:none;/**/ background-color:#000000; -webkit-mask-image: url('logom.svg'); mask-image:url('logom.svg'); /*进行视频裁剪*/} #LogoBoxM-Background {width:100%; height:100%; position:absolute; overflow:hidden; object-fit:cover; /*保证视频内容始终居中*/} } @media (max-width: 1000px){ /*Mobile*/ #Logo {width:820px; height:440px; left:50%; margin-left:-410px; top:25%; margin-top:00px; opacity:1.0; position:absolute; overflow:hidden; z-index:97; display:none;/**/} .Logo {width:820px; height:440px; display:inline;} .Logo-1 {fill:#111111; opacity:0.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Logo-1 {fill:#111111; opacity:0.0; transition:all 0.5s linear; fill-rule:nonzero;} .Logo-2 {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Logo-2 {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} .Logo-3 {fill:#FDC134; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Logo-3 {fill:#FDC134; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} #LogoBoxC {width:300px; height:157px; left:75%; margin-left:-225px; top:50%; margin-top:-228.5px; opacity:1.0; position:absolute; overflow:hidden; z-index:98; display:none;/**/ background-color:#000000; -webkit-mask-image: url('logoc.svg'); mask-image: url('logoc.svg'); /*进行视频裁剪*/} #LogoBoxC-Background {width:100%; height:100%; position:absolute; overflow:hidden; object-fit:cover; /*保证视频内容始终居中*/} #LogoBoxM {width:500px; height:262px; left:50%; margin-left:-250px; top:25%; margin-top:-11px; opacity:1.0; position:absolute; overflow:hidden; z-index:98; display:none;/**/ background-color:#000000; -webkit-mask-image: url('logom.svg'); mask-image: url('logom.svg'); /*进行视频裁剪*/} #LogoBoxM-Background {width:100%; height:100%; position:absolute; overflow:hidden; object-fit:cover; /*保证视频内容始终居中*/} } /*Hi-domain---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ #Hi-domain {width:300px; height:157px; left:75%; margin-left:-225px; top:50%; margin-top:-228.5px; position:absolute; overflow:hidden; z-index:97; opacity:1.0; /*display:none;*/} .Hi-domain {width:300px; height:157px; display:inline;} .Hi-domain-1 {fill:#111111; opacity:0.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Hi-domain-1 {fill:#111111; opacity:0.0; transition:all 0.5s linear; fill-rule:nonzero;} .Hi-domain-2 {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Hi-domain-2 {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} .Hi-domain-3 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Hi-domain-3 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} } @media (max-width: 1000px){ /*Mobile*/ #Hi-domain {width:500px; height:262px; left:50%; margin-left:-250px; top:25%; margin-top:90px; position:absolute; overflow:hidden; z-index:97; opacity:1.0; /*display:none;*/} .Hi-domain {width:500px; height:262px; display:inline;} .Hi-domain-1 {fill:#111111; opacity:0.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Hi-domain-1 {fill:#111111; opacity:0.0; transition:all 0.5s linear; fill-rule:nonzero;} .Hi-domain-2 {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Hi-domain-2 {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} .Hi-domain-3 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} a:hover .Hi-domain-3 {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear; fill-rule:nonzero;} } /*按钮---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ /*常显*/.Button-A {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear;} a:hover .Button-A {fill:#FF9F00; opacity:0.0; transition:all 0.5s linear;} /*触碰*/.Button-B {fill:#FFFFFF; opacity:0.0; transition:all 0.5s linear;} a:hover .Button-B {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear;} } @media (max-width: 1000px){ /*Mobile*/ /*常显*/.Button-A {fill:#FFFFFF; opacity:1.0; transition:all 0.5s linear;} a:hover .Button-A {fill:#FF9F00; opacity:0.0; transition:all 0.5s linear;} /*触碰*/.Button-B {fill:#FFFFFF; opacity:0.0; transition:all 0.5s linear;} a:hover .Button-B {fill:#FF9F00; opacity:1.0; transition:all 0.5s linear;} } /*促销---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ .Money-2 {fill:#FFFFFF; opacity:0.4; fill-rule:nonzero;} } @media (max-width: 1000px){ /*Mobile*/ .Money-2 {fill:#FFFFFF; opacity:0.4; fill-rule:nonzero;} } /*自述---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ .Readme {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none; text-indent:24px;} } @media (max-width: 1000px){ /*Mobile*/ .Readme {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none; text-indent:24px;} } /*版权---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ .Rights {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} .Rights a {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} .Rights a:link {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} .Rights a:visited {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} .Rights a:active {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} .Rights a:hover {color:#FFFFFF; opacity:1.0; transition:all 0.5s linear; font-size:12px; text-decoration:none;} } @media (max-width: 1000px){ /*Mobile*/ .Rights {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} .Rights a {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} .Rights a:link {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} .Rights a:visited {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} .Rights a:active {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} .Rights a:hover {color:#FFFFFF; opacity:1.0; transition:all 0.5s linear; font-size:20px; text-decoration:none;} } /*声明---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ .Statement {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} .Statement a {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} .Statement a:link {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} .Statement a:visited {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} .Statement a:active {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} .Statement a:hover {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:12px; text-decoration:none;} } @media (max-width: 1000px){ /*Mobile*/ .Statement {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} .Statement a {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} .Statement a:link {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} .Statement a:visited {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} .Statement a:active {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} .Statement a:hover {color:#FFFFFF; opacity:0.4; transition:all 0.5s linear; font-size:20px; text-decoration:none;} } /*背景---------------------------------------------------------------------*/ @media (min-width: 1000px){ /*Computer*/ #Background {width:100%; height:100%; left:0%; opacity:1.0; position:absolute; overflow:hidden; z-index:1; display:none;/**/ background-image:url('http://get.cangdao.com/img/background/004C.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;} #BackgroundAuto {width:50%; height:100%; left:0%; opacity:1.0; position:absolute; overflow:hidden; z-index:2; display:none;/**/} #Dot {width:50%; height:100%; opacity:1.0; position:absolute; overflow:hidden; z-index:3; display:none;/**/ background-image:url('http://get.cangdao.com/img/dot.svg'); background-position:center;} #Shading {width:50%; height:100%; left:50%; opacity:0.8; position:absolute; overflow:hidden; z-index:4; display:none;/**/ background-image:url('http://get.cangdao.com/img/shading.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;} #Container {width:100%; height:100%; left:0%; opacity:0.5; position:absolute; overflow:hidden; z-index:5; display:none;/**/ background-color:#000000;} #VideoBox {width:100%; height:100vh; opacity:1.0; position:relative; overflow:hidden; z-index:2; /*display:none;*/ background-color:#000000; /*进行视频裁剪*/} #VideoBox-Background {width:100%; height:100%; left:50%; top:50%; position:absolute; overflow:hidden; transform:translate(-50%, -50%); object-fit:cover; /*min-height:800px; 保证视频内容始终居中*/} } @media (max-width: 1000px){ /*Mobile*/ #Background {width:100%; height:100%; top:0%; opacity:1.0; position:absolute; overflow:hidden; z-index:1; display:none;/**/ background-image:url('http://get.cangdao.com/img/background/004C.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;} #BackgroundAuto {width:100%; height:100%; left:0%; opacity:1.0; position:absolute; overflow:hidden; z-index:2; display:none;/**/} #Dot {width:100%; height:50%; top:50%; opacity:1.0; position:absolute; overflow:hidden; z-index:3; display:none;/**/ background-image:url('http://get.cangdao.com/img/dot.svg'); background-position:center;} #Shading {width:100%; height:50%; top:50%; opacity:0.5; position:absolute; overflow:hidden; z-index:4; display:none;/**/ background-image:url('http://get.cangdao.com/img/shading.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;} #Container {width:100%; height:100%; top:0%; opacity:0.5; position:absolute; overflow:hidden; z-index:5; display:none;/**/ background-color:#000000;} #VideoBox {width:100%; height:100vh; opacity:1.0; position:relative; overflow:hidden; z-index:2; /*display:none;*/ background-color:#000000; /*进行视频裁剪*/ } #VideoBox-Background {width:100%; height:100%; left:50%; top:50%; position:absolute; overflow:hidden; transform:translate(-50%, -50%); object-fit:cover; /*min-height:800px; 保证视频内容始终居中*/} }