@charset "utf-8";

.act-info {
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    padding-bottom:2.7rem;
    padding-top:3.3rem;
    width:100%;
}
.act-info.fst {padding-top:0}
.act-info::after {
    display:block;
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0.2rem;
    background:url(../imgs/activity/act_line.png) repeat-x 0 0;
    background-size:0.5rem auto;
}
.act-info.last {padding-bottom:0}
.act-info.last::after {display:none;}
.act-info .img {position:relative;width:10.5rem;flex-shrink:0;}
.act-info .img img {max-width:100%;height:auto;}
.act-info .cont {position:relative;}
.act-info .cont .tit {font-size:1.2rem;color:#333333;font-weight:500;line-height:1;}
.act-info .cont .txt {margin-top:0.5rem;font-size:0.9rem;color:#333333;font-weight:300;line-height:1.2rem}
.act-info .cont ul {margin-top:1.75rem}
.act-info .cont ul li {
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:100%;
    line-height:1.5rem;
    font-size:0.9rem;
    color:#333333;
    font-weight:300;
}
.act-info .cont ul li strong {color:#f66800;font-weight:400;flex-shrink:0;}
.act-info .cont ul li p {padding-left:0.15rem}
@media screen and (max-width:1000px) {
    .act-info .cont {padding-left:0}
}
@media screen and (max-width:640px) {
    .act-info {flex-direction:column;padding-top:2.7rem;}
    .act-info .cont {padding-left:0;margin-top:0}
    .act-info .img {margin:0 auto}
}

.activity {position:relative;}
.activity .activity-img {position:relative;}
.activity .activity-img ul {position:relative;}
.activity .activity-img ul.grid-4 li {width:25%;}
.activity .activity-img ul li {float:left;width:33.333333333333%}
.activity .activity-img ul li img {width:100%;height:auto}
.activity .activity-info {    
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-top:3rem;
}
.activity .activity-info .info-img {position:relative;width:19.95rem;flex-shrink:0;padding-left:1.3rem}
.activity .activity-info .info-img img {max-width:100%;height:auto}
.activity .activity-info .info-cont {position:relative;}
.activity .activity-info .info-tit {font-size:1.2rem;line-height:1.2rem;color:#2e2e2e;font-weight:500;}
.activity .activity-info .info-txt {margin-top:0.6rem;font-size:0.9rem;line-height:1.5rem;color:#333333;font-weight:300;}
.activity .activity-info .info-list {position:relative;margin-top:0.85rem;padding:0.8rem 0.5rem;border-top:2px solid #1a1a1a;border-bottom:1px solid #999;}
.activity .activity-info .info-list li {
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:100%;
    font-size:0.8rem;
    color:#333;
    font-weight:300;
    line-height:1.8rem;
}
.activity .activity-info .info-list li strong {display:block;width:5.2rem;color:#2b2b2b;font-weight:500;}
.activity .activity-info .info-list li p {display:block;letter-spacing:-1px;width:calc(100% - 5.2rem)}
@media screen and (max-width:960px) {
    .activity .activity-info .info-img {padding-left:0;}
    .activity .activity-info .info-img {width:15rem}
    .activity .activity-info .info-cont {padding-left:1rem}
}
@media screen and (max-width:840px) {
    .activity .activity-info .info-img {padding-left:0;}
    .activity .activity-info .info-img {width:10rem}
}
@media screen and (max-width:640px) {
    .activity .activity-info {flex-direction:column;}
    .activity .activity-info .info-img {padding-left:0;text-align:center;width:100%}
    .activity .activity-info .info-img img {max-width:10rem;height:auto;width:100%;}
    .activity .activity-info .info-cont {padding-left:0;margin-top:2rem}
    .activity .activity-info .info-list li strong {width:3.5rem}
    .activity .activity-info .info-list li p {width:calc(100% - 3.5rem)}
    .activity .activity-img ul li {width:100% !important;}
}

.act-info__img {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    margin-top:1.05rem;
}
.act-info__img__item {width:calc(100% / 3);}
.act-info__img__item img {width:100%;height:auto}
@media screen and (max-width:640px) {
    .act-info__img__item {width:100%;}
}