@charset "utf-8";

@import url(../css/default.css);
@import url(../css/font.css);

header{background: #FFF; display: flex; align-items: center; justify-content: space-between; padding: 0 60px; height: 100px;}
header h1{position: relative; top: 30px;}
header ul{display: flex;}
header ul li{margin-left: 55px;}
header ul li:first-child{margin-left: 0;}
header ul li a{color: #222; font-size: 16px;}
header .menu-btn:before{content: '';display: inline-block; width: 100%; height: 2px; background: #111; position: absolute; top: 0; left: 0; transition: 0.3s;}
header .menu-btn:after{content: '';display: inline-block; width: 100%; height: 2px; background: #111; position: absolute; bottom: 0; left: 0; transition: 0.3s;}
header .menu-btn{display: none; width: 24px; height: 20px; position: relative;}
header .menu-btn span{position: absolute; display: inline-block; width: 24px; height: 2px; top: 50%; right: 0; background: #111;
    margin-top: -1px; transition: 0.3s;}
header .menu-btn.on:before {top: 50%; margin-top: -2px; transform: rotate(45deg); transition: all 0.3s transform 0.4s;}
header .menu-btn.on span { right: -10px; transition: all 0.2s; opacity: 0;}
header .menu-btn.on:after {bottom: 50%;margin-top: -1px; transform: rotate(-45deg); transition: all 0.3s transform 0.4s;}

body{word-break: keep-all;}
/* 공통 */
.page .nav{color: #E0E0E0; font-size: 15px; display: flex; align-items: center; margin-bottom: 80px;}
.page .nav i{position: relative; padding-right: 35px;}
.page .nav i:before{content: ''; display: block; width: 14px; height: 14px; background: url(../img/sub/ico-arrow.png) no-repeat; position: absolute; right: 12px; top: 50%; margin-top: -7px;}

.main{overflow: hidden;}
.main .con1{background: url(../img/main/main-bg.png) left 0 no-repeat; height: 774px; background-size: cover; margin: 0 60px; border-radius: 30px; display: flex; flex-direction: column;justify-content: center; padding-left: 150px;}
.main .con1 h2{color: #FFF; font-weight: bold; font-size: 64px; line-height: 84px; overflow: hidden; word-break: keep-all;}
.main .con1 h2 span{display: inline-block; vertical-align: top;}
.main .con1 h2 span{animation:UpTxt 0.8s 1s cubic-bezier(0.61, 1, 0.88, 1) both;}
/* .main .con1 br{display: none;} */
.main .con1 .split{color: #FFF; font-size: 24px; font-weight: 500; letter-spacing: -0.15rem; margin-top: 60px;}
.main .con1 .split span{animation:moveTxt 0.75s both;}
.main .con1 .split span:nth-child(7),
.main .con1 .split span:nth-child(9),
.main .con1 .split span:nth-child(19),
.main .con1 .split span:nth-child(21),
.main .con1 .split span:nth-child(24),
.main .con1 .split span:nth-child(28),
.main .split span:nth-child(30){padding-right: 7px;}
.main .con1 .m-split{display: none;}

@keyframes UpTxt{
	0%{transform:translateY(100px);}
	100%{transform:translateY(0);}
}
@keyframes moveTxt{
	0%{opacity: 0; transform:translateY(-20px);}
	100%{opacity: 1;transform:translateY(0);}
}

.swiper-button-next:after,.swiper-button-prev:after{display: none;}

.main .con2{margin: 0 60px; padding: 160px 0 160px 150px; display: flex; position: relative;}
.main .con2:before{content:''; background: #F5F5F5; border-radius: 0 0 30px 0; position: absolute; top: -165px; bottom: 0; left: -60px; z-index: -1;}
.main .con2.on:before{animation:w100 1.2s 0.4s both}
.main .con2 .tit{font-size: 48px; color: #222; font-weight: bold; line-height: 58px; overflow: hidden;}
.main .con2 .tit span{display: inline-block; vertical-align: top; transform:translateY(100px);}
.main .con2.on .tit span{animation:UpTxt 0.8s cubic-bezier(0.61, 1, 0.88, 1) both;}
.main .con2 .tit-wrap a{display: inline-block; font-size: 16px; font-weight: 600; margin-top: 50px;}
.main .con2 .slide-wrap{margin-left: 120px; display: flex; gap: 55px;}
.main .con2 img{max-width: 100%;}
.main .con2 .slide1{width: 576px; border-radius: 30px; overflow: hidden; box-shadow: 10px 10px 40px rgba(0,0,0,0.3);}
.main .con2 .slide1 .swiper-slide{position: relative;}
.main .con2 .slide1 p{position: absolute; left: 50px; bottom: 80px; color: #FFF;}
.main .con2 .slide1 p span{color: #1F92AC; font-weight: 500; padding-right: 10px;}
.main .con2 .slide2{width: 344px; height: 344px; position: relative; border-radius: 30px; overflow: hidden;}
.main .con2 .slide2:before{content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.5); z-index: 10;}
.main .con2 .slide3{width: 344px; height: 344px; border-radius: 30px; overflow: hidden;}
.main .con2 .slide3:before{content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.5); z-index: 10;}
.main .con2 .control{width: 340px; position: absolute; left: 150px; top: 455px;}
.main .con2 .swiper-button-next{right: initial; left: 80px;}
.main .con2 .swiper-button-next,.main .con2 .swiper-button-prev{width: 72px; height: 72px;}
.main .con2 .swiper-button-prev{transform: rotate(180deg);}
.main .con2 .swiper-pagination-fraction{font-size: 16px; color: #222; width: auto; left: 209px; bottom: -25px;}
.main .con2 .swiper-pagination-fraction .swiper-pagination-total{color: #A9A9A9;}

@keyframes w100{
	0%{width: 0%;}
	100%{width: 55%;}
}

@keyframes w50{
	0%{width: 0%;}
	100%{width: 50%;}
}

@keyframes w200{
	0%{width: 0%;}
	100%{width: 100%;}
}

@keyframes r00{
	0%{right: 200%;}
	100%{right: 0%;}
}

.main .con3{height: 848px; position: relative; display: flex; align-items: center; justify-content: center;}
.main .con3 .in{background: url(../img/main/con3-bg.png) center no-repeat; height: 592px; width: 1664px; display: flex; align-items: center;}
.main .con3 .tit-wrap{margin-left: 215px;}
.main .con3 .tit{color: #FFF; font-size: 48px; font-weight: bold; line-height: 58px; overflow: hidden;}
.main .con3 .tit span{display: inline-block; vertical-align: top; transform:translateY(100px);}
.main .con3.on .tit span{animation:UpTxt 0.8s 0.2s cubic-bezier(0.61, 1, 0.88, 1) both;}
.main .con3 .tit-wrap a{display: inline-block; font-size: 16px; font-weight: 600; margin-top: 50px; color: #FFF;}
.main .con3 ul{display: flex; margin-left: 100px;}
.main .con3 ul li{width: 176px; height: 176px; background: rgba( 255, 255, 255, 0.15 ); backdrop-filter: blur( 5px ); -webkit-backdrop-filter: blur( 5px ); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
margin-left: 20px;}
.main .con3 ul li:first-child{margin-left: 0;}
.main .con3 ul li i{display: block; width: 48px; height: 48px; margin-bottom: 20px;}
.main .con3 ul li span{color: #FFF; font-size: 18px;}
.main .con3 ul li.ico01 i{background: url(../img/main/con3-ico1.png) center no-repeat; background-size: cover;}
.main .con3 ul li.ico02 i{background: url(../img/main/con3-ico2.png) center no-repeat; background-size: cover;}
.main .con3 ul li.ico03 i{background: url(../img/main/con3-ico3.png) center no-repeat; background-size: cover;}
.main .con3 ul li.ico04 i{background: url(../img/main/con3-ico4.png) center no-repeat; background-size: cover;}
.main .con3 ul li.ico05 i{background: url(../img/main/con3-ico5.png) center no-repeat; background-size: cover;}

.main .con4{display: flex; height: 595px;}
.main .con4 .box1{background: url(../img/main/con4-img1.jpg) center no-repeat; width: 55%; background-size: cover; padding-left: 220px; padding-top: 195px;}
.main .con4 .box1 .tit{color: #FFF; font-size: 48px; font-weight: bold; line-height: 58px; overflow: hidden;}
.main .con4 .box1 .tit span{display: inline-block; vertical-align: top; transform:translateY(100px);}
.main .con4.on .box1 .tit span{animation:UpTxt 0.8s cubic-bezier(0.61, 1, 0.88, 1) both;}
.main .con4  .tit-wrap a{display: inline-block; font-size: 16px; font-weight: 600; margin-top: 50px; color: #FFF;}
.main .con4 .box2{background: url(../img/main/con4-img2.jpg) right top no-repeat; width: 45%; background-size: cover;  padding-left: 220px; padding-top: 195px; border-radius: 0 100px 0 0;}
.main .con4 .box2 .tit{color: #FFF; font-size: 48px; font-weight: bold; line-height: 58px; overflow: hidden;}
.main .con4 .box2 .tit span{display: inline-block; vertical-align: top; transform:translateY(100px);}
.main .con4.on .box2 .tit span{animation:UpTxt 0.8s 0.5s cubic-bezier(0.61, 1, 0.88, 1) both;}
/* .main .con4 .box2 .tit-wrap a{display: inline-block; font-size: 16px; font-weight: 600; margin-top: 50px; color: #FFF; width: 140px; height: 59px; border: 1px #FFF solid; background: rgba(255,255,255,0.5); border-radius: 50px; text-align: center;
line-height: 59px;} */
.main .con4 .box2 p{font-size: 18px; line-height: 28px; color: #FFF; margin-top: 25px;}

.about .con1{height: 584px; background: url(../img/sub/about-bg.png) center 0 no-repeat; background-size: cover; margin: 0 60px; display: flex; flex-direction: column;justify-content: center; padding-left: 150px; border-radius: 260px 20px 30px 30px;}
.about .con1 h2{color: #FFF; font-weight: bold; font-size: 64px; overflow: hidden;}
.about .con1 h2 span{display: inline-block; vertical-align: top;} h2 span{display: inline-block; vertical-align: top;}
.about .con1 h2 span{animation:UpTxt 0.8s cubic-bezier(0.61, 1, 0.88, 1) both;} h2 span{animation:UpTxt 0.8s 1s cubic-bezier(0.61, 1, 0.88, 1) both;}
.about .con1 p{color: #FFF; font-size: 24px; line-height: 32px; margin-top: 40px;}
.about .con2{display: flex; position: relative; height: 575px;}
.about .con2:before{content:''; background: #F5F5F5; border-radius: 0 0 30px 0; position: absolute; top: -165px; bottom: 0; left: -60px; z-index: -1;}
.about .con2.on:before{animation:w50 1.2s 0.4s both}
.about .con2 > div{flex: 1; display: flex; justify-content: center;}
.about .con2 div.left{align-items: center;}
.about .con2 div.left strong{font-weight: bold; font-size: 46px; color: #201f94;}
.about .con2 div.left p{color: #222222; font-weight: bold; font-size: 46px; line-height: 60px;}
.about .con2 div.right{flex-direction: column; padding-left: 160px;}
.about .con2 div.right p{font-size: 24px; line-height: 34px; color: #222;}
.about .con2 div.right ul{margin-left: 10px; margin-top: 35px;}
.about .con2 div.right ul li{font-size: 18px; line-height: 28px; color: #222; position: relative; padding-left: 18px; margin-top: 25px;}
.about .con2 div.right ul li:first-child{margin-top: 0;}
.about .con2 div.right ul li:before{content: ''; display: block; width: 5px; height: 5px; background: #222; border-radius: 50%; position: absolute; left: 0; top: 11px;}

.manage .con1{height: 584px; background: url(../img/sub/manage-bg.png) center 0 no-repeat; background-size: cover; margin: 0 60px; display: flex; flex-direction: column;justify-content: center; padding-left: 150px; border-radius: 260px 20px 30px 30px;
position: relative; z-index: 1;}
.manage .con1 h2{color: #FFF; font-weight: bold; font-size: 64px; overflow: hidden;}
.manage .con1 h2 span{display: inline-block; vertical-align: top; animation:UpTxt 0.8s cubic-bezier(0.61, 1, 0.88, 1) both;}
.manage .con2{padding: 130px 0; position: relative;}
.manage .con2:before{content: ''; background: #F5F5F5; position: absolute; left: 0; right: 0; display: block; height: 50%; border-radius: 0 0 80px 80px; top: -150px; animation:w200 1.2s 0.4s both}
.manage .con2 ul {width: 1500px; margin: 0 auto; position: relative;}
/* .manage .con2 ul:before{content: ''; border-width: 0 1px 0 0; border-color: #D9D9D9; border-style: dashed; position: absolute; top: 150px; bottom: 345px; left: 50%; display: block; width: 1px; margin-left: 11px;} */
.manage .con2 ul li{display: flex; align-items: center; position: relative; height: 512px;}
.manage .con2 ul li:after{content: ''; border-width: 0 1px 0 0; border-color: #D9D9D9; border-style: dashed; position: absolute; top: 150px; bottom: -33%; left: 50%; display: block; width: 1px; margin-left: 11px;}
.manage .con2 ul li:last-child:after{display: none;}
.manage .con2 ul li .tit{font-size: 32px; color: #222; font-weight: 600; position: relative;}
.manage .con2 ul li .tit span{color: #1F92AC; margin-right: 10px;}
.manage .con2 ul li .txt{width: 50%;  position: absolute; top: 0;left: 50%; padding-left: 85px; bottom: 0; justify-content: center; display: flex; flex-direction: column;}
.manage .con2 ul li .tit:before{content: ''; display: block; width: 12px; height: 12px; background: #1F92AC; border-radius: 50%; position: absolute; left: -80px; top: 10px; z-index: 2;}
.manage .con2 ul li .img{width: 50%; padding-right: 85px;}
.manage .con2 ul li img{width: 100%;}
.manage .con2 ul li p{color: #222; font-size: 18px; line-height: 28px; margin-top: 40px;}
.manage .con2 ul li.right{text-align: right;}
.manage .con2 ul li.right .txt{left: 0; padding-right: 85px; display: flex; justify-content: center; flex-direction: column; padding-left: 0;}
.manage .con2 ul li.right .img{margin-left: auto; padding-left: 85px; padding-right: 0;}
.manage .con2 ul li.right .tit{position: relative;}
.manage .con2 ul li.right .tit:before{content: ''; display: block; width: 12px; height: 12px; background: #1F92AC; border-radius: 50%; position: absolute; right: -102px; top: 10px; left: initial;}

.consult .con1{height: 584px; background: url(../img/sub/consult-bg.png) center 0 no-repeat; background-size: cover; margin: 0 60px; display: flex; flex-direction: column;justify-content: center; padding-left: 150px; border-radius: 260px 20px 30px 30px;
	position: relative; z-index: 1;}
.consult .con1 h2{color: #FFF; font-weight: bold; font-size: 64px; overflow: hidden; line-height: 71px;}
.consult .con1 h2 span{display: inline-block; vertical-align: top; animation:UpTxt 0.8s cubic-bezier(0.61, 1, 0.88, 1) both;}
.consult .con2{margin: 0 60px; padding: 0 160px; display: flex; max-height: 772px; position: relative;}
.consult .con2 > div{flex: 1;}
.consult .fix{padding-top: 110px; position: relative;}
.consult .fix:before{content:''; background: #F5F5F5; position: absolute; top: -165px; bottom: 0; left: -50%; z-index: -1;}
.consult .con2.on .fix:before{animation:r00 1.2s 0.4s both}
.consult .fix p{color: #222; font-size: 46px; font-weight: bold; line-height: 60px; font-weight: bold; word-break: keep-all; padding-right: 50px;}
.consult .fix p span{font-size: 24px; line-height: 34px; display: block; margin-top: 60px;}
.consult .right{overflow-y: auto; padding: 110px 0 110px 50px;}
.consult .right .box{width: 588px; margin: 0 auto;}
.consult .right .box:first-child{margin-bottom: 80px;}
.consult .right .tit{font-size: 32px; font-weight: 600; color: #222; margin-bottom: 40px; position: relative;}
.consult .right .box:first-child .tit:before{content: '01'; font-size: 100px; font-weight: bold; color: #f5f5f5; position: absolute; left: 0; z-index: -1; top: -30px;}
.consult .right .box:nth-child(2) .tit:before{content: '02'; font-size: 100px; font-weight: bold; color: #f5f5f5; position: absolute; left: 0; z-index: -1; top: -30px;}
.consult .right  ul{margin-top: 45px; margin-left: 15px;}
.consult .right  ul li{color: #444; font-size: 18px; line-height: 28px; margin-top: 25px; position: relative; padding-left: 15px;}
.consult .right  ul li:before{content: ''; width: 5px; height: 5px; background: #444; border-radius: 50%; position: absolute; display: block; left: 0; top: 11px;}
.consult .right  ul li:first-child{margin-top: 0;}
.consult .right img{max-width: 100%;}

.partner .con1{height: 584px; background: url(../img/sub/partner-bg.png) center 0 no-repeat; background-size: cover; margin: 0 60px; display: flex; flex-direction: column;justify-content: center; padding-left: 150px; border-radius: 260px 20px 30px 30px;
	position: relative; z-index: 1;}
.partner .con1 h2{color: #FFF; font-weight: bold; font-size: 64px; overflow: hidden; line-height: 71px;}
.partner .con1 h2 span{display: inline-block; vertical-align: top; animation:UpTxt 0.8s cubic-bezier(0.61, 1, 0.88, 1) both;}
.partner .con2{padding: 120px 0; position: relative;}
.partner .con2:before{content: ''; display: block; width: 100%; position: absolute; background: #F5F5F5; left: 0; bottom: 0; top: -165px; z-index: -1;}
.partner .con2 ul{display: flex; align-items: center; justify-content: center; padding: 100px 0; width: 1500px; margin: 0 auto; background: #fff; border-radius: 100px 0 100px 0;}
.partner .con2 ul li{margin-left: 100px;}
.partner .con2 ul li:first-child{margin-left: 0;}
.partner img{max-width: 100%;}

.contact .con1{height: 584px; background: url(../img/sub/contact-bg.png) center 0 no-repeat; background-size: cover; margin: 0 60px; display: flex; flex-direction: column;justify-content: center; padding-left: 150px; border-radius: 260px 20px 30px 30px;
	position: relative; z-index: 1;}
.contact .con1 h2{color: #FFF; font-weight: bold; font-size: 64px; overflow: hidden; line-height: 71px;}
.contact .con1 h2 span{display: inline-block; vertical-align: top; animation:UpTxt 0.8s cubic-bezier(0.61, 1, 0.88, 1) both;}
.contact .con1 p{color: #FFF; font-size: 24px; line-height: 32px; margin-top: 40px;}
.contact .con2{text-align: center; padding: 120px 0 0 0;}
.contact .con2 img{max-width: 100%;}
.contact .con2 .map{display: flex; justify-content: center;}
#frm{padding: 120px 0 0 0;}
.contact .con3{margin: 0 60px; padding: 140px 160px; background: #f5f5f5; position: relative;}
.contact .con3:before{content: ''; position: absolute; top: 0; left: -60px; right: -60px; bottom: 0; background: #f5f5f5; z-index: -1;} 
.contact .con3 .tit{color: #222; font-size: 46px; line-height: 60px; font-weight: bold;}
.contact .con3 p{color: #222; font-size: 24px; line-height: 34px; margin-top: 50px; margin-bottom: 80px;}
.contact .con3 input{border: 1px #E0E0E0 solid; border-radius: 4px; width: 100%; height: 60px; padding: 0 20px;}
.contact .con3 ul li{margin-top: 20px;}
.contact .con3 ul li:first-child{margin-top: 0;}
.contact .con3 .flex{display: flex; gap: 20px;}
.contact .con3 textarea{border: 1px #E0E0E0 solid; border-radius: 4px; width: 100%; padding: 0 20px; resize: none; height: 360px;}
.contact .con3 button{color: #FFF; font-size: 20px; font-weight: 600; width: 283px; height: 68px; line-height: 68px; background: #201f94; text-align: center; border-radius: 4px; margin: 50px auto 0; display: block;}

.trading .con1{height: 584px; background: url(../img/sub/trading-bg.png) center 0 no-repeat; background-size: cover; margin: 0 60px; display: flex; flex-direction: column;justify-content: center; padding-left: 150px; border-radius: 260px 20px 30px 30px;
	position: relative; z-index: 1;}
.trading .con1 h2{color: #FFF; font-weight: bold; font-size: 64px; overflow: hidden; line-height: 71px;}
.trading .con1 h2 span{display: inline-block; vertical-align: top; animation:UpTxt 0.8s cubic-bezier(0.61, 1, 0.88, 1) both;}
.trading .con2{margin: 0 60px; padding: 125px 160px 150px;}
.trading .con2 ul{display: flex; align-items: center; border-radius: 100px 20px; overflow: hidden;}
.trading .con2 ul li{flex: 1;}
.trading .con2 ul li .img{padding-bottom: 150%; position: relative;}
.trading .con2 ul li span{color: #FFF; font-size: 18px; font-weight: 600; position: absolute; left: 50%; bottom: 75px; margin-left: -24px;}
.trading .con2 ul li span i{display: block; width: 48px; height: 56px; margin-bottom: 20px;}
.trading .con2 ul li.ico01 .img{background: url(../img/sub/trading-img1.jpg) center no-repeat; background-size: cover;}
.trading .con2 ul li.ico02 .img{background: url(../img/sub/trading-img2.jpg) center no-repeat; background-size: cover;}
.trading .con2 ul li.ico03 .img{background: url(../img/sub/trading-img3.jpg) center no-repeat; background-size: cover;}
.trading .con2 ul li.ico04 .img{background: url(../img/sub/trading-img4.jpg) center no-repeat; background-size: cover;}
.trading .con2 ul li.ico05 .img{background: url(../img/sub/trading-img5.jpg) center no-repeat; background-size: cover;}
.trading .con2 ul li.ico01 span i{background: url(../img/sub/trading-ico01.png) center no-repeat; background-size: cover;}
.trading .con2 ul li.ico02 span i{background: url(../img/sub/trading-ico02.png) center no-repeat; background-size: cover;}
.trading .con2 ul li.ico03 span i{background: url(../img/sub/trading-ico03.png) center no-repeat; background-size: cover;}
.trading .con2 ul li.ico04 span i{background: url(../img/sub/trading-ico04.png) center no-repeat; background-size: cover;}
.trading .con2 ul li.ico05 span i{background: url(../img/sub/trading-ico05.png) center no-repeat; background-size: cover;}
.trading p{color: #222; font-size: 24px; font-weight: 600; line-height: 34px; margin-top: 70px; background-size: cover; word-break: keep-all;}
.trading .product{margin-top: 30px;}
.trading .product span{display: block; font-size: 18px; line-height: 28px; color: #444; position: relative; padding-left: 15px;}
.trading .product span:before{content: ''; display: block; width: 4px; height: 4px; background: #444; border-radius: 50%; position: absolute; left: 0; top: 12px;}

footer{background: #222222; padding: 70px 210px; display: flex; align-items: center;}
footer .logo{margin-right: 45px;}
footer ul{display: flex;}
footer ul li{margin-left: 20px;}
footer ul li:first-child{margin-left: 0;}
footer ul li a{font-size: 16px; color: #AEAEAE; font-weight: 600;}
footer .address{font-size: 14px; color: #7E7E7E; margin-top: 15px;}
footer .address span{margin-left: 5px;}
footer .address span:first-child{margin-left: 0;}
footer .right{font-size: 13px; color: #7E7E7E; margin-top: 30px;}