
@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BebasKai';
    src: url('/font/BebasKai.ttf');
    font-weight: normal;
    font-style: normal;
}


.bullet_main_banner {
    position: absolute;
}
.bullet_main_banner div, .bullet_main_banner div:hover, .bullet_main_banner .av {
    position: absolute;
    width: 19px;
    height: 19px;
    text-align: center;
    line-height: 19px;
    color: white;
    font-size: 12px;
    background: url(/img/slider/b_05.png) no-repeat;
    overflow: hidden;
    cursor: pointer;
}
.bullet_main_banner div { background-position: -5px -5px; }
.bullet_main_banner div:hover, .bullet_main_banner .av:hover { background-position: -35px -5px; }
.bullet_main_banner .av { background-position: -65px -5px; }
.bullet_main_banner .dn, .bullet_main_banner .dn:hover { background-position: -95px -5px; }


.arrowL_main_banner, .arrowR_main_banner {
	display: block;
	position: absolute;
	/* size of arrow element */
	width: 55px;
	height: 55px;
	cursor: pointer;
	background: url(/img/slider/a06.png) center center no-repeat;
	overflow: hidden;
}
.arrowL_main_banner { background-position: -3px -33px; }
.arrowR_main_banner { background-position: -63px -33px; }
.arrowL_main_banner:hover { background-position: -123px -33px; }
.arrowR_main_banner:hover { background-position: -183px -33px; }
.arrowL_main_banner.arrowL_main_bannerdn { background-position: -243px -33px; }
.arrowR_main_banner.arrowR_main_bannerdn { background-position: -303px -33px; }

.banner_main{display: flex;justify-content: space-evenly;align-items: center;width:100%;min-width:1400px;height: 510px;background: url(./img/index/bg_banner.png) no-repeat;background-size: cover;padding: 0 24px;background-position: 0 50%;pointer-events: none; -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.banner_main >img{width:15%;object-fit: contain;}
.inner_banner {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inner_banner > div{
    position:relative;
}
.round_banner{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;align-items: center;width: 123px;height: 123px;border: 3px solid #76c082;border-radius: 50%;background: #fff;display: flex;align-items: center;filter: drop-shadow(13px 13px 0px #00000021);}
.count_up{
    filter: drop-shadow(13px 13px 0px #00000021);
}
.l_banner{width:30%;display: inline-block;font-family: "Noto Sans KR", sans-serif; margin-top: 30px;}
.l_banner > div{width:561px;}
.boldRed{color:#c00000;font-weight:bold;font-size: 40px;} 
.l_banner p:nth-of-type(1){font-size: 45px;font-weight: 500;letter-spacing: -5px;}
.l_banner p:nth-of-type(2){font-size: 41px;font-weight: 700;}
.l_banner img{width:90%;object-fit: contain;}
.l_banner .blink_txt{animation: blink 2s infinite;font-weight: bold;}
.blink_txt_box{ width: 100%; height: 50px; line-height: 27px !important; font-size: 25px;text-align: center;background:var(--main);color: #fff;font-weight: bold;padding: 10px; letter-spacing: -1px;}

.l_b_sub_txt{font-size:30px !important; line-height: 30px !important; letter-spacing: -1.5px; color:#000;}
.l_b_main_txt{font-size:43px !important; letter-spacing: -3px; color:#000; position: relative; display: inline-block;}
.l_b_main_txt span{font-weight:bold; color: #ff0000; }
.l_b_sub_txt span:nth-of-type(1){font-size:43px;}
.l_b_sub_txt span:nth-of-type(2){font-size:43px;}
.l_banner div .l_b_ltxt{color:#000;font-size:26px;}
.l_banner > div{width: 100%; text-align: left;}

.mainColor{color:var(--main);}

.r_banner{text-align: right;transform:translate(-5%);width:50%;}
.r_banner ul{display: flex;justify-content: center;align-items: center;list-style:none;text-align: center;width:100%;position:relative;}
.r_banner li{
    width: 225px;
    background: #fff;
    padding: 2% 0;
    margin: 1%;
    height: 263px;
    box-shadow: 3px 3px 7px #0003;
}

.r_banner li h4{margin-bottom: 5px;font-weight: bold;color: #000;padding: 9px 13px;border-radius: 20px;font-size: 20px;width: 100%;font-family: "Noto Sans KR", sans-serif;}
.r_banner li p{margin: 10px 0 20px 0;
    font-weight: 800;
    font-family: 'Noto Sans KR';
}
.r_banner li p span{font-size: 30px;color:red;font-weight:800;font-family: 'Noto Sans KR';}
.r_banner li:nth-of-type(3) p span, 
.r_banner li:nth-of-type(4) p span {color: blue;}
#date_txt{position: absolute;top: 50%;left: 50%;font-size: 18.5px;color: #000;font-family: 'Noto Sans KR';font-weight: 800;transform: translate(-50%, -50%);text-align: center;}

.container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}

.counterbox-container{
    position:relative;
}
.container .number{
    position:absolute;
    bottom:30px;
    left:30px;
    font-family: Noto sans KR;
}
.container .number h4{
    font-size:20px;
    font-weight:bold;
}
.container .number p{
    font-size:24px;
    font-weight:500;
    color:#000;
}
.value{
    font-family:BebasKai;
    font-size:60px;
    color:#ff6c00;
}