@charset "utf-8";
/* ====================

	    공    통

==================== */


.img_1920 { display: block; }
.img_1280, .img_768, .img_480, .img_320 { display: none; }

@media screen and (max-width: 1280px) {
	.img_1280 { display: block; }
	.img_1920, .img_768, .img_480, .img_320 { display: none; }
}
@media screen and (max-width: 768px) {
	.img_768 { display: block; }
	.img_1920, .img_1280, .img_480, .img_320 { display: none; }
}
@media screen and (max-width: 480px) {
	.img_480 { display: block; }
	.img_1920, .img_1280, .img_768, .img_320 { display: none; }
}
@media screen and (max-width: 320px) {
	.img_320 { display: block; }
}

.waypoint_01, .waypoint_02, .waypoint_03, .waypoint_04, .waypoint_05 
{ opacity: 0 !important; transform: translateY(-50px); transition: all .5s ease !important; }
.waypoint_01.on, .waypoint_02.on, .waypoint_03.on, .waypoint_04.on, .waypoint_05.on
{ opacity: 1 !important; transform: translateY(0px); transition: all .5s ease !important; }

/* Underline From Left */
.underline-from-left {
  display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; overflow: hidden;
}
.underline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #B60A29; height: 1px;
  -webkit-transition-property: right; transition-property: right; 
  -webkit-transition-duration: 0.3s; transition-duration: 0.3s; 
  -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
}
.underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}

/* main_visual_swiper */
.main_visual_swiper { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.main_visual_swiper .swiper-wrapper .swiper-slide { width: 100%; height: auto; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: #000; }
.main_visual_swiper div.swiper-pagination span.swiper-pagination-bullet { 
	width: 20px; height: 20px; border-radius: 10px; margin: 0 5px; background-color: #FFF; opacity: 0.5; 
	-webkit-transition: all .3s ease; transition: all .3s ease;
	box-shadow: 2px 3px 19px 1px rgba(0,0,0,0.33);
	-webkit-box-shadow: 2px 3px 19px 1px rgba(0,0,0,0.33);
	-moz-box-shadow: 2px 3px 19px 1px rgba(0,0,0,0.33);
}
.main_visual_swiper .swiper-wrapper .swiper-slide img {  }
.main_visual_swiper div.swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { 
	width: 40px; height: 20px; margin: 0 5px; opacity: 1;
	-webkit-transition: all .3s ease; transition: all .3s ease;
}
.main_visual_swiper .swiper-button-next,
.main_visual_swiper .swiper-button-prev {
	background-color: white; opacity: 0.5;
	top: 50%; 
	padding: 30px 20px;
	color: #000 !important; fill: black !important; stroke: black !important;
	transition: opacity .3s ease;
}

.main_visual_swiper .swiper-button-next { right: -60px; transition: all .3s ease; }
.main_visual_swiper .swiper-button-prev { left: -60px; transition: all .3s ease; }
.main_visual_swiper:hover .swiper-button-next { right: 10px; transition: all .3s ease; }
.main_visual_swiper:hover .swiper-button-prev { left: 10px; transition: all .3s ease; }
.main_visual_swiper .swiper-button-next:hover,
.main_visual_swiper .swiper-button-prev:hover { opacity: 0.8; transition: opacity .3s ease; }


@media screen and (max-width: 1280px) {
	.main_visual_swiper .swiper-wrapper .swiper-slide { height: 540px; }

}
@media screen and (max-width: 768px) {
	.main_visual_swiper .swiper-wrapper .swiper-slide { height: 420px; }
}
@media screen and (max-width: 480px) {
	.main_visual_swiper .swiper-wrapper .swiper-slide { height: 640px; }
}

.main_event_wr { 
	width: 100%; position: relative;
	display: flex; justify-content: space-between;
}
.main_event_wr .img_div {
	width: 50%; height: 600px; overflow: hidden;
	display: flex; justify-content: center; align-items: center;
	background-color: aqua;
}
.main_event_wr .text_div_wr {
	width: 50%; height: 600px;
	background-color: #f7f3f2;
}
.main_event_wr .text_div_wr .text_div {
	width: 600px; height: 600px; padding: 110px 0 110px 86px; box-sizing: border-box;
}
.main_event_wr .text_div_wr .text_div .title_div {
	font-size: 48px; letter-spacing: -3px; font-weight: 900; 	word-break: keep-all;
	width: 100%; height: 120px; overflow: hidden;
}
.main_event_wr .text_div_wr .text_div .summary_div {
	font-size: 18px; letter-spacing: -1.1px; font-weight: 300; text-align: justify;
	margin-top: 34px; width: 100%; height: 80px; overflow: hidden;
}
.main_event_wr .text_div_wr .text_div .schedule_div { 
	font-size: 24px; letter-spacing: -1.5px; font-weight: 700;
	margin-top: 34px; width: 100%; height: 100px; overflow: hidden;
}
.main_event_wr .text_div_wr .text_div a { 
	display: inline-block; padding: 10px 26px; box-sizing: border-box;
	border: 2px solid #9525a1; border-radius: 6px; background-color: #fff;
	font-size: 20px; letter-spacing: -1.2px; font-weight: 500; color: #9525a1; text-align: center;
	transition: all 0.3s ease;
}
.main_event_wr .text_div_wr .text_div a:hover { 
	color: #fff; background-color: #9525a1;
	transition: all 0.3s ease;
}
.partnerbox .partners {
	width: 1200px; margin: 0 auto 100px;
	display: flex; justify-content: space-between; align-items: center;
}
.partnerbox .partners a {
	position: relative; display: flex; justify-content: center; align-items: center;
	width: 50%; height: 178px;
	overflow: hidden;
}
.partnerbox .partners a img {
	transform: scale(1, 1);
	transition: transform 0.3s ease;
}
.partnerbox .partners a:hover img {
	transform: scale(1.05, 1.05);
	transition: transform 0.3s ease;
}
.partnerbox .partners a:nth-child(1) { 
	margin-right: 20px;
}
.partnerbox .partners a .bg_text {
	position: absolute; width: 100%; height: 100%; 
	display: flex; justify-content: center; align-items: center;
	font-size: 24px; letter-spacing: -1.5px; font-weight: 500; color: #FFF;
	z-index: 2;
}
.partnerbox .partners a .bg_plate {
	position: absolute; width: 100%; height: 100%; 
	display: flex; justify-content: center; align-items: center;
	background-color: #000; opacity: 0.5;
	z-index: 1;
}
.layer_floating { 
	display: block;
	position: fixed;
	top: 120px;
	right: 50px;
	width: 140px;
	height: 140px;
	z-index: 10000;
}
.layer_floating a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 140px;
	height: 96px;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
	box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.2);
} 

