@font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 300;
     src: url(/main/css/font/NotoSansKR-Thin.woff2) format('woff2'),
     url(/main/css/font/NotoSansKR-Thin.woff) format('woff'),
     url(/main/css/font/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 400;
     src: url(/main/css/font/NotoSansKR-Light.woff2) format('woff2'),
     url(/main/css/font/NotoSansKR-Light.woff) format('woff'),
     url(/main/css/font/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 500;
     src: url(/main/css/font/NotoSansKR-Regular.woff2) format('woff2'),
     url(/main/css/font/NotoSansKR-Regular.woff) format('woff'),
     url(/main/css/font/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 600;
     src: url(/main/css/font/NotoSansKR-Medium.woff2) format('woff2'),
     url(/main/css/font/NotoSansKR-Medium.woff) format('woff'),
     url(/main/css/font/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 700;
     src: url(/main/css/font/NotoSansKR-Bold.woff2) format('woff2'),
     url(/main/css/font/NotoSansKR-Bold.woff) format('woff'),
     url(/main/css/font/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 800;
     src: url(/main/css/font/NotoSansKR-Black.woff2) format('woff2'),
     url(/main/css/font/NotoSansKR-Black.woff) format('woff'),
     url(/main/css/font/NotoSansKR-Black.otf) format('opentype');
}

@font-face {
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 600;
     src: url(/main/css/font/Montserrat-Regular.woff2) format('woff2'),
     url(/main/css/font/Montserrat-Regular.woff) format('woff');
}

@font-face {
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 700;
     src: url(/main/css/font/Montserrat-Medium.woff2) format('woff2'),
     url(/main/css/font/Montserrat-Medium.woff) format('woff');
}

/*** common ***/
.fl {
     float: left !important;
}

.fr {
     float: right !important;
}

.fn {
     float: none !important;
}

.cb {
     clear: both !important;
}

.pr {
     position: relative !important
}

.ac {
     text-align: center !important;
}

.al {
     text-align: left !important;
}

.ar {
     text-align: right !important;
}

.vt {
     vertical-align: top !important;
}

.vm {
     vertical-align: middle !important;
}

.vb {
     vertical-align: bottom !important;
}

.jf {
     text-align: justify !important;
}

.oh {
     overflow: hidden !important;
}

.oh_y {
     overflow-y: hidden !important;
}

.cp {
     cursor: pointer !important;
}

.di {
     display: inline !important;
}

.dib {
     display: inline-block !important;
}

.dn {
     display: none !important;
}

.db {
     display: block !important;
}

.vv {
     visibility: visible !important;
}

.vh {
     visibility: hidden !important;
}

.bn {
     border: none !important;
}

.bbn {
     border-bottom: none !important;
}

.brn {
     border-right: none !important;
}

.bgn {
     background: none !important;
}

.fb {
     font-weight: bold !important;
}

.BDB {
     border-bottom: 2px solid #d1d1d1 !important
}

.zoom1 {
     *zoom: 1
}

/* Margin */
.MN0 {
     margin: 0 !important;
}

.ML2 {
     margin-left: 2px !important;
}

.ML4 {
     margin-left: 4px !important;
}

.ML5 {
     margin-left: 5px !important;
}

.ML8 {
     margin-left: 8px !important;
}

.ML10 {
     margin-left: 10px !important;
}

.ML15 {
     margin-left: 15px !important;
}

.ML20 {
     margin-left: 20px !important;
}

.ML24 {
     margin-left: 24px
}

.ML30 {
     margin-left: 30px;
}

.ML50 {
     margin-left: 50px !important;
}

.ML57 {
     margin-left: 57px;
}

.ML80 {
     margin-left: 80px;
}

.ML120 {
     margin-left: 120px;
}

.ML200 {
     margin-left: 200px;
}

.ML213 {
     margin-left: 213px;
}

.ML293 {
     margin-left: 293px;
}

.MR5 {
     margin-right: 5px
}

.MR10 {
     margin-right: 10px;
}

.MR15 {
     margin-right: 15px;
}

.MR16 {
     margin-right: 16px;
}

.MR20 {
     margin-right: 20px;
}

.MR30 {
     margin-right: 30px;
}

.MR37 {
     margin-right: 37px;
}

.MR40 {
     margin-right: 40px;
}

.MR60 {
     margin-right: 60px;
}

.MR72 {
     margin-right: 72px;
}

.MT2 {
     margin-top: 2px !important;
}

.MT4 {
     margin-top: 4px !important;
}

.MT5 {
     margin-top: 5px !important;
}

.MT7 {
     margin-top: 7px !important;
}

.MT10 {
     margin-top: 10px !important;
}

.MT15 {
     margin-top: 15px;
}

.MT20 {
     margin-top: 20px !important;
}

.MT22 {
     margin-top: 22px;
}

.MT25 {
     margin-top: 25px;
}

.MT28 {
     margin-top: 28px;
}

.MT30 {
     margin-top: 30px !important;
}

.MT35 {
     margin-top: 35px !important;
}

.MT40 {
     margin-top: 40px !important;
}

.MT45 {
     margin-top: 45px !important
}

.MT50 {
     margin-top: 50px;
}

.MT55 {
     margin-top: 55px;
}

.MT60 {
     margin-top: 60px !important;
}

.MT65 {
     margin-top: 65px !important;
}

.MT70 {
     margin-top: 70px;
}

.MT80 {
     margin-top: 80px !important;
}

.MT120 {
     margin-top: 120px;
}

.MT267 {
     margin-top: 267px !important
}

.MB0 {
     margin-bottom: 0 !important
}

.MB5 {
     margin-bottom: 5px;
}

.MB10 {
     margin-bottom: 10px !important;
}

.MB12 {
     margin-bottom: 12px !important
}

.MB15 {
     margin-bottom: 15px;
}

.MB20 {
     margin-bottom: 20px !important;;
}

.MB26 {
     margin-bottom: 26px !important;;
}

.MB30 {
     margin-bottom: 30px !important;
}

.MB40 {
     margin-bottom: 40px !important;
}

.MB50 {
     margin-bottom: 50px
}

.MB55 {
     margin-bottom: 55px;
}

.MB60 {
     margin-bottom: 60px;
}

.MB70 {
     margin-bottom: 70px !important
}

.MB180 {
     margin-bottom: 180px !important
}

.MT10MB100 {
     margin: 10px 0 100px 0;
}

.minusT40 {
     margin-top: -40px
}

/* padding_top */
.PN0 {
     padding: 0 !important
}

.PT0 {
     padding-top: 0 !important
}

.PT5 {
     padding-top: 5px !important;
}

.PT7 {
     padding-top: 7px;
}

.PT10 {
     padding-top: 10px;
}

.PT12 {
     padding-top: 12px;
}

.PT15 {
     padding-top: 15px;
}

.PT20 {
     padding-top: 20px !important;
}

.PT25 {
     padding-top: 25px;
}

.PT27 {
     padding-top: 27px;
}

.PT30 {
     padding-top: 30px;
}

.PT37 {
     padding-top: 37px;
}

.PT38 {
     padding-top: 38px;
}

.PT43 {
     padding-top: 43px;
}

.PT40 {
     padding-top: 40px !important;
}

.PT50 {
     padding-top: 50px !important;
}

.PT65 {
     padding-top: 65px !important;
}

.PT75 {
     padding-top: 75px;
}

/* padding_left */
.PL0 {
     padding-left: 0px !important;
}

.PL3 {
     padding-left: 3px;
}

.PL5 {
     padding-left: 5px;
}

.PL8 {
     padding-left: 8px;
}

.PL10 {
     padding-left: 10px;
}

.PL20 {
     padding-left: 20px !important;
}

.PL23 {
     padding-left: 23px;
}

.PL25 {
     padding-left: 25px;
}

.PL30 {
     padding-left: 30px;
}

.PL40 {
     padding-left: 40px;
}

.PL45 {
     padding-left: 45px;
}

.PL50 {
     padding-left: 50px;
}

.PL55 {
     padding-left: 55px;
}

.PL60 {
     padding-left: 60px;
}

.PL65 {
     padding-left: 6px;
}

.PL100 {
     padding-left: 100px;
}

/* padding_right */
.PR6 {
     padding-right: 6px;
}

.PR10 {
     padding-right: 10px;
}

.PR20 {
     padding-right: 20px;
}

.PR35 {
     padding-right: 35px;
}

.PR40 {
     padding-right: 40px;
}

.PR60 {
     padding-right: 60px;
}

.PR72 {
     padding-right: 72px;
}

/* padding_bottom */
.PB0 {
     padding-bottom: 0 !important
}

.PB10 {
     padding-bottom: 10px;
}

.PB13 {
     padding-bottom: 13px;
}

.PB15 {
     padding-bottom: 15px !important
}

.PB20 {
     padding-bottom: 20px !important;
}

.PB23 {
     padding-bottom: 23px !important;
}

.PB30 {
     padding-bottom: 30px !important;
}

.PB40 {
     padding-bottom: 40px;
}

.PB50 {
     padding-bottom: 50px
}

.PB65 {
     padding-bottom: 65px;
}

.PB70 {
     padding-bottom: 70px;
}

.PB110 {
     padding-bottom: 110px;
}

/* padding_all */
.PT10L5 {
     padding: 10px 0 0 5px !important;
}

.PTB10 {
     padding: 10px 0 !important;
}

.PTBL {
     padding: 20px 0 20px 20px !important;
}


::-webkit-scrollbar {
     width: 20px;
     height: 12px;
}

::-webkit-scrollbarno-button:start:decrement {
     display: block;
     width: 20px;
     height: 12px;
     background: rgba(46, 136, 204, 0.3);
     border-radius: 5px;
}

::-webkit-scrollbar-track {
     background: rgba(46, 136, 204, 0.3);
     border-radius: 3px;
}

::-webkit-scrollbar-thumb {
     background: rgb(108, 173, 222);
     border-radius: 5px;
}


/* Reset */
* {
     outline: 0 !important;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
blockquote,
pre,
code,
address,
ul,
ol,
li,
menu,
nav,
section,
article,
aside,
dl,
dt,
dd,
table,
thead,
tbody,
tfoot,
label,
caption,
th,
td,
form,
fieldset,
legend,
hr,
input,
button,
textarea,
object,
figure,
figcaption {
     margin: 0;
     padding: 0;
     font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', 'Montserrat', 'arial', 'sans-serif';
}

html,
body {
     width: 3840px;
}

body {
     width: 3840px;
     background: #fff;
}

body,
input,
select,
textarea,
button {
     border: none;
     font-size: 12px;
     font-family: 'Noto Sans KR', sans-serif;
     color: #000;
}

ul,
ol,
li {
     list-style: none;
}

table {
     width: 100%;
     border-spacing: 0;
     border-collapse: collapse;
}

img,
fieldset {
     border: 0;
}

address,
cite,
code,
em {
     font-style: normal;
     font-weight: normal;
}

label,
img,
input,
select,
textarea,
button {
     vertical-align: middle;
     margin: 0;
     padding: 0;
     -webkit-text-size-adjust: none;
}

.hide,
caption,
legend {
     line-height: 0;
     font-size: 0px;
     overflow: hidden;
}

hr {
     display: none;
}

main,
header,
section,
nav,
footer,
aside,
article,
figure {
     display: block;
}

a {
     color: #000;
     text-decoration: none;
}

.clear {
     clear: both;
}

.clear:after {
     content: "";
     display: block;
     clear: both;
}

/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== */

#Wrap {
     width: 3840px;
     height: 2160px;
     position: relative;
     margin: 0;
     overflow: hidden;
}

#Wrap_sub {
     width: 3840px;
     height: 2160px;
     position: relative;
     margin: 0;
     overflow: hidden;
     background: url(/main/images/common/bg.jpg) no-repeat;
     display: flex;
}

.main_bg {
     background: url(/main/images/main/bg_intro.jpg) no-repeat
}

.sub_bg {
     background: url(/main/images/common/bg.jpg) no-repeat
}

.main_logo {
     margin: 220px auto 0;
     text-align: center;
}

.touch_01 {
     position: absolute;
     top: 700px;
     right: 150px;
}

.touch_02 {
     position: absolute;
     top: 280px;
     right: 150px;
}

.main_visual_box {
     width: 2086px;
     height: 1375px;
     background: #f9f3f2;
     margin: 80px auto 0;
     box-shadow: 5px 10px 25px 15px rgba(0, 0, 0, 0.3);
     box-sizing: border-box;
     padding-top: 80px;
}

.main_visual_img {
     width: 1920px;
     height: 1080px;
     background: #000;
     margin: 0px auto 70px;
     overflow: hidden;
}

.main_visual_txt {
     text-align: center;
}

.mian_gnb {
     width: 3140px;
     margin: 410px auto 0;
}

.mian_gnb ul {
     display: flex;
     justify-content: space-between;
}

.mian_gnb ul li a {
     width: 550px;
     height: 880px;
     border-radius: 275px;
     background: #57843b;
     border: 10px solid #57843b;
     display: block;
     overflow: hidden;
     font-weight: 700;
}

.mian_gnb ul li a .list_icon {
     position: relative;
     width: 100%;
     height: 510px;
     background: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
}

.mian_gnb ul li a .tit {
     font-size: 50px;
     color: #fff;
     text-align: center;
     margin-top: 100px;
     line-height: 1.2;
     font-weight: 700;
}

/* 내용 */
section {
     position: relative;
     width: 2650px;
     height: 2160px;
     margin-left: 285px;
}

.tourist_map {
     position: absolute;
     bottom: 350px;
     left: -260px;
}

.top_logo {
     text-align: center;
     margin: 70px auto 50px;
}

/*  내용 */
.container_area {
     width: 2650px;
     height: 1630px;
     overflow: hidden;
     border: 15px solid #378432;
     background: #fff;
     box-sizing: border-box;
}

.sub_tap {
     width: 2650px;
     height: 190px;
}

.sub_tap ul {
     display: flex;
}

.sub_tap ul li {
     width: 50%;
     vertical-align: middle;
     margin-right: 5px;
}

.sub_tap ul li:last-child {
     margin-right: 0;
}

.sub_tap ul li a {
     display: block;
     display: table;
     position: relative;
     background: #d1ee6e;
     width: 100%;
     height: 190px;
     border-radius: 0 0 70px 70px;
     font-size: 60px;
     text-align: center;
     font-weight: 600;
     color: #378432;
     line-height: 1.2;
}

.sub_tap ul li a span {
     display: table-cell;
     vertical-align: middle;
}

.sub_tap ul li.on a {
     background: #378432;
     color: #fff;
}

/* 오른쪽 */
nav {
     width: 740px;
     height: 2160px;
     margin-left: 65px;
     padding-top: 250px;
     box-sizing: border-box;
}

/* 날짜 */
.date_area {
     width: 520px;
     margin: 0px auto 0;
}

.date_area .weather_area {
     display: flex;
     color: #009e63;
     align-items: center;
     justify-content: center;
     position: relative;
}

.date_area .weather_area .temp_txt {
     text-align: right;
     width: 200px;
     font-size: 50px;
     margin-right: 20px;
     font-family: 'Montserrat';
     font-weight: 600;
}

.date_area .weather_area .temp_txt span {
     font-size: 87px;
}

.date_area .weather_area .temp_img {
     width: 150px;
     height: 150px;
}
.date_area .weather_area .temp_img svg image{
     width: 150px;
     height: 150px;
     position: absolute;
     top: -20px;
}

.date_area .date_txt {
     font-size: 62px;
     font-family: 'Montserrat';
     font-weight: 600;
     text-align: center;
}

.date_area .time_txt {
     text-align: center;
     font-size: 100px;
     font-family: 'Montserrat';
     font-weight: 700;
}

.date_area .time_txt span {
     font-size: 60px;
     font-weight: 600;
     margin-right: 20px;
}

/* 메뉴 */
.gnb_area {
     width: 740px;
     margin-top: 50px;
}

.gnb_area ul li {
     display: flex;
     margin-bottom: 40px;
     border-radius: 50px;
     background: #fff;
     border: 10px solid transparent;
     background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #99cb20 0%, #488914 100%);
     background-origin: border-box;
     background-clip: content-box, border-box;
     box-shadow: 10px 10px 30px 10px rgba(0, 0, 0, 0.2);
}

.gnb_area ul li a {
     width: 740px;
     height: 180px;
     display: flex;
     font-weight: 700;
     line-height: 1.2;
     align-items: center;
     position: relative;
     padding-left: 50px;
     box-sizing: border-box;
}

.gnb_area ul li a::before {
     display: inline-block;
     content: '';
     width: 130px;
     height: 130px;
}

.gnb_area ul li a::after {
     content: 'GO';
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: #a1cc3c;
     font-size: 20px;
     position: absolute;
     right: 50px;
     font-family: 'Montserrat';
     font-weight: 700;
     color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
}

.gnb_area ul li a span.text {
     display: block;
     font-size: 50px;
     color: #256e4f;
     padding-left: 50px;
}

.gnb_area ul li:nth-child(1) a::before {
     background: url(/main/images/common/icon_gnb_01.png) no-repeat 50% 50%;
}

.gnb_area ul li:nth-child(2) a::before {
     background: url(/main/images/common/icon_gnb_02.png) no-repeat 50% 50%;
}

.gnb_area ul li:nth-child(3) a::before {
     background: url(/main/images/common/icon_gnb_03.png) no-repeat 50% 50%;
}

.gnb_area ul li:nth-child(4) a::before {
     background: url(/main/images/common/icon_gnb_04.png) no-repeat 50% 50%;
}

.gnb_area ul li:nth-child(5) a::before {
     background: url(/main/images/common/icon_gnb_05.png) no-repeat 50% 50%;
}

.gnb_area ul li.on {
     background: #009e63;
     box-shadow: inset 5px 10px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 1px rgba(255, 255, 255, 1);
     border: none;
}

.gnb_area ul li.on a .text {
     color: #fff;
}

.hb {
     margin-top: 60px;
}

.hb ul {
     width: 650px;
     display: flex;
     justify-content: space-around;
     margin: 0px auto;
}

.hb ul li {
     background: #f3d54e;
     display: block;
     border: 15px solid #fff;
     border-radius: 50%;
}

.hb ul li a {
     display: flex;
     width: 217px;
     height: 217px;
     font-size: 45px;
     font-family: 'Montserrat';
     font-weight: 700;
     text-align: center;
     position: relative;
     justify-content: center;
     flex-direction: column;
}

.hb ul li a::before {
     display: inline-block;
     content: '';
     width: 62px;
     height: 70px;
}

.hb ul li:nth-child(1) a {
     background: url(/main/images/common/icon_home.png) no-repeat 50% 25%;
}

.hb ul li:nth-child(2) a {
     background: url(/main/images/common/icon_back.png) no-repeat 50% 30%;
}

.dmz_all_area {
     background: url(/main/images/sub/bg_sub1.png) no-repeat;
     width: 100%;
     height: 100%;
     position: relative;
}

/* 문수산성 */
.dmz_all_area .icon_1 {
     position: absolute;
     top: 340px;
     left: 376px;
     width: 146px;
     height: 104px;
}

/* 김포다도박물관 */
.dmz_all_area .icon_2 {
     position: absolute;
     top: 333px;
     left: 625px;
     width: 180px;
     height: 107px;
}

/* 한재당 */
.dmz_all_area .icon_3 {
     position: absolute;
     top: 222px;
     left: 856px;
     width: 115px;
     height: 84px;
}

/* 애기봉평화생태공원 */
.dmz_all_area .icon_4 {
     position: absolute;
     top: 100px;
     left: 866px;
     width: 229px;
     height: 100px;
}

/* 통진향교 */
.dmz_all_area .icon_5 {
     position: absolute;
     top: 542px;
     left: 420px;
     width: 147px;
     height: 86px;
}

/* 김포국제조각공원 */
.dmz_all_area .icon_6 {
     position: absolute;
     top: 475px;
     left: 566px;
     width: 179px;
     height: 112px;
}

/* 통진두레문화센터 */
.dmz_all_area .icon_7 {
     position: absolute;
     top: 734px;
     left: 771px;
     width: 175px;
     height: 119px;
}

/* 토탄농경유물전시관 */
.dmz_all_area .icon_8 {
     position: absolute;
     top: 927px;
     left: 873px;
     width: 198px;
     height: 159px;
}

/* 김포함상공원 */
.dmz_all_area .icon_9 {
     position: absolute;
     top: 1398px;
     left: 200px;
     width: 247px;
     height: 129px;
}

/* 대명항 */
.dmz_all_area .icon_10 {
     position: absolute;
     top: 1517px;
     left: 327px;
     width: 155px;
     height: 90px;
}

/* 약암홍염천 */
.dmz_all_area .icon_11 {
     position: absolute;
     top: 1461px;
     left: 500px;
     width: 173px;
     height: 90px;
}

/* 김포독립운동기념관 */
.dmz_all_area .icon_12 {
     position: absolute;
     top: 1284px;
     left: 1289px;
     width: 245px;
     height: 108px;
}

/* 모아패션아울렛 */
.dmz_all_area .icon_13 {
     position: absolute;
     top: 1121px;
     left: 1471px;
     width: 155px;
     height: 165px;
}

/* 장기패션로데오 */
.dmz_all_area .icon_14 {
     position: absolute;
     top: 1210px;
     left: 1627px;
     width: 181px;
     height: 163px;
}

/* 한강야생조류생태공원&에코센터 */
.dmz_all_area .icon_15 {
     position: absolute;
     top: 1201px;
     left: 1858px;
     width: 269px;
     height: 165px;
}

/* 김포아트빌리지 & 한옥마을 */
.dmz_all_area .icon_16 {
     position: absolute;
     top: 1390px;
     left: 1858px;
     width: 269px;
     height: 165px;
}

/* 김포라베니체 */
.dmz_all_area .icon_17 {
     position: absolute;
     top: 1461px;
     left: 1670px;
     width: 206px;
     height: 84px;
}

/* 태산패밀리파크  */
.dmz_all_area .icon_18 {
     position: absolute;
     top: 420px;
     left: 1280px;
     width: 178px;
     height: 135px;
}


/* 평화의길 설명 */
.dmz_info_box {
     position: absolute;
     width: 790px;
     height: 1000px;
     top: 50px;
     right: 50px;
     background: rgba(171, 218, 254, 0.85);
     border-radius: 20px;
     border: 1px solid #6692a5;
     box-shadow: 3px 3px 20px 3px rgba(0, 0, 0, 0.3);
     padding: 25px 35px;
     box-sizing: border-box;
}

.dmz_info_box .imgBox {
     width: 100%;
     height: 440px;
     overflow: hidden;
     background: #000;
     border-radius: 20px;
     position: relative;
}

.dmz_info_box .imgBox img {
     display: inline-block;
     border: none;
     vertical-align: top;
     max-width: 100%;
}

.dmz_info_box h4 {
     font-size: 45px;
     color: #364960;
     text-align: center;
     font-weight: 700;
     margin-top: 30px;
}

.dmz_info_box p {
     font-size: 30px;
     color: #000;
     padding-top: 20px;
     font-weight: 600;
}

.dmz_info_box ul {
     margin-top: 30px;
     padding: 20px 30px;
     background: #4d6a8d;
}

.dmz_info_box ul li {
     color: #fff;
     font-size: 25px;
     margin-bottom: 10px;
}

.dmz_info_box ul li span {
     font-size: 25px;
     font-weight: 700;
     color: #cae2fe;
     margin-right: 15px;
     position: relative;
     line-height: 1.2;
}

.dmz_info_box ul li span::before {
     content: "-";
     padding-right: 10px;
}

.dmz_info_box ul li span::after {
     content: ":";
     padding-left: 10px;
}

/* 내용 */
.inner {
     height: 1600px;
     box-sizing: border-box;
     padding: 100px;
     overflow: hidden;
     position: relative;
}

.inner h2 {
     font-size: 60px;
     margin-bottom: 90px;
     text-align: center;
}

.inner h2 span {
     position: relative;
     z-index: 1;
     padding: 0 30px;
}

.inner h2 span::before {
     content: "";
     background: #ffe466;
     height: 30px;
     width: 100%;
     border-radius: 20px;
     position: absolute;
     bottom: 0;
     left: 0;
     z-index: -1;
}

.dmz_course_area {
     display: flex;
     justify-content: space-between;
}

.course_img {
     width: 1065px;
     height: 1250px;
     overflow: hidden;
}

/* DMZ평화의길(주노선) 2코스 */
.course_img .course_2 {
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/bg_course2.jpg) no-repeat;
     position: relative;
}

[class^="icon_"]::before {
     position: absolute;
     content: '';
     width: 63px;
     height: 75px;
     background: url(/main/images/sub/icon_touch1.png) no-repeat;
     bottom: 0px;
     right: -10px;
}

/* 문수산성 */
.course_img .course_2 > .icon_1 {
     position: absolute;
     top: 487px;
     left: 170px;
     width: 177px;
     height: 122px;
}

/* 김포다도박물관 */
.course_img .course_2 > .icon_2 {
     position: absolute;
     top: 474px;
     left: 482px;
     width: 219px;
     height: 124px;
}

/* 한재당 */
.course_img .course_2 > .icon_3 {
     position: absolute;
     top: 338px;
     left: 773px;
     width: 144px;
     height: 82px;
}

/* 애기봉평화생태공원 */
.course_img .course_2 > .icon_4 {
     position: absolute;
     top: 172px;
     left: 800px;
     width: 262px;
     height: 141px;
}

/* 통진향교 */
.course_img .course_2 > .icon_5 {
     position: absolute;
     top: 742px;
     left: 228px;
     width: 180px;
     height: 101px;
}

/* 김포국제조각공원 */
.course_img .course_2 > .icon_6 {
     position: absolute;
     top: 662px;
     left: 410px;
     width: 223px;
     height: 132px;
}

/* 통진두레문화센터 */
.course_img .course_2 > .icon_7 {
     position: absolute;
     top: 980px;
     left: 670px;
     width: 214px;
     height: 149px;
}

/* DMZ평화의길(주노선) 3코스 */
.course_img .course_3 {
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/bg_course3.jpg) no-repeat;
     position: relative;
}

/* 태산패밀리파크 */
.course_img .course_3 > .icon_1 {
     position: absolute;
     top: 579px;
     left: 466px;
     width: 214px;
     height: 149px;
}

/* DMZ평화의길(주노선) 4코스 */
.course_img .course_4 {
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/bg_course4.jpg) no-repeat;
     position: relative;
}

