@charset "utf-8";

@import url(./fonts/pretendard.css);
@import url(./normalize.css?ver1);

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-underline-offset: 4px;
}

:root{
  /* color */
    --primary-color:#ea4d00;
    --secondary-color:#0000e0;
    --dark-color: #f56800;
}

body {
    font-family: 'Pretendard', 'Helvetica Neue', Helvetica, Arial, 'Malgun Gothic', sans-serif;
    font-size: 16px;
    color: #000;
    letter-spacing: -0.025em;
    min-width: 320px;
}


/* common */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}

ul li, ol li, li {list-style-type: none;}
button {border: 0;background: transparent;cursor: pointer}
img {max-width: 100%;height: auto;}
a {text-decoration: none;}
.color-primary {color: var(--primary-color);}
.color-secondary {color: var(--secondary-color);}
.highlight {box-shadow: inset 0 -8px #c1edff}
.nomargin {margin: 0 !important}
.mt10 {margin-top: 10px !important}
.mt40 {margin-top: 40px !important}

table {table-layout:fixed;width:100%;border-collapse: collapse;border-top: 2px solid #000;}
table th {padding:20px;border-bottom: 1px solid #a0a0a0;border-left:1px solid #a0a0a0;color:#000;vertical-align:middle;line-height:1.4;text-align:center;font-weight:700;background:#f4f6f7;word-break: keep-all;font-size: 1.25rem;}
table td {padding:20px;border-bottom: 1px solid #a0a0a0;border-left:1px solid #a0a0a0;color:#000;vertical-align:middle;line-height:1.4;word-break: keep-all;font-size: 1.25rem;}
table th:first-child,
table td:first-child {border-left:0;}
table tbody tr:last-child th,
table tbody tr:last-child td {border-bottom: 2px solid #000}

table {border-top: 0}
table thead th {background:#f4f4f4;border-top: 2px solid #000;border-bottom: 2px solid #000;}
table tbody th + th {border-left:1px solid #a0a0a0;border-right:0;}
table tbody th {background:#fff;border-left:0;}
table .align-left {text-align: left !important;}
table .bdl {border-left: 1px solid #a0a0a0}

ul.list-dot>li {position: relative;margin: 0 0 20px;padding-left: 16px;font-size: 1.5rem;}
ul.list-dot.small>li {margin: 0 0 10px}
ul.list-dot>li:before {content: '';position: absolute;top: 13px;left: 0;width: 8px;height: 8px;background: var(--primary-color);border-radius: 50%;}
ul.list-dot>li>ul {margin: 12px 0 10px}
ul.list-dot>li>ul>li {font-size: 1.25rem;}
ul.list-dash>li {position: relative;padding-left: 15px;}
ul.list-dash>li:before {content: '-';position: absolute;top: 0;left: 0;}

.btns-group {display: flex;gap: 20px;justify-content: center;margin: 20px 0 40px;}
.btns-group.left {justify-content: flex-start;}
.btns {display: inline-flex;align-items: center;gap: 5px;padding: 15px 20px;background: var(--primary-color);color: #fff;font-weight: 700;font-size: 1.25rem;}
.btns-down:after {content: '';width: 22px;height: 20px;background: url(../images/ico-down.png) no-repeat 0 0}
.btns-link:after {content: '';width: 22px;height: 20px;background: url(../images/ico-link.png) no-repeat 0 0}


/* header */
.header {position: relative;width: 100%;height: 95px;background:#000;z-index: 200}
.header .inner {display: flex;justify-content: space-between;height: 100%;}
.header h1 {margin: 0;display: flex;}
.logo {display: flex;align-items: center;}
.logo:before {content: '';width: 200px;height: 32px;background: url(../images/logo-seoul.png) no-repeat 0 0}
.header .inner .cont-right {display: flex;align-items: center;gap: 15px;}

.lang-list-wrap {display: flex;position: relative;}
.lang-list-wrap .btn-go {width: 40px;height: 40px;background: #f56800;border-radius: 50%;color: #fff;margin-left: -12px;}
.btn-lang {display: flex;align-items: center;gap: 0px;width: 150px;height: 40px;line-height: 2;padding: 5px 0 5px 5px;background-color: transparent;background-image: url(../images/ico-lang.png);background-repeat: no-repeat;background-position: calc(100% - 12px) 50%;color: #fff;font-size: 1.15rem;font-weight: 400;border: 2px solid #fff;border-radius: 100vw;cursor: pointer}
.btn-lang:before {content: '';width: 22px;height: 22px;margin-right: 5px;background: url(../images/ico-global.png) no-repeat 0 0;flex-shrink: 0;}
.btn-lang:after {content: '';width: 36px;height: 100%;margin-left: auto;background: url(../images/ico-down-arr.png) no-repeat 40% 50%;flex-shrink: 0;}
.lang-list {display: none;position: absolute;top: 42px;left: 0;width: 150px;padding: 0;background: #fff;border: 2px solid #000;box-shadow: 3px 3px 3px rgba(0,0,0, .3);border-radius: 10px;overflow: hidden;}
.lang-list>li {display: flex;justify-content: center;padding: 8px 0;color: #000;cursor: pointer;font-weight: 400;font-size: 1rem;}
.lang-list>li:hover,
.lang-list>li.current {background: #ffd7dd;color: #000;}

.story-share-wrap {display: inline-flex;position: relative;font-size: 16px;z-index: 10;box-sizing: border-box}
.story-share-wrap .btn-ssw-share {display: flex;align-items: center;justify-content: center;gap: 8px;background-color: rgba(0,0,0,.5);width: 106px;height: 40px;line-height: 40px;margin-right: 28px;padding: 0;border: 2px solid #fff;border-radius: 100vw;color: #fff;font-size: 1.125rem;letter-spacing: -0.05em;cursor: pointer}
.story-share-wrap .btn-ssw-share span {color: inherit;}
.story-share-wrap .btn-ssw-share:after {content: '';position: absolute;top: 0;right: 0;width: 40px;height: 40px;background: #f56800 url(../images/ico-share.png) no-repeat 0 0;flex-shrink: 0;border-radius: 50%;background-position: calc(50% - 2px) 50%}

.story-share-wrap .ssw-list {display: none;position: absolute;z-index: 10;top: 42px;right: 0;width: 100%;min-height: 140px;padding: 0 0 15px;background: #fff;border: 2px solid #000;box-shadow: 3px 3px 3px rgba(0,0,0, .3);border-radius: 10px;}
.story-share-wrap .ssw-list .btn-ssw-close {position: absolute;bottom: -15px;left: calc(50% + 2px);width: 32px;height: 32px;text-indent: -9999em;cursor: pointer;transform: translateX(-50%);background: #000;border-radius: 50%;}
.story-share-wrap .ssw-list .btn-ssw-close:before {content: '';position: absolute;top: 50%;left: 50%;width: 18px;height: 1px;background-color: #fff;transform: translate(-50%, -50%) rotate(135deg)}
.story-share-wrap .ssw-list .btn-ssw-close:after {content: '';position: absolute;top: 50%;left: 50%;width: 18px;height: 1px;background-color: #fff;transform: translate(-50%, -50%) rotate(-135deg)}

.story-share-wrap .ssw-list ul {display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 6px;padding: 10px 8px;}
.story-share-wrap .ssw-list ul li {width: calc((100% - 6px) / 2 );text-align: center;}
.story-share-wrap .ssw-list ul li .btn-ssw {display: flex;flex-direction: column;justify-content: center;gap: 8px;width: 100%;cursor: pointer;border: 0;background: transparent;color: #000;font-size: 0.875rem;letter-spacing: -0.05em;;}
.story-share-wrap .ssw-list ul li .btn-ssw:before {content: '';width: 40px;height: 40px;margin: 0 auto;background-image: url(../images/ico-sns.png); background-repeat: no-repeat;background-position: 0 0;}
.story-share-wrap .ssw-list ul li .btn-ssw-fb:before {background-position: 0 0}
.story-share-wrap .ssw-list ul li .btn-ssw-kakao:before {background-position: -80px 0}
.story-share-wrap .ssw-list ul li .btn-ssw-x:before {background-position: -40px 0}
.story-share-wrap .ssw-list ul li .btn-ssw-blog:before {background-position: -120px 0}
.story-share-wrap .ssw-list ul li .btn-ssw-url:before {background-position: -160px 0}


/* menu */
.menu-nav {position: sticky;top: 0;display: flex;background: #fff;z-index: 100;width: 100%;height: 104px;background: #ad520e;margin-top: -104px;}
.menu-nav ul {display: flex;width: 100%;height: 100%;}
.menu-nav ul li {position: relative;flex: 1;width: 33.333333%;height: 100%;display: flex;background-color: #000;}

.menu-item::before {content: "";position: absolute;left: 0;top: 0;width: 2px;height: 100%;background-color: #626262;}

.menu-item.on {background-color: #f56800;}
.menu-item.on a { color: #fff; }
.menu-item.on a:before,
.menu-item.on a:after {display: block;}
.menu-item:first-child::before,
.menu-item.on::before,
.menu-item.on + .menu-item::before {display: none;}

.menu-nav ul li a {position: relative;flex: 1;display: flex;align-items: flex-end;justify-content: center;width: 100%;text-decoration: none;color: #777;font-size: 2rem;font-weight: 700;}
.menu-nav ul li a::before {display: none;content: "";position: absolute;top: 8px;left: 8px;width: calc(100% - 16px);height: calc(100% - 16px);border: 1px solid rgba(255,255,255, .3);z-index: 0}
.menu-nav ul li a::after {display: none;content: '';position: absolute;bottom: 0;right: 0;width: 26px;height: 26px;background: url(../images/bg-menu.png) no-repeat 0 0;}

.menu-nav ul li a span {position: relative;display: flex;gap: 20px;align-items: center;z-index: 1;}
.menu-nav ul li a span:before {display: flex;align-items: flex-end;content: '';width: 70px;height: 94px;background: url(../images/ico-menu.png) no-repeat 0 0;}
.menu-nav ul li.menu1 a span:before {background-position: 0 0;}
.menu-nav ul li.menu2 a span:before {background-position: -70px 0;}
.menu-nav ul li.menu3 a span:before {background-position: -140px 0;}
.menu-nav ul li.menu1.on a span:before {background-position: 0 -94px}
.menu-nav ul li.menu2.on a span:before {background-position: -70px -94px;}
.menu-nav ul li.menu3.on a span:before {background-position: -140px -94px;}

/* content common */
.inner {width: 100%;max-width: 1080px;margin: 0 auto;}
.section {padding: 0 0 60px;min-height: 100vh}
.section * {word-break: keep-all;}
.section .inner {padding-top: 70px;}
.section p {font-size: 1.25rem}
.section p.flexCont {margin: 5px 0;}
.section table {margin: 25px 0 30px}
.section .img {margin: 15px 0 25px}
.section .img.line img {border: 2px solid #000}
.section h4.title-round {padding: 10px 5px;border-radius: 100vw;border: 2px solid var(--primary-color);color: var(--primary-color);font-size: 1.5rem;font-weight: 700;text-align: center;}

.banner-area {display: flex;justify-content: space-between;gap: 15px;padding: 0 0 70px;}
.banner-area > a {position: relative;width: calc((100% - 15px) / 2);display: flex;padding: 25px 40px;background: #f4f4f4;color: #000;font-size: 2rem;font-weight: 700;text-decoration: none;}
.banner-area > a:before {content: '';position: absolute;top: 0;left: 0;width: 8px;height: 100%;background: #ef1841;z-index: -1;transition: all .3s ease-in-out}
.banner-area > a>span {display: flex;justify-content: flex-start;gap: 15px;align-items: center;width: 100%;}
.banner-area > a>span:before {content: '';width: 100px;height: 100px;background: url(../images/ico-banner.png) no-repeat 0 0;flex-shrink: 0;}
.banner-area > a>span:after {content: '';width: 77px;height: 52px;margin-left: auto;background: url(../images/ico-arrow.png) no-repeat 0 0;flex-shrink: 0;}

.banner-area.ba-traffic>a.banner2>span:before {background-position: -100px 0;}
.banner-area.ba-info>a.banner1>span:before {background-position: -200px 0;}
.banner-area.ba-info>a.banner2>span:before {background-position: -300px 0;}
.banner-area.ba-event>a.banner1>span:before {background-position: -400px 0;}

.links-area {background: #fff;}
.links-area .inner {padding-top: 20px;padding-bottom: 20px}
.links-area .links-wrap {display: flex;align-items: flex-start;justify-content: space-between;gap: 20px;padding: 40px 60px;background: #edfafd;border: 1px solid #ddd;}
.links-area .links-wrap h4 {font-size: 2.25rem;line-height: 1.3;}
.links-area .links-wrap .links {display: flex;justify-content: flex-end;gap: 20px;flex-wrap: wrap;width: 380px;}
.links-area .links-wrap .links a {width: calc((100% - 40px) / 3);display: flex;flex-direction: column;align-items: center;justify-content: flex-start;gap: 5px;color: #000;font-size: 1.125rem;}
.links-area .links-wrap .links a:before {content: '';width: 96px;height: 96px;border-radius: 10px;background: url(../images/ico-links.png?ver1) no-repeat 0 0;border: 1px solid #ddd;}
.links-area .links-wrap .links a.links1-1:before {background-position: 0 0;}
.links-area .links-wrap .links a.links1-2:before {background-position: -96px 0;}
.links-area .links-wrap .links a.links1-3:before {background-position: -192px 0;}
.links-area .links-wrap .links a.links1-4:before {background-position: -288px 0;}
.links-area .links-wrap .links a.links1-5:before {background-position: -384px 0;}
.links-area .links-wrap .links a.links1-6:before {background-position: -480px 0;}

.links-area .links-wrap .links a.links2-1:before {background-position: 0 -96px;}
.links-area .links-wrap .links a.links2-2:before {background-position: -96px -96px;}

.flexCont {display: flex;gap: 5px;}
.flexCont.center {align-items: center;}
.flexCont .fc-first {flex-shrink: 0;}

.flexBox {display: flex;gap: 20px;width: 100%;margin: 40px 0;}
.flexBox.gray {padding: 20px;background: #f4f4f4;}
.flexBox.space {justify-content: space-between;}
.flexBox.column {flex-direction: column}

.flexBox.half {padding: 60px;background: #f4f4f4;justify-content: space-between;gap: 20px;}
.flexBox.half .fb-box {display: flex;flex-direction: column;justify-content: space-between;}

.section .flexBox.half p.flexCont {margin-bottom: 10px;align-items: flex-start;}
.section .flexBox.half p.flexCont span + span,
.section .flexBox.half p.flexCont strong + span {padding-top: 5px;}

.flexBox.gray .fb-box + .fb-box {flex-shrink: 0;}
.flexBox .fb-box.one {width: calc((100% - 20px) / 2)}
.flexBox .fb-box.gray {background: #f4f4f4}

.box-notice {padding: 20px;border: 2px solid #000;background-color: #fff2ec}

/* title */
.section h3 {position: relative;margin: 80px 0 38px;padding: 0 0 0 52px;font-size: 2.5rem;font-weight: 700;line-height: 1.2;}
.section h3.mt0 {margin: 0 0 38px;}
.section h3:before {content: '';position: absolute;top: 0;left: 0;width: 40px;height: 40px;background: url(../images/ico-check.png) no-repeat 0 0;}


/* section VISUAL */
.section-visual {overflow: hidden;height: calc(100vh - 95px);display: flex;background: url(../images/bg-visual.jpg) no-repeat 50% 100%;}
.section-visual .inner {display: flex;flex-direction: column;justify-content: space-between;padding: 30px 0 50px}
body.narrow .section-visual,
body.large .section-visual {height: auto;}
body.narrow .section-visual .inner,
body.large .section-visual .inner {padding: 30px 0 0;}

.visual-text-wrap {position: relative;display: inline-flex;flex-direction: column;width: auto;max-width: 90%;margin: 0 auto;background: url(../images/bg-text.png) no-repeat 0 0;}
.visual-text-wrap:before {content: '';position: absolute;top: 4px;left: 35px;width: 65px;height: 76px;background: url(../images/ico-mark.png) no-repeat 0 0;}
.visual-text-wrap:after {content: '';position: absolute;top: 0;right: -20px;width: 100px;height: 100px;background: url(../images/bg-text.png) no-repeat 100% 0;z-index: 3;}
.visual-text-wrap .visual-text {position: relative;padding: 25px 35px 0px 35px;}
.visual-text-wrap .visual-text::after {content: '';position: absolute;top: 0;right: -20px;width: 100px;height: 100%;background: url(../images/bg-text.png) repeat-y 100% 0;z-index: 2;}

.visual-text-wrap .visual-text-btm {position: relative;}
.visual-text-wrap .visual-text-btm:before {content: '';position: absolute;bottom: -50px;left: -35px;width: 100px;height: 100px;background: url(../images/bg-text.png) no-repeat 0 100%;}
.visual-text-wrap .visual-text-btm:after {content: '';position: absolute;bottom: -50px;right: -55px;width: calc(100% + 65px);height: 100px;background: url(../images/bg-text.png) no-repeat 100% 100%;}
.visual-text-wrap p.top {position: relative;z-index: 5;padding: 15px 0;border-bottom: 2px solid #000;font-size: 2.5rem;font-weight: 700;text-align: center;line-height: 1}
.visual-text-wrap h2 {position: relative;z-index: 5;margin-top: 4px;padding: 10px 0;border-top: 4px solid #000;border-bottom: 2px solid #000;color: #fff;font-size: 4.375rem;font-weight: 700;text-align: center;line-height: 1;}
.visual-text-wrap p.date {display: flex;justify-content: center;gap: 30px;z-index: 5;position: relative;padding: 15px 0;font-size: 2rem;font-weight: 700;text-align: center;border-bottom: 2px solid #000;}
.visual-text-wrap p.date span {position: relative;letter-spacing: -0.05em;}
.visual-text-wrap p.date span:first-child:after {content: '';position: absolute;top: -5px;right: -15px;width: 2px;height: 120%;background: #000;}

.visual-img-wrap {position: relative;z-index: 10;}
.visual-img-wrap img {margin: 0 auto;width: 100%;}

/* section traffic */
.go-smart {display: inline-flex;align-items: center;justify-content: center;gap: 5px;padding: 5px 0;color: var(--secondary-color);border-radius: 3px;font-weight: 700;font-size: 1.25rem;}
.go-smart:after {content: '';width: 15px;height: 15px;background: url(../images/ico-map.png) no-repeat -30px 0}
.s-traffic h3 + table.tstyle {margin: 40px 0 30px}
.num {display: inline-flex;align-items: center;justify-content: center;width: 2em;height: 2em;border-radius: 50%;background: #00deff}
.num1 {background: #00deff}
.num2 {background: #6cf47f}
.num3 {background: #c674ff}
.num4 {background: #ff7403}
.num5 {background: #ff6982}

.cnum {display: inline-flex;align-items: center;justify-content: center;width: 1rem;height: 1rem;margin: 0 2px 0 0;padding: 5px;border-radius: 50%;color: #fff;box-sizing: content-box;}
.cnum1 {background: #0000ff}
.cnum2 {background: #008000}
.cnum3 {background: #ff6600}
.cnum5 {background: #800080}


.h4-wrap {display: flex;gap: 15px;align-items: center;margin: 40px 0 20px;color: var(--primary-color);font-size: 1.75rem;font-weight: 700;}
.h4-wrap h4 {min-width: 115px;padding: 3px 22px 9px;background: url(../images/bg-sticker.png) no-repeat 0 0;color: #fff;text-align: center;}
.h4-wrap p {font-size: 1.75rem;font-weight: 700;}
.h4-wrap p span {color: var(--secondary-color);font-size: 1.125rem;}

.btn-line {color: #000;text-decoration: underline;}

.fc-first.line {justify-content: center;min-width: 120px;padding: 2px 10px;border: 2px solid var(--secondary-color);border-radius: 100vw;color: var(--secondary-color);font-weight: 700;text-align: center;}
.fc-first.line.c2 {border: 2px solid #dc0303;color: #dc0303}
.fc-first.line.c3 {border: 1px solid #000;color: #000}

/* section info */
.tel-number-wrap {display: flex;flex-wrap: wrap;gap: 40px 20px;}
.tel-number-wrap .tel-number {display: flex;gap: 10px;align-items: center;width: calc((100% - 40px) / 3);font-size: 1.25rem}
.tel-number-wrap .tel-number:before {flex-shrink: 0;content: '';width: 72px;height: 72px;background-color: var(--dark-color);background-image: url(../images/ico-tel.png);background-repeat: no-repeat;background-position: 50% 50%;border-radius: 50%;}
.tel-number-wrap .tel-number.web:before {background-image: url(../images/ico-web.png);}
.tel-number-wrap .tel-number .tn-text {display: flex;flex-direction: column;align-items: flex-start;gap: 3px;color: #000;font-weight: 700;}
.tel-number-wrap .tel-number .tn-text a {color: inherit;}
.tel-number-wrap .tel-number .tn-text a.no-phone {display: inline-flex;align-items: center;background: #000;color: #fff;border-radius: 5px;font-size: 1rem;padding: 2px 5px;}
.tel-number-wrap .tel-number .tn-text a.no-phone:after {content: '';width: 15px;height: 15px;background: url(../images/ico-map.png) no-repeat -15px 0;}

.s-info .links-area {margin-top: 35px;}

/* section event */
.go-map {display: inline-flex;align-items: center;justify-content: center;gap: 5px;padding: 3px 15px;color: var(--primary-color);border: 1px solid var(--primary-color);border-radius: 100vw;font-weight: 700;}
.go-map:after {content: '';width: 15px;height: 15px;background: url(../images/ico-map.png) no-repeat 0 0}



/* footer */
.footer {background-color: #000;padding: 40px 0;}
.footer p.phone {display: flex;justify-content: center;align-items: center;gap: 5px;color: #fff;font-size: 1.5rem;text-align: center;}
.footer p.phone a {display: inline-flex;align-items: center;gap: 5px;color: #fff;}
.footer p.phone a:before {content: '';width: 36px;height: 36px;background: url(../images/ico-phone.png) no-repeat 0 0}
.footer p.copyright {margin-top: 5px;color: #fff;font-size: 1rem;text-align: center;} 
.btn-top {opacity: 0;position: fixed;bottom: 0px;right: 20px;width: 40px;height: 40px;background: url(../images/btn-top.png) no-repeat 0 0;background-size: 100% auto;border-radius: 50%;z-index: 101;transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);}
.btn-top.show {opacity: 1;bottom: 50px;}


@media (max-width: 1200px) {
    /* content common */
    .inner {padding: 0 1rem}
    .menu-nav .inner {padding: 0}
}

@media (max-width: 1023px) {
    /* header */
    .header {height: 68px}
    .logo:before {width: 100px;height: 16px;background-size: auto 100%;}
    .story-share-wrap .ssw-list {min-width: 120px;right: -0.5rem}
    .story-share-wrap .ssw-list ul {padding: 10px 4px}

    .section-visual {height: auto}

    .menu-nav {height: 60px;margin-top: -20px;}
    .menu-item::before {width: 1px}
    .menu-nav ul li a {font-size: 1.25rem}
    .menu-nav ul li a::before {top: 2px;left: 2px;width: calc(100% - 6px);height: calc(100% - 6px);}
    .menu-nav ul li a span {gap: 10px}
    .menu-nav ul li a span:before {width: 42px;height: 56.5px;background-size: 126px auto;flex-shrink: 0;}
    .menu-nav ul li.menu1 a span:before {background-position: 0 0;}
    .menu-nav ul li.menu2 a span:before {background-position: -42px 0;}
    .menu-nav ul li.menu3 a span:before {background-position: -84px 0;}
    .menu-nav ul li.menu1.on a span:before {background-position: 0 -56.5px}
    .menu-nav ul li.menu2.on a span:before {background-position: -42px -56.5px;}
    .menu-nav ul li.menu3.on a span:before {background-position: -84px -56.5px;}

    .menu-nav ul li a::after {width: 18px;height: 18px;background-size: 100% auto;}

    /* section visual */
    .visual-text-wrap:before {width: 50px;background-size: 100% auto;}
    .visual-text-wrap p.top {font-size: 1.75rem;}
    .visual-text-wrap h2 {font-size: 3rem;}
    .visual-text-wrap p.date {font-size: 1.625rem;}

    .flexBox.half {flex-direction: column;}
    .flexBox.half .fb-box {width: 100%;justify-content: center;}

    /* section traffic */
    .links-area .links-wrap {padding: 32px 25px;}
    .links-area .links-wrap h4 {font-size: 1.875rem;line-height: 1.5;}
    .links-area .links-wrap .links {gap: 10px}

    .flexBox.half {padding: 30px;gap: 15px;}
    .btns-group.left {justify-content: center}
    .flexBox.half  .fb-box + .fb-box {margin: 20px auto 0;}


    /* section info */
    .tel-number-wrap {display: flex;flex-wrap: wrap;gap: 20px 10px;}
    .tel-number-wrap .tel-number {width: calc((100% - 20px) / 3);font-size: 1.125rem}
    .tel-number-wrap .tel-number:before {width: 52px;height: 52px;background-color: var(--dark-color);background-size: 50% auto;}
    .tel-number-wrap .tel-number .tn-text {display: flex;flex-direction: column;gap: 3px;color: #000;font-weight: 700;}
    .tel-number-wrap .tel-number .tn-text a {color: inherit;}
}

@media (max-width: 940px) {
    .links-area .links-wrap {flex-direction: column;align-items: center;}
    .links-area .links-wrap h4 br {display: none}
    .links-area .links-wrap .links {width: 100%;justify-content: center;}
    .links-area .links-wrap .links a {width: 100px;}
}

@media (max-width: 767px) {
    .pc-only {display: none}
    .mo-only {display: block}
    .mobile-block {display: block;}

    table.tstyle {margin: 15px 0;border-top: 2px solid #000;border-bottom: 1px solid #000;border-left: 0px solid #a0a0a0;border-right: 0px solid #a0a0a0;}
    table.tstyle thead{display:none;}
    table.tstyle th, table.tstyle td{box-sizing:border-box;padding: 10px 10px;font-size: 1rem}
    table.tstyle, table.tstyle tbody tr, table.tstyle tbody th, table.tstyle tbody td {display:block;}
    table.tstyle tbody{display:block;}
    table.tstyle tbody tr{position:relative;}
    table.tstyle tbody td{margin-left:68px;display:block;border: 0;border-bottom:1px dashed #a0a0a0;display: flex;gap: 5px;}
    table.tstyle tbody td:before {content:attr(data-tit) " : ";font-weight:bold;display:inline-block;flex-shrink: 0;}
    table.tstyle tbody td.dashed {border-bottom:1px dashed #a0a0a0;}
    table.tstyle tbody td+td{border-bottom:1px solid #a0a0a0;}
    table.tstyle tbody td:first-child {border-top:0;}
    table.tstyle tbody th[scope="row"] {position:absolute;left:0;top:0;bottom:0;width:70px;background:#f4f6f7;z-index:2;}    
    table.tstyle tbody th[scope="rowgroup"] {display:block;background:#f4f6f7;border-right:0;}
    table.tstyle tbody th[scope="row"] + th[scope="rowgroup"] {margin-left:70px;}
    table.tstyle tbody th+th[scope="row"]{top:34px;background:#f4f6f7;}
    
    table.tstyle .mobile-hide {display:none;}
    table.tstyle .bdl {border-left: 0}
    table tbody tr:last-child th, table tbody tr:last-child td {border-bottom: 0}

    table.tstyle.type2 tbody th[scope="row"] {width: 50px}
    table.tstyle.type2 tbody th[scope="row"] + th[scope="rowgroup"] {margin-left:50px;}
    table.tstyle.type2 tbody td {margin-left: 48px}

    table.tstyle.type3 {border: 0;border-top: 2px solid #000;}
    table.tstyle.type3 tbody tr {display: flex;flex-direction: column;}
    table.tstyle.type3 tbody td:before {content: attr(data-tit);display: flex;align-items: center;}
    table.tstyle.type3 tbody th[scope="row"] {position: relative;top: 0;left: 0;width: 100%;text-align: left;border: 0;border-bottom: 1px solid #a0a0a0;}
    table.tstyle.type3 tbody td {display: flex;margin-left: 0;width: 100%;padding: 0;border-bottom: 1px solid #a0a0a0;}
    table.tstyle.type3 tbody td span.t-wrap {padding: 10px 5px}
    table.tstyle.type3 tbody td:before {min-width: 25%;border-right: 1px solid #a0a0a0;justify-content: center;}

    table.tstyle.type3.new tbody td:before {display: none;}
    table.tstyle.type3.new tbody td span.mo-only {display: flex;align-items: center;border-right: 1px solid #a0a0a0;min-width: 35%;padding-left: 10px;}

    /* header */
    .header h1 {width: 66px;}
    .logo:before {width: 66px;height: 42px;background: url(../images/logo-seoul-mobile.png)}
    .header .inner {width: 100%;}
    .header .inner .cont-right {justify-content: flex-end;width: calc(100% - 66px);gap: 5px;margin-left: auto;}
    .btn-lang {width: auto;height: 30px;font-size: 1rem;}
    .lang-list-wrap .btn-go {width: 30px;height: 30px;margin-left: -10px}
    .story-share-wrap .btn-ssw-share {width: 90px;height: 30px;line-height: 30px;margin-right: 18px;font-size: 1rem}
    .story-share-wrap .btn-ssw-share:after {width: 30px;height: 30px;background-size: 12px auto;}

    .menu-nav {height: 80px;margin-top: -50px;}
    .menu-nav ul li a {flex-direction: column;justify-content: center;align-items: center;font-size: 1.125rem}
    .menu-nav ul li a span {flex-direction: column;gap: 5px}    
    .menu-nav ul li a span:before {width: 34px;height: 32px;background: url(../images/ico-menu-mobile.png) no-repeat 0 0;background-size: auto 64px;}

    .menu-nav ul li.menu1 a span:before {background-position: 0 0;}
    .menu-nav ul li.menu2 a span:before {background-position: -34px 0;}
    .menu-nav ul li.menu3 a span:before {background-position: -68px 0;}
    .menu-nav ul li.menu1.on a span:before {background-position: 0 -32px}
    .menu-nav ul li.menu2.on a span:before {background-position: -34px -32px;}
    .menu-nav ul li.menu3.on a span:before {background-position: -68px -32px;}

    .menu-nav ul li a::after {display: none !important}

    /* section visual */
    .section-visual {height: auto;}
    .section-visual .inner {height: auto;padding: 20px 20px 0 0;}
    .visual-text-wrap {background: url(../images/bg-text-mobile.png) no-repeat 0 0;}
    .visual-text-wrap:after {top: 0;right: -20px;width: 100px;height: 100px;background: url(../images/bg-text-mobile.png) no-repeat 100% 0;}
    .visual-text-wrap .visual-text {position: relative;padding: 15px 5px 0px 20px}
    .visual-text-wrap .visual-text::after {background: url(../images/bg-text-mobile.png) repeat-y 100% 0;}
    .visual-text-wrap .visual-text-btm:before {bottom: -20px;left: -20px;background: url(../images/bg-text-mobile.png) no-repeat 0 100%;}
    .visual-text-wrap .visual-text-btm:after {bottom: -20px;right: -25px;width: calc(100% + 25px);height: 100px;background: url(../images/bg-text-mobile.png) no-repeat 100% 100%;}


    .visual-text-wrap:before {top: 2px;left: 15px;width: 28px;height: 34px;background-size: 100% auto;}
    .visual-text-wrap p.top {padding: 5px 15px 5px;font-size: 1.125rem;letter-spacing: -0.075rem;}
    .visual-text-wrap h2 {font-size: 1.875rem;}
    .visual-text-wrap p.date {flex-direction: column;gap: 5px;padding: 5px 0;border-bottom: 0;font-size: 1rem;}
    .visual-text-wrap p.date span:first-child {padding-bottom: 5px;border-bottom: 1px solid #000}
    .visual-text-wrap p.date span:first-child:after {display: none}


    /* content common */
    ul.list-dot>li {margin: 0 0 15px;padding-left: 12px;font-size: 1.125rem;text-align: left;}
    ul.list-dot>li.mt40 {margin-top: 20px !important}
    ul.list-dot>li:before {top: 8px;width: 6px;height: 6px;}
    ul.list-dot>li>ul {margin: 6px 0 10px}
    ul.list-dot>li>ul>li {font-size: 1.0625rem;}
    .lh2 {line-height: 2;}

    .section {padding: 0 0 30px;}
    .s-traffic {padding: 0}
    .section .inner {padding-top: 45px;}    
    .section p {font-size: 1.0625rem;}
    .banner-area {display: flex;flex-direction: column;}
    .banner-area > a {width: 100%}

    .flexBox {margin: 20px 0;flex-direction: column;}
    .flexBox .fb-box,
    .flexBox .fb-box.one {width: 100%;text-align: center;}
    .flexBox.gray {padding: 10px 10px 20px}

    .section h3 {margin: 35px 0 15px;padding: 0 0 0 30px;font-size: 1.5rem;}
    .section h3.mt0 {margin: 0 0 15px;padding-bottom: 0;}
    .section h3:before {width: 24px;height: 24px;background-size: 100% auto;}

    .section .img {margin: 10px 0 15px;}
    .section .img .mo-only {line-height: 1}

    .btns-group {display: flex;gap: 20px;justify-content: center;margin: 20px 0 40px;}
    .btns {padding: 10px 15px;font-size: 1.125rem;}
    .btns-down:after {content: '';display: inline-block;margin-left: 5px;vertical-align: top;}
    .btns-link:after {content: '';display: inline-block;margin-left: 5px;vertical-align: top;}

    .box-notice {padding: 10px}

    .links-area .inner {padding-top: 0px;padding-bottom: 0;}
    .links-area .links-wrap {padding: 32px 15px}
    .links-area .links-wrap h4 {font-size: 1.5rem}
    .links-area .links-wrap .links {gap: 15px 10px;justify-content: center;flex-wrap: wrap;max-width: 400px}
    .links-area .links-wrap .links a {font-size: 1rem;justify-content: flex-start;text-align: center;width: calc((100% - 20px) / 3)}
    .links-area .links-wrap .links a:before {width: 46px;height: 46px;background-size: auto 138px;border-radius: 5px;}
    .links-area .links-wrap .links a.links1-1:before {background-position: 0 0;}
    .links-area .links-wrap .links a.links1-2:before {background-position: -46px 0;}
    .links-area .links-wrap .links a.links1-3:before {background-position: -92px 0;}
    .links-area .links-wrap .links a.links1-4:before {background-position: -138px 0;}
    .links-area .links-wrap .links a.links1-5:before {background-position: -184px 0;}
    .links-area .links-wrap .links a.links1-6:before {background-position: -230px 0;}

    .links-area .links-wrap .links a.links2-1:before {background-position: 0 -46px;}
    .links-area .links-wrap .links a.links2-2:before {background-position: -46px -46px;}


    /* section traffic */
    .s-traffic h3 + table.tstyle {margin: 20px 0 15px !important;}
    .h4-wrap {align-items: flex-start;gap: 5px;margin: 20px 0 10px;}
    .h4-wrap h4 {min-width: 75px;font-size: 1.125rem;background-size: 100% auto;padding: 3px 16px;}
    .h4-wrap p {display: flex;flex-direction: column;font-size: 1.375rem;letter-spacing: -0.075em}
    
    .h4-wrap p span,
    .go-smart {font-size: 1rem}

    .flexBox.half {padding: 15px;}

    /* section info */
    .tel-number-wrap {display: flex;flex-wrap: wrap;gap: 20px 10px;}
    .tel-number-wrap .tel-number {width: calc((100% - 20px) / 2);font-size: 1.125rem}
    .tel-number-wrap .tel-number:before {width: 42px;height: 42px;}
    .tel-number-wrap .tel-number .no-phone {word-break: break-all;}
    .tel-number-wrap .tel-number .tn-text {gap: 5px;line-height: 1.2;}

    /* section event */
    .footer {margin-top: 30px;padding: 20px 0;}
    .btn-top.show {bottom: 70px}
    .footer p.phone {font-size: 1rem}
    .footer p.copyright {font-size: 0.875rem}

    .footer p.phone a:before {width: 18px;height: 18px;background-size: 100% auto;}



}

@media (max-width: 540px) {
    .section p.flexCont.column {flex-direction: column;align-items: flex-start;}
    .links-area .links-wrap .links {gap: 20px 10px;}
    /* section info */
    .tel-number-wrap {flex-direction: column;}
    .tel-number-wrap .tel-number {width: 100%;}

    
}


@media (max-width: 400px) {
    .links-area .links-wrap {justify-content: space-between;}
    .links-area .links-wrap h4 {font-size: 1.125rem}
    .links-area .links-wrap .links a {font-size: 0.875rem}

    .cnum {width: 0.875rem;height: 0.875rem}

    
}

    

@media (max-width: 380px) {
    .visual-text-wrap h2 {font-size: 1.625rem}
    .story-share-wrap .btn-ssw-share,
    .btn-lang {font-size: 0.875rem}
    .section-visual .inner {padding: 20px 15px 0 0}
    body.narrow .section-visual .inner,
    body.large .section-visual .inner{padding: 20px 0 0;}

    .visual-text-wrap:before {width: 22px;left: 10px;}
}

@media (max-width: 359px) {
    .logo:before {width: 56px;height: 36px;background-size: 100% auto;}
    .header .inner {padding: 0 .5rem}
    .story-share-wrap .btn-ssw-share {width: 80px;}
    .story-share-wrap .ssw-list {min-width: 80px;width: 100%;right: 0;}
    .story-share-wrap .ssw-list ul {flex-direction: column;min-width: 100%}
    .story-share-wrap .ssw-list ul li {width: 100%;}
    .story-share-wrap .ssw-list ul li .btn-ssw {font-size: 0.75rem;}
    .lang-list {width: 130px}
    .btn-lang:before {width: 18px;height: 18px;background-size: 100% auto;}
    .btn-lang:after {width: 26px;}

    .visual-text-wrap h2 {font-size: 1.375rem;padding: 5px 0 8px}

    .h4-wrap p {font-size: 1.125rem}
}

@media (min-width: 401px) {
    .links-area .links-wrap .links a {min-width: 66px;}
}

@media (min-width: 768px) {
    table.tstyle tbody td {text-align: center;}
    table.tstyle .mobile-show {display:none !important;}

    .pc-only {display: block}
    .mo-only {display: none}
}

@media (min-width: 1400px) {
    .section-visual {min-height: 800px;}
    .btn-top {right: auto;left: 50%;margin-left: 600px;width: 60px;height: 60px;}
    .btn-top.show {bottom: 92px;}

    .visual-text-wrap p.top {padding-left: 10px}
}

@media (min-width: 1920px) {
    .section-visual {background-size: cover}
}

@media (hover: hover) and (pointer: fine) {
    .s-event table.type3 tbody tr.map:hover {cursor: pointer}
    .s-event table.type3 tbody tr.map:hover th,
    .s-event table.type3 tbody tr.map:hover td {color: #69359c !important}

    .s-event table.type3 tbody tr.map:hover td .go-map,
    .go-map:hover {background: var(--primary-color);border: 1px solid var(--primary-color);color: #fff}
    .s-event table.type3 tbody tr.map:hover td .go-map:after,
    .go-map:hover:after {background-position: -15px 0}

    .btn-line:hover {color: var(--secondary-color)}



    
}