@charset "UTF-8";

@font-face {
	font-family: 'gmarketSans';
	font-weight: 300;
	font-display: swap;
	src: local('GmarketSansTTFLight');
    src: url('../fonts/GmarketSansTTFLight.woff2') format('woff2'),
         url('../fonts/GmarketSansTTFLight.woff') format('woff'),
         url('../fonts/GmarketSansTTFLight.ttf') format('truetype');
}
@font-face {
	font-family: 'gmarketSans';
	font-weight: 400;
	font-display: swap;
	src: local('GmarketSansTTFMedium');
    src: url('../fonts/GmarketSansTTFMedium.woff2') format('woff2'),
         url('../fonts/GmarketSansTTFMedium.woff') format('woff'),
         url('../fonts/GmarketSansTTFMedium.ttf') format('truetype');
}
@font-face {
	font-family: 'gmarketSans';
	font-weight: 700;
	font-display: swap;
	src: local('GmarketSansTTFBold');
    src: url('../fonts/GmarketSansTTFBold.woff2') format('woff2'),
         url('../fonts/GmarketSansTTFBold.woff') format('woff'),
         url('../fonts/GmarketSansTTFBold.ttf') format('truetype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular');
    src: url('../fonts/Pretendard-Regular.woff2') format('woff2'),
         url('../fonts/Pretendard-Regular.woff') format('woff'),
         url('../fonts/Pretendard-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard SemiBold');
    src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2'),
         url('../fonts/Pretendard-SemiBold.woff') format('woff'),
         url('../fonts/Pretendard-SemiBold.otf') format('opentype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold');
    src: url('../fonts/Pretendard-Bold.woff2') format('woff2'),
         url('../fonts/Pretendard-Bold.woff') format('woff'),
         url('../fonts/Pretendard-Bold.otf') format('opentype');
}


/* layout */
* {font-family: 'Pretendard';}
.ff-pretendard {font-family: 'Pretendard';}
.ff-gmarketSans {font-family: 'gmarketSans';}

@media screen and (min-width:1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100%;
    }
}

@media screen and (min-width:1510px) { 
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1450px;
    }
}

@media screen and (min-width:992px) {
    .header-fixed .wrapper {padding-top: 120px;}
}

/* header */
#kt_header.header .menu {max-height: calc(100% - 100px); border-radius: 0; overflow-y: auto;}
#kt_header.header .menu-item .menu-dep2 {border-left: 1px solid var(--bs-gray-300);}
#kt_header.header .util-menu .btn {display: inline-flex; align-items: center; padding: calc(.75rem + 1px) calc(.8rem + 1px); border-radius: 0; font-size: .9rem; line-height: 1;}

@media screen and (min-width:576px) {
    /*#kt_header.header .util-menu .btn {padding: calc(.85rem + 1px) calc(1.1rem + 1px); border-radius: .7rem; font-size: 1rem;}*/
}

