@charset "utf-8";

/* Main container */
#container.main { background-color: var(--main-black); color: #fff; }
.main-cont-wrap > .inner > .main-sec { width: 100%; }

/* section 1 - search */
.main-sec1 { padding: 16rem 0; }
.main-sec1 .main-srch { width: 100%; max-width: 102.4rem; margin: 0 auto; }
.main-sec1 .main-srch-tit { margin-bottom: 2.4rem; font-size: var(--fs-24); font-weight: 700; line-height: 125%; color: #fff; }
.main-sec1 .main-srch-form { display: flex; align-items: center; height: 7.2rem; padding: 0 2rem; border: 0.1rem solid rgba(255, 255, 255, 0.5); }
.main-sec1 .main-srch-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font-size: var(--fs-20); font-weight: 400; line-height: 100%; color: #fff; }
.main-sec1 .main-srch-input:focus { outline: none; }
.main-sec1 .main-srch-input::placeholder { color: #fff; opacity: 0.8; }
.main-sec1 .main-srch-btn { flex-shrink: 0; width: 4rem; height: 4rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.main-sec1 .main-srch-btn img { display: block; width: 4rem; height: 4rem; }
.main-sec1 .main-srch-tags { display: flex; align-items: center; margin-top: 2rem; }
.main-sec1 .main-srch-tags-label { flex-shrink: 0; font-size: var(--fs-18); font-weight: 500; line-height: 100%; color: var(--key-color); }
.main-sec1 .main-srch-tags-divider { flex-shrink: 0; width: 0.1rem; height: 1.6rem; margin: 0 2rem; background: rgba(255, 255, 255, 0.5); }
.main-sec1 .main-srch-tags-list { display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; }
.main-sec1 .main-srch-tags-list a { font-size: var(--fs-18); font-weight: 300; line-height: 100%; color: #fff; }

/* section 2 - featured contents */
.main-sec2 .main-fa { width: 100%; }
.main-sec2 .main-fa-tit { margin-bottom: 3.2rem; font-size: var(--fs-32); font-weight: 400; line-height: 125%; color: #fff; }
.main-sec2 .main-fa-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3.2rem; }
.main-sec2 .main-fa-item { display: flex; flex-direction: column; position: relative; height: 20rem; padding: 2.5rem 1.6rem 1.6rem; border-top: 0.1rem solid rgba(255, 255, 255, 0.5); border-bottom: 0.1rem solid rgba(255, 255, 255, 0.5); }
.main-sec2 .main-fa-cate { margin-bottom: 1.2rem; font-size: var(--fs-18); font-weight: 600; line-height: 100%; color: var(--key-color); }
.main-sec2 .main-fa-item-tit { padding-right: 1.6rem; font-size: var(--fs-22); font-weight: 400; line-height: 140%; color: #fff; }
.main-sec2 .main-fa-arr { display: flex; align-items: center; justify-content: center; position: absolute; right: 1.2rem; bottom: 1.6rem; width: 4rem; height: 4rem; border-radius: 50%; transition: background-color 0.3s ease; }
.main-sec2 .main-fa-arr img { display: block; width: 4rem; height: 4rem; }
.main-sec2 .main-fa-item:hover .main-fa-arr { background-color: var(--key-color); }

/* section 3 - new contents */
.main-sec3 { margin-top: 12rem; }
.main-sec3 .main-new { width: 100%; }
.main-sec3 .main-new-tit { margin-bottom: 3.2rem; font-size: var(--fs-32); font-weight: 400; line-height: 125%; color: #fff; }
.main-sec3 .main-new-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2rem; }
.main-sec3 .main-new-item { display: block; overflow: hidden; position: relative; height: 32rem; background-color: rgba(255, 255, 255, 0.05); }
.main-sec3 .main-new-bg { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center bottom; background-size: cover; opacity: 0.8; transition: opacity 0.3s ease, filter 0.3s ease; }
.main-sec3 .main-new-list > li:nth-child(1) .main-new-bg { background-image: url('/resources/img/main/main_sec02_bg_01.png'); }
.main-sec3 .main-new-list > li:nth-child(2) .main-new-bg { background-image: url('/resources/img/main/main_sec02_bg_02.png'); }
.main-sec3 .main-new-list > li:nth-child(3) .main-new-bg { background-image: url('/resources/img/main/main_sec02_bg_03.png'); }
.main-sec3 .main-new-list > li:nth-child(4) .main-new-bg { background-image: url('/resources/img/main/main_sec02_bg_04.png'); }
.main-sec3 .main-new-list > li:nth-child(5) .main-new-bg { background-image: url('/resources/img/main/main_sec02_bg_05.png'); }
.main-sec3 .main-new-list > li:nth-child(6) .main-new-bg { background-image: url('/resources/img/main/main_sec02_bg_06.png'); }
.main-sec3 .main-new-dim { position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.08); pointer-events: none; transition: background-color 0.3s ease; }
.main-sec3 .main-new-cont { position: relative; z-index: 1; padding: 3.2rem 2.4rem; }
.main-sec3 .main-new-cate { margin-bottom: 1.2rem; font-size: var(--fs-18); font-weight: 600; line-height: 100%; color: var(--key-color); }
.main-sec3 .main-new-item-tit { font-size: var(--fs-22); font-weight: 400; line-height: 125%; letter-spacing: -0.044rem; color: #fff; }
.main-sec3 .main-new-item:hover .main-new-bg { opacity: 1; filter: brightness(1.15); }
.main-sec3 .main-new-item:hover .main-new-dim { background-color: rgba(255, 255, 255, 0.04); }

/* section 4 - quick menu */
.main-sec4 { margin-top: 12rem; margin-bottom: 10rem; }
.main-sec4 .main-quick { display: flex; width: 100%; gap: 2rem; }
.main-sec4 .main-quick-item { flex: 0 0 45rem; position: relative; height: 40rem; padding: 4rem; }
.main-sec4 .main-quick-crown { background-color: var(--key-color); }
.main-sec4 .main-quick-circle { border: 0.1rem solid rgba(255, 255, 255, 0.5); }
.main-sec4 .main-quick-ico { display: block; width: 4rem; height: 4rem; }
.main-sec4 .main-quick-ico img { display: block; width: 4rem; height: 4rem; }
.main-sec4 .main-quick-tit { margin-top: 1.2rem; font-size: 4.4rem; font-weight: 600; line-height: 100%; }
.main-sec4 .main-quick-crown .main-quick-tit { color: var(--main-black); }
.main-sec4 .main-quick-circle .main-quick-tit { color: #fff; }
.main-sec4 .main-quick-desc { font-size: var(--fs-22); font-weight: 400; line-height: 100%; }
.main-sec4 .main-quick-item .main-quick-desc { margin-top: 2.4rem; }
.main-sec4 .main-quick-item .main-quick-desc + .main-quick-desc { margin-top: 3rem; }
.main-sec4 .main-quick-crown .main-quick-desc-group,
.main-sec4 .main-quick-circle .main-quick-desc-group,
.main-sec4 .main-quick-nox .main-quick-desc-group { margin-top: 2.4rem; }
.main-sec4 .main-quick-crown .main-quick-desc-group + .main-quick-desc-group,
.main-sec4 .main-quick-circle .main-quick-desc-group + .main-quick-desc-group,
.main-sec4 .main-quick-nox .main-quick-desc-group + .main-quick-desc-group { margin-top: 2rem; }
.main-sec4 .main-quick-crown .main-quick-desc-group .main-quick-desc,
.main-sec4 .main-quick-circle .main-quick-desc-group .main-quick-desc,
.main-sec4 .main-quick-nox .main-quick-desc-group .main-quick-desc { margin-top: 0; }
.main-sec4 .main-quick-crown .main-quick-desc-group .main-quick-desc + .main-quick-desc,
.main-sec4 .main-quick-circle .main-quick-desc-group .main-quick-desc + .main-quick-desc,
.main-sec4 .main-quick-nox .main-quick-desc-group .main-quick-desc + .main-quick-desc { margin-top: 0.8rem; }
.main-sec4 .main-quick-crown .main-quick-desc { color: var(--main-black); }
.main-sec4 .main-quick-circle .main-quick-desc { color: #fff; }
.main-sec4 .main-quick-plus { position: absolute; right: 4rem; bottom: 4rem; width: 3.5rem; height: 3.5rem; }
.main-sec4 .main-quick-plus:hover { animation: main-quick-plus-spin .45s ease; }
.main-sec4 .main-quick-plus::before,
.main-sec4 .main-quick-plus::after { content: ''; position: absolute; background: #fff; }
.main-sec4 .main-quick-plus::before { top: 50%; left: 0; width: 100%; height: 0.1rem; transform: translateY(-50%); }
.main-sec4 .main-quick-plus::after { top: 0; left: 50%; width: 0.1rem; height: 100%; transform: translateX(-50%); }
@keyframes main-quick-plus-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.main-sec4 .main-quick-nox { flex: 1; min-width: 0; margin-left: 6rem; padding-top: 4rem; border-top: 0.1rem solid rgba(255, 255, 255, 0.5); }
.main-sec4 .main-quick-nox-head { display: flex; align-items: baseline; gap: 0.8rem; }
.main-sec4 .main-quick-nox-tit { font-size: var(--fs-36); font-weight: 600; line-height: 100%; color: #fff; }
.main-sec4 .main-quick-nox-sub { font-size: var(--fs-30); font-weight: 400; line-height: 100%; color: #fff; }
.main-sec4 .main-quick-nox .main-quick-desc { color: #fff; }
.main-sec4 .main-quick-link { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 8.3rem; font-size: var(--fs-22); font-weight: 600; line-height: 100%; letter-spacing: -0.044rem; color: var(--key-color); }
.main-sec4 .main-quick-link > span { padding-bottom: 1.2rem; border-bottom: 0.1rem solid var(--key-color); }
.main-sec4 .main-quick-link img { display: block; width: 2rem; height: 2rem; }

/* main sections responsive */
@media screen and (max-width: 1440px) {
	.main-sec2 .main-fa-list { grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
	.main-sec3 .main-new-list { grid-template-columns: repeat(4, 1fr); }
	.main-sec4 .main-quick-item { flex: 0 0 40rem; }
	.main-sec4 .main-quick-nox { margin-left: 4rem; }
}

@media screen and (max-width: 1024px) {
	.main-sec1 { padding: 12rem 0; }
	.main-sec1 .main-srch-form { height: 6.4rem; }
	.main-sec1 .main-srch-tags { flex-wrap: wrap; row-gap: 1.2rem; }
	.main-sec2 .main-fa-list { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
	.main-sec2 .main-fa-item { height: auto; min-height: 18rem; }
	.main-sec3 { margin-top: 10rem; }
	.main-sec3 .main-new-list { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
	.main-sec3 .main-new-item { height: 28rem; }
	.main-sec4 { margin-top: 10rem; }
	.main-sec4 .main-quick { flex-wrap: wrap; }
	.main-sec4 .main-quick-item { flex: 1 1 calc(50% - 1rem); height: auto; min-height: 36rem; }
	.main-sec4 .main-quick-nox { flex: 1 1 100%; margin-top: 4rem; margin-left: 0; }
	.main-sec4 .main-quick-link { margin-top: 4rem; }
}

@media screen and (max-width: 768px) {
	.main-sec1 { padding: 8rem 0; }
	.main-sec1 .main-srch-tit { margin-bottom: 2rem; }
	.main-sec1 .main-srch-form { height: 5.6rem; padding: 0 1.6rem; }
	.main-sec1 .main-srch-btn,
	.main-sec1 .main-srch-btn img { width: 3.2rem; height: 3.2rem; }
	.main-sec1 .main-srch-tags-divider { margin: 0 1.6rem; }
	.main-sec1 .main-srch-tags-list { gap: 1.2rem 1.6rem; }
	.main-sec2 .main-fa-tit,
	.main-sec3 .main-new-tit { margin-bottom: 2.4rem; }
	.main-sec2 .main-fa-list { grid-template-columns: 1fr; gap: 1.6rem; }
	.main-sec2 .main-fa-item { min-height: 16rem; padding: 2rem 1.6rem 1.6rem; }
	.main-sec3 { margin-top: 8rem; }
	.main-sec3 .main-new-list { grid-template-columns: repeat(2, 1fr); }
	.main-sec3 .main-new-item { height: 24rem; }
	.main-sec3 .main-new-cont { padding: 2.4rem 2rem; }
	.main-sec4 { margin-top: 8rem; margin-bottom: 8rem; }
	.main-sec4 .main-quick { flex-direction: column; gap: 1.6rem; }
	.main-sec4 .main-quick-item { flex: 1 1 auto; min-height: 32rem; padding: 3.2rem 2.4rem; }
	.main-sec4 .main-quick-nox { margin-top: 2.4rem; padding-top: 3.2rem; }
	.main-sec4 .main-quick-plus { right: 2.4rem; bottom: 2.4rem; }
}

@media screen and (max-width: 500px) {
	.main-sec1 { padding: 6rem 0; }
	.main-sec1 .main-srch-tags { align-items: flex-start; flex-direction: column; }
	.main-sec1 .main-srch-tags-divider { display: none; }
	.main-sec3 .main-new-list { grid-template-columns: 1fr; }
	.main-sec3 .main-new-item { height: 22rem; }
	.main-sec4 .main-quick-tit { font-size: var(--fs-36); }
}

/* index popup */
.divpop { position: fixed; z-index: 9999; background: #fff; border: 0.1rem solid #eee; }
.divpop .close_box { padding: 0.5rem; color: #000; border-top: 0.1rem solid #eee; }
.divpop .close_box label { font-size: 1.2rem; }
.divpop .close_box .close { float: right; padding-top: 0.3rem; font-size: 1.4rem; color: #999; cursor: pointer; }

@media screen and (max-width: 1200px) {
	.divpop { left: 0 !important; }
}

@media screen and (max-width: 768px) {
	.divpop { top: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; }
}