/* 김포독립운동기념관 */
.course_img .course_4 > .icon_1 {
     position: absolute;
     top: 885px;
     left: 0px;
     width: 289px;
     height: 131px;
}

/* 모아패션아울렛 */
.course_img .course_4 > .icon_2 {
     position: absolute;
     top: 699px;
     left: 192px;
     width: 186px;
     height: 200px;
}

/* 장기패션로데오 */
.course_img .course_4 > .icon_3 {
     position: absolute;
     top: 799px;
     left: 383px;
     width: 221px;
     height: 192px;
}

/* 한강야생조류생태공원&에코센터 */
.course_img .course_4 > .icon_4 {
     position: absolute;
     top: 776px;
     left: 652px;
     width: 326px;
     height: 199px;
}

/* 김포아트빌리지 & 한옥마을 */
.course_img .course_4 > .icon_5 {
     position: absolute;
     top: 1032px;
     left: 682px;
     width: 225px;
     height: 119px;
}

/* 김포라베니체 */
.course_img .course_4 > .icon_6 {
     position: absolute;
     top: 1101px;
     left: 455px;
     width: 242px;
     height: 97px;
}

/* 오른쪽 */
.course_right {
     width: 1250px;
     height: 1250px;
}

.course_txt {
     width: 1250px;
     height: 845px;
     margin-bottom: 30px;
}

