/* Common */
.main-section{
    padding: 140px 0;
    background-size: cover !important;
}
@media (min-width:2560px){
    .main-section{
        background-size: initial !important;
    }
}
@media (max-width:1024px){
    .main-section{
        padding: 90px 0;
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
    .main-section{
        padding: 70px 0;
    }
}
@media (max-width:576px){
}

/* Visual */
.main-section--visual{
    padding:0;
    background-image: linear-gradient(to bottom, #131421, #212335, #4F4248, #835A51);
}
.visual { position: relative; margin: auto; max-width: 1920px; width: 100%; height: 980px; background: url('/child/img/main/visual.jpg') no-repeat center; z-index: 2;}
/* .visual__logo { position: absolute; top: 0; left: 0; width: 150px; height: 95px; background: url('/child/img/main/logo.png') no-repeat center; } */
@media(max-width:1200px){
    .visual { height: 550px; background-size: cover; }
    /* .visual__logo { width: 100px; height: 80px; background-size: auto 50px; } */
}
@media(max-width:768px){
    /* .visual { height: 350px; } */
    .visual { padding-top: calc(1624 / 750 * 100%); height: 0; background-image: url('/child/img/main/visual-sm.png'); }
    /* .visual__logo { width: 80px; height: 58px; background-size: auto 40px; } */
}


/* Main */
.main-section--intro{
    padding-top: 300px;
    background: url('/child/img/main/bg-intro.jpg') no-repeat center;
    position: relative;
}
.main-section--intro::after {
    content: "";
    position: absolute;
    width: 100%;
    max-width: 1920px;
    padding-top: calc(306/1920 * 100%);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image:url(/child/img/main/bg-snow.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}
.pill-items {
    margin: -16px 0;
}
.pill-item {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 0;
}
.pill-item__tit {
    color: #5C2C35;
    margin-right: 40px;
    width: 106px;
    height: 36px;
    border: 2px solid #5C2C35;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pill-item__con {
    width: calc(100% - 146px);
}
@media (max-width:1024px){
    .main-section--intro{
        padding-top: 200px;
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
    .main-section--intro{
        padding-top: 90px;
    }
    .pill-items {
        margin: -12px 0;
    }
    .pill-item {
        display: flex;
        flex-wrap: wrap;
        padding: 12px 0;
    }
    .pill-item__tit {
        width: 90px;
        margin-right: 0;
    }
    .pill-item__con {
        width: 100%;
    }
    .pill-item__con{
        padding-top: 12px;
    }
}
@media (max-width:576px){
}

.card-items {
    display: flex;
    flex-wrap: wrap;
    margin: -12px;
}
.card-item {
    width: 25%;
    padding: 12px;
}
.card-item__inner {
    height: 100%;
    text-align: center;
    padding: 32px 0;
    background-color: #f7f7f7;
    border-radius: 20px;
}
.card-item__icon{
    width: 60px;
    height: 60px;
    border: 3px solid #CEC0C2;
    border-radius: 50%;
    margin-bottom: 8px;
}
@media (max-width:1024px){
    .card-items{
        margin: -6px;
    }
    .card-item{
        padding: 6px;
    }
    .card-item__inner{
        padding:24px 16px;
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
    .card-item{
        width: 50%;
    }
    .card-item__icon{
        margin:0 auto 2px;
    }
}
@media (max-width:576px){
}

.main-section--brick{
    background:url(/child/img/main/bg-brick.jpg) no-repeat center;
}
@media (max-width:1024px){
    /* .main-section--brick{
        background-image:url(/child/img/main/bg-tree-mo.jpg);
    } */
}
@media (max-width:992px){
}
@media (max-width:768px){
    .main-section--brick{
        padding: 80px 0;
    }
}
@media (max-width:576px){
}

.card-num-items{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -30px;
}
.card-num-item{
    width: calc(100% / 3);
    padding: 30px;
}

.card-num-item__inner{
    width: 100%;
    height: 100%;
    position: relative;
}
.card-num-item__inner::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -30px;
    background: url(/child/img/main/card-snow.png) no-repeat center;
    width: 198px;
    height: 90px;
}

.card-num-item__inner-bg{
    width: 100%;
    height: 100%;
    border-radius: 60px;
    background-color: #F2EBE5;
    padding: 16px 16px 24px 16px;
}

.card-num-item__card{
    width: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.card-num-item__img {
    overflow: hidden;
    background-color: #fff;
    border: 6px solid #DECEBD;
    border-radius: 48px;
}
.card-num-item__img img{
    display: block;
    margin: 0 auto;
}

.card-num-item__num{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #111;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    top: 24px;
    left: 24px;
}

.card-num-item__con{
    text-align: center;
    margin-top: 24px;
    font-weight: 700;
}

@media (max-width: 1200px){
}
@media (max-width: 1024px){
    .card-num-items{
        margin: -12px;
    }
    .card-num-item{
        padding: 12px;
    }
    .card-num-item__inner-bg {
        border-radius: 32px;
    }
}
@media (max-width: 768px){
    /* .card-num-items{
        margin:-16px -4px;
    } */
    .card-num-item{
        /* padding:16px 4px; */
        width: 50%;
        max-width: unset;
    }
    .card-num-item__num{
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
    .card-num-item__inner-bg {
        border-radius: 48px;
    }
    .card-num-item__con{
        margin-top: 16px;
    }
}
@media (max-width: 568px){
    .card-num-item{
        width: 100%;
    }
}

/*.card-num-items{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:-12px;
}
.card-num-item{
    width: 20%;
    padding:12px;
}
.card-num-item__inner{
    height: 100%;
    text-align: center;
}
.card-num-item__card{
    position: relative;
    height: 280px;
    text-align: center;
    background-color: #fff;
    padding: 75px 20px 40px;
    border-radius: 20px;
    overflow: hidden;
}
.card-num-item:first-child .card-num-item__card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    display: block;
    width: 100%;
    height: 100%;
    border:3px solid #d23232;
    border-radius: 20px;
}
.card-num-item__num {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background-color: #999;
    border-radius: 0 0 20px 0;
}
.card-num-item__img{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}
.card-num-item__img img{
    max-height: 100%;
}
@media (max-width:1200px){
    .card-num-items{
        margin:-20px -5px;
    }
    .card-num-item{
        padding:20px 5px;
    }
}
@media (max-width:1024px){
    .card-num-item{
        width: 33.3333%;
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
    .card-num-item__card{
        height: 248px;
        padding:60px 15px 30px;
    }
}
@media (max-width:576px){
    .card-num-items{
        margin:-10px -5px;
    }
    .card-num-item{
        width: 50%;
        padding:10px 5px;
    }
    .card-num-item__card{
        height: 196px;
        padding: 50px 15px 20px;
    }
    .card-num-item__num{
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .card-num-item__img{
        height: 120px;
    }
} */

.main-section--total{
    padding:0;
    height: 90px;
}
.total-wrap{
    padding:20px 0;
    background-color: #fff;
}
.total-wrap.fixed{
    position: fixed;
    top:0;
    left:0;
    z-index: 100;
    width: 100%;
}
@media (max-width:1024px){
    .main-section--total{
        height: 70px;
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
    .main-section--total{
        height: 46px;
    }
    .total-wrap{
        padding:15px 0;
    }
    .total-wrap .col-auto{
        flex: 1 1 auto;
    }
}
@media (max-width:576px){
}

.main-section--vote {
    overflow: hidden;
    padding-top:0;
    background-color: #ECECEC;
}

/* Letter */
.board-letter-container .modal .letter .folded{
    display: none;
    /* background-image: url('/child/img/main/folded-yellow-transparent.png'); */
}
.board-letter-container .grid { margin: 30px -12px -40px; }
.board-letter-container .grid li { padding: 40px 12px; }
/* pink */
.board-letter-container .grid li:nth-child(even) .letter {
    background-color: #eae1e1;
    background-size: cover;
    background-image: url(/child/img/main/letter-bg2.png);
}
.board-letter-container .grid li:nth-child(even) .letter .tape::before{
    top:-30px;
    width: 50px; height: 55px;
    transform: rotate(0);
    background: url('/child/img/main/tape2.png') no-repeat center / auto 100%;
}
.board-letter-container .grid li:nth-child(even) .letter .tape::after { opacity: 1; }
.board-letter-container .grid li:nth-child(even) .letter .folded { background-image: url('/child/img/main/folded-pink.png'); }
/* .board-letter-container .grid li:nth-child(even) .letter .tape::before{
    top:-30px;
    width: 50px; height: 55px;
    transform: rotate(0);
    background: url('/child/img/main/tape2.png') no-repeat center / auto 100%;
} */
/* .board-letter-container .letter[data-letter-color="blue"] */
.board-letter-container .grid li:nth-child(2n) .letter{
    background-color: #d5dce0;
    background-size: cover;
    background-image: url(/child/img/main/letter-bg2.png);
}
.board-letter-container .grid li:nth-child(2n) .letter .tape::after { opacity: 1; }
.board-letter-container .grid li:nth-child(2n) .letter .folded { background-image: url('/child/img/main/folded-blue.png'); }
/* .board-letter-container .letter[data-letter-color="pink"] */

.board-letter-container .grid li:nth-child(3n) .letter {
    background-color: #eae1e1;
    background-size: cover;
    background-image: url(/child/img/main/letter-bg2.png);
}
.board-letter-container .grid li:nth-child(3n) .letter .tape::before{
    top:-30px;
    width: 50px; height: 55px;
    transform: rotate(0);
    background: url('/child/img/main/tape2.png') no-repeat center / auto 100%;
}
.board-letter-container .grid li:nth-child(3n) .letter .tape::after { opacity: 1; }
.board-letter-container .grid li:nth-child(3n) .letter .folded { background-image: url('/child/img/main/folded-pink.png'); }
.board-letter-container .control{
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
/* .board-letter-container .letter[data-letter-color="green"] */
.board-letter-container .grid li:nth-child(4) .letter,
.board-letter-container .grid li:nth-child(5n) .letter {
    background-color: #dee2e1;
    background-size: contain;
    background-image: url(/child/img/main/letter-bg.png);
}
.board-letter-container .grid li:nth-child(4) .letter .folded,
.board-letter-container .grid li:nth-child(5n) .letter .folded { background-image: url('/child/img/main/folded-green.png'); }
.board-letter-container .control a { padding: 4px 14px; border: 1px solid #111; }
.board-letter-container .letter{
    display: block; position: relative; padding: 80px 20px 40px;
    text-align: left; font-size: 18px; line-height: 1.5; background: #e1dcd4;
    background-repeat: no-repeat;
    background-position:center top;
    background-size: contain;
    background-image: url(/child/img/main/letter-bg.png);
}
.board-letter-container .letter .tape::before,
.board-letter-container .letter .tape::after{
    content: ''; position: absolute; left: 0; right: 0; margin: auto; width: 100px; height: 30px;
    background: url('/child/img/main/tape.png') no-repeat center / auto 100%;
}
.board-letter-container .letter .tape::before {
    top: -14px;
    transform: rotate(350deg);
}
.board-letter-container .letter .tape::after { display:none; bottom: -14px; opacity: 0; }
.board-letter-container .letter .folded{
    position: absolute; left: -7px; bottom: -7px; width: 67px; height: 65px;
    background: url('/child/img/main/folded-yellow.png') no-repeat center / auto 100%;
}
.board-letter-container .letter .text{
    padding: 1px 10px;
    line-height: 38px;
    max-height: calc(38px * 4);
    font-weight: 500;
    background-repeat: repeat;
    background-image: linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px);
    background-size: 100% 38px;
    overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.board-letter-container .letter .name { margin-top: 20px; text-align: right; font-weight: 400; }
.board-letter-container .letter .name em { display: block; font-style: normal; font-size: 16px; color: #666666; }
.modal--letter{
    max-width: 640px;
}
.modal--letter .modal__head .tape{
    position: relative;
    z-index: 1;
}
.modal--letter .modal__head .tape::before{
    content: '';
    position: absolute;
    top: -14px;
    transform: rotate(350deg);
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 30px;
    background: url(/child/img/main/tape.png) no-repeat center / auto 100%;
}
.modal--letter .modal__body{
    padding:0;
    border-radius: 0;
}
.modal--letter .board-letter-container .letter{
    background-color: #dfdfdf;
    background-image: none;
}
.modal--letter .board-letter-container .letter .text{
    max-height: none;
    text-overflow:clip;
    white-space:normal;
    word-wrap: normal;
    -webkit-line-clamp:inherit;
}
@media(max-width:1200px){
    .board-letter-container .letter { font-size: 16px; }
    .board-letter-container .letter .tape::before,
    .board-letter-container .letter .tape::after { height: 28px; }
    .board-letter-container .letter .name em { font-size: 14px; }
}
@media(max-width:1024px){
    .board-letter-container .grid li { width: 33.33333%; }
}
@media(max-width:768px){
    .board-letter-container .letter { font-size: 16px; padding: 50px 20px 28px; }
    .board-letter-container .letter .tape::before,
    .board-letter-container .letter .tape::after { height: 26px; }
    .board-letter-container .letter .folded { width: 53px; height: 50px; }
    .board-letter-container .letter .name em { font-size: 13px; }
}
@media(max-width:650px){
    .board-letter-container .grid li { width: 50%; }
}
@media(max-width:500px){
    .board-letter-container .grid { margin-top: -30px; margin-bottom: -24px; }
	.board-letter-container .grid li { padding-top: 24px; padding-bottom: 24px; width: 100%; }
    .board-letter-container .letter { font-size: 14px; }
    .board-letter-container .letter .tape::before,
    .board-letter-container .letter .tape::after { height: 24px; }
    .board-letter-container .letter .tape::before { top: -11px;  }
    .board-letter-container .letter .tape::after { bottom: -11px; }
    /* .board-letter-container .letter .folded { left: -11px; bottom: -6px; height: 55px; } */
}




/* -------- 2020 마켓 -------- */
.section-slide { margin-top: 90px; text-align: center; }
.section-slide h1 img { display: block; margin: auto; }
.section-slide h2 { margin: 18px 0 16px; font-size: 26px; color: #555555; font-weight: 400; }
.section-slide p { font-size: 16px; color: #bcbcbc; }
.slide-container { position: relative; padding: 0 80px; }
.slide-container__prev, .slide-container__next { z-index: 2; position: absolute; top: 0; bottom: 0; margin: auto; width: 45px; height: 85px; background-repeat: no-repeat; background-position: center; outline: none; }
.slide-container__prev[aria-disabled="true"], .slide-container__next[aria-disabled="true"] { opacity: 0; visibility: hidden; }
.slide-container__prev { left: 0; background-image: url('/child/img/main/slide-prev.png'); }
.slide-container__next { right: 0; background-image: url('/child/img/main/slide-next.png'); }
.slide-container .swiper-pagination-bullets { z-index: 10; position: absolute; bottom: 50px; left: 0; margin: 0; width: 100%; }
.slide-container .swiper-pagination-bullet { vertical-align: top; margin: 0; width: 30px; height: 2px; background: rgba(255,255,255,0); border-bottom: 1px solid rgba(255,255,255,.5); border-radius: 0; opacity: 1; outline: none; }
.slide-container .swiper-pagination-bullet-active { background: rgba(255,255,255,1); opacity: 1; }
.slide-container .swiper-slide { padding: 15px; overflow: hidden; background: #ffffff; }

.slide-round { overflow: hidden; position: relative; background: #000000; border: 10px solid #ffffff; box-shadow: 0px 3px 15px 0px rgba(0,0,0,.15); border-radius: 0px; }
.slide-round .image { overflow: hidden; position: relative; padding-top: calc(557 / 1007 * 100%); border-radius: 0px; -webkit-transition: all ease-out .3s; transition: all ease-out .3s; /*animation: slide-fade-out .5s ease-out forwards;*/ }
.slide-round .image::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }
.slide-round .image--1::before { background-image: url('/child/img/main/card/1.jpg'); }
.slide-round .image--2::before { background-image: url('/child/img/main/card/2.jpg'); }
.slide-round .image--3::before { background-image: url('/child/img/main/card/3.jpg'); }
.slide-round .image--4::before { background-image: url('/child/img/main/card/4.jpg'); }
.slide-round .image--5::before { background-image: url('/child/img/main/card/5.jpg'); }
.slide-round .image--6::before { background-image: url('/child/img/main/card/6.jpg'); }
.slide-round .image--7::before { background-image: url('/child/img/main/card/7.jpg'); }
.slide-round .image--8::before { background-image: url('/child/img/main/card/8.jpg'); }
.slide-round .image--9::before { background-image: url('/child/img/main/card/9.jpg'); }
.slide-round .image--10::before { background-image: url('/child/img/main/card/10.jpg'); }
.slide-round .image--11::before { background-image: url('/child/img/main/card/11.jpg'); }
.slide-round .mask { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); opacity: 0; -webkit-transition: all ease-out .15s; transition: all ease-out .15s; }
.slide-round .mask p { margin-top: 20px; line-height: 1.65; font-size: 28px; color: #ffffff; font-weight: 900; }

.swiper-slide-active .slide-round .mask { animation: slide-fade-in .5s ease-out .85s forwards; }
/* .swiper-slide-active .slide-round .image { animation: slide-fade-in .5s ease-out forwards; } */
@keyframes slide-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slide-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@media(max-width:1200px){
    .section-slide h1 img { width: auto; height: 90px; }
    .section-slide h2 { font-size: 18px; }
    .section-slide p { font-size: 14px; }

    .slide-container { margin: auto; max-width: 840px; }
    .slide-round .mask img { width: auto; height: 50px; }
    .slide-round .mask p { font-size: 20px; }
    .slide-container .swiper-pagination-bullets { bottom: 30px; }
}
@media(max-width:768px){
    .section-slide { margin-top: 60px; }
    .section-slide h1 img { height: 54px; }
    .section-slide h2 { font-size: 14px; }
    .section-slide p { font-size: 12px; }

    .slide-container { margin: 0 -15px; padding: 0; max-width: none; }
    .slide-container .swiper-slide { padding: 10px; }
    .slide-container .swiper-pagination-bullets { bottom: 10px; }
    .slide-container .swiper-pagination-bullet { width: 15px; }
    .slide-container__prev,
    .slide-container__next { display: none; }
    .slide-round .mask img { margin-top: -20px; height: 30px; }
    .slide-round .mask p { margin-top: 16px; line-height: 1.5; font-size: 16px; }
    .slide-round { box-shadow: 0px 3px 10px 0px rgba(0,0,0,.15); }
}


.section-info { margin-top: 150px; height: 485px; }
.section-info .container { position: relative; height: 100%; }
.section-info h1 { padding-top: 50px; }
.section-info h1 img { display: block; }
.section-info p { margin-top: 38px; line-height: 1.85; font-size: 22px; color: #666666; }
.section-info p b { color: #333333; font-weight: 900; }

.info-block { position: relative; position: absolute; top: 0; left: 0; padding: 50px 0 0 50px; width: 100%; height: 100%; background-image: linear-gradient(45deg, #297ab6 0%, #063268 90%); border-radius: 20px; }
.info-block .content { z-index: 3; position: relative; }
.info-block .star { z-index: 1; position: absolute; top: 5px; right: 20px; }
.info-block .person { z-index: 2; position: absolute; bottom: -182px; right: 0; }
@media(min-width:1201px){
	.section-info p { padding-top: 110px; }
}
@media(max-width:1200px){
    .section-info { margin-top: 80px; height: auto; }
    .section-info h1 { padding-top: 0; }
    .section-info h1 img { width: auto; height: 170px; }
    .section-info p { margin-top: 30px; font-size: 18px; }

    .info-block { position: relative; left: 0; margin: 50px -15px 0; padding: 0; width: calc(100% + 30px); border-radius: 0; }
    .info-block .content { width: auto; height: 335px; }
    .info-block .star { top: 15px; right: 40px; width: auto; height: 170px; }
    .info-block .person { bottom: -130px; left: auto; right: 0; width: auto; height: 350px; }
}
@media(max-width:768px){
    .section-info { margin-top: 60px; }
    .section-info h1 img { height: 135px; }
    .section-info p { font-size: 14px; }

    .info-block { margin-top: 30px; }
    .info-block .content { width: 100%; height: auto; }
    .info-block .star { width: auto; height: 210px; }
    .info-block .person { display: none; }
}
@media(max-width:500px){
    .info-block .star { right: 10px; height: 210px; }
}


.section-recommend { margin-top: 160px; }
.section-recommend h1 { line-height: 1; text-align: center; font-size: 40px; }
.recommend-list-container { margin: 20px auto 0; padding: 0 15px; max-width: 975px; width: 100%; }
.recommend-list-container .caption { display: block; line-height: 1; text-align: right; font-size: 13px; color: #999999; }
.recommend-lists { display: flex; flex-wrap: wrap; position: relative; margin: 3px -10px -7px; padding-left: calc(50% + 32px); }
.recommend-lists li { padding: 7px 10px; width: 50%; line-height: 1.45; text-align: center; font-size: 20px; color: #555555; }
.recommend-lists li:first-child { position: absolute; top: 0; left: 0; width: calc(50% + 20px); }
.recommend-lists li:first-child .thumb { border-color: #aaaaaa; }
.recommend-lists li:first-child .thumb em { color: #aaaaaa; }
.recommend-lists li small { display: block; font-size: 16px; font-weight: 400; color: #666666; }
.recommend-lists .thumb { overflow: hidden; display: inline-block; position: relative; margin: 0 auto; font-size: 0; border: 2px solid #dddddd; border-radius: 5px; }
.recommend-lists .thumb em { position: absolute; top: 10px; left: 10px; line-height: 1; font-style: normal; font-size: 40px; color: #dddddd; }
@media(max-width:1200px){
    .section-recommend h1 { font-size: 30px; }
    .recommend-list-container { margin: 20px auto 0; }
    .recommend-list-container .caption { font-size: 12px; }
    .recommend-lists { justify-content: center; }
    .recommend-lists li { font-size: 18px; }
    .recommend-lists li small { font-size: 15px; }
    .recommend-lists .thumb em { font-size: 34px; }
}
@media(max-width:1024px){
    .recommend-lists { margin: -5px -5px -15px; padding-left: 0; }
    .recommend-lists li:first-child { position: static; width: 100%; }
    .recommend-lists li { padding: 10px 5px; }
    .recommend-lists .thumb { width: 100%; }
}
@media(max-width:768px){
    .section-recommend { margin-top: 60px; }
    .section-recommend h1 { font-size: 20px; }
    .recommend-list-container .caption { font-size: 11px; }
    .recommend-lists li { font-size: 14px; }
    .recommend-lists li small { font-size: 12px; }
    .recommend-lists .thumb em { font-size: 22px; }
}
@media(max-width:500px){
    .recommend-list-container .caption { text-align: left; }
}

/* .vote-navigation-wrap{
    height: 60px;
} */
.vote-navigation {
    /* border-top: 1px solid #ddd; */
    border-bottom: 1px solid #ddd;
}
.vote-navigation.fixed{
    position: fixed;
    top:89px;
    left:0;
    z-index: 100;
    width: 100%;
}
.vote-navigation .inner { position: relative; margin: auto; max-width: 1200px; width: 100%; }
.vote-navigation .tab-list--block { margin: 0; }
.vote-navigation .tab-list--block > li { margin-top: 0; border-color: #cccccc; border: none; }
.vote-navigation .tab-list--block > li .button { padding: 0 4px 0; height: 60px; font-size: 18px; color: #999; font-weight: 700; }
.vote-navigation .tab-list--block > li.on .button { color: #ffffff; background-color: #111; }
.vote-state { overflow: hidden; display: flex; align-items: center; z-index: 2; position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 85%; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; }
.vote-state .tab { flex: 1 1; display: flex; align-items: center; justify-content: center; height: 100px; line-height: 1; font-size: 40px; color: #ffffff; background: #d23232; }
.vote-state .tab span { opacity: .6; }
.vote-state .tab em { padding-left: 14px; font-style: normal; }
.vote-state .tab--green { background: #009640; }

.zi { width: 16px; height: 16px; display: inline-block; background-repeat: no-repeat; background-position: center; }
.zi--vote { background-image: url('/child/img/icon/icon-vote-grey.png'); }
.zi--tooltip { background-image: url('/child/img/icon/icon-tooltip.png'); }

.item-container { position: relative; padding-top: 70px; }
.item__prev,
.item__next { position: absolute; top: 0; bottom: 0; margin: auto; width: 40px; height: 65px; background-repeat: no-repeat; background-position: center; }
.item__prev { left: 0; background-image: url('/child/img/main/item-prev.png'); }
.item__next { right: 0; background-image: url('/child/img/main/item-next.png'); }
.item__lists { display: flex; flex-wrap: wrap; margin: -12px; }
.item__list { padding: 12px; width: 25%; }
.item-box { padding: 16px; background: #ffffff; border-radius: 10px; }
.item-box .thumb { overflow: hidden; position: relative; padding-top: calc(100% - 2px); width: 100%; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box !important; }
.item-box .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; overflow: hidden;}
.item-box .name {
    overflow: hidden; display: block; margin: 24px 0 12px; font-size: 24px; font-weight:700; white-space: nowrap; text-overflow: ellipsis;
}
.item-box .state {
    display: flex; align-items: center;
    margin:0 -6px;
}
.item-box .state li {
    display: flex;
    align-items: center;
    font-size: 16px; color: #999;
    padding:0 6px;
}
.item-box .state li .zi { margin-right: 4px; }
.item-box .buttons { display: flex; flex-wrap: wrap; align-items: center; margin: 8px -4px -4px;}
.item-box .buttons li{
    padding: 4px;
}
.item-box .buttons li:nth-child(1){
    width: 38%;
    max-width: calc(90px + 4px * 2);
}
.item-box .buttons li:nth-child(2){
    width: 62%;
    max-width: calc(152px + 4px * 2);
}
.item-box .buttons .button{
    display: flex;
    width: 100%;
}
.item-box .buttons .button img { display: block; }
@media(max-width:1200px){
    .section-vote { margin-top: 100px; padding-bottom: 100px; }
    .vote-state .tab { height: 80px; font-size: 28px; }
    .vote-navigation .tab-list--block > li .button { font-size: 20px; }

    .item__prev,
    .item__next { display: none; }
    .item-box .name { margin: 12px 0 8px; font-size: 18px; }
    .item-box .state li { font-size: 16px; }
    .item-box .buttons{
        margin: 6px -2px -2px;
    }
    .item-box .buttons li{
        width: 100% !important;
        max-width: initial !important;
        padding:2px;
    }
}
@media(max-width:1024px){
    .vote-navigation.fixed{
        top:69px;
    }
}
@media(max-width:768px){
    .section-vote { margin-top: 80px; padding-bottom: 60px; }
    .vote-state { position: static; width: 100%; border-radius: 0; }
    .vote-state .tab { flex-direction: column; font-size: 18px; }
    .vote-state .tab em { display: block; padding: 10px 0 0; }
    .vote-navigation.fixed{
        top:45px;
    }
    .vote-navigation .tab-list--block { overflow-x: auto; overflow-y: hidden; display: block; white-space: nowrap; font-size: 0; }
    .vote-navigation .tab-list--block > li { display: inline-block; vertical-align: top; width: calc(33.33333% - 15px); }
    .vote-navigation .tab-list--block > li .button { padding-top: 0; height: 60px; font-size: 16px; }
    /* .item__lists { margin: 45px -5px -5px; } */
    .item__list { width: 50%; }
    .item-box .name { font-size: 16px; }
    .item-box .state li { font-size: 14px; }
    .item-box .state li .zi { margin-right: 4px; width: 16px; height: 16px; background-size: auto 16px; }
}
@media(max-width:550px){
    /* .vote-navigation-wrap{
        height: 50px;
    } */
    .vote-navigation .tab-list--block > li { width: calc(33.3333% - 30px); }
    .vote-navigation .tab-list--block > li .button { height: 50px; font-size: 14px; }
    .item__lists {
        margin: -6px;
    }
    .item__list {
        padding: 6px;
    }
}


.section-review { margin-top: 125px; padding-bottom: 180px; }

.review__list { margin: 24px 0; }
.review__list:first-child { margin-top: 0; }
.review__list:last-child { margin-bottom: 0; }
.review-box {
    display: table; align-items: center; padding: 32px 0; width: 100%; border-radius: 10px;
    border:1px solid #ECECEC;
}
.review-box .row { display: flex; flex-wrap:wrap; }
.review-box .col {
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: auto;
    width: 180px;
    text-align: center; font-size: 18px; border-right: 1px solid #ececec;
}
.review-box .col:last-child { border-right: none; }
.review-box .col--content {
    justify-content: flex-start;
    text-align: left;
    width: calc(100% - (180px * 3));
    padding: 0 50px;
}
.review-box .col--content em { display: block; margin-bottom: 14px; line-height: 1; font-style: normal; font-size: 24px; color: #222222; }
.review-box .col--date { width: 160px; }
.review-box .col--like { width: 140px; }
.review-box .col--like .like { font-size: inherit; color: inherit; }
.review-box .col--like .like em { display: block; line-height: 1.2; font-style: normal; font-size: 24px; font-weight: 700; }
.review-box .col--like .like span {
    display: block;
    width: 80px; height: 36px;
    line-height: 36px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: #7e7e7e; background-color: #ffffff; border:1px solid #ccc; border-radius: 999px;
    margin-top: 5px;
}
.review-box .col--like .like--on em { color: #d23232; }
.review-box .col--like .like--on span { color: #fff; border-color:#d23232; background-color: #d23232; }
.item-view-container { display: flex; justify-content: space-between; }
.item-view-container .button { margin-top: 32px; padding: 0; }
.item-view__images, .item-view__contents {
    width: 50%;
    max-width: 528px;
}
/* .item-view__images { width: 55%; } */
/* .item-view__contents { width: 45%; } */
.item-view__name {
    display: block;
    margin-bottom: 24px;
}
.item-view__name a{
    color: #00a0e9;
    margin-top:5px;
}
.item-view__pr { margin-top: 32px; border-top: 1px solid #ECECEC; padding-top: 32px; line-height: 1.7; font-size: 16px; color: #666; }
.item-view__state { display: flex; align-items: center; margin: 32px -4px 0; }
.item-view__state li {
    display: flex;
    align-items: center;
    font-size: 18px; color: #999; padding: 0 4px;
}
/* .item-view__state li:first-child { margin-right: 18px; color: #d23232; } */
.item-view__state li .zi {
    width: 20px;
    height: 20px;
    margin-right: 4px;
}
.item-view__state li .zi--vote{
    background-image: url(/child/img/icon/icon-vote-grey.png);
}
.item-view__state li .zi--tooltip{
    background-image: url(/child/img/icon/icon-tooltip.png);
}

.item-image-container { position: relative; }
.item-image-container .thumb { overflow: hidden; height: 528px; border-radius: 12px; }
.item-image-container .thumb img{ display: block; width: 100%;}
.item-image-container .swiper-pagination-bullets { position: relative; display: flex; align-items: center; margin: 0 16px}
.item-image-container .swiper-pagination-bullet { vertical-align: top; margin: 0 4px; width: 8px; height: 8px; background: #dddddd; opacity: 1; outline: none; }
.item-image-container .swiper-pagination-bullet-active { background: #5C2C35; opacity: 1; }

.modal-contents { display: flex; flex-direction: column; justify-content: center; }
.modal-contents textarea { margin-top: 14px; padding: 12px 14px; width: 100%; height: 240px; font-size: 18px; border: 1px solid #dddddd; border-radius: 6px; resize: none; }

.swiper-control{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}

.item-image-container__prev,
.item-image-container__next{
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

.item-image-container__prev{
    background-image: url(/child/img/icon/slide-prev.png);
}
.item-image-container__next{
    background-image: url(/child/img/icon/slide-next.png);
}

@media(max-width:1200px){
    .section-review { margin-top: 100px; padding-bottom: 100px; }

    .review-box .col { font-size: 16px; }
    .review-box .col--name { width: 140px; font-size: 20px; }
    .review-box .col--date { width: 130px; }
    .review-box .col--content { padding: 0 30px; }
    .review-box .col--content em { margin-bottom: 10px; font-size: 18px; }
    .review-box .col--like { width: 120px; }
    .review-box .col--like .like em { font-size: 18px; }
    .review-box .col--like .like span { margin-top: 8px; width: 80px; height: 30px; line-height: 30px; }

    .item-view-container { flex-direction: column; }
    .item-image-container .thumb { height: auto; }
    .item-image-container .thumb img { width: 100%; height: auto; }
    .item-view__images { width: 100%; }
    .item-view__contents { margin-top: 24px; width: 100%; }
    .item-view__name { font-size: 24px; }
    .item-view__name small, .item-view__name a { font-size: 18px; }
    .item-view__pr { font-size: 16px; margin-top: 24px; padding-top: 24px; }
    .item-view__state li { font-size: 16px; }
    .item-view-container .button img { width: auto; height: 44px; }

    .modal-contents .icon { margin-top: 10px; width: auto; height: 80px; }
    .modal-contents textarea { height: 200px; font-size: 14px; }
}
@media(max-width:768px){
    .section-review { margin-top: 60px; padding-bottom: 80px; }
    .review-box { display: block; padding: 16px 14px; }
    .review-box .row { display: flex; flex-wrap: wrap; }
    .review-box .col { display: block; border-right: none; text-align: left; font-size: 13px; }
    .review-box .col--name { width: 100%; font-size: 16px; }
    .review-box .col--content { padding: 16px 4px; width: 100%; }
    .review-box .col--content em { font-size: 16px; }
    .review-box .col--date { display: inline-flex; align-items: center; width: 50%; }
    .review-box .col--like { display: inline-flex; justify-content: flex-end; width: 50%; }
    .review-box .col--like .like { display: flex; align-items: center; }
    .review-box .col--like .like em { font-size: 16px; }
    .review-box .col--like .like span { margin: 0 0 0 8px; width: 76px; height: 26px; line-height: 26px; }

    .item-view__contents { padding: 16px 0 0; }
    .item-image-container .thumb { overflow: hidden; position: relative; padding-top: 100%; width: 100%; height: 0; }
    .item-image-container .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
    .item-view__name { font-size: 18px; }
    .item-view__name small, .item-view__name a { margin-top: 4px; font-size: 16px; }
    .item-view__pr { padding-top: 12px; margin-top: 12px; font-size: 14px; }
    .item-view__state { margin-top: 16px; }
    .item-view__state li { font-size: 14px; }
    .item-view-container .button { margin-top: 24px; }
    .item-view-container .button img { height: 40px; }

    .item-image-container .swiper-pagination-bullets{
        margin: 0 8px;
    }
}

/* intro-banner */
.intro-banner{
    margin-top: 30px;
}

.intro-banner .pc-banner{
    display: block;
    width: 100%;
}

.intro-banner .mo-banner{
    display: none;
    width: 100%;
}

@media (max-width: 1200px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
    .intro-banner .pc-banner{
        display: none;
    }
    .intro-banner .mo-banner{
        display: block;
    }
}

/* agree-gray-box */
.agree-gray-box {
    padding: 24px;
    background-color: #f7f7f7;
    border-radius: 12px;
    margin-bottom: 32px;
}
@media (max-width: 768px){
    .agree-gray-box {
        padding: 12px;
        background-color: #f7f7f7;
        border-radius: 8px;
        margin-bottom: 24px;
    }
}

.banner-link {
    display: block;
    border-radius: 20px;
    overflow: hidden;
}
.banner-link__img {
    width: 100%;
}