@import url('layout_base.css');

/* reset element */
* {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: norma; font-size: inherit;}
aritcle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}

/* align, border */
img, fieldset, a {border: none;}
img {vertical-align: middle;}
table, thead, tbody, tfoot {border-collapse: collapse; border-spacing: 0; border: 0 none;}
ul, ol, li {list-style: none;}
address, em {font-style: normal;}
input, select, textarea, button, form img, label {vertical-align: middle;}

/* 건너뛰기 링크 스타일 */
.skipnavi {position: absolute; left: 0; top: -50px; text-indent: -9999px; font-size: 0; width: 100%; z-index: 999;}
.skipnavi li a:focus, .skipnavi li a:active { position: absolute; left: 0; top: 50px; display: block; width: 100%; padding: 5px 0; text-align: center; text-indent: 0px; font-size: 12px; font-weight: bold; background-color: #f2f2f2;}

/* anchor */
a {text-decoration: none;}
a:link {color: #444;}
a:visited {color: #444;}
a:hover {color: #444;}
a:focus {color: #444;}

/* 기타 공통 스타일 설정 */
html {height: 100%;}
body {height: 100%; font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; font-size: 16px; letter-spacing: -1px; color: #444; white-space: normal; word-wrap: break-word;}
input, select, textarea { box-sizing: border-box; font-size: 15px; font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; letter-spacing: -1px; color: #444;}
textarea {box-sizing: border-box; padding: 10px; border: 1px solid#ccc;}
input, textarea {border-radius: 0;}
.dp_none {display: none;}
.hdd, legend { font-size: 0; width: 0; height: 0; line-height: 0; text-indent: -9999px; overflow: hidden; visibility: hidden; position: absolute; top: 0; left: 0;}
caption { font-size: 0; width: 0; height: 0; line-height: 0; text-indent: -9999px; overflow: hedden;}
.clear::after {content: ""; display: block; clear: both;}
hr { display: none;}

/* layout */
.box_inner {width: 1050px; margin: 0 auto;}
/* header */
header {position: absolute; left: 0; top: 0; width: 100%; height: 113px; background: rgba(0, 0, 0, 0.5); z-index: 100;}
header .header_area h1 {float: left; padding: 40px 0 0;}
header .header_area h1 a {display: block; width: 270px; height: 71px; text-indent: -9999px; overflow: hidden; background: url(../img/logo.png) no-repeat;}
header .header_area .openM0gnb { display: none;}
.header_cont {float: right; width: 780px;}
.header_cont .util { text-align: right; padding-top: 10px;}
.header_cont .util li {display: inline;}
.header_cont .util li::after {content: "|"; display: inline-block; padding: 0 10px; font-size: 10px; color: #eee; position: relative; top: -2px;}
.header_cont .util li:last-child::after {content: ""; display: none;}
.header_cont .util li a {font-size: 14px; color: #eee;}
.header_cont .gnb {float: right; box-sizing: border-box; padding-top: 5px; /*height: 113px; */}
.header_cont .gnb li {float: left;}
.header_cont .gnb li a {display: block; padding: 26px 40px; font-size: 18px; color: #fff;}
.header_cont .gnb li:last-child a {padding-right: 0;}
.header_cont .closePop { display: none;}

/* footer 부분 */
footer { border-top: 1px solid #ddd;}
footer .foot_area { position: relative; padding-bottom: 40px;}
footer .foot_area .foot_list {padding-top: 25px;}
footer .foot_area .foot_list li {float: left;}
footer .foot_area .foot_list li:first-child::after {content: "|"; display: inline-block; padding: 0 10px; font-size: 10px; color: #000; position: relative; top: -2px;}
footer .foot_area .foot_list li a {font-weight: bold; font-size: 15px;}
footer .foot_area h2 {padding-top: 25px; font-size: 14px; color: #666;}
footer .foot_area .addr {padding-top: 5px; line-height: 1.4; font-size: 13px; color: #666;}
footer .foot_area .addr .space0 {letter-spacing: 0;}
footer .foot_area .copy {padding-top: 3px; font-size: 13px; color: #666; letter-spacing: 0;}
footer .foot_area .snslink {position: absolute; right: 20px; top: 50px;}
footer .foot_area .snslink li {float: left; margin-left: 60px;}
footer .foot_area .snslink li a {display: block; width: 50px; height: 74px; text-indent: -9999px; overflow: hidden; background: url(../img/ico_blog_r.png) no-repeat;}
footer .foot_area .snslink li + li a {background-image: url(../img/ico_facebook_r.png);}
footer .foot_area .snslink li + li +li a {background-image: url(../img/ico_instargram_r.png);}

.gnb_depth {position: absolute; left: 0; top: 113px; width: 100%; background: rgba(147, 147, 150, 0.5); z-index: 100; display: none;}
.gnb_depth .submenu_list {width: 1100px; margin: 0 auto; text-align: left;}
.gnb_depth2_1 .submenu_list {box-sizing: border-box; padding-left: 490px;}
.gnb_depth2_2 .submenu_list {box-sizing: border-box; padding-left: 670px;}
.gnb_depth2_3 .submenu_list {box-sizing: border-box; padding-left: 780px;}
.gnb_depth2_4 .submenu_list {box-sizing: border-box; padding-left: 955px;}
.gnb_depth .submenu_list li {display: inline;}
.gnb_depth .submenu_list li a {display: inline-block; padding: 20px;}
.gnb_depth .submenu_list li:last-child a {padding-right: 0;}
.gnb_depth .submenu_list li a.on {color: #fff;}

/* 메인 롤링 부분 */
.main_rolling_mobile {display: none;}
.visualRoll {position: relative; width: 100%;}
.viewImgList {position: relative; width: 100%;}
.viewImgList li {text-align: center; height: 650px; line-height: 650px;}
.viewImgList li.imglist0 {position: relative; z-index: 50; background: url(../img/mainslide01.jpg) no-repeat center;}
.viewImgList li.imglist1 {position: absolute; width: 100%; left: 0; top: 0; z-index: 10; background: url(../img/mainslide02.jpg) no-repeat center;}
.viewImgList li.imglist2 {position: absolute; width: 100%; left: 0; top: 0; z-index: 10; background: url(../img/mainslide03.jpg) no-repeat center;}
.viewImgList li {background-size: cover !important;}
.viewImgList li .roll_content {position: relative;}
.viewImgList li .roll_content .roll_txtline {position: absolute; left: 0; bottom: 60px; width: 100%; line-height: 1; text-align: center; font-size: 22px; color: #fff; letter-spacing: 2px;}
.rollbtnArea {position: absolute; width: 100%; left: 0; bottom: 25px; z-index: 200;}
.rollbtnArea .rollingbtn {width: 320px; margin: 0 auto; text-align: center;}
.rollbtnArea .rollingbtn li {display: inline-block; margin-right: 5px;}
.rollbtnArea .rollingbtn li.butt0 { margin-left: 1 0px;}
/* .rollbtnArea .rollingbtn li.rollstop {} */
.rollbtnArea .rollingbtn li.rollplay {display: none;}
.rollbtnArea .rollingbtn li a {vertical-align: top;}

/* 인기 여행지 부분 */
/* .about_area {} */
.about_area h2 {padding: 55px 0 105px; text-align: center; font-size: 40px;}
.about_area .about_box {background: #f4f0e9;}
.about_area .place_list li {float: left; width: 32%; margin-left: 2%; text-align: center; position: relative; top: -50px;}
.about_area .place_list li:first-child {margin-left: 0;}
.about_area .place_list li .img_topplace { width: 100%;}
.about_area .place_list li h3 {font-weight: bold; font-size: 18px; padding-top: 25px; color: #000;}
.about_area .place_list li p.txt {box-sizing: border-box; padding: 10px 30px 0; width: 100%; overflow: hidden; word-break: keep-all; line-height: 1.8; color: #666;}
.about_area .place_list li .view {display: inline-block; margin-top: 20px; padding-top: 5px; border-top: 2px solid #333; color: #666;}

/* 상담 및 최근 게시물 부분 */
.appbbs_area {padding: 60px 0;}
/* .appbbs_area .appbbs_box {} */
.appbbs_box .app_line {float: left; width: 66%; box-sizing: border-box; padding: 45px 0; text-align: center; background: url(../img/bg_app.jpg) no-repeat; font-size: 0;}
.appbbs_box .app_line a {display: inline-block; width: 42.4%; height: 100px;
line-height: 100px; box-sizing: border-box; padding-left: 75px; text-align: left; background: rgba(0, 0, 0, 0.3) url(../img/ico_katalk.png) no-repeat 20px 50%; border: 2px solid #fff; margin-right: 10px; font-size: 26px; color: #fff; vertical-align: middle;}
.appbbs_box .app_line a + a {margin-right: 0; padding-left: 85px; background-image: url(../img/ico_phone.png);}
.appbbs_box .bbs_line {float: right; width: 30%;}
.appbbs_box .bbs_line h3 { font-size: 26px;}
.appbbs_box .bbs_line .notice_recent {padding-top: 10px;}
.appbbs_box .bbs_line .notice_recent li {padding: 8px 0;}
.appbbs_box .bbs_line .notice_recent li a {display: block; padding-left: 14px; background: url(../img/ico_bullet.png) no-repeat 0 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* 퀵 메뉴 부분 */
.quick_area {position: fixed; top: 171px; right: 0; width: 94px; z-index: 100;}
.quick_area .quick_list li {text-align: center; background: #282828; font-size: 15px;}
.quick_area .quick_list li a {display: block; padding: 15px 0; border-top: 1px solid #4d4d4d;}
.quick_area .quick_list:first-child {border-top: none;}
.quick_area .quick_list li a h3 {padding-bottom: 10px; color: #ddd; letter-spacing: -2px;}
.quick_area .quick_list li:last-child a h3 {padding-bottom: 0;}
.quick_area .quick_list li a h3 em {display: none;}
.quick_area .quick_list li a p {line-height: 1.3; font-size: 12px; color: #fff;}
.to_top {text-align: center; background: #fff;}
.to_top a {display: block; height: 45px; box-sizing: border-box; text-indent: -9999px; overflow: hidden; border-left: 1px solid#a3a3a3; border-bottom: 1px solid#a3a3a3; background: url(../img/ico_totop.png) no-repeat center; background-size: 50%;}

/* 팝업 부분 */
.popup_base {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 200; display: none;}
.popup_base .pop_content {position: relative; width: 580px; margin: 200px auto 0; box-sizing: border-box; background: #fff;}
.pop_content .btn_xpop {position: absolute; right: 0; top: -55px;}
.pop_content .btn_xpop a {display: block; width: 45px; height: 45px; text-align: center; text-indent: -9999px; overflow: hidden; background: url(../img/btn_xpop.png) no-repeat; background-size: 45px;}
.pop_content .pop_list li {padding: 36px; text-align: center;}
.pop_content .pop_list li + li {background: #f4f0e9;}
.pop_content .pop_list li + li + li {background: #fff;}
.pop_content .pop_list li h2.tit_pop {padding: 10px 0 24px; font-weight: bold; font-size: 30px; letter-spacing: -2px;}
.pop_content .pop_list li img.pop_img {width: 100%;}
.pop_content .pop_list li .pop_txt {padding-top: 15px;}
.pop_content .pop_list li .pop_txt p {padding-top: 10px; line-height: 1.8; font-size: 17px; width: 95%; margin: 0 auto; overflow: hidden; word-break: keep-all; letter-spacing: -2px;}

@media all and (max-width: 1065px) and (min-width: 801px) {
    .box_inner {width: 100%;}
    header .header_area h1 { padding-left: 20px;}
    .header_cont {float: right; width: 60%; padding-right: 20px;}
    .header_cont .gnb li a { padding: 26px 25px;}
    .gnb_depth .submenu_list {width: 100%; padding-left: 52%;}
    .gnb_depth .submenu_list li a {padding: 20px;}

    /* footer 부분 */
    footer .foot_area {box-sizing: border-box; padding-left: 20px;}
    footer .foot_area .snslink li {margin-left: 15px;}

    /* 인기 여행지 부분 */
    .about_area .place_list {box-sizing: border-box; padding: 0 20px;}

    /* 상담 및 최근 게시물 부분 */
    .appbbs_area {padding: 0 20px;}
    .appbbs_box .app_line a {font-size: 20px;}

    /* 퀵 메뉴 부분 */
    .quick_area .quick_list {display: none;}
    .to_top {position: fixed; right: 20px; bottom: 112px; text-align: center; background: none; z-index: 100;}
    .to_top a {display: block; width: 45px; height: 45px; border-left: none; border-bottom: none; background: url(../img/ico_totop_mo.png) no-repeat center; background-size: 45px;}
}
@media all and (max-width: 800px) {
    .box_inner { width: 100%;}
    header {height: 90px; text-align: center; z-index: 200; background: rgba(0, 0, 0, 0.5);}
    header.on {background: #31353d;}
    header .header_area h1 {float: none; width: 100%; height: 50px; text-align: center; padding: 35px 0 0;}
    header .header_area h1 a {display: inline-block; width: 180px; height: 23px; background-size: 180px 23px;}
    header .header_area .openM0gnb {display: block; position: absolute; left: 15px; top: 35px; width: 23px; height: 16px;}
    header .header_area .openM0gnb span {box-sizing: border-box; display: block; width: 25px; height: 3px; margin-bottom: 4px; border-radius: 10px; background: #fff;}
    header .header_area .openM0gnb span + span {width: 17px;}
    header .header_area .openM0gnb span:last-child {width: 25px; margin-bottom: 0;}
    .header_cont {float: none; width: 100%; background: #31353d; display: none;}
    .header_cont .util {padding: 20px;}
    .header_cont .util li {float: left;}
    .header_cont .util li::after {content: "|"; display: inline-block; padding: 0 10px; font-size: 10px; color: #a2a2a2; position: relative; top: -2px;}
    .header_cont .util li a {font-size: 16px; color: #fff;}
    .header_cont .closePop {display: block; position: absolute; right: 0; top: 32px;}
    .header_cont .closePop a {display: block; width: 60px; height: 60px; text-indent: -9999px; overflow: hidden; background: url(../img/btn_xpop.png) no-repeat; background-size: 25px;}
    .header_cont .gnb {float: none; box-sizing: border-box; padding-top: 0; height: auto; border-top: 1px solid #83868b;}
    .header_cont .gnb li {float: left; width: 50%; text-align: left; box-sizing: border-box; border-bottom: 1px solid #83868b;}
    .header_cont .gnb li:nth-child(odd) {border-right: 1px solid #83868b;}
    .header_cont .gnb li a {display: block; padding: 0 0 0 65px; height: 60px; line-height: 60px; background: url(../img/ico_gnb01.png) no-repeat 10px center; background-size: 49px 56px; font-size: 16px; color: #fff;}
    .header_cont .gnb li + li a {background-image: url(../img/ico_gnb02.png);}
    .header_cont .gnb li + li + li a {background-image: url(../img/ico_gnb03.png);}
    .header_cont .gnb li + li + li + li a {background-image: url(../img/ico_gnb04.png);}
    .header_cont .gnb li + li + li + li + li a {background-image: url(../img/ico_gnb05.png);}
    .gnb_depth {display: none;}

    /* footer 부분 */
    footer .foot_area {box-sizing: border-box; padding: 0 20px 90px;}
    footer .foot_area h2 {padding-top: 15px; font-size: 14px;}
    footer .foot_area .addr {line-height: 1.3; font-size: 14px; color: #767676;}
    footer .foot_area .copy {padding: 3px 0 20px; font-size: 14px; color: #767676;}
    footer .gubun { color: #fff;}
    footer .br_line {display: block;}
    footer .foot_area .snslink {position: static; width: 210px; margin: 10px auto;}
    footer .foot_area .snslink li {margin-left: 30px;}
    footer .foot_area .snslink li:first-child {margin-left: 0;}

    /* 모바일 롤링 부분 */
    .main_rolling_pc {display: none;}
    .main_rolling_mobile {display: block;}
    .main_rolling_mobile .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;}
    .main_rolling_mobile .swiper-pagination { width: auto; right: 20px; left: auto; top: auto; bottom: 20px; font-size: 0;}
    .main_rolling_mobile .swiper-pagination-bullet {width: 5px; height: 5px; margin: 0 3px !important; background: #fff; opacity: 0.2;}
    .main_rolling_mobile .swiper-pagination-bullet-active { opacity: 1;}

    /* 인기 여행지 부분 */
    .about_area h2 {padding: 27px 0 25px; font-size: 20px;}
    .about_area h2 b {display: block; padding-top: 10px;}
    .about_area .about_box {background: #fff;}
    .about_area .place_list li {float: none; width: 100%; margin: 0; box-sizing: border-box; padding: 0 20px; top: 0;}
    .about_area .place_list li p.txt {padding: 10px 50px 30px; line-height: 1.4;}
    .about_area .place_list li .view {padding-bottom: 10px; margin: 0 0 30px;}

    /* 상담 및 최근 게시물 부분 */
    .appbbs_area {padding: 0 20px;}
    .appbbs_box .app_line{display: none;}
    .appbbs_box .bbs_line {float: none; width: 100%; padding: 20px 0; border-top: 1px solid #d6d7d8;}
    .appbbs_box .bbs_line h3 {font-weight: bold; font-size: 19px;}

    /* 퀵 메뉴 부분 */
    .quick_area .quick_list {position: fixed; left: 0; bottom: 0; width: 100%;}
    .quick_area .quick_list li {float: left; width: 31%; text-align: left; background: #3a3e46; font-size: 15px;}
    .quick_area .quick_list li + li {width: 37%;}
    .quick_area .quick_list li + li + li {width: 32%;}
    .quick_area .quick_list li:first-child::after {content: ""; display: inline-block; width: 1px; height: 16px; position: absolute; right: 31%; top: 50%; margin-top: -8px; background: #76787e;}
    .quick_area .quick_list li:last-child::before {content: ""; display: inline-block; width: 1px; height: 16px; position: absolute; left: 32%; top: 50%; margin-top: -8px; background: #76787e;}
    .quick_area .quick_list li a {display: block; padding: 10px 0; border-top: none; color: #fff;}
    .quick_area .quick_list li a h3 {height: 37px; line-height: 37px; padding-bottom: 0; padding-left: 45px; background: url(../img/ico_phone_mobtm.png) no-repeat 20px center; background-size: 20px; color: #fff; letter-spacing: -1px;}
    .quick_area .quick_list li + li a h3 {background: url(../img/ico_katalk_mobtm.png) no-repeat 20px center; background-size: 20px;}
    .quick_area .quick_list li + li + li a h3 {background: url(../img/ico_contact_mobtm.png) no-repeat 20px center; background-size: 20px;}
    .quick_area .quick_list li a h3 em {display: inline;}
    .quick_area .quick_list li a p {display: none;}
    .to_top {position: fixed; right: 20px; bottom: 100px; text-align: center; background: none; z-index: 100;}
    .to_top a {display: block; width: 45px; height: 45px; border-left: none; border-bottom: none; background: url(../img/ico_totop_mo.png) no-repeat center;background-size: 45px;}
    .to_top.hide { display: none;}

    /* 팝업 부분 */
    .popup_base .pop_content {position: relative; width: 90%; margin: 100px auto 0;}
    .pop_content .btn_xpop {top: -40px;}
    .pop_content .btn_xpop a {display: block; width: 30px; height: 30px; background-size: 30px;}
    .pop_content .pop_list li {padding: 20px;}
    .pop_content .pop_list li h2.tit_pop {padding: 5px 0 12px; font-size: 17px; letter-spacing: -1px;}
    .pop_content .pop_list li .pop_txt {padding-top: 10px;}
    .pop_content .pop_list li .pop_txt p {padding-top: 5px; line-height: 1.4; font-size: 14px; letter-spacing: -1px;}
}
@media all and (max-width: 320px) {
    /* 퀵 메뉴 부분 */
    .quick_area .quick_list li a h3 {letter-spacing: -2px;}
}