@media screen and (max-width: 1280px) {
	.layer_floating { display: none; }
}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 320px) {

}
  
.main_join_wr { padding: 60px 0; background-color: #00a0e9;
	/*
	background-color: #2eb6aa; #320c6c; #290a57; #5c1e66; #290a57; #be3455; #01a077;
	background-color: #004bc8; #00876c;
	background-color: #1e3932;
	*/
}
.main_join { width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: nowrap; align-items: center; }
.main_join .logoDiv { width: 154px; }
.main_join .textDiv { color: #FFF; width: 559px; }
.main_join .textDiv .text01 { margin-bottom: 30px; font-size: 28px; letter-spacing: -1.75px; text-align: left; }
.main_join .textDiv .text01 span { font-weight: 700; }

.main_join .textDiv .text02 { font-size: 20px; font-weight: 300; letter-spacing: -1.25px; line-height: 160%; text-align: left; word-break: keep-all; }
.main_join .btn_wr { display: flex; justify-content: center; flex-wrap: nowrap; }
.main_join .btn_wr a {
	display: block; width: 106px; height: 38px;
	display: flex; justify-content: center; align-items: center;
	font-size: 16px; letter-spacing: -1px; 
	border-radius: 6px; box-sizing: border-box;
}
.main_join .btn_wr a:nth-child(1) { color: #290a57; background-color: #FFF; border: 2px solid #FFF; margin-right: 16px; transition: all 0.3s ease; }
.main_join .btn_wr a:nth-child(1):hover { color: #FFF; background-color: #290a57; border: 2px solid #FFF; transition: all 0.3s ease; }
.main_join .btn_wr a:nth-child(2) { color: #FFF; background-color: #290a57; border: 2px solid #FFF; transition: all 0.3s ease; }
.main_join .btn_wr a:nth-child(2):hover { color: #FFF; background-color: #0f0124; border: 2px solid #FFF; transition: all 0.3s ease; }

@media screen and (max-width: 1280px) {
	.main_join { width: 100%; padding: 0 40px; justify-content: center; flex-wrap: wrap; }
	.main_join .logoDiv { width: 100%; text-align: center; margin-bottom: 30px; }
	.main_join .textDiv { width: 100%; margin-bottom: 30px; }
	.main_join .textDiv .text01 { text-align: center; margin-bottom: 10px; }
	.main_join .textDiv .text02 { text-align: center; }
}

@media screen and (max-width: 768px) {
	.main_join { width: 100%; padding: 0 30px; }
	.main_join .textDiv .text01 { font-size: 24px; letter-spacing: -1.25px; }
	.main_join .textDiv .text02 { font-size: 16px; letter-spacing: -1px;  }
}

@media screen and (max-width: 480px) {
	.main_join { width: 100%; padding: 0 20px; }
	.main_join .textDiv .text01 { font-size: 22px; letter-spacing: -1.12px; }
	.main_join .textDiv .text02 { font-size: 14px; letter-spacing: -0.9px;  }
}

@media screen and (max-width: 320px) {

}

.partnerbox { display: none; position: fixed; width: 100%; height: 100%; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 100000;}
.partnerbox.on { display: block; }
.partnerbox .partners { position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; justify-content: center;	}
.partnerbox .partners a { position: relative; width: 50%; height: 178px; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.partnerbox .partners a img { transform: scale(1, 1); transition: transform 0.3s ease; }
.partnerbox .partners a:hover img { transform: scale(1.05, 1.05); transition: transform 0.3s ease; }
.partnerbox .partners a:nth-child(1) { margin-right: 20px; }
.partnerbox .partners a .bg_text {
	position: absolute; width: 100%; height: 100%; 
	display: flex; justify-content: center; align-items: center;
	font-size: 24px; letter-spacing: -1.5px; font-weight: 500; color: #FFF;
	z-index: 2;
}
.partnerbox .partners a .bg_plate { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #000; opacity: 0.5; z-index: 1; }
.partnerbox .partners a { margin: 0 10px; }
.partnerbox .black_plate { position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.9; }


.sns_wrap { position:fixed; width:70px; height:140px; bottom:30px; right:30px; z-index:999; }
.sns_wrap a { display: block; width: 60px; height: 60px; border-radius: 30px; overflow: hidden; margin: 6px 0 6px;

 }

.sns_wrap a img { width: 60px; height: 60px; border-radius: 30px; 
	-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
    transition: all 0.3s ease-in-out;
} 

.sns_wrap a:hover img { 
	-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
    transition: all 0.3s ease-in-out;
} 

/* circlenav */
.circlenav_wrap { position:fixed; width:70px; height:70px; bottom:30px; right:30px; z-index:999; transition: all 0.3s ease; }
.circlenav_wrap.on { bottom: -30px; right: -30px; transition: all 0.3s ease; }
.circlenav { position:relative; width:70px; height:70px; border-radius:35px; border:3px solid #666; background-color:#FFF; z-index:2}
.circlenav  { transform:rotate(0deg); transition:all 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66);  }
.circlenav.active { transform:rotate(135deg); transition:all 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); }
.circlenavwave { position:absolute; width:70px; height:70px; border-radius:35px;  z-index:-1; }
.circlenavwave {
	opacity: 1; background: #223e87; pointer-events: none;
	-webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0);
	-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out }
.circlenavwave.active {
	opacity: 0; background: #223e87; pointer-events: none;
	-webkit-transform: scale(3); -moz-transform: scale(3); -o-transform: scale(3); -ms-transform: scale(3); transform: scale(3);
	-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out }
a.circlenav_menu { display:block; position:absolute;  height:60px; width:60px; top:10px; left:10px; border-radius:30px;}
a.circlenav_menu_01 { transform:translate(0px, 0px) scale(0,0); opacity:0; transition:all 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); }
a.circlenav_menu_01.active { transform:translate(0px,-150px) scale(1,1); opacity:1; transition:all 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); }
a.circlenav_menu_02 { transform:translate(0px, 0px) scale(0,0); opacity:0; transition:all 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); }
a.circlenav_menu_02.active { transform:translate(-75px,-130px) scale(1,1); opacity:1; transition:all 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); }
a.circlenav_menu_03 { transform:translate(0px, 0px) scale(0,0); opacity:0; transition:all 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); }
a.circlenav_menu_03.active { transform:translate(-130px,-75px) scale(1,1); opacity:1; transition:all 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); }
a.circlenav_menu_04 { transform:translate(0px, 0px) scale(0,0); opacity:0; transition:all 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); }
a.circlenav_menu_04.active { transform:translate(-150px,0px) scale(1,1); opacity:1; transition:all 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66); }
.circlenav_bar01 { position:absolute; width:40px; height:10px; background-color:#003; top:calc(50% - 5px); left:calc(50% - 20px) }
.circlenav_bar02 { position:absolute; width:10px; height:40px; background-color:#003; top:calc(50% - 20px); left:calc(50% - 5px) }

.join_box { width: 1200px; margin: 60px auto 90px; }
.join_box .introductionDiv { width: 100%; }
.join_box .introductionDiv .imgDiv { width: 100%; text-align: center; }
.join_box .introductionDiv .imgDiv img { width: 300px; }
.join_box .introductionDiv .textDiv { padding: 30px 0 30px 0; }
.join_box .introductionDiv .textDiv .titleDiv { 
	font-family: 'SUIT Variable', dotum, sans-serif; font-weight: 900; color:#00a0e9;
	font-size: 28px; letter-spacing: -1.5px; line-height: 1.2; text-align: center; margin: 0 0 30px 0; }
.join_box .introductionDiv .textDiv .bodyDiv { font-size: 18px; letter-spacing: -1px; line-height: 160%; text-align: center; color: #333; font-weight: 300; }
.join_box .introductionDiv .textDiv span { font-weight: 700; color:#000 }

.join_box .introductionDiv .textDiv .bodyDiv .numberDiv { 
	font-size: 32px; font-weight: 900; color: #e74445;
	font-family:'Roboto', 'SUIT Variable', dotum, sans-serif; 
}
.join_box .btn_box { display: flex; justify-content: center; flex-wrap: nowrap; }
.join_box .btn_box a { 
	width: 180px; height: 60px; box-sizing: border-box; border-radius: 6px; 
	display: flex; justify-content: center; align-items: center; font-size: 24px; letter-spacing: -1px; transition: all 0.3s ease;
}
.join_box .btn_box a:nth-child(1) { color: #FFF; background-color: #333; border: 2px solid #333; margin: 0 10px 0 0; }
.join_box .btn_box a:nth-child(2) { color: #FFF; background-color: #5c1e66; border: 2px solid #5c1e66; margin: 0 0 0 10px; }
.join_box .btn_box a:nth-child(1):hover { color: #333; background-color: #FFF; transition: all 0.3s ease;}
.join_box .btn_box a:nth-child(2):hover { color: #5c1e66; background-color: #FFF; transition: all 0.3s ease;}

@media screen and (max-width: 1280px) {
	.join_box { width: 100%; padding: 0 40px; justify-content: center; flex-wrap: wrap; }
}

@media screen and (max-width: 768px) {
	.join_box { width: 100%; padding: 0 30px; }
	.join_box .btn_box a { 
		width: 50%; height: 70px; border-radius: 4px; text-align: center;
		font-size: 18px; letter-spacing: -1px;
	}
}

@media screen and (max-width: 480px) {
	.join_box { width: 100%; padding: 0 20px; }
	.join_box .introductionDiv .imgDiv img { width: 200px; }
	.join_box .introductionDiv .textDiv .titleDiv { font-size: 32px; letter-spacing: -1.5px; margin: 0 0 30px 0; }
	.join_box .introductionDiv .textDiv .bodyDiv { font-size: 18px; letter-spacing: -0.8px; }
	.join_box .btn_box a:nth-child(1) { margin: 0 4px 0 0; }
	.join_box .btn_box a:nth-child(2) { margin: 0 0 0 4px; }
	.join_box .btn_box a { 
		width: 50%; height: 60px; border-radius: 4px; text-align: center;
		font-size: 16px; letter-spacing: -1px;
	}
}

@media screen and (max-width: 320px) {
	.join_box .btn_box a { 
		width: 50%; height: 50px; border-radius: 4px; text-align: center;
		font-size: 14px; letter-spacing: -1px;
	}
}
.terms_conditions { width: 1200px; margin: 0 auto; font-size: 14px; letter-spacing: 0; line-height: 1.6; text-align: justify; }
.terms_conditions .clauseTitle { font-size: 16px; letter-spacing: -0.4px; font-weight: 700; color:#444; margin: 0 0 10px 0; }
.terms_conditions > ul { margin: 0 0 50px 0; }
.terms_conditions > ul > li { padding: 0 0 0 20px; margin: 0 0 5px 0; }
.terms_conditions > ul > li ul.sub_body { display: flex; justify-content: flex-start; flex-wrap: nowrap; padding: 0 0 0 20px; margin: 0 0 5px 0;}
.terms_conditions > ul > li ul.sub_body li:nth-child(1) { margin: 0 6px 0 0 ;}
.terms_conditions > ul > li ul.sub_body li:nth-child(2) {margin: 0 0 0 6px;}
.terms_conditions .table_01 { width: 100%; }
.terms_conditions .table_01 caption { padding: 0; font-size: 0; line-height: 0; overflow: hidden; }
.terms_conditions .table_01, .terms_conditions .table_01 tr, .terms_conditions .table_01 th, .terms_conditions .table_01 td { border: 1px solid black; border-collapse: collapse; }
.terms_conditions .table_01 th, .terms_conditions .table_01 td { padding: 10px; }
.terms_conditions .table_01 th { text-align: center; background-color: #f7f3f2; }
.text_center { text-align: center; }

.parters_wrap { width: 1200px; margin: 0 auto; font-size: 14px; letter-spacing: 0; line-height: 1.6; text-align: justify; }
.parters_wrap .comment_div { font-size: 16px; letter-spacing: -0.4px; font-weight: 700; color:#444; margin: 0 0 10px 0; }
.parters_wrap ul { font-size: 16px; list-style: disc; padding: 0 0 0 20px; }

@media screen and (max-width: 1280px) {
	.terms_conditions, .parters_wrap { width: 100%; padding: 0 40px; justify-content: center; flex-wrap: wrap; }
}

@media screen and (max-width: 768px) {
	.terms_conditions, .parters_wrap { width: 100%; padding: 0 30px; }
}

@media screen and (max-width: 480px) {
	.terms_conditions, .parters_wrap { width: 100%; padding: 0 20px; }
}

@media screen and (max-width: 320px) {

}





/* 오시는 길 - 지도 */
.map_box { position: relative; width: 100%; height: 500px; }
.map_box #map { position: relative; width: 100%; height: 500px; }

/* 오시는 길 - 대중교통 */
.mapinfo_box { width: 1200px; margin: 70px auto; }
.mapinfo_box .address_box .addressDiv { font-size: 30px; font-weight: 500; color:#191919; margin-bottom: 24px; }
.mapinfo_box .address_box .telDiv { font-size: 24px; font-weight: 300; }
.mapinfo_box .address_box .telDiv ul { display: flex; justify-content: flex-start; flex-wrap: nowrap; }
.mapinfo_box .address_box .telDiv ul li:first-child { margin-right: 30px; }
.mapinfo_box .address_box .telDiv span { color: #4d1c86; font-weight: 500; }

.transport_box .transportDiv { padding: 66px 0 66px 0; }
.transport_box .transportDiv:first-child { border-bottom: 1px solid #d6d6d6; }
.transport_box .transportDiv:last-child { padding: 66px 0 0 0 }
.transport_box .transportDiv .kindDiv {
	display: flex; justify-content: center; align-items: center; text-align: center; width: 86px; height: 86px; border-radius: 50%;
	font-size: 24px; color: #FFF; font-weight: 700; background-color: #4d1c86;
}
.transport_box .transportDiv .stationName { font-size: 24px; font-weight: 700; color: #191919; margin-top: 44px; }
.transport_box .transportDiv .bus_classificationDiv { width: 100%; }
.transport_box .transportDiv .bus_classificationDiv ul { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.transport_box .transportDiv .bus_classificationDiv ul li { width: 100%; height: 36px; line-height: 36px; font-size: 24px; font-weight: 300; margin: 26px 0 0 0; }
.transport_box .transportDiv .bus_classificationDiv ul li:nth-child(2n-1) { width: 9.6%; }
.transport_box .transportDiv .bus_classificationDiv ul li:nth-child(2n) { width: 90.4%; }
.transport_box .transportDiv .bus_classificationDiv ul li span { 
	display: flex; justify-content: center; align-items: center; width: 96px; height: 36px; border-radius: 18px; 
	font-family: 'SUIT Variable', dotum, sans-serif; text-align: center; font-weight: 700; color: #FFF;
}
.transport_box .transportDiv .bus_classificationDiv ul li span.blue { background-color: #366fc6; }
.transport_box .transportDiv .bus_classificationDiv ul li span.red { background-color: #d63847; }
.transport_box .transportDiv .bus_classificationDiv ul li span.green { background-color: #60ae1c; }

.transport_box .transportDiv .subway_classificationDiv { width: 100%; }
.transport_box .transportDiv .subway_classificationDiv ul { display: flex; justify-content: flex-start; flex-wrap: nowrap; }
.transport_box .transportDiv .subway_classificationDiv ul li {
	display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; height: 40px; text-align: left;
	font-size: 24px; font-weight: 300; margin: 26px 0 0 0;
}
.transport_box .transportDiv .subway_classificationDiv ul li:first-child { margin-right: 20px; }
.transport_box .transportDiv .subway_classificationDiv ul li span { 
	display: flex; justify-content: center; align-items: center; width: 96px; height: 40px; border-radius: 18px; box-sizing: border-box;
	font-family: 'SUIT Variable', dotum, sans-serif; text-align: center; font-weight: 700;
}
.transport_box .transportDiv .subway_classificationDiv ul li span.green { color: #60ae1c; border: 4px solid #60ae1c; margin-right: 10px; }
.transport_box .transportDiv .subway_classificationDiv ul li span.pink { color: #e24481; border: 4px solid #e24481; }

@media screen and (max-width: 1280px) {
	.mapinfo_box { width: 100%; padding: 0 40px; justify-content: center; flex-wrap: wrap; }
	.mapinfo_box .address_box .addressDiv { font-size: 24px; margin-bottom: 16px; }
	.mapinfo_box .address_box .telDiv { font-size: 20px; }
	.mapinfo_box .address_box .telDiv ul li:first-child { margin-right: 16px; }

	.transport_box .transportDiv { padding: 40px 0 40px 0; }
	.transport_box .transportDiv .kindDiv { width: 80px; height: 80px; font-size: 20px; }
	.transport_box .transportDiv .stationName { font-size: 22px; margin-top: 30px; }

	.transport_box .transportDiv .bus_classificationDiv ul li { width: 100%; height: 30px; line-height: 30px; font-size: 20px; margin: 20px 0 0 0; }
	.transport_box .transportDiv .bus_classificationDiv ul li:nth-child(2n-1) { width: 14%; max-width: 95px; }
	.transport_box .transportDiv .bus_classificationDiv ul li:nth-child(2n) { width: 86%; }
	.transport_box .transportDiv .bus_classificationDiv ul li span { width: 80px; height: 30px; border-radius: 15px; }

	.transport_box .transportDiv .subway_classificationDiv ul li { height: 36px; font-size: 20px; margin: 20px 0 0 0; }
	.transport_box .transportDiv .subway_classificationDiv ul li:first-child { margin-right: 16px; }
	.transport_box .transportDiv .subway_classificationDiv ul li span { width: 80px; height: 36px; border-radius: 18px; box-sizing: border-box; }
}

@media screen and (max-width: 768px) {
	.mapinfo_box { width: 100%; padding: 0 30px; }
	.mapinfo_box .address_box .addressDiv { font-size: 20px; margin-bottom: 12px; }
	.mapinfo_box .address_box .telDiv { font-size: 18px; }
	.mapinfo_box .address_box .telDiv ul { flex-wrap: wrap; }
	.mapinfo_box .address_box .telDiv ul li:first-child { margin-right: 10px; }

	.transport_box .transportDiv { padding: 46px 0 46px 0; }
	.transport_box .transportDiv .kindDiv { width: 80px; height: 80px; font-size: 20px; }
	.transport_box .transportDiv .stationName { font-size: 22px; margin-top: 30px; }

	.transport_box .transportDiv .bus_classificationDiv ul li { width: 100%; height: 28px; line-height: 30px; font-size: 18px; margin: 18px 0 0 0; }
	.transport_box .transportDiv .bus_classificationDiv ul li span { width: 70px; height: 30px; border-radius: 15px; }
	.transport_box .transportDiv .bus_classificationDiv ul li:nth-child(2n-1) { width: 16%; }
	.transport_box .transportDiv .bus_classificationDiv ul li:nth-child(2n) { width: 100%; height: auto; margin: 10px 0 10px 0; }

	.transport_box .transportDiv .subway_classificationDiv ul li { height: 32px; font-size: 18px; margin: 18px 0 0 0; }
	.transport_box .transportDiv .subway_classificationDiv ul li:first-child { margin-right: 14px; }
	.transport_box .transportDiv .subway_classificationDiv ul li span { width: 70px; height: 32px; border-radius: 16px; box-sizing: border-box; }
}

@media screen and (max-width: 480px) {
	.mapinfo_box { width: 100%; padding: 0 20px; }
	.mapinfo_box .address_box .addressDiv { font-size: 18px; margin-bottom: 10px; }
	.mapinfo_box .address_box .telDiv { font-size: 16px; }

	.transport_box .transportDiv { padding: 40px 0 40px 0; }
	.transport_box .transportDiv .kindDiv { width: 76px; height: 76px; font-size: 18px; }
	.transport_box .transportDiv .stationName { font-size: 20px; margin-top: 21px; }

	.transport_box .transportDiv .subway_classificationDiv ul { flex-wrap: wrap; }
	.transport_box .transportDiv .subway_classificationDiv ul li { height: 32px; font-size: 18px; margin: 10px 0 0 0; }
	.transport_box .transportDiv .subway_classificationDiv ul li:first-child { margin-right: 14px; }
	.transport_box .transportDiv .subway_classificationDiv ul li span { width: 70px; height: 32px; border-radius: 16px; box-sizing: border-box; }
}

@media screen and (max-width: 320px) {

}

.video-container {
	position: relative;
	width: 680px;
	height: 563px;
	margin: 0 auto;
}
.video-container video,
.video-container object,
.video-container embed {
    width: 100%;
    height: 100%;
	clip-path: inset(2px 2px);
}
.video-container video:focus { outline:none; }

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 768px) { 
	.video-container {
		width: 100%;
		height: auto;
	}

}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 320px) {

}

/* 
moviepopup_bgPlate
*/
.moviepopup_wrap { position: fixed; width: 100%; height: 100%; z-index: 1001;}
.moviepopup_wrap .moviepopup_bgPlate { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; background-color: #000; 
	transform: translate(-50%, -50%); opacity: 0.5;}

.moviepopupbox { 
	position: fixed; width: 640px; height: 420px; top: 50%; left: 50%; transform: translate(-50%, -50%);
	background-color: #FFF; border: 2px solid #333; border-radius: 10px; overflow: hidden; box-sizing: border-box;
	z-index: 10000; 
}
.moviepopupbox .moviepopup { position: relative; }
.moviepopupbox .moviepopup video { position: absolute; width: 100%; }
.moviepopup_footer { 
position: absolute; bottom: 0; width: 100%; height: 60px;
display: flex; justify-content: space-around; align-items: center;
color: #fff; background: #333; text-align:center;
font-size: 16px; letter-spacing: -1px; font-weight: 900;
z-index: 1;
}
.moviepopup_footer button { padding: 0 10px; border: 0; color:#fff; height: 38px; background-color: transparent; }
.moviepopup_footer .hd_pops_reject { width: 75%; background:#333; border-right: 1px solid #FFF; }
.moviepopup_footer .hd_pops_close { width: 25%; background:#333;}

@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 768px) { 
	.moviepopupbox { width: 400px; height: 274px; border-radius: 8px; }
	.moviepopup_footer { height: 50px; font-size: 14px; letter-spacing: -0.9px; }
	.moviepopup_footer button { padding: 0 10px; border: 0; color:#fff; height: 36px; }
}

@media screen and (max-width: 480px) {
	.moviepopupbox { width: 300px; height: 220px; border-radius: 8px; }
	.moviepopup_footer { height: 50px; font-size: 14px; letter-spacing: -0.9px; }
	.moviepopup_footer button { padding: 0 10px; border: 0; color:#fff; height: 30px; }
}

@media screen and (max-width: 320px) {
	.moviepopupbox { width: 280px; height: 220px; border-radius: 8px; }
	.moviepopup_footer { height: 50px; font-size: 14px; letter-spacing: -0.9px; }
	.moviepopup_footer button { padding: 0 10px; border: 0; color:#fff; height: 30px; }

}