@charset "UTF-8";

#wrap{position: relative;}
/*header-로고 및 네비*/
#header{height: 50px;}
.header {
    position: fixed;
    z-index: 5;
    width: 100%;
    background-color: #fff;
	top:0;
}

.burger {
    position: absolute;
    z-index: 10;
    left: 2%;
    top: 25px;
    cursor: pointer;
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.burger span {font-size:9pt; font-weight:bold;}
.burger__patty {
    width: 35px;
    height: 2px;
    margin: 0 0 4px 0;
    background: #464646;
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.burger__patty:last-child {
    margin-bottom: 0;
}

.burger--close {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.burger--close .burger__patty:nth-child(1) {
    background: #fff;
    -webkit-transform: rotate(45deg) translate(4px, 4px);
    transform: rotate(45deg) translate(4px, 4px);
}

.burger--close .burger__patty:nth-child(2) {
    opacity: 0;
}

.burger--close .burger__patty:nth-child(3) {
    background: #fff;
    -webkit-transform: rotate(-45deg) translate(5px, -4px);
    transform: rotate(-45deg) translate(5px, -4px);
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
}

.menu--active {
    visibility: visible;
    background: #333;
}

.top_meun_doc {
    position: relative;
    width: 1200px;
    margin: 50px auto;
    z-index: 999;
}

.top_logo {
    width: 60px;
    margin: 10px auto;
}


.top_menu {
    position: absolute;
    right: 2%;
    width: 180px;
    top:0px;
}

.top_menu > ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

.top_menu > ul > li {
    float: left;
    margin: 0 5% 0 0;
}

.menu__list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    float: left;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.menu_title {
    width: 50%;
    position: absolute;
    top:100px;
}

.menu_title > ul {
    width: 50%;
    padding: 0;
    list-style: none;
    float: left;
}

.menu_title > ul > li {
    padding: 0;
    margin: 10px;
    color: #fff;
    text-align: center;
}

.menu_title_b {
    font-size: 25pt;
}

.menu_title_s {
    font-size: 16pt;
    color: #eee;
}

.menu__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu__list--active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.menu__brand {
    background: #333;
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.menu__brand--active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.menu__item {
    -webkit-transform: translate3d(500px, 0, 0);
    transform: translate3d(500px, 0, 0);
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu__item--active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.menu__link {
    display: inline-block;
    position: relative;
    /*font-size: 30px;*/
    padding: 15px 0;
    font-weight: 300;
    color: #dadada;
    text-decoration: none;
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu__link:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 10px;
    height: 2px;
    color: #ccc;
    background: white;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu__link:hover:before {
    width: 100%;
}

.menu .menu__item:nth-child(1) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.menu .menu__item:nth-child(2) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.menu .menu__item:nth-child(3) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.menu .menu__item:nth-child(4) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.menu .menu__item:nth-child(5) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.menu .menu__item:nth-child(6) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}


h1,
h2,
h3,
p {
    margin: 0;
    font-weight: 400;
}

main {
    height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 8vw;
}


/*media query*/
/*화면 너비가 0 ~ 1280 : 데스크탑*/
    @media (max-width:1280px){
        .menu_title{top:100px;width: 80%;}        
}
/*화면 너비가 0 ~ 1024 : 노트북 */
@media (max-width : 1240px) {
    .top_meun_doc {width: 100%;}
}
/*화면 너비가 0 ~ 812 : 노트북 */
@media (max-width : 812px) {
	.menu{height:auto;}
    .menu_title {top: 0;}
	.menu_title > ul > li{margin:0;}
	.menu_title_b{font-size: 20pt;}
	.menu_title_b{font-size: 12pt;}
}

/*화면 너비가 0 ~ 576 : 모바일 */
@media (max-width:576px) {
    .top_menu {display: none;}
    .menu_title{width: 100%;top:0px;}
    .menu_title > ul{width: 100%;}
    .menu_title_b{font-size: 20pt;}
	
	#head{height:40px;}
	.top_logo img {width:40px;}
    .burger{top:20px;left:85%;}
	.menu_title > ul > li{margin:8px;}
	.menu_title_b{font-size:15pt;}
	.menu_title_s{font-size:12pt;}
}

/*화면 너비가 0 ~ 375 : 모바일 */
@media (max-width:375px) {
	.txt{width:100%};
	.headline h1 {font-size:21pt;}
	.menu_title > ul > li{margin:5px;}
	.menu_title_b{font-size:12pt;}
	.menu_title_s{font-size:10pt;}
}

/*footer-하단 로고 및 info*/
#footer{margin-top: 30px; background-color: #262626;display: inline-block;width: 100%;}
.footer{padding:5px; margin: 0 auto;left: 0;}
.logo{padding: 20px 10px; float: left;}
.shopinfo{width:70%; float:left;}
address{padding: 20px 0;}
.first{color: #eee; font-size: 10pt;}
.first a {text-decoration:none; color:#fff;}