@charset 'utf-8';
@import url(fonts/fonts.css);

/* CSS Document */
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body {font:16px/1.5 'Nanum Gothic', '맑은고딕', 'Malgun Gothic', 'dotum', '돋움', 'gulim', '굴림', 'sans-serif';color:#222; min-width:280px;letter-spacing: -0.06em;}
body, div, dl, dt, dd, th, td, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, p, blockquote, button, input, textarea {margin:0;padding:0;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main {display:block;margin:0;padding:0;}
hr, table caption {display:none;}
legend, .hd-element {position:absolute;visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
table {width:100%;table-layout:fixed;border-spacing:0;border-collapse:collapse;}
img, fieldset, button, input {max-width:100%;vertical-align:middle;border:0;}
ul, ol, li {list-style:none;}
em, address {font-style:normal;}
label, button {cursor:pointer;}
a {text-decoration:none;color:#222;}
button {vertical-align:top;background:transparent;}
button::-moz-focus-inner {padding:0;border:0;}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
input, select, button {font:12px/1.5 'Nanum Gothic', '맑은고딕', 'Malgun Gothic',  'dotum', '돋움', 'gulim', '굴림', 'sans-serif';color:#222;}
/*스크린 리더 only*/
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}

/*스킵 네비게이션 */
#accessibility{ position: absolute; margin: 0 auto; width: 100%; list-style: none; font-size: 1.15em; top: -10.5em; left: 0; z-index: 999;}
#accessibility a:focus-visible, #skip a:active { position: absolute; padding-top: 0.5em; width: 100%; height: 2em; top: 10.5em; z-index: 999; text-align: center;color:#fff; background: #333; overflow: visible; clip: unset;}


#wrap {min-width: 1024px}
.inner {width: 100%;max-width: 1000px;margin: 0 auto;}

#header {display: flex;position: absolute;top: 0;left: 0;width: 100%;height: 70px;background-color: rgba(0,0,0, .4)}
#header .top-area {display: flex;justify-content: space-between;}
#header .top-area .logo {display: flex;align-items: center;}
#header .top-area .logo a {display: flex;align-items: center;margin-right: 10px;}

/* visual */
.section-visual {width: 100%;height: 740px;background: url(../images/bg-visual.jpg) no-repeat 50% 0;background-size: cover}
.visual-text {padding-top: 160px;text-align: center;line-height: 2;}
.visual-text span {display: inline-flex;}
.visual-text span img {margin: 0 10px 20px}

/* contents */
.tab-area-wrap {margin-top: -108px;}
.tab-area-wrap.fixed {position: fixed;top: 0;left: 0;width: 100%;height: auto;z-index: 100;margin-top: 0;background: rgba(255,255,255, .9);}
.tab-area {display: flex;width: 100%;}
.tab-area-wrap.fixed .tab-area {background: url(../images/bg-visual.jpg) no-repeat 50% 100%;padding-top: 5px;}
.tab-area .inner {display: flex;justify-content: space-between;}
.tab-area .btn-tab {display: flex;width: calc(25% - 2px);height: 58px;line-height: 58px;border-radius: 20px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;background: #d8ebbf;color: #005335;font-size: 16px;}
.tab-area .btn-tab.on {background: #0b974a;color: #fff;font-weight: 700}
.tab-area .btn-tab span {flex: 1 1 auto;display: flex;align-items:center;justify-content: center;width: 100%;height: 100%;padding: 10px 0;}

.tab-cont {display: none;padding-top: 0px;}


.item-wrap {display: flex;flex-wrap: wrap;justify-content: center}
.item-wrap .item {display: none;flex-direction: column;width: 313px;margin: 0 15px 20px 15px;transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.item-wrap .item.align {display: none !important}
.item-wrap .item.more {display: none !important}
.item-wrap .item.all,
.item-wrap .item.hot,
.item-wrap .item.road,
.item-wrap .item.wateredge,
.item-wrap .item.market,
.item-wrap .item.history,
.item-wrap .item.kpop,
.item-wrap .item.sunset,
.item-wrap .item.art,
.item-wrap .item.bookstore,
.item-wrap .item.eco,
.item-wrap .item.walk,
.item-wrap .item.eat,
.item-wrap .item.play,
.item-wrap .item.recharge,
.item-wrap .item.gangnam,
.item-wrap .item.gangdong,
.item-wrap .item.gangbuk,
.item-wrap .item.gangseo,
.item-wrap .item.gwanak,
.item-wrap .item.gwangjin,
.item-wrap .item.guro,
.item-wrap .item.geumcheon,
.item-wrap .item.nowon,
.item-wrap .item.dobong,
.item-wrap .item.ddm,
.item-wrap .item.dongjak,
.item-wrap .item.mapo,
.item-wrap .item.sdm,
.item-wrap .item.seocho,
.item-wrap .item.seongdong,
.item-wrap .item.sb,
.item-wrap .item.songpa,
.item-wrap .item.yangcheon,
.item-wrap .item.ydp,
.item-wrap .item.yongsan,
.item-wrap .item.ep,
.item-wrap .item.jongno,
.item-wrap .item.junggu,
.item-wrap .item.jungnang {display: flex;}
.item-wrap .item a {display: flex;flex-direction: column;flex: 1 1 auto;margin-bottom: 20px;}
.item-wrap .item a .img {position: relative;display: flex;width: 100%;height: 250px;margin-bottom: 10px;background: #f8f8f8;border-radius: 30px;overflow: hidden}
.item-wrap .item a .img:after {display: none;content: '';position: absolute;top: 0;left: 0;width: calc(100% - 24px);height: calc(100% - 24px);background: rgba(0,0,0, .52) url(../images/img-over.png) no-repeat 50% 50%;border: 12px solid #ffcc66;z-index: 1;border-radius: 30px;}
.item-wrap .item a .img img {width: 100%;height: 100%;transform: scale(1);transition: .3s all cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.item-wrap .item a .img span {display: none;position: absolute;top: 5%;left: 5%;width: 90%;background: rgba(0,0,0, .5);color: #fff;font-size: 14px;z-index: 1;}
.item-wrap .item a .cont {display: flex;flex-direction: column;flex: 1 1 auto;}
.item-wrap .item a .cont .title {display: flex;flex-wrap: wrap;flex: 1 1 auto;word-break: keep-all;justify-content: center;text-align: center;font-weight: 400}
.item-wrap .item a .cont .title>span {
    color: #6a6a6a;
}
.item-wrap .item a .cont .date {display: flex;}
@media (hover:hover) {
	.item-wrap .item a:hover .img img {width: 100%;height: 100%;transform: scale(1.1)}
}
.list {display: flex;flex-wrap: wrap;justify-content: space-between;padding: 15px 0 70px;position: relative;}
.list button {display: flex;justify-content: center;margin: 5px 10px 5px 0;background: #eceaea;min-width: 92px;padding: 15px 0;border-radius: 30px;font-size: 1rem}
.tab-cont2 .list button {margin: 5px 0;padding: 15px 10px;}
.tab-cont3 .list button {padding: 15px 40px;}
.list button.on {background: #0b974a;color: #fff;font-weight: 700;}
.list button.hash-all {position: absolute;bottom: 5px;right: 0px;width: 130px;height: 50px;margin-right: 0;background: url(../images/btn-init.png) no-repeat 0 0}
.tab-cont4 .list button {display: inline-block}
/*
.tab-cont4 {position: relative;}
.tab-cont4 .list button {display: inline-block}
.tab-cont4 .list {display: block;}
.tab-cont4 .list-wrap {overflow: hidden;overflow-x: auto;height: 60px;white-space: nowrap;width: auto;}
#mCSB_1_scrollbar_horizontal {opacity: 1;bottom: -15px;}
*/

.view-more {display: flex;justify-content: center;margin: 50px 0 0;padding: 10px 0;}
.view-more.hide {display: none}
.view-more .btn-more {display: flex;align-items: center;justify-content: center;font-size: 20px;display: flex;width: 360px;height: 70px;color: #fff;background: #5b4f39 url(../images/bg-pattern.png) no-repeat 0 0;border-radius: 35px;font-family: 'BRRA_R';}
.view-more .btn-more:hover {background: #e1d5bf;border: 2px solid #5b4f39;color: #5b4f39}

/* contents */
.contents {min-height: 100vh;padding-top: 50px;}

.content-area.scroll {padding-top: 300px}
.content-area .seoul {position: relative;padding: 265px 0 0px;background-color: #ffffff;z-index: 12;}
.content-area .seoul .inner {position: relative;z-index: 15;max-width: 1030px}

/* .content-area .result1.moving {padding-top: 300px;} */

/* .content-area .section {background-image: url(../images/bg-road.png);background-position: 50% 0;background-repeat: no-repeat} */
/*
.content-area .result2, 
.content-area .result4,
.content-area .result6 {background-color: #f2e7df}
*/

/*
.content-area .section.result1 {background-position: 50% -100px}
.content-area .section.result3 {background-position: 50% -2450px}
.content-area .section.result5 {background-position: 50% -4110px}
*/
/* .content-area .section:last-child {background-image: url(../images/bg-road2.png);background-position: 50% 89%} */

.content-area h2 {padding: 20px 0 35px;color: #018f3a;font-family: 'BRRA_R';font-size: 40px;font-weight: 400;letter-spacing: -0.05em;text-align: center;}

.content-area .seoul:after {content: '';position: absolute;top: 100px;left: 50%;width: 1000px;height: 100px;z-index: 5;background-position: 50% 100%;background-repeat: no-repeat;transform: translateX(-50%)}
.content-area .seoul-walk:after {background-image: url(../images/bg-top-walk.png)}
.content-area .seoul-trip:after {background-image: url(../images/bg-top-trip.png)}
.content-area .seoul-kedehun:after {background-image: url(../images/bg-top-kedehun.png)}
.content-area .seoul-online:after {background-image: url(../images/bg-top-online.png)}
.content-area .seoul-sunset:after {background-image: url(../images/bg-top-sunset.png)}
.content-area .seoul-water:after {background-image: url(../images/bg-top-water.png);background-position: 80% 100%}
.content-area .seoul-eco:after {background-image: url(../images/bg-top-eco.png);}

.content-area .seoul-walk h2 {color: #9e825b}
.content-area .seoul-trip h2 {color: #88448f}
.content-area .seoul-kedehun h2 {color: #da546d;font-weight: bold;}
.content-area .seoul-online h2 {color: #5d6cbf}
.content-area .seoul-sunset h2 {color: #e07d56}
.content-area .seoul-water h2 {color: #6ea0bb}
.content-area .seoul-eco h2 {color: #82b550}


.content-area .seoul-walk .item-wrap .item a .img:after {border: 12px solid #ffcc66}
.content-area .seoul-trip .item-wrap .item a .img:after {border: 12px solid #f8d1fc}
.content-area .seoul-kedehun .item-wrap .item a .img:after {border: 12px solid #fbaab9}
.content-area .seoul-online .item-wrap .item a .img:after {border: 12px solid #cfd6fe}
.content-area .seoul-sunset .item-wrap .item a .img:after {border: 12px solid #fdcbb8}
.content-area .seoul-water .item-wrap .item a .img:after {border: 12px solid #cbecfe}
.content-area .seoul-eco .item-wrap .item a .img:after {border: 12px solid #d4edb0}

.content-area .seoul-walk .btn-more {background-color: #5b4f39}
.content-area .seoul-trip .btn-more {background-color: #551f6d}
.content-area .seoul-kedehun .btn-more {background-color: #dd516c}
.content-area .seoul-online .btn-more {background-color: #273e67}
.content-area .seoul-sunset .btn-more {background-color: #5e2d1a}
.content-area .seoul-water .btn-more {background-color: #204355}
.content-area .seoul-eco .btn-more {background-color: #406120}

/* hover */

.item-wrap .item a:hover .img:after {display: block;}
.item-wrap .item a:hover .title {color: #9e865a;font-weight: 700}

.content-area .seoul-walk .item-wrap .item a:hover .title {color: #9e865a;}
.content-area .seoul-trip .item-wrap .item a:hover .title {color: #88448f;}
.content-area .seoul-kedehun .item-wrap .item a:hover .title {color: #df4f70;}
.content-area .seoul-online .item-wrap .item a:hover .title {color: #5d6cbf;}
.content-area .seoul-sunset .item-wrap .item a:hover .title {color: #e07d56;}
.content-area .seoul-water .item-wrap .item a:hover .title {color: #6ea0bb;}
.content-area .seoul-eco .item-wrap .item a:hover .title {color: #82b550;}

.content-area .seoul-walk .btn-more:hover {background: #e1d5bf;border: 3px solid #5b4f39;color: #5b4f39}
.content-area .seoul-trip .btn-more:hover {background: #f0e6f5;border: 3px solid #551f6d;color: #551f6d}
.content-area .seoul-online .btn-more:hover {background: #e3e5f4;border: 3px solid #213187;color: #213187}
.content-area .seoul-sunset .btn-more:hover {background: #f2d3c7;border: 3px solid #5e2d1a;color: #5e2d1a}
.content-area .seoul-water .btn-more:hover {background: #cbecfe;border: 3px solid #204355;color: #204355}
.content-area .seoul-eco .btn-more:hover {background: #c5e1aa;border: 3px solid #406120;color: #406120}


.content-area .links {display: flex;margin-top: 50px;height: 337px;background: url(../images/bg-links.jpg) no-repeat 50% 0;}
.links .inner {display: flex;justify-content: center;}
.links .btn-links {display: flex;align-items: center;justify-content: center;}
.links .btn-links .btns {width: 380px;height: 70px;background: url(../images/txt-links.png) no-repeat 0 0}
.links .btn-links .btns-links2 {background-position: -380px 0}

.links .btn-links .btns-links1:hover {background-position: 0 -70px}
.links .btn-links .btns-links2:hover {background-position: -380px -70px}

.btns {display: inline-flex;align-items: center;justify-content: center;background: #8d5530;border-radius: 50px;height: 70px;margin: 0 10px;color: #fff}
/* footer */
.footer {background: #000;color: #fff;height: 85px;line-height: 85px;}
.footer .inner p {text-align: center;font-weight: 700;}
.btn-top {opacity: 0;transition: .3s;position: fixed;bottom: 215px;left: 50%;margin-left: 600px;width: 80px;height: 48px;z-index: 100;background: url(../images/btn-top.png) no-repeat 0 0}
.btn-top.show {opacity: 1;}