@charset "UTF-8";
html,body{margin:0;height:100%;position: fixed;font-size:20px;}
button i{font-size: 28px;}
/* 1.main */
#main{
	width:100vw;
	height:92%;
	background-color: #EFECEC;
	overflow: hidden;
	color:black;
}
.section{
	width:100%;
	height:100%;
}
h3{width:100%;text-align: center;margin:8px 0;}
hr{border:1px solid black;min-width:100vw;margin:5px 0;}


.row-horizon img{width:100%;}

/* 2.footer */
footer{
	width:100vw;
	height:8%;
	display:flex;
	border-top: 2px solid black;
}
.btn_footer{
	width:50%;
	text-align: center;
	font-size: 1.35rem;
	color:#7F7F7F;
	border: none;
}
.btn_footer_active{
	color:#5263C9;
	font-weight: bolder;
}

/* content */
.page1,.page2,.page3{display:flex;width:100%;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;}
#swiper{background: url('./img/bg5.JPG') no-repeat 32% 10% ;background-size: cover;}

.col_1,.btn,.col_3,h3{display:inline-block;padding:5px 15px;margin-bottom:15px;outline: none;}
h3{margin-bottom:30px;}
.col_1{width:80%;color:#7FC9FF;cursor:pointer;text-align: justify;}
.btn{width:15%;margin-right:10px;background-color:transparent;border:1px solid #7FC9FF;border-radius:10px;padding:5px 0;color:#7FC9FF;}
.btn:hover{color:#7FC9FF;}
.btn:before{content:"read";text-align: center;font-size: 20px;}
.btn.active{width:15%;margin-right:10px;background-color:transparent;color:#C0C0C0;border:1px solid #C0C0C0;border-radius:10px;margin-bottom:15px;outline: none;}
.btn.active:before{content:"read";text-align: center;font-size: 20px;}


.col_3{width:100%;margin-bottom:30px;display:none;line-height:38px;color:white;}

/* page2 */
.p2_img{margin-bottom:35px;}
.p2_img img{width:600px; height:450px;}

/* page3 */
.page3 h3{margin-bottom: 10px;}
.page3 p{width:90%;height:40%;margin:20px auto;font-size:28px;text-align: center;}
.page3 img{display:none;}

/* page4 */
#horizontal{overflow:scroll;-webkit-overflow-scrolling:touch;width:100%;margin:auto;}
.row,.row-horizon{margin-bottom:30px;background-color: rgba(0,0,0,0.5);}


@media(max-width: 767px){
.col_1{width:70%;}
.btn{width:25%;margin-right:5px;}
.btn.active{width:25%;margin-right:5px;}
.p2_img img{width:100%; height:75%;}
.page3 p{width:90%;margin:5px auto 25px;font-size:28px;text-align: center;}
.page3 img{display:block;width:90%;height:40%;margin:10px auto;font-size:28px;text-align: center;}


}