section {width: 100%; padding: 0 15px;}
article {width: 100%; max-width: 1400px; margin: 0 auto;}

/* 헤더 */
.header {width: 100%; padding: 15px; display: grid; grid-template-columns: auto 1480px auto; gap: 30px; align-items: center; position: fixed; z-index: 100; top: 0;}
.header_manu {width: 100%; transition: .3s; }

.header.back { backdrop-filter: blur(10px);}

.main_logo img {height: 40px;}

.main_manu {display: flex; gap: 30px;}
.main_manu li a {font-size: 20px; font-weight: 500; position: relative; padding: 10px 15px; }
.main_manu li a:after {content: ""; display: block; background: #73e473; width: 100%; height: 100%; position: absolute; top: 0; z-index: -1; border-radius: 15px; transition: .3s; opacity: 0;}
.main_manu li a:hover {color: #333;}
.main_manu li a:hover:after {width: 100%; opacity: 1;}

.sns_menu {display: flex; justify-content: right; gap: 15px; width: 100%;}
.sns_menu a {width: 30px; height: 30px;}
.sns_menu a img {width: 30px;}

.open_menu {width: 30px; height: 30px; position: relative; display: none; z-index: 1000;}
.open_menu div {width: 100%; height: 3px; background: #333; border-radius: 2px; position: absolute; transition: .3s;}
.open_menu div:nth-child(1) {top: 0}
.open_menu div:nth-child(2) {top: 50%; transform: translateY(-50%);}
.open_menu div:nth-child(3) {bottom: 0;}

.open_menu.on div:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
.open_menu.on div:nth-child(2) {top: 50%; transform: translateY(-50%) rotate(-45deg); opacity: 0;}
.open_menu.on div:nth-child(3) {bottom: 50%; transform: translateY(50%) rotate(-45deg);}

.mb_menu {position: absolute; background: #fff; height: 100vh; width: 100vw; top: 0; display: flex; justify-content: center; align-items: center; z-index: 1; left: -100%; transition: .3s; opacity: 0;}
.mb_menu.on {left: 0; opacity: 1;}
.mb_menu_in {width:100%; max-width: 1400px; display: grid; gap: 15px; padding: 0 30px;}
.mb_menu_in li {}
.mb_menu_in li a {font-size: 70px; transition: .2s; border-radius: 15px; padding: 5px 15px;}
.mb_menu_in li a:hover {background: #333; color: #fff;}

@media(max-width: 1400px) {  
    /* 헤더 */
    .header {grid-template-columns: auto auto 30px;}
    .header_manu {display: none;}
    .open_menu {display: block;}
}

@media(max-width: 760px) {  
    .mb_menu_in {padding: 0 15px;}
    .mb_menu_in li a {font-size: 60px;}
}