[css]tourlist project

/* 

    웹 접근성을 위한 skipnavi 

    https://nuli.navercorp.com/community/article/1132804 

*/

.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;  text-align: center;  text-indent: 0px;  font-size: 12px;  font-weight: bold;  background-color: #f2f2f2;

}

 

/* 공통 부분 */

* { margin: 0;  padding: 0; }

 

h1, h2, h3, h4, h5, h6 {

    font-weight: normal;  font-size: inherit;

}

 

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

 

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

 

a { text-decoration: none; }

a:link { color: #444; }

a:visited { color: #444; }

a:hover { color: #444; }

a:focus { color: #444; }

 

body { font-family: 'Nanum Myeongjo', serif; height: 100%; font-size: 16px; letter-spacing: -1px; color: #444; white-space: normal; word-wrap: break-word; line-height: 1; }

.box_inner { width: 1050px; margin: 0 auto; }

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: 45px 0 0; }

header > .header_area > h1 > a { display: block;  width: 270px;  height: 71px;  text-indent: -9999px;  overflow: hidden;  background: url(../images/logo.png) no-repeat; }  /* no-repeat 은 단일 이미지를 의미한다 */  

 

.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; }

.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; } */

.gnb_depth { position: absolute;  left: 0;  top: 113px;  width: 100%;  background: rgba(250, 100, 0, 0.85);  z-index: 100;  display: none;}

.gnb_depth .submenu_list { width: 1050px;  margin: 0 auto;  text-align: left; }

.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: 0px; }

 

#container { padding-bottom: 70px; }

 

.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; }  /* no-repeat center 는 단일 이미지 + 중앙 배치를 의미한다 */

.viewImgList li.imglist1 { position: absolute; width: 100%; top: 0; left: 0; z-index: 10; background: url(../images/mainslide02.jpg) no-repeat center; }

.viewImgList li.imglist2 { position: absolute; width: 100%; top: 0; left: 0; z-index: 10; background: url(../images/mainslide03.jpg) no-repeat center; }

 

.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: top; }

 

.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 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: #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%; }

.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(../images/ico_bullet.png) no-repeat 0 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

 

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(../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_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: -2px;}

.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; }

 

.to_top { text-align: center; background-color: #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(../images/ico_totop.png) no-repeat center; background-size: 50%; }

/*

    로그인(login.html)

*/

.login_wrap { width: 508px; margin: 50px 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; }

.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: #ffea26 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; }

.switch { position: relative; display: inline-block; width: 35px; height: 22px; margin: 0; padding: 0; border-radius: 16px; background-color: #e5e5e5; vertical-align: top; cursor:pointer; z-index: 0; appearance: none;}

/*

    appearance

    - 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현할 때 사용

    - 네이티브로 지원하는 모양을 해제하거나 추가할 때 사용

    - appearance: none; 원래 쓰이는 속성을 없앰

*/

.switch::before { content:""; position: absolute; left: 1px; top: 1px; width: 33px; height: 20px; border-radius: 15px; background-color: #fff; z-index: 1; }

.switch::after { content:""; position: absolute; left: 1px; top: 1px; width: 19px; height: 19px; border-radius: 20px; background: #fff; z-index: 2; box-shadow: 0 2px 5px #999; }

/* 

    sub page 공통 

*/

.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; }

 

.location_area h2.tit_page { padding: 250px 0 0 0; margin: 0 50px; border-bottom: 1px solid #ccc; font: 30px "Arial Narrow"; color:#fff; letter-spacing: 3px; }

.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; }

 

.bodytext_area { box-sizing: border-box; padding: 55px 50px 0; }