/* 메인_공통 */
section{ position: relative; width: 100%; margin: 0 auto; cursor: default;}
.m_inner{ max-width: 1400px; margin: 0 auto;}
.m_pding1{ padding-top: 180px;}
.m_pding2{ padding-bottom: 180px;}
.m_pding{ padding-top: 180px; padding-bottom: 180px;}
.m_bg{ background-color: var(--bg-color1);}
.m_sec_title{ position: relative; z-index: 10; margin-bottom: 70px;}
.poi_t{ font-size: 20px; font-weight: 600; color: var(--main-color); line-height: 1; margin-bottom: 10px; }
h3.tit{ font-size: 45px; font-weight: 600; line-height: 1; text-transform: uppercase;}
h3.tit em{ font-size: 58px; font-weight: 700;}
.txt{ font-size: 18px; font-weight: 500; color: var(--font-b-color); margin-top: 20px;}

.more_link{ margin-top: 70px;}
.more_link a{ font-size: 16px; font-weight: 700; line-height: 1; text-transform: uppercase; align-items: center; }
.more_link a i{ display: flex; align-items: center; justify-content: center; font-size: 24px; width: 40px; height: 40px; margin-left: 25px;  border: 1px solid var(--font-m-color); border-radius: 100%; vertical-align: middle; transition: all .4s;}
.more_link a:hover i{ background-color: var(--main-color); border: 1px solid var(--main-color); color: var(--w-color); transition: all .4s; transform: rotate(180deg); margin-left: 15px;}

.ms_tit{ font-size: 20px; font-weight: 600; line-height: 28px;}
.ms_txt{ margin-top: 20px; color: var(--font-b-color);}
/*  */

/* line & scroll */
.m_scroll{ width: 100px; height: 100vh; position: absolute; top: 0; right: 0; z-index: 10; border-left: 1px solid rgba( 255, 255, 255, 0.1); transition: all .6s; }
.top_side, .bottom_side{ width: 5px; height: 5px; display: block; border-left: 1px solid var(--line-color); position: absolute; right: 95px; }
.top_side{ border-bottom: 1px solid var(--line-color); top: 95px;}
.bottom_side{ bottom: 95px; border-top: 1px solid var(--line-color); }
.scroll_wrap{ width: 100px; height: 100px; position: absolute; right: 0; bottom: 0; border-top: 1px solid rgba( 255, 255, 255, 0.1); font-size: 15px; color: rgba( 255, 255, 255, 0.8); text-align: center; letter-spacing: -1px; transition: all .6s; }
.scroll_wrap span{ display: block; }
.scroll_wrap .scroll_line{ width: 19px; height: 27px; border-radius: 8px; border: 1px solid var(--w-color); margin: 25px auto 5px; }
.scroll_wrap .scroll_line > span{ width: 3px; height: 3px; border-radius: 50%; margin: 6px auto 0; background: rgba(255, 255, 255, 0.7); animation: scroll-on 3.2s infinite;}

/*  */
.main_visual{ position: relative; margin: 0 auto; height: 100%; }

/* m01 */

.bg_cir00 .imgbox{ position: absolute; top: -862px; right: -200px; width: 1000px; height: 1000px;  border: 5px solid var(--w-color); overflow: hidden; border-radius: 100%; transform: translate(580px, -412px); transition: all 1.5s ease; z-index: -1;}
.bg_cir00 .imgbox .bg_cimg{ position: absolute; top: 862px; right: 200px; width: 1253px; height: 605px; background: url("img/m1_img01.jpg") no-repeat 0 30px; background-size: cover; transform: scale(1.2); transition: all 2.5s ease; z-index: -1;}
.main_sec_01.start .bg_cir00 .imgbox{ transform: translate(0, 0); width: 1465px; height: 1465px; }
.bg_cir01{ width: 453px; height: 453px; background-color: var(--main-color); border-radius: 100%; z-index: -1; top: 115px; left: -228px; position: absolute;}
.bg_cir02{ width: 80px; height: 80px; background-color: var(--sub-color); border-radius: 100%; z-index: -1; top: 445px; left: 225px; position: absolute; }

