@charset "utf-8"; 
.celebrate-wrap .celebrate-header{background: url(../images/main_background.jpg) no-repeat center center; padding: 177px 0 80px;}
.celebrate-wrap .celebrate-header-text,
.celebrate-wrap .celebrate-header-button,
.celebrate-wrap ._fnctWrap > .celebrate-content{max-width: 1440px; margin: 0 auto;}
.celebrate-wrap .celebrate-header-text{text-align: center;}
.celebrate-wrap .celebrate-header-text > span{font-size: 20px; font-family: "ppr"; color: #003876;}
.celebrate-wrap .celebrate-header-text h1{font-size: 45px; font-family: "ppr"; color: #23262f}
.celebrate-wrap .celebrate-header-text h1 span{font-family: "pps"; color: #0060ff;}
.celebrate-wrap .celebrate-header-button{margin-top: 39px;}
.celebrate-wrap .celebrate-header-button ul{display: flex; flex-wrap: wrap; justify-content: center;}
.celebrate-wrap .celebrate-header-button li{width: 150px; margin-right: 10px;}
.celebrate-wrap .celebrate-header-button li:last-child{margin-right: 0;}
.celebrate-wrap .celebrate-header-button li button{background-color: white; border-radius: 50px; color: #23262f; text-align: center; width: 100%; height: 100%; font-size: 18px; font-family: "ppm"; padding: 11.5px 10px;}
.celebrate-wrap .celebrate-header-button li button.active{background-color: #23262f; color: white;}
.celebrate-wrap ._fnctWrap > .celebrate-content{margin-top: -30px;}
/* .celebrate-wrap ._fnctWrap > .celebrate-content .cate{display: none;} */
/* .celebrate-wrap ._fnctWrap > .celebrate-content .cate.active{display: block;} */
.celebrate-wrap .cate > ul{display: flex; flex-wrap: wrap; justify-content: center; background-color: #0057c1; border-radius: 5px; padding: 0 27px;}
.celebrate-wrap .cate > ul > li{position: relative;}
.celebrate-wrap .cate > .type-filter > li{width: calc(100%/12);}
.celebrate-wrap .cate > .date-filter > li{width: calc(100%/13);}
.celebrate-wrap .cate ul a{display: inline-block; width: 100%; height: 100%; text-align: center; color: #d3ecff; font-size: 16px; font-family: "ppr"; padding: 18px 0;}
.celebrate-wrap .cate ul .active::after{content:""; display: block; position: absolute; left: 50%; margin-left: -8.5px; bottom: -10px; width: 17px; height: 15px; background: url(../images/select_arrow.png) no-repeat center center / cover;}
.celebrate-wrap .cate ul .active a{color: white; font-family: "ppm";}
.celebrate-wrap .celebrate-content-type-inner{margin-top: 50px;}
.celebrate-wrap .celebrate-content-type-box{display: none;}
.celebrate-wrap .celebrate-content-type-box.active{display: block;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content a{width: 100%; height: 100%; display: flex; flex-wrap: wrap; background: url(../images/ing_background.jpg) no-repeat right center / cover; align-items: center; padding: 21px 0; border-radius: 5px; position: relative;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content a::after{content:""; display: block; position: absolute; right: 45px; top: 50%; margin-top: -13px; width: 22px; height: 26px; background: url(../images/more_arrow.png) no-repeat center center;}
.celebrate-wrap .celebrate-content-type-box li{margin-bottom: 20px;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-date{display: flex; flex-wrap: wrap; width: 200px; justify-content: center;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-date > div{text-align: center;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-date span{font-family: "pps"; font-size: 30px; color: #003779; line-height: 1.5;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-date p{font-size: 15px; color: #003779; font-family: "pps"; line-height: 1.5;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-date .date-after{padding-left: 30px; position: relative;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-date .date-after::before{content:"~"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #003779;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-type{width: 80px;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-type span{background-color: #1174ff; border-radius: 50px; font-size: 15px; font-family: "ppr"; color: white; padding: 4px 13px; width: 100%; display: block; text-align: center; line-height: 1.5;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-name{width: calc(100% - 280px); padding: 0 100px 0 40px;}
.celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-name p{font-size: 18px; line-height: 25px; color: #121221;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box{border: 1px solid #d3d3d3; border-radius: 7px; display: none; flex-wrap: wrap; margin-top: 10px; padding: 39px 0 28px;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box > div{text-align: center; position: relative;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box > div::after{content:""; display: block; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: url(../images/info_line.png) no-repeat center center / cover;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box > div:last-child::after{display: none;}
.celebrate-wrap .celebrate-content-type-box li.active .celebrate-info-box{display: flex;}
.celebrate-wrap .celebrate-content-type-box li.active .celebrate-content a::after{background: url(../images/more_arrow_on.png) no-repeat center center / cover;}
.celebrate-wrap .celebrate-content-type-box li.end .celebrate-content a{background: url(../images/end_background.jpg) no-repeat right center / cover;}
.celebrate-wrap .celebrate-content-type-box li.end .celebrate-content a::after{background: url(../images/more_arrow_end.png) no-repeat center center / cover;}
.celebrate-wrap .celebrate-content-type-box li.end .celebrate-content .celebrate-type span{background-color: #969696;}
.celebrate-wrap .celebrate-content-type-box li.end .celebrate-content .celebrate-date span,
.celebrate-wrap .celebrate-content-type-box li.end .celebrate-content .celebrate-date p{color: #969696;}
.celebrate-wrap .celebrate-content-type-box li.end .celebrate-content .celebrate-name p{color: #4b4b4b;}
.celebrate-wrap .celebrate-content-type-box li.end .celebrate-date .date-after::before{color: #969696;}
.celebrate-wrap .celebrate-content-type-box li.end.active .celebrate-content a::after{background: url(../images/more_arrow_end_on.png) no-repeat center center / cover;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box .celebrate-info{width: 40.1%;;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box .celebrate-organ{width: 20.94%;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box .celebrate-place{width: 19.27%;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box .celebrate-day{width: 19.69%;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box span{color: #333333; font-family: "ppr"; display: block; margin: 5px 0 15px;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box p{font-family: "ppm"; font-size: 16px; line-height: 25px; color: #333333;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box p a[target=_blank]::after {content: ''; position: relative; top: 1px; display: inline-block; width: 13px; height: 13px; margin-left: 10px; background: url('../images/new-win.png') no-repeat center top;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box p a[target=_blank]:hover::after  {background-position: center bottom;}
.celebrate-wrap .celebrate-content-type-box li.link .celebrate-info p::after {content:''; width:20px; height:17px; background:url('../images/link.png') no-repeat center; display: inline-block; margin-left:10px; position: relative; top: 1px;}
.celebrate-wrap .celebrate-content-type-box .celebrate-info-box .br{display: block; margin: 0;}

.celebrate-wrap .celebrate-content-type-box li.no-data{display: block;padding: 140px 0;text-align: center;}

@media screen and (max-width: 1500px) {
    .celebrate-wrap .celebrate-header-text,
    .celebrate-wrap .celebrate-header-button,
    .celebrate-wrap ._fnctWrap > .celebrate-content{padding: 0 30px;}
}

@media all and (max-width: 1023px) {
    .celebrate-wrap .celebrate-header{padding: 90px 0 55px;}
    .celebrate-wrap .celebrate-header-text > span{font-size: 16px;}
    .celebrate-wrap .celebrate-header-text h1{font-size: 35px;}
    .celebrate-wrap .celebrate-header-button li{width: 100px;}
    .celebrate-wrap .celebrate-header-button li button{font-size: 16px; padding: 8px 7px;}
}

@media all and (max-width: 768px) {
    .celebrate-wrap .celebrate-header-text > span {font-size: 13px;}
    .celebrate-wrap .celebrate-header-text h1 {font-size: 30px;}
    .celebrate-wrap .celebrate-content-type-inner{margin-top: 30px;}
    .celebrate-wrap .cate > .type-filter > li,
    .celebrate-wrap .cate > .date-filter > li{width: calc(100%/6);}
    .celebrate-wrap .cate > ul{padding: 10px 15px;}
    .celebrate-wrap .cate ul a{padding: 10px 0;}
    .celebrate-wrap .cate ul .active::after{display: none;}
    .celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-date{width: 130px;}
    .celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-date span{font-size: 20px;}
    .celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-type span{font-size: 14px; padding: 4px 10px;}
    .celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-date p{font-size: 14px;}
    .celebrate-wrap .celebrate-content-type-box .celebrate-content .celebrate-name{width: 100%; margin-top: 20px; padding: 0 20px 0 25px;}
    .celebrate-wrap .celebrate-content-type-box li.active .celebrate-info-box{flex-direction: column; padding: 15px 0;}
    .celebrate-wrap .celebrate-content-type-box li.active .celebrate-info-box > div{width: 100% !important; padding: 20px 0;}
    .celebrate-wrap .celebrate-content-type-box li.active .celebrate-info-box > div::after{width: 100%; height: 1px; right: 0; top: auto; bottom: 0; background-color: #eaeaea;}
    .celebrate-wrap .celebrate-content-type-box .celebrate-content a::after{right: 20px; top: 30px; margin-top: 0;}
    .celebrate-wrap .celebrate-content-type-box .celebrate-info-box span{margin: 3px 0 8px;}
}

@media screen and (max-width: 500px) {
    .celebrate-wrap .celebrate-header-text,
    .celebrate-wrap .celebrate-header-button,
    .celebrate-wrap ._fnctWrap > .celebrate-content{padding: 0 20px;}
}