﻿@charset "utf-8";
@font-face {
    font-family: pmzd;
    src: url('../font/pmzd.woff2');
	font-display: swap;
}
/*头部导航*/
.chaochu{
	width:100%;
	height: auto;
	overflow: hidden;
}
.one_warp{
	width: 100%;
	height: 100vh;
	position: relative;
	background:url("../images/dice_01.jpg") no-repeat center;
	background-size:cover;
}


.one{
	width:100%;
	height:100%;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.one_en{
	width:100%;
	display: flex;
	justify-content: center;
}
.one_en span{
	text-transform: uppercase; 
	color: #000000;
	font-size: 7.714rem;
	font-family: pmzd;
	line-height: 7rem;
	position: relative;
}
.one_en span:after{
	content: '';
	width: 1.285rem;
	height: 1.285rem;
	border-radius:50%;
	background: #6f24d5;
	position: absolute;
	bottom: 1rem;
	right: -3rem;
}

.one_tit{
	width:100%;
	height: auto;
	position: relative;
	color: #000;
	font-size: 5.142rem;
	line-height: 8.857rem;
	text-align: center;
}
.one_tit span{ font-weight: bold;}
.one_tit span.one_tit_span{ color: #0745c4;}

.one_2{
	width:100%;
	position: absolute;
	bottom: 0;
	display: flex;
	justify-content: center;
	
}
.one_2 span{
	writing-mode: vertical-lr;
	color: #000;
	font-size: 1rem;
	text-transform: uppercase; 
	position: relative;
	padding-bottom: 2.142rem;
	overflow: hidden;
	padding-left: 8px;
}

.one_2 span:after{
	content: '';
	background:#d9dbf7;
	background-size:cover;
	width: 2px;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
}
.one_2 span:before{
	content: '';
	background:#1d54bd;
	background-size:cover;
	width: 2px;
	height: 50%;
	position: absolute;
	top:0;
	left: 0;
	z-index: 2;
	animation: aloop 2s linear infinite;
}
@-webkit-keyframes aloop {
    from {
        top:0;
    }

    to {
        top:100%;
    }
}


.two_warp{
	width: 100%;
	height: auto;
	position: relative;
	padding: 15.5vh 0 20vh 0;
}
.two_warp:after{
	content: '';
	width: 100%;
	height: 38.5vh;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(234,238,253,0.8);
}

.two{
	width: 78%;
	margin: 0 auto;
	height: auto;
	position: relative;
	z-index: 2;
	
}
.two_tit{
	width:100%;
	height: auto;
}
.two_tit_1{
	width: 100%;
	font-size: 3.428rem;
	font-family: pmzd;
	line-height: 3.142rem;
	text-transform: uppercase;
}
.two_tit_1 span{
	position: relative;
}
.two_tit_1 span:after{
	content: '';
	background: #6f24d5;
	width: 25rem;
	height: 1px;
	right: -34.142rem;
	top: 50%;
	position: absolute;
}
.two_tit_1 span:before{
	content: '';
	width: 6.142rem;
	height: 6.142rem;
	background-image: linear-gradient( #d2eafe , #e3c4f3);
	filter: blur(10px);
	border-radius:50%;
	position: absolute;
	top:calc(50% - 3.071rem);
	left: -2.571rem;
	z-index: -1;
	animation: fangda 2s linear infinite;
}
@-webkit-keyframes fangda {
    0 {
        transform: scale(1);left: -2.571rem;
    }
    50% {
        transform: scale(1.1);left: -3.571rem;
    }
	100% {
        transform: scale(1);left: -2.571rem;
    }
}


.two_tit_2{
	width: 100%;
	color: #000000;
	font-size: 2.571rem;
	font-family: opb;
	line-height: 6.142rem;
	position: relative;
}
.two_tit_2:after{
	content: '';
	width: 5rem;
	height: 0.571rem;
	background-image: linear-gradient(to right, #d2eafe , #e3c4f3);
	position: absolute;
	top: calc(50% - 0.2855rem);
	left: 9.285rem;
	filter: blur(5px);
	animation: bianchang 2s linear infinite;
}
@-webkit-keyframes bianchang {
    0 {
       filter: blur(5px);
    }
    50% {
       filter: blur(10px);
    }
	100% {
        filter: blur(5px);
    }
}


.two_tit_2 span{
	position: relative;
	z-index: 2;
}
.two_con{
	color: #000;
	font-size: 1.142rem;
	line-height: 2.285rem;
	margin-top: 13.5vh;
	width: 48%;
}
.two_img{
	position: absolute;
	 bottom: -1.428rem;
	right: 0;
	z-index: 2;
	width: 52%;
	height: auto;
	font-size: 0px;
	overflow: hidden;
}
.two_img img{
	max-width: 100%;
	height: auto;
}


.three{
	width:100%;
	height:auto;
}
.three .two_tit{ width: 78%; margin: 0 auto;}
.three_tit{
	width: 78%;
	margin: 0 auto;
	font-size: 2rem;
	color: #000000;
	display: flex;
	align-items: center;
	margin-top: 7.8vh;
}
.three_tit span{
	position: relative;
	font-size: 1.285rem;
	padding-left: 2.571rem;
	text-transform: uppercase;
}
.three_tit span:after{
	content: '';
	width: 2px;
	height: 1rem;
	background: #d6d6d6;
	position: absolute;
	left: 1.214rem;
	top:calc(50% - 0.5rem);
}
.three_all{
	width:100%;
	height: auto;
	margin-top: 8vh;
	position: relative;
}
.three_all:before {
    content: '';
    width: 31.428rem;
    height: 31.428rem;
    background-image: linear-gradient( #d2eafe , #e3c4f3);
    filter: blur(50px);
    border-radius: 50%;
    position: absolute;
    top: -20.714rem;
    left: 53.6%;
    z-index: -1;
	opacity: 0.7;
}
.three_con{
	width:100%;
	height: 28vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	background-image: linear-gradient(to right, rgba(228,239,255,0.48) , rgba(239,233,246,0.48));
}
.three_con:nth-child(2){background-image: linear-gradient(to right, #f1e6fc, #e4efff);}
.three_con:nth-child(2) .three_1{ background: #e4083c;}

.three_con:nth-child(3){background-image: linear-gradient(to right, #f6effd , #ebf3ff);}
.three_con:nth-child(3) .three_1{ background: #222222;}


.three_1{
	color: #fff;
	width: 92%;
	font-size: 1.714rem;
	height: 5.142rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	background: #0745c4;
	padding-left: 7%;
	border-radius:50px;
}
.four{
	width:100%;
	height: auto;
	background: url("../images/dice_07.png") no-repeat center top;
	position: relative;
	margin-top: 5vh;
	min-height: calc(100vw * 1023 / 1920);
}
.four .three_tit{ margin-top: 0;}
.four_all{
	width:78%;
	height: auto;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	margin-top: 9.1vh;
}
.four_left{
	position: relative;
	width: 50%;
}
.four_1{
	font-size: 32rem;
	color: #d9dbe6;
	font-family: '微软雅黑';
	font-weight: bold;
	line-height: 28rem;
}
.four_2{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 5.285rem;
	font-family: oph;
	padding-top: 22%;
}
.four_right{
	width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.four_3{
	width:100%;
	font-size: 1.571rem;
	display: flex;
	align-items: center;
}
.four_3 span{
	font-size: 2.142rem;
	color: #000;
	font-weight: bold;
	width: 14.28rem;
}
.four_4{
	width: 100%;
	font-size: 1.428rem;
	color: rgba(0,0,0,0.7);
	letter-spacing: 2rem;
	margin-top: 1.285rem;
}
.four_5{
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-size: 1.285rem;
	color: rgba(0,0,0,0.7);
	height: 6.375rem;
	line-height: 6.142rem;
}

.alphabet_warp{
	width: 100%;
	background: url("../images/dice_08.jpg") no-repeat center;
	background-size:cover;
	min-height: calc(100vw * 801 / 1920);
	position: relative;
	z-index: -1;
	padding-top: 12vh;
}
.alphabet_warp .two_tit{
	width:78%; 
	margin:0 auto;
}
.alphabet_warp .two_tit_1 span:after{ display: none;}
.alphabet_img{
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 0px;
	overflow: hidden;
}
.alphabet_img img{
	height: 90%;
	width: auto;
}



.brief{ 
	width:100%; 
	height:auto; 
	margin:0 auto;
	position: relative;
	z-index: 2;
	padding-top: 10.5vh;
}

.brief .two_tit{
	width:78%; 
	margin:0 auto;
}


.brief_list{
	width: 100%;
	margin-top: 0;
	background: url("../images/dice_10.png") no-repeat center;
	background-size:auto 100%;
}
.brief_list .swiper-slide{ width: 32%;}
.brief_list .swiper-slide-next{ width: 36%;}
.brief_list .swiper-slide-next .brief_bg{ opacity: 1;}
.brief_list .swiper-slide-next .brief_con{ padding-top: 0;}
.brief_list .swiper-slide-next .brief_img img{ transform: rotateY(0) scale(1); -webkit-transform: rotateY(0) scale(1);}

.brief_list .swiper-slide-active .brief_img img{ transform: rotateY(-35deg) scale(0.95); -webkit-transform: rotateY(-35deg) scale(0.95);}

.brief_con{
	width: 100%;
	height: calc(100vw * 0.36 * 576 / 700);
	position: relative;
	padding-top: 2rem;
	overflow: hidden;
}
.brief_bg{
	width: 100%;
	height: 100%;
	background: url("../images/dice1_06.png") no-repeat center top;
	background-size:cover;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.brief_img{
	width:100%;
	height: calc(100vw * 0.36 * 396 / 700);
	position: relative;
	z-index: 2;
	font-size: 0px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
		perspective:2500px;
	-webkit-perspective:2500px; 
}
.brief_img img{
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: rotateY(35deg) scale(0.95);
	-webkit-transform: rotateY(35deg) scale(0.95);
}


.shell_con{
	width: 58%;
	height: auto;
	margin: 0 auto;
	position: relative;
	padding: 14vh 0 0 0;
}
.shell_con_1{
	width:55.71%;
	height: calc(58vw * 0.5571 * 1627 / 621);
	font-size: 0px;
	overflow: hidden;
	-moz-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    -webkit-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
	position: relative;
	z-index: 2;
	border-radius:20px;
}
.shell_con_1 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	
	border-radius:20px;
}

.shell_con_2{
	width:55.89%;
	height: calc(58vw * 0.5589 * 1124 / 616);
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top:12.88vh;
	right: 0;
	-moz-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    -webkit-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
	border-radius:20px;
}
.shell_con_2 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius:20px;
}


.delight{
	width: 100%;
	height: auto;
	padding:15vh 0 17vh 0;
	position: relative;
}
.delight:after{
	content: '';
	width: 84%;
	height: 84vh;
	background: #eaecfe;
	position: absolute;
	top: 0;
	right: 0;
}
.delight .two_tit{
	width: 78%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.delight .two_tit_1 span:after{ display: none;}
.delight_list{
	width:78%;
	height: auto;
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 2;
	margin-top: -4rem;
}
.delight_con{
	width: 20.2%;
	margin-left: 4.6%;
}
.delight_con:first-child{ width: 23.2%;}
.delight_con:nth-child(2){ margin-top: -19.3vh;}
.delight_img{ 
	width: 100%;
	height: auto;
	font-size: 0px;
	overflow: hidden;
	margin-top: 8.2vh;
}
.delight_img:first-child{ margin-top: 0;}
.delight_img img{
	max-width: 100%;
	height: auto;
	border-radius:20px;
}
.delight_typeright{
	width:78%;
	height: auto;
	margin: 0 auto;
	font-size: 1.285rem;
	color: #000;
	font-family: '微软雅黑';
	text-align: right;
	line-height: 2rem;
	margin-top: -4rem;
}

@media screen and (max-width:1599px)and (min-width:1440px){
	.four_2{font-size: 4.5rem;}
}
@media screen and (max-width:1439px)and (min-width:1280px){
	.one_en span{ font-size: 6.5rem;}
	.one_tit{ font-size: 4rem; line-height: 7rem;}
	.one_2 span{ font-size: 0.875rem; padding-bottom: 1.5rem;}
	.two_warp{ padding: 8vh 0 20vh 0;}
	.four_1{ font-size: 30rem;}
	.four_2{font-size: 4.5rem;}
}
@media screen and (max-width:1365px)and (min-width:1280px){
	.four_1{ font-size: 28rem;}
	.four_2{font-size: 4rem;}
}
@media screen and (max-width:1278px)and (min-width:1024px){
	.two_warp{ padding: 10vh 0 20vh 0;}
	.two_img{ bottom: 15vh;}
	.four_1{ font-size: 22rem;}
	.four_2{font-size: 3.25rem;}
	.alphabet_img img{ height: 80%;}


}
@media screen and (max-width:1023px)and (min-width:300px){
	.one_warp{
		width: 100%;
		height: 100vh;
	}

	.one_en span{
		font-size: 4rem;
		line-height: 4rem;
	}
	.one_en span:after{
		width: 1rem;
		height: 1rem;
		bottom: 0.75rem;
		right: -2rem;
	}

	.one_tit{
		font-size: 2.75rem;
		line-height: 6rem;
	}
	.one_2 span{
		font-size: 0.75rem;
		padding-bottom: 1rem;
	}


	.two_warp{
		padding: 6vh 0 10vh 0;
	}
	.two_warp:after{
		height: 24vh;
	}

	.two{
		width: 94%;
	}

	.two_tit_1{
		font-size: 2.75rem;
		line-height: 2.75rem;
	}

	.two_tit_1 span:after{
		display: none;
	}

	.two_tit_2{
		font-size: 1.625rem;
		line-height: 4rem;
	}
	.two_tit_2:after{
		left: 7rem;
	}

	.two_con{
		font-size: 1.142rem;
		line-height: 2.285rem;
		margin-top: 6vh;
		width: 100%;
	}
	.two_img{
		position: relative;
		 bottom: 0;
		width: 100%;
	}

	.three .two_tit{ width: 94%;}
	.three_tit{
		width: 94%;
		font-size: 1.5rem;
		margin-top:3vh;
	}
	.three_tit span{
		font-size: 1.125rem;
	}

	.three_all{
		margin-top: 5vh;
	}
	.three_all:before {
		width: 20rem;
		height: 20rem;
	}
	.three_con{
		height: 14vh;
	}

	.three_1{
		width: 94%;
		font-size: 1.25rem;
		height: 4rem;
		padding-left: 5%;
	}
	.four{
		margin-top: 5vh;
	}
	.four .three_tit{ margin-top: 0;}
	.four_all{
		width:94%;
		justify-content: center;
		flex-direction: column;
		margin-top: 2vh;
	}
	.four_left{
		width: 100%;
	}
	.four_1{
		font-size: 22rem;
		text-align: center;
		line-height: 20rem;
	}
	.four_2{
		font-size: 3.5rem;
		padding-top: 16%;
		justify-content: center;
	}
	.four_right{
		width: 100%;
		padding: 3vh 0 5vh 0;
	}
	.four_3{
		font-size: 1.125rem;
		display: flex;
		align-items: center;
	}
	.four_3 span{
		font-size: 1.75rem;
		width: 10rem;
	}
	.four_4{
		width: 100%;
		font-size: 1.125rem;
		letter-spacing: 2rem;
		margin-top: 1.285rem;
	}
	.four_5{
		justify-content:center;
		flex-direction: column;
		font-size: 1.125rem;
		line-height: 2rem;
	}
	
	.alphabet_warp{
		width: 100%;
		min-height: auto;
		position: relative;
		z-index: 1;
		padding: 5vh 0;
	}
	.alphabet_warp .two_tit{
		width:94%; 
	}
	.alphabet_img{
		width: 100%;
		position: relative;
		margin-top: 2vh;

	}
	.alphabet_img img{
		width: 100%;
		height: auto;
	}



.brief{ 
	padding-top: 5vh;
}

.brief .two_tit{
	width:94%; 
	margin:0 auto;
}


.brief_list{
	width: 100%;
	margin-top: -1.142rem;
	background: url("../images/dice_10.png") no-repeat center;
	background-size:auto 100%;
}


.brief_img{
	width:100%;
	height: auto;
	text-align: center;
	margin-top: 4vh;
}
.brief_img img{
	max-width: 80%;
	height: auto;
}


.shell_con{
	width: 58%;
	height: auto;
	margin: 0 auto;
	position: relative;
	padding: 14vh 0 0 0;
}
.shell_con_1{
	width:55.71%;
	height: calc(58vw * 0.5571 * 1627 / 621);
	font-size: 0px;
	overflow: hidden;
	-moz-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    -webkit-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
	position: relative;
	z-index: 2;
	border-radius:20px;
}
.shell_con_1 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	
	border-radius:20px;
}

.shell_con_2{
	width:55.89%;
	height: calc(58vw * 0.5589 * 1124 / 616);
	font-size: 0px;
	overflow: hidden;
	position: absolute;
	top:12.88vh;
	right: 0;
	-moz-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    -webkit-box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
    box-shadow: 4px 7px 43px 0 rgba(0,0,0,0.24);
	border-radius:20px;
}
.shell_con_2 img{
	width:100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius:20px;
}


.delight{
	width: 100%;
	height: auto;
	padding:15vh 0 17vh 0;
	position: relative;
}
.delight:after{
	content: '';
	width: 84%;
	height: 84vh;
	background: #eaecfe;
	position: absolute;
	top: 0;
	right: 0;
}
.delight .two_tit{
	width: 78%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.delight .two_tit_1 span:after{ display: none;}
.delight_list{
	width:78%;
	height: auto;
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 2;
	margin-top: -4rem;
}
.delight_con{
	width: 20.2%;
	margin-left: 4.6%;
}
.delight_con:first-child{ width: 23.2%;}
.delight_con:nth-child(2){ margin-top: -19.3vh;}
.delight_img{ 
	width: 100%;
	height: auto;
	font-size: 0px;
	overflow: hidden;
	margin-top: 8.2vh;
}
.delight_img:first-child{ margin-top: 0;}
.delight_img img{
	max-width: 100%;
	height: auto;
	border-radius:10px;
}
.delight_typeright{
	width:78%;
	height: auto;
	margin: 0 auto;
	font-size: 1.285rem;
	color: #000;
	font-family: '微软雅黑';
	text-align: right;
	line-height: 2rem;
	margin-top: -4rem;
}



}
