body.on::before {
	content: '';
	position: absolute; top: 0px; left: 0px;
	width: 100vw; height: 120vh;
	background-color: #000;
	z-index: 1;
}
#header { background-color: #000; }
#header > div { justify-content: center; }
#header .logo { width: 145px; }

#nav { display: none; }

#header .nav_btn,
#header .icon_btn { display: inline-block; }

#header .nav_btn {
	position: absolute; top: 6px; left: 0px;
	width: 36px; height: 33px;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	cursor: pointer;
}


#header .nav_btn > div {
	width: 100%; height: 4px;
	border-radius: 4px;
	background-color: #fff;
}

#header .icon_btn {
	position: absolute; top: 6px; right: 0px;
	width: auto; height: auto;
	display: flex;
	align-items: center;
	gap: 25px;
	cursor: pointer;
}

#header .icon_btn a:nth-child(1) { width: auto; height: 24px; }
#header .icon_btn a:nth-child(2) { width: auto; height: 34px; }
#header .icon_btn a:nth-child(3) { width: auto; height: 29px; }

#header .icon_btn a img {
	transition: all 150ms ease-in-out;
	-webkit-transition: all 150ms ease-in-out;
	-moz-transition: all 150ms ease-in-out;
}

#header .icon_btn a img.blank { width: auto; height: 100%; }
#header .icon_btn a img.white,
#header .icon_btn a img.color {
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
	opacity: 0;
}

#header .icon_btn a img.white { opacity: 1; }
#header .icon_btn a img.color { opacity: 0; }

#header .icon_btn a:hover img.white { opacity: 0; }
#header .icon_btn a:hover img.color { opacity: 1; }


#wrap {
	padding: 75px 80px 200px;
}



.about_article {
	width: 100%; height: auto;
}

.about_article .channel_art {
	width: 100%; height: 322px;

	background-image: url("../images/channel_art.png");
	background-size: cover;
	background-position: center 42%;
	background-repeat: no-repeat;

	/* background-attachment: fixed; */
}


.about_info {
	margin-top: 180px;

	left: 50%;
	transform: translate(-50%, 0%);
	width: 100%; max-width: 1400px; height: auto;

}

.about_info > div {
	left: 50%;
	transform: translate(-50%, 0%);
	width: 100%; max-width: 1580px; height: auto;
}

.about_info .title_area {
	width: calc(100% - 695px); height: auto;
}

.about_info .title_area .title {
	width: 100%; height: auto; line-height: 1;
	font-size: 55px; color: #fff; text-align: left;
	font-weight: 700;
}

.about_info .title_area .sub {
	width: 100%; height: auto; line-height: 1.2;
	padding-left: 30px;
	margin-top: 55px;
	font-size: 40px; color: #fff; text-align: left;
}

.about_info .title_area .sub::before {
	content: '';
	position: absolute; top: 0px; left: 1px;
	width: 5px; height: 100%;
	background-color: #33abff;
}

.about_info .title_area .icon {
	width: 100%; height: auto;
	margin-top: 40px;

	display: flex;
	gap: 30px;
    align-items: center;
}

.about_info .title_area .icon .icon_item:nth-child(1) { width: auto; height: 45px; }
.about_info .title_area .icon .icon_item:nth-child(2) { width: auto; height: 55px; }
.about_info .title_area .icon .icon_item:nth-child(3) { width: auto; height: 51px; }
.about_info .title_area .icon .icon_item:nth-child(4) { width: auto; height: 42px; margin-top: 6px; }

.about_info .title_area .icon .icon_item img { width: auto; height: 100%; }



.about_info .desc_area {
	width: 695px; height: auto;
}

.about_info .desc_area .desc {
	width: 100%; height: auto; line-height: 2;
	font-size: 24px; color: #fff;
	text-align: left; 
	letter-spacing: -0.8px;
    word-break: keep-all;
	font-weight: 500;
}

.about_info .desc_area .desc span { 
	color: #33abff;
	font-weight: 700;
}


#wrap.work { padding: 0px 0px 0px; }
.work_article {
	width: 100%; height: auto;
	display: flex;
	flex-wrap: wrap;
}

.work_article .work_item {
	width: 25%; height: auto;
}