/* m02 */
.main_sec_02 .m_sec_title{ justify-content: space-between; align-items: flex-end;}
.main_sec_02 .m_wrap{ justify-content: space-between; }
.m_list_box{ width: 23%; padding: 70px 20px; text-align: center; background: var(--w-color); border-radius: 35px 0 35px 0; box-shadow: 0 0 25px rgba(29, 21, 21, 0.1); }
.m_list_box .icon img{ display: block; margin: 0 auto 50px; }
.m_list_box .icon img.on{ display: none;}
.m_list_box:hover{ background: linear-gradient(45deg, #004729, #02be6e, #afe2cc); color: var(--w-color);}
.m_list_box:hover .ms_txt{ color: var(--w-color);}
.m_list_box:hover .icon img.off{ display: none;}
.m_list_box:hover .icon img.on{ display: block; }

/* m03 */
.main_sec_03{ overflow: hidden; left: 0%; }
.main_sec_03 p img{ display: block; height: 100px; }
.main_sec_03 p.move_img.cloned{ position: absolute; top: 65%; left: 0px; }

/* m04 */
.main_sec_04 .m_sec_title{ justify-content: space-between; align-items: flex-end;}
.main_sec_04 .m_wrap.flex{ justify-content: space-between; }
.m_list_ro{ width: 18%; height: 245px; border-radius: 25px; box-shadow: 0px 0px 25px rgba( 0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 0 60px; font-family: var(--font-noto); }
.m_list_ro img{ display: block; width: auto; margin-bottom: 30px;  }
.m_list_ro:nth-child(2n){ margin-top: 35px; }
.m_list_ro:nth-child(1), .m_list_ro:nth-child(5){ margin-top: 70px;}
.m04_bg_txt{ position: absolute; bottom: -60px; right: -60px; font-size: 200px; line-height: 1; color: var(--main-color); opacity: 0.1; font-weight: 600; font-family: var(--font-noto); text-transform: uppercase;}

/* m05 */
.main_sec_05::before{ content: ""; display: block; background: url("img/m05_bg1.png") no-repeat; width: 588px; height: 375px; position: absolute; top: 0; left: 0; background-size: cover;}
.main_sec_05::after{ content: ""; display: block; background: url("img/m05_bg2.png") no-repeat; width: 941px; height: 717px; position: absolute; bottom: 0; right: 0; background-size: cover;}
.main_sec_05 .m_sec_title{ text-align: center; }

/* m06 */
.main_sec_06 .m_sec_title{ text-align: center; color: var(--w-color); margin-bottom: 0;}
.main_sec_06 .poi_t, .main_sec_06 .txt, .main_sec_06 .more_link a{ color: var(--w-color);}
.main_sec_06 .more_link a i{ border: 1px solid var(--w-color);}
.main_sec_06 .more_link a{ justify-content: center;}
.main_sec_06 .back_img{ position: absolute; top: 0; width: 100%; height: 625px; z-index: -1; overflow: hidden;}
.main_sec_06 .back_img #bgimg{ position: absolute; background: url("img/m06_bg.jpg") no-repeat bottom; width: 100%; height: 900px; background-size: cover; }

/* animation */
@keyframes scroll-on {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(8px);
	}
	100% {
		transform: translateY(0px);
	}
}


@media(max-width: 1420px){
	.m_inner{ padding-left: 3%; padding-right: 3%;}
	.main_sec_01.start .bg_cir00 .imgbox{ width: 1200px; height: 1200px; }
	.bg_cir01{ top: 0; width: 330px; height: 330px;}
}
@media(max-width: 1280px){
	.ms_txt br{ display: none;}
	.m_list_ro{ height: 210px; padding: 0 20px;}
	.m_list_ro img{ height: 59px;}
	
}
@media(max-width: 1080px){
	.m_pding{ padding-top: 100px; padding-bottom: 100px;}
	.m_pding1{ padding-top: 100px;}
	.m_pding2{ padding-bottom: 100px;}
	.poi_t{ font-size: 1rem;}
	h3.tit em{ font-size: 2.6rem;}
	.txt{ font-size: 1rem;}
	.ms_tit{ font-size: 1.2rem;}
	.ms_txt{ font-size: 0.95rem; margin-top: 10px;}
	h3.tit{ font-size: 2.2rem;}
	.more_link{ margin-top: 6%;}
	.more_link a{ font-size: 0.95rem}

	
	.bg_cir00 .imgbox .bg_cimg{ height: 710px; top: 600px;}
	.main_sec_01.start .bg_cir00 .imgbox{ width: 950px; height: 950px; top: -600px;}
	.bg_cir01{ top: 0; width: 250px; height: 250px;}

	.main_sec_02 .m_wrap, .main_sec_04 .m_wrap.flex{ flex-flow: row wrap;}
	.m_list_box .icon img{ width: auto; height: 66px; margin: 0 auto 25px;}
	.m_list_box{ width: 48%; padding: 5%; margin-bottom: 5%;}
	.main_sec_03 p.move_img.cloned{ top: 50%;}
	.m_list_ro{ width: 32%; margin-bottom: 35px;}
	.m_list_ro:nth-child(2n), .m_list_ro:nth-child(1), .m_list_ro:nth-child(5){ margin-top: 0;}
	.m_list_ro:nth-child(4), .m_list_ro:nth-child(5){ width: 48%;}
	.m04_bg_txt{ display: none;}
	
}
@media(max-width: 780px){
	.m_pding{ padding-top: 10%; padding-bottom: 10%;}
	.m_pding1{ padding-top: 10%;}
	.m_pding2{ padding-bottom: 10%;}

	.poi_t{ font-size: 0.9rem;}
	h3.tit em{ font-size: 2.2rem;}
	.txt{ font-size: 0.9rem; margin-top: 10px;}
	.ms_tit{ font-size: 1rem;}
	.ms_txt{ font-size: 0.85rem; margin-top: 10px; line-height: 1.6;}
	h3.tit{ font-size: 2rem;}
	.more_link{ margin-top: 4%;}
	.more_link a{ font-size: 0.85rem}
	.m_sec_title{ margin-bottom: 50px;}
	.bg_cir00 .imgbox .bg_cimg{ top: 200px;}
	.main_sec_01.start .bg_cir00 .imgbox{ width: 750px; height: 750px; top: -450px;}

	.main_sec_02 .m_sec_title, .main_sec_04 .m_sec_title{ flex-direction: column; align-items: flex-start;}
	.m_list_ro{ height: auto; padding: 5%;}
	.m_list_ro img{ height: 49px; margin-bottom: 15px; }

	.main_sec_05::before{ width: 300px; height: 250px;}
	.main_sec_05::after{ width: 300px; height: 300px;}
	.main_sec_06 .back_img{ height: 100%; }
	.main_sec_06 .back_img #bgimg{ height: 400px;}
	.main_sec_03 p.move_img.cloned{ top: 40%;}

}
@media(max-width: 700px){
	.main_sec_01.start .bg_cir00 .imgbox{ top: -545px;}
	
}
@media(max-width: 500px){
	.main_sec_01.start .bg_cir00 .imgbox{ right: -350px;}
	.poi_t{ font-size: 0.8rem;}
	h3.tit em{ font-size: 1.8rem;  line-height: 1.4;}
	.txt{ font-size: 0.8rem; margin-top: 5px;  line-height: 1.4;}
	.ms_tit{ font-size: 0.8rem;  line-height: 1.4;}
	.ms_txt{ font-size: 0.75rem; margin-top: 5px;}
	h3.tit{ font-size: 1.6rem;  line-height: 1.4;}
	.more_link{ margin-top: 3%;}
	.more_link a{ font-size: 0.75rem;}

	.m_list_box .icon img{ height: 50px;}
	.more_link a i{ width: 30px; height: 30px; font-size: 20px; margin-left: 15px;}
	.main_sec_03 p.move_img.cloned{ top: 30%;}
}