@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');

body *{word-break:keep-all;}
*{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{padding: 20px 50px 0;
    width: 100%;height: 100px;
    position: fixed;z-index: 10;
    box-sizing: border-box;overflow: hidden;}
#h_top_media{padding: 20px 50px 0;
    width: 100%;height: 100px;
    position: fixed;z-index: 10;
    background: rgba(255, 255, 255, 0.6);
    display: none;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;overflow: hidden;}
.top_logo{margin: 20px 50px 0;
    position: fixed;top: 0;
    overflow: hidden;z-index: 15;}
.top_logo a{ display: block;
    width: 120px;z-index: 15;}
.top_logo img{width: 100%;}
.menu_box{overflow: hidden;
    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;display: inline-block;
    font-size: 1.1rem;cursor: pointer;}
.menu_box li+li{margin-left: 3.5%;}
.select{
    font-weight: 500; color: #efe7d5;
    border-bottom: 3px solid #efe7d5;}

.top_logo_media{margin: 20px 0 0;
    position: fixed;top: 0;display: none;
    left: 50%;transform: translate(-50%);
    overflow: hidden;z-index: 16;}
.top_logo_media a{ display: block;
    width: 120px;z-index: 15;}
.top_logo_media img{width: 100%;}
.menu_box_media{
    overflow: hidden;opacity: 0;
    color: rgba(63, 63, 63, 0.7);
    position: absolute;text-align: end;
    width: 100%;right: 50px;top: 50%;
    transform: translateY(-50%);}
.menu_box_media li{
    line-height: 30px;display: inline-block;
    font-size: 1.1rem;cursor: pointer;}
.menu_box_media li+li{margin-left: 3.5%;}
.select_media{
    font-weight: 500; color: #3f3f3f;
    border-bottom: 3px solid #3f3f3f;}

.sns_icon{opacity: 0.7;
    position: fixed;z-index: 15;
    width: 33px;text-align: center;
    margin-left: 50px;bottom: 30px;}
.sns_icon>div{
    margin: auto;transition: 0.3s;}
.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%;}

#h_bot{
    position: fixed;z-index: 20;
    right: 50px; width: 50px;
    bottom: 30px; cursor: pointer;}
.rotate_box img{width: 100%;}
.top_box{
    position: absolute;width: 25px;
    left: 47%;transform: translateX(-50%);
    bottom: 23px;}
.top_box img{width: 100%;}

/****섹션 section****/
#main_wrap{overflow: hidden;
    width: 100%;height: 100vh;
    position: relative;top: 0;}

/*--메인-----------------*/
.main_box{
    background: url(../img/story_main.jpg)
        no-repeat center/cover;
    position: absolute; top: 0;
    width: 100%; height: 75vh;
    transform: translateY(-100px);
    opacity: 0;transition: 0.5s;
    animation: load 1.5s forwards;}
@keyframes load{
    to{transform: translateY(0);opacity: 1;}
}
.main_identity{
    background: url(../img/identity_main.jpg)no-repeat center/cover;}
.main_product{
    background: url(../img/product_main.jpg)no-repeat center/cover;}
.main_package{
    background: url(../img/package_main.jpg)no-repeat center/cover;}
.main_box h2{
    font-size: 1.8rem;position: absolute;
    z-index: 1; color: #efe7d5;width: 100%;
    top: 50%; text-align: center;}

.scroll{
    position: absolute;width: 100%;
    bottom: 50px;left: 50%;
    transform: translateX(-50%);}
.scroll h2{opacity: 0.8;
    letter-spacing: 1px;text-align: center;
    margin-bottom: 10px;font-weight: 600;}
.scroll_arrow{
    animation: show 1s infinite;
    position: absolute;left: 50%;
    transform: translateX(-50%);
    width: 15px;margin: auto;}
@keyframes show{
    0%{opacity: 0;}
    50%{opacity: 0.5}
    100%{opacity: 1;}}
@keyframes arrow02{
    100%{margin-top: 10px}}
@keyframes arrow03{
    100%{margin-top: 20px}}
.scroll_arrow img{
    position: absolute;width: 100%;}
