#main{ padding-right: 100px; padding-top: 100px; }

@media screen and (max-width: 1280px){
	#main{ padding-right: 0; }
}

@media screen and (max-width: 1000px){
	#main{ padding-top: 70px; }
}

/* 메인 비주얼 */
#main #visual{ display: flex; justify-content: flex-end; background: var(--mainColor); position: relative; }
#main .wrapper{ max-width: 1560px; width: 100%; display: flex; justify-content: flex-end; position: relative; } 

#visual .position{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 0; left: 0; z-index: 10; color: #fff; padding: 4% 0 2%; overflow: hidden; pointer-events: none; }
#visual .text h4{ font-size: 2.2rem; font-weight: 300; }
#visual .text h2{ font-size: 5.8rem; font-weight: 600; line-height: 1.4137; margin-top: 20px; }

#visual .btn-zip{ display: flex; align-items: center; pointer-events: none; }
#visual .btn-zip button{ display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; background: none; border: none; border-radius: 50%; pointer-events: auto; }
#visual .btn-zip div button{ border: 1px solid #fff; }
#visual .btn-zip > button{ background: #fff; position: relative; }
#visual .btn-zip > button::after{ content: url("/img/main/play_button.png"); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; }
#visual .btn-zip > button.stop::after{ opacity: 1; }
#visual .btn-zip > button.stop img{ opacity: 0; }
#visual .btn-zip div{ display: flex; align-items: center; margin-right: 14px; }
#visual .btn-zip p{ font-size: 1.6rem; font-weight: 300; margin: 0 25px; }
#visual .btn-zip p .index{ font-weight: 700; }

#visual .inner{ max-width: 1170px; width: 100%; position: relative; }
#visual .visual{ height: 500px; }
#visual .visual01{ background: url("/img/main/main_visual.png") no-repeat center left / cover; }
#visual .visual02{ background: url("/img/main/main_visual02.jpg") no-repeat center left / cover; }
#visual .visual03{ background: url("/img/main/main_visual03.jpg") no-repeat center left / cover; }
#visual .visual04{ background: url("/img/main/main_visual04.jpg") no-repeat center left / cover; }
#visual .visual05{ background: url("/img/main/main_visual05.jpg") no-repeat center left / cover; }
#visual .visual06{ background: url("/img/main/main_visual06.jpg") no-repeat center left / cover; }
#visual .visual07{ background: url("/img/main/main_visual07.jpg") no-repeat center left / cover; }
#visual .visual08{ background: url("/img/main/main_visual08.jpg") no-repeat center left / cover; }
#visual .visual09{ background: url("/img/main/main_visual09.jpg") no-repeat center left / cover; }

#visual .quick-menu{ width: 100%; position: absolute; bottom: 0; left: 0; z-index: 10; }
#visual .quick-menu ul{ display: flex;  background: rgba(0, 0, 0, 0.7); }
#visual .quick-menu ul li{ width: calc(100% / 4); height: 85px; position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; font-weight: 400; color: #fff; text-align: center; }
#visual .quick-menu ul li::before{ content: ""; width: 1px; height: 30px; background: rgba(255, 255, 255, 0.2); position: absolute; top: 50%; right: 0; z-index: -1; transform: translateY(-50%); }
#visual .quick-menu ul li:last-of-type::before{ display: none; }
#visual .quick-menu ul li::after{ content: ""; width: calc(100% + 1px); height: 100%; background: #222; position: absolute; top: 0; left: -1px; z-index: -1; display: none; }
#visual .quick-menu ul li:first-of-type::after{ width: 100%; left: 0; }
#visual .quick-menu ul li img{ margin-right: 20px; }
#visual .quick-menu ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

#visual .quick-menu ul li:hover::after{ display: block; }

@media screen and (max-width: 1680px){
	#visual .position{ padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 1500px){
	#visual .position{ height: calc(100% - 85px); justify-content: center; }
	#visual .btn-zip{ padding-top: 40px; } 
}

@media screen and (max-width: 1280px){
	#visual .inner{ max-width: 100%; }
	#visual .position{ height: calc(100% - 70px); }
	#visual .text h4{ font-size: 2rem; }
	#visual .text h2{ font-size: 4.8rem; }

	#visual .quick-menu ul li{ height: 70px; }
}

@media screen and (max-width: 1000px){
	#visual .position{ height: calc(100% - 100px); }
	#visual .quick-menu ul{ flex-wrap: wrap; }
	#visual .quick-menu ul li:nth-of-type(2n)::before{ display: none; }
	#visual .quick-menu ul li{ width: calc(100% / 2); height: 50px; }
}

@media screen and (max-width: 600px){
	#visual .text h2{ font-size: 4rem; }
}


#content{ padding: 80px 0; display: flex; justify-content: flex-end; }
#content .right{ max-width: 1560px; width: 100%; }
#content .w1440{ max-width: 1440px; width: 100%; }

#content ul{ display: flex; margin-left: -20px; }
#content ul li{ padding: 0 20px; width: calc(100% / 4); border-right: 1px solid #ddd; }
#content ul li:last-of-type{ border-right: none; }
#content ul li .title{ position: relative; padding-bottom: 25px; }
#content ul li h3{ font-size: 2.8rem; font-weight: 700; color: #222; position: relative; }
#content ul li h3::after{ content: url("/img/main/more_btn.png"); position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#content ul li h3.Poppins{ font-family: var(--Poppins); font-weight: 600; }
#content ul li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 65%; }
#content ul li img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#content ul li .content{ position: relative; }
#content ul li h4{ width: 100%; font-size: 1.8rem; font-weight: 500; color: #333; padding: 15px 0; border-bottom: 1px solid #ddd; margin-bottom: 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#content ul li span{ font-size: 1.4rem; font-weight: 400; color: #aaa; }
#content ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 

@media screen and (max-width: 1680px){
	#content ul{ margin-left: 0; }
}

@media screen and (max-width: 1280px){
	#content ul li .title{ padding-bottom: 15px; }
	#content ul li h3{ font-size: 2.4rem; }
} 

@media screen and (max-width: 1200px){
	#content ul{ flex-wrap: wrap; margin-bottom: -40px; }  
	#content ul li{ width: calc(100% / 2); margin-bottom: 40px; }
}

@media screen and (max-width: 700px){
	#content{ padding: 40px 0 80px; }
	#content ul li{ width: 100%; }
}

@media screen and (min-width: 1921px){
	#main .wrapper{ margin: 0 auto; }
	#content .right{ margin: 0 auto; }
}