.work_article .work_item .work_img {
	width: 100%; height: auto;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.work_article .work_item .work_img img { width: 100%; height: auto; }

.work_article .work_item .work_title {
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
	background-color: #000;
	opacity: 0;
	display: flex;
	justify-content: center;
    align-items: center;

	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
}

.work_article .work_item:hover .work_title { opacity: 0.77; }


.work_article .work_item .work_title > div {
	width: 100%; height: auto; line-height: 1.3;
	font-size: 24px; color: #fff; text-align: center;
	padding: 0px 15px;
    word-break: break-all;
}


.content_article {
	width: 100%; height: auto;
}

.content_article > div {
	width: 100%; max-width: 1012px; height: auto;
	left: 50%; 
	transform: translate(-50%, 0%);
}

.content_article .video_box {
	width: 100%; height: auto;
}

.content_article .video_box img {
	width: 100%; height: auto;
}
.content_article .video_box iframe {
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
}	

.content_article .info_box {
	width: 100%; height: auto;
	margin-top: 25px;
}


.content_article .info_box .title {
	width: 100%; height: auto; line-height: 1.3;
	font-size: 36px; color: #fff;
	font-weight: 700;
	text-align: left;
}

.content_article .info_box .sub {
	width: 100%; height: auto; line-height: 1.2;

	font-size: 22px; color: #fff;
	font-weight: 400;
	text-align: left;
}

.content_article .more_box {
	width: 100%; height: auto;
	margin-top: 180px;

	display: flex;
	justify-content: center;
    align-items: center;
}

.content_article .more_box button {
	width: auto; height: auto;
	border: 1px solid #fff;
	font-size: 22px; color: #fff; text-align: center;
	background-color: #000;

	padding: 15px 25px;
	cursor: pointer;


	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
}

.content_article .more_box button:hover {
	border: 1px solid #33abff;
	background-color: #33abff;
}



.contact_article {
	width: 100%; max-width: 1760px; height: auto;
	padding: 0px 0px;

	left: 50%;
	transform: translate(-50%, 0%);

}

.contact_article > div {
	width: 100%; max-width: 1620px; height: auto;
	left: 50%; 
	transform: translate(-50%, 0%);
}

.contact_article .map,
.contact_article .map img {
	width: 100%; height: auto; min-height: 360px;
}

.contact_article .map iframe {
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
}

.contact_article .addr {
	width: 100%; height: auto; line-height: 1.3;
	font-size: 20px; color: #fff;
	font-weight: 500;
	margin-top: 15px;
}

.contact_article .info {
	width: 100%; height: auto;
	margin-top: 150px;
	display: grid;
	gap: 15px;
}

.contact_article .info .info_item {
	width: 100%; height: auto; line-height: 1.5;
	display: flex;
	align-items: center;
	font-size: 20px; color: #fff; text-align: left;
}

.contact_article .info .info_item .label {
	width: 100px; 
}





@media (max-width: 479px){ 
	#header .logo { width: 80px; }
	#header .nav_btn { width: 30px; height: 20px; gap: 4px; }
	#header .nav_btn > div { height: 3px; border-radius: 3px; }

	#header .icon_btn { gap: 12px; }
	#header .icon_btn a:nth-child(1) { width: auto; height: 10px; }
	#header .icon_btn a:nth-child(2) { width: auto; height: 20px; }
	#header .icon_btn a:nth-child(3) { width: auto; height: 14px; }


	#footer { padding: 45px 20px; }
	#footer .footer_info .footer_info_item,
	#footer .footer_addr { font-size: 14px; }

	#footer > div { display: flex; gap: 20px;}
	#footer .footer_info { display: grid; gap: 5px; }
	#footer .footer_info .footer_info_item, #footer .footer_addr { width: 100%; justify-content: left; }

	#footer .footer_addr::before { 
		content: 'Address';
        width: 100%;
        display: inline-block;
        position: relative;

		font-family: "Cormorant Upright", serif;
		font-weight: 700;
		font-style: normal;

	}

	#footer .footer_addr { 
		text-align: left;  line-height: 1.5;
	}
	#footer .footer_info .footer_info_item { 
        line-height: 1.5;
        flex-wrap: wrap;
        text-align: left;
        gap: 0;
	}
	#footer .footer_info .footer_info_item .footer_info_label, 
	#footer .footer_info .footer_info_item .footer_info_val { width: 100%; }


	#wrap { 
		padding: 30px 20px 90px; 
		min-height: calc(100vh - 300px);
	}

	
	.about_article .channel_art { height: 250px; }

	.about_info { margin-top: 60px; }
	.about_info .title_area .title { width: 100%; font-size: 26px;  }
	.about_info .title_area .sub { width: 100%; font-size: 22px; margin-top: 40px; padding-left: 20px; }
	.about_info .title_area .sub::before { width: 3px; }


	.about_info .title_area .icon { margin-top: 30px; gap: 15px; }
	.about_info .title_area .icon .icon_item:nth-child(1) { width: auto; height: 25px; }
	.about_info .title_area .icon .icon_item:nth-child(2) { width: auto; height: 35px; }
	.about_info .title_area .icon .icon_item:nth-child(3) { width: auto; height: 31px; }
	.about_info .title_area .icon .icon_item:nth-child(4) { width: auto; height: 22px; }

	.about_info .title_area{ width: 100%;  }
	.about_info .desc_area { width: 100%; margin-top: 60px; }
	.about_info .desc_area .desc { line-height: 1.8; font-size: 18px; }

	
	
	.work_article .work_item { width: 100%; }
	.work_article .work_item .work_title > div { font-size: 18px; }


	.content_article .info_box .title { font-size: 26px; }
	.content_article .info_box .sub { font-size: 16px; }
	.content_article .more_box { margin-top: 60px; }
	.content_article .more_box button { font-size: 16px; padding: 10px 25px; }



	.contact_article .map, .contact_article .map img { min-height: 250px; }
	.contact_article .addr { font-size: 16px; }
	.contact_article .info .info_item .label { width: 80px; }
	.contact_article .info .info_item { font-size: 16px; }
	.contact_article .info { margin-top: 90px; gap: 10px; }
 
}