@media screen and (min-width:992px) {
    .header {height: 120px; padding-top: .4rem; justify-content: flex-start; overflow: hidden; }
    /*#kt_header.header .util-menu .btn {padding: calc(1rem + 1px) calc(1.5rem + 1px); border-radius: .9rem; font-size: 1.1rem;}*/
    .header-cate-area .btn.btn-icon {height: auto; color: #3f4254 !important;}
    .header-cate-area .btn.btn-icon.btn-cate .btn-text {position: relative; top: 2px; padding-left:5px; padding-right: 5px; font-size: 17px;} /* 20220619 수정 */
    /*.header-cate-area .btn.btn-icon.btn-cate .btn-text:after {content: ""; display: block; position: absolute; right: 0; top: 50%; margin-top: -5px; border-top: 7px solid #3f4254; border-left: 6px solid transparent; border-right: 6px solid transparent;}*/
    .header-cate-area .btn.btn-icon.btn-cate:active, .header-cate-area .btn-cate:hover {color: #3f4254;}
    .btn.btn-active-color-primary.show .svg-icon,
    .btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon, 
    .btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon {color: #3f4254;} /* 20220619 추가 */
    .header-cate-area .menu-list a {padding: .5rem 1rem;}
}

@media screen and (min-width:1510px) {
    .container-xxl .aside-toggle {
        position: static;
        left: 0;
        top: 0;
        transform: translateY(0);
        margin: 0;
    }
}

/* footer */
#kt_footer.footer {border-top: 1px solid #f2f2f2;}
#kt_footer.footer .addr span {display: inline-block;}
#kt_footer.footer .addr span + span {margin-left: 1rem;}
#kt_footer.footer .addr .bar {display: inline-block; margin: 0 .3rem; vertical-align: 0;}
#kt_footer.footer .addr .bar:before {content: ""; display: block; position: relative; top: 1px; width: 1px; height: .7rem; background: var(--bs-gray-300);}

/* main */
.visual-wrap {padding: 4rem 1.5rem; background: #2e5855;}
.vis-text-area {color: #ffd966; font-size: 4vw; text-align: center;}
.vis-char-area {height: 300px;}
.vis-char-area img {width: auto; max-width: 100%; height: 100%;}

.notice-area .card-body li {border-bottom: 1px dotted #e4e6ef;}
.notice-area .card-body li a {padding: .8rem 0;}

.floationg-area {position: fixed; bottom: 3rem; right: 2rem;}
.floationg-area .btn_chennel_talk {width: 100%; height: 7rem; border-radius: 100%;  color: #fff; border: 0;}

.font-14px {font-size:14px;}
@media screen and (min-width:768px) {
    .vis-text-area {font-size: 2.2rem;}
}

@media screen and (min-width:992px) {
    .visual-wrap [class^=vis-] {width: 33.3%;}
    .visual-wrap [class^=vis-] img {max-width: 100%;}
    .vis-text-area {font-size: 1.6rem;}
}

.table-layout-fixed {table-layout: fixed;}
.table-row-bordered-bottom tbody td,
.table-row-bordered-bottom tbody tr:last-child td {border-bottom: 1px solid #eff2f5 !important;}

/* 20220622 추가 */
.certify-form .form-control {padding-right: 5rem;}
.certify-form .timer {display: block; min-height: calc(1.5em + 1.65rem + 4px); top: 0; right: 1.5rem; line-height: calc(1.5em + 1.65rem + 4px);}

.score-box .desc-box .con {position: relative;}
.score-box .desc-box .con + .con {margin-left: 1rem; padding-left: 1rem;}
.score-box .desc-box .con + .con:before {content: ""; display: block; position: absolute; left: 0; top: 50%; width: 1px; height: .8rem; margin-top: calc(-.8rem / 2); background: #bbb;}

.graph-caption [class^=bar-] {display: inline-block; position: relative; padding-left: 20px; margin-left: 10px;}
.graph-caption [class^=bar-]:before {content: ""; display: block; position: absolute; left: 0; top: calc(50% - 3px); width: 12px; height: 6px;}
.graph-caption .bar-gray:before {background: #7e8299;}
.graph-caption .bar-black:before {background: #333;}
.graph-caption .bar-red:before {background: #f1416c;}
.graph-caption .bar-blue:before {background: #0f9ff2;}
/* 20220703 추가 */
.graph-top-info [class*=unit-] {margin-left: 15px; padding-left: 20px;}
.graph-top-info [class*=unit-]:before {content: ""; display: block; position: absolute; left: 0; top: 50%; width: 12px; height: 6px; margin-top: -3px;}
.graph-top-info .unit-averge:before {background: #ccc;}
.graph-top-info .unit-top:before {background: #000;}
.graph-top-info .unit-my:before {background: #f00;}
.graph-top-info .unit-blue:before { background: #00f;}
.grade-graph-wrap .y-axis {width: 60px; padding-top: 180px; padding-bottom: 40px; z-index: 2;}
.grade-graph-wrap .y-axis > span {display: block; position: relative; top: -9px; height: 40px; font-size: 2rem;}

.grade-graph-wrap .graph-area {margin-top: 180px; margin-bottom: 40px; background-image: linear-gradient(#e1e1e1 1px, rgba(0,0,0,0) 1px); background-position: 0 0; background-size: 40px 40px; z-index: 1;}
.grade-graph-wrap .round {width: 80px;}
.grade-graph-wrap .bloon-box {left: 10px; right: 10px; top: -165px; border: 1px solid #e1e1e1;}
.grade-graph-wrap .bloon-box:after {content: ""; display: block; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; margin: -5px 0 0 -6px; border-left: 1px solid #e1e1e1; border-top: 1px solid #e1e1e1; background: #fff; transform: rotate(225deg);}
.grade-graph-wrap .date {bottom: -45px;}
.grade-graph-wrap .grade-top,
.grade-graph-wrap .grade-my {left: 50%; width: 20px; height: 6px; margin-left: -10px; margin-top: 6px; z-index: 2;}
.grade-graph-wrap .grade-blue {left: 50%; width: 20px; height: 6px; margin-left: -10px; margin-top: 6px; z-index: 2;}
.grade-graph-wrap .grade-top {background: #000;}
.grade-graph-wrap .grade-my {background: #f00;}
.grade-graph-wrap .grade-blue {background: #0f9ff2;}
.grade-graph-wrap .grade-average {left: 50%; bottom: 0; width: 20px; margin-left: -10px; background: #ccc; z-index: 1;}


/* 20220707 */
.grade-graph-wrap .grade-bar-left {left: 15px; bottom: 0; width: 20px; background: #ccc; z-index: 1;}
.grade-graph-wrap .grade-bar-right {right: 24px; bottom: 0; width: 20px; background: #ccc; z-index: 1;}

/* 20220709 */
.header-cate-area .menu-list a {
    padding: .5rem;
}
@media (max-width:991.98px) {
    .header-tablet-and-mobile-fixed .wrapper {
        padding-top: 90px;
    }
}
@media screen and (max-width: 991.98px) {
    .header {
        height: 90px;
    }
}

.page-item.active .page-link { background-color: #181c32;}
.menu-state-bg-light-dark .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    transition: color .2s ease,background-color .2s ease;
    background-color: rgb(236 239 241);
    color: #000;
}
.page-item:hover:not(.offset) .page-link { color: #7e8299;}

/* 20220723 */
.grade-graph-wrap .grade-bar-left,
.grade-graph-wrap .grade-bar-right {left: 30px; right: 30px; width: auto;}
.grade-graph-wrap .grade-bar-left { background: rgba(255,0,0,.2);}