/*
font-family: 'Raleway', sans-serif;
font-family: 'Red Hat Display', sans-serif;
*/

/*초기화*/
*{margin: 0; padding: 0; box-sizing: border-box;}
html, body{width: 100%; height: auto; position: relative; font-family: 'Red Hat Display', sans-serif; font-size: 17px; color: #000; font-weight: 400; scroll-behavior: smooth; }
html.hidden, body.hidden{position: fixed !important; top: 0; height: 100vh !important; min-height: 100vh; overflow: hidden !important; touch-action: none;}
body, p, h1, h2, h3, h4, h5, h6, div, header, section, article, footer, nav, aside, address, figure, dl, dt, dd, ol, ul, li, form, input, select{display: block;}
ol, ul, li{list-style: none;}
a, a:link, a:visited, a:hover, a:active{text-decoration: none; color: inherit; display: block;}
i, em, address{font-style: normal;}
table {border-collapse: collapse; border-spacing: 0;}
button{padding: 0; background-color: transparent; border: none;}
img{display: block;}

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

.wrap{width: 100%; overflow: hidden; position: relative;}
.move{opacity: 0;}
.main{width: 100%; position: relative;}
.inner1{width: 90%; max-width: 1300px; margin: auto; position: relative;}

.raleway{font-family: 'Raleway', sans-serif;}
.mons{font-family: 'Montserrat', sans-serif;}
.blue{color: #141b37;}
.white{color: #fff;}
.light{font-weight: 300;}
.medium{font-weight: 500;}
.semibold{font-weight: 600;}
.bold{font-weight: 700;}
.extrabold{font-weight: 800;}
.black{font-weight: 900;}
.upper{text-transform: uppercase;}

/*헤더*/
.header{width: 97%; height: 78px; position: absolute; left: 50%; top: 24px; transform: translate(-50%, 0); border-radius: 40px; background: #fff; z-index: 2; transition: all 0.4s; overflow: hidden; box-shadow: 2px 3px 7px rgba(0,0,0,0.15);}
.header:hover{overflow: visible; height: 380px;}
.header .h_inner{width: 95%; margin: 22px auto 0; font-size: 0;}
.header .h_inner > div{display: inline-block; vertical-align: top;}
.header .h_inner > div.h_logo{width: 178px; position: relative;}
.header .h_inner > div.h_logo img{width: 100%;}

.header .h_inner > div.h_nav{width: calc(90% - 178px); text-align: center; margin-top: 7px;}
.main_nav{width: 100%; font-size: 0; text-align: end; padding-right: 10%;}
.main_nav > li{width: 14%; display: inline-block; vertical-align: top; font-size: 1rem; color: #141b37; text-align: center;}
.nav_sub{margin-top: 46px; position: relative;}
.nav_sub::after{content: ''; width: 100%; height: 3px; background: #141b37; position: absolute; left: 0; top: -20px; z-index: 1; opacity: 0; transition: all 0.4s;}
.nav_sub:hover::after{opacity: 1;}
.nav_sub > li{font-size: 0.9rem; padding-bottom: 14px; transition: all 0.4s;}
.nav_sub > li:hover{color: #141b37;}

.header .h_inner > div.h_btn{width: 10%; text-align: end; margin-top: 10px; position: relative; z-index: 99; font-size: 0;}
.header .h_inner > div.h_btn > div{display: inline-block; vertical-align: top;}
.hambuger{width: 20px; height: 20px; display: inline-block; transition: all 0.4s; cursor: pointer;}
.hambuger > img{width: 100%;}
.lang{width: calc(100% - 20px); text-align: center; margin-top: -5px;}
.lang .lang_cont{font-size: 1.1rem;}
.lang .lang_cont i{display: inline-block; vertical-align: middle; margin-left: 5px; font-size: 0.8rem;}
.lang .lang_sub{opacity: 0; transition: all 0.4s;}
.lang:hover .lang_sub{opacity: 1;}
.lang .lang_sub > li > a{font-size: 1.1rem; padding: 5px 0;}

.sitemap{width: 100vw; height: 100vh; background: #fff; color: #000; position: fixed; margin-left: calc(-50vw + 50%); left: 0; top: -24px; z-index: 10; transform: translateY(-120%); transition: all 0.4s;}
.sitemap.open{transform: none;}
.sitemap .inner{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%;}
.sitemap_tit{font-size: 3.4rem; font-weight: 700; margin-bottom: 6vh;}

.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{padding-bottom: 2vh; font-size: 1.1rem; font-weight: 300;}

#fp-nav.color ul li .fp-tooltip{color: #061D41;}
#fp-nav.color ul li .fp-tooltip.fp-right::before{background: #061D41;}
#fp-nav.color ul li .fp-tooltip.fp-right::after{color: #061D41;}

/*푸터*/
.f_top_bg{width: 100%; margin-top: -18vh;}
.f_top_bg.none{display: none;}
.f_top_bg img{width: 100%;}

.footer{background: #fff; position: relative;}
.footer::before{content: ''; position: absolute; left: 0; top: -110px; width: 100%; height: 110px; background: url(../img/footer_bg.png) no-repeat center/cover;}

#top_btn{position: absolute; right: 5%; top: -55px; width: 68px; cursor: pointer;}
#top_btn img{width: 100%; display: block;}

.footer .f_top{width: 100%; padding: 90px 0 98px; border-bottom: 1px solid rgba(102,102,102,0.5);}
.footer .f_inner{width: 95%; margin: auto; font-size: 0;}
.footer .f_inner > div{display: inline-block; vertical-align: top;}
.footer .f_top .f_info{width: 45%;}
.footer .f_top .f_info .f_logo{width: 270px; max-width: 270px;}
.footer .f_top .f_info .f_logo img{width: 100%;}
.footer .f_top .f_info .f_info1{font-size: 1rem; color: #383838; margin: 40px 0 25px;}
.footer .f_top .f_info .f_info2{font-size: 1rem; color: #383838; line-height: 0.8;}
.footer .f_top .f_nav_wrap{width: 55%;}
.footer .f_top .f_nav{width: 100%; display: flex;}
.footer .f_top .f_nav > li{width: 20%; padding-left: 15px; border-left: 1px solid rgba(178,178,178,0.5);}
.footer .f_top .f_nav > li > a{font-size: 1.15rem; font-weight: 700; color: #18298a; letter-spacing: -0.02em;}
.footer .f_top .f_nav > li > ul{margin: 17px 0 0;}
.footer .f_top .f_nav > li > ul > li > a{font-size: 0.9rem; color: #383838; letter-spacing: -0.02em; line-height: 1.8;}

.footer .f_bot{padding: 20px 0;}
.footer .f_bot .copyright{display: inline-block; vertical-align: middle; width: 50%; font-size: 0.9rem; color: #424357; letter-spacing: -0.02em;}
.footer .f_bot .policy{display: inline-block; vertical-align: middle; width: 50%; font-size: 0; text-align: end;}
.footer .f_bot .policy > li{display: inline-block; vertical-align: middle; position: relative; padding: 0 8px;}
.footer .f_bot .policy > li::after{content: ''; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); width: 1px; height: 80%; background: #424357;}
.footer .f_bot .policy > li:last-child{padding-right: 0;}
.footer .f_bot .policy > li:last-child::after{display: none;}
.footer .f_bot .policy > li a{font-size: 0.9rem; color: #424357; letter-spacing: -0.02em;}

/*메인1*/
.m_inner{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

#section1{z-index: 9; background: #141b37;}
/*
#section1 .m1_bg{width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#section1 .m1_bg img{width: 100%; height: 100%; display: block;}
*/
.m1_img_wrap{width: 45%; position: absolute; right: 8%; top: 16%;}
.m1_img_wrap .m1_logo1{animation-delay: 0.2s; animation-duration: 0.6s; animation-name: m1_logo1; animation-fill-mode: forwards; opacity: 0;}
.m1_img_wrap .m1_logo2{position: absolute; right: 0; top: 50%; transform: translate(80%, -50%); width: 652px; height: 280px; animation-delay: 0.2s; animation-duration: 0.6s; animation-name: m1_logo2; animation-fill-mode: forwards; opacity: 0;}
.m1_img_wrap .move_bg{width: 100%; height: 100%; background: linear-gradient(90deg, #1932db, #e12c30); background-size: 200% 200%; animation: bg_move 7s ease infinite; z-index: -1; object-fit: cover; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-image: url(../img/main/m1_mask_img.png); mask-image: url(../img/main/m1_mask_img.png);}
@keyframes bg_move { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
#section1 .m1_logo{width: 40%; margin: 0 0 55px 0;}
#section1 .m1_logo img{width: 100%; display: block;}
#section1 .m1_list > li{display: inline-block; vertical-align: top; width: 13%;}
#section1 .m1_list > li:first-child{margin-right: 30px;}
#section1 .m1_list > li a{width: 100%; line-height: 35px; border: 1px solid #b2b2b2; border-radius: 18px; font-size: 1.1rem; color: #b2b2b2; text-align: center; transition: all 0.4s;}
#section1 .m1_list > li a:hover{border: 1px solid #fff; color: #fff; font-weight: 700;}
#section1 .scroll{position: absolute; left: 50%; bottom: 5%; transform: translate(-50%, 0);}
#section1 .scroll .scroll_inner{position: relative;}
#section1 .scroll .scroll_inner img{display: block; animation: main_scroll 2s infinite linear;}
#section1 .scroll .scroll_inner::after{content: ''; display: block; margin: 8px auto 0; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%;}
@keyframes main_scroll { 
  0%{transform: translateY(0);}
  50%{transform: translateY(-15px);}
  100%{transform: translateY(0);}
}
@keyframes m1_logo1 { 
  0%{transform: translate(-10%, 0); opacity: 0;}
  100%{transform: translate(0, 0); opacity: 1;}
}
@keyframes m1_logo2 { 
  0%{transform: translate(10%, -50%); opacity: 0;}
  100%{transform: translate(0, -50%); opacity: 1;}
}

/*메인2*/
#section2{}
#section2 .m2_obj1{position: absolute; right: -22%; top: -24%; width: 59%; transform: translate(65%, 0); opacity: 0; transition: all 1.2s;}
#section2 .m2_obj1 img{width: 100%; display: block;}
#section2 .m2_obj2{position: absolute; left: -11%; top: -6%; width: 100%;}
#section2 .m2_obj2 img{width: 100%; display: block; animation: m2_bounce 5s infinite linear;}
@keyframes m2_bounce { 
  0%{transform: translate(0, 0) rotate(0);}
  50%{transform: translate(20px, 20px) rotate(-3deg);}
  100%{transform: translate(0, 0) rotate(0);}
}
#section2 .inner1{top: 20%; transform: translate(-50%, 0);}
#section2 .main_tit{position: relative; padding-left: 27px; font-size: 1.4rem; margin: 0 0 105px 0;}
#section2 .main_tit::before{content: ''; position: absolute; left: 0; top: -23px; width: 34px; height: 36px; background: url(../img/main/ico_maintit.png) no-repeat center/100%;}
#section2 .m2_txt{text-align: end;}
#section2 .m2_txt .big{font-size: 3.5rem; margin: 0 0 40px 0;}
#section2 .m2_txt .m_txt{font-size: 1.4rem; line-height: 1.2;}

#section2 .m2_obj1.on{transform: translate(0, 0); opacity: 1;}

/*메인3*/
#section3{}
#section3 .m3_obj{position: absolute; left: -8%; bottom: -17%; width: 49.5%; transform: translate(-85%, 0); opacity: 0; transition: all 0.8s;}
#section3 .m3_obj img{width: 100%;}
#section3 .m_inner{}
#section3 .main_tit{font-size: 2rem; margin: 0 0 145px 0; text-align: end;}
#section3 .main_tit span{display: inline-block; position: relative; padding: 0 0 55px 28px;}
#section3 .main_tit span::before{content: ''; position: absolute; left: 0; top: -18px; width: 34px; height: 36px; background: url(../img/main/ico_maintit.png) no-repeat center/100%;}
#section3 .m3_cont{width: 100%;}
#section3 .m3_cont .m3_list{width: 90%; margin: auto; font-size: 0;}
#section3 .m3_cont .m3_list > li{display: inline-block; position: relative; vertical-align: top; margin-right: 70px; width: calc(25% - 53px); height: auto; border-radius: 125px; box-shadow: 2px 2px 8px rgba(0,0,0,0.2); transition: all 0.4s;}
#section3 .m3_cont .m3_list > li:last-child{margin-right: 0;}
#section3 .m3_cont .m3_list > li .list_ico{position: relative; width: 100%; height: 240px; background: #83e1c6; border-radius: 125px 125px 0 0; transition: all 0.4s;}
#section3 .m3_cont .m3_list > li:nth-child(2) .list_ico{background: #1996db;}
#section3 .m3_cont .m3_list > li:nth-child(3) .list_ico{background: #8445d1;}
#section3 .m3_cont .m3_list > li:nth-child(4) .list_ico{background: #e01e36;}
#section3 .m3_cont .m3_list > li .list_ico img{width: 100%; display: block; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0);}
#section3 .m3_cont .m3_list > li .list_txt{width: 100%; height: auto; padding: 26px 0 60px; background: #fff; text-align: center; border-radius: 0 0 125px 125px; transition: all 0.4s;}
#section3 .m3_cont .m3_list > li .list_txt .num{margin: 0 0 15px 0; font-size: 1rem; transition: all 0.4s;}
#section3 .m3_cont .m3_list > li .list_txt .bold{font-size: 1.1rem; line-height: 1.2; width: 100%; transition: all 0.4s}
#section3 .m3_cont .m3_list > li .hov_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 125px; background: linear-gradient(to bottom, #83e1c6, #4275d6); opacity: 0; z-index: -1; transition: all 0.4s;}
#section3 .m3_cont .m3_list > li:nth-child(2) .hov_bg{background: linear-gradient(to bottom, #1996db, #423ed6);}
#section3 .m3_cont .m3_list > li:nth-child(3) .hov_bg{background: linear-gradient(to bottom, #8445d1, #422ed6);}
#section3 .m3_cont .m3_list > li:nth-child(4) .hov_bg{background: linear-gradient(to bottom, #e62c2c, #6d32d9);}
#section3 .m3_cont .m3_list > li:hover{transform: translateY(-65px);}
#section3 .m3_cont .m3_list > li:hover .list_ico{background: transparent;}
#section3 .m3_cont .m3_list > li:hover .list_txt{background: transparent;}
#section3 .m3_cont .m3_list > li:hover .list_txt .bold{color: #fff;}
#section3 .m3_cont .m3_list > li:hover .list_txt .num{color: #fff;}
#section3 .m3_cont .m3_list > li:hover .hov_bg{opacity: 1;}

#section3 .m3_obj.on{transform: translate(0, 0); opacity: 1;}

/*메인4*/
#section4{background: #0047ba;}
#section4 .m_inner{top: 55%;}
#section4 .main_tit{font-size: 2rem; text-align: center; position: relative;}
#section4 .main_tit::before{content: ''; position: absolute; left: 40%; top: -20px; width: 34px; height: 36px; background: url(../img/main/ico_maintit2.png) no-repeat center/100%;}
.m4_img{width: 76%; margin: -10px auto 50px;}
.m4_img img{width: 100%;}
.m4_list{text-align: center;}
.m4_list > li{display: inline-block; vertical-align: top; width: 22%; height: auto; margin-right: 25px; text-align: center;}
.m4_list > li:last-child{margin-right: 0;}
.m4_list > li .list_tit{font-size: 1.1rem; letter-spacing: -0.025em; margin-bottom: 15px;}
.m4_list > li .list_cont{width: 100%; height: auto; padding: 24px 5% 15px; background: #fff; border-radius: 18px;}
.m4_list > li .top{position: relative; padding: 0 0 15px 0;}
.m4_list > li .top::after{content: ''; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); width: 76%; height: 1px; background: rgba(200,201,202,0.5);}
.m4_list > li .logo:nth-child(2){margin-top: 15px;}
.m4_list > li .logo img{margin: auto;}
.m4_list > li .bottom{padding: 20px 0 0;}
.m4_list > li:nth-child(2) .bottom{padding: 7px 0 0;}
.m4_list > li .bottom .medium{font-size: 1.1rem; color: #4c4948; letter-spacing: -0.025em; margin-bottom: 10px;}
.m4_list > li .bottom .list_p{font-size: 0.95rem; color: #4c4948; letter-spacing: -0.025em;}
.m4_list > li:last-child .top::after{display: none;}

/*메인5*/
#section5{background: #fff;}
#section5 .m5_bg{width: 100%; position: absolute; left: 0; bottom: 0;}
#section5 .m5_bg img{width: 100%;}
#section5 .m5_top .m_inner{top: 43%; z-index: 9;}
#section5 .m5_top .contact_wrap{display: inline-block; vertical-align: middle; width: 26%;}
#section5 .m5_top .contact_wrap .contact{width: 100%; position: relative;}
#section5 .m5_top .contact_wrap .contact .contact_bg{width: 100%; transition: all 0.4s;}
#section5 .m5_top .contact_wrap.about_wrap .contact .contact_bg{opacity: 0;}
#section5 .m5_top .contact_wrap .contact a:hover .contact_bg{opacity: 1;}
#section5 .m5_top .contact_wrap .contact .contact_bg img{width: 90%; display: block; margin: auto; animation: bg_round 8s infinite linear;}
@keyframes bg_round { 
  0%{transform: rotate(0)}
  100%{transform: rotate(360deg)}
}
#section5 .m5_top .contact_wrap .contact .contact_inner{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
#section5 .m5_top .contact_wrap .contact .contact_inner .black{font-size: 2rem; letter-spacing: -0.02em; color: #fff; transition: all 0.4s;}
#section5 .m5_top .contact_wrap .contact .contact_inner .semibold{font-size: 1.1rem; margin: 24px 0; letter-spacing: -0.02em; color: #fff; transition: all 0.4s;}
#section5 .m5_top .contact_wrap.about_wrap .contact .contact_inner .semibold:nth-child(2){margin: 24px 0 0 0;}
#section5 .m5_top .contact_wrap.about_wrap .contact .contact_inner .semibold:nth-child(3){margin: 0 0 24px 0;}
#section5 .m5_top .contact_wrap .contact .contact_inner .arrow img{margin: auto; transition: all 0.4s;}
#section5 .m5_top .contact_wrap .contact a:hover .contact_inner .arrow img{transform: translateX(10px);}
#section5 .m5_top .contact_wrap.about_wrap .contact .contact_inner .black{color: #000;}
#section5 .m5_top .contact_wrap.about_wrap .contact .contact_inner .semibold{color: #000;}
#section5 .m5_top .contact_wrap .contact a:hover .contact_inner .black{color: #fff;}
#section5 .m5_top .contact_wrap .contact a:hover .contact_inner .semibold{color: #fff;}

#section5 .m5_bot_img1{position: absolute; left: 50%; bottom: -10%; transform: translate(-50%, 50%); opacity: 0; width: 80%; transition: all 1.2s 0.4s;}
#section5 .m5_bot_img1 img{width: 100%;}
#section5 .m5_bot_img2{position: absolute; left: 60%; bottom: 0; width: 25%; transform: translate(50%, 0); opacity: 0; transition: all 1.2s 0.6s;}
#section5 .m5_bot_img2 img{width: 100%;}

#section5 .m5_bot_img1.on{transform: translate(-50%, 0); opacity: 1;}
#section5 .m5_bot_img2.on{transform: translate(0, 0); opacity: 1;}