/* intro */
.intro{display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-content: center; width: 65%; margin: auto; gap: 2rem; height: 95vh;}

.left-box{border-radius: 1rem; overflow: hidden;}
.right-box{overflow: hidden; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); border-radius: 1rem; padding: 2rem;}
.right-box h1 img{width: 40%; margin: auto;}
.intro-banner{border-radius: 0.5rem; overflow: hidden;}

.intro-btns{display: flex; align-items: center; justify-content: center; gap: 10px; margin: 1rem auto;}
.intro-btns li a{display: inline-block; background-color: #eee; padding: 0.5rem 1rem; border-radius: 0.3rem;}
.intro-btns li a:hover{background-color: #333; color: #fff;}

.intro-login{display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2rem auto;}
.login-info{text-align: left;}
.login-info li:first-of-type{margin-bottom: 0.5rem;}
.login-info input:first-of-type{border: 1px solid #ccc; padding: 0.5rem; margin-right: 0.5rem; border-radius: 0.2rem;}
.login-info input[type=checkbox]{margin-right: 5px;}
.login-btn button{background-color: #333; color: #fff; padding: 0.6rem 2rem; display: inline-block; border-radius: 0.3rem; width: 100%;}
.login-btn li:first-of-type{margin-bottom: 0.5rem;}
.intro-slide{width: 100%; overflow: hidden;}
.intro-slide a{margin: 0 0.5rem; }
.intro-slide img{border-radius: 1rem;}

/* main */
main{margin: 1rem auto;}
.main-full-slide{border-radius: 0.5rem; overflow: hidden; visibility: hidden;}
.main-full-slide.slick-initialized {visibility: visible;}
.m-main-full-slide{border-radius: 0.5rem; overflow: hidden; display: none; visibility: hidden;}
.m-main-full-slide.slick-initialized {visibility: visible;}

.main-wrap{display: grid; grid-template-columns: repeat(10,1fr); width: 100%; gap: 1.5rem 1rem;}
.main-container{}
.main-container h2{font-size: 1.2rem; text-align: left;}
.main-container h2 small{float: right; color: #777; font-weight: 400; font-size: 0.9rem;}

#mc1{grid-column: 1 / span 4;}
#mc2{grid-column: 5 / span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem;}
#mc3{grid-column: 7 / span 4; }
#mc4{grid-column: 1 / span 5;}
#mc5{grid-column: 6 / span 5;}
#mc6{grid-column: 1 / span 10;}
#mc7{grid-column: 1 / span 10; display: grid; grid-template-columns: repeat(4,1fr); gap: 0.8rem;}

#mc2 a{border-radius: 0.5rem; overflow: hidden;}
#mc7 a{border-radius: 0.5rem; overflow: hidden;}

#mc1,#mc3{text-align: left; border: 1px solid #eee; padding: 0.6rem; border-radius: 0.5rem;}
#mc1 ul,#mc3 ul{border-top: 2px solid #8ec251; margin-top: 0.5rem; padding-top: 0.6rem;}

#mc1 ul li{background-color: #f9f9f9; margin-bottom: 0.5rem; padding: 0.4rem;}
#mc1 ul b{font-weight: 400; background-color: #999; color: #fff; width: 16px; padding: 0.2rem; border-radius: 0.2rem; display: inline-block; font-size: 0.9rem; margin-right: 0.5rem;}
#mc1 ul li:nth-child(-n+3) b{background-color: #8ec251;}
#mc3 ul li{margin-bottom: 1rem;}
#mc5 h2{margin-bottom: 1rem;}

.youtube{height: 100%; border-radius: 0.5rem; overflow: hidden;}
.youtube iframe{width: 100%; height: 100%;}

.review-slide {margin: 0 -5px; text-align: left;}
.review-slide .slick-slide{margin: 0 5px;}
.review-slide h6{font-size: 1rem; margin: 0.7rem auto;}
.review-slide p{font-size: 0.9rem; max-height: 90px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 5; -webkit-line-clamp: 5; }

.recipe-slide{margin: 0 -10px;}
.recipe-slide .slick-slide{margin: 0 10px;}
.recipe-slide img{padding: 0.5rem;}
.recipe-slide p{border-top: 1px solid #333; padding-top: 0.5rem; }


/* 메인 팝업 */
.main-popup{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); overflow: hidden; z-index: 6;}
.m-pop-content{display: flex;  align-items: center; justify-content: center;  flex-direction: column; height: 100%; width: fit-content; margin: auto;}
.m-pop-content ul{display: flex;}
.m-pop-btn{display: flex; justify-content: space-between; align-items: center; background-color: #333; width: 100%; padding: 0.5rem 1rem; color: #fff; margin-top: -4px;}
.m-pop-btn .close-btn{background-color: #111; padding: 0.5rem 0.7rem; border-radius: 0.3rem;}
#main_popup{margin-right: 5px;}