@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

/* 以下是swiper-4.5.0 css */
@import url(/view/js/swiper-4.5.0/dist/css/swiper.min.css);

.leadingPage_main{
	width: 100%;
	margin: 0 auto;
	padding: 0 0 5vw;
	box-sizing: border-box;
}
.leadingPage_box{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.leadingPage_title{
	width: 100%;
	position: relative;
}
.leadingPage_title > span{
	width: 50%;
	display: block;
	text-align: right;
	font-size: 5rem;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
	color: #f44336;
}
.leadingPage_title > i{
	position: absolute;
	right: 10px;
	font-style: normal;
	bottom: -5px;
	color: #eaeaea;
	font-size: 2.5rem;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
	font-family: 'Abril Fatface', cursive;
}
.leadingPage_title:before{
	position: absolute;
	content: '';
	width: 50%;
	background-color: #eaeaea;
	height: 20px;
	left: 0;
	bottom: 0;
	z-index: -1;
}
.leadingPage_title:after{
	position: absolute;
	content: '';
	width: 50%;
	background-color: #f44336;
	height: 20px;
	right: 0;
	bottom: -20px;
	z-index: -1;
}
.leadingPage_iconImg{
	width: 20%;
	margin: 40px auto;
}
.leadingPage_iconImg > img{
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	vertical-align: top;
	background-color: #eaeaea;
    border-radius: 50%;
    padding: 20px;
    box-sizing: border-box;
}

.leadingPage_content{
	width: 60%;
	margin: 40px 0 80px;
	padding: 20px;
	box-sizing: border-box;
	background-color: #eaeaea;
	position: relative;
}
.leadingPage_content > p{
	line-height: 30px;
	color: #444;
	padding-bottom: 20px;
}
.leadingPage_content > img{
	position: absolute;
	width: 80px;
	right: 0;
	cursor: pointer;
}

.leadingPage_boxImg{
	width: 25%;
	position: relative;
	cursor: pointer;
}
.leadingPage_boxImg i{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	font-style: normal;
	padding: 10px;
	box-sizing: border-box;
	background-color: rgba(0,0,0,.5);
	color: #fff;
	letter-spacing: 5px;
	transition: all .5s;
}
.leadingPage_boxImg > img{
	vertical-align: top;
	width: 100%;
}

.leadingPage_boxTxt{
    position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
	background-color: rgba(0,0,0,.5);
	top: 0;
	left: 0;
}
.leadingPage_boxTxt span{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 2.5rem;
	color: #fff;
	padding: 5px 0;
	box-sizing: border-box;
}
.leadingPage_boxTxt:after{
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 80px 80px 0 0;
	top: 0;
	left: 0;
	border-color: rgba(0,0,0,50%) transparent transparent transparent;
}
.leadingPage_boxTxt:before{
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 80px 80px;
	border-color: transparent transparent rgba(0,0,0,50%) transparent;
	bottom: 0;
	right: 0;
}
.leadingPage_boxImg:hover i{
	bottom: -100%;
}
.leadingPage_box2{
	width: 100%;
	text-align: center;
	margin: 70px auto 20px;
}
.leadingPage_title2{
	font-size: 3rem;
	color: #f44336;
}
.leadingPage_title2 i{
	display: block;
	font-style: normal;
	font-size: 1.5rem;
	color: #444;
}
.leadingPage_content2{
	width: 500px;
	height: 500px;
	margin: 20px auto;
	/*background-color: #eaeaea;*/
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	padding: 10px;
	box-sizing: border-box;
}
.leadingPage_content2 span{
	display: inline-block;
	font-size: 1.25rem;
	padding: 5px 5px 5px 10px;
	border-radius: 10px;
	background-color: #e98a60;
	box-sizing: border-box;
	color: #fff;
	margin: 5px;
	letter-spacing: 5px;	
}
.leadingPage_content2Box{
	width: 500px;
	height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #eaeaea;
}
/* 左右鍵 */
    .swiper-button-main{
        position: absolute;
        width: 35%;
        left: 0;
        top: 40%;
    }
    .carousel13_next, .carousel13_prev{
        position: absolute;
        top: 50%;
        width: 70px;
    	height: 70px;
        margin-top: -22px;
        z-index: 10;
        cursor: pointer;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .carousel13_next, .swiper-container-rtl .carousel13_prev{
        background-image: url(/view/cloud/img/arrow-right-o.svg);
        right: -150px;
    }
    .carousel13_prev, .swiper-container-rtl .carousel13_next{
        background-image: url(/view/cloud/img/arrow-left-o.svg);
        left: -150px;
    }
    .carousel13_next:after,
    .carousel13_next:before{
        content: "";
		display: block;
		border: 4px solid #eaeaea;
		box-sizing: border-box;
		border-radius: 100%;
		position: absolute;
		width: 70px;
		height: 70px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
    }
    .carousel13_prev:after,
    .carousel13_prev:before{
		content: "";
		display: block;
		border: 4px solid #eaeaea;
		box-sizing: border-box;
		border-radius: 100%;
		position: absolute;
		width: 70px;
		height: 70px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
    }
    .carousel13_next:after,
    .carousel13_prev:after{
        left: 0;
	    top: 0;
	    border-color: #f44336;
        opacity: 0;
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
        -webkit-transition: opacity .4s cubic-bezier(.165,.84,.44,1),-webkit-transform .5s cubic-bezier(.25,.46,.45,.94);
        transition: opacity .4s cubic-bezier(.165,.84,.44,1),-webkit-transform .5s cubic-bezier(.25,.46,.45,.94);
        -o-transition: opacity .4s cubic-bezier(.165,.84,.44,1),transform .5s cubic-bezier(.25,.46,.45,.94);
        transition: opacity .4s cubic-bezier(.165,.84,.44,1),transform .5s cubic-bezier(.25,.46,.45,.94);
        transition: opacity .4s cubic-bezier(.165,.84,.44,1),transform .5s cubic-bezier(.25,.46,.45,.94),-webkit-transform .5s cubic-bezier(.25,.46,.45,.94);
    }
    .carousel13_prev:hover:after,
    .carousel13_next:hover:after{
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: opacityopacity .4s cubic-bezier(.77,0,.175,1) 50ms,-webkit-transform .5s cubic-bezier(.455,.03,.515,.955) 50ms;
        transition: opacity .4s cubic-bezier(.77,0,.175,1) 50ms,-webkit-transform .5s cubic-bezier(.455,.03,.515,.955) 50ms;
        -o-transition: opacity .4s cubic-bezier(.77,0,.175,1) 50ms,transform .5s cubic-bezier(.455,.03,.515,.955) 50ms;
        transition: opacity .4s cubic-bezier(.77,0,.175,1) 50ms,transform .5s cubic-bezier(.455,.03,.515,.955) 50ms;
        transition: opacity .4s cubic-bezier(.77,0,.175,1) 50ms,transform .5s cubic-bezier(.455,.03,.515,.955) 50ms,-webkit-transform .5s cubic-bezier(.455,.03,.515,.955) 50ms;
    }
/* 陰影 */
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top{
	border-radius: 50%;
	width: 500px;
    height: 500px;
}
.leadingPage_box3{
	margin: 50px auto 100px;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.leadingPage_title3{
	width: 100%;
	position: relative;
}
.leadingPage_title3 > span{
	width: 50%;
	display: block;
	text-align: left;
	font-size: 4rem;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
	color: #f44336;
}
.leadingPage_title3 > i{
	position: absolute;
	right: 10px;
	font-style: normal;
	bottom: -5px;
	color: #eaeaea;
	font-size: 2.5rem;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
	font-family: 'Abril Fatface', cursive;
}
.leadingPage_title3:before{
	position: absolute;
	content: '';
	width: 50%;
	background-color: #eaeaea;
	height: 20px;
	left: 0;
	bottom: 0;
	z-index: -1;
}
.leadingPage_title3:after{
	position: absolute;
	content: '';
	width: 50%;
	background-color: #f44336;
	height: 10px;
	right: 0;
	bottom: -10px;
	z-index: -1;
}
.leadingPage_detail{
	width: 90%;
	margin: 0 auto;
	background-color: #f8f8f8;
	padding: 40px 10px;
	box-sizing: border-box;
	position: relative;
	z-index: -2;
}
.leadingPage_detail h3{
	font-size: 1.5rem;
	margin-bottom: 20px;
	color: #e98a60;
}
.leadingPage_detail p{
	line-height: 35px;
    color: #444;
    font-size: 1.25rem;
    padding-bottom: 25px;
}
/* 浮動icon */
	.leadingPage_nav ul{
		position: fixed;
		left: 10px;
		z-index: 999;
		top: 50%;
		transform: translate(0, -50%);
	}
	.leadingPage_nav ul li a{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		width: 45px;
		height: 45px;
		margin-bottom: 10px;
		transition: all .3s;
	}
	.leadingPage_nav ul li .leadingPage_login_icon{ background-color: #ed143d; }
	.leadingPage_nav ul li .leadingPage_info_icon{ background-color: #ffc107; }
	.leadingPage_nav ul li .leadingPage_store_icon{ background-color: #314dc9; }
	.leadingPage_nav ul li a img{
		width: 80%;
		vertical-align: top;
	}
	.leadingPage_nav ul li a span{
		position: absolute;
		width: 80px;
		left: -100px;
		text-align: center;
		display: inline-block;
		padding: 5px 0;
		box-sizing: border-box;
		color: #fff;
		border-radius: 5px;
		transition: all .3s;
		z-index: -1
	}
	.leadingPage_nav ul li a span:before{
		position: absolute;
	    content: '';
	    top: 50%;
	    transform: translate(0, -50%);
	    left: -5px;
	    width: 0;
	    height: 0;
	    border-style: solid;
	    border-width: 5px 5px 5px 0;
	}
	.leadingPage_nav ul li .leadingPage_login_icon span{ background-color: #ed143d; }
	.leadingPage_nav ul li .leadingPage_login_icon span:before{ border-color: transparent #ed143d transparent transparent; }
	.leadingPage_nav ul li .leadingPage_info_icon span{ background-color: #ffc107; }
	.leadingPage_nav ul li .leadingPage_info_icon span:before{ border-color: transparent #ffc107 transparent transparent; }
	.leadingPage_nav ul li .leadingPage_store_icon span{ background-color: #314dc9; }
	.leadingPage_nav ul li .leadingPage_store_icon span:before{ border-color: transparent #314dc9 transparent transparent; }

	.leadingPage_nav ul li a:hover span{ left: 110%; }
@media all and (max-width: 1100px){
	.leadingPage_iconImg{ width: 35%; }
}
@media all and (max-width: 850px){
	.carousel13_prev, .swiper-container-rtl .carousel13_next{
		left: 0;
    	top: 100%;
	}
	.carousel13_next, .swiper-container-rtl .carousel13_prev{
		right: 0;
    	top: 100%;
	}
}
@media all and (max-width: 768px){
	.leadingPage_main{
		padding: 8vw 0 5vw;
	}
	.leadingPage_title > span{
		width: 100%;
		text-align: center;
		font-size: 2.5rem;
		letter-spacing: 5px;
		padding-left: 5px;
	}
	.leadingPage_title > i{
		bottom: -100%;
	}
	.leadingPage_title2{ font-size: 2.5rem; }
	.leadingPage_iconImg{
		width: 90%;
		max-width: 400px;
		margin-top: 80px;
	}
	.leadingPage_content{
		width: 90%;
		margin: 0 auto 80px;
	}
	.leadingPage_boxImg{ width: 50%; }
	.leadingPage_box3{
		margin: 50px auto;
	}
	.leadingPage_title3 > span{
		width: 100%;
		text-align: center;
		font-size: 2.5rem;
	}
	.leadingPage_title3 > i{
		bottom: -100%;
		font-size: 1.5rem;
	}
	.leadingPage_detail{
		margin: 50px auto 20px;
	}
}
@media all and (max-width: 600px){
	.leadingPage_content2{
		width: 90%;
		margin: 0 auto;
		height: 80vw;
	}
	.leadingPage_content2Box{
		width: 90%;
		margin: 0 auto;
		height: 80vw;
	}
	.swiper-container-3d .swiper-slide-shadow-bottom,
	.swiper-container-3d .swiper-slide-shadow-left,
	.swiper-container-3d .swiper-slide-shadow-right,
	.swiper-container-3d .swiper-slide-shadow-top{
		width: 90%;
		margin: 0 auto;
		height: 80vw;
	}
	.leadingPage_content2 span{
		font-size: 1rem;
		margin: 5px 2.5px;
	}
}