html{ font-size:14px }
:root{ --primary-color:#2d5f2e; --secondary-color:#f4a261; --accent-color:#e76f51; --text-color:#333; --transition:all 0.3s ease-in-out }
@keyframes scaleLoop{ 0%{transform:scale(1) }
50%{ transform:scale(1.1) }
100%{ transform:scale(1) }
}
.scaleLoop{ animation:scaleLoop 2s ease-in-out infinite }
.pulsate-fwd{ -webkit-animation:pulsate-fwd 1s ease-in-out infinite both; animation:pulsate-fwd 1s ease-in-out infinite both }
.hover-zoom{ transition:transform .5s ease }
.hover-zoom:hover{ transform:scale(1.05) }
@keyframes opacity0{ 0%{opacity:0 }
100%{ opacity:0 }
}
@-webkit-keyframes opacity0{ 0%{opacity:0 }
100%{ opacity:0 }
}
@-webkit-keyframes pulsate-fwd{ 0%{-webkit-transform:scale(1); transform:scale(1) }
50%{ -webkit-transform:scale(1.1); transform:scale(1.1) }
100%{ -webkit-transform:scale(1); transform:scale(1) }
}
@keyframes pulsate-fwd{ 0%{-webkit-transform:scale(1); transform:scale(1) }
50%{ -webkit-transform:scale(1.1); transform:scale(1.1) }
100%{ -webkit-transform:scale(1); transform:scale(1) }
}
.blink{ -webkit-animation:blink 2s ease-in-out infinite; -moz-animation:blink 2s ease-in-out infinite; -ms-animation:blink 2s ease-in-out infinite; -o-animation:blink 2s ease-in-out infinite; animation:blink 2s ease-in-out infinite }
@-webkit-keyframes blink{ 0%,100%{opacity:1 }
50%{ opacity:.6 }
}
@-moz-keyframes blink{ 0%,100%{opacity:1 }
50%{ opacity:.6 }
}
@-ms-keyframes blink{ 0%,100%{opacity:1 }
50%{ opacity:.6 }
}
@-o-keyframes blink{ 0%,100%{opacity:1 }
50%{ opacity:.6 }
}
@keyframes blink{ 0%,100%{opacity:1 }
50%{ opacity:.6 }
}
@-webkit-keyframes shake-vertical{ 0%,100%{-webkit-transform:translateY(0); transform:translateY(0) }
10%,30%,50%,70%{ -webkit-transform:translateY(-8px); transform:translateY(-8px) }
20%,40%,60%{ -webkit-transform:translateY(8px); transform:translateY(8px) }
80%{ -webkit-transform:translateY(6.4px); transform:translateY(6.4px) }
90%{ -webkit-transform:translateY(-6.4px); transform:translateY(-6.4px) }
}
@keyframes shake-vertical{ 0%,100%{-webkit-transform:translateY(0); transform:translateY(0) }
10%,30%,50%,70%{ -webkit-transform:translateY(-8px); transform:translateY(-8px) }
20%,40%,60%{ -webkit-transform:translateY(8px); transform:translateY(8px) }
80%{ -webkit-transform:translateY(6.4px); transform:translateY(6.4px) }
90%{ -webkit-transform:translateY(-6.4px); transform:translateY(-6.4px) }
}
@-webkit-keyframes pulsate-bck{ 0%{-webkit-transform:scale(1); transform:scale(1) }
50%{ -webkit-transform:scale(0.9); transform:scale(0.9) }
100%{ -webkit-transform:scale(1); transform:scale(1) }
}
@keyframes flyFromBottomLeft{ 0%{-webkit-transform:translate(-400%,100%) scale(2); transform:translate(-400%,100%) scale(2); opacity:1 }
100%{ -webkit-transform:translate(0,0) scale(1); transform:translate(0,0) scale(1); opacity:1 }
}
@-webkit-keyframes flyFromBottomLeft{ 0%{-webkit-transform:translate(-400%,100%) scale(2); transform:translate(-400%,100%) scale(2); opacity:1 }
100%{ -webkit-transform:translate(0,0) scale(1); transform:translate(0,0) scale(1); opacity:1 }
}
*{ margin:0; padding:0; box-sizing:border-box }
html{ font-size:14px }
body{ font-family:Arial,sans-serif; overflow-x:hidden; overflow-y:scroll; margin:0; padding:0 }
.PC{ display:block }
.MB{ display:none }
body{ width:100%; overflow-x:hidden; overflow-y:auto; font-size:14px }
div.cont800{ width:100%; max-width:800px; margin:0 auto; overflow:hidden; background-color:#fff; visibility:hidden; position:relative }
div.cont800 img.bg{ width:100%; max-width:800px }
div.cont1680{ width:100%; max-width:1680px; margin:0 auto; overflow:hidden; position:relative }
div.cont1680 img.bg{ width:100%; max-width:1680px }
div.cont1920{ width:100%; max-width:1920px; margin:0 auto; overflow:hidden; background-color:#fff; visibility:hidden }
div.cont1920 img.bg{ width:100%; max-width:1920px }
div#loadpage{ width:100%; height:100%; position:fixed; left:0; top:0; display:flex; align-items:center; justify-content:center }
div#loadpage svg{ width:40%; height:auto }
#scroll-down{ position:absolute; bottom:50px; left:50%; transform:translateX(-50%); width:50px; height:50px; background-color:rgba(255,255,0,.8); border-radius:50%; display:flex; justify-content:center; align-items:center; cursor:pointer; opacity:0; z-index:3 }
#scroll-down::after{ content:""; width:20px; height:20px; border-right:2px solid #000; border-bottom:2px solid #000; transform:rotate(45deg) }
#loader{ position:fixed; top:0; left:0; width:100%; height:100vh; background-color:#161616; display:flex; justify-content:center; align-items:center; z-index:9999; transition:opacity .5s ease-out }
#loader-content{ text-align:center; color:#fff }
#loader-progress{ width:200px; height:10px; background-color:#333; border-radius:5px; margin:20px auto; overflow:hidden }
#loader-bar{ height:100%; background-color:#82e70d; width:0%; transition:width .1s ease }
#loading-text{ font-size:20px; font-weight:bold; letter-spacing:4px; margin-bottom:15px }
.loading-char{ display:inline-block; animation:bounce 1.4s infinite ease-in-out both }
.loading-char:nth-child(1){ animation-delay:0s }
.loading-char:nth-child(2){ animation-delay:.16s }
.loading-char:nth-child(3){ animation-delay:.32s }
.loading-dots{ display:inline-block; margin-left:5px; background:rgba(0,0,0,0) }
.loading-dots span{ display:inline-block; animation:dotBounce 1.4s infinite ease-in-out both; width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,0) }
.loading-dots span:nth-child(1){ animation-delay:.48s }
.loading-dots span:nth-child(2){ animation-delay:.64s }
.loading-dots span:nth-child(3){ animation-delay:.8s }
@keyframes bounce{ 0%,80%,100%{transform:scale(1); opacity:.8 }
40%{ transform:scale(1.2); opacity:1 }
}
@keyframes dotBounce{ 0%,80%,100%{transform:scale(0); opacity:0 }
40%{ transform:scale(1); opacity:1 }
}
#cover{ position:fixed; width:100%; height:100vh; overflow:hidden; z-index:100; top:0; left:0 }
#video-container{ position:relative; width:100%; height:100% }
#video-background{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:opacity .5s ease }
#background-video{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:2; opacity:0; transition:opacity 1s ease }
.image-overlays{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2 }
.overlay-img{ position:absolute; opacity:0 }
#left-overlay{ left:10%; top:55%; width:70% }
#top-overlay{ top:25%; left:10%; width:50% }
#right-overlay{ right:6%; top:65%; width:30%; transform:translateY(-50%) }
#content{ min-height:100vh; background-size:100% auto; background-repeat:repeat-y; background-position:center top; padding:0px; opacity:0; pointer-events:none }
.image-container{ max-width:1680px; margin:0 auto }
.content-img{ width:100%; opacity:0; transition:opacity .8s ease }
@media(max-width:768px){ #left-overlay{left:10%; top:40%; width:70% }
#top-overlay{ top:30%; left:10%; width:50% }
#right-overlay{ left:10%; width:80% }
#scroll-down{ width:40px; height:40px }
#scroll-down::after{ width:15px; height:15px }
.content-img{ margin-bottom:20px }
}
@media screen and (max-width:765px){ .PC{display:none }
.MB{ display:block }
.tab-btn:hover:not(.active){ transform:scale(1); opacity:1; filter:brightness(100%) }
div.cont1680{ max-width:100%; width:100%; overflow-x:hidden }
div.cont1680 img.bg{ max-width:100%; width:100% }
div.cont1680 *{ max-width:100% }
}
div.show-more{ text-align:right; padding-right:10%; font-size:18px; cursor:pointer }
div.show-more a{ color:#d93835 }
.wow{ animation:fadeIn 1s .3s,opacity0 .3s 0s; -webkit-animation:fadeIn 1s .3s,opacity0 .3s 0s }
.bg.wow{ z-index:2; animation:fadeIn .3s 0s,opacity0 0s 0s; -webkit-animation:fadeIn .3s 0s,opacity0 0s 0s }
.wowUp{ animation:fadeInUp 1.5s .1s,opacity0 .1s 0s; -webkit-animation:fadeInUp 1.5s .1s,opacity0 .1s 0s }
.wowFlipinX{ animation:flipInX 1.5s .1s,opacity0 .1s 0s; -webkit-animation:flipInX 1.5s .1s,opacity0 .1s 0s }
#part1,#part2,#part3,#part4,#part5,#part6,.part7{ position:relative; width:100%; margin-left:0; background-image:url("http://www.sinopecnews.com.cn/zhuanti/img/zt2614_bg.png"); background-position:top center; background-size:100% auto; background-repeat:no-repeat }
.intro,.end,.editor{ width:80%; margin:10% auto }
.subt{ display:block; margin:2%; width:20% }
.img-wrap{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; padding:2%; margin-bottom:2% }
.img-wrap .imgwrap{ width:70%; position:relative }
.img-wrap .imgwrap .img{ width:100%; border-radius:10px; border:20px solid #dddad6; box-sizing:border-box }
.img-wrap .imgwrap .imgt{ width:auto; max-width:36% }
.img-wrap .descwrap{ z-index:10; width:30% }
.img-wrap .descwrap .imgdesc{ width:92%; margin-bottom:30px; cursor:pointer }
.img-wrap .descwrap .morebtn{ width:60%; margin-bottom:20px; cursor:pointer }
.img-wrap .morecont{ opacity:0; max-width:0; overflow:hidden; transform:translateY(-35%); transition:opacity .4s ease,max-width .4s ease,transform .4s ease }
.img-wrap .morecont.active{ opacity:1; max-width:80%; transform:translateY(-35%); transition:opacity .4s ease,max-width .4s ease,transform .4s ease }
.img-wrap.layout1 .imgwrap .img{ box-shadow:3px 3px 8px 1px rgba(128,128,128,.7215686275) }
.img-wrap.layout1 .imgwrap .imgt{ position:absolute; top:-35px; left:82%; transform:translateX(-50%) rotate(5deg) }
.img-wrap.layout1 .descwrap{ display:flex; flex-direction:column; align-items:flex-end }
.img-wrap.layout1 .descwrap .imgdesc{ transform:translateX(10%) }
.img-wrap.layout2 .imgwrap .img{ box-shadow:-3px 3px 8px 1px rgba(128,128,128,.7215686275) }
.img-wrap.layout2 .imgwrap .imgt{ position:absolute; top:-35px; left:18%; transform:translateX(-50%) rotate(-5deg) }
.img-wrap.layout2 .descwrap{ display:flex; flex-direction:column; align-items:flex-start }
.img-wrap.layout2 .descwrap .imgdesc{ transform:translateX(-10%) }
.part7{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center }
@media screen and (max-width:765px){ p{font-size:16px; text-align:center; width:90%; margin:0 auto; line-height:1.5 }
p.introtxt{ font-weight:700; margin:6% auto }
p.editor{ font-size:14px; margin:2% auto 10% auto }
.subt{ display:block; margin:2%; width:30% }
.img-wrap{ margin-bottom:5% }
.img-wrap .descwrap{ width:0% }
.img-wrap .imgwrap{ width:94% }
.img-wrap .imgwrap .img{ border:16px solid #dddad6 }
.img-wrap .imgwrap .imgt{ width:auto; max-width:46% }
.img-wrap .imgwrap p{ width:100%; margin:2% auto }
}