/* 코스 slider */
.course_photo_list {
     width: 1250px;
     height: 325px;
     position: relative;
     display: block;
     margin: 0 auto;
}

.slide-viewer {
     position: relative;
     overflow: hidden;
     height: 325px;
}

.slide-group {
     width: 100%;
     height: 100%;
     position: relative;
}

.slide {
     /*display: block;*/
     height: 100%;
     position: relative;
     width: 100%;
}

.slide .slide-items {
     display: flex;
     justify-content: space-between;
     flex-wrap: nowrap;
}

.slide .slide-items figure {
     margin: 0 0 20px 0;
     width: 400px;
     height: 335px;
     background: #000;
     overflow: hidden;
     position: relative;
     display: flex;
     justify-content: center;
}

.slide .slide-items figure img {
     height: 100%;
     display: inline-block;
}

.slide:first-child {
     /*display: block;*/
}

.video_area {
     width: 2415px;
     height: 1203px;
     margin: 0 auto;
     position: relative;
     background: url(/main/images/sub/bg_video.png) no-repeat;
}

.video_area .video_box {
     width: 1920px;
     height: 1080px;
     background: #000;
     position: absolute;
     top: 62px;
     left: 245px;
     overflow: hidden;
}

.dmz_theme_area {
     display: flex;
     justify-content: space-between;
}

