@charset "utf-8";

/*
 * File       : rwd-main.css
 *
 * SUMMARY:
 * 03) 1680px
 * 04) 1570px
 * 05) 1480px
 * 06) 1023px
 * 07) 860px
 * 08) 540px
 */


/* **************************************** *
 * 1680px
 * **************************************** */
@media (max-width: 1680px){


}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

}



/* **************************************** *
 * 1280px
 * **************************************** */
@media (max-width: 1280px){
    /* COMMON */
}


/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){


    /* LAYOUT */
    .page-home:before {height:380rem;}

    /* MEMBER */
    .main-member { display:none;}

    /* COMPONENT */
    .main-component-box-section {display:block;}
    .main-component-box {border: none;border-radius: 0; background:none;}
    .col3 .main-component-box {max-width:100%;}
    .main-component-box {max-width:100%; overflow:visible;}
    .main-component-box + .main-component-box {margin-top: 70rem;}
    .main-component-box__head {padding-bottom:15rem; padding-top:0; padding-left:0; padding-right:0;background:none;}
    .main-component-box__item a {padding:20rem 0;}
    .main-component-box__item:last-child a {margin-bottom:0}
    .main-component-box__num {padding-left:5rem;}

    /* VISUAL */
    .main-visual {height:414rem;}
    .main-visual__content { padding: 50rem 50rem;}
    .main-visual__sub-title { font-size: 24rem;}
    .main-visual__title { font-size: 40rem;}
    .main-visual .swiper-control {left:50rem;}

    /* SURVEY */
    .survey-box {border:1rem solid var(--border-color); background:var(--card-bg);border-radius: 20rem; overflow:hidden;}
    .survey-box .main-component-box__head{padding-top:20rem; padding-bottom:20rem; padding-left:28rem; padding-right:28rem;}
    .survey-box .scroll-wrapper {max-height:inherit;}
    .survey-box .main-component-box__body {height:auto; overflow:hidden;}

    /* BANNER */
    .main-banner {border-radius:0;margin-left: -30rem;margin-right: -30rem;}
    .main-banner b { font-size: 24rem;}

    /* MEETING */
    .meeting-box .main-component-box__head {display:block;}
    .meeting-box .btn-view {top:2rem; right:0;}
    .meeting-box .tab-list { margin-left: -30rem; margin-right: -30rem; margin-top: 20rem; padding-left: 30rem; padding-right: 30rem; padding-bottom:5rem;overflow-x: scroll; overflow-y: hidden;}
    .meeting-box .main-component-box__item .main-component-box__contents p {font-size:18rem;}

    /* GALLERY */
    .main-gallery__text figure {position:absolute; top:30rem;}
    .main-gallery__info {display: flex; flex-flow: column;}
    .main-gallery__tit {order:2;}
    .main-gallery__info ul {order:1; margin-bottom:20rem; margin-left:50rem;}
    .main-gallery__info ul li + li {margin-left:auto;}

    /* POPUP */
    .mob-popup {display:block;}
}





