@charset "UTF-8";
@import url('/dgTown/design/common/css/pretendard-subset.css');
@import url('/dgTown/design/common/css/SBAggro.css');

:root {
	--p_color : #3369e8;
	--blue : #0066ff;
    --red : #ec1829;
	--green : #119c76;
	--sprite_l : url('/dgTown/design/main/img/layout_sprite.png') no-repeat;
	--sprite_m : url('/dgTown/design/main/img/main_sprite.png') no-repeat;
	--aggro : 'SBAggro', '맑은 고딕', sans-serif;
}

body { font-family:'Pretendard', '맑은 고딕', sans-serif; font-weight:400; font-size:18rem; color:#333; letter-spacing:-0.8rem; max-width:2000px; margin:0 auto; }
input, button, textarea, select {font-family:'Pretendard', '맑은 고딕', sans-serif; font-weight:300; font-size:17rem; color:#323232;}
button, input[type="submit"] {cursor:pointer; border:0; background:none;}
a {color:#333;}
b {font-weight:600;}
.wrap { max-width:1400px; width:96%; margin:0 auto; }
@media all and (max-width:1023px) {
	html {font-size:0.95px;}
}
@media all and (max-width:768px) {
	html {font-size:0.9px;}
}

header {position:relative; }
header .top { position:absolute; left:0; top:0; width:100%; background:rgba(51, 105, 232, 0.1); }
header .top .wrap { display:flex; align-items:center; justify-content:space-between; height:50rem; overflow:hidden; }
header .link { display:flex; align-items:center; }
header .link a { display:flex; align-items:center; margin-right:30rem; font-weight:500;  }
header .link a::before { content:''; display:block; width:40px; height:40px; background:var(--sprite_l) 0 -102px; margin-right:5rem; zoom:90%; }
header .link a::after { content:''; display:block; width:20px; height:20px; background:var(--sprite_l) -150px -102px; margin-left:5rem; }
header .link a.icon2::before {background-position-x:-50px}
header .link a.icon3::before {background-position-x:-100px}
header .weather .swiper { width:370rem; height:50rem; }
header .weather .swiper-wrapper { flex-wrap:wrap;}
header .weather .swiper-slide { display:flex; align-items:center; width:100%; height:100% !important; }
header .weather .swiper-slide::before { content:''; display:block; width:60px; height:50px; background:var(--sprite_l) 0 -152px; }
header .weather .icon2::before { background-position-x:-70px; }
header .weather .icon3::before { background-position-x:-140px; }
header .weather .icon4::before { background-position-x:-210px; }
header .weather .icon4::before { background-position-x:-280px; }
header .weather .icon5::before { background-position-x:-350px; }
header .weather .icon6::before { background-position-x:-420px; }
header .weather .region { font-size:0.9em; background:#e87b05; color:#fff; height:25px; border-radius:15rem; padding:0 10rem; margin:0 10rem 0 5rem; }
header .weather .temp { display:flex; align-items:center; }
header .weather .temp::after { content:''; display:block; width:1px; height:12px; background:#000; opacity:0.2; margin:0 10rem;}
header .weather .temp strong.num { padding-left:5rem; }
header .weather .temp strong:not(.num) {font-size:0.8em; }
header .weather .dust strong.type1 { color:var(--blue); }
header .weather .dust strong.type2 { color:var(--green); }
header .weather .dust strong.type3 { color:var(--red); }

header > .wrap { display:flex; align-items:center; padding-top:50rem; height:140rem; }
header h1 a {display:flex;}
header h1 a::before {content:''; display:block; width:247px; height:55px; background:var(--sprite_l) 0 0; }
header #search_open,
header .sitemap { display:flex; align-items:center; justify-content:center; width:50rem; height:50rem; }
header #search_open::before { content:''; display:block; width:27px; height:27px; background:var(--sprite_l) -36px -65px; }
header .sitemap::before { content:''; display:block; width:26px; height:18px; background:var(--sprite_l) 0 -65px; }

header.fixed {position:fixed; left:0; top:0; width:100%; z-index:10; background:#fff; box-shadow:0 0 10rem rgba(0,0,0,0.2); }
header.fixed .top {display:none;}
header.fixed > .wrap {padding-top:0; height:75rem; }
header.fixed .pc_nav .depth2_wrap,
header.fixed .pc_nav .depth2_wrap::after,
header.fixed .pc_nav+.nav_bg {top:75rem; }

.pc_nav .depth2_wrap,
.pc_nav .depth2_wrap::after { top:140rem; }/*펼침메뉴 위치*/
.pc_nav+.nav_bg { top:140rem; }/*검은배경 위치*/
.pc_nav { flex-grow:1;}
.pc_nav .depth1 { justify-content:center; }
.pc_nav .depth1 > li > a {font-size:21rem; font-weight:500; padding:0 18rem; letter-spacing:-2rem; }
.pc_nav dl dt {font-size:35rem !important; }
#m_nav_open {display:none; }
@media all and (max-width:1300px){
	header h1 a::before {zoom:80%;}
}
@media all and (max-width:1200px){
	.pc_nav .depth1 > li > a { font-size:18rem; padding:0 10rem; }
}
@media all and (max-width:1023px){
	header .link {display:none;}
	header .weather .swiper { width:100%; }
	header h1 {flex-grow:1; }
	header .sitemap {display:none;}
	.pc_nav {display:none;}
	#m_nav_open {display:flex; }
}

#quick_wrap { position:fixed; right:20rem; bottom:60rem; z-index:7; }
#quick_wrap > a {display:flex; flex-wrap:wrap; align-content:center; justify-content:center; text-align:center; background:var(--green); color:#fff; width:90rem; height:90rem; font-size:0.9em; line-height:1.2; border-radius:50%; box-shadow:0 5rem 5rem rgba(0,0,0,0.1); margin-bottom:10rem;  }
#quick_wrap > a:last-of-type {background:var(--p_color); }
#quick_wrap > a::before {content:''; display:block; width:18px; height:17px; background:var(--sprite_l) -256px -212px; margin-bottom:7rem; }
#quick_wrap > a:last-of-type::before { width:22px; height:18px; background-position-x:-224px;}
#quick_wrap > a span { width:100%; padding:0 15rem;}
#quick_wrap div { position:absolute; right:60rem; top:-70rem; width:270rem; background:#222; border-radius:40rem; padding:20rem 30rem; box-shadow:3rem 3rem 10rem rgba(0,0,0,0.1); text-align:left; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0.5s; } 
#quick_wrap div::after {content:''; position:absolute; right:40rem; bottom:-20rem; width:50rem; height:50rem; background:linear-gradient(225deg, #222 50%, transparent 50%); transform:rotate(-12deg); z-index:-1;}
#quick_wrap div a { display:flex; font-size:0.85em; padding:3rem 0; }
#quick_wrap div a::before {content:''; display:block; width:4rem; height:4rem; border-radius:50%; background:var(--p_color); margin:10rem 7rem 0 0; }
@media all and (max-width:1023px){
	#quick_wrap { display:flex; right:0; bottom:0; width:100%; }
	#quick_wrap > a {width:50%; height:50rem; border-radius:0; margin:0; }
	#quick_wrap > a::before {margin-bottom:0;}
	#quick_wrap > a span {width:auto; }
	#quick_wrap div {right:0; left:10rem; top:-120rem; }
	#quick_wrap div::after { transform:rotate(60deg); bottom:-5rem; }
}

#quick { position:fixed; right:20rem; top:50%; transform:translateY(-50%); z-index:10; }
#quick a {display:block; font-size:0.85em; line-height:1.2; text-align:center; margin:15rem 0; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
#quick a strong {font-weight:500;}
#quick a span { display:flex; align-items:center; justify-content:center; width:60rem; height:60rem; border-radius:50%; background:#e8effd;  margin:0 auto 5rem; border:1px solid var(--p_color); }
#quick a span::before {content:''; display:block; background:var(--sprite_l); }
#quick a span.icon1::before { width:45px; height:39px; background-position:0 -212px; zoom:80%; }
#quick a span.icon2::before { width:35px; height:29px; background-position:-55px -270px; }
#quick a span.icon3::before { width:35px; height:30px; background-position:-100px -270px; }
#quick a span.icon4::before { width:31px; height:38px; background-position:-145px -270px; }
/*
#quick a span.icon2::before { width:42px; height:47px; background-position:-55px -212px; }
#quick a span.icon3::before { width:45px; height:42px; background-position:-107px -212px; }
#quick a span.icon4::before { width:52px; height:30px; background-position:-162px -212px; }
*/

footer {background:#20283c; padding:60rem 0; color:#fff;}
footer .wrap { position:relative; padding-right:150rem; }
footer a.f_logo {position:absolute; right:0; top:0; width:130px; height:115px; background:var(--sprite_l) -257px 0; }
footer .link { display:flex; flex-wrap:wrap; align-items:center; margin-bottom:40rem; }
footer .link > a {display:flex; align-items:center; color:#fff; }
footer .link > a::after {content:''; display:block; width:1px; height:15px; background:#fff; opacity:0.3; margin:0 20rem;}
/*footer .link > a:last-of-type::after {display:none; }*/
footer .link_list { position:relative;}
footer .link_list > a { display:flex; align-items:center; background:var(--p_color); color:#fff; height:40rem; padding:0 13rem ; border-radius:5rem; }
footer .link_list > a::after { content:''; display:block; width:7rem; height:7rem; border-top:3px solid #fff; border-right:3px solid #fff; transform:rotate(-45deg); margin:5rem 0 0 10rem; }
footer .link_list.on > a::after {  transform:rotate(135deg); margin-top:-2rem; }
footer .link_list div { background:#fff; /*border:1px solid #20283c;*/ padding:10rem 20rem; border-radius:10rem; width:250rem; height:200rem; overflow-y:auto; transform:translate(0, -100%) ; z-index:9; box-shadow:3rem 3rem 10rem rgba(0,0,0,0.1); }
footer .link_list div::-webkit-scrollbar { width:12px; }
footer .link_list div::-webkit-scrollbar-thumb {  border:3px solid #fff; border-radius:20px; background:#ccc; }
footer .link_list div::-webkit-scrollbar-track { background:rgba(255,255,255,0); }
footer .link_list.on > div {  transform:translate(0, calc(-100% - 50rem));  }
footer .link_list div a { display:flex; font-size:0.9em; padding:5rem 0 5rem; }
footer .link_list div a::before {content:''; display:block; width:5rem; height:5rem; background:var(--p_color); border-radius:50%; margin:11rem 5rem 0 0; }
footer address { display:flex; flex-wrap:wrap; }
footer address p {margin:2rem 50rem 2rem 0;}
footer address strong {margin-right:10rem;}
footer small { display:flex; font-size:0.9em; font-weight:300; letter-spacing:0; opacity:0.5; text-transform:uppercase; margin-top:10rem; }
@media all and (max-width:1023px){
	footer { padding-bottom:100rem; }
}
@media all and (max-width:768px){
	footer {padding:40rem 0 90rem;}
	footer .wrap {padding-right:0; }
	footer .link { margin-bottom:20rem;}
	footer a.f_logo {display:none;}
}
@media all and (max-width:480px){
	footer {position:relative; padding:80rem 0 90rem; }
	footer .wrap {position:unset; }
	footer .link > a:last-of-type::after {display:none; }
	footer .link_list {position:absolute; left:0; top:0; width:100%; }
	footer .link_list > a {height:50rem; border-radius:0; }
	footer .link_list div { width:100%; right:0; }
}

.go_top {right:42rem; }
@media all and (max-width:1023px){
	.go_top {display:flex; right:10rem; bottom:55rem; }
}

/* sub_layout */
.toggle > div {position:absolute; opacity:0; visibility:hidden; transition: all 0.5s;}
.toggle.on > div {opacity:1; visibility:visible; transform:translate(0, 20px);}

.toggle > div.list {left:50%; width:150rem; margin-left:-75rem; padding:15rem 20rem; border:1px solid #ddd; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); border-radius:10rem;}
.toggle > div.list > a {display:block; position:relative; margin:5rem 0; padding-left:14rem; line-height:1.4; font-size:17rem;}
.toggle > div.list > a:before {content:''; position:absolute; top:9rem; left:0; width:4rem; height:4rem; background:#bbb; border-radius:50%;}

.sns {display:block;position:relative;width:38rem;height:38rem;text-indent:-9999rem;}
.sns:before {content:''; position:absolute; top:50%; left:50%; width:100%; height:100%; background:url('/dgTown/design/main/img/layout/sns.png') no-repeat 0 0/500% auto; transform:translate(-50%, -50%); border-radius:50%;}
.sns.blog:before {background-color:#147526; background-position:0 0;}
.sns.facebook:before {background-color:#445e99; background-position:25% 0;}
.sns.insta:before {background-color:#da49b8; background-position:50% 0;}
.sns.youtube:before {background-color:#db313e; background-position:75% 0;}
.sns.twitter:before {background-color:#000; background-position:100% 0;}

#snb {height:58rem; background:var(--p_color);}
#snb .wrap {position:relative;}
#snb .drop {display:flex; align-items:center;}
#snb .home {display:block; position:relative; width:42rem; height:42rem; flex:0 0 auto; margin-right:15rem; text-indent:-9999rem;}
#snb .home:before {content:''; position:absolute; top:0; left:0; width:42rem; height:42rem; background:url('/dgTown/design/main/img/layout/util.png') no-repeat 0 0/300% auto;}
#snb .home:after {content:''; position:absolute; top:50%; right:-15rem; width:1px; height:30px; background:#fff; opacity:0.5; transform:translateY(-50%);}
#snb .depth1 {display:flex; width:calc(100% - 42rem);}
#snb .depth1 a {display:block; padding:0 30rem;}
#snb .depth1 > li {position:relative;}
#snb .depth1 > li > a {display:block; position:relative; padding-right:160rem; color:#fff; line-height:58rem;}
#snb .depth1 > li > a:before {content:''; position:absolute; top:50%; right:25rem; width:14rem; height:14rem; background:url('/dgTown/design/main/img/layout/arrow.png') no-repeat 0 0/300% auto; transform: translateY(-50%);}
#snb .depth1 > li > a:after {content:''; position:absolute; top:50%; right:0; width:1px; height:30px; background:#fff; opacity:0.5; transform:translateY(-50%);}
#snb .depth1 > li:last-child > a {font-weight:600;}
#snb .depth1 > li > a.on:before {transform:translateY(-50%) rotate(-180deg);}
#snb .depth2 {display:none; position:absolute; top:58rem; left:0; width:100%; background:#1545b7; z-index:9;}
#snb .depth2 > li > a {color:#fff; font-size:16rem; padding-top:14rem; padding-bottom:14rem; line-height:1.5; border-bottom:1px dashed rgba(255,255,255,0.3);}
#snb .depth2 > li > a.on {background:#0e3e85; /*text-decoration:underline;*/}
#snb .depth2 > li > a.on:hover {background:#102e5a;}
#snb .depth2 > li > a:hover {background:#0e3e85}
#snb .depth2 > li > a.on > span,
#snb .depth2 > li > a:hover > span {border-bottom:1px solid #fff;}
/*blank*/
#snb .depth2 > li > a[target="_blank"] span {position:relative; padding-right:20rem;}
#snb .depth2 > li > a[target="_blank"] span:before {content:''; position:absolute; top:2rem; right:0; width:13rem; height:13rem; background:url('/dgTown/design/main/img/layout/blank.png') no-repeat 0 0/300% auto;}
#snb .depth2 > li > a[target="_blank"] span:before {background-position:50% 100%;}
@media all and (max-width:1023px){
	#snb .depth1 > li {width:33.333%;}
	#snb .depth1 > li > a {padding-right:0;}
	#snb .depth1 > li > a > span {display:block; max-width:80%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
}
@media all and (max-width:768px){
	#snb {height:auto;}
	#snb .wrap {padding:0; width:100%;}
	#snb a.home {display:none;}
	#snb .depth1 {width:100%; flex-wrap:wrap;}
	#snb .depth1 a { padding:0 15rem;}
	#snb .depth1 > li > a:before {right:15rem;}
	#snb .depth1 > li {width:50%; }
	/*#snb .depth1 > li:first-child {display:none;}*/
	#snb .depth1 > li:nth-of-type(3) {width:100%;}
	#snb .depth1 > li:last-child > a:after,
	#snb .depth1 > li:nth-of-type(2) > a:after {display:none;}
	#snb .depth1 > li:nth-of-type(3) > a:after { display:block; width:100%; height:1px; top:0; transform:none;}
}
@media all and (max-width:321px){
	#snb .depth1 a {padding:0 20rem;}
	#snb .depth1 > li > a:before {right:20rem;}
}

#snb .util {position:absolute; right:0; top:8px; display:flex; }
#snb .print,
#snb .share {display:block; width:40rem; height:40rem; margin-left:8rem; background:#fff url('/dgTown/design/main/img/layout/util.png') no-repeat 0 0/300% auto; border-radius:5rem; text-indent:-9999rem;}
#snb .weight .normal {background-position:0 100%}
#snb .weight .bold {background-position:100% 100%}
#snb .close {position:absolute; top:15rem; right:15rem; width:29rem; height:29rem; background:#898989; border-radius:50%;}
#snb .close:before {top:0; left:0; width:29rem; height:29rem; background:url('/dgTown/design/main/img/layout/close.png') no-repeat 0 0/300% auto; transform:translate(0);}
#snb .print {background-position:50% 0%}
#snb .share {background-position:100% 0%}
#snb .share+div {position:absolute; right:0; top:30rem; z-index:2;}
#snb .share+div a {margin-top:8px;}
@media all and (max-width:1640px){
	#snb .util {right:40rem;}
}
@media all and (max-width:1240px){
	#snb .util {right:20rem;}
}
@media all and (max-width:1023px){
	#snb .util {top:auto; bottom:-60rem;}
	#snb .set,
	#snb .print,
	#snb .share {background-color:#f6f6f6;}
}

.sub_top {margin-bottom:40rem; padding-bottom:40rem; text-align:center; border-bottom:1px solid #eee;}
.sub_top .location { display:flex; flex-wrap:wrap; justify-content:center;margin-top:10rem;}
.sub_top .location li { position:relative; padding:0 0 0 50rem;}
.sub_top .location li.home {position:relative; padding:0 0 0 30rem;}
.sub_top .location li.home::before {content:''; position:absolute; left:0; width:24rem; height:24rem; background:url('/dgTown/design/main/img/layout/home.png') no-repeat center;}
.sub_top .location li.home::after {display:none;}
.sub_top .location li::after {content:''; position:absolute; left:20rem; top:8rem; width:8rem; height:8rem; border-top:1px solid #999; border-right:1px solid #999; transform:rotate(45deg);}
.sub_top .location li a {display:block; /* font-size:16rem; */ font-size:0.9em; color:#6a6a6a; text-decoration:underline;}
.sub_tab li a {line-height:1.2;}