@charset "utf-8";

@media screen and (max-width: 768px) {
	
	
	body{
		_overflow-x:hidden;
	}

	.background_main{
		background:#F4C5BF url(../../img/background.png);
	}

	.top{
		height:300px;
		position:fixed;
		z-index:10;
	}
	
	.top .logo{
		min-width:300px;
		height:200px;
		background:url(../../img/logo.svg)no-repeat left center / 90%;
		display:block;
		box-sizing:border-box;
		margin:0 auto;
	}	


	.top a.btn_open{
		width:80px;
		height:80px;
		line-height:80px;
		text-align:center;
		border-radius:100%;
		position:fixed;
		top:10px;
		right:10px;
		z-index:10;
		display:block;
		border:1px #000 dashed;
		color:#000;
		background:rgba(255,255,255,0.7);
	}	

	
	.top a.btn_close{
		width:80px;
		height:80px;
		line-height:80px;
		text-align:center;		
		border-radius:100%;
		position:fixed;
		top:10px;
		right:10px;
		z-index:10;
		display:none;
		border:1px #000 dashed;
		color:#000;
		background:rgba(255,255,255,0.7);
	}	
	
	
	.top a.btn_dm{
		width:80px;
		height:80px;
		line-height:80px;
		text-align:center;
		border-radius:100%;
		position:fixed;
		top:100px;
		right:10px;
		z-index:10;
		display:block;
		border:1px #000 dashed;
		color:#000;
		background:rgba(255,255,255,0.7);
	}	
	
	
	.top a.btn_open:hover,
	.top a.btn_close:hover,
	.top a.btn_dm:hover
	{
		background:#F74F77;
		color:#fff;
		border:1px #fff solid;
	}		
	
	.top a.btn_open span,
	.top a.btn_close span,
	.top a.btn_dm span
	{
		text-align:center;
		font-size:35px;
	}			


	/* menu_side */
	
	.menu_side{
		width:0;
		height:100%;
		position:fixed;
		top:0;
		left:0;
		transition: all 0.5s ease;
		z-index:11;
		box-sizing:border-box;
		background:rgba(247,79,119,0.9);
	}	
		
	.menu_sides{
		display:none;
	}	
	
	.menu_side .menu_list{
		position:relative;		
	}	
	
	.menu_side .menu_list a{
		padding:20px;
		display:block;
		font-size:23px;
		font-weight:bold;	
		color:#fff;
	}	

	.menu_side .menu_list a:hover{
		text-decoration:none;
		background:rgba(247,79,119,1);
	}
	
	.menu_side .menu_list a .content{
		display:flex;
		gap:20px;
	}		
	
	.menu_side .menu_list a .content .image{
		width:50px;
		height:50px;
		border-radius:50px;
		border:1px #fff dashed;
	}		

	.menu_side .menu_list a .content .image.i1{
		background:url(../../img/icon_home.png)no-repeat center center / contain;
	}		
	
	.menu_side .menu_list a .content .image.i2{
		background:url(../../img/icon_promote.png)no-repeat center center / contain;
	}		

	.menu_side .menu_list a .content .image.i3{
		background:url(../../img/icon_sdgs.png)no-repeat center center / contain;
	}		
		
	.menu_side .menu_list a .content .image.i4{
		background:url(../../img/icon_idea.png)no-repeat center center / contain;
	}		
	
	.menu_side .menu_list a .content .image.i5{
		background:url(../../img/icon_task.png)no-repeat center center / contain;
	}	
	
	.menu_side .menu_list a .content .image.i6{
		background:url(../../img/icon_video.png)no-repeat center center / contain;
	}	
	
	.menu_side .menu_list a .content .image.i7{
		background:url(../../img/icon_question.png)no-repeat center center / contain;
	}		
	
	.menu_side .menu_list a .content .text{
		flex:auto;
		display:flex;
		align-items:center; 	
	}		

	
	
	/* container setting */
	
	.container{
		overflow:hidden;
	}	
	
	.banner{
		min-height:800px;
		/*display:flex;*/
		z-index:0;
		position:relative;
	}

	.banner .side_left{
		width:350px;
		padding:0 50px;
		border-right:0px rgba(247, 79, 119, 0.5) solid;
		position:relative;
		box-sizing:border-box;
		z-index:0;
		display:none;
	}

	.banner .side_right{
		/* width:calc(100% - 400px); */
		width:100%;
		padding:200px 20px 50px 20px;
		box-sizing:border-box;
		position:relative;
		z-index:1;
	}

	.banner .side_right .desc{
		font-size:60px;
		font-weight:bold;
		text-align:justify;
		color:#282F76;
		line-height:75px;
		padding:30px 30px 60px 30px;
		border:1px #000 dashed;
		border-radius:5px;
		position:relative;
		z-index:1;
		background:rgba(255,255,255,0.8);
		margin-bottom:10px;
	}



	.banner .side_right .desc a.btn{
		width:130px;
		height:50px;
		line-height:50px;
		font-size:19px;
		font-weight:bold;
		text-align:center;			
		display:block;
		position:absolute;
		right:30px;
		bottom:0;
		border-radius:5px 5px 0 0;
		border:1px #000 dashed;
		border-bottom:0;
	}		
	
	.banner .side_right .desc a.btn:hover{
		background:#F74F77;
		color:#fff;
		border:1px #fff solid;
		border-bottom:0
	}	



	.banner .side_right .desc .n1{
		font-size:30px;
		font-weight:bold;
		text-align:justify;
		color:#282F76;
		line-height:40px;
	}

	.banner .side_right .desc .n2{
		font-size:21px;
		font-weight:bold;
		text-align:justify;
		line-height:30px;
		position:relative;
		z-index:1;
		margin:30px 0;
		color:#000;
	}


	.banner_container_switch{
		width:100%;
		height:100px;
		border:1px #000 dashed;
		background:rgba(255,255,255,0.7) url(../../img/arrow-down.svg)no-repeat right 30px center / 40px;
		border-radius:5px;
		box-sizing:border-box;
		margin:10px 0;

	}

	.banner_container_switch select{
		width:100%;
		height:100px;
		font-size:21px;
		border:none;
		box-sizing: border-box;	
		padding:0 30px;
		background:none;
	}



	.banner_container_btn{
		width:100%;
		min-height:200px;
		display:flex;
		flex-wrap:wrap;
		gap:10px;
	}

	.banner_container_btn .item{
		width:100%;
		min-height:100px;
		border:1px #000 dashed;
		border-radius:5px;
		box-sizing:border-box;
		background:rgba(255,255,255,0.7);
		position:relative;
	}	


	.banner_container_btn .item:hover{
		border:1px #fff solid;
		background-color:rgba(255,255,255,0.7) !important;
	}	


	.banner_container_btn .item.i1{
		background:#F3CDC7 url(../../img/btn_青年永續未來主題日.svg)no-repeat center center / contain;
	}
	
	.banner_container_btn .item.i2{
		background:#F3CDC7 url(../../img/btn_青年出任務.svg)no-repeat center center / contain;
	}
	
	.banner_container_btn .item.i3{
		background:#F3CDC7 url(../../img/btn_永續支持我可以.svg)no-repeat center center / contain;
	}	
	
	

	/* container_temp_info setting */

	.container_temp_info_image{
		height:300px;
		position:relative;
		margin:0 auto 100px auto;
		
	}		
	
	.container_temp_info_image.i1{
		background:url(../../img/btn_青年永續未來主題日.svg)no-repeat center center / contain;
	}		
		
	
	.container_temp_info_image.i2{
		background:url(../../img/btn_青年出任務.svg)no-repeat center center / contain;
	}		
	

	.container_temp_info_image.i3{
		background:url(../../img/btn_永續支持我可以.svg)no-repeat center center / contain;
	}	
	
	.container_temp_info{
		position:relative;
		margin:0 auto;
		padding:0 20px;
	}	


	.container_temp_info .item{
		box-sizing:border-box;
		position:relative;
		border:1px #000 dashed;
		background:rgba(255,255,255,0.7);
		border-radius:5px;
		padding:70px 20px 20px 20px;
		position:relative;
		margin-bottom:60px;
	}	
	
	.container_temp_info .item.i1{
		height:400px;
		background:rgba(255,255,255,0.7) url(../../img/i1_3_content.png)no-repeat center center / contain;
	}		
	

	.container_temp_info .item .name{
		width:90px;
		height:90px;
		line-height:90px;
		text-align:center;
		border:1px #fff solid;
		border-radius:100%;
		position:absolute;
		top:-45px;
		left:50%;
		margin:0 0 0 -46px;
		color:#fff;
		font-weight:bold;
	}		
	
	.container_temp_info .item .name.nn1{
		background:#F74F77;
	}			
	
	.container_temp_info .item .name.nn2{
		background:#74C9DD;
	}		
	
	.container_temp_info .item .name.nn3{
		background:#F1821E;
	}			
	
	
	
	.container_temp_info .item .n1{
		font-size:21px;
		font-weight:bold;
		color:#282F75;
	}

	.container_temp_info .item .n2{
		font-size:17px;
		margin:20px 0;
	}
	
	.container_temp_info .item .line{
		height:1px;
		border-bottom:1px #555 dashed;
		margin:20px 0;
	}	
	

	._container_temp_info .item{
		background:url(../../img/bok_青年出任務.png)no-repeat center center / contain;
	}	

	._container_temp_info .item.b2{
		background:url(../../img/bok_永續支持我可以.png)no-repeat center center / contain;
	}	





	.type_switch{
		position:relative;
		z-index:2;
		padding:0 20px;
	}

	.type_switchs{
		height:70px;
		margin:0 auto;
		border:1px #000 dashed;
		border-radius:5px;
		background:#fff url(../../img/arrow-down.svg)no-repeat right 20px center / 30px;
	}

	.type_switchs select{
		width:100%;
		height:70px;
		font-size:21px;
		border:none;
		box-sizing: border-box;	
		padding:0 20px;
		background:none;
	}


	/* pages_top setting */

	.pages_top{
		padding:170px 0 0 0;
	}

	.pages_top .name{
		padding:50px 0;
		font-size:35px;
		text-align:center;
		font-weight:bold;
		margin:0 auto;
		position:relative;
	}

	.pages_top .name span{
		color:#F74F77;
	}








	
	/* news_index setting */

	.news_index{
		min-height:100px;
		margin:70px auto 0 auto;
		overflow:hidden;
	}	


	.news_indexs{
		margin:70px 0;
		padding:50px 30px;
		overflow:hidden;
		position:relative;
	}	
	
	.news_indexs .item{	
		background:rgba(255,255,255,0.8);
		border-radius:5px;
		border:1px #000 dashed;
		position:relative;
		padding-bottom:100px;
	}		
	
	.news_indexs .item .label{
		height:40px;
        line-height:40px;
		font-size:21px;
		padding:20px;
		clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
		font-weight:bold;
		
	}		
	
	.news_indexs .item .text{
		padding:30px;
	}		

	.news_indexs .item .text .date{
		font-size:35px;
		font-family: "Barlow", serif;
	}	

	.news_indexs .item .text .name{
		margin:20px 0;
		font-size:27px;
		color: #282F76;
		font-weight:bold;
	}	
	
	.news_indexs .item .text .image{
		height:300px;
		margin:10px 0;
	}	
	
	.news_indexs .item .ito{
		font-size:17px;
		line-height:30px;
	}	


	.news_indexs .item a.btn_more{
		width:130px;
		height:50px;
		line-height:50px;
		font-size:19px;
		font-weight:bold;
		text-align:center;			
		display:block;
		position:absolute;
		right:50%;
		bottom:0;
		border-radius:5px 5px 0 0;
		border:1px #000 dashed;
		border-bottom:0;
		margin-right:-65px;
		z-index:5;
	}		
	
	.news_indexs .item a.btn_more:hover{
		background:#F74F77;
		color:#fff;
		border:1px #fff solid;
		border-bottom:0
	}	




	/* message_index setting */
	
	.message_index{
		margin:70px 0;
		padding:50px 30px;
		overflow:hidden;
		position:relative;
	}		

	
	.message_index .item{
		border:1px #000 dashed;
		border-radius:5px;
		box-sizing:border-box;
		background:rgba(255,255,255,0.7);
		position:relative;
	}	

	.message_index .item .label{
		height:50px;
		line-height:50px;
		text-align:center;
		background:#ddd;
		color:#555;
		clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
		font-weight:bold;
		font-size:21px;
	}	

	
	.message_index .item .text{
		padding:40px;
		box-sizing:border-box;
		position:relative;
	}	
	
	.message_index .item .text .date{
		font-size:25px;
		font-family: "Barlow", serif;
	}	
	
	.message_index .item .text .name{
		font-size:29px;
		font-weight:bold;
		margin:10px 0;
		color:#282F76;
	}	
	
	.message_index .item .text .ito{
		font-size:17px;
		text-align:justify;
		margin-bottom:80px;
	}
	
	.message_index .item .text a.btn_more{
		width:130px;
		height:50px;
		line-height:50px;
		font-size:19px;
		font-weight:bold;
		text-align:center;			
		display:block;
		position:absolute;
		right:50%;
		bottom:0;
		border-radius:5px 5px 0 0;
		border:1px #000 dashed;
		border-bottom:0;
		margin-right:-65px;
	}		
	
	.message_index .item .text a.btn_more:hover{
		background:#F74F77;
		color:#fff;
		border:1px #fff solid;
		border-bottom:0
	}	
		
	
	.message_index .item .image{
		width:100%;
		height:300px;
		margin-top:-10px;
	}
	
	


	/* task_index setting */
	
	.task_index{
		margin:70px 0;
		padding:50px 30px;
		overflow:hidden;
		position:relative;

	}		
	
	.task_index .name{
		padding:50px 0;
		font-size:50px;
		font-weight:bold;
		color:#282F76;
	}		


	.task_indexs{
		display:flex;
		flex-wrap:wrap;
		gap:10px;
	}	

	.task_indexs .item{
		width:calc(33.33% - 10px);
		border:1px #000 dashed;
		border-radius:5px;
		box-sizing:border-box;
		background:rgba(255,255,255,0.7);
		position:relative;
	}	


	
	
	/* video_index setting */
	
	
	.video_index{
		margin:0px auto 70px auto;
		display:flex;
		flex-wrap:wrap;
		gap:10px;
	}		
		
	
	.video_index .item{
		width: calc((100% - 40px) / 3);
		height: 250px;
		background:#fff;
		border-radius:5px;
		border:1px #000 dashed;
		display:block;
		cursor:pointer;
	}			
	
	.video_index .iframe{
		width:80%;
		min-height:600px;
		margin:0 auto;
		aspect-ratio: 16 / 10;
	}		
	
	.video_index .iframe iframe{
		width:100%;
		height:100%;
		aspect-ratio: 16 / 10;
	}		
	
	
	
	
	
	/* data_list setting */

	.data_list{
		width:103%;
		padding:20px;
		overflow:hidden;
		position:relative;
		display:flex;
		flex-wrap:wrap;
		gap:10px;
		box-sizing:border-box;
	}	
	
	.data_list .item{
		width:calc(50% - 10px);
		border:1px #000 dashed;
		border-radius:5px;
		box-sizing:border-box;
		background:rgba(255,255,255,0.7);
		position:relative;
		margin-bottom:10px;
	}		
	
	
	.data_list .item .label{
		height:40px;
        line-height:40px;
		font-size:21px;
		padding:10px;
		font-weight:bold;
		clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
	}		
	
	.data_list .item .content{
		padding:10px;	
	}		
	
	
	.data_list .item .date{
		font-size:20px;
		font-family: "Barlow", serif;
	}	

	.data_list .item .name{
		margin:20px 0 70px 0;
		font-size:17px;
	}	
	
	.data_list .item .image{
		height:300px;
		margin:10px 0;
		display:none;
	}	
	
	.data_list .item .ito{
		font-size:17px;
		line-height:30px;
		margin-bottom:70px;
		display:none;
	}	


	.data_list .item a.btn_more{
		width:130px;
		height:50px;
		line-height:50px;
		font-size:19px;
		font-weight:bold;
		text-align:center;			
		display:block;
		position:absolute;
		right:50%;
		bottom:0;
		margin-right:-65px;
		border-radius:5px 5px 0 0;
		border:1px #000 dashed;
		border-bottom:0;
	}		
	
	.data_list .item a.btn_more:hover{
		background:#F74F77;
		color:#fff;
		border:1px #fff solid;
		border-bottom:0
	}	




	/* video_list setting */

	.video_list{
		margin:70px 0;
		padding:50px 30px 0 30px;
		overflow:hidden;
		position:relative;
		display:flex;
		flex-wrap:wrap;
		gap:10px;
	}	
	
	.video_list .item{
		width: calc(50% - 10px);
		height: 200px;
		background:#fff;
		border-radius:5px;
		border:1px #000 dashed;
		display:block;
		cursor:pointer;
	}	











	
	
	
	
	
	/* em_img */
	
	.em_img1{
		width:400px;
		height:400px;
		position:fixed;
		top:-50px;
		right:0;
		z-index:-1;
		background:url(../../img/em_img1.svg)no-repeat center center / contain;	
	}	
		
	.em_img2{
		width:300px;
		height:200px;
		position:absolute;
		top:210px;
		left:-70px;
		z-index:0;
		background:url(../../img/em_img2.svg)no-repeat center center / contain;	
	}	
	
	
	/* aminate_img */
	
	.aminate_img1{
		width:400px;
		height:600px;
		position:absolute;
		top:250px;
		left:60px;
		z-index:2;
		background:url(../../img/aminate_img1.svg)no-repeat center center / contain;	
		animation-direction:alternate;
	}
	
	.aminate_img1_1{
		width:70px;
		height:250px;
		position:absolute;
		top:450px;
		left:30px;
		z-index:2;
		background:url(../../img/aminate_img1_1.svg)no-repeat center center / contain;	
		animation-direction:alternate;	
	}	
		
	.aminate_img1_2{
		width:250px;
		height:150px;
		position:absolute;
		top:400px;
		left:330px;
		z-index:1;
		background:url(../../img/aminate_img1_2.svg)no-repeat center center / contain;	
		animation-direction:alternate;	
	}	
			
	.aminate_img1_3{
		width:40px;
		height:100px;
		position:absolute;
		top:550px;
		left:330px;
		z-index:3;
		background:url(../../img/aminate_img1_3.svg)no-repeat center center / contain;	
		animation-direction:alternate;	
	}	
	
	.aminate_img4{
		width:300px;
		height:300px;
		position:absolute;
		bottom:50px;
		right:-50px;
		z-index:3;
		background:url(../../img/aminate_img4.svg)no-repeat center center / contain;	
		animation-direction:alternate;	
		display:none;
	}		
		
	.aminate_img4_1{
		width:100px;
		height:100px;
		position:absolute;
		bottom:230px;
		right:120px;
		z-index:2;
		background:url(../../img/aminate_img4_1.svg)no-repeat center center / contain;	
		display:none;
	}		
	
	.aminate_img6{
		width:250px;
		height:250px;
		position:absolute;
		bottom:350px;
		right:-50px;
		z-index:0;
		background:url(../../img/aminate_img6.svg)no-repeat center center / contain;	

	}		
	
	
	.container_name{
		position:relative;

	}
		
	
	.line1{	
		width:2px;
		height:130px;
		margin:50px auto;
		border:none;
		border-left:1px #000 dashed;
	}
	
	
	/* card setting */
	
	.container_sdgs{
		margin:0 0 70px 0;
		padding:50px 20px 150px 20px;
		background:rgba(255,243,217,0.7);
		position:relative;
		overflow:hidden;
		z-index:1;
		box-sizing:border-box;
	}	
	
	
	.container_sdgs .aminate_img5{
		width:200px;
		height:200px;
		position:absolute;
		top:560px;
		right:-100px;
		background:url(../../img/aminate_img5.svg)no-repeat center center / contain;	
	}	

	
	.container_sdgs .sdg18{
		width:200px;
		height:150px;
		margin:0 auto;
	}		

	
	
	.container_sdgs .slogan{
		padding:30px 0;
	}
	
	.container_sdgs .slogan .name{
		border:1px #000 dashed;
		padding:30px 20px;
		border-radius:5px;
		box-sizing:border-box;
		background:rgba(242,211,182,0.7);
		position:relative;
	}		
	
	
	.container_sdgs .slogan .name .aminate_img2{
		width:100px;
		height:100px;
		position:absolute;
		top:-30px;
		right:-10px;
		z-index:1;
		background:url(../../img/aminate_img2.svg)no-repeat center center / contain;
	}	

	.container_sdgs .slogan .name .n1{
		font-size:40px;
		padding-bottom:20px;
		font-weight:bold;	
		color:#282F76;
	}
	
	.container_sdgs .slogan .name .n1 span{
		color:#F74F77;
	}	
	

	.container_sdgs .slogan .name .n2{
		font-size:21px;
		font-weight:bold;
	}
	
	.container_sdgs .slogan .n3{
		font-size:17px;
		font-weight:bold;
		padding:30px 0 0 0;
		line-height:30px;
		color:#b5722d;
	}

	.container_sdgs .slogan .n4{
		font-size:17px;
		padding:30px 0 0 0;
		text-align:justify;
		line-height:30px;
	}
	
	
	
	.container_sdgs .em_img4{
		width:300px;
		height:250px;
		background:url(../../img/em_img4.svg)no-repeat center bottom / contain;
		position:absolute;
		bottom:0;
		right:50px;
		z-index:0;
	}	
	
	
	.container_sdgs .em_img4_1{
		width:50px;
		height:50px;
		background:url(../../img/em_img4_1.svg)no-repeat center bottom / contain;
		position:absolute;
		bottom:23px;
		right:242px;
		z-index:1;
		animation: spin 2s linear infinite;
	}	
	
	.container_sdgs .em_img4_2{
		width:50px;
		height:50px;
		background:url(../../img/em_img4_2.svg)no-repeat center bottom / contain;
		position:absolute;
		bottom:24px;
		right:216px;
		z-index:1;
		animation: spin 3s linear infinite;
	}		
	
	.container_sdgs .em_img4_3{
		width:50px;
		height:50px;
		background:url(../../img/em_img4_2.svg)no-repeat center bottom / contain;
		position:absolute;
		bottom:24px;
		right:269px;
		z-index:1;
		animation: spin 6s linear infinite;
	}		
	
	
	@keyframes spin{
		from{
			transform: rotate(0deg);
		}to{
			transform: rotate(360deg);
		}
	}	


	.container_sdgs .em_img4_4{
		width:60px;
		height:60px;
		background:url(../../img/em_img4_4.svg)no-repeat center bottom / contain;
		position:absolute;
		bottom:154px;
		right:393px;
		z-index:1;
	}	
	
	
	.container_card {
		width:102%;
		display: flex;
		flex-wrap: wrap;
		gap: 10px; /* 修正 gap 的數值 */
		align-items: stretch; /* 讓 .card 撐滿高度 */
	}

	.card {
		flex: 1 1 calc((100% - 30px) / 3); /* 讓每行最多 4 個 */
		max-width: calc((100% - 30px) / 3); /* 防止過大 */
		height: 250px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
		
	.card:hover .flip-card-container{
		transform: rotateY(180deg);
	}
		
	
	.flip-card-container{
		height:100%;
		width:100%;
		box-sizing:border-box;
		position: relative;
		transition: transform 0.8s;
		transform-style: preserve-3d;		
	}

	.front, .back{
		justify-content:center;
		align-items:center;
		height:100%;
		width:100%;
		padding:10px;
		box-sizing:border-box;
		border-left:1px #000 dashed;
		border-radius:5px;		
	}
	
	.front{
		position:absolute;
		backface-visibility:hidden;		
		background:#ccc;
		color:#000;
	}

	.back{
		background:#ddd;
		color:#555;
		position:absolute;
		transform:rotateY(180deg);
		backface-visibility:hidden;		
	}
	
	.back .name{
		font-size:15px;
		font-weight:bold;
	}	
	
	.back .name2{
		font-size:12px;
		margin:10px 0;
	}		
	
	.back .desc{
		
	}
	
	
	

	.front.sdg1{
		background:#EB4D5D url(../../img/sdgs/sdg-01.svg)no-repeat center center / 70%;
	}
	
	.front.sdg2{
		background:#D8B060 url(../../img/sdgs/sdg-02.svg)no-repeat center center / 70%;
	}
		
	.front.sdg3{
		background:#5CAC6F url(../../img/sdgs/sdg-03.svg)no-repeat center center / 70%;
	}
			
	.front.sdg4{
		background:#CC4F5F url(../../img/sdgs/sdg-04.svg)no-repeat center center / 70%;
	}
				
	.front.sdg5{
		background:#EF695C url(../../img/sdgs/sdg-05.svg)no-repeat center center / 70%;
	}	
	
	.front.sdg6{
		background:#58C0DD url(../../img/sdgs/sdg-06.svg)no-repeat center center / 70%;
	}
		
	.front.sdg7{
		background:#FBC764 url(../../img/sdgs/sdg-07.svg)no-repeat center center / 70%;
	}	
	
	.front.sdg8{
		background:#A44961 url(../../img/sdgs/sdg-08.svg)no-repeat center center / 70%;
	}
		
	.front.sdg9{
		background:#F38A5A url(../../img/sdgs/sdg-09.svg)no-repeat center center / 70%;
	}
			
	.front.sdg10{
		background:#E44F9B url(../../img/sdgs/sdg-10.svg)no-repeat center center / 70%;
	}	
	
	.front.sdg11{
		background:#F8AF5F url(../../img/sdgs/sdg-11.svg)no-repeat center center / 70%;
	}
		
	.front.sdg12{
		background:#D5A05D url(../../img/sdgs/sdg-12.svg)no-repeat center center / 70%;
	}
			
	.front.sdg13{
		background:#6D9065 url(../../img/sdgs/sdg-13.svg)no-repeat center center / 70%;
	}
			
	.front.sdg14{
		background:#4197C6 url(../../img/sdgs/sdg-14.svg)no-repeat center center / 70%;
	}		
	
	.front.sdg15{
		background:#80C571 url(../../img/sdgs/sdg-15.svg)no-repeat center center / 70%;
	}
		
	.front.sdg16{
		background:#3A789F url(../../img/sdgs/sdg-16.svg)no-repeat center center / 70%;
	}	
	
	.front.sdg17{
		background:#495F84 url(../../img/sdgs/sdg-17.svg)no-repeat center center / 70%;
	}
	
	
	
	
	

	.back.sdg1{
		background:#EB4D5D;
		color:#fff;	
	}
	
	.back.sdg2{
		background:#D8B060;
		color:#fff;	
	}
		
	.back.sdg3{
		background:#5CAC6F;
		color:#fff;	
	}
			
	.back.sdg4{
		background:#CC4F5F;
		color:#fff;	
	}
				
	.back.sdg5{
		background:#EF695C;
		color:#fff;	
	}
		
	.back.sdg6{
		background:#58C0DD;
		color:#fff;	
	}
			
	.back.sdg7{
		background:#FBC764;
		color:#fff;	
	}
				
	.back.sdg8{
		background:#A44961;
		color:#fff;	
	}
					
	.back.sdg9{
		background:#F38A5A;
		color:#fff;	
	}		
	
	.back.sdg10{
		background:#E44F9B;
		color:#fff;	
	}
		
	.back.sdg11{
		background:#F8AF5F;
		color:#fff;	
	}	
	
	.back.sdg12{
		background:#D5A05D;
		color:#fff;	
	}
		
	.back.sdg13{
		background:#6D9065;
		color:#fff;	
	}	
	
	.back.sdg14{
		background:#4197C6;
		color:#fff;	
	}
		
	.back.sdg15{
		background:#80C571;
		color:#fff;	
	}
			
	.back.sdg16{
		background:#3A789F;
		color:#fff;	
	}	
	
	.back.sdg17{
		background:#495F84;
		color:#fff;	
	}
	


	/* data_popup setting */

	.data_poppup_mask{
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.9);
		position:fixed;
		z-index:29;
		top:0;
		left:0;
		display:none;
	}

	.data_poppup{
		width:90%;
		height:90%;
		background:#fff;
		position:absolute;
		top:5%;
		right:5%;
		z-index:30;	
		box-sizing:border-box;
		padding:20px;
		border-radius:5px;
		overflow:hidden;
	}

	.data_poppup .btn_close{
		width:130px;
		height:50px;
		line-height:50px;
		font-size:19px;
		font-weight:bold;
		text-align:center;			
		display:block !important;
		position:absolute;
		right:50%;
		top:0;
		margin-right:-65px;
		border-radius:0 0 5px 5px;
		border:1px #000 dashed;
		border-top:0;
	}

	
	.data_poppup .btn_close:hover{
		background:#F74F77;
		color:#fff;
		border:1px #fff solid;
		border-bottom:0
	}	

	.data_poppups{
		width:100%;
		height:100%;
		padding:50px 0 0 0;
		box-sizing:border-box;
	}


	.data_poppup iframe{
		width:100%;
		height:100%;	
	}
	
	
	.container_data_detail{
	}
	
	.container_data_detail .name{
		font-size:23px;
	}

	.container_data_detail .date{
		font-size:35px;
		font-family: "Barlow", serif;
	}	

	.container_data_detail .image{
		height:300px;
		margin:10px 0;
	}	
	
	.container_data_detail .txtcont{
		font-size:17px;
		line-height:25px;
		margin:20px 0;
	}	


	
	/* cursor setting */
	
    .cursor {
        width: 50px;
        height: 50px;
        position: absolute;
		z-index:-1;
    }
	
    .cursor:nth-of-type(n) {
        background:url(../../img/cursor/1.svg)no-repeat center center / 25px;		
    }	

	.coming_soon{
		height:200px;
		text-align:center;
		font-size:70px;
		color:#fff;
		padding-bottom:40px;
	}


	a.btn_gotop{
		width:80px;
		height:80px;
		line-height:80px;
		text-align:center;
		border-radius:100%;
		position:fixed;
		bottom:20px;
		right:50%;
		z-index:10px;
		display:block;
		border:1px #000 dashed;
		color:#000;
		background:rgba(255,255,255,0.7);
		margin-right:-41px;
		z-index:10;
	}	
	
	
	a.btn_gotop:hover{
		background:#F74F77;
		color:#fff;
		border:1px #fff solid;
	}	


	a.btn_gotop span{
		font-size:30px;
	}	



	.anchor_fix{
		position:absolute;
		top:19px;
		height: 0;
		display:block;
	}



	.name_main{
		padding:50px 0;
		font-size:35px;
		text-align:center;
		font-weight:bold;
		position:relative;
	}


	.name_main .em_img5-01{
		width:0;
	}


	.name_main span{
		color:#F74F77;
	}
	
	
	a.btn_mores{
		width:200px;
		height:50px;
		line-height:50px;
		font-size:19px;
		font-weight:bold;
		text-align:center;			
		display:block;
		border-radius:5px;
		border:1px #000 dashed;
		margin:50px auto;
		color:#000;
		background:rgba(255,255,255,0.5);
	}		
	
	a.btn_mores:hover{
		background:#F74F77;
		color:#fff;
		border:1px #fff solid;
	}		
	
	
	
	/* footer setting */
	
	.footer{
		background:#282F76 url(../../img/background_footer.png) bottom center / cover;
		color:#fff;
		position:relative;
		
	}
		
	.footers{
		padding:50px 20px 100px 20px;
		position:relative;
	}
	
	.footer .copyright{
		margin:0 auto;
		text-align:center;
		padding:50px 0;
		font-size:17px;
	}		
			
	
	
	.footers .section{
	}
	
	.footers .section .item{
		box-sizing:border-box;
		min-height:100px;
		background:rgba(255,255,255,0.9);
		justify-content:center;
		align-items:center;
		border-radius:5px;
		padding:10px;
		margin-bottom:10px;
	}
	
	.footers .section .item.main{
		background:rgba(213,236,250,0.9);
	}	
	
	
	.footers .section .item .logo{
		width:100%;
		height:100px;
	}
	
	.footers .section .item .link{
		margin-bottom:10px;
		box-sizing:border-box;
		padding:10px;
		border-radius:5px;
		border:1px #000 dashed;
		display:block;
		color:#F74F77;		
	}
	
	.footers .section .item .link:hover{
		border:1px #fff solid;
		background:#F74F77;
		color:#fff;
		text-decoration:none;
	}	
	
	.footers .section .item .link .name{
		flex:auto;
		font-size:19px;
		font-weight:bold;
	}	
	
	
	.footers .section .item .link .links{
		width:100%;
		justify-content:center;
		align-items:center;		
	}	
	
	
	.footers .section .item .link .links .icon{
		width:50px;
		margin:0 auto 20px auto;
		border-radius:50px;
		
	}
	
	.footers .section .item .link .links .icon.facebook{
		width:50px;
		height:50px;
		background:url(../../img/facebook1.svg)no-repeat center center / contain;
	}
	
	.footers .section .item .link .links .icon.instagram{
		width:50px;
		height:50px;
		background:url(../../img/instagram1.svg)no-repeat center center / contain;
	}	
	
	.footers .section .item .link .links .url_name{
		flex:auto;
		font-size:19px;
		font-weight:bold;
		text-align:center;
	}	


	/*
	.footers .section .item .link .url{
		margin:10px 0;
		display:block;
		word-wrap:break-word;
		overflow-wrap:break-word;	
		color:#282F76;		
		font-size:17px;
	}
	*/
	
	.footers .section .item .contact{
		margin-bottom:20px;
		box-sizing:border-box;
		padding:10px;
		border-radius:5px;
		border:1px #000 dashed;
		width:100%;
		
	}
		
	.footers .section .item .contact .icon{
		width:50px;
		height:50px;
		border-radius:50px;	
		margin:0 auto 20px auto;
		background:url(../../img/phone1.svg)no-repeat center center / contain;
	}		
		

	.footers .section .item .contact .data{
		flex:auto;
		font-family: "Barlow", serif;
		text-align:center;
	}		
		
	.footers .section .item .contact .data .name{
		color:#000;
	}
	
	.footers .section .item .contact .data .phone{
		font-size:21px;
		color:#000;		
	}
	
	.footer_em_img5{
		height:250px;
		position:absolute;
		top:-200px;
		left:200px;
		z-index:10s;
	}

	.footer_em_img5s{
		height:250px;
		position:relative;
		overflow:hidden;
	}


	.footer .footer_em_img5s .em_img5-03{
		width:400px;
		height:300px;
		background:url(../../img/em_img5-03.svg)no-repeat center center / contain;
		position:absolute;
		bottom:-100px;
		left:0;
		z-index:0;
	}

	.footer .footer_em_img5s .em_img5-02{
		width:80px;
		height:80px;
		background:url(../../img/em_img5-02.svg)no-repeat center center / contain;
		position:absolute;
		bottom:127px;
		left:170px;
		z-index:1;
		animation: spin2 2s linear infinite;
	}
	
	
	.footer .footer_em_img5s .em_img5-02a{
		width:100px;
		height:100px;
		background:url(../../img/em_img5-02.svg)no-repeat center center / contain;
		position:absolute;
		bottom:146px;
		left:122px;
		z-index:1;
		animation: spin2 4s linear infinite;
	}	
	
	
	.footer .footer_em_img5s .em_img5-01{
		width:33px;
		height:33px;
		background:url(../../img/em_img5-01.svg)no-repeat center center / contain;
		position:absolute;
		bottom:77px;
		left:192px;
		z-index:2;
		animation: spin3 4s linear infinite;
	}		
	
	
	@keyframes spin2{
		from{
			transform: rotate(0deg);
		}to{
			transform: rotate(360deg);
		}
	}	

	@keyframes spin3{
		from{
			transform: rotate(360deg);
		}to{
			transform: rotate(0deg);
		}
	}	


	
}