@import url('./layout_base.css');
@font-face {
    font-family: 'CookieRun-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 공통 부분 */
body{
    font-family: 'CookieRun-Regular';
    font-size: 16px;
    height:100%;
    color:#444;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1;
}
*{
    margin:0;
    padding:0;
}
h1, h2, h3, h4, h5, h6{
    font-weight: normal;
    font-size: inherit;
}
ul, ol, li{
    list-style: none;
}
a{text-decoration: none;}
a:link, a:visited, a:hover, a:focus{
    color:#444;
}
/* clear 클래스는 float 없애는 용도라 after에 clear:both 이용해서 없애주기 */
.clear::after{
    content:"";
    display:block;
    clear:both;
}
img{
    border:none;
    vertical-align: middle;
}
.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;
}
.box_inner{
    width:1050px;
    margin:0 auto;
}
input, select, textarea, button, form, label{ vertical-align: middle; }
fieldset{ border:none; }
input[type="text"], input[type="number"], input[type="password"], input[type="tel"], input[type="email"]{
    box-sizing: border-box;
    display: inline-block;
    height:45px;
    padding:0 10px;
    border: 1px solid #ccc;
    line-height: normal;
    font-size: 15px;
}
textarea{
    box-sizing: border-box;
    padding:10px;
    border:1px solid #ccc;
    font-size: 15px;
}
/* css-radio 클래스를 가진 버튼(동그란 버튼 없애고 그림으로 띄우기 위함) */
input[type="radio"].css-radio{
    overflow: hidden;
    position: absolute;
    left:-1000px;
    width:1px;
    height:1px;
}
/* css-radio 버튼 뒤의 label(배경으로 그림파일을 넣어서 버튼처럼 보이게 하기 위함) */
input[type="radio"].css-radio + label{
    display: inline-block;
    padding-left:20px !important;
    margin-right:20px;
    background:url("../images/bg_radio.png") no-repeat 0 0;
    cursor:pointer;
    vertical-align: middle;
    font-size: 15px;
    line-height: 16px;
}
/* 만약 css-radio 버튼이 클릭되었다면 배경 이미지를 옮겨서 클릭된 그림으로 바꿔주기 */
input[type="radio"].css-radio:checked + label{
    background-position: 0 -50px;
}
/* 체크박스(위의 radio 버튼과 동일) */
input[type="checkbox"].css-checkbox{
    overflow:hidden;
    position: absolute;
    left:-1000px;
    width:1px;
    height:1px;
}
input[type="checkbox"].css-checkbox + label{
    display:inline-block;
    padding-left:30px !important;
    height:20px;
    line-height: 20px;
    background: url("../images/bg_checkbox.png") no-repeat 0 0;
    background-size: 20px;
    cursor:pointer;
    vertical-align: middle;
    font-size: 15px;
}
input[type="checkbox"].css-checkbox:checked + label{
    background-position: 0 -20px;
}
/* select태그 
    -webkit-appearance는 해당 브라우저의 기본 스타일을 사용하지 않을 때 none값을 준다.
    맨 오른쪽에 있는 아래화살표 없애주기 위함(배경 이미지로 띄우기)
*/
select{
    -webkit-appearance: none;
    height:30px;
    padding:0 5px;
    border:1px solid #ccc;
}
.select_common{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    width:158px;
    height:35px;
    border:1px solid #ccc;
    overflow: hidden;
    background:url("../images/ico_selectArr.png") no-repeat 100% 50%;
}
.select_common select{
    display:inline-block;
    width:185px;
    background:none;
    height:29px;
    padding:0 10px;
    border:none;
    font-size: 15px;
}
/* 버튼들 */
.btn_line{
    text-align: center;
    font-size: 0;
}
.btn_line a{ margin-left: 10px; }
.btn_line a:first-child{ margin-left:0; }
/* 가입, 수정버튼 */
.btn_basecolor{
    display: inline-block;
    border:1px solid #ccc;
    text-align: center;
    font-size: 20px;
    width:125px;
    height:50px;
    line-height: 50px;
    vertical-align: middle;
    background:#384d75;
    color:#fff !important;
}
/* 검색버튼 */
.btn_srch{
    display: inline-block;
    background:#384d75;
    color:#fff !important;
    text-align: center;
    width:70px;
    height:35px;
    font-size: 14px;
    vertical-align: middle;
    line-height: 35px;
}
/* 목록버튼 */
.btn_bbs{
    font-size: 14px;
    display: inline-block;
    background:#384d75;
    color:#fff !important;
    width:70px;
    text-align: center;
    line-height:35px;
    height:35px;
    vertical-align: middle;
}

