@charset "UTF-8";

/*공통*/
h2 { font-family:var(--aggro); font-size:25rem; font-weight:400; }
.control { display:flex; align-items:center; }
.control a { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:45rem; height:45rem; }
.control a.next { transform:scaleX(-1);}
.control a.play {display:none;}
.control a::before {content:''; display:block; flex-shrink:0; width:26px; height:18px; background:var(--sprite_m); }
.control a.stop::before { width:17px; height:18px; background-position-x:-206px; }
.control a.play::before { width:12px; height:18px; background-position-x:-184px; }
.control a.more::before { width:22px; height:22px; background-position-x:-152px; }
@media all and (max-width:480px){
	.control a::before { zoom:80%; -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; }
	.control a { width:40rem; }
}


/*콘텐츠*/
.visual { position:relative; padding:20rem 0 40rem; }
/*.visual::before { content:''; position:absolute; left:0; top:-160rem; width:100%; height:calc(100% + 160rem); background:url('/dgTown/design/main/img/main_cont_bg.jpg') no-repeat center top/cover; opacity:0.1; filter:blur(3px); z-index:-1; }*/
.visual .swiper-slide {margin-top:150rem; transition:0.5s;}
.visual .swiper-slide-prev {transform:rotate(-15deg);}
.visual .swiper-slide-next {transform:rotate(15deg);}
.visual .swiper-slide-active {margin-top:0;}
.visual .swiper-slide div { position:relative; margin:0 auto; max-width:650rem; height:500rem; border-radius:250rem; /*width:650rem; height:800rem; transform-origin:50% 800rem;*/ overflow:hidden; }
.visual .swiper-slide div::after {content:''; position:absolute; left:0; bottom:0; width:100%; height:100%; background:linear-gradient(0, #000 30%, transparent 90%); background:-ms-linear-gradient(0, #000 30%, transparent 90%);  opacity:0.4; z-index:1; }
.visual .swiper-slide dl { position:absolute; left:0; bottom:0; width:100%; color:#fff; text-align:center; text-shadow:1px 1px 4px rgba(0,0,0,0.2); z-index:2; font-weight:500; opacity:0; transition:0.3s; z-index:-1; }
.visual .swiper-slide.swiper-slide-active dl { opacity:1; bottom:90rem; transition-delay:0.3s; z-index:2; }
.visual .swiper-slide dt { font-size:25rem; margin-bottom:10rem; }
.visual .swiper-slide dd p { font-size:35rem; line-height:1.3; }
.visual .swiper-slide dd p span { color:#fff776; }
.visual .swiper-slide dd a { display:inline-flex; align-items:center; padding:0 50rem; height:60rem; border:1px solid #fff; border-radius:30rem; font-size:20rem; color:#fff; margin-top:30rem; background:rgba(0,0,0,0.2); transition:0.3s; }
.visual .swiper-slide dd a:hover { background:rgba(0,0,0,0.5); }
.visual .swiper-slide div img {/*ie때문에*/ display:none; /*적용*/width:100%; height:100%; object-fit:cover; }
.visual .swiper-slide .greeting { position:absolute; left:0; top:60rem; opacity:0; transition:0.3s; zoom:70%;  }
.visual .swiper-slide.swiper-slide-active .greeting { top:30rem; opacity:1; transition-delay:0.6s; }
.visual .control { position:relative; justify-content:center; z-index:1; margin-top:-120rem; }
.visual .control .ment {position:absolute; left:50%; top:-50rem; transform:translateX(-50%); }
.visual .control .ment span { display:inline-flex; align-items:center; justify-content:center; width:260rem; height:40rem; border-radius:20rem; background:var(--p_color); color:#fff; font-size:0.8em; }
.visual .control .ment::after {content:''; display:block; margin:-5rem auto 0; width:10rem; height:10rem; background:var(--p_color); transform:rotate(45deg); }
@media all and (max-width:1200px){
	.visual .swiper-slide.swiper-slide-active dl { bottom:70rem; }
	.visual .swiper-slide dd p {font-size:30rem;}
	.visual .swiper-slide dd a { padding:0 30rem; height:45rem; font-size:18rem; margin-top:20rem; }
}
@media all and (max-width:1023px){
	.visual { padding:0 0 40rem; }
	.visual .swiper-slide div {height:400rem;}
}
@media all and (max-width:768px){
	.visual {padding-bottom:40rem;}
	.visual .control {margin-top:-140rem; }
	.visual .control .ment {left:0; top:55rem; transform:none; width:100%; }
	.visual .control .ment span { width:100%; height:30rem; border-radius:0; }
	.visual .control .ment::after {display:none;}
}
@media all and (max-width:480px){
	.visual .swiper-slide div {height:300rem;}
	.visual .swiper-slide dt {font-weight:600; }
	.visual .swiper-slide dd p {display:none;}
	.visual .swiper-slide dd a {margin-top:0;}
	.visual .swiper-slide .greeting { zoom:40%; }
}

.cont_bg { position:relative; padding-top:60rem; background:#fff; z-index:1; }
.cont_bg::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%;  background:linear-gradient(180deg, #eaf0fd 0, transparent 90%); }
@media all and (max-width:768px){
	.cont_bg {padding-top:40rem;}
}

.cont1 { position:relative; display:flex; justify-content:space-between; z-index:2; margin:60rem auto; }
.cont1 dl {width:calc((100% - 200rem)/3); text-align:center; }
.cont1 dl::before { content:''; display:block; width:260px; height:200px; background:var(--sprite_m) 0 -40px; margin:0 auto; }
.cont1 dl.icon2::before { background-position-x:-270px; }
.cont1 dl.icon3::before { background-position-x:-540px; }
.cont1 dl dt { font-family:var(--aggro); font-size:25rem; font-weight:400; margin:20rem 0 10rem; }
.cont1 dl a {display:inline-flex; align-items:center; height:45rem; color:#fff; background:var(--p_color); padding:0 40rem; border-radius:25rem; margin-top:20rem; transition:0.2s; }
.cont1 dl a:hover {border:2px solid var(--p_color); color:var(--p_color); background:transparent; font-weight:600; }
@media all and (max-width:1023px){
	.cont1 dl {width:calc((100% - 100rem)/3);}
	.cont1 dl::before {zoom:70%;}
}
@media all and (max-width:768px){
	.cont1 {flex-wrap:wrap; margin:0 auto; }
	.cont1 dl {width:100%; margin-top:40rem; padding:0 30rem; }
	.cont1 dl dt {margin:0; }
	.cont1 dl a {margin-top:10rem; }
}
@media (max-width:768px) and (min-width:481px){
	.cont1 dl { position:relative; text-align:left; padding-left:200rem; }
	.cont1 dl::before {position:absolute; left:0; top:0; zoom:60%;}
}
@media all and (max-width:480px){
	.cont1 dl::before { zoom:50%;}
}

.rolling_txt { position:absolute; left:0; width:100%; display:flex; font-family:var(--aggro); font-size:120rem; font-weight:600; text-transform:uppercase; color:#fff; letter-spacing:1rem; animation: textLoop 25s linear infinite; opacity:0.5; z-index:1; }
.rolling_txt li { flex-shrink:0; }
.rolling_txt.roll1 { top:50rem; }
.rolling_txt.roll2 { top:230rem; animation-direction: reverse; }
@keyframes textLoop {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-100%, 0, 0); }
}


.notice { position:relative; display:flex; align-items:center;justify-content:space-between; border:2px solid var(--p_color); background:rgba(255, 255, 255, 0.5); border-radius:30rem; padding:0 50rem; border-radius:30rem; height:90rem; z-index:2; }
.notice .swiper { overflow:hidden; width:calc(100% - 420rem); }
.notice .swiper a {display:flex; align-items:center;}
.notice .swiper a span:not(.date) { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:calc(100% - 140rem); font-size:1.1em; font-weight:500; }
.notice .swiper a span.date { width:140rem; text-align:right;  opacity:0.8;}
@media all and (max-width:1023px){
	.notice { position:relative; flex-wrap:wrap; height:auto; padding:30rem;}
	.notice .swiper {width:100%; margin-top:20rem; }
	.notice .control {position:absolute; right:20rem; top:25rem; }
}


.cont3 { display:flex; align-items:flex-start; justify-content:space-between; }
.cont3 > * {width:calc((100% - 200rem)/3); }
@media all and (max-width:1023px){
	.cont3 > * {width:calc((100% - 100rem)/3); }
}
@media all and (max-width:768px){
	.cont3 { flex-wrap:wrap; }
	.cont3 > * {width:calc((100% - 50rem)/2); }
}
@media all and (max-width:480px){
	.cont3 > * {width:100%; }
}

.popup { position:relative; }
.popup .swiper { overflow:hidden; margin-bottom:10rem; }
.popup a.swiper-slide { border-radius:30rem; overflow:hidden; }
.popup a.swiper-slide img {width:100%;}
.popup .control .count { flex-grow:1; font-family:var(--aggro); font-weight:200; padding-left:15rem; }
.popup .control .count .swiper-pagination-current {font-weight:400;}
.popup .control a.play,
.popup .control a.stop {width:auto; color:var(--p_color); /*filter:grayscale(1);*/ }
.popup .control a.play span,
.popup .control a.stop span { padding-left:7rem; }
.popup .control a.prev,
.popup .control a.next { position:absolute; left:-22rem; top:calc(50% - 45rem); background:var(--p_color); border-radius:50%; z-index:1; }
.popup .control a.next {left:auto; right:-22rem; }
.popup .control a.prev::before,
.popup .control a.next::before {background-position-x:-36px; zoom:80%;}
@media all and (max-width:768px){
	.popup { width:100%; margin:40rem 0; }
	.popup .control a.prev { left:-10rem; }
	.popup .control a.next { left:auto; right:-10rem; }
}
@media all and (max-width:768px){
	.popup .control a.prev,
	.popup .control a.next { background:rgba(0,0,0,0.5); }
	.popup .control a.prev { left:5rem; }
	.popup .control a.next { right:5rem; }
}
@media all and (max-width:480px){
	.popup .control a { width:45rem; }
}

.cont3 > a { position:relative; display:flex; border-radius:30rem; overflow:hidden; }
.cont3 > a::before { content:''; position:absolute; right:10rem; bottom:-20rem; width:280px; height:215px; background:var(--sprite_m) 0 -675px; z-index:2; transition:0.3s; }
.cont3 > a.link2::before {width:275px; background-position-x:-290px; }
.cont3 > a::after { content:''; position:absolute; left:20rem; top:20rem; width:calc(100% - 40rem); height:calc(100% - 40rem); border-radius:20rem; background:rgba(0,0,0,0.1); backdrop-filter: blur(10px); z-index:1; }
.cont3 > a dl { display:flex; flex-direction:column-reverse; justify-content:flex-end; position:absolute; left:20rem; top:20rem; width:calc(100% - 40rem); height:calc(100% - 40rem); padding:40rem 30rem; color:#fff; z-index:3; }
.cont3 > a dt { font-family:var(--aggro); font-size:35rem; font-weight:500; margin-top:10rem; }
.cont3 > a dd span { display:block; font-size:20rem; }
.cont3 > a:hover::before { bottom:0; }
@media all and (max-width:1300px){
	.cont3 > a::before {zoom:80%; }
	.cont3 > a dl {padding:25rem; }
	.cont3 > a dd span {display:inline; font-size:18rem;}
	.cont3 > a dt { font-size:30rem; line-height:1.2; }
}
@media (max-width:1023px) and (min-width:769px), (max-width:600px) and (min-width:481px){
	.cont3 > a::before {right:50%; transform:translateX(50%); zoom:60%;  }
	.cont3 > a.link2::before {right:calc(50% - 15rem);}
	.cont3 > a dt { text-align:center; }
	.cont3 > a dd {position:absolute; left:-99999px; top:-99999px; }
}
@media all and (max-width:480px){
	.cont3 > a { margin-top:40rem; }
	.cont3 > a::before {zoom:50%; }
	.cont3 > a img {position:absolute; left:0; top:0; width:100%; }
	.cont3 > a dl {position:relative; left:auto; top:auto; width:100%; height:100%; padding:40rem; }
	.cont3 > a dt { padding-right:130rem; }
}

.cont4 { position:relative; background-image:url('/dgTown/design/main/img/main_cont_bg3.png'), linear-gradient(0deg, #eaf0fd 0, transparent 90%); background-repeat:no-repeat; background-position:center bottom; }
.cont4::before,
.cont4::after { content:''; position:absolute; left:50%; top:-100rem; margin-left:550rem; width:280px; height:250px; background:var(--sprite_m) 0 -350px; }
.cont4::after { top:70rem; margin-left:-20rem; width:470px; height:315px; background-position-x:-290px; }
.cont4 .wrap {position:relative; padding:70rem 0 110rem; }
.cont4 .wrap::after { content:''; position:absolute; right:0; bottom:0; width:555px; height:630px; background:var(--sprite_m) -770px -350px; z-index:1; }
.cont4 h2 span { background:linear-gradient(0deg, rgba(51, 105, 232, 0.2) 10px, transparent 10px); }
.cont4 .ex {margin:30rem 0 40rem; font-size:30rem; color:var(--p_color); }
.cont4 .list { position:relative; display:flex; align-items:flex-start;  justify-content:space-between; width:calc((100% - 100rem)/3*2); z-index:2; }
.cont4 .list a {width:calc((100% - 100rem)/3); background:#fff; border-radius:30rem; box-shadow:3rem 3rem 10rem rgba(0,0,0,0.1); padding:40rem 30rem; text-align:center; margin-top:50rem; transition:0.3s; }
.cont4 .list a:nth-of-type(2) {margin-top:0;}
.cont4 .list a::before {content:''; display:block; width:90px; height:90px; background:#eaf0fd var(--sprite_m) 0 -250px; border-radius:30rem; margin:0 auto; }
.cont4 .list a.icon2::before { background-position-x:-100px }
.cont4 .list a.icon3::before { background-position-x:-200px }
.cont4 .list a dt { font-size:25rem; font-weight:600; margin:25rem 0 10rem; }
.cont4 .list a:hover {background:var(--p_color); color:#fff; box-shadow:3rem 3rem 10rem rgba(0,0,0,0.5); }
@media all and (max-width:1200px){
	.cont4 .list { width:100%; }
	.cont4 .list a {width:calc((100% - 200rem)/3);}
}
@media all and (max-width:1023px){
	.cont4 .list a {width:calc((100% - 100rem)/3);}
	.cont4 .wrap::after {display:none;}
}
@media all and (max-width:768px){
	.cont4 .wrap {padding:40rem 0 60rem; }
	.cont4 .list {flex-wrap:wrap;}
	.cont4 .list a {width:100%; display:flex; align-items:center; text-align:left; margin-top:0; padding:30rem; }
	.cont4 .list a:nth-of-type(2) {margin:20rem 0; }
	.cont4 .list a::before { flex-shrink:0; margin:0 30rem 0 0; }
	.cont4 .list a dt { margin-top:0; }
}
@media all and (max-width:480px){
	.cont4 .list a { padding:20rem; }
}