@font-face{font-family:'NanumSquareR'; src:url('../fonts/NanumSquareR.woff')}
@font-face{font-family:'NanumSquareB'; src:url('../fonts/NanumSquareB.woff')} /*폰트설정*/


/*이미지랜더링*/
img[src$=".gif"], img[src$=".png"] {
image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}


/*공통클래스*/
*{box-sizing: border-box;}
html,body{height: 100%;}
.wrap{min-height: 100%;}
body{letter-spacing: -0.03em;}
a {text-decoration: none;}
input{border: 0;transition: 0.1s;outline: 0;}
input:focus{border: 1px solid #ff587b;}
input:hover{border: 1px solid #ff587b;}
.row{display: flex;}

/*셀렉트박스*/
.select-type-1{width: 130px;height: 34px;border-radius: 5px;padding: 0 10px;font-size: 13px;outline: none;border: 1px solid #fff;transition: 0.2s;}
.select-type-1:hover{border: 1px solid #ff587b;color: #ff587b;cursor: pointer;}


.wrap{width: 100%;background: #3f4fd6;}
#header{}
#header .h-container{width: 800px;margin: 0 auto;display: flex;height: 100px;align-items: center;justify-content:space-between;}

#header .h-container .logo{display: flex;align-items: center;}
#header .h-container .logo-img{padding-right: 10px;max-width: 150px;}
#header .h-container .logo .logo-name{color: #fff;font-family:'NanumSquareB';;font-size: 18px;}
#header .h-container .user-name{}

.container{width: 800px;margin: 0 auto;}
.title-box{margin-top: 50px;margin-bottom: 20px;color: #fff;text-align: center;}
.title-box p{font-size: 24px;margin-bottom: 10px;font-family:'NanumSquareR'}
.title-box .title{font-size: 40px;font-family:'NanumSquareB';}

.li-type-1{width: 100%;background: #27339b;border-radius: 5px;display: flex;justify-content: center;padding: 20px;font-family: sans-serif;}
.li-type-1 li{font-size: 15px;text-align: center;border-right: 1px solid #4652bd;padding: 0 20px;}
.li-type-1 li:last-child{border-right: none;}
.li-type-1 li .li-title{color: #949cd9;font-weight: 600;padding-bottom: 10px;}
.li-type-1 li .li-d{color: #fff;}

.container-box{border-radius: 5px;background: #fff;margin: 18px 0;padding: 30px;}
.r-title{text-align: center;padding: 30px 0;}
.r-title p{font-size: 30px;font-family:'NanumSquareR'}
.r-title .score{font-size: 56px;padding: 10px 0;font-family:'NanumSquareB';}
.r-title .rank{font-size: 30px;background: #27339b;padding: 10px 30px;border-radius: 100px;color: #fff;margin: 0 auto;display: inline-block;font-family:'NanumSquareB';}
.result-txt{text-align: center;margin-bottom: 40px;}
.result-txt h5{font-size: 30px;font-family:'NanumSquareB';padding: 30px 0;}
.result-txt p{font-size: 17px;line-height: 1.5;font-family:'NanumSquareR';}

.table-box{width: 100%;border-radius: 5px;background: #f2f3ff;padding: 20px;text-align: center;padding-top: 0;}
.table-box .title2{padding: 30px 0;}
.title2{text-align: center;padding: 30px 0 20px 0;}
.title2 h5{font-size: 24px;font-family:'NanumSquareB';}
.li-type-2{display: flex;justify-content: center;padding-top: 8px;font-family:'NanumSquareR';font-size: 17px;}
.li-type-2 li{border-right: 1px solid #c7c7c7;padding: 0 8px;}
.li-type-2 li:last-child{border-right:none;}
.table{margin: 0 auto;width: 100%;font-size: 14px;background: #fff;}
.table tr td{border: 1px solid #e1e1e1;padding: 10px;text-align: center;}
.table tr th{border: 1px solid #e1e1e1;padding: 10px;text-align: center;}
.table-type1{}
.bg-blue th{background: #3f4fd6;color: #fff;}
.bg-green th{background: #36b58d;color: #fff;}
.bg-orange th{background: #e48219;color: #fff;}
.bg-gray{background: #f1f1f1;}
.txt-color-red{color: #ec2222;}

.table-type2{}

.table-type2 tbody tr:nth-child(even){background: #f1f1f1;}


#footer{width: 100%;padding-bottom: 20px;}
#footer .f-container{text-align: center;padding: 10px;color: #abb4ff;padding: 40px 0;}
.logout{text-align: center;margin-bottom: 10px;}
.btn1{display: inline-block;;padding: 5px 10px;border: 1px solid #fff;font-size: 14px;color: #fff;transition: 0.3s;}
.btn1:hover{border: 1px solid #ff587b;color: #ff587b;}
#footer .f-container p{padding: 10px 0;font-size: 13px;}
.f-link{display: flex;justify-content: center;}
.f-link li{font-size: 13px;margin-right: 10px;}
.f-link li a{color: #abb4ff;text-decoration: underline;transition: 0.1s;}
.f-link li a:hover{color: #ff587b;}
.f-link li:last-child{margin-right: 0;}




/*레이어팝업스타일*/
.elment_popup{
    display: none;
    width: 500px;
    height: 500px;}
.popup-h{padding: 20px;background: #3f4fd6;font-size: 17px;color: #fff;text-align: center;}
.pop-conts{
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 20px;
    overflow: scroll;
}
.pop-conts pre{line-height: 1.3;font-size: 13px;}
.b-close{position: absolute;right: 15px;top: 15px;}
.b-close i{font-size: 24px;color: #fff;}
/*end:레이어팝업스타일*/


#chart-box {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    max-width:600px;
}

/*모바일테이블*/
.m-table{width: 100%;display: none;}
.m-table .li-table{}
.m-table .li-table li{margin: 5px;}
.m-table .li-table li .m-table-t{
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
    background: #3f4fd6;
}
.m-table .li-table li .m-table-container{padding: 10px;text-align: left;background: #fff;font-size: 14px;}
.m-table .li-table li .m-table-container .li-box{display: flex;justify-content: space-between;padding: 5px 0}



/*로그인화면*/
.sub-container-box{width: 406px;padding-top: 100px;/*min-height: 740px;*/margin: 0 auto;}
.sub-title{font-size: 28px;font-family:'NanumSquareB';margin-bottom: 30px;color: #fff;text-align: center;}
.sub-container{width: 406px;margin: 0 auto;background: #fff;padding: 50px 40px;border-radius: 7px;}
.sub-container .login-t{margin-bottom: 40px;text-align: center;}
.sub-container .login-t p{font-size: 18px;font-family:'NanumSquareB';padding-bottom: 8px;}
.sub-container .login-t {font-size: 13px;}
.input-box-1{width: 100%;}
.input-box-1 .input-type-1{width: 100%;}
.input-type-1{height: 40px;border: 1px solid #cccccc;border-radius: 5px;padding: 0 10px;margin-bottom: 5px;}
.chk-box{display: flex;margin: 10px 0;}
.chk-box label{line-height: 18px;font-size: 14px;margin-right: 10px;}

.btn-box{width: 100%;margin-top: 20px;}
.btn-2{width: 100%;display: inline-block;padding: 15px;color: #fff;font-size: 14px;background: #27339b;text-align: center;border-radius: 5px;transition: 0.1s;}
.btn-2:hover{background: #2a3280;}
.li-type-3{display: flex;justify-content: center;margin: 20px 0;}
.li-type-3 li{border-right: 1px solid #cccccc;padding: 0 5px;}
.li-type-3 li:last-child{border-right: none;}
.li-type-3 li a{color: #8a8a8a;font-size: 14px;transition: 0.1s;}
.li-type-3 li a:hover{color: #4d4d4d;}

.chk-box-2{margin: 10px 0;}
.chk-box-2 label{font-size: 14px;line-height: 20px;}
.chk-box-2 span a{color: #e43737;}

.title-3{margin-bottom: 20px;}
.title-3 p{font-size: 18px;font-family:'NanumSquareR';padding-bottom: 10px;border-bottom: 1px solid #000;}

.input-box-3{display: flex;}
.input-box-3 .input-type-1{width: 64%;}
.input-box-3 a{width: 35%;margin-left: 1%;}
.btn-3{background: #787878;border: 1px solid #707070;border-radius: 5px;color: #fff;height: 40px;font-size: 13px;display: flex;align-items: center;justify-content: center;transition: 0.1s;}
.btn-3:hover{background: #6c6c6c;}





/***********************반응형***********************/
@media screen and (max-width:768px){
    .pc-table{display: none;}
    .m-table{display: block;}

#header .h-container{width: 100%;height: auto;justify-content: center;flex-direction: column;padding: 10px;}
#header .h-container .logo{margin: 20px 0;}
#header .h-container .logo-img{max-width: 130px;}
#header .h-container .logo .logo-name{font-size: 18px;}
#header .h-container .user-name{}

.container{width: 100%;padding: 20px;}
.title-box{margin-top: 20px;margin-bottom: 20px;}
.title-box p{font-size: 20px;margin-bottom: 10px;}
.title-box .title{font-size: 28px;}

.li-type-1{padding: 20px;flex-direction: column;}
.li-type-1 li{font-size: 14px;text-align: left;border-right:none;padding: 0;display: flex;padding-bottom: 5px;}
.li-type-1 li:last-child{padding-bottom: 0;}
.li-type-1 li .li-title{padding-bottom: 10px;width: 100px;text-align: left;}

.container-box{margin: 15px 0;padding: 15px;}
.r-title{padding: 20px 0;}
.r-title p{font-size: 20px;}
.r-title .score{font-size: 40px;padding: 10px 0;}
.r-title .rank{font-size: 20px;padding: 10px 20px;color: #fff;}
.result-txt{margin-bottom: 40px;}
.result-txt h5{font-size: 20px;font-family:'NanumSquareB';padding: 20px 0;}
.result-txt p{font-size: 14px;font-family:sans-serif;}

.table-box{padding: 10px;}
.table-box .title2{padding: 20px 0;}
.title2{text-align: center;padding: 20px 0 20px 0;}
.title2 h5{font-size: 20px;}
.li-type-2{padding-top: 8px;font-family:sans-serif;font-size: 14px;}
.table{}
 #footer .f-container{text-align: center;padding: 10px;color: #abb4ff;padding: 20px 0;}   



/*레이어팝업스타일*/
.elment_popup{display: none;width: 90%;margin: 0 auto;}
.popup-h{padding: 20px;background: #3f4fd6;font-size: 17px;color: #fff;text-align: center;}
.pop-conts{
    width: 100%;
    height: 500px;
    background: #fff;
    padding: 20px;
    overflow: scroll;
}
.pop-conts pre{line-height: 1.3;font-size: 13px;}
.b-close{position: absolute;right: 15px;top: 15px;}
.b-close i{font-size: 24px;color: #fff;}
/*end:레이어팝업스타일*/


#chart-box {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    max-width:600px;
}   
    
 /*로그인화면*/
.sub-container-box{width: 100%;padding: 50px 20px 0 20px;/*min-height: 500px;*/}
.sub-title{font-size: 24px;margin-bottom: 20px;}
.sub-container{width: 100%;padding: 40px 30px;}
.sub-container .login-t{margin-bottom:30px;}
.sub-container .login-t p{font-size: 18px;}
.chk-box label{line-height: 22px;font-size: 13px;}
.li-type-3{margin: 10px 0;}

.input-box-3 .input-type-1{width: 60%;}
.input-box-3 a{width: 49%;margin-left: 1%;}
.btn-3{background: #787878;border: 1px solid #707070;border-radius: 5px;color: #fff;height: 40px;font-size: 13px;display: flex;align-items: center;justify-content: center;transition: 0.1s;}
.btn-3:hover{background: #6c6c6c;}   
    
    
    
}/*end:768*/




@media screen and (max-width:375px){
#header .h-container .logo{margin: 10px;}
#header .h-container .logo .logo-name{font-size: 17px;}

.container{width: 100%;padding: 10px;}
.sub-container-box {padding: 30px 20px 0 20px;}
.title-box .title{font-size: 24px;}
.container-box{margin: 15px 0;padding: 20px 10px;}
.r-title .score{font-size: 35px;}

}/*end:375*/