/* input, textarea의 placeholder 기본 스타일을 우리가 원하는것으로 변경 */
input::-webkit-input-placeholder{color:#999;}
textarea::-webkit-input-placeholder{color:#999;}
table, thead, tbody, tfoot{ border-collapse: collapse; border-spacing: 0; border:none; }
/* ------------------- 서브페이지 공통 시작 -------------------*/
/* 내용쪽 */
.bodytext_area { box-sizing: border-box; padding:55px 50px 0; }
/* 헤더 바로 아래에 있는 사진부분(각 파트마다 다른 그림들을 띄워주기 위함) */
.location_area { height:445px; background: url("../images/img_top2.jpg") no-repeat center bottom; }
.location_area.member{
    background:url("../images/img_top5.jpg") no-repeat center bottom;

}
.location_area.customer{
    background:url("../images/img_top2.jpg") no-repeat center bottom;
}
.location_area.package{
    background:url("../images/img_top3.jpg") no-repeat center bottom;
}
/* "TOURIST IN TOUR" 글자 부분 */
.location_area h2.tit_page{
    padding:250px 0 0 0;
    margin:0 50px;
    border-bottom: 1px solid #ccc;
    font-size:30px;
    letter-spacing: 3px;
    color:#fff;
}
.location_area h2.tit_page .in{ font-variant: small-caps; }

/* 위에있는 문자열 아래에 오는 현재 페이지의 경로를 나타내는 글자들 */
.location_area p.location { padding:20px 0 0 50px; color:#fff; }
.location_area p.location .path{ display: inline-block; padding:0 10px; }
/* 얘는 모바일에서 이용 */
.location_area ul.page_menu { display:none; }
/* ------------------- 서브페이지 공통 끝 -------------------*/
/* 
    웹 접근성을 위한 skipnavi
    https://nuli.navercorp.com/community/article/1132804
*/
/* skipnavi */
/* "본문내용" 글자 숨기기 */
.skipnavi{
    position: absolute;
    left:0; top:-50px;
    width:100%;
    text-indent: -9999px;
    font-size:0;
    z-index: 999;
}
/* 만약 포커싱, 클릭중 이라면 "본문내용" 글자를 다시 나타나게 하기 */
.skipnavi > li > a:focus, .skipnavi > li > a:active{
    position: absolute;
    left:0; top:50px;
    display: block;
    width:100%;
    padding:5px;
    text-align: center;
    text-indent: 0px;
    font-size: 12px;
    font-weight: bold;
    background-color: #f2f2f2;
}
/* -------------------메인 페이지 (index.html) 시작------------------- */
/* 헤더 */
header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:113px;
    background:rgba(0,0,0,0.5);
    z-index: 100;
}
/* 로고 */
header > .header_area > h1 {
    float:left;
    padding:45px 0 0;
}
/* 로고 이미지를 배경으로 한 a태그, block요소로 크기조정 */
header > .header_area > h1 > a{
    display:block;
    width:270px;
    height:71px;
    background:url("../images/logo.png") no-repeat;
    /* 접근성을 위한 문자열 숨기기 위함 */
    text-indent: -9999px;
    overflow:hidden;
}
/* 로그인, 회원가입 글자들을 포함하고 있는 박스 */
.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:first-child::after{
    content:"|";
    display:inline-block;
    padding:0 10px;
    font-size: 10px;
    color:#eee;
    position: relative;
    top:-2px;
}
.header_cont .util li a{ font-size: 14px; color:#eee; }

/* 네비게이션 */
.header_cont .gnb {
    float:right;
    box-sizing: border-box;
    padding-top: 5px;
}
/* 서브메뉴들을 일렬로 정렬 */
.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; }
/* 하위메뉴 숨기기 */
.gnb_depth{
    position: absolute; left:0; top:113px; width:100%;
    background: rgba(250,100,0,0.85); z-index: 100;
    display: none;
}
/* 하위메뉴 보이기 */
/* .gnb_depth{
    position: absolute; left:0; top:113px; width:100%;
    background: rgba(250,100,0,0.85); z-index: 100;
} */

/* 하위메뉴의 가로크기를 최대로 */
.gnb_depth .submenu_list{ width:1050px; margin:0 auto; text-align: left; }
/* 안에 있는 li에 왼쪽패딩으로 하위메뉴를 적절한 위치로 옮겨주기 */
.gnb_depth2_1 .submenu_list{ box-sizing: border-box; padding-left: 480px; }
.gnb_depth2_2 .submenu_list{ box-sizing: border-box; padding-left: 600px; }
.gnb_depth2_3 .submenu_list{ box-sizing: border-box; padding-left: 730px; }
.gnb_depth2_4 .submenu_list{ box-sizing: border-box; padding-left: 945px; }

/* 일렬로 배치 */
.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; }

/* 모바일메뉴를 위한 "닫기" 글자 사이즈 줄여서 안보이게 하기 */
header .header_cont .closePop a{
    font-size: 0;
}

#container{ padding-bottom: 70px; }
/* PC 롤링 */
.main_rolling_mobile{ display:none; }
.visualRoll{ position: relative; width:100%; }
.viewImgList { position: relative; width:100%; }
.viewImgList li{
    text-align: center;
    height: 550px;
    line-height: 550px;
    background-size: cover !important;
}
/* 첫번째 이미지를 가장 위쪽으로 */
.viewImgList li.imgList0 {
    position: relative; z-index: 50;
    background:url("../images/mainslide01.jpg") no-repeat center;
}
/* 나머지 둘은 아래에 숨기기 */
.viewImgList li.imgList1 {
    position: absolute; z-index: 10;
    top:0; left:0; width:100%;
    background:url("../images/mainslide02.jpg") no-repeat center;
}
.viewImgList li.imgList2 {
    position: absolute; z-index: 10;
    top:0; left:0; width:100%;
    background:url("../images/mainslide03.jpg") no-repeat center;
}
/* "BE TOURLIST FOR BETTER LIFE" 배치 */
.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: 10px; }
/* 재생버튼 숨기기 */
.rollbtnArea .rollingbtn li.play{ display: none; }
.rollbtnArea .rollingbtn li a{ vertical-align: middle; }