.scroll_arrow img:nth-child(1){
    animation-delay: 0.1s;
    opacity: 0.5;}
.scroll_arrow img:nth-child(2){
    animation: arrow02 1s infinite;opacity: 0.75;}
.scroll_arrow img:nth-child(3){
    animation: arrow03 1s infinite;}




/****푸터****/
#footer_wrap{
    width: 100%;overflow: hidden;
    position: relative;padding-top: 10%;}
#footer_wrap .footer_logo{
    width: 10%;position: absolute;
    top: 50%; left: 50%;z-index: 1;
    transform: translate(-50%,-50%);}
.footer_box img{width: 100%;opacity: 1;}
.footer_menu{
    width: 100%;text-align: center;
    position: absolute; z-index: 2;bottom: 2%;
    left: 50%; color: rgba(255, 255, 255, 0.5); 
    transform: translate(-50%,-50%);
}
.footer_menu span+span{margin-left: 4%;}

.footer_sns{display: none;}










@media screen and (max-width:1024px){
#h_top{
    height: 80px;padding: 0 20px 0;}
#h_top_media{
    height: 80px;padding: 0 20px 0;}
.top_logo{
    margin: 0 20px 0;padding-top: 12px;}
.top_logo a{width: 110px;}
.top_logo_media{
    margin: 0;padding-top: 12px;}
.top_logo_media a{width: 110px;}
.menu_box{text-align: end;right: 20px;}
.menu_box_media{text-align: end;right: 20px;}
.sns_icon{width: 30px;
    margin-left: 20px;bottom: 30px;}
#h_bot{right: 20px;}
.main_box h2{
    font-size: 1.6rem;}
}


@media screen and (max-width:740px){
#h_top{
    height: 106px;padding: 0 20px 0;}
#h_top_media{
    height: 79px;padding: 0 20px 0;}
.top_logo{
    margin: 0 0 0 0; 
    left: 50%;transform: translateX(-50%);
    padding-top: 15px;}
.top_logo a{width: 100px;margin: auto;}
.top_logo_media{padding-top: 15px;}
.top_logo_media a{width: 100px;margin: auto;}
.menu_box{top:84%;
    text-align: center;right: 0;}
.menu_box li{font-size: 1rem;}
.menu_box li+li{margin-left: 6%;}
    
.main_box{height: 75vh;}
.main_box h2{font-size: 1.5rem;}
.scroll h2{font-size: 0.9rem;}
.scroll_arrow{width: 13px;}
/****푸터****/
#footer_wrap{padding-top: 20%;}
#footer_wrap .footer_logo{
    width: 15%;top: 45%;}
.footer_menu{bottom: 5%;}
.footer_menu span+span{margin-left: 4%;}

.sns_icon{margin-left: 15px;opacity: 0.5s}
#h_bot{right: 15px;}
}



@media screen and (max-width:450px){
#h_top{position: fixed;
    height: 93px;padding: 0 0;}
#h_top_media{position: fixed;
    height: 65px;padding: 0 0;}
.top_logo{padding-top: 12px;position: fixed;
    width: 100%;text-align: center;}
.top_logo img{width: 80px;}
.top_logo_media{padding-top: 12px;position: fixed;
    width: 100%;text-align: center;}
.top_logo_media img{width: 80px;}

.menu_box{top: 82%;
    text-align: center;right: 0;}
.menu_box li{font-size: 1rem;}
.menu_box li+li{margin-left: 6%;}
.menu_box_media{top: 82%;
    text-align: center;right: 0;}
.menu_box_media li{font-size: 1rem;}
.menu_box_media li+li{margin-left: 6%;}
.sns_icon{display: none;}  

.main_box{height: 71vh;}
.main_box h2{font-size: 1.3rem;}
.scroll h2{font-size: 0.9rem;}
.scroll_arrow{width: 13px;}
/****섹션 section****/
    
#footer_wrap .footer_logo{
    width: 20%;top: 40%;}

    
#h_bot{
    right: 15px; width: 45px;bottom: 20px;}
.top_box{
    width: 22px;left: 47.5%;bottom: 22px;}

    
    
  
    
}