@charset "uft-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* 초기화 */
*{margin: 0; padding: 0; box-sizing: border-box;}
body, html{position: relative;  width: 100%; height: auto; font-size: 17px; font-family: 'Pretendard', sans-serif !important; color: #000; scroll-behavior: smooth;}
html.hidden, body.hidden{position: fixed !important; top: 0; height: 100vh !important; min-height: 100vh; overflow: hidden !important; touch-action: none;}
html.hidden, body.hidden .header{opacity: 1;}
ul, li{list-style: none;}
a{text-decoration: none; color: inherit;}
p{word-break: keep-all;}
i, em{font-style: normal;}

/* 공통 */
.pc{display: block;}
.tablet{display: none;}
.mob{display: none;}

/* font-Size */
.f15 {font-size: .9rem;}
.f20 {font-size: 1rem;}
.f22 {font-size: 1.2rem;}
.f24 {font-size: 1.5rem;}
.f28 {font-size: 1.7rem;}
.f36 {font-size: 2.1rem;}
.f74 {font-size: 3.6rem;}
.f81 {font-size: 4rem;}
.Bd {font-weight: bold;}
.SBd {font-weight: 600;}
.Rr {font-weight: 300;}
.SRr{font-weight: 400;}
.Lt {font-weight: 100;}
.Fls-4{letter-spacing: 2px !important;}

.wrap{width: 100%; overflow: hidden;}
.move{opacity: 0;}
.main{width: 100%; position: relative;}
.inner{width: 90%; max-width: 1200px;}
.inner2{width: 90%; max-width: 1400px;}
.inner3{width: 85%; position: relative;}
.inner4 {width: 100%; max-width: 1650px;}

.img-wrap img { width: 100% !important; }

/* tab contents */
.m3 .tab-container {display: flex; margin: 0 auto; padding: 31px 0; height: 67vh; justify-content: flex-end;}
.m3 .tab-nav {display: flex;justify-content: center; flex-direction: column; align-items: flex-end; margin: 0 auto; height: 160px; position: relative; z-index: 3; left: -210px; bottom: 100px;}
.m3 .tab-nav a {display: block;padding: 10px 20px;color: rgba(255,255,255,.25); letter-spacing : -0.74px; font-size : 4rem; text-align: center; font-family: 'BookkMyungjo'; transition: all .4s;}
.m3 .tab-nav a:hover {color: #fff;}
.m3 .tab-nav .active a {display: none;}
.m3 .tab-content {display: none;color: #fff; text-align: right;}
.m3 .tab-content.active {display: flex; flex-direction: column; align-items: flex-end;position: relative;}

.CI{font-family: 'Chapaza Italic', sans-serif;}
.CR{font-family: 'Chapaza', sans-serif;}
.JM{font-family: 'JejuMyeongjo', sans-serif;}
.BM{font-family: 'BookkMyungjo', sans-serif;}
.AT{font-family: 'Arsenica Trial', sans-serif;}
.PS{font-family: 'Poppins', sans-serif;}

/* 사이드 Nav */
.Side_navBox {position: absolute; z-index: 1; right: 0; top: 18%; display: none;}
.fp-enabled .Side_navBox {display: block;}
.Side_navBox li {width: 100px; height: 100px; border: 1px solid #808080; display: flex; flex-direction: column; justify-content:  center; align-items: center; color: #fff; text-align: center; transition: all .4s;}
.Side_navBox li a {overflow:hidden;}
.Side_navBox li:nth-of-type(odd) {background: #3b3c3c;}
.Side_navBox li:nth-of-type(even) {background: #003778;}
.Side_navBox li img {width: 24px; height: 23px;}
.Side_navBox li h4 {font-size: 1rem;}
.Side_navBox li p {font-size: .88rem;}
.Side_navBox li i {position: absolute; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .4s;}
.Side_navBox.Icon.on li {height: 0; overflow: hidden; border: none;}
.Side_navBox.Icon.on li  i {top: 25%; left: 25%; transform: rotate(180deg);}
.Side_navBox li div {width: 33px; height: 33px; position: absolute; top: -20px; background: #003778; border-radius: 50%; cursor: pointer;}

/* 팝업 */
.home-popup {position: absolute; left: 20%; top: 2%; z-index: 999; max-width: 393px;}
.home-popup .popup_inner img { display: block; width: 100%;}
.home-popup .popup_inner .popup_btn { height: auto; padding: 5px 15px; background: #fff; border: 1px solid #000; }
.home-popup .popup_inner .popup_btn a { display: inline-block; font-size: 16px; text-decoration: none; color: #000; }
.home-popup .popup_inner .popup_btn a:last-child { float: right; }
#agreePopup { position: relative; z-index: -1; }

/* 스크롤 무브 */
.scroll_wrap {position: absolute;  left: 6vw;  bottom: 15%;  z-index: 10; color: #fff;}
.scrol_txt { text-align: center;  font-size: 13px;  line-height: 1;  letter-spacing: 5px;  text-transform: uppercase; writing-mode: vertical-rl;   display: inline-block;}
.scrol_txt span {transform: rotate(-180deg); display: block; }
.scroll_box {  width: 20px;  height: 35px;   position: relative; padding: 6px 4px;  box-sizing: border-box;  display: block; margin: 10px auto 0px;  border: 2px solid #fff;  border-radius: 15px;}
.scroll_dotbox { width: 100%;  height: 100%;  position: relative;}
.scroll_dot {  position: absolute;   left: 50%;  top: 0;  transform: translate(-45%,-50%);  width: 5px;  height: 5px;  background-color: #fff;  border-radius: 100%;  transition: all 0.4s;  top: 100%; animation: scroll_move 2s infinite;}
.scroll_box i{display: flex; justify-content: center; align-items: flex-start; height: 8px; margin-top: 10px;}

@keyframes scroll_move {
    0% { top: 0%;}
    60% { top: 100%;}
    100% { top: 0%; }
}

/* Swiper */
.swiper-slide1{width: 100%; height: 100vh; background: #000;}
.swiper-slide2{width: 100%; height: 100vh; background: #000;}
.swiper-slide3{width: 100%; height: 100vh; background: #000;}

.txt_box{position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 1200px;}
.txt_box .tit{margin: 25px 0; font-size: 3.5rem; font-weight: 800; line-height: 1.2;}
.txt_box .con{font-size: 1rem; color: #666; font-weight: 300; line-height: 1.7;}

.main_control{position: absolute; width: 100%; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 10;}
.control_inner {width: 90vw; display: flex; align-items: center; justify-content: flex-end;}
.control_inner .swiper-button-next, .control_inner .swiper-button-prev { color: #fff;  font-size: 1.13rem; position: relative;  width: auto;  height: auto;  line-height: 25px;  margin-top: 0px; right: 0;}
.control_inner .swiper-button-next::after, .control_inner .swiper-button-prev::after{display: none;}
.main_control .control_inner .ms1_pag {position: relative;display: inline-block;vertical-align: middle;width: auto;margin-top: 18px;}
.main_control .control_inner .ms1_pag .swiper-pagination-bullet { color:#B8A0A3; background: transparent;opacity: 1;box-sizing: border-box;margin: 0 30px; padding: 0 20px; border-radius: 0;}
.main_control .control_inner .ms1_pag .swiper-pagination-bullet-active {position: relative; width: 120px; color: #fff;}
.main_control .control_inner .ms1_pag .swiper-pagination-bullet-active::after{content: ''; width: 70px; background: #fff; height: 3px; position: absolute; left: 78px; top: 8px;}
.ms1_playbox .swiper-button-pause, .ms1_playbox .swiper-button-play {position: relative; left: 0px; top: -2px; display: none; cursor: pointer; height: 28px; line-height: 25px; font-size: 1.88rem;}

.main_control .control_inner .ms1_pag .swiper-pagination-bullet-active::after {animation: progress_bar 4.8s linear; animation-fill-mode:none;}
@keyframes progress_bar {
	0% { width: 0;}
	100% { width: 70px;}
}
.ms1_playbox .swiper-button-pause.on {display: block;}
.ms1_playbox .swiper-button-play.on {display: block;}

/*헤더*/
#header{width: 100%; height: 80px; position: fixed; left: 0; top: 0; z-index: 2; transition: all 0.4s; overflow: hidden;}
#header::after{content: ''; width: 100%; height: 1px; background: inherit; position: absolute; left: 0; top: 79px; transition: all 0.4s;}
#header:hover{height: 300px; overflow: visible; background: #fff;  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);}
#header:hover::after{background: #333;}
#header:hover .h_nav ul{color: #333;}
#header:hover .h_nav ul li {color: #333;}
#header:hover .hamburger span {background: #333;}
#header.hide{opacity: 0;}
#header .inner3{margin: 12px auto 0; font-size: 0;}
#header .inner3 > div{display: inline-block; vertical-align: top;}
#header .inner3 > div.h_logo{width: 130px; position: relative;}
#header .inner3 > div.h_nav{width: calc(100% - 300px); text-align: right; margin-top: 20px;}
#header .inner3 > div.h_btn{width: 80px; text-align: end; margin-top: 12px; position: relative; top: 4px;}

#header .inner3 > div.h_logo img{width: 100%;}
#header .inner3 > div.h_logo img.logo1{position: absolute; left: 0; top: 0; opacity: 0;}
#header:hover .inner3 > div.h_logo img.logo1 {opacity: 1;}



.main_nav > li{width: 12%; display: inline-block; vertical-align: top; font-size: 1rem; color: #fff; text-align: center;}
.nav_sub{margin-top: 46px; position: relative;}
.nav_sub::after{content: ''; width: 100%; height: 3px; background: #003764; position: absolute; left: 0; top: -21px; z-index: 1; opacity: 0; transition: all 0.4s;}
.nav_sub:hover::after{opacity: 1;}
.main_nav li a:hover {color: #003764;;}
.nav_sub > li{font-size: 0.9rem; padding-bottom: 14px; transition: all 0.4s;}
.nav_sub > li a:hover{color: #003764;;}

/* Site Map */
.siteMap{width: 100%; height: 100vh; position: fixed; left: 0; top: 0; transform: translateY(-100%); transition: all 0.4s;display: flex; justify-content: center; align-items: center; background: #0066cb; z-index: 9;}
.siteMap .inner2 > p { font-size: 70px; padding: 20px 0; font-weight: bold; }
.siteMap h1 {position: absolute; top: 30%;}
.open{transform: none;}

.hamburger{position: absolute; width: 18px; height: 13px; z-index: 99; top: 8px;}
.hamburger #nav-icon{position: relative; width: 100%; height: 100%;}
.hamburger #nav-icon span{display: block; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: all 0.4s;}
.hamburger #nav-icon span:nth-child(1){top: 0;}
.hamburger #nav-icon span:nth-child(2){top: 49%; transform: translate(0, -50%);}
.hamburger #nav-icon span:nth-child(3){bottom: 4%;}
.hamburger #nav-icon.open span:nth-child(1){left: 0; top: 4px; transform: rotate(45deg);}
.hamburger #nav-icon.open span:nth-child(2){opacity: 0;}
.hamburger #nav-icon.open span:nth-child(3){position: absolute; left: 0; bottom: 7px;  transform: rotate(-45deg);}

.m_nav{position: relative; top: 10%; margin: auto; display: flex; gap: 50px; text-align: center;}
.m_nav .nav_tit{padding: 10px; position: relative; font-size: 1.5rem; color: #fff; font-weight: 500;}
.m_nav .inner {position: relative; top:100px;}
.m_nav li .mob_sub li a { transition: all .4s; }
.m_nav li .mob_sub li:hover a{color: #fff;}
.m_nav > li.on .nav_tit span::after{transform: translateY(-50%) rotate(0deg) !important;}
.m_nav > li{width: 100%; padding: 30px; font-size: 1.25rem; white-space: nowrap;}

/* lang */
.lang{width: 80px; height: 28px; margin-left: 100px; text-align: left; overflow: hidden; background: inherit; display: inline-block; vertical-align: top; transition: all 0.4s;}
.lang_menu:hover {background:#9CBAD3;}
.lang_menu li:first-child {border-bottom: 1px solid #fff;}
.lang_menu > li:not(:first-child) {background: #9CBAD3;}
.lang_menu > li > a{font-size: 0.85rem; letter-spacing: 2px; color: #fff; display: block; padding: 5px; position: relative;}
.lang_menu > li i {position: absolute;top: -7px; right:-102px; line-height: 44px;transition: all 0.4s;font-size: 1.4rem; color: #fff;}
.lang_menu.on i{transform: rotate(180deg)}
.lang:hover {height: 110px;}
#header:hover .lang_menu li:first-child {background: #9CBAD3;}

.mob_nav{width: 100%; font-size: 0; display: flex;}
.mob_nav > li{display: inline-block; vertical-align: top; font-size: 1.4rem; font-weight: 700; width: 25%; box-sizing: border-box; border-right: 1px solid rgba(255,255,255,0.2); padding: 0 3%;}
.mob_nav > li:nth-child(1){border-left: 1px solid rgba(255,255,255,0.2);}
.mob_sub{margin-top: 3vh;} 
.mob_sub > li{font-size: 1.1rem; font-weight: 300; line-height: 40px;}

/*푸터*/
.footer{background: #3b3c3c; color: #d8d8d8; position: relative; font-weight: 200; top:-1px;}
.footer::after{content: ''; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; bottom: 50px;}
.f_Wrap {display: flex; height: 250px; margin:auto;}
.f_Wrap > div {display: flex; align-items: center;}
.f_Wrap .f_Left {flex: 2; gap: 60px;}
.f_logo img {margin-bottom: 30px; width: 10vw;}
.f_Left .f_info h3{font-size: 1.88rem; margin: 30px 0;line-height : 29.6px; letter-spacing : -0.75px;}
.f_Left .f_info li:not(:first-child) {display: flex; gap: 35px;}
.f_Left .f_info li p {font-size: 1.13rem;letter-spacing : -0.9px;line-height : 28px;}
.f_Left .f_info li span {font-weight: bold; margin-right: 5px;}
.f_Wrap .f_Right {flex:1; justify-content: space-between;}
.f_iconWrap {display: flex; gap: 30px;}
.f_iconWrap li {width: 80px; height: 80px; background: #003778; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.f_iconWrap li img {width: 35px; height: 35px; transition: all .4s;}
.f_iconWrap li img:hover {scale: .8;}
.f_iconWrap li a {position: relative; padding: 23px;}
.f_iconWrap li a p {position: absolute;top: 90px;left: 50%;transform: translateX(-50%); font-weight: bold; font-size: .81rem;}
.f_Right .f_nav { width: 65px; margin-top: 40px;}
.f_Right .f_nav li {padding: 10px 0; font-weight: 400;}


.f_copy{margin: auto; font-size: 0; padding: 25px 0;}
.f_copy p {font-size: .88rem; font-weight: 200; margin: auto; max-width: 58vw; height: 25px; line-height: 50px;}

#top_btn{position: absolute; background: transparent; right: 14vw; top: 11vh; width: 50px; height: 25px; text-align: center; transition: all 0.4s; border: 0 !important; cursor: pointer; z-index: 9;}
#top_btn p {color: #80c3f0;}
#top_btn.show{opacity: 1;}

/* section1 */
#section1 {color: #fff; overflow: hidden;}
#section1 .swiper-slide {display: flex; overflow: hidden;}
#section1 .ImgWrap {flex: 1 1 55%; display: flex; align-items: center; justify-content: flex-end;}
#section1 .ImgWrap img {width: 58%;}
#section1 .ImgWrap .Simg3 {width: 78%; position: absolute; left: 35.5%;}
#section1 .m1_txt { flex: 1 1 45%; margin: auto; height: 75vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 0;}
#section1 .m1_txt h3 { font-size : 3.6rem; letter-spacing : 2px; font-weight: 300; margin-bottom: 40px;position: relative; transform: translate(0);}
#section1 .m1_txt h3:first-of-type {left: 100px;}
#section1 .m1_txt h3:last-of-type {left: 100px; top: -2vh;}
#section1 .m1_txt h4 { font-size : 1.5rem; font-weight: 400; line-height : 32.31px; letter-spacing : 0.56px; color: #eb8ea1; margin-left: 20px;}
#section1 .m1_txt .m1_txtImgWrap {display: flex; width: inherit; align-items: flex-end; position: relative; left: -119px; bottom: 9vh; transform: translate(0);}
#section1 .swiper-slide3 .m1_txt .m1_txtImgWrap {flex-direction: column; gap: 40px; left: -20vw;}
#section1 .swiper-slide3 .m1_txt h3 {font-size: 3.6rem; text-align: right; left: -20vw;}
#section1 .swiper-slide3 .m1_txt h3:last-of-type {top: -3vh;}
#section1 .swiper-slide3 .m1_txt .MTI3 img:last-of-type {left: 22.1vw; top: 67px;}
#section1 .m1_txt img:first-of-type {width: 455px; height: 150px;}
#section1 .m1_txt img:last-of-type {width: 60px; height: 55px; position: absolute; top: 73px; left: 1vw; animation: rotation 8s infinite linear;}

/* section2 */
#section2 .Wrap {width:100vw;}
#section2 .Wrap img {position: absolute; z-index: 99; height: 101vh; width: 101vw; left: -2px; object-fit: cover; z-index: 2;}
#section2 .Wrap .VideoWrap {position: relative; width: 100%; height: 100vh;}
#section2 .Wrap .VideoWrap video {position: absolute; width:100%; height: 100%; object-fit: cover;}
#section2 .m2_txt {padding: 120px 350px;margin: auto; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; position: absolute; top:0; z-index: 9;}
#section2 .m2_txt h3:first-of-type { font-size : 5.06rem; line-height : 135px; letter-spacing : 4.05px; font-weight: 400; position: relative;}
#section2 .m2_txt h3:first-of-type::before {content: '*'; position: absolute; top: -60px; left: -30px; font-size: 4rem; font-family: 'Pretendard';}
#section2 .m2_txt h3:last-of-type { font-size : 3.63rem; line-height : 58px; color: #80c3f0; font-weight: 400;}
#section2 .m2_txt h4 {font-weight : 400; font-size : 1.5rem; line-height : 36.47px; letter-spacing : 0.36px; margin: 120px 0 50px;}
#section2 .m2_txt h5, #section2 .m2_txt p { font-size : 1.25rem; line-height : 28px; letter-spacing : -1px;}
#section2 .m2_txt p {margin-top: 40px;}
#section2 .ImgWrap1 {position: absolute; width: 10%; bottom: 1vh; right: 9vw; z-index: 9;}
#section2 .ImgWrap1 img {animation: rotation 8s infinite linear;}
#section2 .ImgWrap2 { border: 1px solid #fff; width: 51%; height: 142%; border-radius: 50%; position: absolute; z-index: 9; bottom: -99%; left: -34%;}
@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* section3 */

#section3 {background: #000;}
#section3::after {content: ''; position: absolute; border: 1px solid #fff; width: 51.5%; height: 115%; border-radius: 50%; z-index: 1; top: 39%;right: -37.2%;}
#section3 .fp-tableCell {display: flex; align-items: center; justify-content: center;}
.m3 {margin:auto; background: url(../img/section3_m3_bg1.png)no-repeat center/cover; overflow: hidden; height: 765px;}
.m3 .m3H {background: #003778; padding: 10px 10px 10px 10px; width: 500px; border-radius: 80px; position: relative; left: 25px; margin-bottom: 20px; transition: all .4s;}
.m3 .m3H.on {width: 520px;}
.m3 .m3H a {position: absolute; left: 8%; top: 50%; transform: translateY(-50%); width: auto;}
.m3 .m3H a::after { content: ''; position: absolute; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%;left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all .4s;}
.m3 p.BM {padding: 10px 20px 10px 10px; border-radius: 80px;}
.m3 a .ImgWrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7px; height: 11px; transition: all .4s; }
.m3 a .ImgWrap img:last-of-type {position: absolute; opacity: 0; left: 50%;top: 50%; transform: translate(-50%, -50%); z-index: 1;}
.m3 a:hover .ImgWrap img {opacity: 0;}
.m3 a:hover .ImgWrap img:last-of-type {opacity: 1;}
.m3 .m3H a:hover::after {background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.m3 > p.CR {color: #fff; position: absolute; right: 9%; top: 13%; letter-spacing: 1px;}
.m3 p {font-size: 1.2rem; line-height : 28px; letter-spacing : -1px; font-weight: 100; padding: 0 6px;}
.m3 p.PS {font-weight: 500; font-size: .94rem;}
.m3 h2.BM {font-size : 4rem; font-weight: 400; letter-spacing : -1.85px; position: relative; padding: 65px 0;}
.m3 h2::before {content: '*'; position: absolute; top: -60px; left: -40px; font-size: 4rem; font-family: 'Pretendard'; padding: 100px 0;}
.m3 h4 {margin-bottom: 10px; padding: 0 6px;}
.m3 h4.white {position: absolute; top: 8vh; left: 14vw;font-size : 20px; letter-spacing : 1px; font-weight: 300;}

/* section4 */
.mode-rl {writing-mode: vertical-rl; font-size : 1.3rem; line-height : 36.47px; letter-spacing : -1.5px; color: #80c3f0;}


#section4 {background: url(../img/section4_bg.png)no-repeat center/cover; top:-1px;}
.m4 {margin: auto;}
.m4 .m4_txt { position: absolute; color: #fff; height: 235px; padding: 40px 0; top: 160px; left: 18%; z-index: 9;}
.m4 .m4_txt h2 {font-size: 5.06rem; font-weight: 300;line-height : 90px; letter-spacing : -0.95px; text-align: left;}
.m4 .m4_txt h2::before {content: '*'; position: absolute; top: -60px; left: -35px; font-size: 4rem; font-family: 'Pretendard';}
.m4 .m4_txt p {height: 550px; margin-top: 50px;}
.m4 .m4_imgBox {display: flex; justify-content: center; position: relative; top: -8px;}
.m4 .swiper2 {display: flex; height: 100vh; align-items: center;}
.m4 .swiper-wrapper {height: auto; text-align: center;}
.m4 .swiper-slide > div {position: relative; max-width: 650px; margin: auto; top: 70px; right:-50%; overflow: hidden;}
.m4 .swiper-slide-prev {overflow: hidden;}
.m4 .swiper-slide-next { left: -8%; bottom: 120px; z-index: -9;}
.m4 .swiper-slide .icon {width: 270px; height: 260px; position: absolute; left: 53vw; bottom: -6.7vh;}
.m4 .swiper-slide .snow {width: 100px; height: 85px; position: absolute; left: 55vw; bottom: -2.4vh; animation: rotation 8s infinite linear;}
.m4 .swiper-slide a img {width: 90%;}
.m4 .swiper-slide a {display: inline-block; height: 100%; position: relative; overflow: hidden;}
.m4 .swiper-slide a::after {content: ''; background: #80c3f0; opacity: 0; position: absolute; width: 585px; height: 585px; left: 33px; transition: all .4s;}
.m4 .swiper-slide a:hover * {opacity: 1;}
.m4 .swiper-slide a:hover::after {opacity: 1;}
.m4 .swiper-slide .hoverWrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: inherit; z-index: 9; color: #fff; opacity: 0; display: flex; flex-direction: column; gap: 30px; transition: all .4s;}
.m4 .swiper-slide .hoverWrap img {width: 110px; margin: auto;}
.m4 .swiper-slide .hoverWrap div img {width: 15px; height: 30px; margin: 0; transition: all .4s;}
.m4 .swiper-slide .hoverWrap div img:last-child {position: absolute; opacity: 0; right: 44px;}
.m4 .swiper-slide .hoverWrap div:hover img {transform: translateX(10px); opacity: 0;}
.m4 .swiper-slide .hoverWrap div:hover img:last-of-type{opacity: 1;}
.m4 .swiper-slide .hoverWrap div p {font-size: .94rem; transition: all .4s;}
.m4 .swiper-slide .hoverWrap div:hover p {color: #003764;}
.m4 .swiper-slide .hoverWrap p.Bd {font-size: 36px; color: #000;}
.m4 .swiper-slide .hoverWrap div { display: flex; gap: 10px; justify-content: center; cursor: pointer;}
.m4 .swiper-slide .hoverWrap div span {white-space: pre;}
.m4 .swiper2 .swiper-button-prev { width: 40px; height: 40px; left: 70%; top: 85%;}
.m4 .swiper2 .swiper-button-prev img, .m4 .swiper2 .swiper-button-next img{transition: all .4s;}
.m4 .swiper2 .swiper-button-prev img:last-of-type, .m4 .swiper2 .swiper-button-next img:last-of-type{position: absolute; opacity: 0;}
.m4 .swiper2 .swiper-button-prev:hover img, .m4 .swiper2 .swiper-button-next:hover img {opacity: 0;}
.m4 .swiper2 .swiper-button-prev:hover img:last-of-type, .m4 .swiper2 .swiper-button-next:hover img:last-of-type {opacity: 1;}
.m4 .swiper2 .swiper-button-next {width: 40px; height: 40px; right: 25%; top: 85%; }
.swiper-button-prev:after, .swiper-button-next:after {content: '';}

/* section5 */
#section5 {background: url(../img/section5_bg.png)no-repeat center/cover; width: 100vw;top: -1px;}
.m5 {margin: auto; height: 100vh; display: flex; align-items: center;}
.m5 .cont {height: auto; display: flex; gap: 24px; margin: auto;}
.m5 .cont .box1 {flex: 1 1 25%; overflow: hidden;}
.m5 .cont img {transition: all .4s; width: 100%; cursor: pointer;}
.m5 .cont img:hover {transform: scale(1.1);}
.m5 .cont .box1 h3 { font-size : 5.5rem; line-height : 105.9px; color: #80c3f0; font-weight: 300; white-space: nowrap; position: absolute; bottom: -6%; left: -4.9%; z-index: 9;}
.m5 .cont .box2 {flex: 1 1 60%; overflow: hidden;}
.m5 .cont .box3 {flex: 1 1 20%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 50px; overflow: hidden;}

#section6 {background: url(../img/section6_bg.svg)no-repeat center/cover; top:-1px;}
.m6 {margin: auto; height: 100vh; position: relative;}
.m6 .ImgWrap2 { border: 1px solid #fff; width: 970px; height: 1800px; border-radius: 50%; position: absolute; z-index: 0; bottom: -50%; left: -90%;}
.m6 .ImgWrap1 { position: absolute; width: 30%; top: 150px; right: -33vw; z-index: 1;}
.m6 .ImgWrap1 img {animation: rotation 8s infinite linear;}
.m6 .txtWrap {width: 40vw; height: 60vh; padding-top: 200px;}
.m6 .txtWrap h2 {font-size : 4.8rem; line-height : 90px; letter-spacing : 4.05px; font-weight: 300;margin-bottom: 100px; position: relative;}
.m6 .txtWrap h2::after {content: '*'; position: absolute; top: -50px; left: -35px; font-size: 4rem; font-family: 'Pretendard';}
.m6 .txtWrap > div:first-of-type {display: flex; gap: 4vw;}
.m6 .txtWrap p { font-size : 3.63rem; line-height : 58px; color: #a7cae8;}
.m6 .txtWrap ul {padding: 10px 0;}
.m6 .txtWrap ul li {width: 12vw; position: relative; margin-bottom: 20px;}
.m6 .txtWrap ul li a {display: flex; justify-content: space-between; padding: 10px; border: 1px solid #80c3f0; color: #80c3f0; transition: all .4s;}
.m6 .txtWrap ul li a:hover {background: #80c3f0; color: #003778; font-weight: 500;}
.m6 .txtWrap ul li a img{width: 25px; height: 25px; position: relative; transition: all .4s;}
.m6 .txtWrap ul li a img:last-of-type {position: absolute; right: 11px; opacity: 0;}
.m6 .txtWrap ul li a:hover img:last-of-type {opacity: 1;}
.m6 .txtWrap ul li span {white-space: nowrap;  font-size : 1.2rem; line-height : 28px; letter-spacing : -1px; font-weight: 100;}
.m6 .txtWrap ul li a:hover span {font-weight: bold;}