.dmz_theme_area .theme_left {
     width: 1250px;
     height: 840px;
}

.dmz_theme_area .theme_left .map {
     width: 1250px;
     height: 840px;
     margin-bottom: 30px;
}

.facility_area {
     width: 100%;
     height: 100%;
     position: relative;
}

/* 해병대전적비 */
.facility01 {
     position: absolute;
     top: 420px;
     left: 100px;
}

/* 주제정원 */
.facility02 {
     position: absolute;
     top: 456px;
     left: 1052px;
}

/* 전시관 */
.facility03 {
     position: absolute;
     top: 812px;
     left: 1078px;
}

/* 흔들다리 */
.facility04 {
     position: absolute;
     top: 687px;
     left: 1513px;
}

/* 스카이포레스트가든 */
.facility05 {
     position: absolute;
     top: 525px;
     left: 1550px;
}

/* 야외공연장 */
.facility06 {
     position: absolute;
     top: 530px;
     left: 2090px;
}

/* 전망대 */
.facility07 {
     position: absolute;
     top: 324px;
     left: 2000px;
}

/* 평화의종 */
.facility08 {
     position: absolute;
     top: 343px;
     left: 2295px;
}

/* 말풍선 */
.bubble {
     position: relative;
     background-color: #3a9956;
     border-radius: 20px;
     box-shadow: 4px 4px 0 2px rgba(96, 164, 104, 1);
     display: inline-block;
     vertical-align: top;
     border: 3px solid #fff;
     margin: 20px 20px;
     padding: 10px 20px;
}

.bubble.arrow::before,
.bubble.arrow::after {
     position: absolute;
     background-color: #3a9956;
     content: "\00a0";
     display: block;
     height: 18px;
     width: 33px;
     left: 60%;
     bottom: -10px;
     transform: rotate(-45deg) skew(-45deg);
}

.bubble.arrow::before {
     background-color: transparent;
     box-shadow: 5px 5px 0 3px rgba(96, 164, 104, 1);
     width: 30px;
}

.bubble.arrow::after {
     bottom: -8px;
     border: 3px solid #fff;
     border-width: 0 6px 3px 4px;
}

.bubble > .tit {
     position: relative;
     background-color: #3a9956;
     border-radius: 20px;
     z-index: 1;
     padding: 10px 20px;
     color: #fff;
     font-size: 40px;
     font-weight: 700;
}

/* 관광지소개  */
.tourist_box {
     position: relative;
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/map_tourist.png) no-repeat;
}

.tourist_box .tourist_list_l {
     padding: 10px 25px 10px 40px;
     background: #f4f4ff;
     border: 3px solid #484848;
     display: inline-block;
     position: relative;
     box-shadow: -5px 10px 10px 5px rgba(0, 0, 0, 0.2);
}

