@charset "UTF-8";

.responWrap{position:relative;width: 100%;}
.con_container.main .responWrap::after{display:none;content:"";width: 32px;height: 18px;background: url(../images/slide_icon.gif) no-repeat center;bottom:0;left:50%;transform: translateX(-50%);}
.respon{position:relative;width: 100%;overflow: auto;}

@media screen and (max-width: 1727px) {
    .con_container.main .quickWrap{width: 122px;height: 375px;overflow:hidden;top:151px;left: unset;right: -90px;transform: translateX(0);transition: .3s all;}
    .con_container.main .quickWrap.on{right: 0;}
    .con_container.main .quickWrap .quickMenu{right: 0;transition: .3s all;}
    .con_container.main .quickWrap.on .quickMenu{}
    .quickMenu .quickSide{padding: 20px 6px;left: -32px;cursor: pointer;}
    .quickMenu .quickTab > ul{border-radius: 0 0 0 8px;}
}

@media screen and (max-width: 1455px) {
    .mainBttm .chartTab figure .chartThing{width:39.58vw;}
}

@media screen and (max-width: 1450px) {
    .mainWrapper{padding: 35px 10px;}
    .mainTop .topTab > ul > li .topBox{}

    .header .util{width: 100%;margin: 0;}
    .mainBttm .chartTab ul > li{width: calc((100% - 30px)/4);margin: 0 10px 0 0;}
    .mainBttm .chartTab ul > li:last-child{margin: 0;}
    .mainBttm .chartTab ul > li .tabHead{width: 100%;margin: 0;}
    .con_container.main .ex_imTabBox3 > li{width: 100%;}
    .mainBttm .ex_imTabX ul li,
    .mainBttm .ex_imTab3 ul li,
    .mainBttm .ex_imTab4 ul li{width: 57px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure .course{top: 66px;}

}

@media screen and (max-width: 1440px) {
    .mainTop .topTab ul li .topBox .chartGrp.fst{padding: 0;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar{padding: 0;}

}

@media screen and (max-width: 1405px) {
    .mainBttm .chartTab ul li .tabHeadWrap .objBox > span{font-size: 35px;}
}

@media screen and (max-width: 1304px) {

    .topBox .responWrap{overflow: auto;}
    .mainTop .topTab ul li .topBox .respon{/* width: 1300px; */}


    .mainBttm .chartTab ul li .tabHeadWrap > span{font-size: 16px;padding: 0 0 0 10px;}
    .mainBttm .chartTab ul li .tabHeadWrap > span::before{top: 5px;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox > span{font-size: 32px;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj+span{height:40px;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .costTxt{font-size:16px;padding: 12px 0;}

    .mainBttm .bttmInfo .exchangeInfo ul li{padding: 18px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .flags{left: 18px;bottom: 18px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt+.icdcValWrap{right: 18px;bottom: 18px;}

}
@media screen and (max-width: 1280px) {
    .mainTop .topTab > ul > li .topBox > ul .txtBox{padding: 25px 16px;}
}
@media screen and (max-width: 1276px) {
    .mainTop{transition: .3s height;}
    .mainTop,
    .mainTop.fston{/* height: 612px; */}
    .mainTop.scndon{/* height: 632px; */}
    .mainTop .topTab > ul > li:last-child .topBox::before{height: 102px;background-size: contain;left: -4px;}
    .mainTop .topTab > ul > li .topBox{/* padding: 14px 44px 10px; */}
    .mainTop .topTab ul li .topBox .respon{}
    .mainTop .topTab ul li .topBox .chartGrp{width: 100%;}
    .mainTop .topTab ul li .topBox .chartGrp.fst > li{}
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li:nth-child(1),
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li:nth-child(2){width: calc((100% - 20px)/2);}
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li:nth-child(1){margin: 0 20px 0 0;}
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li:nth-child(1)
    .mainTop .topTab ul li .topBox .chartGrp > li #container3,
    .mainTop .topTab ul li .topBox .chartGrp > li #container4{width: 50%;}
    .topTab .responWrap{}
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li{margin: 0;}

    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj{width: 100px;height: 53px;top: -12px;}
    
}
@media screen and (max-width: 1200px) {

    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt{bottom: 26px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt p{font-size: 18px;}

}

@media screen and (max-width: 1180px) {
    
    .mainBttm .chartTab{height: 739px;}
    .mainBttm .chartTab ul li .tabHeadWrap{padding: 12px;}
    .mainBttm .chartTab ul li .tabHead{height: 214px;}
    .mainBttm .chartTab ul li .tabHead a.more{top: 8px;right: 2px;}
    .mainBttm .chartTab ul li.on .tabBody{height: calc(100% - 211px);top: 211px;}
    .mainBttm .chartTab ul li .tabBody{padding: 61px 30px 30px;}
    .mainBttm .chartTab ul li .tabBody .tabSbject br{display: none;}
    .mainBttm .chartTab ul li .tabBody .tabinMid{position: relative;width:calc(100% - 140px);padding: 30px 0 30px 64px;background:url(../images/tabbody_p_bg.png) no-repeat left center;top: unset;}

    .mainBttm .chartTab ul li .tabBody .chartBox figure .course{height: 30px;line-height: 30px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure .course strong{height: inherit;line-height: inherit;font-size:16px;padding: 0 12px;margin: 0 10px 0 0;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure .course p{font-size: 14px;padding: 3px 0 0;}
}

@media screen and (max-width: 1172px) {

    .mainTop .topTab > ul > li .topBox{/* padding: 26px 44px 40px; */}
    .mainTop .topTab > ul > li .topBox > p{line-height: 1.5;font-size: 24px;}

    .mainTop .topTab ul li .topBox .chartGrp.scnd{/* width: 1300px; */}

    .mainTop .topTab ul li .topBox .chartGrp > li #container1,
    .mainTop .topTab ul li .topBox .chartGrp > li #container2{width: 100%;}

    
    .mainBttm .chartTab ul li .tabHeadWrap .objBox > span{font-size: 30px;}

    .mainBttm .chartTab ul li .tabBody .chartBox figure > span{top: 60px;}
    .mainBttm .chartTab ul li .tabBody .bigchart1 .chartBox .big1arrw{top: 94px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure > span.floating{top: 130px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure > strong{margin: 0 0 96px;}

}
@media screen and (max-width: 1161px) {
    .mainTop .topTab > ul > li .topBox > ul .txtBox{padding: 30px 16px;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox strong{font-size: 28px;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox p{font-size: 20px;}

    .mainTop .topTab ul li .topBox .ex_imTab1 ul li{font-size: 16px;}

    .mainTop .topTab ul li .topBox .chartGrp > li figure h5{font-size: 18px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure h5::before{top: 7px;}
}

@media screen and (max-width: 1155px) {
    .mainMid .midTab ul li a span{padding: 0 0 0 58px;}
    .mainMid .midTab ul li span::before{width: 53px;height: 48px;}
    
}
@media screen and (max-width: 1140px) {

    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li strong{font-size: 22px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li{font-size: 16px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar::after{height: 40px;}

    .mainBttm .bttmInfo .exchangeInfo .exchanHead p{padding: 0 18px;}
    .mainBttm .bttmInfo .exchangeInfo ul{padding: 0;}
    .mainBttm .bttmInfo .exchangeInfo ul::before{height: calc(100% - 36px);}
    .mainBttm .bttmInfo .exchangeInfo ul::after{width: calc(100% - 36px);}
}
@media screen and (max-width: 1100px) {
    .mainTop .topTab > ul > li .topBox > ul .illuBox{width: 140px;}

    .mainTop .topTab > ul > li .topBox > ul  .illuBox{background-size: 98px !important;}

    .mainTop .topTab > ul > li .topBox > ul .txtBox{width: calc(100% - 140px);}
    
}
@media screen and (max-width: 1085px) {
    .mainBttm .chartTab ul li .tabHeadWrap > span{letter-spacing: -2px;}
}
@media screen and (max-width: 1080px) {
    .mainBttm .chartTab ul li .tabHead{height: 196px;}
    .mainBttm .chartTab ul li .tabBody,
    .mainBttm .chartTab ul li.on .tabBody{top: 193px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure .circles{width: 40px;height: 40px;line-height: 40px;font-size: 16px;}
    
    .mainBttm .chartTab ul li .tabHeadWrap > span{margin: 0;}
    .mainBttm .chartTab ul li .tabHeadWrap > span::before{top: 5px;}
    .mainBttm .chartTab ul li .tabHeadWrap > span.subTitLfp > i{padding: 0;}
    .mainBttm .chartTab ul li .tabHeadWrap > span > i{width: auto;float: right;margin: 4px 0 8px;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj{position:relative;float:left;top: 6px;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj+span{width: auto;height: auto;line-height:1;float: right;margin: 0 0 8px;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj+span br{display: inline-block;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .costTxt{padding: 6px 0;}
}
@media screen and (max-width: 1045px) {
    .mainTop .topTab > ul > li .topBox > ul .txtBox{padding: 22px 16px;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox strong{font-size: 26px;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox p{font-size: 18px;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox p i{display: inline-block;width: 100%;}
}
@media screen and (max-width: 1038px) {
    .mainBttm .chartTab ul li .tabHeadWrap > span{letter-spacing: -2px;}

    .mainMid .midTab ul li a{padding: 14px 0px;}
    .mainMid .midTab ul li a span{text-align:center;padding: 48px 0 0;}
    .mainMid .midTab ul li span::before{top: 0;left: 50%;transform: translateX(-50%);}
}

/* tablet size start */
@media screen and (max-width: 1024px) {


    
    .mainTop .topTab ul li .topBox .chartGrp > li figure .twoColor{top: 34px;}
    /* .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar{width: calc(100% - 140px);} */
    /* .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar::after{width:50%;height:2px;transform: translate(-50%,-50%);} */
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar{margin: 24px 0 0;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li{font-size: 14px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li strong{font-size: 19px;}
    

    .mainBttm .bttmInfo > div{width: calc((100% - 8px)/2);}
    .mainBttm .bttmInfo .bdboxWrap{margin: 0 8px 0 0;}
    .mainBttm .bttmInfo .exchangeInfo .exchanHead p strong,
    .mainBttm .bttmInfo .exchangeInfo .exchanHead p span{letter-spacing: -1px;}

    .mainBttm .chartTab > .responWrap{display: inline-block;height: 219px;overflow-x: scroll;overflow-y:hidden;padding: 0;}
    .mainBttm .chartTab > .responWrap ul{width: 990px;}
    .mainBttm .chartTab > .responWrap ul li{width: 240px;height: 218px;}
    
    .mainBttm .chartTab{width: 100%;height: auto;}

    .mainBttm .chartTab ul li .tabHeadWrap > span.subTitOil > i{}

    .mainBttm .chartTab > ul li .tabHead{display: none;}
    .mainBttm .chartTab ul li .tabHead{border-width: 2px;border-radius: 14px;}
    .mainBttm .chartTab ul li.on .tabHead{border-width: 3px;}

    .mainBttm .chartTab ul li .tabBody{display:none;position:relative;width:calc(100vw - 20px);border-radius: 10px;}
    .mainBttm .chartTab ul li.on .tabBody{display:inline-block;top:0;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure{height: auto;}
    .mainBttm .chartTab figure .chartThing{height: auto;}

    .mainBttm .bttmInfo .exchangeInfo ul li .flags{width: 54px;height: 34px;bottom: 20px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt{padding: 0 16px 0 0;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt p{font-size: 17px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt+b{width: 60px;height: 60px;line-height: 60px;padding: 0 0 0 30px;}
    
}

@media screen and (max-width: 1023px) {
    .mainBttm .chartTab ul li .tabBody .arrwBox{display: inline-block;}
    .con_container.main .chartTab .responWrap::after{display: none;}

    .mainBttm .chartTab figure .chartThing{width: 85.33vw;}

    .mainBttm .chartTab ul li .tabBody .chartBox figure:first-child{margin: 0;}
}

@media screen and (max-width: 998px) {
    .mainBttm .chartTab ul{overflow: auto;}
    .mainBttm .chartTab > ul > li{width: 236px;}

    .mainBttm .chartTab figure .chartThing{width: 84.33vw;}
}

@media screen and (max-width: 950px) {
    
    .mainTop .topTab > ul > li .topBox{}
    .mainTop .topTab ul li .topBox .chartGrp{padding: 0;}

    .mainTop .topTab > ul > li .topBox > p{line-height:1.3;font-size: 20px;margin: 0 0 52px;}
    .mainTop .topTab > ul > li .topBox > p span.arrwAdd::after{bottom: 5px;}
}

@media screen and (max-width: 910px) {
    .mainBttm .bttmInfo{width:100%;height:  auto;}
    .mainBttm .bttmInfo > div{width: 100%;}
    .mainBttm .bttmInfo .bdboxWrap{height: 338px;margin: 0 0 8px;}
    .mainBttm .bttmInfo .exchangeInfo{height: 326px;}

    .mainBttm .bttmInfo .exchangeInfo ul li .flags{width: 70px;height: 44px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt+b{width: 70px;height: 70px;line-height: 70px;padding: 0 0 0 35px;}
}
@media screen and (max-width: 870px) {
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li{font-size: 13px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li strong{font-size: 18px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li span{display:inline-block;width:100%;font-size: 18px;}
}
@media screen and (max-width: 836px) {
    .mainBttm .chartTab figure .chartThing{width: 81.33vw;}
}
@media screen and (max-width: 820px) {

    .mainWrapper{padding: 35px 10px 23px;}

    .mainTop, 
    .mainTop.scndon{height: 1127px;}
    .mainTop.fston{height: 1132px;}

    .mainTop .topTab > ul > li .topBox,
    .mainTop.scndon .topTab > ul > li .topBox{height: 1049px;}
    .mainTop.fston .topTab > ul > li .topBox{height: 1054px;}
    .mainTop .topTab > ul > li .topBox > ul{height: auto;}
    .mainTop .topTab > ul > li .topBox > ul > li{width: 100%;height: 130px;}
    .mainTop .topTab > ul > li .topBox > ul > li:first-child{margin: 0 0 10px;}

    .mainTop .topTab > ul > li .topBox > ul .txtBox{padding: 29px;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox strong{font-size: 28px;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox p{font-size: 20px;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox p i{width: auto;}

    .mainTop .topTab ul li .topBox .unitWrap{top: 398px;}

    .mainTop .topTab ul li .topBox .chartGrp.fst > li{width: 100%;padding: 0 0 12px;margin: 0 0 12px;border-right: none;/* border-bottom: 1px dashed #d5d5d5; */}
    .mainTop .topTab ul li .topBox .chartGrp.fst > li:last-child{border-bottom: none;}

    .mainTop .topTab ul li .topBox .chartGrp.scnd{width: 100%;height: auto;}
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li{}
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li:nth-child(1), 
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li:nth-child(2){width: 100%;}
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li:nth-child(1){padding: 0;margin: 0 0 20px;border-right: none;}
    
    .mainTop .topTab ul li .topBox .respon{width: 100%;}

    .mainTop .topTab ul li .topBox .chartGrp > li #container1{height: 240px;}
    .mainTop .topTab ul li .topBox .chartGrp > li #container2{height: 200px;}
    .mainTop .topTab ul li .topBox .chartGrp > li #container6, 
    .mainTop .topTab ul li .topBox .chartGrp > li #container6_b{width: 100%;}

    .nationTable tbody tr td span{padding: 0 0 0 50%;}
    .nationTable tbody tr td:first-child span::before{right: calc(50% + 10px);}


}
@media screen and (max-width: 815px) {
    .mainMid .midTab ul li{width: calc(100% / 3);}
    .mainMid .midTab ul li::after{height: 60%;}
    .mainMid .midTab ul li:nth-child(3n)::after{display: none;}
    .mainMid .midTab ul li:nth-last-child(-n+3)::before{display: none;}

}
@media screen and (max-width: 750px) {
    .con_container.main .quickWrap{width: 142px;}
    .quickMenu .quickSide{padding: 5px 11px 12px;border-radius: 10px;left: -52px;box-shadow: 1px 2px 3px rgba(0,0,0,0.5);}
    .quickMenu .quickSide span{display:none;}
    .quickMenu .quickSide span.mobile_Q{display:inline-block;height:26px;font-size: 26px;font-weight: 600;writing-mode:horizontal-tb;}
}
@media screen and (max-width: 728px) {


    .mainTop, 
    .mainTop.scndon{height: 1175px;}
    .mainTop.fston{height: 1128px;}

    .mainTop .topTab > ul > li .topBox, 
    .mainTop.scndon .topTab > ul > li .topBox{height: 1096px;}
    .mainTop.fston .topTab > ul > li .topBox{height: 1050px;}

    .mainTop .topTab ul li .topBox .respon{width: 100%;}


    .mainTop .topTab > ul > li .topBox > p{width:calc(100% - 80px);line-height: 1.15;font-size: 30px;margin: 0 0 20px;}
    .mainTop .topTab > ul > li .topBox > p b{font-size: 18px;margin: 0;}
    .mainTop .topTab > ul > li .topBox > p span{line-height:1;font-size: inherit;}
    .mainTop .topTab > ul > li .topBox > p span.arrwAdd{margin: 0 0 12px;}

    .mainTop .topTab > ul > li .topBox > p br.br2{display: inline-block;}




    .mainTop .topTab ul li .topBox .chartGrp > li figure h5{width: 100%;margin: 0 0 10px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure h5 span{font-size: inherit;}

    .mainTop .topTab ul li .topBox .chartGrp > li figure .twoColor{position:relative;float:right;top: unset;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar{padding: 0 calc((100% - 432px)/2);margin: 10px 0 0;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li{font-size: 16px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li strong{font-size: 26px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li span{display: inline;font-size: inherit;}


    .mainTop .topTab > ul > li:first-child .topBox::after{display: none;}
    .mainTop .topTab > ul > li:nth-child(2) .topBox::after{display: none;}

    .con_container.main .mainTop.scndon .responWrap::after{display: none;}
    .mainTop .topTab ul li .topBox .chartGrp{display: inline-block;width: 100%;height: auto;}
    .mainTop .topTab ul li .topBox .chartGrp.fst{width: 100%;}
    .mainTop .topTab ul li .topBox .chartGrp.scnd{width: 100%;}
    .mainTop .topTab ul li .topBox .chartGrp.fst > li{width: 100%;}

    .mainTop .topTab ul li .topBox .chartGrp > li figure h5+span{font-size: 14px;top: 6px;}

    .mainTop .topTab ul li .topBox .chartGrp > li #container6,
    .mainTop .topTab ul li .topBox .chartGrp > li #container6_b{width: 100%;}

    .mainTop .topTab ul li .topBox .chartGrp.scnd figure h5{width: 100%;float: left;}
    
    .mainTop .topTab ul li .topBox .chartGrp.fst > li:nth-child(1){width: 100%; margin: 0 0 36px;}
    .mainTop .topTab ul li .topBox .chartGrp.fst > li:nth-child(2){width: 100%;}
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li:nth-child(1){width: 100%}
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li:nth-child(2){width: 100%}
    .mainTop .topTab ul li .topBox .chartGrp.scnd > li:nth-child(3){width: 100%}


}
@media screen and (max-width: 700px) {
    .mainBttm .chartTab figure .chartThing{width: 78.33vw;}
}

@media screen and (max-width: 667px) {
    .mainTop .topTab > ul > li .topBox > p span{display: inline-block;}
    .mainTop .topTab > ul > li .topBox > p br.br2{display: inline-block;}
}

@media screen and (max-width: 650px) {
    .mainTop, .mainTop.scndon{height: 1218px;}
    .mainTop.scndon{height: 1217px;}
    .mainTop .topTab > ul > li .topBox, 
    .mainTop.scndon .topTab > ul > li .topBox{height: 1139px;}
    .mainTop.fston .topTab > ul > li .topBox{height: 1094px;}

    .mainTop .topTab > ul > li .topBox .upArea > p{margin: 0 0 8px;}
    .mainTop .topTab > ul > li .topBox .ccpBtn .ccpPop{right: unset;left: 0;}
    .mainTop .btnGrp{position: relative;float: left;top: unset;right: unset;}

    .mainTop .topTab ul li .topBox .unitWrap{top: 438px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure{padding: 16px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure > strong{margin: 0 0 86px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure > span{top: 44px;left:30px;}
    .mainBttm .chartTab ul li .tabBody .bigchart1 .chartBox .big1arrw{top: 72px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure > span.floating{position:absolute;top: 108px;right: 32px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure .course{top: 64px;}

    .mainTop .topTab > ul > li .btnGrp > div .waitPlz{position:fixed; top:50%; right:50%; transform:translateX(50%);}
}

@media screen and (max-width: 614px) {
    .mainTop .topTab > ul > li{width: 190px;}
}
@media screen and (max-width: 642px) {
    .mainTop .topTab > ul > li{width: calc((100% - 90px)/2);}
    .mainTop .topTab > ul > li:first-child{}
    .mainTop .topTab > ul > li > a strong{font-size: 20px;}
}
@media screen and (max-width: 579px) {
    .mainTop .topTab > ul > li .topBox > ul .txtBox{padding: 18px;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox p i{width: 100%;}
}
/* mobile size start */
@media screen and (max-width: 520px) {


    .con_container.main .quickWrap{top: 133px; z-index: 1;}

    .mainWrapper{padding: 16px 0 0;}
    .mainTop, 
    .mainTop.scndon{height: 1175px;}
    .mainTop.fston{height: 1149px;}
    .mainTop.fston .topTab > ul > li .topBox{height: 1136px;}

    .mainTop .topTab > ul > li{width: calc((100% - 70px)/2);}
    .mainTop .topTab > ul > li:first-child{margin: 0 20px 0 16px;}
    
    .mainTop .topTab > ul > li > a strong{font-size: 18px;}
    .mainTop .topTab > ul > li .topBox{padding: 50px 16px 20px;border-radius: 0;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure h5{font-size: 18px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure h5 span{font-size: 14px;}

    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar::after{height: 26px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li{letter-spacing: -2px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li:nth-child(1){padding: 0 4px 0 0;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li:nth-child(2){padding: 0 0 0 4px ;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li span{display: inline-block;width: 100%;font-size: 20px;}

    .mainTop .topTab > ul > li:nth-child(2) .topBox::before{width: 182px;height: 74px;}
    .mainTop .topTab > ul > li:nth-child(2) .topBox::after{width: 106px; height: 62px;background-size: contain;}

    .mainBttm .chartTab ul li .tabHead a.more{top: 2px;right: 0px;}


    
    .mainMid .midTab ul li a{padding: 17px 0;}
    .mainMid .midTab ul li a span{font-size: 14px;}

    .mainMid .midTab ul li::after{height: 46px;top: 58%;}
    

    .mainBttm{background: #fff;}
    .mainBttm .chartTab{margin: 0 0 17px;}
    .mainBttm .chartTab > .responWrap{height: 176px;margin: 0;}
    .mainBttm .chartTab > .responWrap ul{width: 926px;height: 176px;padding: 0 16px;}
    .mainBttm .chartTab > .responWrap ul li{width: 216px;height: 155px;}
    .chartTab .responWrap{padding: 0;height: 100%;}
    .chartTab .responWrap .respon{height: 100%;}
    
    .mainBttm .chartTab figure .chartThing{width: calc(100vw - 35px);}

    .mainBttm .chartTab ul li .tabHead{height: 100%;}
    .mainBttm .chartTab ul li .tabHeadWrap{padding: 8px;}
    .mainBttm .chartTab ul li .tabHeadWrap > span{font-size: 14px;font-weight:400;letter-spacing:-1px;padding: 0 0 0 8px;margin: 0;}
    .mainBttm .chartTab ul li .tabHeadWrap > span::before{width: 1px;height: 9px;top: 6px;}
    .mainBttm .chartTab ul li .tabHeadWrap > span b{font-weight: 400;}
    .mainBttm .chartTab ul li .tabHeadWrap > span > i{margin: 4px 0;}
    .mainBttm .chartTab ul li .tabHeadWrap i{padding: 0 0 0 30px;margin:6px 0 0}
    .mainBttm .chartTab ul li .tabHeadWrap i::before{width: 26px;height: 18px;}
    
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj{width: 79px;height: 52px;top: -8px;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj.plane{background: url(../images/tab_btn2x1_bg.png) no-repeat 20px center;background-size: contain;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj.ship{background: url(../images/tab_btn3x1_bg.png) no-repeat 11px center;background-size: contain;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj.oil{background: url(../images/tab_btn4x1_bg.png) no-repeat 17px center;background-size: contain;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox > span{font-size: 20px;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj+span{/* line-height:1; *//* height:25px; *//* margin: 0 0 1px; */}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .artObj+span::after{width:24px;height:17px;top: 0;bottom: unset;right: 2px;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .costTxt{font-size: 14px;padding: 6px 0;}
    .mainBttm .chartTab ul li .tabHeadWrap .objBox .crrncy b{font-size: 14px;}
    .mainBttm .chartTab ul li .tabBody{width: 100vw;}

    .mainBttm .chartTab ul li .tabBody{padding: 44px 0 0px;border: 0;border-radius: 0;}
    .mainBttm .chartTab ul li .tabBody .tabinMid{width:calc(100% - 40px);padding:20px 0 20px 58px;margin: 0 0 0 20px;}

    .mainBttm .chartTab ul li .tabBody .gijun{position: relative;margin: 3px 0 14px 0;top: unset;left: 14px;right: unset;}
    .mainBttm .chartTab ul li .tabBody .moreInfo{top:0;right: 14px;}
    .ex_imTabX, 
    .ex_imTab3, 
    .ex_imTab4{top: 0;right: 104px;}

    .mainBttm .chartTab ul li .tabBody .chartBox figure{width:100%;height: 100%;border-radius: 0;padding: 18px 20px 20px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure:first-child{margin: 0;}

    .mainBttm .chartTab ul li .tabBody .chartBox figure > strong{font-size: 18px;margin: 0 0 72px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure .course{top: 47px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure > span.floating{right: 20px;top: 78px;}

    .mainBttm .chartTab ul li .tabBody .swiper-pagination{display: inline-block;bottom: 8px;}   

    .con_container.main .responWrap::after{bottom: 10px;}
    .con_container.main .chartTab .on .responWrap::after{z-index: 2;}
    
    .mainBttm .chartTab ul li .tabBody .arrwBox,
    .mainBttm .chartTab ul li .tabBody .arrwBox.bigchart3,
    .mainBttm .chartTab ul li .tabBody .arrwBox.bigchart3_b{display: none;}

    .mainBttm .chartTab ul li .tabBody .bigchart1 .chartBox .big1arrw{top: 20px;right: 20px;}

    .mainBttm .bttmInfo > div,
    .mainBttm .bttmInfo .exchangeInfo{border-radius: 0;}
    .mainBttm .bttmInfo .bdboxWrap{height: auto;padding: 0 16px;margin: 0 0 16px;}
    .mainBttm .bttmInfo .bdboxWrap .bdTab ul{height: 47px;}
    .mainBttm .bttmInfo .bdboxWrap .bdTab ul li a{line-height: 47px;font-size: 14px;}
    .mainBttm .bttmInfo .bdboxWrap .bdTab ul li.more a{height:47px;line-height: 40px;}
    .mainBttm .bttmInfo .bdboxWrap .bdBox ul{padding: 0;}
    .mainBttm .bttmInfo .bdboxWrap .bdBox ul li{position:relative;height:62px;padding: 10px 10px 0 25%;margin:0;border-bottom: 1px solid #ddd;}
    .mainBttm .bttmInfo .bdboxWrap .bdBox ul li:last-child{border-bottom: 0;}
    .mainBttm .bttmInfo .bdboxWrap .bdBox ul li a.cate{position: absolute;width: calc(25% - 24px);height: 24px;line-height: 24px;margin:0;left: 12px;top:19px}
    .mainBttm .bttmInfo .bdboxWrap .bdBox ul li a.cate+a,
    .mainBttm .bttmInfo .bdboxWrap .bdBox ul li a.cate+a+span{width: 100%;height: 25px;line-height:1.5;margin: 0;}
    .mainBttm .bttmInfo .bdboxWrap .bdBox ul li a.cate+a{font-size: 16px;font-weight: 600;}

    .mainBttm .bttmInfo .exchangeInfo .exchanHead{height: 47px;}
    .mainBttm .bttmInfo .exchangeInfo .exchanHead p{height:100%;line-height: 2.3;padding: 4px 28px;}
    .mainBttm .bttmInfo .exchangeInfo .exchanHead p strong{display:inline-block;position:relative;width:100%;line-height: 39px;}
    .mainBttm .bttmInfo .exchangeInfo .exchanHead p strong::before{content:"";width: 2px;height: 10px;background: #fff;top: 15px;left: -13px;}
    .mainBttm .bttmInfo .exchangeInfo .exchanHead p span{width:auto;float: none;vertical-align: top;}
    .mainBttm .bttmInfo .exchangeInfo .exchanHead .moreInfo a{height: 47px;line-height: 40px;}

    .mainBttm .bttmInfo .exchangeInfo ul{height:calc(100% - 52px);padding: 0;}
    .mainBttm .bttmInfo .exchangeInfo ul li{padding: 14px 16px;}
    .mainBttm .bttmInfo .exchangeInfo ul li > p strong{font-size: 14px;margin: 0 11px 0 0;}
    .mainBttm .bttmInfo .exchangeInfo ul li > p span{width: 50px;height: 20px;line-height: 20px;font-size: 13px;}
    
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt span{min-width: 30px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt+.icdcValWrap b{text-align:center;padding: 0 0 0 16px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt+.icdcValWrap b::before{width: 12px;height: 8px;left: 0;top: 21px;}
    .mainBttm .bttmInfo .exchangeInfo ul li > p{margin: 0 0 10px;}
    .mainBttm .bttmInfo .exchangeInfo ul::before{height: calc(100% - 36px);}
    .mainBttm .bttmInfo .exchangeInfo ul::after{width: calc(100% - 32px);}
}

@media screen and (max-width: 500px) {
    .mainBttm .bttmInfo .exchangeInfo ul li .flags{width: 54px;height: 34px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt{bottom: 24px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt+.icdcValWrap{width: 70px;}
}
@media screen and (max-width: 480px) {
    .mainTop .topTab > ul > li .topBox > p{font-size: 24px;}
    .mainTop .topTab > ul > li .topBox > p b{}
}
@media screen and (max-width: 450px) {

    .con_container.main .quickWrap{top: 96px;}
    .quickMenu .quickSide{}

    .mainTop, 
    .mainTop.scndon{height: 1149px;}
    .mainTop.fston{height: 1145px;}
    .mainTop .topTab > ul > li .topBox, 
    .mainTop.scndon .topTab > ul > li .topBox{height: 1113px;}
    .mainTop.fston .topTab > ul > li .topBox{height: 1109px;}

    .mainTop .topTab > ul > li .topBox .ccpBtn .ccpPop{left: 0;}

    .nationTable tbody tr td span{padding: 0 0 0 45%;}
    .nationTable tbody tr td:first-child span::before{right: calc(54% + 10px);}
    .nationTable tbody tr td:last-child span::before{left: calc((50% - 10px)/2);}

    .mainTop .topTab > ul > li .topBox .upArea > p{margin: 0 0 8px;}
    .mainTop .btnGrp{position: relative;float: left;top: unset;right: unset;}

    .mainTop .topTab > ul > li{height: 58px;line-height: 58px;}
    .mainTop .topTab > ul > li.on > a strong{padding: 0 28px 0 0;}
    .mainTop .topTab > ul > li.on > a strong::after{width: 20px;height: 20px;background: url(../images/topTab_on_bg.png) no-repeat center;background-size: contain;top: 20px;}

    .mainTop .topTab ul li .topBox .unitWrap{top: 439px;}
    .mainTop .topTab ul li .topBox .unitWrap .unit{font-size: 15px;}
    .mainTop .topTab ul li .topBox .ex_imTab1 ul li{width: 25vw;}

    .mainTop .topTab ul li .topBox .chartGrp.fst > li:nth-child(1){margin: 0 0 10px;}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li{font-size: 4vw}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li strong{font-size: 5vw}
    .mainTop .topTab ul li .topBox .chartGrp > li figure .dollar li span{}

    .mainBttm .chartTab ul li .tabBody .chartBox figure .course{left: 21px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure .course strong{font-size: 14px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure .course p{font-size: 12px;padding: 6px 0 0;}

    .mainBttm .bttmInfo .exchangeInfo ul li{text-align: center;padding: 14px 25px;}
    .mainBttm .bttmInfo .exchangeInfo ul li > p{/* text-align: left; */margin: 0 0 6px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .flags{position:relative;width: 57px;height: 36px;float: left;margin: 0;left: unset;bottom: unset;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt{position: relative;width: auto;height: 36px;line-height: 36px;float: right;padding: 0;left:unset;bottom: unset;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt+.icdcValWrap{width: calc(100% - 50px);height: 30px;line-height: 30px;border-radius: 15px;bottom: 14px;right: 25px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt+.icdcValWrap b{line-height: 30px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt+.icdcValWrap b::before{top: 17px}
}

@media screen and (max-width: 447px) {

}

@media screen and (max-width: 430px) {
    .mainBttm .chartTab ul li .tabBody .chartBox figure > strong{line-height: 1.1;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure > strong::before{top: 3px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure > strong > span{line-height: inherit;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure > span{width: calc(100% - 136px);top: 69px;}
    .mainBttm .chartTab ul li .tabBody .chartBox figure > span.floating{width: auto;}

    .mainBttm .chartTab ul li .tabBody .bigchart1 .chartBox .big1arrw{top: 15px;}
}

@media screen and (max-width: 400px) {
    .mainTop .topTab > ul > li .topBox > p{font-size: 20px;}
    .mainTop .topTab > ul > li .topBox > p b{font-size: 17px;}

    .mainTop .topTab > ul > li .topBox > ul .illuBox{width: 94px;}
    .mainTop .topTab > ul > li .topBox > ul .illuBox{background-size: 70px !important;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox{width: calc(100% - 94px);padding: 24px 12px;}

    .mainTop .topTab > ul > li .topBox > ul .txtBox strong{font-size: 24px;}
    .mainTop .topTab > ul > li .topBox > ul .txtBox p{font-size: 18px;}

    .mainBttm .chartTab ul li .tabBody .gijun{margin: 3px 0 42px 0;}

    .mainBttm .chartTab ul li .tabBody .bigchart1 .chartBox .big1arrw{top: 50px;}
    

}
@media screen and (max-width: 390px) {
    .mainTop .topTab > ul > li .topBox .ccpBtn .ccpPop{width: 296px;}

    .mainTop .topTab > ul > li{width: calc((100% - 32px)/2);}
    .mainTop .topTab > ul > li:first-child{margin: 0 0 0 16px;}
    .mainTop .topTab > ul > li:first-child > a{border-radius: 0 0 0 10px;}
    .mainTop .topTab > ul > li:last-child > a{border-radius: 0 0 10px 0;}

    .mainTop .topTab > ul > li .topBox > ul .txtBox p i{font-size: 17px;}
}
@media screen and (max-width: 368px) {
    .mainTop .topTab > ul > li .btnGrp > div > a{padding: 8px 10px 8px 26px;}
    .mainTop .topTab > ul > li .btnGrp .ccpBtn > a{padding: 8px 10px 8px 26px;background: url(../images/up_btn_ccp.png) no-repeat 9px center;}
    .mainTop .topTab > ul > li .btnGrp .imgDown a{background: url(../images/up_btn_img.png) no-repeat 9px center;}
    .mainTop .topTab > ul > li .btnGrp .pdfDown a{background: url(../images/up_btn_pdf.png) no-repeat 9px center;}
}
@media screen and (max-width: 360px) {
    /* .mainTop, .mainTop.fston{height: 1562px;}
    .mainTop.scndon{height: 1174px;} */

    .mainTop .topTab > ul > li > a strong{font-size: 17px;}
    .mainTop .topTab > ul > li.on > a strong{padding: 0 23px 0 0;}

    .mainTop .topTab ul li .topBox .unitWrap{top: 445px;}

    
    .mainTop .btnGrp{}
    .mainTop .topTab > ul > li .btnGrp > div,
    .mainTop .topTab > ul > li .btnGrp > div:last-of-type{margin: 0 5px 5px 0;}

    .mainBttm .bttmInfo .exchangeInfo ul li .flags{width: 42px;height: 30px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt{height: 30px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt p{font-size: 16px;}
    .mainBttm .bttmInfo .exchangeInfo ul li .exchanTxt+.icdcValWrap{bottom: 18px;}
}

@media screen and (max-width: 0px) {

}