/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* COMPONENT */
    .main-component-box__head {padding-bottom:12rem;}
    .main-component-box__head .btn-view {font-size:14rem;}
    .main-component-box__title {font-size:20rem;}
    .main-component-box__num {font-size:16rem;}
    .main-component-box__contents p {font-size:16rem;}

    .title-icon {width:18rem; height:18rem;}

    /* VISUAL */
    .main-visual {height:310rem;}
    .main-visual__content { padding: 35rem;}
    .main-visual__sub-title {font-size: 16rem;}
    .main-visual__title {font-size: 28rem;}
    .main-visual .swiper-control {left:35rem; bottom:25rem;}

    /* SURVEY */
    .survey-box .main-component-box__head{padding-top:18rem; padding-bottom:18rem;}
    .survey-box .main-component-box__body {padding:25rem;}
    .survey-title {font-size:18rem;}
    .btn-survey {font-size:14rem;}

    /* BANNER */
    .main-banner {margin-left: -25rem; margin-right: -25rem; }
    .main-banner a {padding: 40rem 25rem 70rem; }
    .main-banner b { font-size: 20rem;}
    .main-banner p { font-size: 16rem;}
    .main-banner .swiper-control {left:25rem;}

    /* MEETING */
    .meeting-box .tab-list li a {font-size:16rem;}
    .meeting-box .main-component-box__item .main-component-box__contents {display:block;}
    .meeting-box .main-component-box__item .main-component-box__contents p {font-size:16rem;}
    .meeting-box .main-component-box__item .meta {margin-left:0;}
    .meeting-box .main-component-box__item .meta li:first-child {flex-grow: 1;} 
    .meeting-box .main-component-box__item .meta li:last-child {margin-left:auto;}
    .meeting-box .main-component-box__item .meta li:last-child span {width:auto; border:none; background:none; border-radius:0;padding:0;}

    /* GALLERY */
    .main-gallery__text {padding:20rem;}
    .main-gallery__text figure {width: 30rem; height: 30rem; top:25rem;}
    .main-gallery__info ul {margin-left:40rem;}
    .main-gallery__info ul li { font-size: 14rem;}
    .main-gallery__tit {font-size:16rem;}
    .gallery-box .swiper-navigation button.swiper-button-prev {left:15rem;}
    .gallery-box .swiper-navigation button.swiper-button-next {right:15rem;}
    .gallery-box .swiper-navigation button {width:40rem; height:40rem; line-height:40rem;}
    .gallery-box .swiper-navigation > button:before {font-size:18rem;}
    
    /* MENU CATEGORY */
    .main-menu-category__list {margin-left:-25rem; margin-right:-25rem; padding:0 25rem;}
}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* LAYOUT */
    .page-home:before { height: 210rem; border-radius: 0 0 20rem 0;}
    #container.home { padding-top:0;}

    .icon-commissioner {font-size:10rem;}
    .icon-level {font-size:10rem;}

    /* COMPONENT */
    .main-component-box + .main-component-box {margin-top:60rem;}
    .main-component-box__title { font-size: 18rem;}
    .main-component-box__item a {padding:14rem 0; }
    .main-component-box__num {width:25rem; font-size:14rem}
    .main-component-box__contents p {font-size:15rem;}
    .main-component-box__contents .meta {font-size:12rem; margin-top:4rem;}
    .main-component-box__contents .meta li:first-child time {margin-left:8rem; padding-left:8rem;}
    .main-component-box__contents .meta li:last-child span + span {margin-left:12rem;}
    .main-component-box__contents .meta li:last-child span i {font-size:12rem; padding-left:17rem;}
    .main-component-box__contents .meta li:last-child span i:before {font-size:12rem;}
    .main-component-box__contents .meta li:last-child span.like i {padding-left:15rem;}
    .main-component-box__contents .meta li:last-child span.view i:before {font-size:14rem;}
    .main-component-box__contents .meta li:last-child span.comment i:before {font-size:13rem;}

    /* VISUAL */
    .main-visual { height: 155rem; border-radius:12rem;}
    .main-visual__bg {border-radius:12rem;}
    .main-visual__bg img {border-radius:12rem; }
    .main-visual__content { padding: 25rem;}
    .main-visual__sub-title { font-size: 12rem;}
    .main-visual__title { font-size: 20rem;}
    .main-visual .swiper-control {left:15rem; bottom:5rem;}

    .main-top + .main-component-box-section {margin-top:20rem;}

    /* SURVEY */
    .survey-box .main-component-box__head {padding:18rem 15rem;}
    .survey-title { font-size: 16rem; font-weight:500;}
    .survey-title span {padding-left:23rem;}
    .survey-title span:before {font-weight:600;}
    .survey-box .main-component-box__body { padding: 18rem 20rem;}
    .survey-box .swiper-navigation > button {width:30rem; height:30rem; line-height:30rem;}
    .survey-box .swiper-navigation > .swiper-button-prev { left: 5rem;}
    .survey-box .swiper-navigation > .swiper-button-next { right: 5rem;}
    .survey-list {margin-bottom:20rem;}
    .survey-list label {padding: 12rem 16rem 12rem 40rem;}
    .survey-list .custom-radio .checkmark { left: 14rem;}
    .survey-info li {font-size:14rem;}

    /* BANNER */
    .main-banner {margin:30rem -15rem; }
    .main-banner a {padding:25rem 15rem 60rem;}
    .main-banner b { font-size: 18rem;}
    .main-banner p { margin-top: 5rem; font-size: 14rem;}
    .main-banner .swiper-control {left:15rem; bottom:20rem;}

    /* MEETING */
    .meeting-box .tab-list li + li {margin-left:15rem;}
    .meeting-box .tab-list li a {font-size:16rem;}
    .meeting-box .main-component-box__item .main-component-box__contents p  {font-size:15rem;}


    /* GALLERY */
    .main-gallery__text figure {width: 25rem; height: 25rem;top:22rem;}
    .main-gallery__info ul { margin-bottom: 10rem; margin-left:32rem;}
    .main-gallery__info ul li { font-size: 13rem;}
    .main-gallery__tit { font-size: 14rem;}
    .main-gallery__text {padding:15rem;}
    .gallery-box .swiper-navigation button.swiper-button-prev {left:10rem;}
    .gallery-box .swiper-navigation button.swiper-button-next {right:10rem;}
    .gallery-box .swiper-navigation button {width: 30rem;height: 30rem;line-height: 30rem;}
    .gallery-box .swiper-navigation > button:before {font-size:13rem;}

    /* POPUP */
    .mob-popup__close {top:0; right:5rem;}
    .mob-popup__close:after {font-size:16rem;}
    
    /* MENU CATEGORY */
    .main-menu-category {margin:20rem 0;}
    .main-menu-category__list {margin:-3rem -15rem; padding:0 15rem;}
    .main-menu-category__list li {margin:3rem;}
    .main-menu-category__list li a {font-size: 13rem; padding: 4rem 12rem;}
}