/*
Theme Name: TRICON
Theme URI: http://perculatheme.com/html/tricon/
Author Name: Arifa Afsana Antha
Author URI: http://perculatheme.com
Version: 1.0
*/
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
*:focus { outline: 0; }
*{margin: 0; padding: 0}
html,body { width: 100%; height: 100%; overflow: hidden; font-size: 62.5%; line-height: 1.6; font-family: 'Microsoft Yahei', sans-serif; font-weight: 400; color: #606060; background-attachment: fixed; }
img { max-width: 100%}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family:'Microsoft Yahei', 'Kaushan Script', cursive; font-weight: 400; color: #fff; letter-spacing: 0px; }
ul,ol{list-style: none;}
.fl{float: left;}.fr{float: right;}
.w1200{max-width: 1200px; margin: 0 auto; position: relative; z-index: 90}
.w1300{max-width: 1300px; margin: 0 auto; position: relative; z-index: 90}
.w1400{max-width: 1400px; margin: 0 auto; position: relative; z-index: 90}

.flowerBox{width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 20; }
.flowerBox i{ position: absolute; width: 50px; height: 50px; background-repeat: no-repeat; background-position: center; }

.huaban1{ background-image: url(huaban_1.png); width: 60px; height: 40px; }
.huaban2{ background-image: url(huaban_2.png); width: 45px; height: 30px; }
.huaban3{ background-image: url(huaban_3.png); width: 35px; height: 40px; }
.huaban4{ background-image: url(huaban_4.png); width: 35px; height: 35px; }
.huaban5{ background-image: url(huaban_5.png); width: 35px; height: 25px; }
.huaban6{ background-image: url(huaban_6.png); width: 40px; height: 20px; }
.huaban7{ background-image: url(huaban_7.png); width: 30px; height: 25px; }
.huaban8{ background-image: url(huaban_8.png); width: 15px; height: 20px; }
.huaban9{ background-image: url(huaban_9.png); width: 15px; height: 25px; }
.huaban10{ background-image: url(huaban_10.png); width: 15px; height: 20px; }
.huaban11{ background-image: url(huaban_11.png); width: 20px; height: 20px; }
.huaban12{ background-image: url(huaban_12.png); width: 20px; height: 15px; }

.loading{position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #383838; z-index: 111;}
.loading::after{content: ''; position: absolute; top: 45%; left: 50%; margin:-63px 0 0 -50px; width: 100px; height: 126px; }
.loading::after{ margin:-21px 0 0 -33px; width: 66px; height: 66px; background: url(loading2.png) center no-repeat; animation: loading 1s infinite}

#superContainer { height: 100%; position: relative; }
.section { position: relative; box-sizing: border-box; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; z-index: 10  }
.section.table { display: table; width: 100%; }
.tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
.section:after{content: '　　　Copyright © 2019 沐鸣娱乐 版权所有'; display: inline-block; position: absolute; left:50%; bottom: 25px; margin-left: -150px; text-align: center; color: #332D35; width: 300px; height: 55px; padding-top: 50px; text-shadow: 0 1px 0 #eee; background: url(logo.png) center top no-repeat; opacity: 0; animation: moveTop 0.5s 2.4s forwards }

#fullPage-nav { position: fixed; z-index: 100; margin-top: -32px; top: 45%; opacity: 1; }
#fullPage-nav.right { right: 17px; }
#fullPage-nav.left { left: 17px; }
#fullPage-nav ul { margin: 0; padding: 0; }
#fullPage-nav li { display: block; width: 12px; height: 12px; margin: 10px; position:relative; }
#fullPage-nav li a { display: block; width: 100%; height: 100%; cursor: pointer; border: 1px solid #451e01; border-radius: 50%; box-shadow: 0px 0px 1px 1px #fff; z-index: 1; }
#fullPage-nav li .active { background: #451e01; }

.section0{ background: #000; overflow: hidden;}
.section1{background-image: url(bg-1.jpg);}
.section2{background-image: url(bg-2.jpg); text-align: center; }
.section3{background-image: url(bg-3.jpg); text-align: center; }
.section4{background-image: url(bg-4.jpg); text-align: center; }
.section5{background-image: url(bg-5.jpg); text-align: center; }

.section2 .tableCell,.section3 .tableCell,.section4 .tableCell,.section5 .tableCell,.section6 .tableCell{vertical-align: top}

.video-cont{ position: relative; }
.video-cont video{ position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.text-cont{ text-align: center; }
.section0 .play{ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; cursor: pointer; z-index: 5}
.section0 .play::after{content: ''; position: absolute; top: 43.4%; left: 50%; margin-left: -35px; width: 70px; height: 70px; border: #6A2705 solid 2px; border-radius: 50%; box-shadow: 0px 0px 1px 1px #000}
.section0 .play::before{content: ''; position: absolute; top: 45%; left: 50%; margin-left: -12px; width: 0; height: 0; border-style: solid; border-width: 30px; border-top-width: 20px; border-bottom-width: 20px; border-color: transparent; border-left-color:#6A2705; }

.title-00{padding: 0; position: relative; z-index: 22; max-height: 100%;}
.title-01{margin: 60px 0 50px;}
.img-seal{width: 99px; height: 288px; line-height: 28px;  position: absolute; right: -110px; top: 210px; writing-mode: vertical-rl; color: #4D3333; padding: 15px 5px 0 0;
    letter-spacing: 5px; font-size: 16px; background: url(title_002.png) center no-repeat; z-index: 11}
.text{ font-size: 20px; line-height: 25px; color: #451e01; z-index: 33 }
.text01{ width: 800px; margin: 0 auto; padding: 20px 0; color: #611d1b; line-height: 50px; font-size: 22px; background: rgba(255,255,255,0.7); box-shadow: 0 0 10px 0 #dedcdc;}

h2{padding: 40px 0 70px; position: relative;}
h3{font-size: 33px; color: #000; font-weight: bold; margin-bottom: 30px; transform: translateY(-40px); opacity: 0;}
p{font-size: 18px; color: #222;}

.section1 h2{ transform: scale(0.2); opacity: 0  }
.section1 .img-seal{ transform: scale(3); opacity: 0; }
.section1 p,.section2 h2,.section2 p,.section3 h2,.section4 h2,.section5 h2,.section6 h2{ transform: translateY(-40px); opacity: 0; }

.section2 h1{margin-top: 100px;}
.section2 h1 .sec2-tit1{ float: left; transform: translateX(-60px); opacity: 0; }
.section2 h1 .sec2-tit2{ float: right; transform: translateX(60px); opacity: 0; }

.cont2-list{ display: inline-block; writing-mode: vertical-rl; height: 390px; text-align: left; font-size: 20px; color: #513533;  line-height: 35px; letter-spacing: 2px; }
.cont2-list dt{margin-left: 5px;}
.cont2-list dt b{ font-size: 30px; display: inline-block; padding: 10px; border-radius: 50%; color: #fff; background-color: #AD0000; position: relative; transform: translateY(-50px); opacity: 0; }
.cont2-list dd {transform: translateY(40px); opacity: 0;}
.cont2-list dd span{color:#AD0000 }

.section3 h2{ float: left; }
.section3 h2 img{max-height: 830px;}
.cont3-list{float: left; margin-left: 100px; display: inline-block; margin-top: 100px; height: 560px; writing-mode: vertical-rl; text-align: left;}
.cont3-list li{ display: inline-block; font-size: 28px; letter-spacing: 2px; color: #000; margin-left: 15px; padding-left: 5px; border-left: #5d5d5d solid 0px; transform: translateX(-30px); opacity: 0; }
.cont3-list li b{font-size: 26px; vertical-align: -3px; margin-right: 10px;}

.section4 h2{padding-top: 100px; }
.section4 dl{display: inline-block; margin: 0 20px ; font-size: 26px; }
.section4 dl dt{display: block; color: #fff; text-align: center; margin: 40px 0;}
.section4 dl dt b{display: inline-block; width: 50px; height: 50px; line-height: 48px; background: #831A1F; font-weight: normal; margin: 0 2px; border-radius: 50%; opacity: 0}
.section4 dl dd{ line-height: 2.2; letter-spacing: 1px; color: #000; transform: translateY(-40px); opacity: 0; }

.section5 h2{padding: 50px 0;}
.section5 h3{margin-bottom: 100px; }
.img-list{width: 950px; margin: 0 auto;}
.img-list li{display: inline-block; width: 130px; height: 385px; transition: width 0.3s; overflow: hidden; margin-left: -4px; position: relative; transform: translateY(-40px); opacity: 0; border-left: solid 4px transparent;}
.img-list li img{ position: absolute; top: 0; left: -87px; width: 300px; max-width: 300px; transition: left 0.3s;}
.img-list li:nth-child(1){width: 300px;}
.img-list li:nth-child(1) img{ left: 0}
.img-list:hover li{width: 130px;}
.img-list li:hover{width: 300px;}
.img-list li:hover img{ left: 0 }

.QandA{padding-left: 150px; }
.QandA p{text-align: left; font-size: 26px; margin-top: 10px; white-space: nowrap; color: #290909; transform: translateY(-40px); opacity: 0;}
.section6 p img{ transform: scale(0.2); opacity: 0 }

@media screen and (max-width: 1440px){
	.section1 h2 img {max-width: 1050px;}
	.section1 .title-01 { margin: 50px 0 40px;}
	.section1 .img-seal{right: -60px}

	.section2 h1 img{max-width: 480px;}

	.section3 .w1400{width: 1300px;}
	.section3 h2 img{max-height: 680px;}

	.section4 h2{padding: 60px 0 50px; }
	.section4 h2 img{ max-width: 1060px; }
}

.sec1_h2{ animation: imgScale 0.5s forwards}
.sec1_img{ animation: sec1_img 0.4s 0.6s ease-in forwards}
.moveDown{ animation: moveDown 0.8s 1.5s forwards}
.moveDown1{ animation: moveDown 0.6s 0.8s forwards}
.moveDown2{ animation: moveDown 0.6s 0.2s forwards}
.moveLeft li:nth-child(1){ animation: moveRight 0.5s 1s forwards}
.moveLeft li:nth-child(2){ animation: moveRight 0.5s 1.2s forwards}
.moveLeft li:nth-child(3){ animation: moveRight 0.5s 1.4s forwards; font-weight: bold;}
.moveLeft li:nth-child(4){ animation: moveRight 0.5s 1.6s forwards}
.moveLeft li:nth-child(5){ animation: moveRight 0.5s 1.8s forwards}
.moveLeft li:nth-child(6){ animation: moveRight 0.5s 2s forwards}
.moveLeft li:nth-child(7){ animation: moveRight 0.5s 2.2s forwards}

.leftRightIn .sec2-tit1{ animation: moveLeftH 0.5s 0.5s forwards }
.leftRightIn .sec2-tit2{ animation: moveRightH 0.5s 0.5s forwards }
.leftRightIn dl dt b:nth-child(1){ animation: moveDown 0.5s 0.8s forwards; z-index: 5}
.leftRightIn dl dt b:nth-child(2){ animation: moveDown 0.5s 1.1s forwards; z-index: 4}
.leftRightIn dl dt b:nth-child(3){ animation: moveDown 0.5s 1.4s forwards; z-index: 3}
.leftRightIn dl dt b:nth-child(4){ animation: moveDown 0.5s 1.7s forwards; z-index: 2}
.leftRightIn dl dd:nth-child(1){ animation: moveLeft 0.5s 2s forwards}
.leftRightIn dl dd:nth-child(2){ animation: moveLeft 0.5s 2.2s forwards}
.leftRightIn dl dd:nth-child(3){ animation: moveLeft 0.5s 2.4s forwards;}
.leftRightIn dl dd:nth-child(4){ animation: moveLeft 0.5s 2.6s forwards}
.leftRightIn dl dd:nth-child(5){ animation: moveLeft 0.5s 2.8s forwards}
.leftRightIn dl dd:nth-child(6){ animation: moveLeft 0.5s 3s forwards}
.leftRightIn dl dd:nth-child(7){ animation: moveLeft 0.5s 3.2s forwards}
.leftRightIn dl dd:nth-child(8){ animation: moveLeft 0.5s 3.4s forwards}

.section4 .fadeIn dt b:nth-child(1){ animation: fadeIn 0.5s 0.8s forwards }
.section4 .fadeIn dt b:nth-child(2){ animation: fadeIn 0.5s 1s forwards }
.section4 .fadeIn dt b:nth-child(3){ animation: fadeIn 0.5s 1.2s forwards }
.section4 .fadeIn dt b:nth-child(4){ animation: fadeIn 0.5s 1.4s forwards }
.section4 .fadeIn dt b:nth-child(5){ animation: fadeIn 0.5s 1.6s forwards }
.section4 .fadeIn dt b:nth-child(6){ animation: fadeIn 0.5s 1.8s forwards }
.section4 .fadeIn dt b:nth-child(7){ animation: fadeIn 0.5s 2s forwards }
.section4 .fadeIn dt b:nth-child(8){ animation: fadeIn 0.5s 2.2s forwards }
.section4 .fadeIn dt b:nth-child(9){ animation: fadeIn 0.5s 2.4s forwards }
.section4 .fadeIn dt b:nth-child(10){ animation: fadeIn 0.5s 2.6s forwards }
.section4 .fadeIn dd{ animation: moveDown 0.5s 2.8s forwards }

.moveDown3 li:nth-child(1),.moveDown3 p:nth-child(1){ animation: moveDown 0.5s 1s forwards}
.moveDown3 li:nth-child(2),.moveDown3 p:nth-child(2){ animation: moveDown 0.5s 1.2s forwards}
.moveDown3 li:nth-child(3),.moveDown3 p:nth-child(3){ animation: moveDown 0.5s 1.4s forwards}
.moveDown3 li:nth-child(4),.moveDown3 p:nth-child(4){ animation: moveDown 0.5s 1.6s forwards}
.moveDown3 li:nth-child(5){ animation: moveDown 0.5s 1.8s forwards}
.moveDown3 li:nth-child(6){ animation: moveDown 0.5s 2s forwards}

.imgScale{ animation: imgScale 0.7s 2s forwards}

@keyframes imgScale {
	0%   { transform: scale(0.2); opacity: 0 }
	100% { transform: scale(1); opacity: 1 }
}

@keyframes sec1_img {
	0%   { transform: scale(3); opacity: 0; }
	60% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(81, 2, 3, 0) }
	61% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(81, 2, 3, 0.5) }
	100% { transform: scale(1); opacity: 1; box-shadow: 0 0 30px 5px rgba(81, 2, 3, 0) }
}

@keyframes fadeIn {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes moveDown {
	0%   { transform: translateY(-40px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes moveDownT {
	0%   { transform: translateY(-50px); opacity: 0; }
	10%   { transform: translateY(-45px); opacity: 1; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes moveLeftH {
	0%   { transform: translateX(-60px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}
@keyframes moveRightH {
	0%   { transform: translateX(60px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}
@keyframes moveLeft {
	0%   { transform: translateX(30px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}
@keyframes moveRight {
	0%   { transform: translateX(-30px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}

@keyframes moveTop {
	0%   { transform: translateY(40px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes loading {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/*
.textView{ animation: textView 3s 0.4s steps(31) forwards}
.textView1{ animation: textView1 2.2s 0.4s steps(24) forwards}
.textView2{ animation: textView1 2.2s 1.6s steps(23) forwards}
@keyframes textView {
	0% { width: 0; }
	100%{ width: 28.8em; }
}

@keyframes textView1 {
	0% { width: 0; }
	100%{ width: 22.5em; }
}*/