.tourist_box .tourist_list_l::before {
     content: '';
     width: 10px;
     height: 100%;
     border: 3px solid #484848;
     position: absolute;
     top: -3px;
     left: -15px;
}

.tourist_box .tourist_list_l::after {
     content: '';
     width: 100%;
     height: 100%;
     border: 3px solid #484848;;
     position: absolute;
     top: -13px;
     left: -2px;
     padding: 20px 10px 0px 0;
}

.tourist_box .tourist_list_l ul {
     position: relative;
}

.tourist_box .tourist_list_l ul::after {
     width: 30px;
     height: 30px;
     background: #fff;
     border: 10px solid #575757;
     position: absolute;
     content: '';
     border-radius: 50%;
     right: -60px;
     top: 50%;
     z-index: 1;
     transform: translateY(-50%);
}

.tourist_box .tourist_list_l ul li {
     text-align: right;
     font-size: 30px;
     font-weight: 600;
     position: relative;
     padding-right: 30px;
}

.tourist_box .tourist_list_l ul li::before {
     position: absolute;
     content: '';
     width: 20px;
     height: 20px;
     border-radius: 50%;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
}

.tourist_box .tourist_list_r {
     padding: 10px 40px 10px 25px;
     background: #f4f4ff;
     border: 3px solid #484848;
     display: inline-block;
     position: relative;
     box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.2);
}

.tourist_box .tourist_list_r::before {
     content: '';
     width: 10px;
     height: 100%;
     border: 3px solid #484848;
     position: absolute;
     top: -3px;
     right: -15px;
}

.tourist_box .tourist_list_r::after {
     content: '';
     width: 100%;
     height: 100%;
     border: 3px solid #484848;
     position: absolute;
     top: -13px;
     left: -13px;
     padding: 20px 0px 0px 10px;
}

.tourist_box .tourist_list_r ul {
     position: relative;
}

.tourist_box .tourist_list_r ul::after {
     width: 30px;
     height: 30px;
     background: #fff;
     border: 10px solid #575757;
     position: absolute;
     content: '';
     border-radius: 50%;
     left: -60px;
     top: 50%;
     z-index: 1;
     transform: translateY(-50%);
}

.tourist_box .tourist_list_r ul li {
     text-align: left;
     font-size: 30px;
     font-weight: 600;
     position: relative;
     padding-left: 30px;
}

.tourist_box .tourist_list_r ul li::before {
     position: absolute;
     content: '';
     width: 20px;
     height: 20px;
     border-radius: 50%;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
}

/* 월곶면 */
.tourist_box .tourist_list_l.wolgojmyeon {
     position: absolute;
     top: 249px;
     left: 150px;
}

.tourist_box .tourist_list_l.wolgojmyeon li::before {
     background: #b63c52;
}

/* 통진읍 */
.tourist_box .tourist_list_l.tongjin-eub {
     position: absolute;
     top: 625px;
     left: 185px;
}

.tourist_box .tourist_list_l.tongjin-eub li::before {
     background: #34aea8;
}

/* 대곶면 */
.tourist_box .tourist_list_l.daegojmyeon {
     position: absolute;
     top: 937px;
     left: 239px;
}

.tourist_box .tourist_list_l.daegojmyeon li::before {
     background: #b0774f;
}

/* 고촌읍 */
.tourist_box .tourist_list_l.gochon-eub {
     position: absolute;
     top: 1375px;
     left: 1359px;
}

.tourist_box .tourist_list_l.gochon-eub li::before {
     background: #e0699e;
}

/* 하성면 */
.tourist_box .tourist_list_r.haseongmyeon {
     position: absolute;
     top: 62px;
     left: 1743px;
}

.tourist_box .tourist_list_r.haseongmyeon li::before {
     background: #398535;
}

/* 양촌읍 */
.tourist_box .tourist_list_r.yangchon-eub {
     position: absolute;
     top: 477px;
     left: 1816px;
}

.tourist_box .tourist_list_r.yangchon-eub li::before {
     background: #6b338b;
}

/* 시내권 */
.tourist_box .tourist_list_r.downtown-area {
     position: absolute;
     top: 709px;
     left: 2045px;
}

.tourist_box .tourist_list_r.downtown-area li::before {
     background: #f1ad00;
}

/* 관광지 소개 상세 - 세로 */
.info_tourist_l_box {
     width: 420px;
     padding: 15px;
     border-radius: 20px;
     background: #fff;
     border: 5px solid #1162c0;
     box-shadow: 5px 5px 0 5px rgba(0, 0, 0, 0.2);
}

.info_tourist_l_box > .img {
     width: 420px;
     height: 220px;
     background: #000;
     position: relative;
     border-radius: 0 20px 0 20px;
}

.info_tourist_l_box > .img::before {
     position: absolute;
     top: -10px;
     left: -10px;
     background: url(/main/images/sub/img_shadow1.png) no-repeat;
     content: '';
     width: 69px;
     height: 69px;
     z-index: 1;
}

.info_tourist_l_box > .img::after {
     position: absolute;
     bottom: -10px;
     right: -10px;
     background: url(/main/images/sub/img_shadow2.png) no-repeat;
     content: '';
     width: 69px;
     height: 69px;
     z-index: 1;
}

.info_tourist_l_box > .img span {
     width: 420px;
     height: 220px;
     overflow: hidden;
     display: block;
     border-radius: 0 20px 0 20px;
}

.info_tourist_l_box > .img span img {
     border-radius: 0 20px 0 20px;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     position: absolute;
     top: 0;
     left: 0;
}

.info_tourist_l_box > h3 {
     text-align: center;
     margin: 20px 0 10px;
     font-size: 40px;
     font-weight: 700;
     line-height: 1.2;
}

.info_tourist_l_box > p {
     font-size: 25px;
     text-align: justify;
     line-height: 1.2;
     padding: 0 10px 20px;
     font-weight: 600;
     color: #555;
}

.info_tourist_l_box > .btn {
     padding: 10px 15px;
     border-radius: 30px;
     width: 200px;
     display: inline-block;
     text-align: center;
     font-size: 20px;
     background: #ec135b;
     color: #fff;
     font-weight: 600;
     position: absolute;
     overflow: hidden;
     left: 50%;
     transform: translateX(-50%);
     bottom: -20px;

}

.info_tourist_l_box > .btn::after {
     content: '';
     display: inline-block;
     width: 18px;
     height: 18px;
     background: url(/main/images/sub/icon_arrow.svg) no-repeat center/cover;
     margin-left: 20px;
}

/* 관광지 소개 상세 - 가로 */
.info_tourist_w_box {
     width: 910px;
     padding: 15px;
     border-radius: 20px;
     background: #fff;
     border: 5px solid #1162c0;
     box-shadow: 5px 5px 0 5px rgba(0, 0, 0, 0.2);
     display: flex;
     position: relative;
}

.info_tourist_w_box > .img {
     width: 420px;
     height: 220px;
     background: #000;
     position: relative;
     border-radius: 0 20px 0 20px;
}

.info_tourist_w_box > .img::before {
     position: absolute;
     top: -10px;
     left: -10px;
     background: url(/main/images/sub/img_shadow1.png) no-repeat;
     content: '';
     width: 69px;
     height: 69px;
     z-index: 1;
}

.info_tourist_w_box > .img::after {
     position: absolute;
     bottom: -10px;
     right: -10px;
     background: url(/main/images/sub/img_shadow2.png) no-repeat;
     content: '';
     width: 69px;
     height: 69px;
     z-index: 1;
}

.info_tourist_w_box > .img span {
     width: 420px;
     height: 220px;
     overflow: hidden;
     display: block;
     border-radius: 0 20px 0 20px;
}

.info_tourist_w_box > .img span img {
     border-radius: 0 20px 0 20px;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     position: absolute;
     top: 0;
     left: 0;
}

.info_tourist_w_box > .info {
     width: 470px;
     margin-left: 20px;
}

.info_tourist_w_box > .info > h3 {
     text-align: center;
     margin: 0px 0 10px;
     font-size: 40px;
     font-weight: 700;
     line-height: 1.2;
}

