/* 인트로 화면 = basic 테마의 메인 */

#vis { display: none; }
#contentId-main #container { position: relative; width: 100%; height: 100vh; min-height: auto; margin: 0; background: url("../images/intro_bg.jpg") center / cover no-repeat; z-index: 1; }
#contentId-main #container::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: #363636; z-index: -1; }

.intro-container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 1280px; height: 100%; margin: 0 auto; padding: 3.125rem 0 4.688rem; }
.intro-top { width: 100%; height: 40%; display: flex; flex-direction: column; justify-content: center; }
.intro-btm { width: 100%; height: 60%; }

.intro-logo { width: 100%; }
.intro-txt { position: relative; width: 100%; letter-spacing: -0.06em; }
.intro-txt p { color: #555; font-family: 'Bodoni Moda','Pretendard',sans-serif; font-style: italic; font-size: 2.063rem; font-weight: 800; }
.intro-txt h2 { color: #111; font-size: 2.25rem; font-weight: 300; }
.text-wbg { position: absolute; bottom: -50%; right: 0; color: transparent; -webkit-text-stroke: 1px rgba(219,219,219,0.7); font-family: 'GmarketSansBold','Pretendard',sans-serif; font-size: 6.75rem; font-weight: 800; z-index: -1; }

.theme-link { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.theme-link > li { width: 39rem; height: 100%; margin: 0 1.156rem; padding: 2.5rem; background-color: #fff; background-position: bottom center; background-size: contain; background-repeat: no-repeat; border: 1px solid #ddd; box-shadow: 0 0 1.25rem rgba(0,0,0,0.16); }
.theme-link > li > a { display: block; width: 100%; height: 100%; }

.theme-link .number { margin-bottom: 0.313rem; color: rgba(54,54,54,0.54); font-weight: 700; }
.theme-link > li h3 { margin-bottom: 1.125rem; font-size: 2.5rem; font-weight: 700; letter-spacing: 0; }
.theme-link p { font-size: 1.125rem; font-weight: 300; letter-spacing: -0.06em; }

.theme-link > li span { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 186px; height: 56px; margin-top: 8%; padding: 0 0.5rem; border: 1px solid #111; color: #111; font-family: 'Bodoni Moda','Pretendard',sans-serif; font-size: 1.125rem; font-weight: 700; font-style: italic; letter-spacing: 0; transition: all .25s; z-index: 1; }
.theme-link > li span::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #111; z-index: -1; transition: all .25s; }

.theme-link > li:nth-child(1) { background-image: url("../images/intro01-05.png"); }
.theme-link > li:nth-child(1) h3 { color: #0B3760; }
.theme-link > li:nth-child(1) span { border-color: #0B3760; color: #0B3760; }
.theme-link > li:nth-child(1) span::before { background: #0B3760; }
.theme-link > li:nth-child(2) { background-image: url("../images/intro02.png"); }
.theme-link > li:nth-child(2) h3 { color: #FF433D; }
.theme-link > li:nth-child(2) span { border-color: #FF433D; color: #FF433D; }
.theme-link > li:nth-child(2) span::before { background: #FF433D; }

@media ( max-height: 600px ) {
	.intro-top { height: 55%; }
	.intro-btm { height: 45%; }
	.text-wbg { bottom: -30%; font-size: 4.75rem; }
}
@media ( max-width: 1330px ) {
	.intro-top,.intro-btm { padding: 0 2rem; }
	.theme-link > li { width: 50%; margin: 0 0.5rem; }
}
@media ( max-width: 992px ) {
    .theme-link > li > a > div { margin-top: 25%; }
    .theme-link > li h3 { font-size: 1.75rem; }
    .theme-link p br { display: none; }
    .theme-link > li span { width: 135px; height: 45px; margin-top: 25%; font-size: 1rem; }
}
@media ( max-width: 768px ) {
	.intro-top, .intro-btm { height: 50%; }

	.intro-txt h2 { font-size: 1.25rem; }
	.text-wbg { font-size: 2.75rem; }
    .theme-link > li span { margin-top: 8%; }
}
@media ( max-width: 576px ) {
    #contentId-main #container, .intro-top, .intro-btm { height: auto; }
    #contentId-main #container::after { height: 200px; }
	.intro-txt h2 { font-size: 1.125rem; }
	.intro-top,.intro-btm { padding: 0; }
    .intro-btm { margin-top: 2rem; }
    .theme-link { display: block; height: auto; }
    .theme-link > li { width: 100%; margin: 1rem 0; padding: 2rem 2rem 5rem 2rem; }
    .theme-link > li > a > div { margin-top: 0; }
    .theme-link > li h3 { font-size: 1.5rem; }
}

@media (hover: hover), (-ms-high-contrast:none) {
    .theme-link > li:hover span { color: #fff; }
    .theme-link > li:hover span::before { width: 100%; }
}