/*
font-family: 'Pretendard';
font-family: 'Arial';
font-family: 'KorailRoundGothicBold';
font-family: 'Poppins', sans-serif;
*/

/*초기화*/
*{margin: 0; padding: 0; box-sizing: border-box;}
html, body{width: 100%; height: auto; position: relative; font-family: 'Pretendard' !important; font-size: 17px; color: #000; scroll-behavior: smooth; }
ul, li{list-style: none;}
a{text-decoration: none; color: inherit; display: block; width: 100%;}
p, span{word-break: keep-all;}
i, em{font-style: normal;}

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

.move{opacity: 0;}
.inner{width: 90%; max-width: 1200px; margin: auto;}
.inner2{width: 90%; max-width: 1400px; margin: auto;}
.inner3{width: 85%;}
.inner4{width: 70%; margin: auto;}

.main{width: 100%; position: relative;}
.center{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.arial{font-family: 'Arial';}
.poppins{font-family: 'Poppins', sans-serif;}
.color0{color: #000;}
.color1{color: #fff;}
.color2{color: #3caadc;}
.color3{color: #002d64;}
.bold{font-weight: 700;}

/*header*/
.header{width: 100%; height: 74px; position: fixed; left: 0; top: 0; background: transparent; overflow: hidden; transition: all 0.4s; z-index: 10;}
.header::after{content: ''; width: 100%; height: 1px; background: #e9e9e9; position: absolute; left: 0; top: 74px;}
.header .header_inner{width: 90%; margin: 20px auto 0; font-size: 0; }
.header .header_inner > div{display: inline-block; vertical-align: top;}

.header:hover{height: 270px; box-shadow: 3px 3px 3px rgba(0,0,0,0.1); background: #fff;}

.h_logo{width: 160px; position: relative; z-index: 99;}
.h_nav{width: calc(100% - 300px); margin-top: 8px; text-align: end;}
.h_etc{width: 140px; text-align: end; margin-top: 0; position: relative; z-index: 99;}

.h_logo img{width: 100%; display: block; position: absolute; left: 0; top: 0; transition: all 0.4s;}
.h_logo img:nth-child(1){position: static;}
.h_logo img.logo{opacity: 0;}
.header:hover .h_logo img.logo_w{opacity: 0;}
.header:hover .h_logo img.logo{opacity: 1;}

.main_menu{font-size: 0;}
.main_menu > li{display: inline-block; vertical-align: top; margin: 0 1vw;}
.main_menu > li > a{display: block; font-size: 1rem; color: #fff; text-align: center;}

.sub_menu{text-align: center; margin-top: 36px; position: relative;}
.sub_menu::before{content: ''; width: 100%; height: 3px; background: #3caadc; position: absolute; top: -11px; left: 0; z-index: 1; opacity: 0; transition: all 0.4s;}
.sub_menu > li > a{font-size: 0.95rem; font-weight: 300; display: block; padding: 8px 0; transition: all 0.4s; text-transform: capitalize;}
.sub_menu > li > a:hover{color: #3caadc;}
.sub_menu:hover::before{opacity: 1;}

.lang{width: 100px; height: 35px; background: #3caadc; display: inline-block; overflow: hidden; cursor: pointer; transition: all 0.4s;}
.lang .lang_top{ font-size: 0.9rem; color: #fff; text-align: center; line-height: 35px;}
.lang .lang_top span{display: inline-block; vertical-align: middle; margin-right: 25px;}
.lang .lang_top i{display: inline-block; vertical-align: middle; transition: all 0.4s;}
.lang .lang_sub{display: none; width: 100%; padding: 0 0 5px 16px; text-align: left;}
.lang .lang_sub li a{padding: 5px 0; font-size: 0.9rem; color: #fff; transition: all 0.4s;}
.lang:hover{height: auto;}
.lang:hover .lang_sub{display: block;}
.lang:hover .lang_top i{transform: rotate(180deg);}
.lang .lang_sub li a:hover{text-decoration: underline;}

.hamburger{display: none;}

.header:hover .main_menu > li > a, .header.fixed .main_menu > li > a{color: #000;}
.header:hover .hamburger > span, .header.fixed .hamburger > span{background: #000;}

.header.fixed{background: #fff; height: 75px;}
.header.fixed:hover{height: 270px;}

.header.fixed .h_logo img.logo_w{opacity: 0;}
.header.fixed .h_logo img.logo{opacity: 1;}

.sitemap{display: none;}

/*footer*/
#footer{width: 100%; height: auto; position: relative; border-top: 1px solid #ddd;}
.f_top{width: 100%; height: auto; padding: 50px 0 15vh;}
.f_inner{width: 90%; max-width: 1400px; margin: auto; font-size: 0; position: relative;}
.top_btn{position: absolute; right: 0; top: -75px; width: 45px; height: 45px; background: #002d64; text-align: center; cursor: pointer;}
.top_btn i{line-height: 45px; color: #fff; font-size: 1.5rem; font-weight: 300;}
.f_top .f_inner > ul{display: inline-block; vertical-align: top;}
.f_top .f_nav{width: 85%; font-size: 0;}
.f_top .f_nav > li{display: inline-block; vertical-align: top; margin-right: 3vw;}
.f_top .f_nav > li a{font-size: 0.9rem; font-weight: 500; color: #4d4d4d; transition: all 0.4s;}
.f_top .f_nav > li a:hover{color: #002d64;}
.f_top .f_nav > li ul{width: 100%; margin-top: 20px;}
.f_top .f_nav > li ul li{margin-bottom: 15px;}
.f_top .f_nav > li ul li:last-child{margin-bottom: 0;}
.f_top .f_nav > li ul li a{font-size: 0.8rem; font-weight: 300; color: #808080;}
.f_top .f_right_ul{width: 15%; text-align: end;}
.f_top .f_right_ul li{margin-bottom: 15px;}
.f_top .f_right_ul li a{font-family: 'KorailRoundGothicBold'; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: #002d64;}

.f_bot{width: 100%; height: auto; background: #e5e5e5; padding: 40px 0;}
.f_inner > div{display: inline-block; vertical-align: middle;}
.f_logo{width: 235px; max-width: 235px;}
.f_logo img{width: 100%;}
.f_info{width: calc(100% - 458px); padding-left: 3%;}
.f_info p{margin-bottom: 7px; display: inline-block; margin-right: 15px;}
.f_info p:nth-child(2){margin-right: 0;}
.f_info p:nth-child(3){display: block; margin-right: 0;}
.f_info p:last-child{margin-bottom: 0; margin-right: 0;}
.f_info p span{display: inline-block; font-size: 0.8rem; font-weight: 300; color: #808080;}
.f_info p span.bold{font-size: 0.9rem; font-weight: 500; color: #4d4d4d; margin-right: 3px; text-transform: uppercase;}
.f_inner > div.family_site{width: 223px; height: 32px; background: #fff; position: relative; cursor: pointer; vertical-align: top;}
.family_site .family_tit{font-size: 0.9rem; font-weight: 300; color: #4d4d4d; line-height: 32px; text-align: center;}
.family_site .family_tit span{display: inline-block; margin-right: 95px; text-transform: uppercase;}
.family_site .family_tit i{display: inline-block; vertical-align: middle; transition: all 0.4s;}
.site{display: none;  width: 100%; height: auto; padding: 5px 0;}
.site li a{font-size: 0.9rem; font-weight: 300; color: #666; padding: 5px 22px;}
.family_site.on{height: auto;}
.family_site.on .site{display: block; background: #fff;}
.family_site.on .family_tit i{transform: rotate(180deg);}

/*main*/
.main{width: 100%; position: relative;}
.m1{width: 100%; height: 100vh; z-index: 9;}
.m1 .ms1{width: 100%; height: 100%;}
.m1 .ms1 .swiper-slide{width: 100%; position: relative; background: url(../img/m1_bg.png) no-repeat center/cover;}
.m1 .ms1 .swiper-slide .ms_img{width: 54%; max-width: 1028px; height: 80%; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); overflow: hidden;}
.m1 .ms1 .swiper-slide .ms_img .move{width: 100%; height: 100%; position: relative;}
.m1 .ms1 .swiper-slide .ms_img img{width: 100%; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.m1 .ms1 .swiper-slide .ms_cont{width: 90%; max-width: 1400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: end;}
.m1 .ms1 .swiper-slide .ms_cont .move{width: 47%; margin-left: 53%; text-align: left;}
.m1 .ms1 .swiper-slide .ms_cont .ms_big{font-size: 4rem; font-weight: 700; margin-bottom: 95px; line-height: 1.3;}
.m1 .ms1 .swiper-slide .ms_cont .ms_big .ms_big2{font-size: 3.8rem;}
.m1 .ms1 .swiper-slide .ms_cont .small{font-size: 0.9rem; margin-bottom: 20px; letter-spacing: 1px;}
.m1 .ms1 .swiper-pagination{left: auto; right: 15%; bottom: 12%; width: auto;}
.m1 .ms1 .swiper-pagination span{background: transparent; border: 1px solid #fff; opacity: 1;}
.m1 .ms1 .swiper-pagination span.swiper-pagination-bullet-active{background: #fff;}
.more{display: inline-block; width: 196px; height: 55px; background: #3caadc; text-align: center; color: #fff;}
.more span{display: inline-block; text-transform: uppercase; font-size: 1.1rem; vertical-align: middle; margin-right: 50px; line-height: 55px; letter-spacing: 0.6px;}
.more i{display: inline-block; font-size: 1rem; vertical-align: middle; line-height: 51px; transition: all 0.4s;}
.more:hover i{transform: rotate(180deg);}
.more img{display: inline-block; vertical-align: middle;}

.m2{width: 100%; height: 100vh; background: url(../img/m2_bg.png) no-repeat center/cover; z-index: 7;}
.m2 .inner2{position: absolute; left: 50%; bottom: 20%; transform: translate(-50%, 0); font-size: 0;}
.m2 .inner2 > div{display: inline-block; vertical-align: bottom;}
.m2_left{width: 80%;}
.big2{font-size: 4.2rem; font-weight: 700; line-height: 1.3;}
.big3{font-size: 1.5rem; font-weight: 700; letter-spacing: 5px; text-transform: uppercase;}
.m2_left .big3{margin: 80px 0 148px;}
.m2_left .txt{font-size: 1.2rem; line-height: 1.5; font-weight: 300;}
.m2_right{width: 20%; text-align: end;}
.m2_right .more2{margin-bottom: 16px; background: #002d64;}
.m2_right .more img{transition: all 0.4s;}
.m2_right .more:hover img{transform: translateY(5px);}

.m3{margin: 18vh 0;}
.m3 .inner{max-width: 1600px;}
.tabnav{width: 100%; position: absolute; left: 5%; top: 32%;}
.tabnav > li{display: inline-block; margin-right: 8px; vertical-align: top; width: auto; height: auto;}
.tabnav > li a{width: 58px; height: 58px; background: #002d64; border-radius: 50px; text-align: center; transition: all 0.4s; overflow: hidden;}
.tabnav > li span{display: inline-block; font-size: 1.2rem; color: #fff; transition: all 0.4s; line-height: 58px;}
.tabnav > li span.num{color: #fff;}
.tabnav > li span.tab_tit{opacity: 0; margin-left: 10px;}
.tabnav > li a.active{width: auto; padding: 0 30px; border-radius: 50px; background: linear-gradient(to right, #3caadc, #9dcc48);}
.tabnav > li a.active span.num{color: #002d64;}
.tabnav > li a.active span.tab_tit{opacity: 1;}
.tabnav > li a:hover{background: linear-gradient(to right, #3caadc, #9dcc48);}
.tab{width: 100%; position: relative;}
.tabcontent{width: 100%;}
.tab_cont {text-align: center;}
.tab_cont .big3{margin-bottom: 20px; color: #3caadc;}
.tab_img{width: 100%; margin-top: 225px; font-size: 0;}
.tab_img li{display: inline-block; vertical-align: middle; width: 25%; transition: all 0.4s;}
#tab02 .tab_img li, #tab03 .tab_img li{width: calc(100%/3);}
#tab05 .tab_img li{width: 50%; text-align: center;}
.tab_img li img{width: auto; max-width: 98%;}
.tab_img li:hover{transform: scale(1.3);}
.tab_img li:hover img{border-radius: 25px;}

#nav {display: none;}