.info_tourist_w_box > .info > p {
     font-size: 25px;
     text-align: justify;
     line-height: 1.2;
     padding: 0 10px 20px;
     font-weight: 600;
     color: #555;
}

.info_tourist_w_box > .btn {
     padding: 10px 15px;
     border-radius: 30px;
     width: 200px;
     display: inline-block;
     text-align: center;
     font-size: 20px;
     background: #ec135b;
     color: #fff;
     font-weight: 600;
     position: absolute;
     overflow: hidden;
     left: 75%;
     transform: translateX(-50%);
     bottom: -20px;

}

.info_tourist_w_box > .btn::after {
     content: '';
     display: inline-block;
     width: 18px;
     height: 18px;
     background: url(/main/images/sub/icon_arrow.svg) no-repeat center/cover;
     margin-left: 20px;
}

/* ================== 월곳면================= */
.map_wolgojmyeon {
     position: relative;
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/map_wolgojmyeon.png) no-repeat;
}

/* 문수산성 */
.map_wolgojmyeon > .info01 {
     position: absolute;
     top: 164px;
     left: 323px;
}

/* 통진향교 */
.map_wolgojmyeon > .info02 {
     position: absolute;
     top: 910px;
     left: 1500px;
}

/* 김포국제조각공원&군하숲길 */
.map_wolgojmyeon > .info03 {
     position: absolute;
     top: 850px;
     left: 320px;
}

/* 김포다도박물관 */
.map_wolgojmyeon > .info04 {
     position: absolute;
     top: 150px;
     left: 1800px;
}

/* ================== 하성면 ================= */
.map_haseongmyeon {
     position: relative;
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/map_haseongmyeon.png) no-repeat;
}

/* 애기봉평화생태공원  */
.map_haseongmyeon > .info01 {
     position: absolute;
     top: 200px;
     left: 320px;
}

/* 태산패밀리파크 */
.map_haseongmyeon > .info02 {
     position: absolute;
     top: 260px;
     left: 1840px;
}

/* 전류리포구 */
.map_haseongmyeon > .info03 {
     position: absolute;
     top: 940px;
     left: 1900px;
}

/* 한재당 */
.map_haseongmyeon > .info04 {
     position: absolute;
     top: 850px;
     left: 560px;
}

/* ================== 통진읍 ================= */
.map_tongjineub {
     position: relative;
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/map_tongjineub.png) no-repeat;
}

/* 토탄농경유물전시관 */
.map_tongjineub > .info01 {
     position: absolute;
     top: 500px;
     left: 1815px;
}

/* 통진두레문화센터 */
.map_tongjineub > .info02 {
     position: absolute;
     top: 530px;
     left: 420px;
}

/* ================== 대곶면 ================= */
.map_daegojmyeon {
     position: relative;
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/map_daegojmyeon.png) no-repeat;
}

/* 덕포진 */
.map_daegojmyeon > .info01 {
     position: absolute;
     top: 220px;
     left: 375px;
}

/* 김포함상공원 */
.map_daegojmyeon > .info02 {
     position: absolute;
     top: 910px;
     left: 370px;
}

/* 대명항 */
.map_daegojmyeon > .info03 {
     position: absolute;
     top: 1030px;
     left: 1039px;
}

/* 약암홍염천 */
.map_daegojmyeon > .info04 {
     position: absolute;
     top: 840px;
     left: 1780px;
}

/* 덕포진 교육박물관 */
.map_daegojmyeon > .info05 {
     position: absolute;
     top: 100px;
     left: 1100px;
}

/* 외할머니의부엌 */
.map_daegojmyeon > .info06 {
     position: absolute;
     top: 240px;
     left: 1640px;
}

/* ================== 양촌읍 ================= */
.map_yangchon-eub {
     position: relative;
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/map_yangchon-eub.png) no-repeat;
}

/* 김포독립운동기념관 */
.map_yangchon-eub > .info01 {
     position: absolute;
     top: 70px;
     left: 864px;
}

/* CICA미술관 */
.map_yangchon-eub > .info02 {
     position: absolute;
     top: 970px;
     left: 1370px;
}

/* 모아패션아울렛 */
.map_yangchon-eub > .info03 {
     position: absolute;
     top: 70px;
     left: 1970px;
}

/* ================== 시내권 ================= */
.map_downtown {
     position: relative;
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/map_downtown.png) no-repeat;
}

/* 장릉 */
.map_downtown > .info01 {
     position: absolute;
     top: 1300px;
     left: 450px;
}

/* 김포아트빌리지&한옥마을 */
.map_downtown > .info02 {
     position: absolute;
     top: 10px;
     left: 1550px;
}

/* 한강야생조류생태공원&에코센터 */
.map_downtown > .info03 {
     position: absolute;
     top: 20px;
     left: 550px;
}

/* 김포라베니체 */
.map_downtown > .info04 {
     position: absolute;
     top: 700px;
     left: 200px;
}

/* 장기패션로데오 */
.map_downtown > .info05 {
     position: absolute;
     top: 350px;
     left: 300px;
}

/* 김포성당 */
.map_downtown > .info06 {
     position: absolute;
     top: 290px;
     left: 1820px;
}

/* 우저서원 */
.map_downtown > .info07 {
     position: absolute;
     top: 1000px;
     left: 300px;
}

/* 김포향교 */
.map_downtown > .info08 {
     position: absolute;
     top: 800px;
     left: 2000px;
}

/* 장릉산회주산책로 */
.map_downtown > .info09 {
     position: absolute;
     top: 1310px;
     left: 1540px;
}

/* ================== 고촌읍 ================= */
.map_gochon-eub {
     position: relative;
     width: 100%;
     height: 100%;
     background: url(/main/images/sub/map_gochon-eub.png) no-repeat;
}

/* 김포아라마리나 */
.map_gochon-eub > .info01 {
     position: absolute;
     top: 950px;
     left: 2030px;
}

/* 현대프리미엄아울렛 */
.map_gochon-eub > .info02 {
     position: absolute;
     top: 210px;
     left: 1740px;
}

/* 보름산미술관 */
.map_gochon-eub > .info03 {
     position: absolute;
     top: 800px;
     left: 480px;
}

/* 추천 여행코스 */
.travel_logo {
     position: absolute;
     bottom: 150px;
     right: 200px;
     background: url(/main/images/sub/logo_dmz.png) no-repeat;
     width: 300px;
     height: 113px;
}

.travel_course_area {
     width: 100%;
     height: 280px;
     display: flex;
     margin-bottom: 90px;
     position: relative;
}

.travel_course_area:last-child {
     margin-bottom: 0px;
}

.travel_course_area > .txt_box {
     width: 240px;
     position: relative;
     padding-left: 30px;
     font-size: 48px;
     font-weight: 700;
     line-height: 1.2;
     color: #000;
}

.travel_course_area > .txt_box > .txt01 {
     color: #f99b40;
}

.travel_course_area > .txt_box > .txt02 {
     color: #3ab54a;
}

.travel_course_area > .txt_box > .txt03 {
     color: #a1410e;
}

.travel_course_area > .txt_box > .txt04 {
     color: #00a99e;
}

.travel_course_area > .txt_box::before {
     width: 10px;
     height: 175px;
     content: "";
     background: #3c7c7e;
     position: absolute;
     top: 0;
     left: 0;
}

.travel_course_area > .course_box {
     display: inline-block;
     width: 100%;
     position: relative;
}

.travel_course_area .course_box ul {
     list-style-type: none;
     display: flex;
     align-items: center;
     padding-top: 190px;
}

.travel_course_area .course_box ul li {
     width: 360px;
     position: relative;
}

.travel_course_area .course_box ul li .img {
     width: 175px;
     height: 175px;
     position: absolute;
     top: -210px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1;
}

.travel_course_area .course_box ul li a .img p {
     width: 175px;
     height: 175px;
     position: relative;
     background: #000;
     border-radius: 50%;
     border: 5px solid #fff;
     z-index: 1;
}

