:root{
	--color-bg-white		: #ffffff;
	--color-text-white		: #ffffff;
	--color-bg-black		: #000000;
	--color-bg-gray			: #ebe7e4;
	--color-bg-orange		: #f99e33;
	--color-text-orange		: #f99e33;
	--color-line-orange		: #f99e33;
}

html{ font-size: 16px; }
body{
	margin: 0; padding: 0;
	min-width: 350px;
	font-family: 'Noto Sans KR', sans-serif;
	background-color: var(--color-bg-white);;
}
body > section{ margin: 0; padding: 0; text-align: center; position: relative; box-sizing: border-box; }
body > section > div > img{ width: 100%; max-width: 1400px; vertical-align: bottom !important; }
img{ margin: 0; padding: 0; border: 0; }
a{ color: inherit; font-family: inherit; text-decoration: inherit; text-decoration: none; }

.bg_orange{ background-color: var(--color-bg-orange); }
.bg_gray{ background-color: var(--color-bg-gray); }
.bg_img{ background-size: auto 100%; background-repeat: repeat-x; background-position: 50% 50%; }

.div_line_orange{
	height: 0;
	background-color: transparent;
	border-bottom: 2px dashed var(--color-bg-orange);
	bottom: 0; left: 0; right: 0;
	position: absolute; z-index: -1;
}
.div_middle_line_orange{
	height: 0;
	background-color: transparent;
	border-bottom: 2px dashed var(--color-bg-orange);
	bottom: 50%; left: 0; right: 0;
	position: absolute; z-index: -1;
}
.div_middle_line_gray{
	height: 0;
	background-color: transparent;
	border-bottom: 2px dashed #999;
	bottom: 50%; left: 0; right: 0;
	position: absolute; z-index: -1;
}

#sec_020{ background-image: url('./img/sec_020_bg.jpg'); }
#sec_030{ background-color: var(--color-bg-black); }
#sec_030 .mode_mo{ display: none; }
#sec_030 .mode_mo img{ width: 100%; vertical-align: bottom !important; }
#sec_030 .mode_pc{ width: 100%; text-align: center; display: block; }
#sec_030 .mode_pc video{ margin: 0; padding: 0; width: 100%; max-width: 1200px; border: 0; vertical-align: bottom; }
#sec_070{ background-image: url('./img/sec_070_bg.jpg'); }
#sec_080{ background-image: url('./img/sec_080_bg.jpg'); }
#sec_160{ background-image: url('./img/sec_160_bg.jpg'); }
#sec_230{ background-color: #fac896; }
#sec_240{ background-color: #fabb7d; }
#sec_250{ background-color: #faaf64; }
#sec_260{ background-color: #faa34b; }
#sec_270{ background-color: #fa9632; }
#sec_280{ background-color: #fa8919; }
#sec_290{ background-color: #fa7d00; }
#sec_320{ background-color: #fcfcfc; }
#sec_370{ background-color: #fff3be; }
#sec_380{ background-color: #fedd8e; }
#sec_390{ background-color: #f9ca24; }
#sec_400{ background-color: #ffbd28; }
#sec_410{ background-color: #ff9b05; }
#sec_420{ background-color: #ff7105; }
#sec_430{ background-color: #fff4dc; }
#sec_470{
	background-color: #232122;
	background-image: url('./img/sec_470_bg.jpg');
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#sec_470 #sec_470_content{
	width: 100%;
	text-align: center; vertical-align: middle;
	position: absolute; top: 58%; bottom: 0; left: 50%; transform: translateX(-50%);
}
#sec_470 #sec_470_content #sec_470_content_text span{ color: #fff; font-size: 2.0rem; font-weight: 300; white-space: nowrap; }
#sec_470 #sec_470_content #sec_470_content_text span:nth-child(1){ color: var(--color-text-orange); font-weight: 600; }
#sec_470 #sec_470_content #sec_470_content_button a span{
	margin-top: 60px; padding: 15px 0;
	width: 80%; max-width: 800px;
	color: #333; font-size: 2.2rem; font-weight: 600;
	text-align: center; text-decoration: none; white-space: nowrap;
	background-color: #fff; border-radius: 100px;
	display: inline-block;
}

