@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* font-family: 'Raleway', sans-serif; */

* {box-sizing: border-box;}
a {text-decoration: none; color: inherit;}
img {display: block; max-width: 100%;}
body {font: 16px/1.2 'Raleway', 'Noto Sans KR', sans-serif;}


/***** HEADER-AREA *****/
.header {
    width: 15%; height: 100%;
    background-color: #fff;
    position: fixed; left: 0; top: 0; z-index: 100;
    transition: all 0.3s;
}
.logo {
    width: 160px; height: 101px;
    margin-left: -80px;
    position: absolute; left: 50%; top: 80px;
}
.logo a {
    display: block;
    width: 100%; height: 101px;
    text-indent: -9999px;
    background: url(../img/logo.png) no-repeat center center / contain;
}
/* gnb */
.gnb {
    position: absolute; right: 50%; top: 300px;
    transform: translate(50%,0);
}
.gnb li {width: 110px; height: 50px;}
.gnb li a {
    display: block;
    width: 100%; height: 50px;
    line-height: 50px; text-align: center;
}
/* tnb */
.tnb {
    width: 90px;
    position: absolute; right: 50%; bottom: 50px;
    transform: translate(50%,0);
}
.tnb-menu a {float: left;}
.tnb-sns li {float: left;}

/***** BAR-AREA *****/
.bar {
    width: 85%; height: 35px;
    margin-left: 15%;
    font-size: 12px; line-height: 35px;
    background-color: #37250f;
    transition: all 0.3s;
}
.bar-lang {float: left;}
.bar-lang a {
    float: left;
    padding: 0 20px;
    color: #aaa;
    position: relative;
}
.bar-lang a:last-child::after {content: "";
    width: 10px; height: 7px;
    background-image: url(../img/arrow.png); background-size: contain;
    position: absolute; right: 0px; top: 14px;
}
.bar-login {float: right;}
.bar-login a {
    float: left;
    padding: 0 20px;
    color: #ccc;
    position: relative;
}
.bar-login a:first-child::after {content: "";
    width: 1px; height: 11px;
    background-color: #fde8e3;
    position: absolute; right: -1px; top: 12px;
}

/***** MAIN-AREA *****/
.container {
    width: 85%; 
    margin-left: 15%;
    transition: all 0.3s;
}
.container section {
    float: left;
    width: 20%; height: 260px;
    padding: 40px 0 0 30px;
    background-repeat: no-repeat; background-position: center center; background-size: cover;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.container section article {
    margin-bottom: 10px;
    font-weight: 200; font-size: 30px; line-height: 40px;
}
.container section p {font-weight: 200; font-size: 14px; line-height: 20px;}
section.sec1 {
    width: 60%; height: 520px;
    padding: 0;
}
section.sec1 article {
    font-weight: 200; font-size: 150px; color: #fff;
    position: absolute; right: 0; bottom: 17px;
}
section.sec1 #block {width: 100%; height: 520px;}
section.sec2 {width: 40%;}
section.sec3 {background-color: #fde8e3;}
section.sec4 {background-image: url(../img/pic2.jpg);}
section.sec5 {background-image: url(../img/pic3.jpg);}
section.sec6 {width: 40%;}
section.sec7 {background-image: url(../img/pic4.png);}
section.sec8 {}
section.sec9 {width: 40%; background-image: url(../img/pic5.jpg);}
section.sec10 {background-image: url(../img/pic6.jpg);}
section.sec11 {}
section.sec12 {background-image: url(../img/pic7.jpg);}

section.bg {transition: all 0.7s;}
section.txt article{
    font-size: 40px; color: #fff;
    position: absolute; right: 25px; bottom: 0px; 
    transform: scale(10);
    transition: all 0.7s;
    opacity: 0;
}
section.bg:hover {background-color: #e497a9; color: #fff;}
section.txt:hover article {transform: scale(1); opacity: 1;}





/********** **********
   max-width : 1400px
 ********** **********/
@media (max-width: 1400px) {
    /***** HEADER-AREA *****/
    .header {
        width: 100%; height: 80px;
        position: relative;
    }
    .logo {
        width: 100px; height: 80px;
        margin-left: 0;
        left: 20px; top: 0px;
    }
    .logo a {height: 80px;}
    /* gnb */
    .gnb {
        right: 150px; top: 20px;
        transform: translate(0,0);
    }
    .gnb li {
        float: left;
        width: auto; height: 40px;
    }
    .gnb li a {
        width: 100%; height: 40px;
        padding: 0 25px;
        line-height: 40px; 
    }
    /* tnb */
    .tnb {
        right: 20px; bottom: 16px;
        transform: translate(0,0);
    }
    .tnb-menu a {float: left;}
    .tnb-sns li {float: left;}

    /***** BAR-AREA *****/
    .bar {
    width: 100%;
    margin-left: 0;
    }

    /***** MAIN-AREA *****/
    .container {
    width: 100%; 
    margin-left: 0;
    }
 }



 /********** **********
   max-width : 1024px
 ********** **********/
 @media (max-width: 1024px) {
    /***** HEADER-AREA *****/
    /* gnb */
    .gnb {right: 10px;}
    .gnb li a {
        padding: 0 10px;
        font-size: 14px;
    }
    /* tnb */
    .tnb {display: none;}


    /***** MAIN-AREA *****/
    .container section {width: 50%; height: 150px;}
    .container section article {font-size: 25px;}
    .container section p {font-size: 12px; line-height: 15px;}
    section.sec1 {width: 100%; height: 300px;}
    section.sec1 article {font-size: 120px;}
    section.sec1 #block {height: 300px;}
    section.sec3 {display: none;}
    section.sec7 {display: none;}
    section.sec12 {display: none;}
    section.txt article {font-size: 40px;}
 }

 


 /********** **********
   max-width : 640px
 ********** **********/
 @media (max-width: 640px) {
    /***** HEADER-AREA *****/
    .header {background-color: transparent;}
    .logo {
        width: 160px; height: 101px;
        margin-left: -80px;
        left: 50%; top: 70px;
    }
    .logo a {
        height: 101px;
        /* background-image: url(../img/logo1.png); */
    }
    /* gnb */
    .gnb {
        width: 250px;
        right: 50%; top: 250px;
        transform: translate(50%,0);
    }
    .gnb li {
        float: none;
        height: 50px;
        margin-bottom: 20px;
    }
    .gnb li a {
        height: 50px;
        padding: 0 ;
        border-radius: 10px;
        line-height: 50px; text-align: center; color: #fff;
        background-color: rgba(0,0,0,0.5);
        transition: all 0.3s;
    }
    .gnb li a:hover {
        background-color:  rgba(0,0,0,0.8);
        transform: scale(1.1);
    }


    /***** MAIN-AREA *****/
    .container section {display: none;}
    section.sec1 {
        display: block;
        height: 100%;
        background-image: url(../img/sec1.jpg);
        position: fixed; left: 0; top: 0;
    }
    section.sec1 article {display: none;}
    section.sec1 #block {display: none;}
 }