.travel_course_area .course_box ul li a .img p img {
     overflow: hidden;
     width: 100%;
     height: 100%;
     border-radius: 50%;
}

.travel_course_area .course_box ul li a .img p::after {
     z-index: -1;
     border: 5px solid #90c2e7;
     position: absolute;
     width: 180px;
     height: 180px;
     content: "";
     left: 50%;
     top: -7px;
     transform: translateX(-50%);
     border-radius: 50%;
}

.travel_course_area .course_box ul li .status {
     display: flex;
     position: relative;
     justify-content: center;
     border-top: 6px dashed #808285;
}

.travel_course_area .course_box ul li .status h5 {
     font-size: 30px;
     height: 95px;
     padding-top: 10px;
     line-height: 1.3;
     font-weight: 700;
     text-align: center;
     margin-top: 15px;
}

.travel_course_area .course_box ul li .status:before {
     content: '';
     left: 50%;
     top: -20px;
     width: 23px;
     height: 23px;
     position: absolute;
     border-radius: 25px;
     border: 5px solid #12608f;
     background-color: #fff;
     transform: translatex(-50%);
}

.travel_course_area .course_box ul li.start {
     position: relative;
}

.travel_course_area .course_box ul li.complete.start .status {
     border-top: none;
     top: 3px;
}

.travel_course_area .course_box ul li.start span {
     top: -3px;
     right: 2px;
     width: 50%;
     display: block;
     position: absolute;
     border-top: 6px dashed #808285;
}

.travel_course_area .course_box ul li.end {
     position: relative;
}

.travel_course_area .course_box ul li.complete.end .status {
     border-top: none;
     top: 3px;
}

.travel_course_area .course_box ul li.end span {
     top: -3px;
     left: 2px;
     width: 50%;
     display: block;
     position: absolute;
     border-top: 6px dashed #808285;
}

.travel_course_area .course_box ul li.complete .status {
     border-top: 6px dashed #808285;
     margin: 0 3px;
}

.travel_course_area .course_box ul li .time {
     font-size: 25px;
     width: 390px;
     text-align: center;
     position: absolute;
     top: -40px;
     left: -50%;
     font-weight: 700;
}

.travel_course_area .course_box ul li .time i {
     position: relative;
     margin-right: 10px;
}

.travel_course_area .course_box ul li .time i.icon_car::before {
     content: '';
     display: inline-block;
     width: 49px;
     height: 35px;
     background: url(/main/images/sub/icon_car.png);
     margin-right: 3px;
     position: relative;
     top: 2px;
}

.travel_course_area .course_box ul li .time i.icon_walking::before {
     content: '';
     display: inline-block;
     width: 22px;
     height: 35px;
     background: url(/main/images/sub/icon_walking.png);
     margin-right: 3px;
     position: relative;
     top: 2px;
}

.travel_course_area .course_box ul li.end .time {
     top: -43px;
}

/* 코스 sub */
.course_sub {
     width: 2420px;
     height: 1220px;
     position: relative;
}

.course4_bg {
     background: url(/main/images/sub/bg_course_box5.png) no-repeat;
}

.course5_bg {
     background: url(/main/images/sub/bg_course_box5.png) no-repeat;
}

.course6_bg {
     background: url(/main/images/sub/bg_course_box6.png) no-repeat;
}

.course_sub ul {
     position: relative;
}

.course_subul li {
     position: relative;
}

.course_sub ul li::before {
     position: absolute;
     content: "";
     width: 124px;
     height: 103px;
     background: url(/main/images/sub/icon_touch.png) no-repeat;
     top: 23%;
     left: 50%;
     z-index: 1;
}

.course_sub ul li > .time {
     font-size: 35px;
     width: 390px;
     text-align: center;
     position: absolute;
     top: 43%;
     left: 80%;
     font-weight: 700;
}

.course_sub ul li > .time i {
     position: relative;
     margin-right: 10px;
}

.course_sub ul li > .time i.icon_car::before {
     content: '';
     display: inline-block;
     width: 49px;
     height: 35px;
     background: url(/main/images/sub/icon_car.png);
     margin-right: 3px;
     position: relative;
     top: 2px;
}

.course_sub ul li > .time i.icon_walking::before {
     content: '';
     display: inline-block;
     width: 22px;
     height: 35px;
     background: url(/main/images/sub/icon_walking.png);
     margin-right: 3px;
     position: relative;
     top: 2px;
}

.course_sub ul li span {
     font-family: 'Montserrat';
     font-size: 35px;
     color: #fff;
     width: 70px;
     height: 70px;
     background: #ff766b;
     position: absolute;
     top: 20px;
     left: 15%;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     font-weight: 700;
     box-shadow: 3px 3px 3px 2px rgba(0, 0, 0, 0.3);
     z-index: 2;
}

.course_sub ul li:nth-child(1) {
     position: absolute;
     top: 0;
     left: 250px;
}

.course_sub ul li:nth-child(2) {
     position: absolute;
     top: 0;
     left: 870px;
}

.course_sub ul li:nth-child(3) {
     position: absolute;
     top: 0;
     left: 1490px;
}

.course_sub ul li:nth-child(4) {
     position: absolute;
     top: 675px;
     left: 1690px;
}

.course_sub ul li:nth-child(5) {
     position: absolute;
     top: 675px;
     left: 1070px;
}

.course_sub ul li:nth-child(6) {
     position: absolute;
     top: 675px;
     left: 450px;
}

.course_sub.course4_bg ul li:nth-child(1) {
     position: absolute;
     top: 0px;
     left: 500px;
}

.course_sub.course4_bg ul li:nth-child(2) {
     position: absolute;
     top: 0px;
     left: 1300px;
}

.course_sub.course4_bg ul li:nth-child(3) {
     position: absolute;
     top: 675px;
     left: 1770px;
}

.course_sub.course4_bg ul li:nth-child(4) {
     position: absolute;
     top: 675px;
     left: 1070px;
}

.course_list {
     width: 420px;
     text-align: center;
     height: 640px;
     position: relative;
}

.course_list::before {
     position: absolute;
     content: "";
     top: 47%;
     left: 50%;
     width: 38px;
     height: 38px;
     background: #fff;
     border: 18px solid #14365e;
     border-radius: 50%;
     transform: translateX(-50%);
}

.course_list a > p {
     position: absolute;
     top: -10px;
     left: 66px;
}

.course_list a > .pin {
     width: 290px;
     height: 290px;
     border-radius: 50% 50% 50% 0;
     background: #16375f;
     position: relative;
     transform: rotate(-45deg);
}

.course_list a > .pin .img {
     width: 250px;
     height: 250px;
     background: rgba(255, 255, 255, .9);
     position: absolute;
     top: 7%;
     left: 7%;
     border-radius: 50%;
     transform: rotate(45deg);
     overflow: hidden;
}

.course_list a > .pin .img img {
     display: inline-block;
     border: none;
     vertical-align: top;
     height: 100%;
}
.course_list a > .info {
     margin-top: 100px;
}

.course_list a > .info h5 {
     font-size: 40px;
     line-height: 1.2;
     margin-bottom: 10px;
}

.course_list a > .info .txt {
     color: #5b77ba;
     font-size: 30px;
     line-height: 1.3;
     font-weight: 600;
}

/* 추천 여행코스 상세  */
.course_info_area {
     display: flex;
     justify-content: space-between;
     margin-bottom: 100px;
}

.course_info_area .photo {
     position: relative;
     z-index: 1;
     height: 588px;
     width: 970px;
}

.course_info_area .photo::before {
     content: "";
     position: absolute;
     width: 970px;
     height: 588px;
     top: 30px;
     right: -30px;
     background: #1e9a81;
     box-shadow: 17px 10px 40px 0 rgba(0, 0, 0, 0.3);
     z-index: -1;
}

.course_info_area .photo > .picture {
     height: 588px;
     width: 970px;
     background: #000;
}

.course_info_area .course_info_txt {
     width: 1210px;
     height: 950px;
     position: relative;
}

.course_step_area {
     width: 100%;
     height: 200px;
     background: #284a73;
     position: relative;
     box-sizing: border-box;
     padding-top: 80px;
}