/* 다시 찾는 인기 여행지 TOP 3 */
/* "다시 찾는 인기 여행지 TOP 3" 문자열 스타일 */
.about_area h2{ padding:55px 0 105px; text-align: center; font-size: 40px; }
/* 뒤에 깔리는 박스 색깔 */
.about_area .about_box{ background-color: #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 p.txt{
    box-sizing: border-box; padding: 10px 30px 0; width:100%;
    overflow: hidden; word-break:keep-all; line-height: 1.8; color:#666;
}
/* VIEW 버튼 */
.about_area .place_list li .view{
    display: inline-block; margin-top: 20px; padding-top: 5px;
    border-top: 2px solid #333; color:#555;
}
/* 상담 및 공지사항 */
.appbbs_area{ padding:60px 0; }
/* 앱 부분들, 아이콘들의 배경사진과 박스 만들기 */
.appbbs_area > .appbbs_box > .app_line{
    float:left;
    width:66%;
    box-sizing: border-box;
    padding:45px 0;
    text-align: center;
    background:url("../images/bg_app.jpg") no-repeat;
    font-size: 0;
}
/* 각 아이콘들의 크기, 아이콘 그림 설정 */
.appbbs_area > .appbbs_box > .app_line > a{
    display: inline-block;
    width:45.4%;
    height:100px;
    line-height: 100px;
    box-sizing: border-box;
    padding-left: 75px;
    text-align: left;
    background:rgba(0,0,0,0.3) url("../images/ico_katalk.png") no-repeat 20px 50%;
    border:2px solid #fff;
    margin-right:10px;
    font-size: 26px;
    color:#fff;
    vertical-align: middle;
}
/* 두번째 아이콘(전화 상담 신청) 전화 그림으로 바꾸기 */
.appbbs_area > .appbbs_box > .app_line > a+a {
    margin-right: 0;
    padding-left: 85px;
    background-image: url("../images/ico_phone.png");
}
/* 공지사항 부분, 오른쪽으로 띄우기 */
.appbbs_box > .bbs_line { float:right; width:30%;}
/* "NOTICE" 글자 크게 */
.appbbs_box > .bbs_line h3{ font-size: 26px; }
/* "NOTICE", 공지사항 내용들과 거리두기 */
.appbbs_box > .bbs_line > .notice_recent{ padding-top: 10px; }
/* 각 공지사항들 거리두기(글꼴에 따라 적절히 선택) */
.appbbs_box > .bbs_line > .notice_recent > li { padding:6px 0; }
.appbbs_box > .bbs_line > .notice_recent > li > a{
    /* 글꼴에 따라 적절히 선택 */
    display:block;
    height:20px;
    /* 살짝 오른쪽으로 들여쓰기 후 그림파일로 리스트 모양 디자인 */
    padding-left: 14px;
    background:url("../images/ico_bullet.png") no-repeat 0 50%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* footer */
footer { border-top: 1px solid #ddd; }
footer > .foot_area { position: relative; padding-bottom: 40px; }
/* footer랑 위쪽 선이랑 사이 거리두기 */
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;
}
/* Copyright 스타일링 */
footer > .foot_area > .copy{
    padding-top: 3px;
    font-size: 13px;
    color:#666;
    letter-spacing: 0;
}
/* SNS 아이콘들 오른쪽 위로 이동 */
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("../images/ico_blog_r.png") no-repeat;
}
footer > .foot_area > .snslink > li + li > a{
    background:url("../images/ico_facebook_r.png") no-repeat;
}
footer > .foot_area > .snslink > li + li + li > a{
    background:url("../images/ico_instargram_r.png") no-repeat;
}
/* quick list */
/* 퀵메뉴 위치고정 */
.quick_area{
    position: fixed;
    top:171px;
    right:0;
    width:94px;
    z-index: 100;
}
/* 내부 내용들 가운데 정렬 및 색깔 */
.quick_area > .quick_list > li{
    text-align: center;
    background-color: #282828;
    font-size: 15px;
}
.quick_area > .quick_list > li > a{
    display:block;
    padding:15px 0;
    border-top:1px solid #4d4d4d;
}
.quick_area > .quick_list > li:first-child > a{
    border-top: none;
}
.quick_area > .quick_list > li > a > h3{
    padding-bottom: 10px;
    color:#ddd;
    letter-spacing: -1px;
}
.quick_area > .quick_list > li:last-child > a > h3{
    padding-bottom: 0;
}
.quick_area > .quick_list > li > a > p{
    line-height: 1.3;
    font-size: 12px;
    color:#fff;
}
/* TOP */
.to_top{
    text-align: center;
    background-color: #fff;
}
/* TOP 버튼 왼쪽, 아래쪽 테두리 만들어서 버튼처럼 보이게 하기 */
.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("../images/ico_totop.png") no-repeat center;
    background-size: 50%;
}
/* -------------------메인 페이지 (index.html) 끝------------------- */
/* -------------------로그인 페이지 (login.html) 시작------------------- */
.login_wrap { width:508px; margin:100px auto 0; }
h1.loginTit { text-align: center; }
h1.loginTit > a { display: block; }
h1.loginTit > a > img { width:100%; }

