@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&family=Roboto:wght@100;300;400;500;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');

body *{word-break:keep-all;}
*{margin: 0;padding: 0;}
html, body{font-size: 12px; color: #222; font-family: 'Noto Sans KR', sans-serif;
font-family: 'Roboto', sans-serif;}
h1,h2,h3,h4,h5,h6{font-size: 100%;}
ol,ul{list-style: none;}
a{text-decoration: none; color: inherit;}
img,video{vertical-align: bottom;}
address{font-style: normal;}
table{border-collapse: collapse;}
button{background: transparent; border: none;}
.serif{font-family: 'Cormorant Garamond', serif;}

#wrap{
    max-width: 100%;
/*    min-width: 1000px;*/
}


/*<header>-----------------------------------------------*/
#header{z-index: 50;}

#h_top{width:100%; height:70px; overflow:hidden; position:fixed; z-index:1000; opacity:0; background:#fff; box-shadow:0px 5px 10px rgba(0, 0, 0, 0.16); transform:translateY(-80px); animation:top 2s forwards;}
@keyframes top{
    to{opacity: 1;transform: translateY(0);}
}

#h_top_scroll{
    position: fixed;
    z-index: 500;
    display: none;
    width: 100%;
    height: 70px;
    background: rgb(255, 255, 255);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.16)}

.menu{
    width: 40px;
    right: 20px;
    top: 50%; transform: translateY(-50%);
    position: absolute;
    cursor: pointer;}
.menu span{
    display: block;
    width: 28px;
    height: 2.6px;
    background: #222;
    margin: 5.5px;
    border-radius: 5px;
    transition: 0.3s;}
.menu:hover .bar1{width: 25px;
    transform: rotate(90deg) translateX(8px);}
.menu:hover .bar2{opacity: 0;}
.menu:hover .bar3{
    width: 25px;
    transform: translateY(-8px)}

.top_logo{
    width: 100px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;}
.top_logo a img{width: 100%;}

.home{
    width: 40px;
    height: 40px;
    left: 20px;
    top: 50%; transform: translateY(-50%);
    position: absolute;
    padding: 5.5px;
    box-sizing: border-box;
    line-height: 2;
    opacity: 0.8;
}
.home a{
    display: block;
}
.home a img{
    width: 100%;
}

#h_bottom{
    display: none;
}
.top_btn{
    cursor: pointer;
    text-align: center;
    position: fixed;
    z-index: 1000;
    width: 45px;
    height: 45px;
    right: 22px;
    bottom: 20px;
    padding: 5.5px;
    box-sizing: border-box;
    line-height: 1.9;
    border: 1px solid #555;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
}
.top_btn a{display: block;}
.top_btn img{
    width: 70%;
    opacity: 0.8;}
    



/*<section>-------------------------------------------------*/
#section{}
#content{
    z-index: 300;
    width: 100%; background: #fff;}

.parallax01 {
    width: 100%; height: 85vh;
    background: transparent;}
