@font-face { 
    font-family: calibri; 
    src: url('calibri.ttf'); 
} 

html {
	font-size: 18px;
}

.popupNoticeWrapper {
	position: relative;
	/*background-color: #5cbdff;*/
	background-color: #ffffff;
	width: 100%;
	height: 100%;
    font-family: calibri;
	display: flex;
    align-items: center;
}

.popupNoticeWrapper .hide {
	display: none;
}

.popupNoticeWrapper .subtitle {
    color: #222222;
    /*font-size: 1.3rem;*/
    text-align: center;
    flex: 1 0 100%;
    padding: 0 8%;
    box-sizing: border-box;
}

.popupNoticeWrapper .swiper-container {
    width: 100%;
    height: 100%;
    opacity: 0;
}     

.popupNoticeWrapper .swiper-slide {
    
}

.popupNoticeWrapper .swiper-pagination-bullets {
	bottom: 20px!important;
}

.popupNoticeWrapper .swiper-pagination-bullet {
	width: 15px;
	height: 15px;
}

.popupNoticeWrapper .swiper-pagination-bullet-active {
	background-color: #5cbdff!important;
}

.popupNoticeWrapper .t0 {
    font-size: 170%;
    /*line-height: 150%*/
}

.popupNoticeWrapper .t1 {
    font-size: 170%;
    /*line-height: 150%*/
}

.popupNoticeWrapper .t2 {
    font-size: 140%;
    /*line-height: 130%;*/
}

.popupNoticeWrapper .t3 {
    font-size: 130%;
    /*line-height: 120%;*/
}

.popupNoticeWrapper .strong {
	font-weight: bold;
}

.popupNoticeWrapper .blue {
	color: #5cbdff;
}

.popupNoticeWrapper .gray {
	color: #3A414B;
}

.popupNoticeWrapper .opacity {
	opacity: 0;
}

.popupNoticeWrapper .noticePage {
	text-align: center;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.popupNoticeWrapper .noticePage .title {
	width: 100%;
	padding: 6% 0 3% 0;
}

.popupNoticeWrapper .noticePage .context {
	/*height: 40%;*/
    flex: 1;
	display: flex;
    align-items: center;
    width: 100%;
    padding-bottom: 10%;
}

.popupNoticeWrapper .noticePage .contextInner {
	width: 100%;
	padding: 0 8%;
}

.popupNoticeWrapper .noticePage .link {
	padding: 5% 0 0 0;
	cursor: pointer;
}

.popupNoticeWrapper .page1 {
	/*padding: 25% 0 0 0;*/
}

.popupNoticeWrapper .page1 .context {
    padding: 10% 0 0 0;
	flex: 1 1 30%;
	box-sizing: border-box;
}

.popupNoticeWrapper .page1 .pic {
    /*position: absolute;
    top: 40%;*/
    flex: 1 1 40%;
}

.popupNoticeWrapper .page1 .pic img {
	max-width: 100%;
}

.popupNoticeWrapper .page1 .contextInner {
	width: 100%;
}

.popupNoticeWrapper .page5 .context {
	padding: 10% 0 0 0;
	flex: 0 0 35%;
	box-sizing: border-box;
}

.popupNoticeWrapper .page5 .video {
	max-width: 640px;
}

.popupNoticeWrapper .page9 .context {
	padding: 10% 0 0 0;
	flex: 0 0 35%;
	box-sizing: border-box;
}

.popupNoticeWrapper .page9 .video {
	max-width: 640px;
}

.popupNoticeWrapper .pic img {
	max-width: 90%;
}

.popupNoticeWrapper .video {
	/*width: 100%;
	padding-top: 56.25%;
	position: relative;*/
}

.popupNoticeWrapper .video iframe {
	margin: auto;
	/*position: absolute;*/
}

@media screen and (max-width: 900px) {
	.popupNoticeWrapper .page5 .context {
		padding: 5% 0 0 0;
	}

	.popupNoticeWrapper .video {
		max-width: 440px!important;
	}

	.popupNoticeWrapper .noticePage .title {
	    padding: 3% 0 3% 0;
	}
}

/*@media (min-width: 858px) {
    html {
        font-size: 20px;
    }
}

@media (min-width: 780px) {
    html {
        font-size: 19px;
    }
}

@media (min-width: 724px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 702px) {
    html {
        font-size: 17px;
    }
}*/

/*@media only screen and (max-device-width: 320px) {
	html {
        font-size: 26px;
    }

    .swiper-pagination-bullet {
		width: 24px;
		height: 24px;
	}
}

@media only screen and (min-device-width: 321px) and (max-device-width: 414px) {
	html {
        font-size: 28px;
    }

    .swiper-pagination-bullet {
		width: 28px;
		height: 28px;
	}
}

@media only screen and (min-device-width: 415px) and (max-device-width: 800px) {
	html {
        font-size: 24px;
    }

    .swiper-pagination-bullet {
		width: 30px;
		height: 30px;
	}
}

@media only screen and (min-device-width: 415px) and (max-device-width: 1024px) {
	html {
        font-size: 24px;
    }

    .swiper-pagination-bullet {
		width: 30px;
		height: 30px;
	}
}*/






