@charset "UTF-8";


#container { overflow-x: hidden; }

/* 공통사항 */
#ham_btn p:hover span { border: 2px solid #fff; background-color: #fff; }
.tit-wrap h2 {font-size: 36px; position: relative;  margin: 0 auto; z-index: 3; font-weight: bold; text-align: center;}
.tit-wrap p {position: relative; padding-left: 2px; margin: 25px auto 80px; text-align: center; line-height: 1.4;}
.sec{position: relative;padding:150px 0; overflow: hidden;}
.sec:nth-child(2n){background-color:#0E1937}
.sec:nth-child(2n) .tit-wrap h2, .sec:nth-child(2n) .tit-wrap p{color:#fff;}
.left-sec .inner{display: flex;}
.left-sec .tit-wrap{flex:1; margin-right: 30px;}
.left-sec .tit-wrap h2, .left-sec .tit-wrap p{text-align: left; width: auto;}


/* main_vis s */
#main_vis { position: relative; height: 85vh;}
#main_vis .vis { width: 100%; height: 85vh; overflow: hidden; position: relative; }
#main_vis .vis .vis_bg { background: url('../img/main/main_vis1.png') no-repeat center / cover; }
#main_vis .vis2 .vis_bg { background: url('../img/main/main_vis2.png') no-repeat center / cover;}
#main_vis .vis3 .vis_bg { background: url('../img/main/main_vis3.png') no-repeat center / cover; }
#main_vis .swiper-container.vis_slide .vis.swiper-slide .vis_bg { width:100%; height:100%; position: absolute; left:0; top:0; transform: scale(1); transition: all 0.25s ease;}
#main_vis .swiper-container.vis_slide .vis.swiper-slide-active .vis_bg { transform: scale(1); animation-name: zoomIn; animation-duration: 3.8s; animation-fill-mode: forwards; }
@-webkit-keyframes zoomIn {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
#main_vis .swiper-slide .inner { height: 100%; }
.vis_title { position: absolute; top: 45%; left: 5%; color: #fff;}
.vis_title .tit{ width: 100%; font-size: 48px; /*color: transparent;*/ overflow: hidden; position: relative; margin-bottom: 10px; font-weight: bold;}
.vis_title .txt { width: 100%; height: 40px; overflow: hidden; position: relative; font-size: 32px; /*color: transparent;*/ }
/* .vis_title .tit::after{ width: 100%; content: ''; color: #fff; font-size: 48px; position: absolute; left: 0;} */
.swiper-slide-active .vis_title .tit.tit1{content: '';animation: toUp1 0.3s ease-in 0.4s 1 backwards;}
.swiper-slide-active .vis_title .tit.tit2 {content: '';animation: toUp1 0.5s ease-in 0.6s 1 backwards;}
.swiper-slide-active .vis_title .txt { width: 100%; content: ''; font-size: 32px; color: #fff; position: absolute; left: 0;animation: toUp2 0.7s ease-in 0.8s 1 backwards; }
@-webkit-keyframes toUp1 { 
  0% { bottom: -52px; opacity: 0; }
  100% { bottom: 2px; opacity: 1; }
}
/* @-webkit-keyframes toUp2 { 
  0% { bottom: -70px; opacity: 0; }
  100% { bottom: -36px; opacity: 1; }
} */
  /* EN */
/* .swiper-slide-active .en-vis_title1 .tit.tit1::after{content: 'Trade CFDs on FOREX,';}
.swiper-slide-active .en-vis_title1 .tit.tit2::after {content: 'GOLD, INDEX and More';}
.swiper-slide-active .en-vis_title1 .txt::after {content: 'The best prices and execution speeds in the industry.';}
.swiper-slide-active .en-vis_title2 .tit.tit1::after{content: 'Trade CFDs on FOREX,';}
.swiper-slide-active .en-vis_title2 .tit.tit2::after {content: 'GOLD, INDEX and More';}
.swiper-slide-active .en-vis_title2 .txt::after {content: 'The best prices and execution speeds in the industry.';}
.swiper-slide-active .en-vis_title3 .tit.tit1::after{content: 'Trade CFDs on FOREX,';}
.swiper-slide-active .en-vis_title3 .tit.tit2::after {content: 'GOLD, INDEX and More';}
.swiper-slide-active .en-vis_title3 .txt::after {content: 'The best prices and execution speeds in the industry.';} */

  /* KO */
/* .swiper-slide-active .ko-vis_title1 .tit.tit1::after{content: '외환, 금, 해외주식, CFD등';}
.swiper-slide-active .ko-vis_title1 .tit.tit2::after {content: '다양한 거래처를 찾고 계신가요?';}
.swiper-slide-active .ko-vis_title1 .txt::after {content: '최고의 가격과 속도를 제공합니다.';}
.swiper-slide-active .ko-vis_title2 .tit.tit1::after{content: '외환, 금, 해외주식, CFD등';}
.swiper-slide-active .ko-vis_title2 .tit.tit2::after {content: '다양한 거래처를 찾고 계신가요?';}
.swiper-slide-active .ko-vis_title2 .txt::after {content: '최고의 가격과 속도를 제공합니다.';}
.swiper-slide-active .ko-vis_title3 .tit.tit1::after{content: '외환, 금, 해외주식, CFD등';}
.swiper-slide-active .ko-vis_title3 .tit.tit2::after {content: '다양한 거래처를 찾고 계신가요?';}
.swiper-slide-active .ko-vis_title3 .txt::after {content: '최고의 가격과 속도를 제공합니다.';} */

#main_vis .swiper-pagination {display: flex;position: absolute; top: 39%; left: 5%; z-index: 5; }
#main_vis .swiper-pagination-bullet{border-radius:0; background:#fff; width: 50px; height: 4px; transition: 0.3s; margin-right: 5px;}
#main_vis .swiper-pagination-bullet-active{height: 8px;}
#main_vis .btn{z-index:5; position: absolute; top: 78%; left: 5%;}


/* stock-slide */
#stock-slide{padding: 0;}
#stock-slide .swiper-slide{background:#1F2E45; color:#fff;}
#stock-slide ul{padding:10px 20px; border-right: 1px solid rgba(60, 76, 102, 1);}
#stock-slide li {display: flex; justify-content: space-between;font-size:12px;}
#stock-slide li p{display: inline-block;}
#stock-slide .stock_price-top span{display: inline-block;border-radius: 100px; background:gray; width: 22px;height: 22px;margin-left: 5px;}
#stock-slide .stock_price-bottom {align-items: center;margin-top:4px;}
#stock-slide .stock_price-bottom p{display: flex;flex-direction: column;}
#stock-slide .stock_price-bottom p:first-child span{width:34px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all;}
#stock-slide .stock_price-bottom p:last-child span{width:34px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all;}
#stock-slide .stock_price-bottom p:nth-child(2){font-size:24px; font-weight: 500;}
#stock-slide .stock_price-bottom span{display: block;}
#stock-slide .stock_price-bottom span.fr{float:right;}



/* introduce */
#introduce { width: 100%; background: url('../img/main/intro_bg.png') no-repeat center center /cover; }
#introduce .tit-wrap h2, #introduce .tit-wrap p{color:#fff;}
.intro-wrap {width: 100%; }
.intro-wrap > ul {width: 100%; margin: 0 auto;display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; }
.intros { width: 22%; position: relative; }
.intros::after { display: block; content: ""; width: 35px; height: 1px; background-color: #fff; position: absolute; top: 50%; right: -35px; }
.intros.intro1::before { display: block; content: ""; width: 245px; height: 1px; background-color: #fff; position: absolute; top: 50%; left: -260px;}
.intros.intro4::after { display: block; content: ""; width: 245px; height: 1px; background-color: #fff; position: absolute; top: 50%; right:-260px;}
.intros .itr-cont-wrap { width: 100%; height: 285px;position: relative; }
.intros .itr-cont-wrap:after { content: ""; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; position: absolute; }
.intro1 .itr-cont-wrap:after { top: 75px; left: 27px; }
.intro2 .itr-cont-wrap:after { top: 3px; left: 33.5%; }
.intro3 .itr-cont-wrap:after { top: 3px; right: 33.5%; }
.intro4 .itr-cont-wrap:after { top: 75px; right: 27px; }
.intros .itr-cont-wrap .top-round,
.intros .itr-cont-wrap .btm-round { display: block; width: 100%; height: 80px; position: relative; overflow: hidden; bottom:0;}
.intros .itr-cont-wrap .btm-round{position: absolute;}
.itr-cont-wrap .top-round::before,
.itr-cont-wrap .btm-round::before { display: block; content: ""; width: 85%; height: 230px; border-radius: 50%; position: absolute; left: 50%; transform: translate(-50%); box-sizing: border-box; }
.itr-cont-wrap .top-round::before { border: 1px solid #fff; top: 0; }
.itr-cont-wrap .btm-round::before { border: 1px solid #fff; bottom: 0; }
.itr-cont-wrap .txt-wrap {position: relative; text-align: center; }
.itr-cont-wrap .txt-wrap .itr-ico{position: absolute;color: #fff;left: 50%;transform: translateX(-50%);top: -25px;}
.itr-cont-wrap .txt-wrap .itr-tit { text-align: center; font-size: 25px; color: #fff; font-weight: bold; position: relative; top: 35px; }
.itr-cont-wrap .txt-wrap .itr-txt { color: #fff; line-height: 140%; margin: 50px auto 0; width: 90%;font-size:14px;}
.itr-cont-wrap .txt-wrap .itr-txt-mo {color: #fff; line-height: 140%; margin-top: -25px; display: none; }


/* business */
#business{background: #0E1937 url('../img/main/business_bg.png') no-repeat center center /cover;}
/* #business:before{content: "";position: absolute;top: -540px;right: -140px;width: 740px;height: 740px;background: url(/resources/img/main/section_bg.png) no-repeat center/ contain;z-index: 0;} */
#business ul{display: flex;justify-content: space-evenly; margin-top: 80px;}
#business ul li{position: relative;text-align: center;padding:20px;cursor: pointer;-webkit-transition: all .4s; -moz-transition: all .4s;  -o-transition: all .4s; transition: all .4s;}
#business ul li:hover{/* s */border-radius: 20px;transform: scale(1.2)}
#business ul li a { display: block; }
#business ul li p{margin-top: 11px; color:#fff;}



/* performance */
#performance .tab_area {flex:1.6; position: relative;}
#performance .tab_area ul{display: flex; flex-flow: row wrap; justify-content: space-between;}
#performance .tab_area li {width: 32.5%;position: relative;overflow: hidden;transition: opacity 0.35s;margin-bottom: 10px;cursor: pointer;}
#performance figure{background:#001D84}
#performance figure figcaption{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 20px;color: #fff;-webkit-backface-visibility: hidden;backface-visibility: hidden;box-sizing: border-box;}
#performance figure img {position: relative;display: block;min-height: 100%;opacity: 0.8;width: -webkit-calc(100% + 20px);width: calc(100% + 20px);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-10px,0,0);transform: translate3d(-10px,0,0);-webkit-backface-visibility: hidden;backface-visibility: hidden;}
#performance figure:hover img {opacity: 0.4;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
#performance figure h2 {position: relative;overflow: hidden;padding-bottom: 10px; font-size:18px; font-weight: bold;}
#performance figure h2::after {position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: #fff;content: '';-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0);}
#performance figure:hover h2::after {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
#performance figure p {letter-spacing: 1px; font-size:14px; padding: 10px 0;opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0);min-height: calc(100% - 50px);}
#performance figure:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
#performance figure .more {position: absolute; bottom: 0; left: 0;}
#performance .arrow::after{border-top: 3px solid #fff;border-right: 3px solid #fff;}


/* starting */
#starting .step_wrap{display: flex; align-items: center; margin-top: 120px;}
#starting .step_wrap .box{width: 32%; text-align: center; color: #fff; word-break: keep-all;}
#starting .step_wrap .box:nth-child(2){margin: 0 2% 0 2%;}
#starting .step_wrap .box .ico{position: relative; width: 100%; height: 70px; z-index: 1; margin: 0 auto; color:#333; text-align: center;}
#starting .step_wrap .box .ico::after{content: ""; width: 130px; height: 130px; background: #D9D9D9; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; border-radius: 100%;}
#starting .step_wrap .box .ico p:nth-child(2){font-size:45px; line-height: 100%; font-weight: 500;}
#starting .step_wrap .box .tit{display: block; color: #fff; font-size: 24px; font-weight: 600; margin: 50px 0 20px 0;}
#starting .step_wrap .box .txt{line-height: 1.5; max-width: 300px; margin: 0 auto; margin-bottom: 35px;}
#starting .circle { position: absolute;animation: rotate 70s infinite linear;top: -403px;left: -440px;display: inline-block;width: 955px;height: 931px;background: url("../img/main/circle2.png") no-repeat; background-size: cover;}
@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(359deg);}
}

/* devices */
#devices .inner{align-items: center;}
#devices .device_img{flex:1;}
#devices .device_img img{width: auto;}


/* investment */
#investment{background:#f7f7f7 url('../img/main/content_background2.jpg')no-repeat 50% 50%/cover; background-attachment: fixed;}
#investment h2{color:#333;}
#investment ul{margin-top: 80px;}
#investment li {display: inline-block; width: 30%; height: 200px; position: relative; cursor: pointer; margin:20px; overflow: hidden;height:auto;}
#investment li img {display: block;width: 100%;-webkit-transform: scale(1);transform: scale(1);-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;}
#investment li:hover img {-webkit-transform: scale(1.2);transform: scale(1.2);}
#investment .s_tit {color: #fff;position: absolute;z-index: 100;top: 50%; left: 50%;transform: translate(-50%, -50%);font-size: 20px; white-space: nowrap;}


/*side menu*/
.account_layer{text-align: center; background-color: #0e1937; position: fixed;right: 20px; bottom: 100px;padding: 35px;box-sizing: border-box; width: 518px;z-index: 9999; border-radius: 30px; color:#fff; box-shadow: 0px 0px 10px rgba(255,255,255,.2);}
.account_layer h3{font-size:32px; font-weight: bold; text-align: center; margin-bottom: 10px;}
.account_layer .form-group{display: flex; flex-direction: column; text-align: left; margin-top: 30px;}
.account_layer .form-group label{font-size:18px; margin-bottom: 10px;}
.account_layer .phone_num_wrap{position: relative;display: flex; gap: 3px;}
.account_layer input#side_mobile{width: 46.5%;}
.account_layer .phone_num_wrap button{position: absolute; right: 0; height:100%;width: 23%;border-radius: 3px; background:#06D8D8;color:#fff; border:0;}
.account_layer .btn{width: 100%;}
.side_close{cursor: pointer;position: absolute; right: 35px; margin-top: -5px;}
.side_close img{width: auto;}
.side_icon_wrap{display: none; cursor: pointer;}
.side_icon{ z-index: 900;background-color: #ff4521; color: #fff; position: fixed; right: 20px;width: 70px; height: 70px;box-sizing: border-box; text-align: center; top:auto; bottom:100px; padding-top: 20px; border-radius: 100px; font-size: 12px; box-shadow: 0px 0px 5px rgba(255,255,255,.4); -webkit-transition: all .3s; -moz-transition: all .3s;  -o-transition: all .3s; transition: all .3s;}  
.side_icon:hover:before{content: 'Reday to Start?';position: absolute;top: 0;right: 0;width: 200px;height: 70px; line-height: 70px; background-color: #ff4521;font-size: 18px;font-weight: bold;border-radius: 100px;box-sizing: border-box;}
.side_icon:hover .ico_defalt{display: none;}





/* Modal pop */
.account_modal{z-index: 999;visibility: hidden;position: fixed;top:0;bottom:0;left:0;right:0;background-color: rgba(0,0,0,0.5);}
.account_modal.active{visibility: visible; -webkit-transform: translate(0,0);-ms-transform: translate(0,0);transform: translate(0,0);}
.account_modal a.close{color: #aaaaaa;float: right;font-size: 40px;font-weight: bold; margin:-30px -10px;}
.account_modal a.close:hover{color:#333;}
  /* contents */
.account_modal h4{font-size:20px; font-weight: bold; margin-bottom: 10px;}
.account_modal .form-row {display: -ms-flexbox;display: flex; gap:5px;}
.account_modal .form-group{position: relative;width: 33%; margin-bottom: 20px;}
.account_modal .form-control{display: block;width: 100%;height: 44px;border-radius: 3px;padding: 5px 10px;background-color: #fff;background-clip: padding-box;border: 1px solid #ddd;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.account_modal .input-group{position: relative;}
.account_modal .get_code_btn{position: absolute;right: 0;top: 0; height: 44px;}
.sign-up_btn{display: flex;justify-content: flex-end;margin-bottom: 30px;}
.sign-in_btn{border-top:1px solid #ddd; text-align: center; padding-top:30px;}


.no_input{background-color: #ffd1d1!important;}
.error{color: #a02727; font-weight:bold; margin-left:13px; display:none;}


@media screen and (max-width:1600px){
  /* introduce */
  .intros{width: 25%;}
  .intros::after, .intros.intro1::before, .intros.intro4::after{display: none;}
}


@media screen and (max-width:1200px){
  .tit-wrap h2{font-size:30px;}
  .left-sec .inner{flex-flow: column wrap;}
  .left-sec .tit-wrap{margin-right: 0;}
  .left-sec .tit-wrap h2, .left-sec .tit-wrap p{text-align: center;}
  .tit-wrap p{margin-bottom: 40px;}
  .tit-wrap p br{display: none;}
  .left-sec .btn{left:50%; transform: translateX(-50%);}

  /* introduce */
  .intro-wrap > ul { justify-content: flex-start; flex-direction: column; }
  .intros { width: 100%; }
  .intros .itr-cont-wrap{height: auto;}
  .intros .itr-cont-wrap .top-round, 
  .intros .itr-cont-wrap .btm-round,
  .intros .itr-cont-wrap:after { display: none; }
  .intros.intro1 .itr-cont-wrap .txt-wrap { border-top: 1px solid #7B89BD; }
  .itr-cont-wrap .txt-wrap {padding: 20px; border-bottom: 1px solid #7B89BD; }
  .itr-cont-wrap .txt-wrap .itr-ico{position: relative;top: unset;}
  .itr-cont-wrap .txt-wrap .itr-tit{top: auto; margin-top: 10px;}
  .itr-cont-wrap .txt-wrap .itr-txt{margin: 0;width: auto; margin-top: 5px;}

  /* performance */
  #performance .tab_area{margin-top: 40px;}
  #performance figure img {opacity: 0.4;}
  #performance figure p {opacity: 0.8;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
  #performance figure h2::after {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}

  /* investment */
  #investment li{margin:10px;}
}


@media screen and (max-width:1024px){
  .account_modal .form-row{flex-direction: column;}
  .account_modal .form-group{width:100%;}
  .sec{padding:80px 0}
  /* introduce */
  .fa-3x{font-size: 2em;}
  .itr-cont-wrap .txt-wrap .itr-tit{font-size: 18px;}

  /* performance */
  #performance .tab_area li{width: 49%;}
  #performance figure h2{font-size:18px}
  #performance figure p {font-size: 14px;;}

  /* starting */
  #starting .step_wrap .box .txt br{display: none;}

  /* divice */
  #devices .device_img img{width: 100%;margin-top: 40px;}


}


@media screen and (max-width:768px){
  .tit-wrap h2{font-size:22px;}

  /* main_vis */
  .vis_title{width: 100%;left:50%; transform: translateX(-50%);}
  .vis_title .tit{font-size:25px;margin-bottom: 0;text-align: center;}
  /* .vis_title .tit::after{font-size:30px; text-align: center;} */
  .vis_title .txt{text-align: center; margin-top: 20px;font-size:16px;}
  .swiper-slide-active .vis_title .txt{font-size:16px;}
  #main_vis .swiper-pagination, #main_vis .btn{left: 50%; transform: translateX(-50%);}

  /* business */
  #business ul{flex-flow: row wrap;}
  #business ul li{width: 30%;}

  /* performance */
  #performance .tab_area li{width: 100%;height: 160px;}

  /* starting */
 #starting .step_wrap{flex-flow: column wrap; margin-top: 50px;}
 #starting .step_wrap .box{width: 100%;position: relative;margin-bottom: 50px!important;}
 #starting .step_wrap .box:last-child{margin-bottom: 0px!important;}
 #starting .step_wrap .box .ico{display: none;}
 #starting .step_wrap .box .tit{margin: 0;font-size:20px;}
 #starting .step_wrap .box .txt{margin: 0;max-width: 100%;}
 #starting .step_wrap .box .btn{width: 60%;margin-top: 10px;background: #FF4521; border:0}

 /* investment */
 #investment ul{margin-top: 50px;}
  #investment li {width: 45%;}

 
  /*side menu*/
  .account_layer_wrap{display: none;}
  .account_layer{width: 95%;right: 0;left: 0; bottom:20px; margin: auto;}
  .side_icon_wrap{display: block;}
  .account_layer h3{font-size: 28px;}
  .account_layer .form_txt br{display: none;}
  .account_layer .phone_num_wrap{flex-direction: column;}
  .account_layer .phone_num_wrap #phone_number_value{top: 8px; bottom:auto}
  .account_layer .phone_num_wrap #phone_number, 
  .account_layer .phone_num_wrap #side_mobile
  {width: 70%;}
  .account_layer .phone_num_wrap button{width: 29%;}

  .footer_logo{margin-top:0;}
}


@media screen and (max-width:500px){
  #main_vis{height: 70vh;}
  #main_vis .vis{height: 70vh;}
  #main_vis .btn{width: 80%;}
  #investment li {width: 100%; margin: 0;}
}