@charset "utf-8";

html,body{font-size:16px;font-size:1rem;}

/*공통요소*/

.fa, .fas, .far, .fal, .fad{text-rendering: optimizeLegibility;}
body{font-weight:400;font-style:normal;}
a{-moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in; outline: none}
.skip-navi{width:1px;height:1px;position:absolute;top:-1px;left:-1px;}
.hidden{position:absolute;width:1px;height:1px;top:-1px;left:-1px;text-indent:-9999px;}
.skip-navi{text-indent:-9999px;}
.clearfix{clear:both;}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

.pull-right{float:right;}
.pull-left{float:left;}
.ellipsis {overflow: hidden;display: inline-block;white-space: nowrap;text-overflow: ellipsis;}
.row-w{overflow:hidden;margin:0 auto;box-sizing:border-box;width:100%;max-width:1100px !important;}


.color-r{color:#bf0303;}
.color-grey{color:#8a8a8a;}
.color-wh{color:#fff;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.color-ry{/*color:#ff9922;*/color:rgba(80,214,224,.85) !important}
.color-ry2{color:#df8104;}
.color-ry3{color:#a66405;}
.bg-white{background:#fff;}
.bg-grey{background:#F5F6F7;}
.bg-light-grey{background:#fafafa;}
/* flatform */
.color-ry4{color:#f39a00;}
.color-grey2{color:#4f4f4f;}
.color-grey3{color:#6f6f6f;}
.color-blue{color:#5282c9;}
.color-green{color:#95c373;}
.color-theme {color: rgba(80, 214, 224, 0.85);}
.font-100{font-weight:100;}
.font-bold{font-weight:bold;}
.f-none{float:none;}
.f-left{float:left;}
.f-right{float:right;}
@media screen and (max-width:1200px){
    /*rem 비율 조정 13px = rem;*/
   /*  html{font-size:13px;} */
    #cbm-aside, #combineMenu{font-size:13px;}
    .row-w{width:calc(100% - 32px) !important;}
}
@media screen and (max-width:1024px){
	#desktopHeader{display:none;}
/* 	#wrapper{top:-60px;} */
	#mobileHeader{z-index:8800;position:relative;display:block;box-sizing:border-box;width:100%;height:60px;border-top:1px solid #232323;background: rgba(19,19,19,1);color: #fff;}
	#mobileHeader #mobileLogo {float: left;display: inline-block;width: 84px;height: 29px;padding-top: 8px;margin-left:16px;}
	
	#mobileHeader #btnMoblieGnb {position:absolute;right:16px;display: inline-block;width: 30px;height: 30px;line-height:37px;padding-top: 8px;color:#fff;font-size:16px;text-align: right;}
	#mobileHeader #btnMoblieGnb:hover {color:#df8104;}
	
	#mobileHeader #btnMobileDownload {position:absolute;right:16px;display: inline-block;width: 30px;height: 30px;padding-top: 8px;color:#fff;background:#df8104;font-size:16px;text-align: right;}
	#mobileHeader #btnMobileDownload:hover {color:#131313;}
	
	#mobileGnb{z-index:8870;display:block;opacity: 1;position:fixed;top: 0;right:-360px;width:300px;padding: 0px 0px 22px;background:#1f1f24;color:#fff;}    
}
/* 960 */
@media screen and (max-width:960px){
}

/*800 */
@media screen and (max-width:800px){

    #m-menu-wrap #m-menu li ul li.flag{float:left;width:30px;height:30px;margin-right:10%;}
}
/* 768 736*/
@media screen and (max-width:768px) {
/*     .row-w {
        max-width: 90% !important
    } */
}
/*  667 640 */
@media screen and (max-width:667px){
}
@media screen and (max-width:640px){

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

}
/* 568 533 */
@media screen and (max-width:568px){

}
/* 533 */
@media screen and (max-width:533px){
}
/* 480 */
@media screen and (max-width:480px){

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

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

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

}
@media screen and (max-width:320px){
    html{min-width:300px;}
}


/* 로딩 시작 */
/*감추기*/
.display-none{display:none;}
.wrap-loading{ /*화면 전체를 어둡게 합니다.*/
    position: fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: #262626; /*not in ie */
    opacity:0.9;
    z-index:9999;
}
.wrap-loading .loading-container{
    position: fixed;
    top:50%;
    left:50%;
    margin-left: -75px;
    margin-top: -75px;
}
.spinner__container {
    display: flex;
    width: 150px;
    height: 150px;
    align-items: center;
    justify-content: center;
    padding: 0px;
    /*    border: 1px solid #fff;*/
}

.wrap-loading .loading-txt{position:absolute;bottom:-10px; left:0;display:block;width:100%;color:#fff;font-weight:normal;font-size:14px;text-align:center;letter-spacing:0;}
.loading-container .spinner__dot {
    width: 15px;
    height: 15px;
    margin: 0 10px;
    border-radius: 100%;
}
.loading-container .spinner__square {
    width: 10px;
    height: 10px;
}
@keyframes spinner__effect--8-child-1 {
    50% {
        transform: translate(-325%, -325%);
        background-color:#9d4bc7;
    }
}
@keyframes spinner__effect--8-child-2 {
    50% {
        transform: translate(0, -325%);
        background-color:#9d4bc7;
    }
}
@keyframes spinner__effect--8-child-3 {
    50% {
        transform: translate(325%, -325%);
        background-color:#ffc61d;
    }
}
@keyframes spinner__effect--8-child-4 {
    50% {
        transform: translate(325%, 0);
        background-color:#ffc61d;
    }
}
@keyframes spinner__effect--8-child-5 {
    50% {
        transform: translate(325%, 325%);
        background-color:#29e2ff;
    }
}
@keyframes spinner__effect--8-child-6 {
    50% {
        transform: translate(0, 325%);
        background-color:#29e2ff;
    }
}
@keyframes spinner__effect--8-child-7 {
    50% {
        transform: translate(-325%, 325%);
        background-color:#ff2c6e;
    }
}
@keyframes spinner__effect--8-child-8 {
    50% {
        transform: translate(-325%, 0);
        background-color:#ff2c6e;
    }
}
@keyframes spinner__effect--8-child-9 {
    50% {
        transform: scale(2);
    }
}
.loading-container .spinner__effect--8 .spinner {
    position: relative;
    transform: rotate(45deg);
}
.loading-container .spinner__effect--8 .spinner .spinner__square {
    position: absolute;
    background: #fff;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(1) {
    animation-name: spinner__effect--8-child-1;
    animation-delay: calc(.1s * 1);
}
.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(2) {
    animation-name: spinner__effect--8-child-2;
    animation-delay: calc(.1s * 2);
}
.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(3) {
    animation-name: spinner__effect--8-child-3;
    animation-delay: calc(.1s * 3);
}
.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(4) {
    animation-name: spinner__effect--8-child-4;
    animation-delay: calc(.1s * 4);
}
.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(5) {
    animation-name: spinner__effect--8-child-5;
    animation-delay: calc(.1s * 5);
}
.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(6) {
    animation-name: spinner__effect--8-child-6;
    animation-delay: calc(.1s * 6);
}
.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(7) {
    animation-name: spinner__effect--8-child-7;
    animation-delay: calc(.1s * 7);
}
.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(8) {
    animation-name: spinner__effect--8-child-8;
    animation-delay: calc(.1s * 8);
}
.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(9) {
    animation-name: spinner__effect--8-child-9;
    animation-delay: 1.25s;
}

/* 로딩 끝 */