@charset "UTF-8";

.section01 .aa {
    width: 100%;
    text-align: center;
    letter-spacing: -1.44px;
    color: #2A4139;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Medium';
    padding-top: 30px;
}


body{
    background-color: #F4E8D8;

}

header{
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    padding-left: 60px;
    padding-right: 60px;
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
}
header.active{
    transition: 0.5s;
    background-color: #0DA165;
}
header button.left{
    display: flex;
    align-items: center;
}
header button.left .wrap{

}
header div.right{
    display: flex;
    align-items: center;
}
header div.right .wrap{
    display: flex;
    align-items: center;
    position: relative;
}
header div.right .wrap span.icon{
    background: url(/assets/images/main/person_icon.svg) center center no-repeat;
    width: 17px;
    height: 20px;
    background-size: 17px;
    display: inline-block;
    margin-right: 11px;
    /* transition: 0.3s; */
}
header div.right .wrap.active span.icon{
    /* margin-right: 21px; */
    /* transform: scale(1.1); */
}
header div.right .wrap span.text{
    position: relative;
    display: flex;
    transition: 0.3s;
}
header div.right .layer_area{
    position: absolute;
    right: 80px;
    right: -530px;
    top: 78px;
    width: 499px;
    transition: 0.3s ease-in-out;
}
header div.right .layer_area.active{
    right: 18px;
}
header div.right .layer_area .top_tit{
    border: 4px solid #003316;
    background-color: #003316;
    border-radius: 10px;
    width: 208px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -12px;
    left: 25px;
}
header div.right .layer_area .top_tit img{
    width: 137px;
}
header div.right .layer_area .close_btn {
    position: absolute;
    right: -2px;
    bottom: -18px;
}
header div.right .layer_area .close_btn img{
    
}
header div.right .layer_area .text_wrap{
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    padding-top: 75px;
    padding-left: 25px;
    padding-right: 50px;
    padding-bottom: 42px;
}
header div.right .layer_area .text_wrap .info_wrap{
    text-align: left;
}
header div.right .layer_area .text_wrap .info_wrap .layer.one{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header div.right .layer_area .text_wrap .info_wrap .layer.one .area_R button{
    letter-spacing: -1.19px;
    color: #2A4139;
    font-size: 17px;
    font-family: 'SpoqaHanSansNeo-Medium';
    transform: translateY(2px);
    text-decoration: underline;
    /* text-underline-position: under; */
}
header div.right .layer_area .text_wrap .info_wrap .layer.one .name{
    letter-spacing: -1.4px;
    color: #2A4139;
    font-size: 28px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
header div.right .layer_area .text_wrap .info_wrap .layer.one .adr{
    padding-left: 7px;
    letter-spacing: -1.19px;
    color: #2A4139;
    font-size: 17px;
    font-family: 'SpoqaHanSansNeo-Medium';
}
header div.right .layer_area .text_wrap .info_wrap .layer.two{

}
header div.right .layer_area .text_wrap .info_wrap .layer.two .score{
    letter-spacing: 0px;
    color: #F8463A;
    font-size: 28px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
header div.right .layer_area .text_wrap .info_wrap .layer.two .ranking{
    letter-spacing: 0px;
    color: #F8463A;
    font-size: 28px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
header div.right .layer_area .text_wrap .target_wrap{
    display: flex;
    align-items: center;
    padding-top: 13px;
}
header div.right .layer_area .text_wrap .target_wrap .left{
    width: 30px;
}
header div.right .layer_area .text_wrap .target_wrap .left img{
    min-width: 30px;
}
header div.right .layer_area .text_wrap .target_wrap .middle{
    padding-left: 8px;
    padding-right: 6px;
    flex: 1;
}
header div.right .layer_area .text_wrap .target_wrap .middle .percent_bar{
    width: 100%;
    height: 9px;
    border-radius: 25px;
    background-color: #0e1310;
    display: flex;
    align-items: center;
    padding-left: 1px;
    padding-right: 1px;
}
header div.right .layer_area .text_wrap .target_wrap .middle .percent_bar .current_bar{
    width: 64%;
    height: calc(100% - 2px);
    border-radius: 25px;
    background-color: #f8463a;
}
header div.right .layer_area .text_wrap .target_wrap .right{
    letter-spacing: 0px;
    color: #2A4139;
    font-size: 16px;
    font-family: 'SpoqaHanSansNeo-Medium';
}
header div.right .layer_area .text_wrap .percent_wrap{
    border: 1px solid #E1D4C4;
    border-radius: 10px;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ECDECD;
}
header div.right .layer_area .text_wrap .percent_wrap .box{
    display: flex;
    align-items: center;  
}
header div.right .layer_area .text_wrap .percent_wrap .box .left{
    letter-spacing: -1px;
    color: #2A4139;
    font-size: 20px;
    font-family: 'SpoqaHanSansNeo-Bold';
    width: 160px;
}
header div.right .layer_area .text_wrap .percent_wrap .box .left span{
    letter-spacing: 0px;
    color: #2A4139;
    font-size: 15px;
    font-family: 'SpoqaHanSansNeo-Medium';
}
header div.right .layer_area .text_wrap .percent_wrap .box .right{
    width: calc(100% - 160px);
    padding-left: 23px;
}
header div.right .layer_area .text_wrap .percent_wrap .box .right .percent_bar{
    width: calc(100% - 44px);
    height: 7px;
    border-radius: 25px;
    background-color: #0e1310;
    padding-left: 1px;
    padding-right: 1px;
    display: flex;
    align-items: center;
}
header div.right .layer_area .text_wrap .percent_wrap .box.Refuse .right .percent_bar .current_bar{
    width: 52%;
    height: 100%;
    background-color: #9dc73d;
    border-radius: 25px;
    height: calc(100% - 2px);
}
header div.right .layer_area .text_wrap .percent_wrap .box.Repurpose .right .percent_bar .current_bar{
    width: 28%;
    height: 100%;
    background-color: #027f37;
    border-radius: 25px;
    border: 1px solid #0e1310;
}
header div.right .layer_area .text_wrap .percent_wrap .box.Reuse .right .percent_bar .current_bar{
    width: 17%;
    height: 100%;
    background-color: #3f9c47;
    border-radius: 25px;
    border: 1px solid #0e1310;
}
header div.right .layer_area .text_wrap .percent_wrap .box.Reduce .right .percent_bar .current_bar{
    width: 49%;
    height: 100%;
    background-color: #b9865e;
    border-radius: 25px;
    border: 1px solid #0e1310;
}
header div.right .layer_area .text_wrap .percent_wrap .box.Rethink .right .percent_bar .current_bar{
    width: 45%;
    height: 100%;
    background-color: #1677a6;
    border-radius: 25px;
    border: 1px solid #0e1310;
}
header div.right .layer_area .text_wrap .percent_wrap .box.Recycle .right .percent_bar .current_bar{
    width: 45%;
    height: 100%;
    background-color: #ff9d00;
    border-radius: 25px;
    border: 1px solid #0e1310;
}
header div.right .layer_area .text_wrap .percent_wrap .box .right .num{
    width: 53px;
    min-width: 53px;
    letter-spacing: 0px;
    color: #2A4139;
    font-size: 14px;
    font-family: 'SpoqaHanSansNeo-Medium';
    padding-left: 7px;
}
header div.right .layer_area .text_wrap .dotted_line{
    padding-top: 32px;
    width: 100%;
    height: 1px;
    border-bottom: 2px dashed #003316;
}
header div.right .layer_area .text_wrap .total_wrap{
    display: flex;
    padding-top: 24px;
}
header div.right .layer_area .text_wrap .total_wrap .box{
    width: 50%;
    display: flex;
}
header div.right .layer_area .text_wrap .total_wrap .box .left{
    width: 47px;
}
header div.right .layer_area .text_wrap .total_wrap .box .right{
    width: calc(100% - 47px);
    padding-left: 7px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
header div.right .layer_area .text_wrap .total_wrap .box .right .tit{
    letter-spacing: -0.75px;
    color: #2A4139;
    font-size: 15px;
    font-family: 'SpoqaHanSansNeo-Medium';

}
header div.right .layer_area .text_wrap .total_wrap .box .right .num{
    letter-spacing: 0px;
    color: #2A4139;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
/* header div.right .wrap.active span.text{
    transform: scale(1.15);
} */
header div.right .wrap span.text::after{
    content: "";
    position: relative;
    min-width: 20px;
    width: 20px;
    height: 20px;
    background: url(/assets/images/main/arrow_btn.svg) center center no-repeat;
    display: inline-block;
    margin-left: 2px;
    transition: 0.3s;
    transform: rotate(0deg);
}
header div.right .wrap.active span.text::after{
    transform: rotate(180deg);
}
section h2{
    display: flex;
    justify-content: center;
}
section h2 img{
    width: 418px;
}
.section01{
    padding-top: 100px;
    width: 100%;
    height: 643px;
    background-color: #0DA165;
    background:#0DA165 url(/assets/images/main/pattern.png);
}
.section01 .img_wrap{
    width: 100%;
    display: flex;
    justify-content: center;
    /* transform: translateY(50px); */
}
.section02{
    padding-top: 330px;
    padding-bottom: 415px;
    position: relative;
}
.section02 .center_wrap{
    width: 789px;
    margin: 0 auto;
}

.section02 .center_wrap .sub_text01{
    width: 100%;
    text-align: center;
    letter-spacing: -1.44px;
    color: #2A4139;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Medium';
    margin-top: 60px;
}
.section02 .center_wrap .sub_text02{
    width: 100%;
    text-align: center;
    letter-spacing: -1.44px;
    color: #2A4139;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Medium';
    padding-top: 30px;
}
.section02 .center_wrap .sub_text02 span{
    letter-spacing: -1.44px;
    color: #0DA165;
    font-family: 'SpoqaHanSansNeo-Bold';
    font-size: 24px;
}
.section02 .con_box{
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}
.section02 .con_box::before{
    content: "";
    background: url(/assets/images/main/r6.svg) center center no-repeat;
    background-size: 98px;
    width: 98px;
    height: 98px;
    position: absolute;
    top: -45px;
    right: 84px;
}
.section02 .con_box .wrap{
    width: 505px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
}
.section02 .con_box .wrap .left_shape img{
    /* width: 100%;
    height: 100%;
    object-fit: cover; */
    width: 42px;
    min-width: 42px;
}
.section02 .con_box .wrap .right_shape img{
    /* width: 100%;
    height: 100%;
    object-fit: cover; */
    width: 42px;
    min-width: 42px;
}
.section02 .con_box .wrap .text{
    display: flex;
    flex-wrap: wrap;
    padding-left: 22px;
    padding-right: 7.5px;
    justify-content: space-between;
}
.section02 .con_box .wrap .text .box{
    letter-spacing: -1.44px;
    color: #2A4139;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Medium';
    width: 167px;
    margin-top: 9px;
}
.section02 .con_box .wrap .text .box:nth-of-type(2n){
    width: calc(100% - 167px);
    padding-left: 30px;
}
.section02 .con_box .wrap .text .box:nth-of-type(-n+2){
    margin-top: 0px;
}
.section02 .con_box .wrap .text .box > span{
    letter-spacing: 0px;
    color: #2A4139;
    font-size: 18px;
    font-family: 'SpoqaHanSansNeo-Medium';
    margin-left: 1px;
}
.section02 .con_box .wrap .text .box > span > span{
    letter-spacing: 0px;
    color: #0DA165;
    font-size: 24px;
	font-family: 'SpoqaHanSansNeo-Bold';
}
.section02 .bottom_img{
    background: url(/assets/images/main/Globe.svg) center center no-repeat;
    width: 273px;
    height: 333px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}
.section03{
    padding-top: 100px;
    padding-bottom: 135px;
    width: 100%;
    height: 800px;
    background: url(/assets/images/main/section_03_bg.png);
    padding-left: 25px;
    padding-right: 25px;
}
.section03 .center_wrap{
    width: 805px;
    margin: 0 auto;
}
.section03 .center_wrap .con_wrap {
    display: flex;
    margin-top: 100px;
}
.section03 .center_wrap .con_wrap .left{
    width: 377px;
}
.section03 .center_wrap .con_wrap .right{
    width: calc(100% - 377px);
}
.section03 .center_wrap .con_wrap .right .standard{

}
.section03 .center_wrap .con_wrap .right .standard .tit{
    letter-spacing: 0px;
    color: #FFFFFF;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    text-align: right;
    margin-bottom: 25px;
    margin-top: 20px;
}
.section03 .center_wrap .con_wrap .right .standard .box{
    
}
.section03 .center_wrap .con_wrap .right .standard .box .title{
    letter-spacing: -0.75px;
    color: #FFFFFF;
    font-size: 15px;
    font-family: 'SpoqaHanSansNeo-Medium';
    opacity: 0.7;
    text-align: right;
}
.section03 .center_wrap .con_wrap .right .standard .box .text{
    letter-spacing: 0px;
    color: #FFFFFF;
    font-size: 50px;
    font-family: 'SpoqaHanSansNeo-Bold';
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.section03 .center_wrap .con_wrap .right .standard .box .text span{
    letter-spacing: 0px;
    color: #FFFFFF;
    font-size: 50px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.section03 .center_wrap .con_wrap .right .standard .box .text span.odometer-formatting-mark{
    display: inline-block;
    transform: translateY(10px);
}
@media screen and (max-width: 767px){
    .section03 .center_wrap .con_wrap .right .standard .box .text span.odometer-formatting-mark{
        display: inline-block;
        transform: translateY(4px);
    }
}

.odometer{
    letter-spacing: 0px;
    color: #FFFFFF;
    font-size: 50px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.odometer-value{
    letter-spacing: 0px;
    color: #FFFFFF;
    font-size: 50px;
    font-family: 'SpoqaHanSansNeo-Bold'; 
}
.section03 .btn_wrap{
    margin-top: 100px;
    display: flex;
    justify-content: center;
    position: relative;
}
.section03 .btn_wrap .chart_area {
    position: absolute;
    width: 805px;
    height: 480px;
    bottom:100px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}
.section03 .btn_wrap .chart_area.active{
    display: block;
}
.section03 .btn_wrap .chart_area > .chart{
    width: 100%;
    height: 100%;
}
.section03 .btn_wrap .chart_area > .chart .board_img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.section03 .btn_wrap .chart_area > .chart .top_wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    align-items: center;
    padding-left: 85px;
    overflow: auto;
}
.section03 .btn_wrap .chart_area > .top_tit{
    border: 4px solid #003316;
    background-color: #003316;
    border-radius: 10px;
    width: 300px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -28px;
    left: 30px;
}
.section03 .btn_wrap .chart_area > .close_btn{
    position: absolute;
    top: -20px;
    right: -24px;
}
.section03 .btn_wrap > button{
    width: 290px;
    height: 70px;
}

.section03 .btn_wrap > button img{
    
}
.section04{
    
}
.section04 .center_wrap{

}
.section04 .center_wrap > .top{
    width: 100%;
    height: 305px;
    border: 1px solid #0DA165;
    background-color: #0DA165;
    padding-top: 43px;
    display: flex;
    justify-content: center;
}
.section04 .center_wrap > .top h2{
    width: 1183px;
    height: 176px;
    padding-top: 55px;
    padding-bottom: 65px;
    background: url(/assets/images/main/Pollen.svg);
    background-size: contain;
}
.section04 .center_wrap > .bottom{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.section04 .center_wrap > .bottom .tab_wrap{
    margin-top: -80px;
    display: flex;
}
.section04 .center_wrap > .bottom .tab_wrap .tab{
    background-color: transparent;
    width: 430px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0px 0px;
    transition: 0.3s;

    color: #76CEAA;
    letter-spacing: -2.1px;
    font-size: 30px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.section04 .center_wrap > .bottom .tab_wrap .tab.active{
    background-color: #F4E8D8;
    padding-top: 18px;
    color: #2A4139;
    position: relative;
}
.section04 .center_wrap > .bottom .tab_wrap .tab::before{
    transition: 0.3s;
}
.section04 .center_wrap > .bottom .tab_wrap .tab.active::before{
    content: "";
    position: absolute;
    top: 13px;
    right: -24px;
    width: 0;
    height: 0;
    border-bottom: 21px solid #027F37;
    border-top: 46px solid transparent;
    border-left: 16px solid #027F37;
    border-right: 8px solid transparent;
}
.section04 .center_wrap > .bottom .ranking_wrap{
    margin-top: 105px;
    width: 100%;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    display: none;
}
.section04 .center_wrap > .bottom .ranking_wrap.active{
    display: flex;
}
.section04 .center_wrap > .bottom .ranking_wrap .top{
    display: flex;
    justify-content: space-between;
    width: 860px;
    padding-left: 20px;
    padding-right: 20px;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .sub_text04 {
	width: 100%;
	text-align: center;
	letter-spacing: -1.44px;
	color: #2A4139;
	font-size: 24px;
	font-family: 'SpoqaHanSansNeo-Medium';
	padding-top: 30px;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area{
    position: relative;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area img{
    
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area .info{
    position: absolute;
    top: 37.5%;
    left: 50%;
    transform: translateX(-50%);
    color: blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area .info .name{
    letter-spacing: -1.5px;
    font-family: 'SpoqaHanSansNeo-Bold';
    font-size: 30px;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box.one .img_area .info{
    color: #A65C24;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box.two .img_area .info{
    color: #847B75;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box.two .img_area .info .name{
    font-size: 24px;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box.three .img_area .info{
    color: #BE5428;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box.three .img_area .info .name{
    font-size: 24px;
}

.section04 .center_wrap > .bottom .ranking_wrap .top .box.one .img_area .info .adr{
    font-size: 15px;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box.two .img_area .info .adr{
    font-size: 13px;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box.three .img_area .info .adr{
    font-size: 13px;
}

.section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area .info .adr{
    letter-spacing: -0.75px;
    font-size: 15px;
    font-family: 'SpoqaHanSansNeo-Medium';
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box .score_area{
    font-family: 'SpoqaHanSansNeo-Bold';
    letter-spacing: 0px;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box.one .score_area{
    color: #A65C24;
    font-size: 30px;
    margin-top: 14px;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box.two .score_area{
    color: #847B75;
    font-size: 24px;
    margin-top: 11px;
}
.section04 .center_wrap > .bottom .ranking_wrap .top .box.three .score_area{
    color: #BE5428;
    font-size: 24px;
    margin-top: 11px;
}
.section04 .center_wrap > .bottom .ranking_wrap .bottom{
    margin-top: 60px;
    width: 860px;
    padding-bottom: 65px;
}
.section04 .center_wrap > .bottom .ranking_wrap .bottom .box{
    box-shadow: 2px 4px 0px #E5D6C3;
    border: 1px solid #EBDECD;
    border-radius: 10px;
    width: 100%;
    height: 80px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 25px;
    padding-right: 15px;
}
.section04 .center_wrap > .bottom .ranking_wrap .bottom .box:nth-of-type(n+8){
    display: none;
}
.section04 .center_wrap > .bottom .ranking_wrap .bottom .box:first-of-type{
    margin-top: 0px;
}
.section04 .center_wrap > .bottom .ranking_wrap .bottom .box .left{

}
.section04 .center_wrap > .bottom .ranking_wrap .bottom .box .left .num{
    letter-spacing: 0px;
    color: #483932;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    min-width: 25px;
    padding-right: 15px;
    display: inline-block;
}
.section04 .center_wrap > .bottom .ranking_wrap .bottom .box .left .name{
    letter-spacing: -1.2px;
    color: #483932;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.section04 .center_wrap > .bottom .ranking_wrap .bottom .box .right{
    background: transparent linear-gradient(180deg, #E9DBC9 0%, #EFE2D1 100%) 0% 0% no-repeat padding-box;
    border-radius: 800px;
    padding: 6px 20px 8px 24px;
    letter-spacing: 0px;
    color: #483932;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.section04 .btn_reset{
	width:250px;
	height:86px;
	background:url(../../assets/images/main/btn_orange.png) no-repeat;
	color:#fff;
	font-size: 30px;
    font-family: 'SpoqaHanSansNeo-Bold';
	padding-bottom: 14px;
	text-shadow: 0px 1px 0px #333;
}
.section04 .btn_wrap{
    display: flex;
    justify-content: center;
    padding-bottom: 160px;
}
.section04 .btn_wrap button{
    width: 291px;
}


/* 메인버튼 */
.main_button_position {
    position: fixed;
    width: 100%;
    bottom: 35px;
    left: 0px;
    padding-left: 15px;
    padding-right: 15px;
    display: none;
    z-index: 1;
}
.main_button_position .main_button{
    display: flex;
    justify-content: center;
}
.main_button_position .main_button a{
    margin-left: 15px;
}
.main_button_position .main_button a:first-of-type{
    margin-left: 0px;
}


/* footer */
footer{
    padding-top: 115px;
    padding-bottom: 225px;
    background-color: #2A4139;
    display: flex;
    flex-direction: column;
    align-items: center;
}
footer .logo_wrap{
    width: 300px;
}
footer .address{
    margin-top: 25px;
}
footer .address p{
    letter-spacing: -0.8px;
    color: #7A8D87;
    font-size: 16px;
    font-family: 'SpoqaHanSansNeo-Light';
    text-align: center;
}
footer .reserved{
    margin-top: 5px;
}
footer .reserved p{
    letter-spacing: 1.25px;
    color: #7A8D87;
    font-size: 14px;
    font-family: 'SpoqaHanSansNeo-Light';
    text-align: center;
}
footer .sns_wrap{
    margin-top: 40px;
    display: flex;
}
footer .sns_wrap .box{
    margin-left: 21px;
    opacity: 0.3;
}
footer .sns_wrap .box a{
    
}
footer .sns_wrap .box a img{
    width: 45px;
}
footer .sns_wrap .box:nth-of-type(1){
    margin-left: 0px;
}

/* top이동 버튼 */
.TopTobtn {
    position: fixed;
    bottom: 60px;
    right: 60px;
    background-color: #000;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    font-family: 'SpoqaHanSansNeo-Regular';
    font-size: 14px;
    padding-top: 7px;
    cursor: pointer;
    z-index: 2000;
    display: none;
    /* animation: rotateshow 5s ease-in-out infinite; */
}
.TopTobtn::before {
    content: "^";
    position: absolute;
    top: 15px;
    left: 50%;
    width: 11px;
    height: 5px;
    transform: translateX(-50%);
}

@media screen and (max-width: 1024px){
    .section01 {
        height: 505px;
    }
    .section01 .img_wrap img {
        width: 585px;
    }
}

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

    .section02 .center_wrap{
        width: 100%;
    }
    .section03 .center_wrap{
        width: 100%;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top{
        width: 100%;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .bottom{
        width: 100%;
    }
    .section04 .center_wrap > .bottom .tab_wrap .tab{
        width: 200px;
    }
}
@media screen and (max-width: 820px){
    .section03 .btn_wrap .chart_area{
        width: 100%;
        left: 0px;
        transform: translateX(0px);
    }
}
@media screen and (max-width: 767px){
    /* 헤더 */
    header{
        height: 50px;
        padding-left: 15px;
        padding-right: 15px;
    }
    header button.left{
        width: 140px;
    }
    header div.right .wrap span.icon {
        width: 15px;
        height: 18px;
        background-size: 14px;
        margin-right: 7px;
    }
    header div.right .wrap span.text {
        width: 95px;
        padding-right: 15px;
    }
    .section01 .img_wrap img{
        width: 500px;
    }
    section h2 img{
        width: 200px;
    }

    .section01{
        height: 445px;
    }
    .section02{
        padding-top: 205px;
        padding-bottom: 220px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .section02 .center_wrap .sub_text01{
        margin-top: 12px;
        font-size: 15px;
    }
    .section02 .bottom_img {
        width: 185px;
        height: 160px;
        background-size: 130px;
    }
    .section02 .con_box{
        margin-top: 9px;
    }
    .section02 .con_box::before {
        top: -58px;
        right: 11px;
    }
    .section02 .con_box .wrap .text .box{
        font-size: 15px;
    }
    .section02 .center_wrap .sub_text02{
        font-size: 15px;
    }
    .section02 .center_wrap .sub_text02 span{
        font-size: 15px;
    }
    .section02 .con_box .wrap .text .box > span{
        font-size: 15px;
    }
    .section02 .con_box .wrap .text .box > span > span{
        font-size: 17px;
    }
    .section03{
        height: auto;
        padding-top: 55px;
        padding-bottom: 65px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .section03 .center_wrap .con_wrap{
        flex-direction: column;
        margin-top: 50px;
    }
    .section03 .center_wrap .con_wrap .left{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .section03 .center_wrap .con_wrap .left img{
        width: 250px;
    }
    .section03 .center_wrap .con_wrap .right{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .section03 .center_wrap .con_wrap .right .standard .tit{
        text-align: center;
        font-size: 20px;
    }
    .section03 .center_wrap .con_wrap .right .standard .box{
        margin-bottom: 20px;
    }
    .section03 .center_wrap .con_wrap .right .standard .box:last-of-type{
        margin-bottom: 0px;
    }
    .section03 .center_wrap .con_wrap .right .standard .box .title{
        text-align: center;
    }
    .section03 .center_wrap .con_wrap .right .standard .box .text{
        justify-content: center;
        font-size: 25px;
    }
    .section03 .center_wrap .con_wrap .right .standard .box .text span{
        font-size: 25px;
    }
    .odometer-value{
        font-size: 25px;
    }
    .section03 .btn_wrap{
        margin-top: 50px;
    }
    .section03 .btn_wrap > button{
        width: 180px;
        height: auto;
    }
    /* 그래프로 보는 GR 통계 */
    .section03 .btn_wrap .chart_area{
        width: 100%;
        height: 100%;
        border: 4px solid #003316;
        border-radius: 0px;
        background-color: #F4E8D8;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 2;
    }
    .section03 .btn_wrap .chart_area > .chart .board_img{
        display: none;
    }
    .section03 .btn_wrap .chart_area > .chart .top_wrap{
        padding-top: 90px;
        padding-bottom: 60px;
        padding-left: 0px;
        position: relative;
        padding-left: 15px;
        padding-right: 15px;
    }
    .section03 .btn_wrap .chart_area > .chart .top_wrap .left{
        width: 300px;
        margin: 0 auto;
    }
    .section03 .btn_wrap .chart_area > .top_tit{
        width: 215px;
        height: 40px;
        top: 15px;
        left: 15px;
    }
    .section03 .btn_wrap .chart_area > .top_tit > img{
        width: 120px;
    }
    
    .section04 .center_wrap > .bottom .tab_wrap{
        margin-top: -40px;
    }
    .section04 .center_wrap > .bottom .tab_wrap .tab{
        width: 145px;
        height: 40px;
        font-size: 16px;
    }
    .section04 .center_wrap > .bottom .tab_wrap .tab.active{
        padding-top: 6px;
    }
    .section04 .center_wrap > .bottom .tab_wrap .tab.active::before{
        top: 11px;
        right: -21px;
        width: 0;
        height: 0;
        border-bottom: 0px solid #027F37;
        border-top: 29px solid transparent;
        border-left: 14px solid #027F37;
        border-right: 7px solid transparent;
    }
    .section03 .btn_wrap .chart_area > .close_btn{
        top: 16px;
        right: 15px;
        width: 40px;
        height: 40px;
    }
    .section04 .btn_wrap{
        padding-bottom: 62px;
    }
    .section04 .center_wrap > .top{
        height: 155px;
        padding-top: 0px;
    }
    .section04 .center_wrap > .top h2{
        padding-top: 0px;
        padding-bottom: 20px;
        height: auto;
    }
    .section04 .center_wrap > .bottom .ranking_wrap{
        margin-top: 40px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .bottom{
        margin-top: 20px;
        padding-bottom: 50px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .bottom .box .left .num{
        font-size: 16px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .bottom .box .left .name{
        font-size: 16px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .bottom .box .right{
        font-size: 16px;
    }
   
    .section04 .btn_wrap button{
        width: 180px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box{
        margin-bottom: 30px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box:last-of-type{
        /* margin-bottom: 0px; */
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area .info .name{
        font-size: 16px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.two .img_area .info .name{
        font-size: 15px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.three .img_area .info .name{
        font-size: 15px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .bottom .box{
        height: 70px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area{
        width: 80%;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.one .score_area{
        font-size: 18px;
        margin-top: 5px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.two .score_area{
        font-size: 18px;
        margin-top: 5px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.three .score_area{
        font-size: 18px;
        margin-top: 5px;
    }
}
@media screen and (max-width: 660px){
    .section03 .btn_wrap .chart_area > .chart .top_wrap{
        flex-direction: column;
    }
    .section03 .btn_wrap .chart_area > .chart .top_wrap > .left{
        width: 80%;
        margin: 0 auto;
    }
    .section03 .btn_wrap .chart_area > .chart .top_wrap > .right{
        margin-top: 30px;
        width: 100%;
        padding-left: 0px;
    }
    .section03 .btn_wrap .chart_area > .top_tit{
        width: 215px;
        height: 40px;
        top: 15px;
        left: 15px;
    }
    .section03 .btn_wrap .chart_area > .top_tit > img{
        width: 120px;
    }
    .section03 .btn_wrap .chart_area > .chart .top_wrap > .right ul li .left{
        font-size: 15px;
    }
}
@media screen and (max-width: 610px){
    .section01 {
        height: 390px
    }
    .section01 .img_wrap img {
        width: 420px;
    }
    .section02{
        padding-top: 185px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area{
        /* width: 50%; */
    }
}
@media screen and (max-width: 570px){
    .section02 .con_box::before{
        display: none;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top{
        flex-direction: column;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box{
        flex-direction: row;
        align-items: flex-start;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area{
        width: calc(100% - 70px);
        display: flex;
        justify-content: flex-start;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area img{
        width: 50px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area .info{
        position: relative;
        align-items: flex-start;
        top: 0px;
        left: 0px;
        transform: translateX(0px);
        margin-left: 10px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box{
        margin-bottom: 20px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box .score_area{
        min-width: 70px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.one{
        order: 1;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.two{
        order: 2;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.three{
        order: 3;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box .img_area .info .name{
        font-size: 16px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.two .img_area .info .name{
        font-size: 16px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.three .img_area .info .name{
        font-size: 16px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.one .img_area .info .adr{
        font-size: 13px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.one .score_area{
        font-size: 16px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.two .score_area{
        font-size: 16px;
    }
    .section04 .center_wrap > .bottom .ranking_wrap .top .box.three .score_area{
        font-size: 16px;
    }
}
@media screen and (max-width: 500px){
    .section01{
        padding-top: 70px;
        height: 305px;
    }
    .section01 .img_wrap img {
        width: 340px;
    }
    .section02 {
        padding-top: 150px;
    }
   
}
@media screen and (max-width: 480px){
    .section02 .con_box .wrap .left_shape{
        display: none;
    }
    .section02 .con_box .wrap .right_shape{
        display: none;
    }
    .section02 .con_box .wrap .text{
        padding-left: 15px;
        padding-right: 15px;
    }
    .section02 .con_box .wrap .text .box{
        width: 50%;
        text-align: center;
    }
    .section02 .con_box .wrap .text .box:nth-of-type(2n){
        width: 50%;
        padding-left: 0px;
    }
}
@media screen and (max-width: 380px){
    .section01{
        height: 257px;
    }
    .section01 .img_wrap img {
        width: 270px;
    }
    .section02{
        padding-top: 140px;
    }
}
/* 서브페이지 공통 */
.ttl_response {
    font-size:45px;
}
.layout_max{
    width: 850px;
    margin: 0 auto;
    padding-bottom: 160px;
}
.layout_max.w100{
    width: 100%;
    padding-bottom: 0px;
}
.layout_max .page_tit_wrap{
    margin-top: 60px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.layout_max .page_tit_wrap .tit{
    letter-spacing: -2.3px;
    color: #2A4139;
    font-size: 46px;
}
.layout_max .page_tit_wrap .sub{
    letter-spacing: -1.1px;
    color: #2A4139;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Medium';
    margin-top: 20px;
}
.layout_max > .top_area{
    padding-top: 100px;
    width: 100%;
    height: 370px;
    background-color: #0DA165;
    background: #0DA165 url(/assets/images/main/pattern.png);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.layout_max > .top_area .text{
    padding-bottom: 80px;
}
.layout_max > .top_area .text img{
    
}
.layout_max .box_style00{
    border-radius: 10px;
    border: 4px solid #0DA165;
    border-radius: 10px;
    box-shadow: 3px 7px 0px #06633D4D;
    background-color: #F4E8D8;
    position: relative;
    padding: 42px 42px;
    margin-top: 50px;
}
.layout_max .box_style00 .writing{
    border: 1px solid #E1D4C4;
    border-radius: 10px;
    box-shadow: inset 1px 15px 10px #0000000D;
    background: #ECDECD;
    padding: 35px 35px;
    margin-bottom: 20px;
}
.layout_max .box_style00 .writing .day{
    letter-spacing: -0.9px;
    color: #483932;
    font-size: 18px;
    font-family: 'SpoqaHanSansNeo-Bold';
    text-decoration: underline;
}
.layout_max .box_style00 .writing .text{
    letter-spacing: -1.1px;
    color: #483932;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Bold';
    margin-top: 8px;
}
.layout_max .box_style00 .box{
    width: 100%;
    min-height: 76px;
    background-color: #F6EBDC;
    box-shadow: 2px 4px 0px #E5D6C3;
    border: 1px solid #EBDECD;
    border-radius: 10px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 25px;
    position: relative;
}
.layout_max .box_style00 .box:nth-of-type(1){
    margin-top: 0px;
}
.layout_max .box_style00 .box.week{

}
.layout_max .box_style00 .box.week .left{
    display: flex;
    align-items: center;
    letter-spacing: -1.32px;
    color: #2A4139;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Bold';
    position: relative;
    padding-top: 23px;
    padding-bottom: 23px;
}
.layout_max .box_style00 .box.week::before{
    content: "";
    position: absolute;
    width: 77px;
    height: 78px;
    background: url(/assets/images/sub/icon_week.svg) center center no-repeat;
    background-size: 77px;
    top: 0px;
    transform: translateY(-12px);
}
.layout_max .box_style00 .box.week .left::before{
    content: "";
    position: relative;
    width: 92px;
    min-width: 92px;
}
.layout_max .box_style00 .box.week .left span.tit{
    letter-spacing: -1.32px;
    color: #2A4139;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.layout_max .box_style00 .box.week .left span.en{
    letter-spacing: 0px;
    color: #2A4139;
    font-size: 16px;
    font-family: 'SpoqaHanSansNeo-Medium';
}
.layout_max .box_style00 .box.week .left span.en strong{
    letter-spacing: 0px;
    color: #0DA165;
    font-family: 'SpoqaHanSansNeo-Bold';
    font-size: 22px;
}
.layout_max .box_style00 .box.week .left span.day{
    letter-spacing: -0.84px;
    color: #2A4139;
    font-size: 14px;
    font-family: 'SpoqaHanSansNeo-Medium';
    transform: translateY(2px);
    margin-left: 1px;
}
.layout_max .box_style00 .box.week .right{
    display: flex;
    align-items: center;
}
.layout_max .box_style00 .box.week .right span.bonus{
    background: transparent linear-gradient(180deg, #F8EEE0 0%, #D6F5E8 100%) 0% 0% no-repeat padding-box;
    border: 1px solid #0DA165;
    border-radius: 800px;
    padding: 6px 12px;
    display: flex;
    align-items: center;

    letter-spacing: 0px;
    color: #0DA165;
    font-size: 15px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.layout_max .box_style00 .box.week .right span.score{
    letter-spacing: 0px;
    color: #0DA165;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    margin-left: 10px;
}



.layout_max .box_style00 .box.today .left{
    display: flex;
    align-items: center;
    letter-spacing: -1.32px;
    color: #2A4139;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Bold';
    position: relative;
    padding-top: 23px;
    padding-bottom: 23px;
}
.layout_max .box_style00 .box.today .left::before{
    content: "";
    position: relative;
    width: 92px;
    min-width: 92px;
}
.layout_max .box_style00 .box.today::before{
    content: "";
    position: absolute;
    width: 77px;
    height: 78px;
    background: url(/assets/images/sub/icon_today.svg) center center no-repeat;
    background-size: 77px;
    transform: translateY(-10px);
    top: 0px;
}
.layout_max .box_style00 .box.today .right{
    display: flex;
    align-items: center;
}
.layout_max .box_style00 .box.today .right span.bonus{
    background: transparent linear-gradient(180deg, #F8EEE0 0%, #FFE0E0 100%) 0% 0% no-repeat padding-box;
    border: 1px solid #FA4D06;
    border-radius: 800px;
    padding: 6px 12px;
    display: flex;
    align-items: center;

    letter-spacing: 0px;
    color: #FA4D06;
    font-size: 15px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.layout_max .box_style00 .box.today .right span.score{
    letter-spacing: 0px;
    color: #FA4D06;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    margin-left: 10px;
}




.layout_max .box_style01{
    border-radius: 10px;
    border: 4px solid #003316;
    border-radius: 10px;
    box-shadow: 3px 7px 0px #00000078;
    background-color: #F4E8D8;
    position: relative;
    padding: 80px 42px;
    margin-top: 100px;
}
.layout_max .box_style01.week{
    border: 4px solid #0DA165;
    box-shadow: 3px 7px 0px #06633D4D;
    position: relative;
}
.layout_max .box_style01.week::before{
    content: "";
    position: absolute;
    top: -15px;
    left: 68px;
    background: url(/assets/images/sub/icon_week.svg) center center no-repeat;
    background-size: 77px;
    width: 77px;
    height: 78px;
}
.layout_max .box_style01 .tit{
    border: 4px solid #003316;
    border-radius: 10px;
    background-color: #003316;
    width: 188px;
    height: 60px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.layout_max .box_style01.week .tit{
    border: 4px solid #0DA165;
    background: #0DA165
}
.layout_max .box_style01 .box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #EBDECD;
    border-radius: 10px;
    min-height: 76px;
    margin-top: 20px;
    padding: 0px 25px;
    box-shadow: 2px 4px 0px #E5D6C3;
}
.layout_max .box_style01 .box.focussed{
    border: 1px solid #0DA165;
}

.layout_max .box_style01 .box:first-of-type{
    margin-top: 0px;
}
.layout_max .box_style01 .box .left{
    letter-spacing: -1.1px;
    color: #483932;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Bold';
    position: relative;
    display: flex;
    align-items: center;
    width: calc(100% - 120px);
    padding-right: 25px;
    line-height: 30px;
    padding-top: 23px;
    padding-bottom: 23px;
}
.layout_max .box_style01 .box.today{
    position: relative;
}
.layout_max .box_style01 .box.today::before{
    content: "";
    position: absolute;
    display: inline-block;
    background: url(/assets/images/sub/icon_today.svg) center center no-repeat;
    background-size: 77px;
    width: 77px;
    min-width: 77px;
    height: 78px;
    margin-right: 15px;
    top: 0px;
    transform: translateY(-12px);
}
.layout_max .box_style01 .box.today .left::before{
    content: "";
    width: 92px;
    min-width: 92px;
    position: relative;
}
.layout_max .box_style01 .box .right{
    width: 120px;
}
.layout_max .box_style01 .box .right.flex_end{
    display: flex;
    justify-content: flex-end;
}
.layout_max .box_style01 .box .right input{
    border-radius: 800px;
    border: 1px solid transparent;
    background: transparent linear-gradient(180deg, #E9DBC9 0%, #EFE2D1 100%) 0% 0% no-repeat padding-box;
    letter-spacing: 0px;
    color: #483932;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    padding-top: 6px;
    padding-bottom: 8px;
    padding-right: 24px;
    width: 93px;
    text-align: right;
}
.layout_max .box_style01 .box .right input::placeholder{
    letter-spacing: -1.1px;
    color: #483932;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Bold';
    padding-right: 1px;
}
.layout_max .box_style01 .box .right span{
    letter-spacing: -1.1px;
    color: #483932;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.all_chk_wrap{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
label.custom_01{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.layout_max.practice .box_style01 .box .right label.custom_01 input{
    border-radius: 0;  /* iSO 둥근모서리 제거 */
    outline-style: none;  /* 포커스시 발생하는 효과 제거를 원한다면 */
    -webkit-appearance: none;  /* 브라우저별 기본 스타일링 제거 */
    -moz-appearance: none;
    appearance: none;
    display: none;
}
label.custom_01 input{
    border-radius: 0;  /* iSO 둥근모서리 제거 */
    outline-style: none;  /* 포커스시 발생하는 효과 제거를 원한다면 */
    -webkit-appearance: none;  /* 브라우저별 기본 스타일링 제거 */
    -moz-appearance: none;
    appearance: none;
    display: none;
}
label.custom_01 input + span.circle_b{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(/assets/images/sub/chk_b_brown.svg) center center no-repeat;
    background-size: 40px;
}
label.custom_01 input:checked + span.circle_b{
    background: url(/assets/images/sub/chk_b_green.svg) center center no-repeat;

}
.layout_max.practice .all_chk_wrap label .text{
    letter-spacing: -1.1px;
    color: #483932;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Bold';
    margin-left: 13px;
}
/* practice 끝 */
/* participation 시작 */
.layout_max .box_style01.current .layer{
    display: flex;
    justify-content: space-between;
    margin-bottom: 13px;
}
.layout_max .box_style01.current .layer:last-of-type{
    margin-bottom: 0px;
}
.layout_max .box_style01.current .layer .left{
    letter-spacing: -1.1px;
    color: #483932;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.layout_max .box_style01.current .layer .right{
    display: flex;
    letter-spacing: 0px;
    color: #2A4139;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.layout_max .box_style01.current .layer .right span{
    letter-spacing: 0px;
    color: #FA4D06;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
}

.box_style01.chart{

}
.box_style01.chart .top_wrap{
    display: flex;
}
.box_style01.chart .top_wrap .left{
    width: 315px;
}
.box_style01.chart .top_wrap > .right{
    width: calc(100% - 315px);
    padding-left: 70px;
}
.box_style01.chart .top_wrap > .right ul{

}
.box_style01.chart .top_wrap > .right ul li {
    display: flex;
    margin-top: 15px;
}
.box_style01.chart .top_wrap > .right ul li .left{
    letter-spacing: 0px;
    color: #2A4139;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    width: calc(100% - 51px);
    position: relative;
    display: flex;
    align-items: center;
}
.box_style01.chart .top_wrap > .right ul li .left::before{
    content: "";
    position: relative;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 11px;
    border-radius: 50%;
}
.box_style01.chart .top_wrap > .right ul li:nth-of-type(1) .left::before{
    background-color:#027F37
}
.box_style01.chart .top_wrap > .right ul li:nth-of-type(2) .left::before{
    background-color: #9DC73D;
}
.box_style01.chart .top_wrap > .right ul li:nth-of-type(3) .left::before{
    background-color: #1677A6;
}
.box_style01.chart .top_wrap > .right ul li:nth-of-type(4) .left::before{
    background-color: #FF9D00;
}
.box_style01.chart .top_wrap > .right ul li:nth-of-type(5) .left::before{
    background-color: #BD8860;
}
.box_style01.chart .top_wrap > .right ul li:nth-of-type(6) .left::before{
    background-color: #43A74B;
}

.box_style01.chart .top_wrap > .right ul li .left span{
    letter-spacing: 0px;
    color: #2A4139;
    font-size: 18px;
    font-family: 'SpoqaHanSansNeo-Medium';
}
.box_style01.chart .top_wrap > .right ul li .right{
    width: 99px;
    letter-spacing: 0px;
    color: #2A4139;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    text-align: right;
}
.box_style01.chart .top_wrap > .right ul li .right span{
    letter-spacing: 0px;
    color: #FA4D06;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
}
.box_style01.chart .bottom_wrap{
    letter-spacing: 0px;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    display: flex;
    justify-content: center;
    padding-top: 41px;
}
.box_style01.chart .bottom_wrap span{
    letter-spacing: 0px;
    color: #FA4D06;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    padding-left: 5px;
}
/* 공통 버튼 반응형 */
@media screen and (max-width: 767px){
    .main_button_position .main_button a{
        max-width: 157px;
        width: 50%;
    }
    .main_button_position .main_button button{
        max-width: 183px;
        width: 50%;
    }
    header div.right .layer_area{
        padding-left: 10px;
        padding-right: 10px;
    }
    header div.right .layer_area.active{
        right: 0px;
    }
    header div.right .layer_area .top_tit{
        left: 40px;
    }
    header div.right .layer_area .text_wrap{
        padding-left: 40px;

    }
    header div.right .layer_area .text_wrap .dotted_line{
        padding-top: 20px;
    }
}
@media screen and (max-width: 522px){
    header div.right .layer_area.active{
        right: 0px;
        padding-left: 20px;
        padding-right: 20px;
    }
    header div.right .layer_area{
        width: 100%;
    }
    header div.right .layer_area .text_wrap{
        padding-right: 43px;
        padding-left: 40px;
    }
    header div.right .layer_area .bg_img img{
        width: 522px;
    }
    
}
@media screen and (max-width: 490px){
    header div.right .layer_area .text_wrap{
        padding-top: 59px;
    }
    header div.right .layer_area .top_tit{
        top: -8px;
        width: 145px;
        height: 44px;
    }
    header div.right .layer_area .top_tit img{
        width: 100px;
    }
    header div.right .layer_area .text_wrap .info_wrap .layer.one .name{
        font-size: 21px;
    }
    header div.right .layer_area .text_wrap .info_wrap .layer.two .score{
        font-size: 19px;
    }
    header div.right .layer_area .text_wrap .info_wrap .layer.two .ranking{
        font-size: 19px;
    }
    header div.right .layer_area .text_wrap .percent_wrap .box .left{
        font-size: 15px;
    }
    header div.right .layer_area .text_wrap .total_wrap .box .right .num{
        font-size: 16px;
    }
}

@media screen and (max-width: 470px){
    header div.right .layer_area .text_wrap .total_wrap{
        padding-top: 15px;
    }
    header div.right .layer_area .text_wrap .percent_wrap .box{
        flex-direction: column;
        align-items: flex-start;
        margin: 10px 0;
    }
    header div.right .layer_area .text_wrap .percent_wrap .box .left{
        width: 100%;
    }
    header div.right .layer_area .text_wrap .percent_wrap .box .right{
        width: 100%;
        padding-left: 0px;
    }
    header div.right .layer_area{
        background-color: orange;
        border: 4px solid #003316;
        border-radius: 0px;
        background-color: #F4E8D8;
        position: fixed;
        top: 0px;
        width: 100%;
        height: 100%;
        padding-top: 90px;
        overflow: auto;
    }
    header div.right .layer_area.active{
 
    }
    header div.right .layer_area .close_btn{
        top: 24px;
        height: 40px;
        width: 40px;
        right: 15px;
    }
    header div.right .layer_area .top_tit{
        top: 20px;
        width: 145px;
        height: 40px;
        left: 20px;
    }
    header div.right .layer_area .text_wrap {
        padding-top: 0px;
        position: relative;
        padding-left: 0px;
        padding-right: 0px;
    }
    
    header div.right .layer_area .text_wrap .dotted_line{
        padding-top: 20px;
    }
    header div.right .layer_area .text_wrap .target_wrap{
        padding-top: 5px;
    }
    header div.right .layer_area .text_wrap .total_wrap{
        padding-top: 20px;
    }
    
    header div.right .layer_area .text_wrap .total_wrap .box .left{
        width: 55px;
    }
    header div.right .layer_area .text_wrap .total_wrap .box .right .num{
        font-size: 15px;
    }
    header div.right .layer_area .text_wrap .percent_wrap{
        margin-top: 20px;
    }
    header div.right .layer_area .text_wrap .info_wrap .layer.one .name{
        font-size: 22px;
    }
    header div.right .layer_area .bg_img{
        display: none;
    }
}
@media screen and (max-width: 380px){
    header div.right .layer_area .text_wrap{
        padding-top: 0px;
    }
    header div.right .layer_area .text_wrap .total_wrap .box .left{
        width: 40px;
    }
}
@media screen and (max-width: 350px){
    header div.right .layer_area .text_wrap .percent_wrap{
        margin-top: 5px;
    }
    header div.right .layer_area .text_wrap .percent_wrap .box .left{
        font-size: 14px;
    }
    header div.right .layer_area .text_wrap{
        padding-left: 0px;
        padding-right: 0px;
    }
    header div.right .layer_area .text_wrap .target_wrap .middle .percent_bar{
        height: 7px;
    }
    header div.right .layer_area .text_wrap .percent_wrap .box .right .num{
        font-size: 14px;
    }
    header div.right .layer_area .text_wrap .target_wrap .left{
        width: 20px;
    }
    header div.right .layer_area .text_wrap .target_wrap .left img{
        min-width: 20px;
    }
    header div.right .layer_area .text_wrap .target_wrap .right{
        font-size: 15px;
    }

}

/* 서브페이지 공통 반응형 */
@media screen and (max-width: 850px){
    .layout_max{
        width: 100%;
        padding-left: 25px;
        padding-right: 25px;
    }
    .layout_max.w100{
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media screen and (max-width: 767px){
	.info2 .info {font-size:12px !important;}
    .layout_max{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 80px;
    }
    .layout_max.w100{
        padding-left: 0px;
        padding-right: 0px;
    }
    .layout_max > .top_area{
        height: 200px;
    }
    .layout_max > .top_area .text{
        width: 170px;
        display: flex;
        padding-bottom: 70px;
    }
    .layout_max .page_tit_wrap{
        
    }
    .layout_max .page_tit_wrap{
        margin-top: 25px;
        margin-bottom: 0px;
    }
    .layout_max .page_tit_wrap .tit{
        width: 137px;
    }
    .layout_max.practice .box_style01{
        padding: 55px 15px;
    }
    .layout_max .box_style01 .box .left{
        font-size: 15px;
        line-height: 20px;
        padding-right: 0px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .ttl_response {
        font-size:24px;
    }
    
}

/* 실천형황 반응형 */
@media screen and (max-width: 860px){
    .layout_max .box_style01{
        margin-top: 50px;
    }
    .layout_max .box_style01.chart .top_wrap{
        flex-direction: column;
    }
    .layout_max .box_style01.chart .top_wrap .left{
        width: 100%;
    }
    .layout_max .box_style01.chart .top_wrap > .right{
        width: 100%;
        padding-left: 0px;
    }
    .participation .box_style01{
        padding: 55px 30px;
    }
    /* 20230210 */
    .all_chk_wrap{
        
    }
    .all_chk_wrap{

    }
    label.custom_01 input + span.circle_b{
        width: 30px;
        height: 30px;
        background-size: 30px;
    }
    label.custom_01 input:checked + span.circle_b{
        background-size: 30px;
    }
    .layout_max.practice .all_chk_wrap label .text{
        font-size: 17px;
    }
    .layout_max .box_style01 .tit{
        width: 120px;
        height: 43px;
        top: -23px;
    }
    .layout_max .box_style01 .tit img{
        width: 66px;
    }
    .layout_max  .box_style01.chart .top_wrap > .right{
        margin-top: 20px;
    }
    .layout_max  .box_style01.chart .top_wrap > .right ul li .left{
        font-size: 16px;
    }
    .layout_max  .box_style01.chart .top_wrap > .right ul li .right{
        font-size: 16px;
    }
    .box_style01.chart .top_wrap > .right ul li .right span{
        font-size: 16px;
    }
    .box_style01.chart .bottom_wrap{
        font-size: 17px;
    }
    .box_style01.chart .bottom_wrap span{
        font-size: 17px;
    }
    .layout_max .box_style01.current .layer .left{
        font-size: 15px;
    }
    .layout_max .box_style01.current .layer .right{
        font-size: 15px;
    }
    .layout_max .box_style01.current .layer .right span{
        font-size: 15px;
    }
}
@media screen and (max-width: 400px){
    
}
/* * 참여하기 반응형 */
@media screen and (max-width: 767px){
    .layout_max.practice .page_tit_wrap .tit{
        width: 92px;
    }
    .layout_max .page_tit_wrap .sub{
        font-size: 16px;
        margin-top: 0px
    }
    .layout_max .box_style00{
        margin-top: 30px;
        padding: 15px 15px 17px;
    }
    .layout_max .box_style00 .writing{
        padding: 20px 23px;
    }
    .layout_max .box_style00 .writing .day{
        font-size: 15px;
    }
    .layout_max .box_style00 .writing .text{
        font-size: 15px;
    }
    .layout_max .box_style00 .box{
        padding: 0px 10px;
        flex-direction: column;
    }
    .layout_max .box_style00 .box.week{
        padding: 50px 30px;
    }
    .layout_max .box_style00 .box.week::before{
        width: 53px;
        height: 53px;
        background-size: 53px;
        transform: translateY(-7px);
        left: 5px;
    }
    .layout_max .box_style00 .box.week .left{
        width: 100%;
        justify-content: center;
        padding-top: 0px;
        padding-bottom: 15px;
    }
    .layout_max .box_style00 .box.week .left::before{
        display: none;
    }
    .layout_max .box_style00 .box.week .left span.tit{
        font-size: 16px;
    }
    .layout_max .box_style00 .box.week .left span.en strong{
        font-size: 18px;
    }
    .layout_max .box_style00 .box.week .right span.score{
        font-size: 17px;
        min-width: 36px;
    }
    .layout_max .box_style00 .box.week .right span.bonus{
        font-size: 14px;
        min-width: 76px;
    }
    .layout_max .box_style00 .box.today{
        padding: 50px 30px;
    }
    .layout_max .box_style00 .box.today::before{
        width: 53px;
        height: 53px;
        background-size: 53px;
        transform: translateY(-7px);
        left: 5px;
    }
    .layout_max .box_style00 .box.today .left{
        font-size: 16px;
        padding-top: 0px;
        padding-bottom: 15px;
    }
    .layout_max .box_style00 .box.today .left::before{
        display: none;
    }
    .layout_max .box_style00 .box.today .left span.en strong{
        font-size: 18px;
    }
    .layout_max .box_style00 .box.today .right span.score{
        font-size: 17px;
        min-width: 36px;
    }
    .layout_max .box_style00 .box.today .right span.bonus{
        font-size: 14px;
        min-width: 76px;
    }
    .practice .box_style01 .box{
        padding: 0px 15px;
    }
    .layout_max .box_style01 .box{
        min-height: auto;
    }
    .layout_max .box_style01 .box .right{
        width: 90px;
    }
    .layout_max .box_style01 .box .right span{
        font-size: 15px;
    }
    .layout_max .box_style01 .box .right input{
        font-size: 15px;
        width: 70px;
        padding-right: 15px;
    }
    .layout_max .box_style01 .box .right input::placeholder{
        font-size: 15px;
    }
    .layout_max .box_style01.week::before{
        top: -10px;
        left: 20px;
        background-size: 53px;
        width: 53px;
        height: 53px;
    }
    .practice .box_style01 .tit{
        width: 120px;
        height: 43px;
        top: -23px;
    }
    .practice .box_style01 .tit img{
        width: 66px;
    }
    .layout_max .box_style01 .box.today::before{
        top: 2px;
        left: 5px;
        background-size: 53px;
        width: 53px;
        height: 53px;
        margin-right: 0px;
        min-width: auto;
    }
    .layout_max .box_style01 .box.today .left::before {
        content: "";
        width: 47px;
        min-width: 47px;
        position: relative;
    }
}
@media screen and (max-width: 767px){
    .layout_max.practice .all_chk_wrap label .text {
        margin-left: 8px;
    }
}
@media screen and (max-width: 600px){
    .layout_max .box_style01{
        padding: 57px 21px;
    }
}
@media screen and (max-width: 485px){
    label.custom_01 input + span.circle_b {
        width: 25px;
        height: 25px;
        background-size: 25px;
    }
    label.custom_01 input:checked + span.circle_b {
        background-size: 25px;
    }
}
@media screen and (max-width: 440px){
    .layout_max.practice .box_style01.first_box {
        margin-top: 14px;
    }
    .layout_max.practice .all_chk_wrap label .text{
        font-size: 15px;
        margin-left: 4px;
    }
}
@media screen and (max-width: 390px){
    .layout_max .box_style01 .box{
        padding: 0px 15px;
    }
}
@media screen and (max-width: 360px){
    .layout_max.practice .all_chk_wrap label .text{
        font-size: 14px;
    }
    .layout_max .box_style01 .box .left{
        width: calc(100% - 80px);
        padding-right: 20px;
    }
    .layout_max .box_style01 .box .right{
        width: 80px;
    }
    .layout_max .box_style01 .box .right input{
        width: 60px;
    }

}
/* footer 반응형 */
@media screen and (max-width: 767px){
    footer .address p{
        font-size: 13px;
    }
    footer .reserved p{
        font-size: 13px;
    }
    footer .logo_wrap{
        width: 220px;
    }
    footer .sns_wrap .box a img{
        width: 35px;
    }
}
@media screen and (max-width: 560px){
    footer{
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 40px;
        padding-bottom: 130px
    }
}
/* 탑버튼 반응형 */
@media screen and (max-width: 1024px){
    .TopTobtn{
        display: none !important;
    }
}


/* 본당선택 팝업 */
.selectPopup{
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 440px;
    max-width: 440px;
    width: 440px;
    min-height: 235px;
    height: auto;
    background-color: #F4E8D8;
    box-shadow: 3px 7px 0px #00000078;
    border: 4px solid #003316;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 61px;
    padding-bottom: 55px;
    z-index: 11;
    opacity: 0;
    transition: 0.45s ease-in-out;
    /* opacity: 0; */
}
.selectPopup.active{
    top: 50%;
    opacity: 1;
    display: flex;
}
.selectPopup .tit_box{
    border: 4px solid #003316;
    border-radius: 10px;
    background-color: #003316;
    width: 188px;
    height: 60px;
    position: absolute;
    top: -31px;
    left: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.selectPopup .close_btn{
    top: -22px;
    right: -31px;
    position: absolute;
    cursor: pointer;
}
.selectPopup .con {
    width: 100%;
}
.selectPopup .con .text{
    letter-spacing: -1.26px;
    color: #2A4139;
    font-family: 'SpoqaHanSansNeo-Medium';
    font-size: 18px;
    text-align: center;
}
.selectPopup .con .text span{
    letter-spacing: -1.26px;
    color: #FA4D06;
    font-family: 'SpoqaHanSansNeo-Medium';
    font-size: 18px;
}
.selectPopup .con select{
    margin-top: 20px;
    width: 100%;
    height: 60px;
    background: transparent linear-gradient(180deg, #E9DBC9 0%, #EFE2D1 100%) 0% 0% no-repeat padding-box;
    border-radius: 800px;
    letter-spacing: -1.68px;
    color: #483932;
    font-size: 24px;
    line-height: 37px;
    font-family: 'SpoqaHanSansNeo-Bold';
    padding: 0px 35px;
}
.selectPopup .con select option{
    letter-spacing: -1.68px;
    color: #483932;
    font-size: 24px;
    line-height: 37px;
}
.black_bg{
    width: 100%;
    height: 100%;
    background-color: #00000080;
    position: fixed;
    top: 0px;
    left: 0px;
    display: block;
    z-index: 10;
    display: none;
}
.black_bg.active{
    display: none;
}

/* ------------------------------------------------------- */
.selectBox2 * { 
    box-sizing: border-box; 
}
.selectBox2 {
    margin-top: 20px;
    position: relative;
    width: 100%;
    border-radius: 18px;
    background: transparent linear-gradient(180deg, #E9DBC9 0%, #EFE2D1 100%) 0% 0% no-repeat padding-box;
    cursor: pointer;
}


.selectBox2 .label {
    display: flex;
    align-items: center;
    width: inherit;
    height: 60px;
    border: 0 none;
    outline: 0 none;
    padding-left: 17px;
    background: transparent;
    cursor: pointer;
    letter-spacing: -1.68px;
    color: #483932;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    position: relative;
}
.selectBox2 .label::before{
    content: "";
    position: absolute;
    background: url(/assets/images/main/arrow_btn_green.svg) center center no-repeat;
    background-size: 40px;
    width: 40px;
    height: 40px;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    transition: 0.3s;
}
.selectBox2.active .label::before{
    content: "";
    position: absolute;
    background: url(/assets/images/main/arrow_btn_green.svg) center center no-repeat;
    background-size: 40px;
    width: 40px;
    height: 40px;
    top: 50%;
    right: 12px;
    transform: translateY(-50%) rotate(180deg);
}

.selectBox2 .optionList {
  position: relative; 
  top: 0px;
  left: 0;
  width: 100%;
  color: #fff;
  list-style-type: none;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  max-height: 0;
  transition: .3s ease-in;
}

.selectBox2 .optionList::-webkit-scrollbar {
    width: 6px;
}
.selectBox2 .optionList::-webkit-scrollbar-track {
    background: transparent;
}
.selectBox2 .optionList::-webkit-scrollbar-thumb {
    background: #303030;
    border-radius: 45px;
}
.selectBox2 .optionList::-webkit-scrollbar-thumb:hover {
    background: #303030;
}

.selectBox2.active .optionList {
  max-height: 500px;
  overflow-y: auto;
}

.selectBox2 .optionItem {
    height: 50px;
    padding: 5px 15px 5px 17px;
    transition: .1s;
    letter-spacing: -1.68px;
    color: #483932;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Bold';
    display: flex;
    align-items: center;
}

.selectBox2 .optionItem:hover {
    background-color: #EFE3D1;
}

.selectBox2 .optionItem:last-child {
    border-bottom: 0 none;
}
.comfirm_btn{
    width: 100%;
    height: 60px;
    background-color: #0DA165;
    margin-top: 20px;
    color: #fff;
    border-radius: 18px;
    font-size: 24px;
    font-family: 'SpoqaHanSansNeo-Medium';
    letter-spacing: -1.68px;
}
@media screen and (max-width: 767px){
    /* .selectPopup{
        top: auto;
        bottom: 20%;
    }
    .selectPopup.active{
        top: auto;
        bottom: 20%;
    } */
    .selectBox2.active .optionList{
        max-height: 250px;
    }
}
@media screen and (max-width: 530px){
    .selectPopup{
        min-width: 380px;
        width: 380px;
    }
    .selectPopup .close_btn{
        right: 37px;
    }
    .selectBox2 .label{
        font-size: 17px;
    }
    .selectBox2 .optionItem{
        font-size: 17px;
    }
    .selectPopup .con .text{
        font-size: 15px;
    }
    .selectPopup .con .text span{
        font-size: 15px;
    }
    .comfirm_btn{
        height: 50px;
        font-size: 17px;
    }
    .selectPopup .tit_box{
        width: 140px;
    }
    .selectPopup .tit_box img{
        width: 78px;
    }
}
@media screen and (max-width: 425px){
    .selectPopup{
        min-width: 350px;
        width: 350px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .selectPopup .close_btn {
        right: 24px;
    }
}
@media screen and (max-width: 375px){
    .selectPopup{
        min-width: 315px;
        width: 315px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .selectPopup .tit_box{
        width: 120px;
        height: 50px;
        left: 15px;
        top: -27px;
    }
    .selectPopup .tit_box img{
        width: 75px;
    }
    .selectPopup .close_btn{
        right: 19px;
    }
    .selectPopup .close_btn img{
        width: 50px;
    }
    .selectPopup .con .text{
        font-size: 14px;
    }
    .selectPopup .con .text span{
        font-size: 14px;
    }
}


/* 20230324 알림팝업 */
.notify_banner{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 445px;
    max-width: 440px;
    width: 445px;
    height: 533px;
    min-height: 533px;
    height: auto;
    background-color: #F4E8D8;
    box-shadow: 3px 7px 0px #00000078;
    border: 4px solid #003316;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 42px;
    padding-right: 42px;
    padding-top: 44px;
    padding-bottom: 44px;
    z-index: 11;
    display: none;
    /* transition: 0.45s ease-in-out; */
}
.notify_banner .top_text{
    width: 100%;
    margin-bottom: 6px;
}
.notify_banner .top_text > img{

}
.notify_banner .mid_text{

}
.notify_banner .mid_text{

}
.notify_banner .mid_text .section{
    margin-top: 30px;
    font-size: 18px;
    font-family: 'SpoqaHanSansNeo-Regular';
    line-height: 34px;
}
.notify_banner .mid_text .section .green_line{
    letter-spacing: -1.26px;
    color: #0DA165;
    font-size: 18px;
    font-family: 'SpoqaHanSansNeo-Medium';
    text-decoration: underline;
}
.notify_banner .mid_text .section .orange_line{
    letter-spacing: -1.26px;
    color: #FA4D06;
    font-size: 18px;
    font-family: 'SpoqaHanSansNeo-Medium';
}
.notify_banner .bottom_text{
    margin-top: 50px; 
}
.notify_banner .bottom_text a{
    font-size: 18px;
    font-family: 'SpoqaHanSansNeo-Medium';
    letter-spacing: -1.26px;
    color: #1677A6;
    display: flex;
    align-items: center;
}
.notify_banner .bottom_text a i{
    display: inline-block;
    background: url(/assets/images/main/icon_line_move.svg) center center no-repeat;
    background-size: 24px;
    width: 24px;
    height: 17px;
    margin-left: 4px;
}
.notify_banner .close_btn{
    top: -22px;
    right: -31px;
    position: absolute;
    cursor: pointer;
}
@media screen and (max-width: 550px){
    .notify_banner{
        max-width: 360px;
        min-width: 360px;
        min-height: auto;
    }
    .notify_banner .mid_text .section br{
        display: none;
    }
    .notify_banner .mid_text .section{
        font-size: 15px;
        line-height: 27px;
        margin-top: 10px;
    }
    .notify_banner .mid_text .section .green_line{
        font-size: 15px;
    }
    .notify_banner .mid_text .section .orange_line{
        font-size: 15px;
    }
    .notify_banner .bottom_text{
        margin-top: 25px;
    }
    .notify_banner .bottom_text a{
        font-size: 15px;
    }
    .notify_banner{
        padding: 35px;
    }
    .notify_banner .top_text{
        margin-bottom: 25px;
    }
    .notify_banner .top_text > img{
        width: 225px;
    }
    .notify_banner .close_btn{
        top: -19px;
        right: -24px;
    }
    .notify_banner .close_btn img{
        width: 45px;
    }
}
@media screen and (max-width: 410px){
    .notify_banner {
        padding: 40px 35px;
    }
    .notify_banner .top_text{
        margin-bottom: 15px;
    }
    .notify_banner .top_text > img{
        width: 200px;
    }
    .notify_banner{
        max-width: 330px;
        min-width: 330px;
        min-height: auto;
    }
    .notify_banner{
        padding: 30px 25px;
    }
}
@media screen and (max-width: 375px){
    .notify_banner{
        max-width: 290px;
        min-width: 290px;
    }
}
/* 20230324 알림팝업 end */

/* 20230517 데이터피커 */
.date_range{
    height: 60px;
    display: flex;
}
.date_range .input_wrap{
    flex: 1;
    display: flex;
}
.date_range .input_wrap input{
    box-shadow: inset 1px 8px 7px #0000000D;
    background-color: #ECDECD;
    border: 1px solid #E1D4C4;
    border-radius: 10px;
    height: 60px;
    padding: 17px 20px 16px;
    flex: 1 1 0;
    letter-spacing: 0px;
    color: #483932;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Bold';
    box-sizing: border-box;
}
.date_range .input_wrap span{
    flex-basis: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}
.date_range > button{
    flex-basis: 120px;
    height: 60px;
    background-color: green;
    border: 4px solid #003316;
    border-radius: 10px;
    background-color: #003316;
    letter-spacing: -1.1px;
    color: #FFFFFF;
    font-size: 22px;
    font-family: 'SpoqaHanSansNeo-Medium';
    margin-left: 10px;
}

@media screen and (max-width: 880px){
    .date_range .input_wrap{
        flex-wrap: wrap;
    }
    .date_range{
        flex-direction: column;
        height: auto;
    }
    .date_range > button{
        margin-top: 9px;
        margin-left: 0px;
        flex-basis: auto;
        height: 50px;
        font-size: 19px;
        letter-spacing: -0.7px;
    }
    .date_range .input_wrap span{
        flex: auto;
        width: 4%;
        height: 45px;
    }
    .date_range .input_wrap input{
        flex: auto;
        width: 48%;
        height: 45px;
        font-size: 15px;
    }
}
@media screen and (max-width: 767px){
    .date_range{
        margin-top: 15px;
        margin-bottom: 55px;
    }
    .date_range > button {
        height: 45px;
        font-size: 16px;
    }
}
@media screen and (max-width: 405px){
    .date_range > button{
        height: 45px;
        font-size: 15px;
    }
}