@charset "utf-8"; /*
    GGAC INTRO STYLE
    WRITER : Lee Jeonghee
	Last Modify Date : 2025. 11. 20.
*/
@import url("/resource/css/base.css"); 

html, 
body, 
main, 
#container { width:100%; height:100%; }
.header { position:fixed; top:4rem; left:1.5625%; z-index:2; }
.logo a { display:block; width:17.9rem; height:4rem; background:url(/ggac/images/intro/logo.png) no-repeat center; background-size:contain; text-indent:-9999em; }
/* video */
.videoWrap { display:flex; align-items:center; justify-content:center; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:5; }
.videoWrap video { width:100%; height:100%; object-fit:cover; }
.btnSkip { position:absolute; bottom:10rem; left:50%; transform:translateX(-50%); }
.btnSkip button { display:block; padding:2rem 4rem; font-size:1.7rem; font-weight:500; background:rgba(255, 255, 255, .5); border-radius:3em; }
.btnSkip button span { display:inline-block; position:relative; padding:0 3.2rem; }
.btnSkip button span::before,
.btnSkip button span::after { content:''; position:absolute; top:50%; left:0; width:2.2rem; height:1px; background:rgba(0, 0, 0, .63); }
.btnSkip button span::after { left:auto; right:0; }
.btnVolume { position:absolute; top:2rem; left:2.4rem; }
.btnVolume button { display:block; width:3rem; height:3rem; background:url(../images/intro/btn_volume_off.png) no-repeat center / contain; text-indent:-9999em; }
.btnVolume button.on { background-image:url(../images/intro/btn_volume_on.png); }
.btnFull { display:none; }
/* content */
.introWrap { position:relative; width:100%; height:100%; min-height:900px; padding:0 3%; background:#333333; box-sizing:border-box; }
.introWrap::before, 
.introWrap::after { content:''; position:absolute; bottom:7rem; left:0; width:36.8rem; height:25.6rem; background:url(../images/intro/bg_left.png) no-repeat center / contain; }
.introWrap::after { top:13rem; bottom:auto; left:auto; right:0; width:36.2rem; background-image:url(../images/intro/bg_right.png); }
.introWrap .introBg { position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center / cover; z-index:1; }
.introWrap .inner { display:flex; flex-direction:column; justify-content:end; position:relative; max-width:1500px; height:100%; margin:0 auto; z-index:2; }
.noticeArea { max-width:60rem; margin-bottom:14rem; }
.noticeSwiper { overflow:hidden; }
.noticeSwiper .swiper-slide a { display:block; color:#fff; letter-spacing:-.025em; }
.noticeSwiper .swiper-slide a strong { display:block; font-size:2.4rem; }
.noticeSwiper .swiper-slide a span { overflow:hidden; display:block; margin-top:1.2rem; font-size:1.9rem; text-overflow:ellipsis; white-space:nowrap; }
.pagination { margin-bottom:2.6rem; }
.pagination .swiper-pagination-bullet { opacity:1; width:.8rem; height:.8rem; background:none; border:1px solid #fff; border-radius:50%; box-sizing:border-box; transition:width .1s; }
.pagination .swiper-pagination-bullet-active { width:2.6rem; border-radius:3em; background:#fff; }
.siteLink ul { display:flex; }
.siteLink ul li { flex:1; border-right:1px solid rgba(255, 255, 255, .22); }
.siteLink ul li:first-child { border-left:1px solid rgba(255, 255, 255, .22); }
.siteLink ul li a { overflow:hidden; display:block; position:relative; height:100%; min-height:50rem; padding:3.4rem 13.3779%; padding-bottom:117.0568%; color:#fff; letter-spacing:-.025em; word-break:keep-all; box-sizing:border-box; transition:.15s; }
.siteLink ul li a strong { display:block; font-size:2.4rem; }
.siteLink ul li a .eng { display:block; margin-top:1rem; font-size:1.7rem; font-weight:500; }
.siteLink ul li a .arrow { opacity:0; display:block; text-indent:-9999em; height:3.7rem; margin-top:6.6rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='79px' height='36.5px'%3E%3Cpath fill-rule='evenodd' fill='rgb(110, 82, 231)' d='M60.722,0.387 C70.500,0.387 78.426,8.313 78.426,18.091 C78.426,27.868 70.500,35.795 60.722,35.795 C50.945,35.795 43.019,27.868 43.019,18.091 C43.019,8.313 50.945,0.387 60.722,0.387 Z'/%3E%3Cpath fill-rule='evenodd' stroke='rgb(255, 255, 255)' stroke-width='1px' stroke-linecap='butt' stroke-linejoin='miter' fill='none' d='M56.537,10.695 L65.676,20.044 L0.500,20.044 '/%3E%3Cpath fill-rule='evenodd' stroke='rgb(255, 255, 255)' stroke-width='1px' stroke-linecap='butt' stroke-linejoin='miter' fill='none' d='M56.537,10.695 L65.676,20.044 L47.630,20.044 '/%3E%3C/svg%3E") no-repeat left center / contain; transition:.2s; }
.siteLink ul li a .txt { opacity:0; display:block; line-height:1.5; position:absolute; bottom:4rem; left:0; width:100%; padding:0 13.3779%; box-sizing:border-box; transition:.2s; }
.siteLink ul li a::before { content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:rgba(255, 255, 255, .08); transition:.2s; }
.siteLink ul li a:focus::before,
.siteLink ul li a:hover::before,
.siteLink ul li.active a::before { top:0; }
.siteLink ul li a:focus .arrow,
.siteLink ul li a:hover .arrow,
.siteLink ul li.active a .arrow,
.siteLink ul li a:focus .txt,
.siteLink ul li a:hover .txt,
.siteLink ul li.active a .txt { opacity:1; }
@media screen and (max-width:1200px) { 	
	.siteLink ul li a .txt br { display:none; }
}
@media screen and (max-width:1024px) { 
	html { font-size:56.25%; }
	html, 
	body, 
	main, 
	#container { height:auto; }
	.header { top:2.25rem; left:6.3888%; }
	.logo a { width:13.625rem; height:3.125rem; background-image:url(/ggac/images/intro/logo_mo.png); }
	/* content */
	.introWrap { min-height:auto; padding:0; padding-top:20rem; }
	.introWrap::before, 
	.introWrap::after { bottom:7.25rem; width:19rem; height:13.875rem; background-image:url(../images/intro/bg_left_mo.png); }
	.introWrap::after { top:13rem; bottom:auto; background-image:url(../images/intro/bg_right_mo.png); }
	.noticeArea { max-width:none; padding:0 6.3888%; margin-bottom:6rem; box-sizing:border-box; }
	.noticeSwiper .swiper-slide a strong { font-size:2.125rem; }
	.noticeSwiper .swiper-slide a span { font-size:1.75rem; max-height:2.6em; text-overflow:inherit; white-space:pre-line; }
	.pagination .swiper-pagination-bullet { width:.75rem; height:.75rem; }
	.pagination .swiper-pagination-bullet-active { width:2.5rem; }
	.siteLink { padding-left:21.6666%; box-sizing:border-box; }
	.siteLink ul { flex-direction:column; }
	.siteLink ul li { border:none; border-top:1px solid rgba(255, 255, 255, .22); }
	.siteLink ul li:first-child { border-left:none; }
	.siteLink ul li a { min-height:auto; padding:2.5rem 7.0921%; }
	.siteLink ul li a strong { font-size:2.125rem; }
	.siteLink ul li a .eng { margin-top:1.25rem; font-size:1.75rem; }
	.siteLink ul li a .arrow { position:absolute; top:2.25rem; right:7.0921%; width:6.875rem; height:3.125rem; margin:0; }
	.siteLink ul li a .txt { display:none; }
	.siteLink ul li a::before { opacity:0; top:0; }
	.siteLink ul li a:focus::before,
	.siteLink ul li a:hover::before,
	.siteLink ul li.active a::before { opacity:1; }
}
@media screen and (max-width:960px) { 	
	body { min-width:320px; }	
}
@media all and (max-width:720px) { 
    html { font-size:50%; }
	/* video */
	.videoWrap video { height:auto; object-fit:contain; }
	.videoWrap video.full { height:100%; object-fit:cover; }
	
	.btnSkip { bottom:5.875rem; }
	.btnSkip button { padding:1.625rem 3rem; font-size:1.625rem; }
	.btnSkip button span { padding:0 2.875rem; }
	.btnSkip button span::before,
	.btnSkip button span::after { width:1.875rem; }
	.btnVolume { top:1.75rem; left:1.5rem; }
	.btnVolume button { width:2.625rem; height:1.875rem; background-image:url(../images/intro/btn_volume_off_mo.png); }
	.btnVolume button.on { background-image:url(../images/intro/btn_volume_on_mo.png); } 	
	.btnFull { display:block; position:absolute; bottom:1.75rem; right:1.75rem; }
	.btnFull button { display:block; width:2.5rem; height:2.5rem; background:url(../images/intro/btn_fullsize_on.png) no-repeat center / contain; text-indent:-9999em; }
	.btnFull button.on { background-image:url(../images/intro/btn_fullsize_off.png); }
}