.w_textbox{
    position: absolute; z-index: 2;
    text-align: center;
    left: 50%; transform: translateX(-50%);
    width: 100%; height: 85vh;
}
.w_textbox h2{
    color: rgba(255, 255, 255, 0.8);
    font-size: 7rem; line-height: 1;
    margin-bottom: 5vw;
    margin-top: 30vh;
}
.w_textbox p{
    margin: auto;
    width: 500px;color: #fff;font-size: 1.2rem;}
.women{
    height:45vw;width: 100%;}
.cont_arrow{
    position: absolute;
    width: 10%;margin-top: -3%; 
    z-index: 2;
    left: 50%;transform: translateX(-50%);}
.cont_arrow img{width: 100%;}
.w01_text{text-align: center;}
.w01_text img{
    width: 30px; padding: 3.5% 0 2%;opacity: 0.8;}
.w01_text a{display:block; font-size:2rem; margin:auto;}
.w_sub{
    width: 84.4%; margin: auto;
    margin-top: 6vw;}
.w_sub .w02{
    width: 49%; float: left;
    text-align: center;}
.w_sub .w02 .imgbox{
    background: url(../img/fasionshow/w02.jpg) no-repeat center;
    background-size: cover;
    width: 100%; height: 20vw;
    margin-bottom: 5%;}
.w_sub .w02 a{font-size: 2rem;}
.w_sub .w03{
    width: 49%; float: right;
    text-align: center;}
.w_sub .w03 .imgbox{
    background: url(../img/fasionshow/w03.jpg) no-repeat center;
    background-size: cover;
    width: 100%; height: 20vw;
    margin-bottom: 5%;}
.w_sub .w03 a{font-size: 2rem;}




.parallax02 {
    width: 100%; height: 85vh;
    background: transparent;}
.m_textbox{
    position: absolute; z-index: 2;
    text-align: center;
    left: 50%; transform: translateX(-50%);
    width: 100%; height: 85vh;
}
.m_textbox h2{
    color: rgba(255, 255, 255, 0.8);
    font-size: 7rem; line-height: 1;
    margin-bottom: 5vw;
    margin-top: 30vh;
}
.m_textbox p{
    margin: auto;
    width: 530px;color: #fff;font-size: 1.2rem;}
.men{height:45vw;width: 100%;}
.cont_arrow{
    position: absolute;
    width: 10%;margin-top: -3%; 
    z-index: 2;
    left: 50%;transform: translateX(-50%);}
.cont_arrow img{width: 100%;}
.m01_text{text-align: center;}
.m01_text img{
    width: 30px; padding: 3.5% 0 2%;opacity: 0.8;}
.m01_text a{
    display: block;
    font-size: 2rem;
    width: 300px;margin: auto;}
.m_sub{
    width: 84.4%; margin: auto;
    margin-top: 6%;}
.m_sub .m02{
    width: 49%; float: left;
    text-align: center;}
.m_sub .m02 .imgbox{
    background: url(../img/fasionshow/m02.jpg) no-repeat center;
    background-size: cover;
    width: 100%; height: 20vw;
    margin-bottom: 5%;}
.m_sub .m02 a{font-size: 2rem;}
.m_sub .m03{
    width: 49%; float: right;
    text-align: center;}
.m_sub .m03 .imgbox{
    background: url(../img/fasionshow/m03.jpg) no-repeat center;
    background-size: cover;
    width: 100%; height: 20vw;
    margin-bottom: 5%;}
.m_sub .m03 a{font-size: 2rem;}







/*----------------------------------------*/

@media screen and (max-width:840px){
/****women****/
.women{height:108vw;}
.cont_arrow{width: 15%;margin-top: -5%;}
.w01_text img{padding: 5.5% 0 3%;}
.w01_text a{font-size: 1.8rem;width: 280px;}
.w_sub{width: 100%;margin-top: 8vw;}
.w_sub .w02{
    margin: auto;width: 70%; float: none;}
.w_sub .w02 .imgbox{
    height: 30vw;margin-bottom: 4%;}
.w_sub .w02 a{font-size: 1.8rem;}
.w_sub .w03{
    margin: auto; width: 70%; float: none;}
.w_sub .w03 .imgbox{
    height: 30vw;margin: 5vw 0 4%;}
.w_sub .w03 a{font-size: 1.8rem;}
/****men****/
.men{height:108vw;}
.cont_arrow{width: 15%;margin-top: -5%;}
.m01_text img{padding: 5.5% 0 3%;}
.m01_text a{font-size: 1.8rem;width: 280px;}
.m_sub{width: 100%;margin-top: 8vw;}
.m_sub .m02{
    margin: auto;width: 70%; float: none;}
.m_sub .m02 .imgbox{
    height: 30vw;margin-bottom: 4%;}
.m_sub .m02 a{font-size: 1.8rem;}
.m_sub .m03{
    margin: auto; width: 70%; float: none;}
.m_sub .m03 .imgbox{
    height: 30vw;margin: 5vw 0 4%;}
.m_sub .m03 a{font-size: 1.8rem;}
}


@media screen and (max-width:550px){
/****women****/
.w_textbox h2{
    font-size: 5rem;margin-bottom: 7vw;
    margin-top: 35vh;}
.w_textbox p{width: 80%;font-size: 1.2rem;}
.women{height:150vw;}
.cont_arrow{width: 20%;margin-top: -7%;}
.w01_text img{padding: 7.5% 0 4%;width: 23px;}
.w01_text a{font-size: 1.5rem;width: 250px;}
.w_sub{margin-top: 9vw;}
.w_sub .w02{width: 90%;}
.w_sub .w02 .imgbox{height: 45vw;}
.w_sub .w02 a{font-size: 1.5rem;}
.w_sub .w03{width: 90%;}
.w_sub .w03 .imgbox{
    height: 45vw;margin: 7vw 0 4%;}
.w_sub .w03 a{font-size: 1.5rem;}
    
/****men****/
.m_textbox h2{
    font-size: 5rem;margin-bottom: 7vw;
    margin-top: 35vh;}
.m_textbox p{width: 80%;font-size: 1.2rem;}
.men{height:150vw;}
.cont_arrow{width: 20%;margin-top: -7%;}
.m01_text img{padding: 7.5% 0 4%; width: 23px;}
.m01_text a{font-size: 1.5rem;width: 250px;}
.m_sub{margin-top: 9vw;}
.m_sub .m02{width: 90%;}
.m_sub .m02 .imgbox{height: 45vw;}
.m_sub .m02 a{font-size: 1.5rem;}
.m_sub .m03{width: 90%;}
.m_sub .m03 .imgbox{
    height: 45vw;margin: 7vw 0 4%;}
.m_sub .m03 a{font-size: 1.5rem;}
}







@media screen and (max-width:450px){
/***공통영역***/
.menu{width: 40px;right: 12px;}
.menu span{width: 23px;margin:}   
.menu:hover .bar1{transform: rotate(90deg) translateX(8px);width: 20px;}
.menu:hover .bar3{width: 20px;
    transform: translateY(-8px)}   
.top_logo{width: 80px;}
.home{width: 38px;height: 35px;left: 12px;}
#main h2{font-size: 7rem;}
.top_btn{
    width: 40px;
    height: 40px;
    right: 20px;
    padding: 5.5px;
    line-height: 1.5;
    border-radius: 7px;}
#h_top{height: 60px;}
#h_top_scroll{height: 60px;}
  
}


@media screen and (max-width:400px){
.women{height:155vw;}
.w_textbox h2{
    font-size: 4.5rem;}
.men{height:155vw;}
.m_textbox h2{
    font-size: 4.5rem;}}