.course_step_area ol {
     display: flex;
     width: 2240px;
     justify-content: space-between;
     position: relative;
     margin: 0 auto;
     border-top: 10px solid #fcaf43;
}

.course_step_area ol::before {
     background: #fff;
     content: "출발";
     width: 88px;
     height: 88px;
     border-radius: 50%;
     position: absolute;
     left: 0px;
     top: -47px;
     color: #284a73;
     font-size: 30px;
     font-weight: 700;
     display: flex;
     justify-content: center;
     align-items: center;
}

.course_step_area ol::after {
     background: #fff;
     content: "도착";
     width: 88px;
     height: 88px;
     border-radius: 50%;
     position: absolute;
     right: 0px;
     top: -47px;
     color: #284a73;
     font-size: 30px;
     font-weight: 700;
     display: flex;
     justify-content: center;
     align-items: center;
}

.course_step_area ol li {
     display: flex;
     width: 25%;
     position: relative;
     justify-content: center;
}

.course_step_area ol li:first-child {
     margin-left: 100px;
}

.course_step_area ol li:last-child {
     margin-right: 100px;
}

.course_step_area ol li a p {
     text-align: center;
     font-size: 30px;
     font-weight: 600;
     color: #fff;
     margin-top: 30px;
}

.course_step_area ol li a span {
     display: block;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background-color: #fff;
     border: 10px solid #ee581b;
     position: absolute;
     top: -36px;
     left: 50%;
     transform: translateX(-50%);
}

.course_step_area ol li.on {
     position: relative;
}

.course_step_area ol li.on::before {
     position: absolute;
     width: 93px;
     height: 108px;
     background: url(/main/images/sub/icon_flag.png) no-repeat;
     top: -110px;
     left: 151px;
     z-index: 1;
     content: "";
}

/* 김포맛집 */
.tasty_area {
     position: relative;
}

.tasty_area .btn_prev {
     position: absolute;
     left: -60px;
     top: 50%;
     transform: translateY(-50%);
}

.tasty_area .btn_next {
     position: absolute;
     right: -60px;
     top: 50%;
     transform: translateY(-50%);
}

.grid_list {
     width: 2300px;
     height: 1200px;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
}

.grid_list > li {
     flex-grow: 0;
     width: calc(92% / 4);
     height: 570px;
     position: relative;
     border: 3px solid #e0e0e0;
     margin: 20px;
}

.grid_list > li .card_img {
     width: 100%;
     height: 340px;
     overflow: hidden;
}

.grid_list > li .card_img img {
     width: 100%;
     height: auto;
     min-height: 100%;
}

.grid_list > li .card_body {
     border: 20px solid transparent;
}

.grid_list > li .card_body .tit {
     overflow: hidden;
     position: relative;
     margin: 0 0 30px;
     padding-right: 60px;
     color: #000;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 35px;
}

.grid_list > li .card_body ul {
}

.grid_list > li .card_body ul li {
     overflow: hidden;
     position: relative;
     margin: 5px 0;
     padding-left: 150px;
     padding-bottom: 5px;
     font-size: 20px;
     color: #000;
     text-overflow: ellipsis;
     white-space: nowrap;
}

.grid_list > li .card_body ul li b {
     position: absolute;
     left: 0;
     top: 0px;
     width: 130px;
     font-weight: 600;
}

.grid_list > li .card_body ul li b:before {
     content: "";
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 2px;
     height: 15px;
     background: #000;
}

.grid_list > li .card_body ul li b em {
     display: inline-block;
     vertical-align: middle;
     margin-right: 10px;
     width: 28px;
     height: 28px;
     font-weight: 600;
}

.grid_list > li .card_body ul .ir01 {
     background: url(/main/images/sub/icon_add.svg) no-repeat 0 center;
}

.grid_list > li .card_body ul .ir02 {
     background: url(/main/images/sub/icon_call.svg) no-repeat;
}

.grid_list > li .card_body ul .ir03 {
     background: url(/main/images/sub/icon_clock.svg) no-repeat;
}

.img_box {
     position: relative;
     width: 100%;
     height: 1220px;
     overflow: hidden;
}

/* 행사안내 */
.event_box {
     position: relative;
     width: 100%;
     height: 1220px;
}

.event_box .event_list {
     display: flex;
     width: 2000px;
     height: 1140px;
     overflow: hidden;
     justify-content: center;
     align-items: center;
     margin: 0 auto;
}

.event_box .btn_prev {
     position: absolute;
     left: -60px;
     top: 50%;
     transform: translateY(-50%);
}

.event_box .btn_next {
     position: absolute;
     right: -60px;
     top: 50%;
     transform: translateY(-50%);
}

/* 관광안내 전화번호 */
.tourist_phone_box {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}

.tourist_phone_box > .left {
     width: 1140px;
     height: 1220px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}

.tourist_phone_box > .right {
     width: 1140px;
     height: 1220px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}

.tourist_phone_box .phone_list {
     width: 1140px;
}

.tourist_phone_box .phone_list h5 {
     font-size: 50px;
     padding-left: 115px;
     position: relative;
}

.tourist_phone_box .phone_list:last-child {
     margin-bottom: 0px;
}

.tourist_phone_box .phone_list h5::before {
     position: absolute;
     content: '';
     top: 0;
     left: 0;
     width: 89px;
     height: 73px;
     background: url(/main/images/sub/icon_info.png) no-repeat;
}

.tourist_phone_box .phone_list ul {
     border-top: 5px solid #222;
     margin-top: 30px;
}

.tourist_phone_box .phone_list li {
     position: relative;
     border-bottom: 2px solid #040707;
     padding: 20px 20px 15px;
     display: flex;
}

.tourist_phone_box .phone_list li .name {
     position: relative;
     width: 35%;
     font-size: 30px;
     font-weight: 600;
}

.tourist_phone_box .phone_list li .name::after {
     position: absolute;
     top: 6px;
     right: 30px;
     width: 2px;
     height: 35px;
     background: #000;
     content: '';
}

.tourist_phone_box .phone_list li .phope_num {
     width: 65%;
     display: flex;
     align-items: center;
}

.tourist_phone_box .phone_list li .phope_num span {
     position: relative;
     font-size: 30px;
     font-weight: 600;
     padding: 5px 0 5px 55px;
     width: 290px;
}

.tourist_phone_box .phone_list li .phope_num span::before {
     content: '';
     display: inline-block;
     width: 40px;
     height: 44px;
     left: 0;
     top: 0px;
     position: absolute;
}

.tourist_phone_box .phone_list li .phope_num span.call {
     background: url(/main/images/sub/icon_phone.png) no-repeat;
     font-family: 'Montserrat';
     font-weight: 700;
}

.tourist_phone_box .phone_list li .phope_num span.location {
     background: url(/main/images/sub/icon_location.png) no-repeat;
}

.tourist_phone_box .phone_list li .phope_num span.homePage {
     background: url(/main/images/sub/icon_homePage.png) no-repeat;
     font-family: 'Montserrat';
     font-weight: 700;
}
.pop_box{
     position: relative;
     margin: auto;
     background: #000;
}
.pop_box .img{
     width: 100%;
     height: 100%;
}
.pop_box .btn_close{
     position: absolute;
     top: -50px;
     right: -80px;
}
.date_area .weather_area .temp_txt {
     text-align: right;
     width: 200px;
     font-size: 50px;
     margin-right: 20px;
     font-family: 'Montserrat';
     font-weight: 600;
}
/*  지도 zoom */
.zoom_btn{
     position: absolute;
     width: 500px;
     height: 130px;
     left: 50%;
     bottom: 130px;
     transform: translateX(-50%);
     background: #378432;
     border-radius: 0 0 30px 30px;
     display: flex;
     justify-content: center;
     align-items: center;
}
.zoom_btn a{
     margin: 0 10px;
}
.zoom_btn span{
     display: inline-block;
     width: 35px;
     height: 88px;
     background: #fff;
     border-radius: 10px;
     margin: 0 10px;
}
.zoom_btn span.on{
     background: #52a1ff;
}