@charset "utf-8";
/* Mobile */
.main_container{position:relative;box-sizing:border-box;}

/*공통_전체*/  
.section{position:relative;text-align:center;}
.section h2{font-family:'GmarketSans';background:none;margin:0;padding:0;display:inline-block;font-weight:100;color:#fff;opacity:0;transition:all .4s ease;transform:translateY(-20%);line-height:1.2em;font-size:2.3rem; word-break: keep-all;}
.section h2 span{color:#fbaf5d;}
.section h2 strong{color:#fff568;font-weight:300;}
.section.on h2{opacity:1;transform:translateY(0);}
.section > div{min-height: 450px;width:100%;height:100%;background-size: cover;overflow: hidden;}

.q_link{display:none;}

/* 메인비주얼 */
.new_visual h2{margin-top: 140px;}
.new_visual ul{position: relative;display: flex;flex-wrap: wrap;justify-content: space-evenly;margin: 20px 20px 0;}
.new_visual ul li{width: 49%;margin: 0 0 10px;}
.new_visual ul li a{display: inline-block;width: 100%;height: 60px;padding-top: 23px;font-size: 15px;color: #fff;line-height: 1.5em;vertical-align: text-bottom; border: 1px #fff solid;}
.new_visual ul li a:hover,.new_visual ul li a:focus{border:1px #fff568 solid; color:#fff568;}

.m_visual{position: relative; background: #000;}
.m_visual .view_img{min-height: 500px;background-size: cover;background-position: 50% 0;}
.m_visual .view_img:before{content:'';display:block;position:fixed;width:100%;height:100%;background: rgba(0,0,0,0.8);}
.m_visual .visual_thum{position: absolute;bottom: 30px;left: 0;right: 0;z-index: 0;}
.m_visual .visual_thum h2{display: none;}
.m_visual .visual_thum ul{position: relative; display: flex; flex-wrap: wrap; margin: 0 20px; border: 1px #fff solid; background: rgba(0,0,0,.5);}
.m_visual .visual_thum ul::after{content: ''; display: block; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #fff;}
.m_visual .visual_thum ul li{width: 50%;}
.m_visual .visual_thum ul li a{display: block;height: 50px;padding-top: 15px;font-size: 15px;color: #fff;}
.m_visual .view_img .btn{position: absolute;bottom: 210px;right:0;left:0;opacity: 1;}
.m_visual .view_img .btn a{display: inline-block;width: 280px;padding:10px 0;margin: 4px auto;border: 1px #fff solid;}
.m_visual .view_img .btn a:hover{border:1px #fff568 solid;}
.m_visual .view_img .btn strong{display:block;color: #fff;font-size: 20px;word-break: keep-all;}
.m_visual .view_img .btn span{display:block;color: #111;background: #fff568;width:80%;margin: 3px auto 0;padding: 2px 0;border-radius:5px;font-weight: 600;}

/* 예약안내 */
.inf{padding: 70px 20px;}
.inf h2{margin-bottom: 30px;}
.inf h3{margin-bottom: 20px; color: #fff; text-align: left; font-size: 24px;}
.inf h3::before{content: ''; display: inline-block; width: 30px; height: 32px; margin-right: 10px; background: url('/images/03_citytour/main/m_icon.png') no-repeat; vertical-align: middle;}
.inf h3.r1::before{background-position: -3px 0;}
.inf h3.r2::before{background-position: -60px 0;}
.inf ul{margin:0 0 40px 0; padding: 0 0 40px 40px; text-align: left; border-bottom: 1px rgba(255,255,255,.2) solid;}
.inf ul:last-child{border: none; padding-bottom: 0; margin-bottom: 0;}
.inf ul li{color: #fff; font-weight: 100; font-size: 18px;}
.inf ul li strong{display: inline-block; margin-right: 6px; font-weight: 600; font-size: 24px; color: #fbaf5d;}
.inf ul li a{display: inline-block; height: 25px; padding: 5px 10px; color: #fff; background: #000; font-size: 14px; border-radius: 5px;}
.lnk{padding: 40px 20px; background: #1e293d;}
.lnk ul li a{position: relative; display: block; height: 100px; margin-bottom: 16px; padding: 40px 20px; text-align: left; box-shadow: 10px 10px 10px #17202f; border-radius: 5px;}
.lnk ul li a::before{content: ''; position: absolute; display: block; width: 80px; height: 80px; background: url('/images/03_citytour/main/m_ilu.png') no-repeat; background-size: 80px;}
.lnk ul li.i1 a{background: #c5dfff; color: #1e293d;}
.lnk ul li.i2 a{background: #c5ffed; color: #0e5740; text-align: right;}
.lnk ul li.i3 a{background: #ebffc5; color: #3a540a; margin-bottom: 0;}
.lnk ul li.i1 a::before{top: 20px; right: 12px; background-position: 50% 0;}
.lnk ul li.i2 a::before{top: 20px; left: 12px; background-position: 50% -88px;}
.lnk ul li.i3 a::before{top: 20px; right: 12px; background-position: 50% -175px;}

/* 추천코스 */
.con3>div{background-position: top center;}
.cs_tab{padding: 60px 0;}
.cs_tab ul{margin: 0 20px;}
.cs_tab ul a{position: relative; display: block; height: 70px; margin: 10px 0; padding: 26px 30px 0; color: #fff; font-size: 18px; font-weight: 100; border-radius: 5px; border: 1px #fff solid; text-align: left;}
.cs_tab ul li.on a,.cs_tab li a:hover,.cs_tab li a:focus{background: #fbaf5d; border: 1px #fbaf5d solid; color: #2d1904; font-weight: 400;}
.cs_tab ul li.on a::after{content: ''; position: absolute; top: 22px; right: 30px; display: block; width: 24px; height: 24px; background: url('/images/03_citytour/main/m_icon.png') no-repeat; background-position: -122px -58px;}
.cs_tab p{display: none;}
.cs_txt{padding: 55px 20px; background: #394c72;}
.cs_txt .cs{position: relative; z-index: 0;}
.cs_txt .cs::after{content: ''; position: absolute; top: 0;  display: block; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 30px 5px 30px 30px; border: 1px #fff solid; z-index: -1;}
.cs_txt .cs p{margin-bottom: 30px;}
.cs_txt .cs img{width: 100%; border-radius: 30px 5px 30px 30px;}
.cs_txt .cs div{padding: 0 20px; text-align: left;}
.cs_txt .cs div p{margin: 0 0 30px 35px; color: #fff; font-size: 14px; word-break: keep-all;}
.cs_txt .cs h3{color: #fbaf5d; font-weight: 600; font-size: 19px;}
.cs_txt .cs h3::before{content: ''; display: inline-block; width: 30px; height: 30px; margin-right: 5px; background: url('/images/03_citytour/main/m_icon.png') no-repeat; vertical-align: middle;}
.cs_txt .cs h3.c1::before{background-position: 0 -55px;}
.cs_txt .cs h3.c2::before{background-position: -60px -55px;}
.cs_txt .cs a {display: block; max-width: 220px; height: 50px; margin: 0 auto; padding-top: 18px; text-align: center; background: #fff; color: #394c72; border-radius: 40px 40px 0 0; font-size: 18px;}

/* Tablet */
@media all and (min-width:768px) {
/*공통_전체*/   
.section{height:100vh;}

.new_visual h2{margin-top: 30%;font-size:46px}
.new_visual ul li{width: 32.33%;}
.new_visual ul li a{height: 100px;padding-top: 40px;font-size:18px;}
    
.m_visual .view_img{height: 100vh;}
.m_visual .visual_thum h2{display: block;position: absolute;top: -280px;left: 0;right: 0;margin: 0 auto;font-size: 40px;font-weight: 400;}
.m_visual .visual_thum ul{border: 0; align-items: flex-end; background: none;}
.m_visual .visual_thum ul::before,.m_visual .visual_thum ul::after{display: none;}
.m_visual .visual_thum ul li{background: #000; width:33.33%;}
.m_visual .visual_thum ul li a{position: relative;height: 160px;padding: 0;z-index: 0;font-size: 18px;}
.m_visual .visual_thum ul li a::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; opacity: 0.7; z-index: -1;}
.m_visual .visual_thum ul li.thum01 a{background: url('/upload_data/user_file/03_citytour/content/new_b1_1.jpg') no-repeat center; background-size: cover;}
.m_visual .visual_thum ul li.thum02 a{background: url('/upload_data/user_file/03_citytour/content/new_b1_2.jpg') no-repeat center; background-size: cover;}
.m_visual .visual_thum ul li.thum03 a{background: url('/upload_data/user_file/03_citytour/content/new_b1_3.jpg') no-repeat center; background-size: cover;}
.m_visual .visual_thum ul li.thum04 a{background: url('/upload_data/user_file/03_citytour/content/new_b1_4.jpg') no-repeat center; background-size: cover;}
.m_visual .visual_thum ul li.thum05 a{background: url('/upload_data/user_file/03_citytour/content/new_b1_5.jpg') no-repeat center; background-size: cover;}
.m_visual .visual_thum ul li.thum06 a{background: url('/upload_data/user_file/03_citytour/content/new_b1_6.jpg') no-repeat center; background-size: cover;}
.m_visual .visual_thum ul li a span{display: block; position: absolute;  top: 20px; left: 0; right: 0; height: calc(100% - 40px); margin: 0 20px; padding-top: 50px; border: 1px #fff solid; transform: translateY(120%); opacity: 0;}
.m_visual .visual_thum ul li.on a span{padding-top: 60px;}
.m_visual .visual_thum ul li.on a span,
.m_visual .visual_thum ul li a:hover span{transform: translateY(0); opacity: 1; transition: 0.5s ease-in-out;}

.m_visual .view_img .btn{bottom: 410px;}
.m_visual .view_img .btn a{width: 500px;padding: 30px 0;}
.m_visual .view_img .btn strong{font-size:26px;}
.m_visual .view_img .btn span{width: 50%;padding: 12px 0;margin: 14px auto 0;}



.con2>div>div{position: relative; display: flex; flex-wrap: wrap; height:100vh;}
.con2>div>div::before{content: ''; position: absolute; right: 0; display: block; width: 45%; height: 100vh; background: #1e293d;}
.inf{width: 55%; padding: 0 20px; align-self: center;}
.inf h2{margin-bottom: 70px;}
.inf ul li strong{font-size: 30px;}
.lnk{width: 45%; padding: 0 20px; align-self: center; z-index: 0; background: none;}
.lnk ul li a{position: relative; height: 180px; margin-bottom: 30px;  padding: 110px 20px 0; font-size: 20px; text-align: center !important;}
.lnk ul li a::before{top: 30px !important; left: 0; right: 0; margin: 0 auto;}

.con3>div>div{display: flex; flex-wrap: wrap; height:100vh;}
.cs_tab{width: 55%; padding: 20% 20px 0;}
.cs_tab p{display: inline-block; color: #fff; font-weight: 100; word-break: keep-all;  line-height: 1.5em;}
.cs_tab p strong{display: inline-block; vertical-align: top; font-weight: 400; line-height: 1.5em;}
.cs_txt{width: 45%; padding: 15% 20px 0;}

}

/* Desktop */
@media all and (min-width:1023px) {
/* 공통_전체 */
.section h2{font-size: 3.8rem;}
.lnk ul li a{font-size: 24px;}

.m_visual .visual_thum h2{top: -345px;font-size: 60px;}
.m_visual .visual_thum{width: 1000px; margin: 0 auto; bottom: 100px;}
.m_visual .visual_thum ul{margin: 0;}
.m_visual .visual_thum ul li{width: 16.66%;}
.m_visual .visual_thum ul li.on a{height: 180px;}

.m_visual .view_img .btn{bottom: 380px;}
.m_visual .view_img strong{}
}

/* Desktop */
@media all and (min-width:1400px) {
    
.new_visual h2{margin-top:20%;}
.new_visual ul{width:1400px;margin: 40px auto;}
.new_visual ul li{width:15.66%;margin: 0;}  
.new_visual ul li a{height: 120px;padding-top: 48px;font-size: 22px;}  
    
.m_visual .visual_thum{width:1400px;}

.con2>div>div{width: 1400px; margin: 0 auto;}
.con2>div>div::before{right: -40%; width: 100%;}
.inf{width: 560px; padding: 0 80px 0 0; text-align: left;}
.lnk{width: 840px; padding: 0 0 0 220px;}
.lnk ul li a{padding: 74px 50px 0; text-align: left !important;}
.lnk ul li.i2 a{text-align: right !important;}
.lnk ul li a::before{top: -10px !important; left: auto; right: auto; width: 240px; height: 190px; background-size: auto;}
.lnk ul li.i1 a::before{background-position: -40px 0;}
.lnk ul li.i2 a::before{background-position: 50% -260px;}
.lnk ul li.i3 a::before{background-position: 50% -503px;}

.con3>div>div{width: 1400px; margin: 0 auto;}
.con3>div>div{display: block; padding: 0 70px;}
.con3>div::before{content: ''; position: absolute; bottom: 0; right: 0; display: block; width: 100%; height: 500px; background: #394c72;}
.cs_tab{width: 100%; padding: 130px 0 42px;}
.cs_tab h2{margin-bottom: 40px;}
.cs_tab ul{display: flex; justify-content: space-between; width: 980px; margin: 0 auto 30px;}
.cs_tab ul li{width: 300px;}
.cs_tab ul a{height: 80px; margin: 0; font-size: 24px;}
.cs_tab ul li.on a::after{top: 26px; right: 30px;}
.cs_tab p{font-size: 24px;}
.cs_tab p strong{font-size: 24px;}
.cs_txt{width: 100%; padding: 0; margin-top: 60px;}
.cs_txt .cs{overflow: hidden;}
.cs_txt .cs::after{top: auto; bottom: 0; right: 0; width: 880px; height: 300px; box-sizing: border-box; border-radius: 40px;}
.cs_txt .cs>p{float: left; width: 440px; height: 300px; margin-bottom: 0;}
.cs_txt .cs img{height: 300px;}
.cs_txt .cs h3{font-size: 24px;}
.cs_txt .cs div{float: right; width: 775px; margin: 110px 0 0 0; padding: 0;}
.cs_txt .cs div p{margin: 0 0 0 35px; font-size: 18px;}
.cs_txt .cs div p:first-of-type{margin: 0 0 60px 35px;}
.cs_txt .cs a{height: 75px; margin: 0 0 0 auto; padding-top: 30px; border-radius: 40px 0 40px;}

/* 퀵링크 */
.q_link{display: block; position: fixed; top: 40%; right: 0; z-index: 1; box-shadow: -5px 5px 20px #293752;}
.q_link .popup>a{display: block; height: 90px; padding-top: 20px; background: #c5dfff; color: #394c72; text-align: center;}
.q_link .popup>a::before{content: ''; display: block; width: 25px; height: 30px; margin: 0 auto 6px; background: url('/images/03_citytour/main/m_icon.png') no-repeat; background-position: -1px -121px; }
.q_link .popup>a>span{display: none;}
.q_link .popup .popup_wrap{display: none; position: fixed; top: 10%; left: 0; right: 0; width: 80%; margin: 0 auto; z-index: 0; text-align: center;}
.q_link .popup .popup_wrap.on{display: block;}
.q_link .popup .popup_wrap::before{content: ''; position: fixed; top: 0;bottom: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8); z-index: -1;}
.q_link .popup .popup_wrap h2{margin-bottom: 40px; color: #fff; font-size: 40px;}
.q_link .popup .popup_wrap h2 span{color: #ffef41;}
.q_link .popup .popup_wrap .img{height: 600px; overflow-y: auto;}
.q_link .popup .popup_wrap .img div{display:inline-block;}
.q_link .popup .popup_wrap img{display: inline-block; width: 500px; height: 500px; margin: 0 10px 10px; border-radius: 20px;}
.q_link .popup .popup_wrap .close{display: inline-block;width: 40px;height: 40px;background: url('/images/15_night/main/close.png') no-repeat;font-size: 0;}
.q_link ul li{padding: 0 10px; text-align: center; background: #394c72;}
.q_link ul li a{display: block; padding: 10px 0; font-size: 14px; color: #c5dfff;}
.q_link ul li:nth-child(1) a{border-bottom: 1px #697690 dashed;}
.q_link .top_lnk a{display: block; padding: 12px 26px; height: 40px; color: #c5dfff; background: #1e293d; font-size: 14px;}
.q_link .top_lnk a::after{content: ''; display: inline-block; width: 10px; height: 8px; margin-left: 6px; background: url('/images/03_citytour/main/m_icon.png') no-repeat; background-position: -134px -133px;}

}




.sub_container.sub1:after{background:url('/images/03_citytour/common/sub1.gif')no-repeat center;}
.sub_container.sub2:after{background:url('/images/03_citytour/common/sub2.gif')no-repeat center;}
.sub_container.sub3:after{background:url('/images/03_citytour/common/sub3.gif')no-repeat center;}
.sub_container.sub4:after{background:url('/images/03_citytour/common/sub4.gif')no-repeat center;}
.sub_container.sub5:after{background:url('/images/03_citytour/common/sub5.gif')no-repeat center;}

/*레이아웃 수정*/
.m_logo a{background:url("/images/03_citytour/common/logo.png") no-repeat 0 0 / 200px;padding-top:38px;}
.gnb li a{line-height:1.2;}
.gnb .sitemap{position:relative; width:37px;height:25px;overflow:hidden;background:url("/images/02_tour/common/gnb.png") no-repeat 10px 0;font-size:0;padding:0;}
header.fixed .gnb .sitemap{background-position:10px -31px}

.foot .f_i{color:#fff;border:solid 1px rgba(255,255,255,.25);margin-top:30px;}
.f_i ul{display:block}
.f_i > ul > li{width:100%;padding:25px;}
.f_i > ul > li:first-child{border-bottom:solid 1px rgba(255,255,255,.1);}
.f_i li strong{font-size:17px;font-weight:500;}
.f_i li ul{color:#e1e1e1;font-weight:100;font-size:.9rem;}
.f_i li ul li{position:relative;line-height:1.5;}
.f_i li ul li:before{display:inline-block;content:'-';color:#c2c2c2}
.f_i li ul li a{color:#fff200;padding:0;display:inline-block;}
.f_i li ul li a:after{display:inline-block;content:'';width:18px;height:18px;background:url("/images/03_citytour/common/footer.png")no-repeat;vertical-align:middle;margin-left:5px;}
.f_i li ul li a.call:after{background-position:0 0;}
.f_i li ul li a.copy:after{background-position:0 -30px;}

@media all and (min-width:768px) {
.m_logo a{background-size:auto;}
header.fixed .m_logo a{background-position:0 -43px;}
    
footer{padding-top:35px;}
footer:before{display:none;}
.foot .f_i{padding:0 !important;}
.f_i > ul{display:flex;justify-content:space-around;}
.f_i > ul > li{width:50%;padding:25px 30px;}
}

/* Desktop */
@media (min-width: 1440px) {
header{height:85px;}
.m_logo{width:235px;}   
.gnb li a{font-size:14px;padding-top:12px;}
.head,
.head nav .menu{display:block;}
.head{padding:0;position: static;width: 1400px;margin: 0 auto;padding: 0 411px 0 250px;}
.head.on nav{position:inherit;height:auto;background:none;}
.head nav .menu{width:auto;padding:0;}
header.fixed:after{position:absolute;top:0;width:100%;z-index:-1;right:0;left:0;}
header.fixed .menu>ul>li>a{color:#2a2a2a;text-shadow:none;}
header.fixed .gnb{padding:0}
header.fixed .g_sitelist>a{color:#2a2a2a;}
header{display:flex;justify-content:space-between;flex-wrap:wrap;height:auto;}
.menu>ul>li{flex:auto;width:auto;position:static;margin:0;}
.menu>ul>li:hover>a,
.menu>ul>li:focus>a,
.menu>ul>li:active>a{color:#fff;}
.menu>ul>li>a{color:#fff;font-weight:300;font-size:18px;border:none;margin:0;padding:30px 0 10px 0;text-shadow:1px 1px 8px rgba(0,0,0,.5);margin-bottom:20px;text-align:center;}
.menu>ul>li>a:before, 
.menu>ul>li.on>a:before{background:#f15a40;height:3px;bottom:-18px;}
.menu div>ul>li>a:before{display:none;}
.menu .depth_box li:hover a{border:none;background:#f15a40; color:#fff}
.menu .depth_box ul > li > a{padding:13px 36px;margin:0;border:solid 1px #e7e7e7;}
.menu .depth_box{width:100%;left:0;min-width:1400px;top:85px;position:absolute;background:#fff url('/images/03_citytour/common/menu_bg.png')no-repeat left bottom;border-top:solid 1px rgba(0,0,0,.1);}
.menu .depth_boxcon{margin:0 auto;width:1400px;text-align:center;padding:40px 0;}
.menu .depth_boxcon li{display:inline-block;margin:6px 3px;}
.new_win{background:url('/images/02_tour/common/btn_new2.png') no-repeat;}
.head nav div button{display:none;}
footer{padding:45px 0 70px 0;}
.foot .f_i{position:absolute;right:0;top:0;width:579px;margin:0;}

.g_sitelist>a{font-size:14px;padding-top: 12px;}
}

/* Desktop */
@media all and (min-width:1600px) {

.head{/* margin: 0 0 0 25%; */} 
}