@import url(base.css);
@import url(layout.css);
@import url(common.css);

/* main */
.main           { height:100vh; min-height:80rem; background: url(../img/main/mainBg.png) center no-repeat; position: relative; }
.main .mainImg1 { position:absolute; top:25.5rem; left:50%; transform: translate(-60%, -0%); opacity: 0; animation: float1 18s 3s infinite ease-in-out forwards; }
.main .mainImg2 { position:absolute; top:31.4rem; left:50%; transform: translate(22%, -0%); opacity: 0; animation: float2 18s 2.5s infinite ease-in-out forwards; }
.main .mainImg3 { position:absolute; top:38.1rem; left:50%; transform: translate(-30%, -0%); opacity: 0; animation: float3 18s 2s infinite ease-in-out forwards; }
.main .mainImg4 { position:absolute; top:47rem; left:50%; transform: translate(14%, -0%); opacity: 0; animation: float4 18s 1.5s infinite ease-in-out forwards; }
.main .mainImg5 { position:absolute; top:49rem; left:50%; transform: translate(-64%, -0%); opacity: 0; animation: float5 18s 1s infinite ease-in-out forwards; }
.main .mainImg6 { position:absolute; top:58.6rem; left:50%; transform: translate(-23%, -0%); opacity: 0; animation: float6 18s .5s infinite ease-in-out forwards; }
@keyframes float1 { 0% { opacity: 0; } 4% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes float2 { 0% { opacity: 0; } 4% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes float3 { 0% { opacity: 0; } 4% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes float4 { 0% { opacity: 0; } 4% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes float5 { 0% { opacity: 0; } 4% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes float6 { 0% { opacity: 0; } 4% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }

.visualTxt { position: absolute; top: 32rem; left: 22rem; opacity: 0; animation: visualTxtAnim 24s 1.75s infinite ease-in-out forwards; }
@keyframes visualTxtAnim {
    0% { opacity: 0; left:22rem; }
    5% { opacity: 1; left:12rem; }
    95% { opacity: 1; left:12rem; }
    100% { opacity: 0; left:2rem; }
}

.ddaycount      { bottom:25rem; right:12rem; width:39.8rem; height:20.3rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.11); background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(13.5px); position: absolute; padding:4rem 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap:1.2rem; }
.ddaycountTitle                         { color: #000; text-align: center; font-size: 2.4rem; font-weight: 400; line-height: 140%; }
.ddayCount ul							{ display:flex; gap:1.7rem; }
.ddayCount li							{ display:flex; flex-direction:column; align-items:center; }
.ddayCount strong						{ position:relative; display:block; overflow:hidden; width:5rem; height:5.6rem; }
.ddayCount strong .countNumber			{ transform:translateY(0); color: #000; font-size: 4rem; font-weight: 600; line-height: 140%; position: absolute; text-align: center; width: 100%; height: 100%; }
.ddayCount strong .countNumber.current	{ transform:translateY(0); }
.ddayCount strong .countNumber.next		{ transform:translateY(-100%); }
.ddayCount strong.is-change .current	{ animation:countSlideOut 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.ddayCount strong.is-change .next		{ animation:countSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.ddayCount li.colon	strong				{ width:auto; color: #000; font-size: 4rem; font-weight: 600; line-height: 140%; }
.ddayCount span							{ color: rgba(0, 0, 0, 0.70); font-size: 1.5rem; font-weight: 500; line-height: 140%; }

@keyframes countSlideOut {
	0%		{ transform:translateY(0); opacity:1; }
	100%	{ transform:translateY(100%); opacity:0; }
}

@keyframes countSlideIn {
	0%		{ transform:translateY(-100%); opacity:0; }
	100%	{ transform:translateY(0); opacity:1; }
}


.visualBt       { position: absolute; right:12rem; bottom:12rem; width:39.8rem; height:10.4rem; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.27); background: #000; backdrop-filter: blur(9.600000381469727px); padding:0 4rem; display:flex; align-items:center; justify-content:space-between; color: #FFF; font-size: 2.8rem; font-weight: 600; transition: all 0.3s ease; }
.visualBt:after { content:''; width: 3rem; height:3rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M18.4651 6.87512L26.42 14.8301L18.4651 22.785' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.9199 14.8299L26.4199 14.8298' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; }
.visualBt:hover { background: rgba(0, 0, 0, 0.70); }
.visualBt:hover:after { animation: visualBtAnim 1s infinite ease-in-out forwards; }
@keyframes visualBtAnim {
    0% { transform: translateX(0); }
    50% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

.bottomDday     { position: absolute; bottom:0; left:0; width:100%; height:7.4rem; display: flex; align-items: center; justify-content: center; background: #000; color: #FFF; font-size: 2.4rem; font-weight: 600; backdrop-filter: blur(19.700000762939453px); }

@media all and (max-width:1919px) {
	.visualTxt img			{ width:48rem; }
	@keyframes visualTxtAnim {
		0% { opacity: 0; left:12rem; }
		5% { opacity: 1; left:2rem; }
		95% { opacity: 1; left:2rem; }
		100% { opacity: 0; left:0rem; }
	}

	.ddaycount				{ bottom:auto; top:30rem; right:2rem; }
	.visualBt				{ right:2rem; bottom:auto; top:55rem;}
}
@media all and (max-width:1280px) {
	.main					{ min-height:0; overflow: hidden; }
	.visualTxt				{ top:23rem; }
	.visualTxt img			{ width:55vw; }
	.centerImg				{ background: url(../img/main/mainMobImg.png) top 15rem right 2rem no-repeat; background-size:38vw; width:100%; height:100%; }
	.centerImg img			{ display: none; }

	.ddaycount				{ right:auto; left:2rem; width:45%; height:14rem; top:auto; bottom:2rem; }
	.visualBt				{ right:2rem; width:45%; height:14rem; top:auto; bottom:2rem; }
}
@media all and (max-width:1024px) {
	.main					{ height:auto; background-position: right; }
	.visualTxt				{ animation: none; position: static; opacity: 1; padding:calc(5rem + 20vw) 0 20rem 2rem; background: url(../img/main/mainMobImg.png) top calc(5rem + 20vw) right 4rem no-repeat; background-size:30% auto; height:100vh; }
	.visualTxt img			{ width:50vw; }
}
@media all and (max-width:760px) {
	.visualTxt				{ padding:15rem 2rem 8rem 2rem; background: none; height:auto; }
	.visualTxt img			{ width:90vw; }

	.ddaycount				{ position:static; margin:0 2rem 2rem; width:calc(100% - 4rem); height:9rem; gap:0; }
	.ddaycountTitle			{ font-size: 1.4rem; }
	.ddayCount strong		{ width:3rem; height:2.6rem; }
	.ddayCount strong .countNumber	{ font-size: 2rem; }
	.ddayCount li.colon strong		{ font-size: 2rem; }
	.ddayCount span			{ font-size: 1.1rem; }
	.visualBt				{ position:static; margin:0 2rem 4rem; width:calc(100% - 4rem); height:5rem; padding:0 2rem; font-size:1.4rem; }
	.visualBt:after			{ width:2rem; height:2rem; }
}




/* sub */
h2.contentsTit  { color: #000; font-size: 3.4rem; font-weight: 700; padding-bottom:4rem; }
p.contentsTxt   { color: #000; font-size: 2.8rem; font-weight: 500; line-height: 150%; }
.contentsImgSlide       { margin:4rem 0 6rem; width:100%; border-radius: 8px; overflow: hidden; }
.contentsImgSlide p     { position: relative; line-height: 0; }
.contentsImgSlide p strong      { position: absolute; bottom:0; left:0; width:100%; padding:6rem; color: #FFF; font-size: 3.2rem; font-weight: 700; line-height: 150%; }
.contentsImgSlide p strong span { display: block; color: #FFF; font-size: 2rem; font-weight: 500; line-height: 150%; }
.contentsImgSlide .slick-arrow  { position: absolute; }

.toggleCont             { border-top:1px solid #000; }
.toggleCont li          { border-bottom:1px solid #000; padding:3rem 0; }
.toggleCont li a   { display:block; width: 100%; padding:2rem 9.4rem 2rem 5.8rem; position: relative; color: #000; font-size: 2.4rem; font-weight: 700; text-align: left; word-break: keep-all; text-indent: -2.8rem; }
.toggleCont li:last-child		{ background-color: rgba(31, 168, 160, 0.2); }
.toggleCont li a:after { content:''; width: 3.4rem; height:3.4rem; background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.043 7.08337L17.0171 26.9167' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.0835 17H26.9168' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-size: cover; background-repeat: no-repeat; position: absolute; top:50%; right:3rem; transform: translateY(-50%); }
.toggleCont li.active a:after { background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.0835 17H26.9168' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); }
.toggleCont li p        { color: rgba(0, 0, 0, 0.60); font-size: 2rem; font-weight: 400; line-height: 150%; padding:0 3rem 2rem; display: none; }

.overview               { border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.25); padding:7rem 6rem; display: flex; gap:5rem; justify-content: space-between; }
.overview dt            { max-width: 43.1rem; flex:1; }
.overview dd            { flex:1; }
.overview dd ul         { display: flex; flex-direction: column; }
.overview dd ul li      { display: flex; align-items: center; padding:4rem 0; border-bottom:1px solid rgba(0, 0, 0, 0.35); }
.overview dd ul li:first-child      { padding-top:0; }
.overview dd ul li strong   { flex:1; max-width:16.8rem; color: #000; font-size: 2.2rem; font-weight: 600; line-height: 2.4rem; }
.overview dd ul li span     { flex:1; color: #000; font-size: 2rem; font-weight: 400; line-height: 2.4rem; }


.addressBox                 { border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.25); padding:6rem; }
.addressTop					{ padding:4rem 0 4rem; position: relative; display: flex; align-items: center; border-bottom: 1px dashed rgba(0, 0, 0, 0.35); }
.addressTop:before			{ content:none; width:2.4rem; height:2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C12 22 19.5 16 19.5 9.5C19.5 5.35785 16.1421 2 12 2C7.85785 2 4.5 5.35785 4.5 9.5C4.5 16 12 22 12 22Z' fill='%231FA8A0' stroke='%231FA8A0' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 12.5C13.6568 12.5 15 11.1568 15 9.5C15 7.84315 13.6568 6.5 12 6.5C10.3432 6.5 9 7.84315 9 9.5C9 11.1568 10.3432 12.5 12 12.5Z' fill='white' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; position: absolute; top:0; left:0; }
.addressTop strong,
.addressBottom p			{ flex:1; max-width:18.2rem; color: #000; font-size: 2.4rem; font-weight: 600; line-height: 24px; }
.addressTop span			{ flex:1; color: #000; font-size: 2rem; font-weight: 400; line-height: 24px; }
.addressBottom				{ padding:4rem 0; display: flex; border-bottom: 1px dashed rgba(0, 0, 0, 0.35); }
.addressBottom ul			{ flex:1; display: flex; flex-direction: column; gap:1.6rem; }
.addressBottom ul li			{ color: #000; font-size: 2rem; font-weight: 400; line-height: 24px; }
.addressBottom ul li span		{ display: inline-flex; width:3rem; height:3rem; background-color: #F9F9F9; border-radius: 50%; align-items: center; justify-content: center; color: #000; font-size: 2.1rem; font-weight: 500; line-height: 36px; margin-right:.9rem; }

.addressMap					{ width:100%; border-radius: 8px; overflow: hidden; border:1px solid rgba(0, 0, 0, 0.12); margin-top:4rem; line-height: 0; }
.addressMap iframe			{ width:100%; height:50.8rem; border:0; padding: 0; margin: 0; }


.addressMap .root_daum_roughmap             { width:100%; border-radius: 8px; overflow: hidden; border:1px solid rgba(0, 0, 0, 0.12); margin-top:4rem; }
.addressMap .root_daum_roughmap .wrap_map   { height:50.8rem; }
.addressMap .root_daum_roughmap .wrap_controllers,
.addressMap .root_daum_roughmap .cont		{ display: none !important; }
.addressMap .root_daum_roughmap .border1,
.addressMap .root_daum_roughmap .border2,
.addressMap .root_daum_roughmap .border3,
.addressMap .root_daum_roughmap .border4	{ display: none !important; }

.twisting					{ display: flex; flex-direction: column; gap:4rem; margin-bottom:6rem; }
.twisting li				{ background: rgba(147, 147, 147, 0.08); padding:5rem 38.6rem 5rem 5rem; display: flex; justify-content: end; position: relative; flex-direction: column; min-height:35.6rem; }
.twisting li strong			{ color: #1FA8A0; font-size: 3rem; font-weight: 700; line-height: 120%; display: block; }
.twisting li span			{ color: #000; font-size: 2.4rem; font-weight: 700; line-height: 120%; display: block; margin-top:1.6rem; }
.twisting li em				{ color: rgba(0, 0, 0, 0.80); font-size: 1.6rem; font-weight: 500; line-height: 150%; display: block; margin-top:2rem; word-break: keep-all; }
.twisting li img			{ position: absolute; bottom:0; right:0; }
.twisting.ing li			{ padding:0; justify-content: center; align-items: center; font-size: 3rem; color: #000; font-weight: 700; }

.timetable					{ width:100%; }
.timetable img				{ width:100%;  }

@media all and (max-width:760px) {
	/* sub */
	h2.contentsTit  { font-size: 2rem; padding-bottom:1.5rem; }
	p.contentsTxt   { font-size: 1.3rem; }
	.contentsImgSlide       { margin:3rem 0 4rem; }
	.contentsImgSlide p img	{ width:100%; }
	.contentsImgSlide p strong      { padding:1.2rem; font-size: 1.3rem; }
	.contentsImgSlide p strong span { font-size: 1.1rem; }

	.toggleCont				{ padding-bottom:6rem; }
	.toggleCont li          { padding:1.2rem 0; }
	.toggleCont li a		{ padding:1rem 5rem 1rem 2.8rem; font-size: 1.4rem; text-indent: -1.6rem; }
	.toggleCont li a:after	{ width: 2rem; height:2rem; right:1rem; }
	.toggleCont li p        { font-size: 1.2rem; padding:0 2.8rem 1rem; }

	.overview               { padding:1.2rem; gap:1rem; flex-direction: column; margin-bottom:6rem; }
	.overview dt			{ max-width:100%; }
	.overview dt img		{ width:100%; }
	.overview dd ul li      { padding:1rem 0 .6rem 0; flex-direction: column; align-items: flex-start; gap:.6rem; }
	.overview dd ul li:first-child      { padding-top:.6rem; }
	.overview dd ul li strong   { font-size: 1.4rem; line-height: 2rem; }
	.overview dd ul li strong br		{ display: none; }
	.overview dd ul li span     { font-size: 1.2rem; line-height: 2rem; word-break: keep-all; padding-left:1.2rem; }
	.overview dd ul li:last-child		{ border-bottom: 0; }


	.addressBox                 { padding:1.2rem; }
	.addressTop					{ padding:1.2rem 0 1.2rem; align-items: flex-start; }
	.addressTop:before			{ content:none; width:1.8rem; height:1.8rem; }
	.addressTop strong,
	.addressBottom p			{ max-width:9rem; padding-right:.6rem; font-size: 1.4rem; line-height: 2rem; }
	.addressTop span			{ font-size: 1.2rem; line-height: 2rem; }
	.addressBottom				{ padding:1rem 0; }
	.addressBottom ul			{ gap:.6rem; }
	.addressBottom ul li			{ font-size: 1.2rem; line-height: 2rem; position: relative; padding-left:3rem; word-break: keep-all; }
	.addressBottom ul li span		{ width:2rem; height:2rem; font-size: 1.1rem; line-height: 2rem; margin-right:.4rem; position: absolute; left:0; }

	.addressMap					{ margin:2rem 0 6rem; }
	.addressMap iframe			{ height:50vw; }


	.addressMap .root_daum_roughmap             { width:100%; border-radius: 8px; overflow: hidden; border:1px solid rgba(0, 0, 0, 0.12); margin-top:4rem; }
	.addressMap .root_daum_roughmap .wrap_map   { height:50.8rem; }
	.addressMap .root_daum_roughmap .wrap_controllers,
	.addressMap .root_daum_roughmap .cont		{ display: none !important; }
	.addressMap .root_daum_roughmap .border1,
	.addressMap .root_daum_roughmap .border2,
	.addressMap .root_daum_roughmap .border3,
	.addressMap .root_daum_roughmap .border4	{ display: none !important; }

	.twisting					{ gap:2rem; margin-bottom:6rem; }
	.twisting li				{ padding:1.5rem; height:auto; min-height: 0; }
	.twisting li strong			{ font-size: 1.4rem; }
	.twisting li span			{ font-size: 1.2rem; margin-top:.6rem; }
	.twisting li em				{ font-size: 1.1rem; margin-top:1rem; padding-right:12rem; }
	.twisting li img			{ width:12rem; }
	.twisting.ing li			{ font-size:1.4rem; text-align: center; padding:4rem 0; }
}