@charset "utf-8";

/***** 타블렛 *****/
@media screen and (max-width: 1100px) {
    /*** header ***/
    header {
        height: 80px;
    }
    header .logo img {
        width: 35px;
    }
    /* nav */
    header nav .main-menu {
        padding-left: 30px;
    }
    header nav .main-menu li {
        width: 190px;
        font-size: 14px;
        position: relative;
    }
    header nav .main-menu li a {
        font-size: 14px;
        padding-left: 10px;
    }

    /* sub-menu */
    header nav .sub-menu {
        top: 270%;
    }

    /* side-menu */
    header .side-menu {
        width: 120px;
        justify-content: space-between;
    }
    header .side-menu a {
        margin-left: 0;
    }
    header .side-menu .txt {
        display: none;
    }
    header .side-menu a img {
        width: 20px;
    }

    /*** 본문 내용 시작 ***/
    /*** main ***/
    .main {
        height: 650px;
    }
    .main .title {
        top: 400px;
    }
    .main .title h1 {
        font-size: 110px;
    }
    .main .title h2 {
        font-size: 18px;
    }
    .main .title p {
        margin-top: 30px;
    }

    /*** gradient ***/
    .gradient {
        top: 450px;
    }

    /*** intro ***/
    .intro {
        height: 1200px;
    }
    .intro h2 {
        width: 70%;
        font-size: 65px;
    }

    /*** recommendation ***/
    .recommen {
        height: 3400px;
    }
    .recommen .menu {
        display: none;
    }
    .recommen .wrapper #recommen1 .txt,
    .recommen .wrapper #recommen2 .txt,
    .recommen .wrapper #recommen3 .txt,
    .recommen .wrapper #recommen4 .txt {
        padding: 120px 0 0 0;
    }
    .recommen .wrapper #recommen1 h2,
    .recommen .wrapper #recommen2 h2,
    .recommen .wrapper #recommen3 h2,
    .recommen .wrapper #recommen4 h2 {
        width: 400px;
        font-size: 36px;
    }
    /* 이미지 */
    .recommen .wrapper #recommen1 .images img,
    .recommen .wrapper #recommen2 .images img,
    .recommen .wrapper #recommen3 .images img,
    .recommen .wrapper #recommen4 .images img {
        height: 570px;
        margin: 0 80px 120px 80px;
    }

    /*** models ***/
    .models {
        height: 1200px;
    }
    /* title */
    .models h1 {
        padding-top: 150px;
        font-size: 70px;
    }
    /* options */
    .models .options {
        width: 200px;
        top: 40%;
    }

    /* list */
    .models .options .list a {
        line-height: 2.3;
    }
    .models .options .list a span {
        font-size: 14px;
    }
    .models .options .list a svg {
        margin-right: 7px;
    }

    /* content */
    .models .content img {
    }
    .models .content p {
        bottom: 35%;
    }

    /* spec */
    .models .spec {
        top: 830px;
    }
    .models .spec .inner {
        width: 220px;
    }
    .models .spec h2 {
        padding-bottom: 15px;
        font-size: 20px;
    }
    .models .spec p {
        line-height: 1.3;
        font-size: 14px;
    }

    /* link */
    .models .link a {
        bottom: 90px;
    }

    /*** service & acc ***/
    .service {
        padding: 150px 80px;
    }
    .service .title h2 {
        font-size: 45px;
    }
    .service .title a {
        font-size: 18px;
    }

    /* content-list */
    .service .content {
        padding-top: 30px;
    }
    .service .content > div {
        justify-content: flex-start;
        padding-right: 15px;
    }
    .service .content .inner1 {
        max-width: 30%;
    }
    .service .content .inner1 > img {
        width: 100%;
        height: 333px;
    }
    .service .content .inner2 {
        max-width: 40%;
    }
    .service .content .inner2 > img {
        width: 100%;
        height: 600px;
    }
    .service .content .inner3 {
        max-width: 30%;
        padding-right: 0;
    }
    .service .content .inner3 > img {
        width: 100%;
    }
    .service .content .inner4 {
        max-width: 30%;
    }
    .service .content .inner4 > img {
        width: 100%;
        height: 500px;
    }    

    .service .content .inner1 h3,
    .service .content .inner2 h3,
    .service .content .inner3 h3,
    .service .content .inner4 h3 {
        width: 100%;
        padding-top: 27px;
        font-size: 18px;
        line-height: 1.3;
    }

    /*** outro ***/
    .outro .inner1, 
    .outro .inner2 {
        height: 700px;
    }
    /* 1 번쩨 */
    .outro .inner1 .txt {
        width: 100%;
        position: absolute;
        top: 50%;
    }
    .outro .inner1 .txt h1 {
        font-size: 90px;
    }
    .outro .inner1 .txt p {
        margin: 0 auto;
        padding: 30px 180px;
        font-size: 18px;
        line-height: 1.5;
    }
    /* 2 번째 */
    .outro .inner2 h1 {
        width: 80%;
        font-size: 80px;
    }

    /*** last-txt ***/
    .last-txt {
        height: 1000px;
    }
    .last-txt > h1 {
        width: 80%;
        font-size: 100px;
        padding-bottom: 150px;
    }

    /*** footer ***/
    footer {
        padding: 120px 80px 0 80px;
    }
    /* title */
    footer h1 {
        font-size: 70px;
    }
    /* footer-menu */
    footer .footer-menu {
        width: 100%;
        padding-top: 40px;
    }
    
    footer .copyright {
        padding-top: 40px;
        text-align: left;
    }
    footer .copyright .links {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    footer .copyright .links a {
        padding: 5px 10px 0 10px;
    }
    footer .copyright .links a:first-of-type {
        padding-left: 0;
    }
    footer .copyright .links .tb {
        padding-left: 0;
    }

    /* bottom */
    footer .bottom .sns {
        padding: 0 30px;
        gap: 15px;
        align-self: center;
    }
    footer .bottom a {
        width: 25%;
        justify-content: flex-end;
        align-self: center;
    }
}