/* fly */
#fly{ position: fixed; bottom: 10px; right: 10px; z-index: 89; }
#fly div img{ margin-bottom: 5px; width: 50px; height: 50px; }
#fly div:last-child img{ margin-bottom: 0; }

/* modal_form */
.modal_form_back{
	margin: 0; padding: 0;
	background-color: #333;
	display: none;
	position: fixed; top: 0; right: 0; bottom: 0; left: 0;
	opacity: 0.0;
	z-index: 98;
}
.modal_form{
	margin: 0; padding: 30px 20px;
	width: 90%; max-width: 450px; min-width: 350px;
	color: #333; font-size: 1.1rem;
	background-color: #FFFFFF;
	border: 1px solid #e0e0e0; border-radius: 10px 10px 0 0;
	box-sizing: border-box;
	display: none;
	position: fixed; bottom: -500px; left: 50%; transform: translateX(-50%);
	z-index: 99;
}
.modal_form .title{ font-size: 2.0rem; font-weight: 600; position: relative; }
.modal_form .title img{
	width: 30px; height: 30px;
	position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
}
.modal_form .content{ margin: 0; }
.modal_form .content table{
	width: 100%;
	border-width: 2px 0 1px 0; border-style: solid; border-color: #ccc;
}
.modal_form .content table tbody tr td{
	padding: 3px 0;
	line-height: 200%;
	background-color: #fff;
	border-width: 0 0 1px 0; border-style: solid; border-color: #ccc;
}
.modal_form .content input[type=text]{
	padding: 5px 10px;
	width: calc(100% - 20px);
	color: #666; font-size: 1.1rem;
	background-color: #e0e0e0; border: 0; border-radius: 5px;
	display: inline-block;
}
.modal_form .content input[type=text]::placeholder{ color: #666; }
.modal_form .content select{
	padding: 5px 10px;
	width: 100%;
	color: #666; font-size: 1.1rem;
	background-color: #e0e0e0; border: 0; border-radius: 0; border-radius: 5px;
	background-image: url('./img/fc_select_down.png');
	background-size: auto 30%;
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) 50%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.modal_form .agree{ margin-top: 10px; }
.modal_form .agree input[name=agree]{ position: absolute; left: -20px; opacity: 0.0; }
.modal_form .agree span{ padding-left: 30px; font-weight: 700; display: inline-block; position: relative; }
.modal_form .agree span:before{
	content: "";
	width: 20px; height: 20px;
	background-image: url("./img/fc_check_off.png");
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position-x: 50%; background-position-y: 50%;
	position: absolute; top: 50%; left: 0; transform: translateY(-50%);
}
#reservation.modal_form .agree input[name=agree]:checked + span:before{ background-image: url("./img/fc_check_on_reservation.png"); }
#consulting.modal_form .agree input[name=agree]:checked + span:before{ background-image: url("./img/fc_check_on_consulting.png"); }
.modal_form .button{ margin-top: 20px; }
.modal_form .button a{ text-decoration: none; }
.modal_form .button a div{
	width: 100%; line-height: 50px;
	color: #fff; text-align: center; text-decoration: none;
	background-color: #aaa; border-radius: 5px;
	display: block;
}
.modal_form .button.button_reservation a div{
	background-color: #00A2FF;
}
.modal_form .button.button_consulting a div{
	background-color: #00945e;
}

@media( min-width: 770px ){
	.div_line_orange{ z-index: 1; }
	.div_middle_line_orange{ z-index: 1; }
	.div_middle_line_gray{ z-index: 1; }

	#sec_010 img{ content: url(./img/sec_010_pc.jpg); }
	#sec_020 img{ content: url(./img/sec_020_pc.jpg); }
	#sec_030 .mode_mo{ display: block; }
	#sec_030 .mode_pc{ display: none; }
	#sec_040 img{ content: url(./img/sec_040_pc.jpg); }
	#sec_050 img{ content: url(./img/sec_050_pc.jpg); }
	#sec_060 img{ content: url(./img/sec_060_pc.jpg); }
	#sec_070 img{ content: url(./img/sec_070_pc.jpg); }
	#sec_080 img{ content: url(./img/sec_080_pc.jpg); }
	#sec_090 img{ content: url(./img/sec_090_pc.jpg); }
	#sec_100 img{ content: url(./img/sec_100_pc.jpg); }
	#sec_110 img{ content: url(./img/sec_110_pc.jpg); }
	#sec_120 img{ content: url(./img/sec_120_pc.jpg); }
	#sec_130 img{ content: url(./img/sec_130_pc.jpg); }
	#sec_140 img{ content: url(./img/sec_140_pc.jpg); }
	#sec_150 img{ content: url(./img/sec_150_pc.jpg); }
	#sec_160 img{ content: url(./img/sec_160_pc.jpg); }
	#sec_170 img{ content: url(./img/sec_170_pc.jpg); }
	#sec_180 img{ content: url(./img/sec_180_pc.jpg); }
	#sec_190 img{ content: url(./img/sec_190_pc.jpg); }
	#sec_200 img{ content: url(./img/sec_200_pc.jpg); }
	#sec_210 img{ content: url(./img/sec_210_pc.jpg); }
	#sec_220 img{ content: url(./img/sec_220_pc.jpg); }
	#sec_230 img{ content: url(./img/sec_230_pc.jpg); }
	#sec_240 img{ content: url(./img/sec_240_pc.jpg); }
	#sec_250 img{ content: url(./img/sec_250_pc.jpg); }
	#sec_260 img{ content: url(./img/sec_260_pc.jpg); }
	#sec_270 img{ content: url(./img/sec_270_pc.jpg); }
	#sec_280 img{ content: url(./img/sec_280_pc.jpg); }
	#sec_290 img{ content: url(./img/sec_290_pc.jpg); }
	#sec_300 img{ content: url(./img/sec_300_pc.jpg); }
	#sec_310 img{ content: url(./img/sec_310_pc.jpg); }
	#sec_320 img{ content: url(./img/sec_320_pc.jpg); }
	#sec_330 img{ content: url(./img/sec_330_pc.jpg); }
	#sec_340 img{ content: url(./img/sec_340_pc.jpg); }
	#sec_350 img{ content: url(./img/sec_350_pc.jpg); }
	#sec_360 img{ content: url(./img/sec_360_pc.jpg); }
	#sec_370 img{ content: url(./img/sec_370_pc.jpg); }
	#sec_380 img{ content: url(./img/sec_380_pc.jpg); }
	#sec_390 img{ content: url(./img/sec_390_pc_new.png); }
	#sec_400 img{ content: url(./img/sec_400_pc.jpg); }
	#sec_410 img{ content: url(./img/sec_410_pc.jpg); }
	#sec_420 img{ content: url(./img/sec_420_pc.jpg); }
	#sec_430 img{ content: url(./img/sec_430_pc.jpg); }
	#sec_440 img{ content: url(./img/sec_440_pc.jpg); }
	#sec_450 img{ content: url(./img/sec_450_pc.jpg); }
	#sec_460 img{ content: url(./img/sec_460_pc.jpg); }
	#sec_470 img{ content: url(./img/sec_470_pc.jpg); }
	#sec_470 #sec_470_content{ top: 50%; }
	#sec_470 #sec_470_content #sec_470_content_text span{ font-size: 2.0rem; }
	#sec_470 #sec_470_content #sec_470_content_button a span{ margin-top: 30px; width: 90%; }
}