@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

*{margin: 0;padding: 0;}
html, body{font-size:14px; color:#222; font-family:'Arsenal', sans-serif; font-family:'Noto Sans KR', sans-serif;}
h1,h2,h3,h4,h5,h6{font-weight:normal; 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:'Nanum Myeongjo', serif;}

#wrap{max-width:100%;}

/****헤더 header****/
header{}
#h_top{width:100%; height:100px; position:relative; z-index:10; padding:20px 50px 0; box-sizing:border-box;}
.top_logo{width:120px;}
.top_logo img{width:100%;}
.menu_box{color:rgba(239, 231, 213, 0.7); position:absolute; text-align:end; width:100%; right:50px; top:50%; transform:translateY(-50%);}
.menu_box li{line-height:30px; font-size:1.1rem; cursor:pointer; display:inline-block;}
.menu_box li+li{margin-left: 3.5%;}
.select{font-weight:500; color:#efe7d5; border-bottom:3px solid #efe7d5;}
.basic{border:none;}

/****섹션 section****/
#main_wrap{overflow:hidden; width:100%; height:100vh; position:absolute; top:0;}
.fix_box h3{position:absolute; z-index:9; width:100%; bottom:30px; color:#efe7d5; text-align:center; font-size:0.95rem; opacity:0.8;}
.fix_box .rotate>img{position:absolute; z-index:9;}
.rotate01{width:217px; left:-4%; top:20%; animation:spin10 10s infinite linear;}
@keyframes spin10{
    to{transform: rotate(360deg)}}
.rotate02{width:110px; left:7.8%; bottom:13%; animation:spin8 8s infinite linear;}
@keyframes spin8{
    to{transform: rotate(360deg)}}
.rotate03{width:295px; right:7%; bottom:3%; animation:spin20 20s infinite linear;}
@keyframes spin20{
    to{transform: rotate(360deg)}}

.sns_icon{opacity:0.7; position:fixed; margin-left:50px; bottom:30px; z-index:10; width:33px; text-align:center;}
.sns_icon>div{margin:auto; transition:0.3s; cursor:pointer;}
.sns_icon>div:hover{opacity:0.4;}
.sns_icon>div+div{margin-top:15px;}
.sns01{width: 80%;}.sns01 img{width: 100%;}
.sns02{width: 50%;}.sns02 img{width: 100%;}
.sns03{width: 80%;}.sns03 img{width: 100%;}
.sns04{width: 50%;}.sns04 img{width: 100%;}

.main_logo{width:200px; position:absolute; z-index:9; left:24.6%; top:50%; transform:translateY(-50%);}
.main_logo img{width:100%;}

.main_cont{position:absolute; z-index:8; width:100%; height:100vh;}
.main_cont>div{position:absolute; width:100%; height:100vh;}
.main_cont>div .menuimg_01{position:absolute; z-index:1; width:100%; height:100vh;}
.main_cont>div .menuimg_02{position:absolute; width:100%; height:100vh;}
.main_cont>div .textbox{position:absolute; z-index:1; width:50%; text-align:center; color:#efe7d5; right:10%; top:53%; transform:translateY(-50%); font-size:1.8rem;}
.main_cont>div .textbox h2{margin-bottom:50px;}
.main_cont>div .more{transition:0.3s; margin:auto; display:block; color:#efe7d5; border-radius:35px; border:1px solid rgba(239, 231, 213, 0.5); width:150px; height:35px; line-height:35px; font-size:1.15rem;}
.main_cont>div .more:hover{border:1px solid rgba(239, 231, 213, 0); background:rgba(239, 231, 213, 0.5); color:#fff;}

.menubox_1{z-index:4;}
.menubox_1 .menuimg_01{background:url(../img/main_story_blur.jpg)no-repeat center/cover;}
.menubox_1 .menuimg_02{background:url(../img/main_story.jpg)no-repeat center/cover;}
.menubox_2 .menuimg_01{background:url(../img/main_identity_blur.jpg)no-repeat center/cover;}
.menubox_2 .menuimg_02{background:url(../img/main_identity.jpg)no-repeat center/cover;}
.menubox_3 .menuimg_01{background:url(../img/main_product_blur.jpg)no-repeat center/cover;}
.menubox_3 .menuimg_02{background:url(../img/main_product.jpg)no-repeat center/cover;}
.menubox_4 .menuimg_01{background:url(../img/main_package_blur.jpg)no-repeat center/cover;}
.menubox_4 .menuimg_02{background:url(../img/main_package.jpg)no-repeat center/cover;}


@media screen and (max-width:1024px){
#h_top{height: 80px;padding: 0 20px 0;}
.top_logo{width: 110px;padding-top: 12px;}
.menu_box{text-align: end;right: 20px;}

.rotate01{
    width: 180px;left: -4%;top: 15%;}
.rotate02{
    width: 100px;left: 7.8%;bottom: 12%;}
.rotate03{
    width: 250px;right: 5%;bottom: 3%;}
    
.sns_icon{width: 30px;
    margin-left: 20px;bottom: 30px;} 

.main_logo{
    width: 180px;left: 18%;}

.main_cont>div .textbox{
    right: 4%;
    top: 53%;transform: translateY(-50%);
    font-size: 1.6rem;}
.main_cont>div .textbox h2{
    margin-bottom: 50px;}
.main_cont>div .more{
    width: 150px; height: 35px;
    line-height: 35px;font-size: 1.15rem;}}


@media screen and (max-width:740px){
#h_top{height: 120px;padding: 0 20px 0;}
.top_logo{margin: auto;
    width: 100px;padding-top: 15px;}
.menu_box{top: 77%;
    text-align: center;right: 0;}
.menu_box li{font-size: 1rem;}
.menu_box li+li{margin-left: 6%;}
.sns_icon{margin-left: 15px;} 

/****섹션 section****/
.fix_box h3{
    bottom: 30px;font-size: 0.95rem;}
.rotate01{
    width: 150px;left: -5%;top: 12%;}
.rotate02{
    width: 80px;left: 7.8%;bottom: 12%;}
.rotate03{
    width: 200px;right: 5%;bottom: 3%;}

.main_logo{
    width: 150px;top: 30%;left: 50%;
    transform: translateX(-50%);}

.main_cont>div .textbox{
    right: auto;left: 50%;
    top: 65%;transform: translate(-50%,-50%);
    font-size: 1.6rem;}
.main_cont>div .textbox h2{
    margin-bottom: 30px;}
.main_cont>div .more{
    width: 140px; height: 30px;
    line-height: 30px;font-size: 1rem;}}


@media screen and (max-width:450px){
#h_top{
    height: 100px;padding: 0 0;}
.top_logo{padding-top: 12px;
    width: 100%;text-align: center;}
.top_logo img{
    width: 80px;}
.menu_box{top: 77%;
    text-align: center;right: 0;}
.menu_box li{font-size: 1rem;}
.menu_box li+li{margin-left: 6%;}
    
/****섹션 section****/
.fix_box h3{bottom: 20px;font-size: 12px;}
.rotate01{display: none;}
.rotate02{display: none;}
.rotate03{
    width: 150px;right: -10%;bottom: 3%;}
.sns_icon{width: 30px;
    margin-left: 15px;bottom: 20px;} 

.main_logo{
    width: 105px;top: 23%;left: 50%;
    transform: translateX(-50%);}

.main_cont>div .textbox{font-size: 1.3rem;
    width: 100%;top: 60%;}
.main_cont>div .textbox h2{
    margin-bottom: 25px;}}