@charset "utf-8";

@media screen and (min-width: 641px) 
{
	#wrapper
	{	
		width: 100%;
		overflow: visible;
	}

	#header_con
	{
		width: 100%;
		height: 80px;

		background: #ffffff;
	}

	#logo
	{
		width: 229px;
		height: 33px;
		left: 36px;
		top: 23px;
		
		background: url('../assets/logo.png') no-repeat center top;
	}

	#nav_con
	{
		width: 640px;
		height: 80px;
		right: 0px;
		top: 0px;
	}

	#menu_close 
	{
		display: none;
	}

	#menu_open
	{
		display: none;
	}

	#nav_bg
	{
		display: none;
	}

	.nav_item
	{
		width: 150px;
		height: 80px;
		top: 0px;

		background: #ffffff;

		color: #007289;
		font-size: 25px;
		line-height: 80px;
		text-align: center;
		vertical-align: middle; 
	}

	.nav_item_current	
	{	
		cursor: default;
		pointer-events:none; 
		background:#43c7dc;	
		color:#ffffff;		
	}
	#nav_1	{	right:490px;	}
	#nav_2	{	right:340px;	}
	#nav_3	{	right:190px;	}
	#nav_4	{	right:40px;		}








	/**********************************/







	#index_con
	{
		width: 100%;
		height: 1440px;
		left: 0px;
		top: 80px;

		margin-bottom: 100px;
	}

	#index_main_con
	{
		width: 100%;
		height: 680px;
		left: 0px;
		top: 0px;

		background-image: url('../assets/a0.png');
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}

	#index_main_sub_con
	{
		left: 50%;
		top: 50%;
	}

	#a1
	{
		width: 636px;
		height: 731px;
		left: -406px;
		top: -292px;
		background: url('../assets/a1.png') no-repeat center top;
	}

	#a2
	{
		width: 296px;
		height: 448px;
		left: -364px;
		top: -316px;
		background: url('../assets/a2.png') no-repeat center top;
	}

	#a3
	{
		width: 350px;
		height: 53px;
		left: -4px;
		top: -256px;
		background: url('../assets/a3.png') no-repeat center top;
	}

	#a9
	{
		width: 658px;
		height: 70px;
		left: -360px;
		top: 202px;
		background: url('../assets/a9.png') no-repeat center top;
	}

	#a10
	{
		width: 225px;
		height: 76px;
		left: 48px;
		top: 127px;
		background: url('../assets/a10.png') no-repeat center top;
	}

	#hint_con
	{
		overflow: visible;
		left: 50%;
		bottom: 60px;
	}

	#h1
	{
		width: 98px;
		height: 30px;
		left: -49px;
		top: 0px;
		background: url('../assets/h1.png') no-repeat center top;
	}

	#h2
	{
		width: 13px;
		height: 14px;
		left: -7px;
		top: 33px;
		background: url('../assets/h2.png') no-repeat center top;
	}

	.index_tag
	{
		height: 42px;
		left: 20px;
		padding-left: 18px;

		border-radius: 14px;
		background-color: #20aabf;

		color: #ffffff;
		font-size: 22px;
		line-height: 42px;
		letter-spacing: 2px;
	}
	#index_tag_1	{	width: 185px;	top: -184px;	}
	#index_tag_2	{	width: 145px;	top: -128px;	}
	#index_tag_3	{	width: 185px;	top: -72px;	}
	#index_tag_4	{	width: 305px;	top: -16px;	}
	#index_tag_5	{	width: 280px;	top: 40px;	}


	/********/
	/********/
	/********/


	#index_nav_con
	{
		width: 100%;
		height: 85px;
		left: 0px;
		top: 680px;

		background: #00c8e7;
	}

	#index_nav_sub
	{
		width: 1200px;
		height: 85px;
		left: 50%;
		margin-left: -600px;
		top: 0px;
	}

	#a11
	{
		width: 1200px;
		height: 85px;
		left: 0px;
		top: 0px;

		background: url('../assets/a11.png') no-repeat center top;
	}

	.index_nav_item
	{
		width: 245px;
		height: 85px;
		top: 0px;

		background: #00c8e7;
	}
	#index_nav_1	{	left:110px;	}
	#index_nav_2	{	left:355px;	}
	#index_nav_3	{	left:600px;	}
	#index_nav_4	{	left:845px;	}

	.index_nav_bg
	{
		width: 100%;
		height: 0%;
		left: 0px;
		bottom: 0px;

		background: #007688;
	}
	.index_nav_txt
	{
		width: 245px;
		height: 30px;
		left: 0px;
		top: 28px;

		color: #ffffff;
		font-size: 28px;
		line-height: 30px;
		letter-spacing: 2px;
		font-weight: bold;
		text-align: center;
	}

	.index_nav_arrow
	{
		width: 13px;
		height: 8px;
		left: 115px;
		top: 64px;

		background-image: url('../assets/arrow_ud.png');
		background-repeat: no-repeat;
		background-position: 0% 0%;
	}



	/********/
	/********/
	/********/



	#index_question_con
	{
		width: 100%;
		height: 85px;
		left: 0px;
		top: 765px;

		background: #007688;
	}

	.index_question
	{
		width: 100%;
		height: 85px;
		opacity: 0;

		color: #ffffff;
		font-size: 37px;
		line-height: 85px;
		letter-spacing: 0px;
		text-align: center;
	}

	.index_question_q
	{
		font-family: "eras_med";
		font-size: 56px;
		letter-spacing: 2px;
	}



	/********/
	/********/
	/********/



	#index_percent_con
	{
		width: 100%;
		height: 590px;
		left: 0px;
		top: 850px;
	}

	#index_percent_area_blue
	{
		width: 100%;
		height: 0px;

		background: #33d3ec;
	}
	
	.index_percent_word
	{
		width: 640px;
		height: 86px;
		left: 50%;
		margin-left: -320px;
		opacity: 0;

		color: #20aabf;
		font-family: "calibri_bold";
		font-size: 110px;
		line-height: 86px;
		font-weight: bold;
		text-align: center;
	}
	#index_percent_word_yes	{	color: #ffffff;		}
	#index_percent_word_no	{	color: #33d3ec;		}

	#index_percent_ball_con
	{
		width: 1200px;
		height: 100%;
		left: 50%;
		margin-left: -600px;
	}

	.ball
	{	
		width: 50px;
		height: 50px;

		opacity: 0;
	}

	.ball_sub
	{
		width: 50px;
		height: 50px;
		margin-left: -25px;
		margin-top: -25px;

		border-radius: 25px;
		overflow: hidden;

		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}










	/**********************************/

	#try_con
	{
		width: 100%;
		height: calc( 100vh - 80px );
		left: 0px;
		top: 80px;

		background: #d5f6ff;
	}

	#try_main_con
	{
		width: 100%;
		height: 400px;
		left: 0px;
		top: 0px;

		background: url('../assets/b0.png') no-repeat center top;
	}

	#try_main_sub_con
	{
		left: 50%;
		top: 50%;
	}

	#b1
	{
		width: 486px;
		height: 48px;
		left: -85px;
		top: -140px;

		background: url('../assets/b1.png') no-repeat center top;
	}

	#b2
	{
		width: 332px;
		height: 78px;
		left: -8px;
		top: -67px;

		background: url('../assets/b2.png') no-repeat center top;
	}

	#b3
	{
		width: 630px;
		height: 160px;
		left: -160px;
		top: 32px;

		color: #138fa3;
		font-size: 29px;
		line-height: 44px;
		letter-spacing: 1px;
		text-align: center;
	}






	#try_nav_con
	{
		width: 100%;
		height: 84px;
		left: 0px;
		top: 400px;

		background: #00abc5;
	}

	#b4
	{
		width: 500px;
		height: 84px;
		left: 50%;
		margin-left:-250px;
		top: 0px;

		color: #ffffff;
		font-size: 38px;
		line-height: 84px;
		letter-spacing: 2px;
		text-align: center;
	}

	#b5
	{
		width: 19px;
		height: 11px;
		left: 50%;
		margin-left: 145px;
		top: 37px;

		background: url('../assets/b5.png') no-repeat center top;
	}

	#try_nav_viewport_con
	{
		width: 100%;
		height: 0px;
		left: 0px;
		top: 484px;

		overflow: hidden;
	}

	#try_nav_sub_con
	{
		width: 100%;
		height: 220px;
		left: 0px;
		bottom: 0px;

		background: #00abc5;
	}

	.try_nav_item
	{
		width: 475px;
		height: 65px;
		left: 50%;

		border-radius: 10px;
		background-color: #33d3ec;

		color: #00525e;
		font-size: 35px;
		line-height: 65px;
		letter-spacing: 2px;
		text-align: center;
	}
	#try_nav_1	{	margin-left:-482px;	top: 5px;	}
	#try_nav_2	{	margin-left:-482px;	top: 75px;	}
	#try_nav_3	{	margin-left:-482px;	top: 145px;	}
	#try_nav_4	{	margin-left:7px;		top: 5px;	}
	#try_nav_5	{	margin-left:7px;		top: 75px;	}
	#try_nav_6	{	margin-left:7px;		top: 145px;	}

	.try_nav_current
	{
		cursor: default;
		pointer-events:none;
		color: #ffffff; 
		background: #008397;
	}




	#try_item_con
	{
		width: 1200px;
		height: 1500px;
		left: 50%;
		margin-left: -600px;
		top: 484px;
	}

	.try_item
	{
		width: 290px;
		height: 290px;

		background: #ffffff;
	}

	.try_img
	{
		width: 290px;
		height: 178px;
		left: 0px;
		top: 0px;

		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}

	.try_title
	{
		width: 260px;
		height: 22px;
		left: 15px;
		top: 192px;

		color: #008ca2;
		font-size: 20px;
		line-height: 22px;
		letter-spacing: 0px;
		font-weight: bold;
	}

	.try_txt
	{
		width: 260px;
		height: 60px;
		left: 15px;
		top: 224px;

		color: #181818;
		font-size: 18px;
		line-height: 28px;
		letter-spacing: 0px;
		font-weight: bold;
	}

	.try_open_con
	{
		width: 40px;
		height: 40px;
		left: 250px;
		top: 70px;

		background: #ffffff;
	}

	.try_open
	{
		width: 40px;
		height: 40px;

		background: url('../assets/arrow_r.png') no-repeat center center;
	}





	/*
	{
		width: px;
		height: px;
		left: px;
		top: px;
	}
	*/








	/**********************************/

	#detail_con
	{
		width: 100%;
		height: calc( 100vh - 80px);
		left: 0px;
		top: 80px;
	}

	#detail_black
	{
		width: 100%;
		height: 100%;

		background: rgba(0,0,0,0.8);
	}

	#detail_sub_con
	{
		width: 1280px;
		height: 510px;
		left: 50%;
		margin-left: -640px;
		top: 50%;
		margin-top: -255px;

		background: #ffffff;
	}

	#detail_img
	{
		width: 640px;
		height: 510px;
		left: 0px;
		top: 0px;

		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}

	#detail_title
	{
		width: 490px;
		height: 26px;
		left: 672px;
		top: 20px;

		color: #008ca2;
		font-size: 26px;
		line-height: 26px;
		letter-spacing: 0px;
		font-weight: bold;
	}

	#detail_txt
	{
		width: 490px;
		height: 450px;
		left: 672px;
		top: 55px;

		color: #181818;
		font-size: 19px;
		line-height: 32px;
		letter-spacing: 0px;
		font-weight: bold;
	}

	#detail_close_con
	{
		width: 64px;
		height: 64px;
		left: 576px;
		top: 223px;

		background: #ffffff;
	}

	#detail_close
	{
		width: 64px;
		height: 64px;

		background: url('../assets/close.png') no-repeat center center;
	}







}