@charset 'UTF-8';

/* 1. mo ~767px까지 */
@media all and (max-width: 767px) {
    .mb-slide-item1 {background-position: 22% 0;}
    .mb-slide-item2 {background-position: 32% 0;}
    .mb-slide-item3 {background-position: 80% 0;}
    .mb-slide-item4 {background-position: 29% 0;}
}

/* 2. tb 768px부터~ */
@media all and (min-width: 768px) {
    .main-sec {
        /* padding: 80px 0; */
    }
    .main-visual-sec {
        height: 75vw;
    }
    .mb-slide-txt {
        position: absolute;
        top: 38%;
    }
    .txt-tag {
        width: 50%;
        margin-left: auto;
    }
    .btn-go {
        width: 8em;
        font-size: 0.5em;
    }
    .btn-go-wh{
        width: 8em;
        font-size: 0.6em;
    }
    /* 메인배너 이전, 다음 버튼 */
    .mb-controls {
        left: 50%;
        top: calc(50% + 2%);
    }

    .trand-title-wrap {
        height: 25vh;
        color: #fff;
        font-weight: 500;
        background: url(../images/Magazine_visual.jpg) center center / cover no-repeat;
    }
    .main-trand-container h2 {}
    .trand-title-txt {
        left: 5%;
    }

    .main-magazine-container p {
        margin-bottom: 2em;
    }
    .main-magazine-wrap {
        position: relative;
    }
    .magazine-item {
        display: flex;
        justify-content: space-between;
    }
    .magazine-item li {
        width: 32%;
    }
    .more-btn {
        position: absolute;
        right: 0;
        top: -1.8em;
    }

    .main-counseling-wrap {
        position: relative;
        display: flex;
        justify-content: space-between;
    }
    .counseling-item {
        width: 49%;
    }
    .counseling-item img {
        margin: 1em 0;
    }
    .h3-desc {
        max-width: 720px;
        font-size: 1.1em;
    }
}

/* 3. only tb 768px ~ 1279px */
@media all and (min-width: 768px) and (max-width: 1279px) {
    .img-desc {
        font-size: 1.1em;
    }
    .magazine-item h3 {
        font-size: 1em;
    }
    .magazine-item span {
        font-size: 0.9em;
    }
}

/* 4. pc 1280px부터~ */
@media all and (min-width: 1280px) {
    .counseling-item-txt {
        margin: 0 2.5em;
    }
    .main-sec {
        padding: 60px 0;
    }
    .main-visual-sec {
        height: 100vh;
    }
    .mb-slide-txt {
        width: 90%;
        font-size: 2em;
    }
    .txt-tag span {
        font-weight: 500;
    }
    .txt-tag {
        width: 40%;
    }
    .btn-go, .btn-go-wh  { 
        line-height: 2.3;
    }
    /* 메인배너 이전, 다음 버튼 */
    .mb-controls {
        left: calc(40% + 18.5%);
    }
    .mb-controls .mb-btn {
        width: 40px;
        height: 40px;
    }
    .mb-controls .mb-btn:before {
        right: calc(50% - 9px);
        top: calc(50% - 9px);
        width: 18px;
        height: 18px;
        border: 2px solid #000;
        border-width: 2px 2px 0 0;
        transform: rotate(45deg);
    }
    .mb-controls .mb-btn:after  {
        right: calc(50% - 10px);
        top: calc(50% - 1px);
        width: 20px;
        height: 2px;
    }
    .trand-title-wrap {
        height: 40vh;
    }
    .main-magazine-container {
        font-size: 1.2em;
    }
    .img-desc {
        opacity: 0;
    }
    .magazine-item a:before {
        opacity: 0;
        transition: 1s;
    }
    .magazine-item a:hover:before {
        opacity: 0.5;
    }
    .magazine-item a:hover p {
        opacity: 1;
    }
    .main-trand-container h2,
    .main-magazine-container h2,
    .main-counseling-container h2 {
        font-size: 1.8em;
    }
    .trand-title-txt {
        bottom: 30%;
        font-size: 1.5em;
    }
    .trand-item-img img {
        height: 25vw;
    }
    .main-counseling-container h3 {
        font-size: 1.8em;
    }
    .counseling-item-txt {
        font-size: 1.2em;
    }
    .main-place-container h3 {
        font-size: 1.8em;
    }

}

/* 5. pc 1600px부터~ */
@media all and (min-width: 1600px) {
    .mb-slide-txt {
        top: 40%;
        font-size: 2.6em;
        line-height: 1.2em;
    }
    .txt-tag span {
        font-size: 0.6em;
    }
    .btn-go { 
        font-size: 0.4em;
    }
    .mb-controls {
        left: calc(50% + 8.5%);
        top: calc(40% + 12%);
        width: 150px;
    }
    .main-trand-container h2,
    .main-magazine-container h2,
    .main-counseling-container h2 {
        font-size: 2.2em;
    }
    .trand-title-txt {
        font-size: 1.8em;
    }
    .trand-title-wrap > a {
        bottom: 30%;
    }
    .counseling-item {
        padding: 2em;
    }

}


/* 6. pc 1920px부터~ */
@media all and (min-width: 1920px) {}