@charset "utf-8";
*,
*:before,
*:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
nav *,nav *:before,nav *:after {box-sizing: content-box;}
.nav-mobile,.nav-mobile .nav_menu{box-sizing: content-box;}
  
a,
a:link,
a:visited {
	color: inherit;
	text-decoration: none;
}
a:active,
a:hover {
	color: inherit;
	text-decoration: none;
}
  
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}
ul,
ol,
li {
	list-style-type: none;
}
dl,
dt,
dd {
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
	padding: 0;
}
ul{
	list-style: none;
}
img {
	border: 0;
	line-height: 0;
	vertical-align: middle;
}
svg {
	vertical-align: bottom;
}
em {
	font-weight: bold;
	font-style: normal;
}
label {
	margin: 0;
	padding: 0;
}
address {
	font-style: normal;
}
body {
	margin: 0;
	padding: 0;
	font-weight: 400;
	line-height: 150%;
	-webkit-font-smoothing: antialiased;
	color: #121212;
	background: #ffffff;
}
html, body { scroll-behavior:smooth; }
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

common

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.clear {display: block;clear: both;}
.flex01::after{content: '';display:block;clear: both;}
.details, .container {width: 1200px;margin: 0 auto;}
.download {margin-top: 30px;}
.download a {display: inline-block;padding: 20px 15px;background-color: #77c240;background-image: linear-gradient(to right, #63ba27, #82c74d);
	border-radius: 5px;font-size: 21px;color: #ffffff;}
.download a>img{margin-left: 10px;vertical-align: text-bottom;}

.mobile-email {display: none;}
.mobile-email .more{ font-size: 13px; line-height: 1.5;margin-top: 15px;}
.mobile-email input{display: inline-block;width: 300px;height: 50px;border: 1px solid #3398ff;border-radius: 5px;padding: 0 15px;margin: 10px;background-color: #ffffff;}
.mobile-email button{display: inline-block;width: 300px;height: 50px;border-radius: 5px;line-height: 50px;color: #ffffff;font-size: 21px;margin: 10px;
	background-color: #77c240;background-image: linear-gradient(to right, #63ba27, #82c74d);}
.mobile-email .t{font-size: 17px; font-weight: bold;text-align: center;color: #80807d;}
.mobile-email .t2{text-align: center;color: #494949;}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

top-banner

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.top-banner nav { background: transparent; text-align:left;}
.top-banner nav.active{ background:#fff;}
.top-banner nav ul{ color:#f2f2f2;}
.top-banner nav ul li a{color:#f2f2f2;} 
.top-banner nav ul li a:hover{color:#1c9cea;}
.top-banner nav.active ul,.top-banner nav.active ul li a{ color:#404040;}
.top-banner nav ul li.have-list{background-image: url(../../img/nav-iocn21-06.png); }
.top-banner nav ul li:nth-child(1){ background-image:url(../../img/nav-iocn21-05.png);}

.top-banner nav.active ul li.have-list{background-image: url(../../img/nav-iocn21-02.png); }
.top-banner nav.active ul li:nth-child(1){ background-image:url(../../img/nav-iocn21-01.png);}

.top-banner nav ul li.have-list:hover,.top-banner nav ul li.have-list.focus{background-image: url(../../img/nav-iocn21-03.png); }
.top-banner nav ul li:nth-child(1):hover,.top-banner nav ul li.focus:nth-child(1){ background-image:url(../../img/nav-iocn21-04.png);}





.top-banner {background: url("../images/contest-action-video/bg1.jpg")no-repeat center top #134b55;background-size: cover;height: 660px;}
.top-banner .container{text-align: center;}
.top-banner .Logo img{max-width: 100%;}
.newDivNav ul li:nth-child(1)::after {color: #5c6769;height: 15px;top:50%;transform: translateY(-50%);}
.newDivNav .drop-down-menu a{line-height: 15px;}
.top-banner h1 {font-size: 37px;line-height: 48px;font-weight: 600;color: #ffffff;margin: 40px 0 15px;}
.top-banner .sub-title {font-size: 21px;line-height: 32px;color: #10c4d4;}
.top-banner .video {width: 712px;height: 400px;margin: 50px auto;background-color: #ffffff;border-radius: 10px;overflow: hidden;position: relative;}
.top-banner .cover-video{height:100%;}
.top-banner .product .product-logo{margin: 20px 0;}
.top-banner .product h2{font-size: 37px;line-height: 48px;color: #ffffff;font-weight: 600;margin-bottom: 10px;} 
.top-banner .product p{font-size: 19px;line-height: 30px;color: #dadada;padding: 0 100px;} 
.top-banner .product .anchor{margin: 15px 0;}
.top-banner .product .anchor a{color: #3398ff;font-size: 17px;display: inline-block;margin: 0 10px;}
.top-banner .more {margin-top: 15px;}
.top-banner .more a{color: #0759aa;font-size: 17px;border-bottom: 1px dotted;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

sidebar

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.sidebar {width: 240px;height: 260px;border: 1px solid #dcdcdc;border-radius: 5px;background: rgba(255, 255, 255, 0.6);padding: 30px;position: fixed;top: 295px;right: 50px;}
.sidebar h5 {font-size: 17px;line-height: 26px;font-weight: 600;margin-bottom: 15px;}
.sidebar ul {border-left: 1px solid #c8c8c8;}
.sidebar ul li{position: relative;padding-left: 15px;height: 30px;line-height: 30px;}
.sidebar ul li::before{content: '';display: inline-block;width: 7px;height: 7px;border-radius: 50%;background-color: #a3a3a3;position: absolute;left: -4px;top:50%;transform: translateY(-50%);}
.sidebar ul li.active{color: #359cfe;}
.sidebar ul li.active::before{width: 0;height: 0;border: 5px solid transparent;border-top-color: #359cfe;border-radius: 0;background-color: transparent;left: -5px;top:60%;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

motion

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.motion {background: url("../images/contest-action-video/bg2.jpg")no-repeat center top;background-size: cover;height: 924px;text-align: center;padding: 30px 0 50px;}
.motion .sub-des {width: 900px;font-size: 19px;line-height: 30px;color: #545454;margin: 0 auto;}
.motion h3 {font-size: 27px;line-height: 40px;color: #000000;margin: 15px 0;}
.motion .step {width: 975px;margin: 0 auto;}
.motion .step ul{display: flex;justify-content: space-between;align-items: flex-end;}
.motion .step ul li{width: 270px;height: 330px;background: #ffffff;border-radius: 10px;position: relative;box-shadow:0px 0px 15px #e1dfe3;padding: 25px;}
.motion .step ul li::after{content: '';display: inline-block;border: 12px solid transparent;position: absolute;right: -32px;top: 50%;transform: translateY(-50%);border-left-color: #ffffff;border-left-width: 20px;}
.motion .step ul li:last-of-type::after{display: none;}
.motion .step ul li.active{width: 370px;height: 370px;}
.motion .step ul li.complete{background: linear-gradient(120deg, #d3c7fe, #ac9bff 100%);}
.motion .step ul li.complete p{color: #ffffff;}
.motion .step ul li.complete h5{border-color: #e9deff;}
.motion .step ul li.complete::after{border-left-color: #b7a4ff;}

.motion .step ul li h5{padding-bottom: 25px;border-bottom: 1px solid #d9d9d9;margin-bottom: 30px;}
.motion .step ul li h5>i{font-style: normal;font-size: 27px;display: block;font-weight: 600;color: #1c2026;}
.motion .step ul li h5>span{display: block;font-size: 21px;line-height: 32px;}
.motion .step ul li p{font-size: 17px;line-height: 26px;color: #3f3f3f;}
.motion .step ul li a{color:#359cfe; display: inline-block;border-bottom: 1px dotted;text-decoration: none;}
.motion .step ul li .more{font-size: 15px;line-height: 24px;color: #888888;position: absolute;bottom: 20px;left: 0;right: 0;}
.motion .step ul li .more a{display: inline-block;color: #359cfe;border-bottom: 1px dotted;text-decoration: none;}
.motion .step ul li.active.complete .more{color:#eee;}
.motion .step ul li.active.complete .more a, .motion .step ul li.complete a{color:#3293f0; display: inline-block; border-bottom: 1px dotted;text-decoration: none;}

.motion .link-email{margin-top: 30px;}
.motion .link-email input{display: inline-block;border: 1px solid #cdcdcd;width: 340px;height: 50px;border-radius: 25px;background: rgba(255, 255, 255, 0.8);padding: 0 25px;margin: 0 30px;}
.motion .link-email button{display: block;width: 348px;height: 100px;line-height: 108px;background: url("../images/contest-action-video/link-email.png")no-repeat center;color: #ffffff;font-size: 21px;padding-left: 80px;margin: 30px auto;cursor: pointer;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

map

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.map {padding: 50px 0;text-align: center;}
.map h2{font-size: 45px;line-height: 56px;color: #000000;font-weight: 600;margin-bottom: 50px;}
.map h4{font-size: 27px;line-height: 40px;color: #000000;font-weight: 600;margin-bottom: 15px;}
.map p{font-size: 17px;line-height: 26px;color: #121212;margin: 15px 0;width: 400px;position: relative;text-align: left;}
.map p>a{display: block;color: #359cfe;text-decoration: underline;}
.map p.false, .map p.true{padding-left: 30px;}
.map p.false::before{content: '';display: inline-block;width: 15px;height: 15px;background: url("../images/contest-action-video/icon-false.png")no-repeat center;position: absolute;left: 0;top: 7px;}
.map p.true::before{content: '';display: inline-block;width: 15px;height: 15px;background: url("../images/contest-action-video/icon-true.png")no-repeat center;position: absolute;left: 0;top: 7px;}
.map span{display: block;font-size: 21px;line-height: 32px;text-align: left;}
.map i{font-style: normal;color: #2e90ff;}
.map .wrap{padding: 50px 0;width: 950px;margin: 0 auto;}
.map .wrap02{width: 950px;margin: 0 auto;padding-top: 30px;}
.map .wrap02-des{font-size: 17px;line-height: 26px;margin: 15px 0 30px;padding: 0 100px;}
.map .flex01{display: flex;justify-content: space-between;align-items: flex-end;}
.map .flex02{display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 30px;}
.map .item{width: 400px;text-align: left;}
.map .item1 img{position: relative;left: -80px;bottom: -50px;}
.map .item2 img{position: relative;left: 30px;top: 30px;}
.map .item3 img{position: relative;left: 80px;top: 50px;}
.map .item4 img{position: relative;left: -120px;bottom: 30px;}
.map .item5 img{position: relative;left: -50px;top: 50px;}
.map .map-anchor{display:inline-block; color:inherit; border-bottom:1px dotted; text-decoration:none;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

prize

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.prize {padding: 50px 0;text-align: center;}
.prize h2{background-image: linear-gradient(to bottom, #2ddfff, #336bff, #b53dff);-webkit-background-clip:text;color: transparent;font-size: 37px;line-height: 48px;font-weight: 600;margin-bottom: 30px;}
.prize .prize-box {width: 1100px;height: 550px;display: flex;justify-content: space-around;align-items: flex-start;padding: 50px 30px;text-align: left;
	background: url("../images/contest-action-video/prize-top.png")no-repeat top right, url("../images/contest-action-video/prize-bottom.png")no-repeat bottom left #f6dcb1;border-radius: 10px;}
.prize .left {width: 550px;}
.prize .left p{font-size: 15px;line-height: 24px;color: #504c41;}
.prize .left p a{display: inline-block;color: inherit;border-bottom: 1px dotted;text-decoration: none;}
.prize .right p{font-size: 15px;line-height: 24px;color: #968569;padding-left: 30px;}
.prize .left .upper{font-size: 17px;line-height: 26px;color: #eb6530;margin-top: 15px;}
.prize .addthis-share{margin: 20px 0 0 80px;}
.prize .addthis-share a{margin: 0 10px;}
.prize .prize-des {background-color: #ffffff;border-radius: 10px;padding: 30px;margin: 30px 0;}
.prize .prize-des h5{font-size: 21px;line-height: 32px;color: #866641;margin-bottom: 15px;}
.prize .prize-des p{color: #504c41;text-align: justify;}
.prize .prize-des .btn-how {margin-top: 15px;}
.prize .prize-des .btn-how a{display: inline-block;width: 150px;height: 40px;line-height: 40px;font-size: 17px;
	background-image: linear-gradient(to right, #ff7b51, #ff926f);text-align: center;border-radius: 20px;color: #fff;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

tips

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.tips {background: #f3f5f9;padding: 50px 0;}
.tips h2{background-image: linear-gradient(to bottom, #2ddfff, #336bff, #b53dff);-webkit-background-clip:text;color: transparent;font-size: 37px;line-height: 48px;text-align: center;font-weight: 600;}
.tips ul li{padding: 25px 0;border-bottom: 1px solid #cdcdcd;}
.tips ul li:last-of-type{border: none;}
.tips ul li h5{font-size: 19px;list-style: 30px;margin-bottom: 15px;}
.tips ul li p{font-size: 15px;list-style: 24px;}
.tips .tips-more a{font-size: 17px;color: #359cfe;text-decoration: underline;}


@media (max-width:979px) {
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

common

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.download a {font-size: 1.1rem;}
.details, .container {width: 100%;margin: 0 auto;padding: 0 15px;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

top-banner

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.top-banner {padding: 0 0 30px;height: auto;}
.top-banner h1 {margin: 10px 0 0; font-size: 1.51rem;line-height: 2.1rem;}
.top-banner .sub-title {font-size: 1.0625rem;line-height: 1.625rem;}
.top-banner .video {width: 100%;height: 0px; position: relative;padding-bottom: 56.25%;margin: 30px auto;}
.top-banner .cover-video iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.top-banner .video img{width: auto;height: auto;}
.top-banner .product h2{font-size: 1.3425rem;line-height: 2rem;} 
.top-banner .product p{padding: 0;font-size: 0.9375rem;line-height: 1.5rem;} 
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

motion

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.motion {padding: 30px 0;height: auto;background: #f8f5f0;}
.motion .sub-des {width: 100%;font-size: 1.0625rem;line-height: 1.625rem;margin: 0;}
.motion h3 {font-size: 1.2rem;line-height: 1.8rem;margin: 15px 0;}
.motion .step {width: 100%;}
.motion .step ul{flex-wrap: wrap;align-items: center;}
.motion .step ul li.active{width:35%;}
.motion .step ul li{margin: 20px 0;width: 30%;height: auto;}
.motion .step ul li p{font-size: 1.0625rem;line-height: 1.625rem;}
.motion .link-email{margin-top: 0;}
.motion .link-email input{margin: 10px 0;}
.motion .link-email button{margin: 0 auto;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

map

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.map {padding: 30px 0 0;}
.map h2{font-size: 1.3425rem;line-height: 2rem;}
.map img{max-width: 100%;height: auto;}
.map h4{font-size: 1.2rem;line-height: 1.8rem;}
.map p{font-size: 0.9375rem;line-height: 1.5rem;max-width: 100%;width: auto;}
.map .wrap{width: 100%; padding: 15px 0;}
.map .wrap02{width: 100%;padding-top: 0;}
.map .wrap02-des{padding: 0; font-size: 0.9375rem;line-height: 1.5rem;}
.map .flex01{flex-wrap: wrap;justify-content: center;}
.map .flex02{justify-content: space-around;}
.map .flex02 > div{width:45%;}
.map .item{max-width: 100%;}
.map .item1 img{left: 0;bottom: 0;}
.map .item2 img{left: 0;top: 0;}
.map .item3 img{left: 0;top: 0;}
.map .item4 img{left: 0;bottom: 0;}
.map .item5 img{left: 0;top: 0;}
.map .order1{order:1;}
.map .order2{order:2;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

prize

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.prize {padding: 30px 0;}
.prize img{max-width: 100%;}
.prize h2{font-size: 1.51rem;line-height: 2.1rem;}
.prize .prize-box {width: 100%;height: auto;flex-wrap: wrap;justify-content: center;padding: 30px 15px;}
.prize .left {width: 100%;}
.prize .left p{font-size: 0.9375rem;line-height: 1.5rem;}
.prize .right p{font-size: 0.9375rem;line-height: 1.5rem;padding-left: 0;}
.prize .left .upper{font-size: 1.0625rem;line-height: 1.625rem;}
.prize .prize-des {margin: 15px 0;padding: 15px;}
.prize .prize-des h5{font-size: 1.1rem;line-height: 1.7rem;}
.prize .prize-des p{font-size: 0.9375rem;line-height: 1.5rem;text-align: left;}
.prize .addthis-share{margin: 15px 0; text-align: center;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

tips

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.tips {padding: 30px 0;}
.tips h2{font-size: 1.51rem;line-height: 2.1rem;}
.tips ul li{padding: 15px 0;}
.tips ul li h5{font-size: 1.0625rem;line-height: 1.625rem;}
.tips ul li p{font-size: 0.9375rem;line-height: 1.5rem;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

sidebar

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.sidebar{display: none;}

}

@media (max-width:767px) {

	.top-banner .product .anchor{display: none;}
	.motion .step ul{justify-content:center;}
	.motion .step ul li, .motion .step ul li.active{width:80%;}
	.motion .step ul li::after{right: 50%;bottom: -28px;top: auto;transform: translate(50%, 0) rotate(90deg);}
	.motion .step ul li.complete::after{border-left-color: #b8a8fe;}
	#motion5 h4 {margin-top: 50px;}

}

@media (max-width:479px) {


}