@charset "utf-8";

/* image scale */
.scale{transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: all 0.3s ease-in-out; }
 .scale:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
} 

.main01 {height: auto;}
canvas {
  position: fixed;
  max-width: 100vw;
  width: 100%;
  max-height: 100vh;
  min-height: 100vh;
  object-fit: cover;
}

#main01_txt{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 100vh;
  flex-direction:column;
  text-align: center; 
  margin:0 auto;
}
#main01_txt div{ z-index: 1;}
#main01_txt div.h2{font-size: 6.3rem; color: #fff; line-height: 1; margin-top:0%; display: block; text-shadow:5px 5px 6px rgba(0,0,0,0.3);}
#main01_txt div.h3{font-size: 2.5rem; color: #fff; margin-top:20px;text-shadow:3px 3px 3px rgba(0,0,0,0.5);}
#main01_txt div.p{font-size: 2.2rem; color: #fff;width: 300px;text-shadow:2px 2px 3px rgba(0,0,0,0.5);}

.container-hero {
  height: calc(400vh - 100vh);
  top: 10%;
  display: flex;
  background:#000 ;
  align-items: center;
  justify-content: center;
  flex-direction: column;
    margin:0 auto;
}
.container-hero div.h2 {
	margin-top:80%;width: 90%;
	font-size: 6.3rem; color: #fff; line-height: 1; text-align: center; text-shadow:5px 5px 6px rgba(0,0,0,0.3);
}
.container-hero h3 {font-size: 2.5rem; color: #fff; text-shadow:5px 5px 6px rgba(0,0,0,0.3)}

.scroll-down{position:fixed; top:85vh; left:50%; font-size: 1.3rem; color: #fff; font-style: normal; letter-spacing: 0;writing-mode: vertical-rl;text-orientation: mixed;z-index: 0; }
.scroll-down:after{content: '';position: absolute;display: block;left: 0;right: 0;bottom: 0; top:80px; margin: auto;width: 1px;height: 80px;background: #fff;-webkit-animation: scrollDown 1.5s linear infinite; animation: scrollDown 1.5s linear infinite; -webkit-transition: all 1s;transition: all 1s;z-index: 2;}

@media screen and (max-width: 1200px) {
#main01_txt div.h2{font-size: 5rem; }
#main01_txt div.h3{font-size: 2rem; }
#main01_txt div.p{font-size: 1.8rem; }
.container-hero div.h2 {font-size: 5rem;}
.container-hero h3{font-size: 2rem; }
}
@media screen and (max-width: 1000px) {
#main01_txt div.h2{font-size: 4rem; }
#main01_txt div.h3{font-size: 1.8rem; }
#main01_txt div.p{font-size: 1.5rem; }
.container-hero div.h2 {font-size: 4rem;margin-top:70%;}
.container-hero h3{font-size: 1.8rem; }
}
@media (max-width: 800px) {
.container-hero div.h2 { width: 90%;  }
.scroll-down{ font-size: 1rem;}
}
@media screen and (max-width: 600px) {
#main01_txt div.h2{font-size: 3rem; }
#main01_txt div.h3{font-size: 1.5rem; }
#main01_txt div.p{font-size: 1.1rem; }
.container-hero div.h2 {font-size: 3rem;}
.container-hero h3{font-size: 1.5rem; }
}


.main02{background:#fff url(../images/main/main02.jpg) no-repeat center; background-size: cover;}

.main03{background:#fff url(../images/main/main03_bg.jpg) no-repeat center; background-size: cover; height: 100vh; padding:0 50px; box-sizing: border-box;display: flex;align-items:center; justify-content:center;}
.main03 .container{width:100%; max-width: 1400px; height: 90vh; display: flex;align-items:center; justify-content:center; }
.main03 .main03_1{width:50%; margin-bottom: 30%;}
.main03 .main03_2{display: block; width:33%; max-width:540px; height: 473px; background: #181d23; padding: 70px 45px 50px; margin-top:10%; position: relative; box-sizing: border-box;}
.main03 .main03_2:before{position: absolute; right:40px; top:-50px; z-index:10; width:59px; height: 142px; background:url(../images/main/main03_img.png) no-repeat; background-size: cover; display: block; content: ''; }
.main03 h2{font-size: 7.3rem; color: #fff; line-height: 1;}
.main03 h3{font-size: 2rem; color: #fff; margin-bottom: 60px;}
.main03 h4{font-size: 1.5rem; color: #fff; margin-bottom: 30px;}
.main03 p{font-size: 1rem; color: #fff; margin-bottom: 10px;}


@media screen and (max-width: 1450px) {
.main03{padding:10% 50px;}
.main03 h2{font-size: 6rem;}
.main03 .main03_2{width:40%; padding: 5% 45px;}

}
@media screen and (max-width: 1200px) {
.main03 h2{font-size: 5rem;}
.main03 .main03_2{width:45%; padding: 5% 30px; height: auto;}

}
@media screen and (max-width: 1100px) {
.main03{padding:10% 20px;}
.main03 h2{font-size: 4.3rem;}
.main03 .main03_2{width:45%; margin-top:150px;}
.main03 h3{font-size: 2rem; margin-bottom: 30px;}

}
@media screen and (max-width: 1000px) {
.main03{padding:10% 0;}
.main03 .container{width:60%; flex-direction:column;justify-content:center;}
.main03 .main03_1{width:100%; margin-bottom: 0}
.main03 .main03_2{width:100%; max-width:100%;padding: 10% 45px; margin-top:50px;}
.main03 h2{font-size: 5rem;}
.main03 h4{font-size: 1.5rem; margin-bottom: 20px;}
.main03 p{font-size: 1rem; margin-bottom: 10px;}

}
@media screen and (max-width: 800px) {
.main03 .container{width:80%;}
.main03 h2{font-size: 4.3rem;}
.main03 p{font-size: 14px; margin-bottom: 10px;}

}
@media screen and (max-width: 768px) {
.main03{padding:0 0;}
.main03 .container{width:80%;align-items:center; height: 100vh;}
.main03 h2{font-size: 4rem;}
.main03 .main03_2{width:100%; max-width:100%;padding: 15% 30px 10%; }
.main03 .main03_2:before{position: absolute;width:40px; height: 96px; }

}
@media screen and (max-width: 500px) {
.main03 h2{font-size: 3rem;}
.main03 h4{font-size: 1rem;}
.main03 h4 br{display: none;}
}

.main04{background:#fff; }
.main04 .main04_slide{width:100%; overflow:hidden; background:#fff;}
.main04_slide .swiper-slide{display: block;background:#fff;}
.main04_slide .swiper-slide.main04_bn{display: flex; align-items:flex-start; justify-content:center;width:100%;}
.main04_slide .swiper-slide.main04_bn .main04_1{width:40%; min-height:340px; background: #169fdb; display: block; padding:140px 0 120px; box-sizing: border-box;}
.main04_slide .swiper-slide.main04_bn .main04_2{width:60%; background: #666; display: block; padding:10% 0 15% 10%; text-align: left; box-sizing: border-box;}
.main04_slide .swiper-button-next, .main04_slide .swiper-button-prev {display: none;}
/* .main04_slide .swiper-pagination{position: absolute; left:0; width:40%; text-align: center;font-size: 6.1rem; color: #dedede; font-weight: 600;} */

.main04_slide .swiper-pagination {
	position: absolute;
	bottom:100px;
	left:0;
	width: 40% !important;
}
.main04_slide .swiper-pagination-bullet {
	border-radius: 0;
	width: 20px;
	height: 20px;
	text-align: center;
	font-size: 0;
	color:#000;
	opacity: 1;
	background: rgba(102,102,102,.5);
	margin: 0 3px;
	border-radius: 50px;

}
.main04_slide .swiper-pagination-bullet-active {	background: #169fdb;}

.main04_bn h3{font-size: 1.5rem; color: #fff;line-height: 1.2; margin-bottom: 30px;}
.main04_bn h2{font-size: 6.1rem; color: #fff; font-weight: 200;line-height: 1; margin-bottom: 30px;}
.main04_bn p{font-size: 1.3rem; color: #fff; width:90%;}
.main04_bn button{ margin:60px auto 0;}
.main04_bn .main04_1 p{margin:0 auto;}

@media screen and (max-width: 1400px) {
.main04_slide .swiper-slide.main04_bn .main04_1{width:40%; padding:8% 0; }
.main04_slide .swiper-slide.main04_bn .main04_2{width:60%; padding:8% 5% 20%;}
}
@media screen and (max-width: 1300px) {
.main04_bn h3{font-size: 1.5rem; }
.main04_bn h2{font-size: 5.5rem; }
.main04_bn p{font-size: 1.2rem; }

}
@media screen and (max-width: 1200px) {
.main04_bn h3{font-size: 1.4rem;}
.main04_bn h2{font-size: 4.5rem; }
.main04_bn p{font-size: 1.2rem;}
/* .main04_slide .swiper-pagination{font-size: 4rem;} */
.main04_slide .swiper-pagination {	position: absolute;	bottom:30px;left:0;	width: 40% !important;}
}
@media screen and (max-width: 1000px) {
.main04_bn h3{font-size: 1.3rem;}
.main04_bn h2{font-size: 4rem; }
.main04_bn p{font-size: 1rem;}
.main04_bn button{ margin:30px auto 0;}

}
@media screen and (max-width: 860px) {
.main04_slide .swiper-slide.main04_bn{display: block; width:100%;}
.main04_slide .swiper-slide.main04_bn .main04_1{width:100%; padding:60px 0; }
.main04_slide .swiper-slide.main04_bn .main04_2{width:100%; padding:60px 5% 200px; text-align: center;}

.main04_bn p br{display: none;}
/* .main04_slide .swiper-pagination{width:30%;position: absolute; left:auto; right:10px; bottom:30px; text-align: right; font-size: 1.5rem;} */
.main04_slide .swiper-pagination {position: relative;	bottom:0;left:0;	width: 100% !important; margin:30px auto;}

}

@media screen and (max-width: 768px) {
.main04_bn h3{font-size: 1rem;}
.main04_bn h2{font-size: 3rem; }
}


.main05{background: #fff}
.main05{padding:95px 5% 130px; display: block; }
.main05 .main05_tit{width:100%; text-align: center; margin-bottom: 60px;position: relative;}

.main05 .main05_list2{width:100%; max-width: 1400px; margin:0 auto; position: relative;}
.main05 .main05_list2 .card{width:100%;max-width: 432px; position: relative; margin-top:0;}
.main05 .main05_list2 .card a{display: block;width:100%; height: 100%;}
.main05 .main05_list2 .card .thumb{width:100%; box-shadow: 0 1px 2px rgba(0,0,0,0.0);}
.main05 .main05_list2 .card:hover .thumb{box-shadow:20px 20px 20px rgba(0,0,0,.2); transition: box-shadow 300ms ease-in-out; }
.main05 .main05_list2:nth-child(2n+1) .card{margin-top:100px;}


.main05_news .swiper-pagination-fraction{bottom: auto; right: auto; width:100%; float: left;}

.main05_news .swiper-pagination {
	position: absolute;
	bottom:0;
	width: 100% !important;
	margin:0 auto;
}
.main05_news .swiper-pagination-bullet {
	border-radius: 0;
	width: 20px;
	height: 20px;
	text-align: center;
	font-size: 0;
	color:#000;
	opacity: 1;
	background: rgba(102,102,102,.5);
	margin: 0 3px;
	border-radius: 50px;

}
.main05_news .swiper-pagination-bullet-active {	background: #169fdb;}


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

}
@media screen and (max-width: 768px) {
.main05 .main05_list2{width:100%; max-width: 100%; }
.main05 .main05_list2 .card{width:100%;max-width: 100%; position: relative; margin-top:0;}
.main05 .main05_list2:nth-child(2n+1) .card{margin-top:0;}

}














.main05 .main05_list{width:100%; max-width: 1400px; margin:0 auto; position: relative;display: grid;grid-template-columns: repeat(3, 1fr); grid-gap: 20px;position: relative;}
.main05 .main05_list .card{width:100%;max-width: 432px; position: relative; margin-top:0;}
.main05 .main05_list .card a{display: block;width:100%; height: 100%;}
.main05 .main05_list .card .thumb{width:100%; box-shadow: 0 1px 2px rgba(0,0,0,0.0);}
.main05 .main05_list .card:hover .thumb{box-shadow:20px 20px 20px rgba(0,0,0,.2); transition: box-shadow 300ms ease-in-out; }
.main05 .main05_list .card2{margin-top:100px;}

.main05 .img{width:100%; overflow: hidden; display: block;}
.main05 .img img{width:auto; height: auto;}
.main05 .info{margin:45px 0; text-align: center;}
.main05 h3{font-size: 3.1rem; color: #666; font-weight: 300;line-height: 1.2;}
.main05 h2{font-size: 4.4rem; color: #000; font-weight: 300;line-height: 1.2;}
.main05 h4{font-size: 1.5rem; color: #000;}
.main05 p{font-size: 1.2rem; color: #666;}

@media screen and (max-width: 1100px) {
.main05 h3{font-size: 2rem; }
.main05 h2{font-size: 3rem; }
.main05 h4{font-size: 1.5rem; }
.main05 p{font-size: 1.2rem; }
}
@media screen and (max-width: 820px) {
.main05 .main05_list{width:100%; max-width: 1400px; margin:0 auto; position: relative;display: grid;grid-template-columns: repeat(2, 1fr); grid-gap: 20px;position: relative;}
.main05 .main05_list .card{width:100%;max-width: 400px; margin: 0 auto;}

}
@media screen and (max-width: 768px) {
.main05 .main05_list{width:100%; max-width: 1400px; margin:0 auto; position: relative;display: grid;grid-template-columns: repeat(1, 1fr); grid-gap: 20px;position: relative;}
.main05 .main05_list .card{width:100%;max-width: 432px; margin: 0 auto;}
}



.main07_area{background: #000;z-index: 2; padding-bottom: 60px;}

.main06_area{background: #fff;z-index: 2;}
.main06{background:#fff url(../images/main/main06.jpg) no-repeat center; background-size: cover; padding:150px 0; height: 400px; display: block;}
.main06 .container{width:100%; max-width: 1400px; display: block;}
.main06 h2{font-size: 6.1rem; color: #fff; line-height: 1; width:100%; display: block;}

.main06_service{width:100%; max-width: 1400px;display: block; background: #fff;margin:-260px auto 50px; position: relative;}

.main06_service .swiper-slide{display: flex; align-items:flex-start;justify-content:center;}
.main06_service .swiper-slide .img{width:50%;height: 530px; content: '';}
.main06_service .swiper-slide a{width:100%; height: 100%; display: block; font-size: 0;}
.main06_service .swiper-slide.main06_bn1 .img{background:url('../images/main/main06_bn1.jpg') center; background-size: cover; }
.main06_service .swiper-slide.main06_bn2 .img{background:url('../images/main/main06_bn2.jpg') center; background-size: cover; }
.main06_service .swiper-slide.main06_bn3 .img{background:url('../images/main/main06_bn3.jpg') center; background-size: cover; }
.main06_service .swiper-slide.main06_bn4 .img{background:url('../images/main/main06_bn4.jpg') center; background-size: cover; }
.main06_service .swiper-slide.main06_bn5 .img{background:url('../images/main/main06_bn5.jpg') center; background-size: cover; }
.main06_service .swiper-slide.main06_bn6 .img{background:url('../images/main/main06_bn6.jpg') center; background-size: cover; }


.main06_service .swiper-slide .txt{width:50%; height:530px; padding:125px 110px; box-sizing: border-box; text-align: left; position: relative; background: #169fdb;} 
.main06_service .swiper-slide .txt h3{font-size: 3.1rem; color: #fff; line-height: 1.2; }
.main06_service .swiper-slide .txt h4{font-size: 1.5rem; color: #fff; position: relative;margin:30px 0 55px;}
.main06_service .swiper-slide .txt p{font-size: 1.1rem; color: #fff; width:95%; max-width: 485px;}

.main06_service .swiper-button-next, .main06_service .swiper-button-prev {position: absolute;bottom: 5%; top:auto; width: 84px; height: 34px; z-index: 100; cursor: pointer; background: url('../images/main/main06_arrow.png')no-repeat right;background-size: 168px auto; }
.main06_service .swiper-button-prev{background-position: left; left:50%; margin-left:30px;}
.main06_service .swiper-button-next{background-position: right;margin-left:0; right:30px;}

@media screen and (max-width: 1300px) {
.main06 .container{width:90%;}
.main06 h2{font-size: 5rem;}

.main06_service{width:90%;margin:-260px auto 50px;}
.main06_service .swiper-slide .img{width:50%;height: 500px;}
.main06_service .swiper-slide .txt{width:50%; height:500px; padding:10% 8%;} 
.main06_service .swiper-slide .txt h3{font-size: 3rem;}
.main06_service .swiper-slide .txt h4{font-size: 1.5rem;margin:20px 0;}
.main06_service .swiper-slide .txt p{font-size: 1.1rem;}

}

@media screen and (max-width: 1100px) {
.main06 h2{font-size: 4.5rem;}

}
@media screen and (max-width: 900px) {
.main06{padding:150px 0; height: 500px;}

.main06_service{width:90%;margin:-350px auto 50px;}
.main06_service .swiper-slide{display: block; align-items:flex-start;justify-content:center;}

.main06_service .swiper-slide .img{width:100%;height: 500px; display: block;}
.main06_service .swiper-slide .txt{width:100%; height:400px; padding:10% 8%;} 
.main06_service .swiper-button-prev{background-position: left; left:5%; margin-left:0;}
.main06_service .swiper-button-next{background-position: right;margin-left:0; right:5%;}

}

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

.main06{padding:100px 0; height: 400px;}
.main06 h2{font-size: 3rem;}

.main06_service{width:90%;margin:-300px auto 50px;}
.main06_service .swiper-slide .img{width:100%;height: 300px; display: block;}
.main06_service .swiper-slide .txt{width:100%; height:350px; padding:10% 8%;} 
.main06_service .swiper-slide .txt h3{font-size: 2rem;}
.main06_service .swiper-slide .txt h4{font-size: 1.1rem;margin:20px 0;}
.main06_service .swiper-slide .txt p{font-size: 1rem;}

}




/* PC용 레이어 팝업 */
#pop_layer{position: fixed; bottom:20px; left:80px; z-index: 99; background: #000;}
.swiper-container.layerpop {  height: auto; max-height: 500px; width:500px; display: block;}
.layerpop .swiper-wrapper{height: auto;max-height: 500px; }
.layerpop .swiper-slide{width:100%; display: block;}
.layerpop .swiper-slide a{width:100%;height: 100%; display: block;}
.layerpop .control_area{position: absolute; left:0%; width:100%; height: 61px; top:40%; display: block; z-index: 10;}
.layerpop .swiper-button-next3, .layerpop .swiper-button-prev3 {position: absolute;top:45%; right:2%; width: 21px; height: 40px; z-index: 100; margin-top:0; cursor: pointer; background: url('../images/common/btn_arrow2.png')no-repeat; background-size:auto 40px; background-position: right; }
.layerpop .swiper-button-prev3{left:2%; background-position: left;}


.layerpop .swiper-pagination-fraction{bottom: auto; right: auto; width:100%; float: left;}

.layerpop .swiper-pagination {
	position: absolute;
	bottom:10%;
	width: 100% !important;
	margin:0 auto;
}
.layerpop .swiper-pagination-bullet {
	border-radius: 0;
	width: 32px;
	height: 3px;
	text-align: center;
	font-size: 0;
	color:#000;
	opacity: 1;
	background: rgba(102,102,102,.5);
		margin: 0 3px;

}
.layerpop .swiper-pagination-bullet-active {
	background: rgba(102,102,102,1);
}

#pop_layer .today2{background: #666; padding:10px; height: 1.2; position: relative; display: block;}
#pop_layer .today2 ul{display: table; width: 100%;}
#pop_layer .today2 li{width:50%; float: left; font-size: 1.2rem; line-height: 1; color: #fff;display: inline-block; position: relative; vertical-align: top;}
#pop_layer .today2 li:last-child{text-align: right;}
#pop_layer .today2 li a{color: #fff;font-size: 1.2rem;}
#pop_layer .today2 li a:hover{text-decoration: underline;}
#pop_layer .today2 li label{ color: #fff; margin-left:10px; display: inline-block;}
#pop_layer .today2 li [type='checkbox']{border:0; display: inline-block;}



/* 모바일용 레이어 팝업 */
#pop_mobile{display: none;}


@media (min-width:285px) and (max-width:800px) {
/* 모바일용 레이어 팝업 */
#pop_mobile{position: fixed; top:0; left:0; right:0; bottom: 0; background: rgba(0,0,0,0.6);z-index: 1000; height: 100%; width:100%; display: block;}

#pop_mobile .swiper-container.layerpop { height: auto; width:95%; display: block; margin:30% auto 0;}
#pop_mobile .layerpop .swiper-wrapper{height: 100%;}
#pop_mobile .layerpop .swiper-slide{width:100%; height: auto; display: block;}
#pop_mobile .today2{background: #f0f0f0; width:95%; height: 60px; position: relative; display: block; margin:0 auto;}
#pop_mobile .today2 a{width:50%; float: left; font-size: 20px; line-height: 20px; color: #000; text-align: center; padding:20px 0; display: inline-block; position: relative;}
#pop_mobile .today2 a:after{content:'';position: absolute; right:0; top:20px; width:2px; height:20px; background: #ddd; z-index: 2;display: block;}
#pop_mobile .today2 a:after:last-child{display: none;}

/* PC용 레이어 팝업 */
#pop_layer{display: none;visibility: hidden;}
#pop_layer .layerpop{display: none;}

}