@media (max-width: 749px) and (min-width: 480px) { 
	#header .logo { width: 100px; }
	#header .nav_btn { width: 30px; height: 20px; gap: 4px; }
	#header .nav_btn > div { height: 3px; border-radius: 3px; }

	#header .icon_btn { gap: 20px; }

	#header .icon_btn a:nth-child(1) { width: auto; height: 18px; }
	#header .icon_btn a:nth-child(2) { width: auto; height: 28px; }
	#header .icon_btn a:nth-child(3) { width: auto; height: 22px; }


	#footer { padding: 45px 20px; }
	#footer .footer_info .footer_info_item,
	#footer .footer_addr { font-size: 16px; }

	#footer > div { display: flex; gap: 20px;}
	#footer .footer_info { display: grid; gap: 0px; }
	#footer .footer_info .footer_info_item, #footer .footer_addr { width: 100%; justify-content: left; }
	#footer .footer_addr::before { 
		content: 'Address';
        width: 100%;
        display: inline-block;
        position: relative;

		font-family: "Cormorant Upright", serif;
		font-weight: 700;
		font-style: normal;

	}

	#footer .footer_addr { 
		text-align: left;  line-height: 1.5;
	}
	#footer .footer_info .footer_info_item { line-height: 1.5; }


	#wrap { padding: 30px 20px 120px; }



	.about_info { margin-top: 60px; }
	.about_info .title_area .title { width: 100%; font-size: 34px;  }
	.about_info .title_area .sub { width: 100%; font-size: 28px; margin-top: 40px; padding-left: 20px; }
	.about_info .title_area .sub::before { width: 3px; }


	.about_info .title_area .icon { margin-top: 30px; gap: 20px; }
	.about_info .title_area .icon .icon_item:nth-child(1) { width: auto; height: 35px; }
	.about_info .title_area .icon .icon_item:nth-child(2) { width: auto; height: 45px; }
	.about_info .title_area .icon .icon_item:nth-child(3) { width: auto; height: 41px; }
	.about_info .title_area .icon .icon_item:nth-child(4) { width: auto; height: 32px; }

	.about_info .title_area{ width: 100%;  }
	.about_info .desc_area { width: 100%; margin-top: 60px; }
	.about_info .desc_area .desc { line-height: 1.8; font-size: 18px; }

	.work_article .work_item { width: 50%; }
	.work_article .work_item .work_title > div { font-size: 18px; }


	.content_article .info_box .title { font-size: 28px; }
	.content_article .info_box .sub { font-size: 18px; }
	.content_article .more_box { margin-top: 90px; }
	.content_article .more_box button { font-size: 18px; }



	.contact_article .addr { font-size: 18px; }
	.contact_article .info .info_item { font-size: 18px; }
	.contact_article .info { margin-top: 90px; gap: 10px; }

}

