@charset "utf-8";
/* common */
.contents.sub {width: 100%; min-height:350px; margin-top:40px;}
.contents.sub section{margin-bottom: 80px;}
.sub_vis { width: 100%; position: relative; margin-top: 180px; /*padding:0px 0 100px 0px;*/}
.main_title {font-size: 50px;position: relative;text-align: center;margin: 0 auto;color: #0E1937; margin-bottom: 50px;}
.main_title b{position: relative;}
.main_title b:before{content:""; position: absolute; right: -25px;width: 10px;height: 10px;border:5px solid #dd1215; border-radius: 100%;}
.sub_ment {margin: 0 auto 30px; max-width: 1600px;text-align: left;}
.sub_ment .tit { display: block; width: 100%; font-size: 30px; color: #333;  font-weight: bold;}
.sub_ment .txt { display: block; margin-top: 15px; font-size: 18px; color: #444; position: relative; left: 50%; transform: translate(-50%);}

    /* lnb */
.lnb {display: flex; align-items: center; width: 100%; max-width:1400px;height: 80px; background: #fff; margin:0 auto;/*position: absolute; top: 110px; left: 50%; transform: translateX(-50%); */z-index: 1; box-sizing: border-box; border-bottom: 3px solid #001D84; }
.lnb::after { content: ''; display: block; clear: both; }
.lnb .home { width: 70px; height: 100%; background: url('../img/icon/ico_home.png') no-repeat center /24px 20px; float: left; text-indent: -9999px;}
.lnb .depth1_name {position: relative;padding: 0 30px; font-size: 17px; color: #0E1937; text-align: center; box-sizing: border-box; }
.lnb .depth1_name::before {content: ''; width: 1px; height: 20px; background-color: #001D84; position: absolute;top: 50%;transform: translateY(-50%);left: 0; }
.lnb .lnb_menu {flex:1; display: inline-block; box-sizing: border-box; position: relative;  z-index: 1; vertical-align: middle;}
.lnb .lnb_menu .lnb_title { display: none; }
.lnb .lnb_menu ul {display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
.lnb .lnb_menu li {box-sizing: border-box; position: relative; }
.lnb .lnb_menu li:after { content: ""; width: 1px; height: 100%; background-color: #ddd; position: absolute; top: 0; right: 0; }
.lnb .lnb_menu li:last-child::after { display: none; }
.lnb .lnb_menu li a { display: block; padding: 0 15px; line-height: 1; font-size: 14px; color: #444;transition: .3s ease; box-sizing: border-box; }
.lnb .lnb_menu li.on a{font-weight: bold;}

.tab.row-tab + .tab-cont-wrap .tabcontent .sub-table td a img{width: auto;}
.uk-label {
    padding: 7px 16px 6px 16px;
    line-height: 1.2;
    font-family: Arial;
    font-weight: bold;
    font-size: 9px;
    letter-spacing: 1px;
    border-radius: 50px;
  }
  .uk-label-warning {
    background-color: #faa05a !important;
  }


/*______ 서브페이지 S _____ */
  /* common.css */
.color-box_wrap{height: auto;margin: 0 auto;}
.color-box{width: 100%;background:#0E1937; margin-bottom: 30px; color: #fff; line-height: 160%; padding:30px; box-sizing: border-box;}

/* Company - About Us */

/* Company - Legal Documnets */

/* Company - Client Funds */
.list-check{position: relative;padding-left: 20px;}
.list-check li{position: relative; margin-bottom: 10px;}
.list-check li:before{content:''; position: absolute; left: -20px; top: 12px;width: 10px;height: 5px;margin-bottom: 4px;border:2px solid #FF4521; border-top:0; border-right:0; transform:rotate(-45deg)translateY(-50%); transform-origin: 25% 25%;;}
.list-check.type02 li:before{width: 5px;height: 5px;left: -15px;border-radius: 100px;transform: inherit;border: 0;background: #333;}
ol {counter-reset: li-counter;padding: 0 10px;}
ol>li {clear: both;padding: 0 0 0 10px;position: relative;}
ol>li:before {content: counter(li-counter) ". ";counter-increment: li-counter;left: -24px;margin-right: 10px;min-width: 30px;position: absolute;text-align: right;}

/*** [Trading] 공통 ***/
.des-box-wrap { width: 100%; height: 480px; position: relative;  background-repeat: no-repeat; background-size: contain; background-position: 450px top; transition: all 0.3s ease-in; }
.des-box { width: 700px; height: 300px; background-color: #0E1937; position: absolute; bottom: 40px; left: 0; padding: 40px; box-sizing: border-box; transition: all 0.3s ease-in; } 
.des-box::after { content: ''; width: 240px; height: 6px; background-color: #7B89BD; position: absolute; top: 40px; right: -100px; animation: delay 0.8s linear 0.6s 1 backwards; }
@keyframes delay { 
    0% { right: -160px; opacity: 0; }
    100% { right: -100px; opacity: 1; }
}
.des-box p { color: #fff;}
.des-box p.des-tit { font-size: 24px; padding-bottom: 15px; font-weight: bold;}
/* 맨 하단 박스 */
.effect {background: url('../img/sub/ef_bg_nn.jpg') no-repeat 50% 50% / cover; padding: 90px 0; color:#fff; background-attachment: fixed!important;}
section:last-child.effect {margin-bottom: 0!important;}
.effect .tit { color:#fff;}
.effect .cont_box{display: flex; flex-wrap: wrap;margin-top: 20px;}
.effect .cont_box .tit {width: 30%;margin-left: 20px;font-size: 18px; font-weight: 500; position: relative; word-break: keep-all; margin-top: 10px;}
.effect .cont_box .tit:before {content: '';position: absolute;left: -20px;top: 12px;width: 10px;height: 5px;margin-bottom: 4px;border: 3px solid #FF4521;border-top: 0;border-right: 0;transform: rotate(-45deg)translateY(-50%);
transform-origin: 25% 25%;}
.effect .cont_box .tit span {font-size: 0.8em;}
h3 {margin-top: 0;}
    /* 테이블 */
.sub-table table { width: 100%; border: 1px solid #939FC8; }
.sub-table table th {padding: 12px 0; color: #fff; background-color: #939FC8; border-right: 1px solid #F0F1F3; vertical-align: middle;}
.sub-table table td {border-right: 1px solid #939FC8; border-bottom: 1px solid #939FC8; padding: 15px 10px; text-align: center; vertical-align: middle;}
.sub-table table tr:hover { background-color: rgba( 0, 29, 132, 0.02) }
.sub-table .scroll{overflow: auto;}
.sub-table .scroll table{min-width: 900px;}


/* Trading - Futures */
.des-box-wrap.futures { background-image: url('../img/sub/trading-futures.png'); }
/* Trading - Forex */
.des-box-wrap.forex { background-image: url('../img/sub/trading-money.jpeg'); }
/* Trading - Precious Metals */
.des-box-wrap.metals { background-image: url('../img/sub/trading-metals.png'); }
/* Trading - Commodities */
.des-box-wrap.commodities { background-image: url('../img/sub/trading-commodities.png'); }




/*** [Trading Platforms] 공통 ***/
.metatrader .intro .inner{display: flex; font-size: 20px;align-items: flex-start;}
.metatrader .intro img{display: block;width: 300px; margin-right: 80px;}
.features .cont_box{display: flex; flex-wrap: wrap;}
.features .cont_box .cont{width: 50%; display: flex; margin-bottom: 20px;}
.features .cont .ico {width: 60px; height: 60px;}
.features .cont .txt_box { width: 80%; padding-left: 5%; box-sizing: border-box;}
.features .cont .txt_box .tit {margin-bottom: 10px;color: #005282; font-size: 20px; font-weight: 600; position: relative; word-break: keep-all;}

/* Trading Platforms - MetaTrader5 PC */
#MetaTrader5PC .effect {background: url('../img/sub/ef_bg_nn.jpg') no-repeat 50% 50% / cover;}



/*** [Knowledge Hub] 공통 ***/
/* Knowledge Hub - gloassary */
.search_wrap{overflow: hidden;box-sizing: border-box;width: 100%;background: #ffffff;border: 1px solid #ccc;border-radius: 5px;padding: 24px 35px;margin-bottom: 30px;text-align: center;}
nav.tabs_area {margin-bottom:20px; padding-bottom: 25px;  border-bottom: 1px solid #ddd}
nav.tabs_area .tabs {display: grid;grid-template-columns: repeat(26, 3.3%);grid-template-rows: repeat(1, 45px);justify-content: center;gap: 6px;}
nav.tabs_area li.active .btn_tab {background-color: #0d1937;color:#fff;}
nav.tabs_area .btn_tab {display:inline-block;width: 100%;height:44px;line-height:44px; background-color:#e7e9ee;color:#555;text-align:center;box-sizing: border-box;border: 1px solid #ddd;}
.search_wrap .search_btn{float:right; display: flex; gap:5px;}
.search_wrap .search_btn .search_txtbtn{display: flex; gap:5px;}
.search_wrap .search_btn label{position: absolute;top: -9999px;}

.glossary_table {overflow: hidden;display: flex; border:1px solid #ddd; border-radius: 5px;height: 600px;background: #fff;}
.glossary_table:after {content:""; display: block; clear: both;}
.search_box_area .search_title{border-bottom: 1px solid #ddd;display: block;font-weight: 500;height: 30px;color: #666666;text-align: left;}
.search_box_area .search_title > span { position: relative; font-size: 18px;}
.search_box_area .search_title .btn_tab > span:after{content:""; position: absolute;left: 0;bottom: -20px;width: 100%;height: 2px;background: #0d1937;}

    /* Word Name area */
.glossary_table .list_area {flex:1;height: 100%;}
.glossary_table .list_area > .search_box_area {overflow: hidden; box-sizing: border-box;  background: #ffffff; border: none;  border-right: 1px solid #ddd;text-align: center; padding: 20px 45px 30px  30px;margin: 0;height: 100%;}
.search_box_area .total {text-align: left;padding: 8px 0 8px 6px;  position:relative}
.search_box_area .total:before{content:""; position:absolute; left:0; top:18px; width:3px; height:3px; background:#444}
.search_box_area .total > span {color: #194da0;}
.search_box_area .search_result  { border: 1px solid #ddd;height: 470px;overflow-y: auto;padding: 10px 20px;box-sizing: border-box;}
.search_box_area table {width: 100%; text-align: left;}
.search_box_area table td{margin: 2px 0;display: block;}
.search_box_area table td a{padding:5px; box-sizing: border-box;}
.search_box_area table td.SearchOn a{display: inline-block; width: 100%; background:#939FC8; color:#fff;}
    /* Justice area */
.justice_area {flex:1.4; padding: 20px 30px 35px;box-sizing: border-box;background: #f9f9f9;}
.justice_area .search_box_area .search_detail { height: 480px;padding: 10px 30px; overflow-y: auto; overflow-x : hidden; background: #fff;margin-top: 20px;border: 1px solid #ddd; box-sizing: border-box;}
.justice_area .search_box_area h2 {font-size: 18px; color: #000; margin-bottom: 5px; font-weight: 500;}


/* Modal pop */
.md-btn-area {margin-bottom:50px;}
.md-btn {width:45%; padding: 10px;margin:5px;border-radius: 3px; border:1px solid #ddd; transition: .3s; margin-bottom: 5px; display: inline-block;box-sizing: border-box;}
.md-btn:hover {background:#ddd;}
/* Modal window */
.modal {z-index: 999;visibility: hidden;backface-visibility: hidden; position: fixed;top: 0;left: 0;width: 100%; height: 100%;-webkit-transition: opacity .4s linear;transition: opacity .4s linear;}
/* Modal content */
.modal-inner_wrap {position:relative; height:calc(100% - 120px); margin:60px 5% 5%;padding:30px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);box-shadow: 0 0 15px rgba(0,0,0,0.2);border-radius:15px;background-color:#FFF;z-index:10;overflow:hidden;}
.modal-inner {height: 100%;overflow: auto;}
.modal-inner .tit{font-weight: bold; font-size:26px; padding-top: 20px;}
.modal-inner h3{font-weight: bold; font-size:20px; padding-top: 20px;}
.modal-inner .list-check li, .modal-inner p{margin-bottom: 0; line-height: 1.6;}
    /* Modal close button */
.modal .close {display:block;position: absolute;top: 0; left:0; width:100%;height:100%;background-color: rgba(0,0,0,.74);z-index:1;}
.modal .close span {position: absolute;top: 10px;right: 10px;width: 40px;height: 40px;background-color: rgba(255,255,255,.2);cursor:pointer;}
.modal .close span {text-indent: -9999px;}
.modal .close span:before,
.modal .close span:after {content: "";position: absolute;top: 4px;border: 1px solid #fff;height: 30px;}
.modal .close span:before {left: 19px;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
.modal .close span:after {right: 19px;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.popup--show {opacity: 1;visibility: visible;}
/* Append modal(target id) */
[id^=modal]:target{visibility: visible;-webkit-transform: translate(0,0);-ms-transform: translate(0,0);transform: translate(0,0);}
.modal img{width: auto; margin:10px 0;}


@media screen and (max-width:1200px){
    /* Knowledge Hub - gloassary */
    nav.tabs_area .tabs {grid-template-columns: repeat(16, 5%);}


}


@media screen and (max-width:1024px){
    /* lnb - mobild */
    .lnb .depth1_name::after {content: ''; width: 1px; height: 20px; background-color: #001D84; position: absolute;top: 50%;transform: translateY(-50%);right: 0; }
    .lnb .lnb_menu .lnb_title { display: block; font-size: 17px; color: #001D84;padding: 0 20px; line-height: 80px; box-sizing: border-box; cursor: pointer; position: relative; }
    .lnb .lnb_menu .lnb_title span{position: relative; display: inline-block;}
    .lnb .lnb_menu .lnb_title span::after { content: ''; width: 14px; height: 7px; background: url('../img/icon/arr_down.png')no-repeat center/cover; position: absolute; ;top: 50%;transform: translateY(-50%);right: -30px; }
    .lnb .lnb_menu .lnb_title.add::after { transform: rotate(180deg); }
    .lnb .lnb_menu ul {display: none; position: absolute;}
    .lnb .lnb_menu li {background-color: #939FC8; border-bottom: 1px solid #CCD2E6; padding:10px 0;}
    .lnb .lnb_menu li:after { display: none; }
    .lnb .lnb_menu li a {text-align: center; color: #fff; }


    /*** [Trading] 공통 ***/
    .des-box-wrap {background-position: 300px top;}
    .des-box::after{display: none;}


    
}

@media screen and (max-width:768px) {
    .main_title {font-size: 36px;margin-bottom: 0px;}
    .main_title b:before{right: -20px;width: 7px;height: 7px;}
    .sub_ment .tit {font-size: 26px; margin-top: 10px; }
    .sub_ment .txt br{ display: none;}

    .lnb .home{width: 50px;}
    .lnb .depth1_name{font-size:14px; padding:0 10px;}
    .lnb .depth1_name::after {content: ''; width: 1px; height: 20px; background-color: #001D84; position: absolute;top: 50%;transform: translateY(-50%);right: 0; }
    .lnb .lnb_menu .lnb_title { display: block; font-size: 14px; color: #001D84;padding: 0 10px; line-height: 80px; box-sizing: border-box; cursor: pointer; position: relative; }
    .lnb .lnb_menu .lnb_title span{position: relative; display: inline-block;}
    .lnb .lnb_menu .lnb_title span::after { content: ''; width: 14px; height: 7px; background: url('../img/icon/arr_down.png')no-repeat center/cover; position: absolute; ;top: 50%;transform: translateY(-50%);right: -25px; }
    .lnb .lnb_menu .lnb_title.add::after { transform: rotate(180deg); }
    .lnb .lnb_menu ul {display: none; position: absolute;}
    .lnb .lnb_menu li {background-color: #939FC8; border-bottom: 1px solid #CCD2E6; padding:10px 0;}
    .lnb .lnb_menu li:after { display: none; }
    .lnb .lnb_menu li a {text-align: center; color: #fff; }




    /*** [Trading] 공통 ***/
    .des-box-wrap {background-position: unset; background-size: cover; height: auto;}
    .des-box{position: relative;width: 100%;height: 100%; background-color:rgba(14,25,55,.85); bottom:0;}
    .effect .cont_box .tit{width: 45%; font-size: 16px;}
    .sub-table .scroll table{min-width:768px}

    /*** [Trading Platforms] 공통 ***/
    .metatrader .intro .inner{flex-direction: column;align-items: center; font-size: 16px;}
    .metatrader .intro img{margin-right: 0;}
    .metatrader .btn{width: 100%;}

    .features .cont_box .cont{width: 100%;}
    .features .cont .txt_box{width: 90%;}
    .features .cont .txt_box .tit{font-size: 18px;}


    /* Knowledge Hub - gloassary */
    nav.tabs_area .tabs {grid-template-columns: repeat(10, 9%);}
    .glossary_table{flex-direction: column; height: auto;}
    .search_box_area .search_result{height: 200px;}
    .search_box_area .total{float:right; margin-top: -40px;}
    .glossary_table .list_area > .search_box_area {border-right: 0;}
    .search_box_area .search_title{border-bottom:0;}
    .justice_area{border-top:1px solid #ddd;}
    .justice_area .search_box_area .search_detail{height: 300px; margin-top: 0;}

    .md-btn {width:100%;
}

@media screen and (max-width:500px){
    .sub_ment .tit{font-size: 22px;}
    .lnb .lnb_menu { width: 37%;}

    /*** [Trading] 공통 ***/
    .effect .cont_box .tit{width: 100%;}

    .features .cont_box .cont{border-bottom: 1px dotted #ddd; padding-bottom: 20px;}
    .features .cont_box .cont:last-child{border-bottom: 0}

    /*** [Knowledge Hub] 공통 ***/
    /* gloassary */
    nav.tabs_area .tabs {grid-template-columns: repeat(5, 18%);}
    .search_wrap .search_btn{flex-direction: column; float:inherit}
    #searchField{width: 100%;}
    #searchString{flex:1}
    

    /* Support */
    #Support .tab .tablinks{font-size:12px}
}

@media screen and (max-width:400px) {
    .lnb .lnb_menu { width: 40%; }
}