.login_list{ width:75%; margin:70px auto 20px; }
.login_list > li{
    position: relative;
    margin-bottom: 4px;
    height:54px;
    box-sizing: border-box;
    padding-left: 50px;
    border-radius: 5px;
    /* border:1px solid black; */
}
.login_list > li > a {
    display: block;
    height:54px;
    box-sizing: border-box;
    line-height: 54px;
    text-align: center;
    font-size: 14px;
    color:#fff;
}
.login_list > li:last-child { margin-bottom: 0; }
.login_list > li.kakao{
    background: #f3e129 url("../images/ico_katalk.png") no-repeat 15px 50%; 
    background-size: 45px 45px;
}
.login_list > li.kakao > a{ color:#202224; }
.login_list > li.naver{
    background: #00c300 url("../images/ico_naver.png") no-repeat 15px 50%; 
    background-size: 45px 45px;
}
.login_list > li.facebook{
    background: #405ea9 url("../images/ico_face.png") no-repeat 15px 50%; 
    background-size: 45px 45px;
}
.login_list > li.email{
    background: #888 url("../images/ico_cellphone.png") no-repeat 15px 50%; 
    background-size: 45px 45px;
}
.btnonoff_line { width:75%; margin:10px auto; text-align: center; }
.btnonoff_line .btn_onoff{ margin-left: 5px; font-size: 14px; }
/* 
    appearance
        운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현할 때 사용함
        none 값을 준다면 원래 쓰이는 속성을 없앰

*/
/* 스위치 모양 배경에 깔리는 파트 */
.switch{
    /* border:1px solid black; */
    position: relative;
    display: inline-block;
    width:35px;
    height:22px;
    margin:0;
    padding:0;
    border-radius: 16px;
    background-color: #e5e5e5;
    vertical-align: top;
    appearance: none;
    cursor: pointer;
    z-index: 0;
}
/* 회색 스위치 모양 위에 하얀색 조금 작은걸로 덮어서 테두리처럼 보이게 만들기 */
.switch::before{
    content:"";
    position: absolute;
    width:33px;
    height:20px;
    border-radius: 15px;
    background-color: #fff;
    z-index: 1;
    left:1px;
    top:1px;
}
/* 스위치 위의 원모양 만들어서 그림자와 함께 맨 위로 올리기 */
.switch::after{
    content:"";
    position: absolute;
    z-index: 2;
    width:19px;
    height:19px;
    left: 1px;
    top:1px;
    box-shadow: 0 2px 5px #999;
    background-color: #fff;
    border-radius: 50%;
}
/* -------------------로그인 페이지 (login.html) 끝------------------- */
/* -------------------회원가입 페이지 (join.html) 시작------------------- */
.location_area.member > .box_inner > form{
    padding-top:100px;
}
.appForm{ margin:40px auto 0; }
/* 필수요소들은 빨간색 */
.appForm .info_pilsoo{
    position: relative;
    padding-left: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
    font-size: 15px;
    color:#f00;
}
/* * 글자 빨간색으로 필수 아이템들 앞에 붙이기 */
.appForm .pilsoo_item::before{
    content:"*";
    display: inline-block;
    position: absolute;
    left:5px;
    top:0px;
    width:15px;
    font-weight: bold;
    font-size: 17px;
    color:#f00;
}
.appForm .app_list{
    padding:10px 0;
    border-bottom: 1px solid #ccc;
}
.appForm .app_list li{ padding:8px 0; }
/* 라벨들 왼쪽 정렬, 스타일 조정 */
.appForm .app_list li .tit_lbl{
    position: relative;
    float:left;
    width:150px;
    box-sizing: border-box;
    padding-left:20px;
    line-height: 42px;
    font-weight: bold;
    font-size: 17px;
    letter-spacing: -1px;
}
/* 입력하는 쪽들 */
.appForm .app_list li .app_content{ float:right; width:770px; }
.appForm .app_list li .app_content *{ vertical-align: top;}
/* "@" 위치조정 */
.appForm .app_list li .app_content.email_area .ico_space{
    display: inline-block; padding-top:15px;
}
.appForm .app_list li .app_content label{ vertical-align: middle; }
/* 회원가입 페이지에 있는 셀렉트 같은 경우에는 크기 새롭게 조정 */
.appForm .app_list li .select_common{
    width:160px;
    height:45px;
    background-position: 100% 50%;
    border:1px solid #ccc;
}
.appForm .app_list li .select_common select{
    width:200px;
    height:43px;
}
/* 라디오, 체크박스 버튼들 있는 부분은 위치 살짝 조정 */
.appForm .app_list li .app_content.radio_area{
    height:45px;
    box-sizing: border-box;
    padding-top: 12px;
}
.appForm .app_list li .app_content.checkbox_area{
    height:45px;
    box-sizing: border-box;
    padding-top: 12px;
}
.appForm .app_list li textarea{
    height:245px;
    resize: none;
}
.btn_line{ padding:20px 0; }
/* -------------------회원가입 페이지 (join.html) 끝------------------- */
/* -------------------내정보 페이지 (mypage.html) 시작------------------- */
/* "내 정보" 칸 만들기 */
.myinfo dt{
    background-color: #000;
    color:#fff;
    width:170px;
    height:70px;
    line-height: 70px;
    text-align: center;
    font-size: 18px;
}
.myinfo dd{ border-top: 2px solid #000;}
/* 전체 내용들 아래에 회색 배경 */
.regForm .reg_list { padding:0 0; background:url("../images/bg_reglist.png") repeat-y; }
.regForm .reg_list li{
    min-height: 60px;
    padding:0;
    border-bottom: 1px solid #ccc;
}
/* 타이틀들 왼쪽으로 정렬시키며 크기 및 위치 세부조정 */
.regForm .reg_list li .tit_lbl{
    position: relative;
    float:left;
    width:150px;
    box-sizing: border-box;
    padding-left: 20px;
    line-height: 60px;
    font-weight: bold;
    font-size: 16px;
}
/* 내용들은 오른쪽으로 정렬시키며 크기 및 위치 세부조정 */
.regForm .reg_list li .reg_content{
    float:right;
    width:770px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-top: 22.5px;
    font-size: 15px;
}
.regForm .reg_list li .reg_content * { vertical-align:  middle; }
/* gender 빼고 라디오 영역들은 장인정신 발휘 */
.regForm .reg_list li .reg_content.radio_area:not(.gender){
    padding-top:10px;
}
/* 동의받는 이유 설명하는 문자열 위치조정 */
.regForm .reg_list li .reg_content .info_line{
    padding:5px 10px 5px 0;
    font-size: 15px;
}
/* -------------------내정보 페이지 (mypage.html) 끝------------------- */
/* -------------------리스트 페이지 (notice_list.html) 시작------------------- */
/* 검색 파트 오른쪽 정렬 */
.minisrch_form{ width:100%; text-align: right; margin-bottom: 20px; }
/* 키워드 입력박스 */
.minisrch_form .tbox{
    padding:0 5px 0 30px;
    width:200px;
    height:35px;
    line-height: 30px;
    border:none;
    border-bottom: 1px solid #ccc;
    background:url("../images/ico_search.png") no-repeat 10px 50%;
    background-size: 15px;
}
/* 게시글 테이블 크기랑 위쪽 선 */
.bbsListTbl{
    width:100%;
    border-top:2px solid #384d75;
}
/* 셀들의 크기 조정 */
.bbsListTbl th, .bbsListTbl td{
    padding:10px;
    box-sizing: border-box;
    height:55px;
}
.bbsListTbl th { border-bottom: 1px solid #ccc; background-color: #f0f3fa; }
.bbsListTbl td {
    text-align: center;
    line-height: 1.3;
    border-bottom: 1px solid #ccc;
}
/* 제목만 왼쪽 정렬 */
.bbsListTbl td.tit_notice{ text-align: left; }
.bbsListTbl td:nth-child(1){ width:10%; }
.bbsListTbl td:nth-child(2){ width:55%; }
.bbsListTbl td:nth-child(3){ width:15%; }
.bbsListTbl td:nth-child(4){ width:20%; }

/* 페이징처리 가운데정렬 */
.pagination{
    padding: 40px 0 0;
    text-align: center;
}
/* 버튼들 일렬로 배치 */
.pagination a{ display: inline-block; }
/* 화살표 버튼들 정렬*/
.pagination a.pbtn{
    display: inline-block;
    padding:7px;
    text-align: center;
    vertical-align: middle;
    font-size: 0;
}
/* 페이지 숫자 버튼들 정렬 */
.pagination a .pagenum{
    display: inline-block;
    width:25px;
    height:25px;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
}
/* 현재 보고있는 페이지는 배경색상 변경 */
.pagination a .currentPage{
    background-color: #384d75;
    color:#fff;
    border-radius: 3px;
}
/* 페이지 버튼들에 마우스 올렸을때 설정 */
.pagination a:hover .pagenum{
    background-color: #ddd;
    border-radius: 3px;
}
/* -------------------리스트 페이지 (notice_list.html) 끝------------------- */
/* -------------------공지사항 상세보기 페이지 (notice_view.html) 시작------------------- */
.bbsview_list{ padding-bottom: 30px; border-top: 2px solid #384d75; }
.bbsview_list li{
    box-sizing: border-box;
    padding: 0 15px;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    color:#666;
}
/* 제목 */
.bbsview_list li.bbs_title{
    width:100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height:50px;
    line-height: 50px;
    font-weight: bold;
    font-size: 16px;
}
/* 날짜, 조회수는 한줄에 배치 */
.bbsview_list li.bbs_date{
    height:40px;
    line-height: 40px;
    width:50%;
    float:left;
}
.bbsview_list li.bbs_hit{
    height:40px;
    line-height: 40px;
    width:50%;
    float:left;
}
.bbsview_list li.bbs_content{
    clear:both;
    min-height: 200px;
    padding:20px 15px;
}
.bbsview_list li.bbs_content .editor_content{
    line-height: 1.4;
}
/* 이전, 다음글 위쪽선 */
.near_list{ border-top: 1px solid #ccc; }
/* 이전, 다음글 사이랑 마지막선  */
.near_list li{ padding:10px; border-bottom: 1px solid #ccc; }
.near_list li:after{ content:""; display: block; clear:both; }
/* 위쪽 아래쪽 화살표 그림 넣기 */
.near_list li h4{
    float:left;
    width:100px;
    padding:0 0 0 50px;
    background:url("../images/ico_nearNext.png") no-repeat 12px 50%;
    font-size: 15px;
}
.near_list li h4.next{
    background:url("../images/ico_nearPrev.png") no-repeat 12px 50%;
}
/* -------------------공지사항 상세보기 페이지 (notice_view.html) 끝------------------- */
/* -------------------공지사항 프로그램 페이지 (program.html) 시작------------------- */
.bodytext_area.place_area{ padding:55px 0 0; }
.program_list li { float:left; width:31.5%; margin:0 0.9%; }
/* 1,4,7, .. 번째 자식마다 클리어(다음 줄에 나오게 하기 위함) */
.program_list li:nth-child(3n+1){ clear:both; }
.program_list li .img_place{
    display: block;
    width:100%;
}
/* 장소 이름 */
.program_list li h3{
    padding:40px 0 0;
    font-weight: bold;
    font-size: 22px;
}
/* 날짜 */
.program_list li .subttl{
    padding:25px 0 0;
    font-weight: bold;
    font-size: 16px;
    color:#fa6400;
    letter-spacing: 0;
}
/* 내용 */
.program_list li .program_content{
    padding:15px 0 0;
    line-height: 1.8;
    font-size: 15px;
}
.program_list li .program_content p{
    width:100%;
    overflow: hidden;
    word-break: keep-all;
}
/* 더보기 버튼 누를시 나올 문자열 */
.program_list li .program_content p .subtxt{
    display:none;
}
/* 더보기 버튼 만들기 */
.program_list li .btn_more{
    padding:10px 0 20px;
    text-align: center;
    font-size: 12px;
}
.program_list li .btn_more a{
    display: inline-block;
    padding:5px 7px;
    background-color: #f3a950;
    color:#fff;
    border-radius: 3px;
}
/* -------------------공지사항 프로그램 페이지 (program.html) 끝------------------- */
/*------------ 태블릿 반응형 시작 ------------*/
@media screen and (max-width:1065px) and (min-width:801px){
    .box_inner{ width:100%; }
    header .header_area h1{ padding-left: 20px; }
    /* width가 커서 내려가 있던 메뉴들을 크기 줄이면서 위로 올려주기 */
    .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 a{ padding:20px; }

    /* 전체 아래쪽 여백 */
    #container{ padding-bottom: 20px; }
    /* 인기 장소 위치조정 */
    .about_area .place_list { box-sizing: border-box; padding:0 20px; }
    /* 상담, 공지 부분 조정 */
    .appbbs_area .appbbs_box{ box-sizing: border-box; padding:0 20px; }
    /* 카카오, 전화상담 글자 크기 */
    .appbbs_area .appbbs_box .app_line a{ font-size: 21px; }

    /* 푸터 위치조정 */
    footer .foot_area{ box-sizing: border-box; padding-left: 20px; }
    footer .foot_area .snslink li{ margin-left: 15px; }

    /* top버튼 위치와 크기 조정 */
    .quick_area .quick_list{ display:none; }
    .to_top{
        position: fixed;
        right:20px;
        bottom:115px;
        text-align: center;
        background: none;
        z-index: 100;
    }
    .to_top a{
        display: block;
        width:45px;
        height:45px;
        border:none;
        background:url("../images/ico_totop_mo.png") no-repeat center;
        background-size: 45px;
    }

    /* 회원가입 반응형 */
    .appForm .app_list li .tit_lbl{ width:21%; }
    .appForm .app_list li .app_content{ width:79%; }

    /* 개인 정보 수정 */
    .regForm .reg_list li .tit_lbl{ width:21%; }
    .regForm .reg_list li .reg_content{ width:79%; padding-left: 30px; }
}
/*------------ 태블릿 반응형 끝 ------------*/
/*------------ 일반 폰 반응형 시작 ------------*/
@media screen and (max-width:800px) {
    .box_inner{ width:100%; }
    /* 헤더 크기 조정 */
    header{
        height:90px;
        text-align: center;
        z-index: 200;
        background-color: rgba(0,0,0,0.5);
    }  
    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 > .openMOgnb{
        display: block;
        position: absolute;
        left:15px;
        top:35px;
        width:23px;
        height:16px;
    }
    /* 줄 세개 긋기 */
    header > .header_area > .openMOgnb span{
        display: block;
        box-sizing: border-box;
        background-color: #fff;
        width:25px;
        height:3px;
        margin-bottom: 4px;
        border-radius: 10px;
    }
    /* 아래 두개 작게 만들고 */
    header > .header_area > .openMOgnb span + span{ width:17px; }
    /* 마지막꺼는 다시 키우기 */
    header > .header_area > .openMOgnb span:last-child{
        width:25px;
        margin-bottom: 0;
    }
    /* 모바일 메뉴 형태로 바꿔주기 */
    .header_cont{
        float:none;
        width:100%;
        background-color: #31353d;
        display: none;
    }
    /* 로그인 회원가입 왼쪽으로 */
    .header_cont .util{ padding:20px; }
    .header_cont .util li { float:left; }
    .header_cont .util li:first-child::after{
        content:"|";
        display: inline-block;
        padding:0 10px;
        font-size: 10px;
        color:#a2a3a3;
        position: relative;
        top:-1px;
    }
    /* 서브메뉴들 */
    .header_cont .util li a{ font-size: 16px; color:#fff; }

    /* 닫기버튼 오른쪽 위에 띄우기 */
    .header_cont .closePop{
        display: block; position: absolute;
        right:0;top:15px;
    }
    .header_cont .closePop a{
        display: block;
        width:60px;
        height:60px;
        text-indent: -9999px;
        font-size: 0;
        overflow: hidden;
        background:url("../images/btn_closeMenu.png") no-repeat;
        background-size: 60px;
    }
    /* 서브메뉴들 상세설정(색상, 아이콘, 박스 테두리, ..) */
    .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;
        border-right: 1px solid #83868b;
    }
    .header_cont .gnb li a{
        display: block;
        padding:0 0 0 65px;
        height:60px;
        line-height: 60px;
        background: url("../images/ico_gnb01.png") no-repeat 10px center;
        background-size: 49px;
        font-size: 16px;
        color:#fff;
    }
    .header_cont .gnb li + li a{
        background-image: url("../images/ico_gnb02.png");
    }
    .header_cont .gnb li + li + li a{
        background-image: url("../images/ico_gnb03.png");
    }
    .header_cont .gnb li + li + li + li a{
        background-image: url("../images/ico_gnb04.png");
    }
    /* PC롤링 숨기고 모바일 롤링 띄워주기 */
    .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;
        bottom:20px;
        font-size:0;
    }
    #container{
        position: relative;
        width:100%;
        padding-bottom: 30px;
    }
    /* "다시 찾는 인기 여행지 TOP 3" 크기, 위치 조정 */
    .about_area h2{
        padding:27px 0 25px;
        font-size: 20px;
    }
    /* 장소들 밑으로 내리기 */
    .about_area h2 b{
        display: block;
        padding-top:10px;
    }
    .about_area .about_box{
        background-color: #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;
    }
    /* VIEW 버튼 */
    .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;}

    footer .foot_area{ box-sizing: border-box; padding:0 20px 120px;}
    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:#787878; }
    /* / 없애고 각 내용들 한줄에 하나씩 배치 */
    footer .gubun{ display: none; }
    footer .br_line{display: block;}
    
    /* SNS 링크들 배치 바꾸기 */
    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; }

    /* 퀵메뉴 아래에 배치 */
    .quick_area .quick_list{position: fixed; left:0; bottom:0; width:100%;}
    .quick_area .quick_list li {
        width:31%;
        float:left;
        text-align: left;
        background-color: #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;
        background-color: #76787e;
        position:absolute;
        right:31%;
        top:50%;
        margin-top:-8px;
    }
    .quick_area .quick_list li:first-child::before{
        content:"";
        display:inline-block;
        width:1px;
        height:16px;
        background-color: #76787e;
        position: absolute;
        left:32%;
        top:50%;
        margin-top: -8px;
    }
    .quick_area .quick_list a p { display: none; }
    .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("../images/ico_phone_mobtm.png") no-repeat 20px center;
        background-size: 20px;
        color:#fff;
        letter-spacing: -1;
    }
    .quick_area .quick_list li + li a h3{
        background:url("../images/ico_katalk_mobtm.png") no-repeat 20px center;
        background-size: 20px;
    }
    .quick_area .quick_list li + li + li a h3{
        background:url("../images/ico_contact_mobtm.png") no-repeat 20px center;
        background-size: 20px;
    }
    .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:none;
        background:url("../images/ico_totop_mo.png") no-repeat center;
        background-size: 45px;
    }
    /* ----- 모바일 서브 페이지 공통 ----- */
    .location_area h2.tit_page{ padding:140px 0 0 0; margin:0 45px; }
    .location_area p.location{ display: none; }
    .location_area ul.page_menu{ display: block; padding:10px 0 0 45px; }  
    .location_area ul.page_menu li a{
        display: block;
        color:#ddd;
        margin-right: 45px;
        font-size:15px;
    }
    .location_area ul.page_menu li a.on{
        border-bottom: 1px solid #fff;
        color:#fff;
    }
    .bodytext_area{
        box-sizing: border-box;
        padding:33px 20px 0;
    }
    .btn_basecolor{
        display:inline-block;
        width:100%;
        text-align: center;
        height:50px;
        line-height: 50px;
        font-size: 20px;
        vertical-align: middle;
        background: #384d75;
        color:#fff !important;
        font-weight: bold;
    }
    .btn_bbs{
        display: inline-block;
        width:100%;
        text-align: center;
        height:35px;
        line-height: 35px;
        font-size: 14px;
        vertical-align: middle;
        background: #384d75;
        color:#fff !important;
        font-weight: bold;
    }

    /* ----- 로그인 페이지 ----- */
    .login_wrap{ width:100%; margin:0 auto; padding-top: 75px; }

    /* ----- 회원가입 페이지 ----- */
    .location_area.member{
        height:260px;
        background:url("../images/img_top5.jpg") no-repeat center bottom / cover;
    }
    .appForm{ margin:20px auto; }
    .appForm .pilsoo_item::before{ top:1px; }
    .appForm .app_list li { position: relative; padding:10px 0; border-bottom: 1px solid #ccc; }
    .appForm .app_list li:last-child{
        border-bottom: none;
        padding-bottom: 10px;
    }
    .appForm .app_list li .tit_lbl{
        float:none;
        width:auto;
        line-height: 30px;
    }
    .appForm .app_list li .app_content{
        float:none;
        width:auto;
    }
    .appForm .app_list li .app_content *{
        vertical-align: middle;
    }
    .appForm .app_list li .app_content input[type="text"],
    .appForm .app_list li .app_content input[type="password"],
    .appForm .app_list li .app_content input[type="tel"]{
        border:none;
        width:100% !important;
    }
    .appForm .app_list li .app_content.email_area{
        padding: 5px 0 0;
        font-size: 0;
    }
    .appForm .app_list li .app_content.email_area input[type="text"]{
        border:1px solid #ccc;
        width:45% !important;
        font-size: 14px;
    }
    .appForm .app_list li .app_content.email_area .ico_space{
        width:10% !important;
        text-align: center;
        font-size: 14px;        
    }
    /* 이메일 선택 select 전체크기로 바꿔주긴 */
    .appForm .app_list li .select_common{
        width:100%;
        height:45px;
        margin-top: 10px;
    }
    .appForm .app_list li .select_common select{
        width:100%;
        height:45px;
    }
    .appForm .app_list li .app_content.radio_area{
        padding-left: 20px;
        height:40px;
        padding-top: 10px;
    }
    .appForm .app_list li .app_content.checkbox_area{
        padding-left:20px;
        height:40px;
        padding-top:10px;
    }
    .appForm .app_list li textarea{ height:130px; }

    /* ----- 내 정보 수정 페이지 ----- */
    .regForm{
        width: 100%;
        margin:0 auto;
    }
    .regForm .reg_list{
        padding:10px 0 0;
        background:none;
    }
    .regForm .reg_list li{
        position: relative;
        min-height: 50px;
        padding:0;
        border-bottom: 1px solid #ccc;
    }
    .regForm .reg_list li .tit_lbl{
        position: relative;
        float:none;
        width:auto;
        box-sizing: border-box;
        padding:10px;
    }
    .regForm .reg_list li .reg_content{
        float:none;
        width:auto;
        box-sizing: border-box;
        padding-left:10px;
        padding-top: 0;
        padding-bottom: 20px;
        font-size: 15px;
    }
    .regForm .reg_list li .reg_content .info_line{
        padding:10px 10px 3px 0;
        line-height: 1.4;
        font-size: 15px;
    }
    .regForm .reg_list li .reg_content *{
        vertical-align: middle;
    }
    .regForm .reg_list li .reg_content label{
        vertical-align: middle;
    }
    /* ----- 공지사항 리스트 ----- */
    .location_area.customer {
        height:260px;
        background:url("../images/img_top2.jpg") no-repeat center bottom / cover;
    }
    .bbsListTbl{
        width:100%;
        border-top:2px solid #384d75;
    }
    .bbsListTbl th, .bbsListTbl td{
        padding:10px;
        box-sizing: border-box;
        height: 45px;
    }
    /* 번호, 조회수 열은 없애주기 */
    .bbsListTbl th:nth-child(1), .bbsListTbl th:nth-child(3),
    .bbsListTbl td:nth-child(1), .bbsListTbl td:nth-child(3){
        display: none;
    }
    .bbsListTbl th:nth-child(2){ width:70%; }
    .bbsListTbl th:nth-child(4){ width:30%; }

    .bbsListTbl td{ line-height: 1.3; border-bottom: 1px solid #ccc; }

    /* ----- 공지사항 상세보기 ----- */
    .near_list{ display: none; }

    /* 프로그램 소개 */
    .location_area.package{
        height:260px;
        background:url("../images/img_top3.jpg") no-repeat center bottom / cover;
    }
    /* 헤더와 전체내용 사이 여백 줄이기 */
    .bodytext_area.place_area{ padding:33px 0 0; }
    /* 내용들 양쪽 여백 줄이기 */
    .program_list{ padding:0 20px; }
    /* 내용들 한줄에 하나씩 보도록 하고, 사이선 긋기 */
    .program_list li{
        float:none;
        width:100%;
        margin:0;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
        padding:30px 0;
    }
    .program_list li:first-child{
        border-top: none;
        padding-top:0;
    }
    .program_list li h3{ padding:20px 0 0; text-align: center; }
    .program_list li .subttl{ padding:15px 0 0; text-align: center; font-size:18px; }
    /* 숨겨놨던 내용들 다 보여주기 */
    .program_list li .program_content p .subtxt{ display: inline; }
    /* 더보기 버튼 없애기 */
    .program_list li .btn_more{ display: none; }
}

/*------------ 일반 폰 반응형 끝 ------------*/