@media (max-width: 1023px) and (min-width: 750px) { 
	#header .logo { width: 100px; }
	#header .nav_btn { width: 30px; height: 20px; gap: 4px; }
	#header .nav_btn > div { height: 3px; border-radius: 3px; }

	#header .icon_btn { gap: 20px; }

	#header .icon_btn a:nth-child(1) { width: auto; height: 18px; }
	#header .icon_btn a:nth-child(2) { width: auto; height: 28px; }
	#header .icon_btn a:nth-child(3) { width: auto; height: 22px; }


	#footer { padding: 60px 0px; }
	#footer .footer_info .footer_info_item,
	#footer .footer_addr { font-size: 18px; }


	#wrap { padding: 30px 20px 120px; }



	.about_info { margin-top: 60px; }
	.about_info .title_area .title { width: 55%; font-size: 34px;  }
	.about_info .title_area .sub { width: 45%; font-size: 28px; margin-top: 0px; padding-left: 20px; }
	.about_info .title_area .sub::before { width: 3px; }


	.about_info .title_area .icon { margin-top: 30px; gap: 20px; }
	.about_info .title_area .icon .icon_item:nth-child(1) { width: auto; height: 35px; }
	.about_info .title_area .icon .icon_item:nth-child(2) { width: auto; height: 45px; }
	.about_info .title_area .icon .icon_item:nth-child(3) { width: auto; height: 41px; }
	.about_info .title_area .icon .icon_item:nth-child(4) { width: auto; height: 32px; }

	.about_info .title_area{ width: 100%;  display: flex; flex-wrap: wrap; align-items: center; }
	.about_info .desc_area { width: 100%; margin-top: 60px; }
	.about_info .desc_area .desc { font-size: 20px; }


	.work_article .work_item { width: 33.333%; }
	.work_article .work_item .work_title > div { font-size: 20px; }

	.content_article .info_box .title { font-size: 28px; }
	.content_article .info_box .sub { font-size: 18px; }
	.content_article .more_box { margin-top: 90px; }
	.content_article .more_box button { font-size: 18px; }

	.contact_article .addr { font-size: 18px; }
	.contact_article .info .info_item { font-size: 18px; }
	.contact_article .info { margin-top: 90px; }
}


@media (max-width: 1279px) and (min-width: 1024px) { 

	#wrap { padding: 30px 80px 150px; }
	#footer { padding: 80px 0px; }
	#footer .footer_info .footer_info_item,
	#footer .footer_addr { font-size: 22px; }



	.about_info { margin-top: 120px; }
	.about_info .title_area .title { width: 55%; font-size: 40px;  }
	.about_info .title_area .sub { width: 45%; font-size: 32px; margin-top: 0px; }


	.about_info .title_area .icon { margin-top: 30px; }
	.about_info .title_area .icon .icon_item:nth-child(1) { width: auto; height: 40px; }
	.about_info .title_area .icon .icon_item:nth-child(2) { width: auto; height: 50px; }
	.about_info .title_area .icon .icon_item:nth-child(3) { width: auto; height: 46px; }
	.about_info .title_area .icon .icon_item:nth-child(4) { width: auto; height: 37px; }

	.about_info .title_area{ width: 100%; display: flex; flex-wrap: wrap; align-items: center; }
	.about_info .desc_area { width: 100%; margin-top: 60px; }
	.about_info .desc_area .desc { font-size: 22px; }




	.work_article .work_item { width: 33.333%; }

	.content_article .info_box .title { font-size: 32px; }
	.content_article .info_box .sub { font-size: 20px; }
	.content_article .more_box { margin-top: 120px; }
	.content_article .more_box button { font-size: 20px; }
	

	.contact_article .info { margin-top: 120px; }



}



@media (max-width: 1560px) and (min-width: 1280px) { 
	.about_info { margin-top: 120px; }
	.about_info .title_area .title { font-size: 42px; }
	.about_info .title_area .sub { font-size: 32px; margin-top: 45px; }



	.about_info .title_area .icon .icon_item:nth-child(1) { width: auto; height: 40px; }
	.about_info .title_area .icon .icon_item:nth-child(2) { width: auto; height: 50px; }
	.about_info .title_area .icon .icon_item:nth-child(3) { width: auto; height: 46px; }
	.about_info .title_area .icon .icon_item:nth-child(4) { width: auto; height: 37px; }

	.about_info .title_area{ width: calc(100% - 632px); }
	.about_info .desc_area { width: 632px; }
	.about_info .desc_area .desc { font-size: 22px; }
}