@charset "utf-8"; /****************************************/ /* Name: 부산광역시 중구문화관광 /* PART: CONTENTS STYLE /* Version: 1.0 / day: 2017-10-16 /* Author: imtec /****************************************/ /* ================================================================================ 메인콘텐츠 ================================================================================ */ /* 슬라이드 기본설정 */ .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; /* Fix of Webkit flickering */ z-index: 1; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } /* Preloader */ .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 0; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } .fp-section.fp-table, .fp-slide.fp-table { display: table; table-layout:fixed; width: 100%; } .fp-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell{height: auto !important;} .mConMenu{position:fixed;top:50px;left:0;width:100%;text-align:center;z-index:20} .mConMenu li{display:inline-block;margin:0 15px;text-align:center} .mConMenu li a{display:block;font-size:16px;color:#fff;} .mConMenu li span{position:relative;display:inline-block;margin-right:10px;width:45px;height:45px;vertical-align:middle;background:#fff url('/img/tour/com_tour.png') no-repeat;border-radius:50%;transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-o-transition: all 0.3s;} .mConMenu li span::after{position:absolute;left:50%;bottom:2px;margin-left:-5px;width:10px;height:10px;content:'';opacity:0;background:#dc3400;-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-o-transition: all 0.3s;z-index:-1} .mConMenu li .ic1{background-position: 0 -60px} .mConMenu li .ic2{background-position: 0 -105px} .mConMenu li .ic3{background-position: 0 -150px} .mConMenu li.active span{background-color:#dc3400} .mConMenu li.active span::after{bottom:-4px;opacity:1} .mConMenu li.active .ic1{background-position: -45px -60px} .mConMenu li.active .ic2{background-position: -45px -105px} .mConMenu li.active .ic3{background-position: -45px -150px} .mConMenu li a:hover{font-weight:normal} .mConMenu li a:hover span{background-color:#dc3400} .mConMenu li a:hover .ic1{background-position: -45px -60px} .mConMenu li a:hover .ic2{background-position: -45px -105px} .mConMenu li a:hover .ic3{background-position: -45px -150px} #conFullPage{position:relative} .section{position:relative;padding-left:200px;width:100%;height:100%;overflow:hidden;background-position:center top;background-size:cover;z-index:1} .section h2{margin-bottom:20px;text-align:center} /* 여기는 중구 */ .mTourPlace{table-layout:fixed;height:100%} .mTourPlace > ul > li{background-position:center top;background-size:cover;background-color:#333;z-index:1} .mTourPlace > ul > li.swiper-slide-active{z-index:2} .mTourPlace ul li::after{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background-position:center center;background-repeat:no-repeat;background-size:cover;background-color:#333;z-index:1} .mTourPlace ul li.bg1::after{background-image: url('/img/tour/m_tour_bg1.jpg')} /* 볼거리 배경이미지 12컷 */ .mTourPlace ul li.bg2::after{background-image: url('/img/tour/m_tour_bg2.jpg')} .mTourPlace ul li.bg3::after{background-image: url('/img/tour/m_tour_bg3.jpg')} .mTourPlace ul li.bg4::after{background-image: url('/img/tour/m_tour_bg4.jpg')} .mTourPlace ul li.bg5::after{background-image: url('/img/tour/m_tour_bg5.jpg')} .mTourPlace ul li.bg6::after{background-image: url('/img/tour/m_tour_bg6.jpg')} .mTourPlace ul li.bg7::after{background-image: url('/img/tour/m_tour_bg7.jpg')} .mTourPlace ul li.bg8::after{background-image: url('/img/tour/m_tour_bg8.jpg')} .mTourPlace ul li.bg9::after{background-image: url('/img/tour/m_tour_bg9.jpg')} .mTourPlace ul li.bg10::after{background-image: url('/img/tour/m_tour_bg10.jpg')} .mTourPlace ul li.bg11::after{background-image: url('/img/tour/m_tour_bg11.jpg')} .mTourPlace ul li.bg12::after{background-image: url('/img/tour/m_tour_bg12.jpg')} .mTourPlace ul li .con{position:relative;margin:0 auto;padding:15% 0;width:1050px;height:590px;color:#fff;z-index:2} .mTourPlace ul li .con .txt{display:block;margin-bottom:10px;font-family:'NanumSquare';font-size:18px;color:#fff700;font-weight:bold} .mTourPlace ul li .con h3{min-height:120px} .mTourPlace ul li .con p{margin:10px 0 45px;font-family:'NanumSquare';} .mTourPlace ul li .con ul::after{display:block;clear:both;content:''} .mTourPlace ul li .con ul li{float:left;margin-right:25px;text-align:center} .mTourPlace ul li .con ul li a{display:block;font-size:16px;color:#fff;font-weight:bold} .mTourPlace ul li .con ul li span{display:block;margin:0 auto 10px;width:80px;height:80px;background:#fff url('/img/tour/com_tour.png') no-repeat;border-radius:50%;transition: all 0.3s} .mTourPlace ul li .con ul li .ic1{background-position:-100px -60px} .mTourPlace ul li .con ul li .ic2{background-position:-180px -60px} .mTourPlace ul li .con ul li .ic3{background-position:-260px -60px} .mTourPlace ul li .con ul li .ic4{background-position:-340px -60px} .mTourPlace ul li .con ul li a:hover span{background-color:rgba(255,255,255,0.6)} .mTourPlace ul li .con .btn{display:inline-block;width:160px;height:48px;line-height:46px;text-align:center} .mTourPlace ul li .con .btn a{display:block;height:100%;font-size:16px;color:#1a4e98;font-weight:bold;background:#fff;transition: all 0.2s ease;} .mTourPlace ul li .con .btn span{display:inline-block;margin-right:10px;width:22px;height:22px;vertical-align:middle;background:url('/img/tour/com_tour.png') no-repeat -420px -195px} .mTourPlace ul li .con .btn a:hover{color:#fff;background:#1a4e98;} .mTourPlace ul li .con .btn a:hover span{background-position:-460px -195px} .mTourPlace ul li .con .btn a:focus{border:3px dashed #000000} /*접근성 */ .mTourPlace .control{position:absolute;top:0;left:50%;margin-left:-410px;padding-top:14.8%;width:820px;z-index:3} .mTourPlace .control button{width:29px;height:29px;text-indent:-9999px;overflow:hidden;background:url('/img/common/com_img.png') no-repeat;border:1px solid #fff;border-radius:50%} .mTourPlace .control button:focus{border:3px dashed #fff900;background-color:#000000} /*접근성 */ .mTourPlace .control .stopSlide{background-position:-217px -268px} .mTourPlace .control .startSlide{background-position:-297px -268px} .bgAni::after{ animation-name: bgAni; animation-duration: 10s; animation-iteration-count:infinite; } @keyframes bgAni{ from{ transform:scale(1.0) } 50%{ transform:scale(1.1) } to{ transform:scale(1.0) } } /* 볼거리 지도 */ .mTourMap{position:absolute;top:20%;left:55%;margin-left:0;width:530px;height:600px;background:url('/img/tour/m_tour_map.png') no-repeat;z-index:20} .mTourMap .tourPlace li a{position:absolute;color:#fff;font-weight:bold;} .mTourMap .tourPlace li a::after{display:none;position:absolute;top:-5px;left:0;width:100%;height:1px;content:'';background:#fff} .mTourMap .tourPlace li a .txt{position:relative;padding:0;transition: all 0.2s;-moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;z-index:2} .mTourMap .tourPlace li a .point{position:absolute;top:30px;left:0;width:20px;height:20px;content:'';background:url('/img/tour/com_tour.png') no-repeat -300px 0;border-radius:50%;transition: all 0.2s;-moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;} .mTourMap .tourPlace li a:focus {border:2px dashed #ffffff;padding:2px} .mTourMap .tourPlace a.nav1{top:475px;left:280px;}/* 용두산공원 */ .mTourMap .tourPlace a.nav1 .point{top:2px;left:-25px} .mTourMap .tourPlace a.nav2{top:410px;left:155px}/* 국제시장 */ .mTourMap .tourPlace a.nav2 .point{left:15px} .mTourMap .tourPlace a.nav3{top:565px;left:185px}/* 자갈치시장 */ .mTourMap .tourPlace a.nav3 .point{top:-25px;left:20px} .mTourMap .tourPlace a.nav4{top:410px;left:40px}/* 부평깡통(야)시장 */ .mTourMap .tourPlace a.nav4 .point{left:45px} .mTourMap .tourPlace a.nav5{top:370px;left:290px;}/* 광복로 문화,패션거리 */ .mTourMap .tourPlace a.nav5 .point{top:90px;left:-75px} .mTourMap .tourPlace a.nav6{top:475px;left:auto;right:420px;text-align:right}/* BIFF광장 */ .mTourMap .tourPlace a.nav6 .point{top:5px;left:auto;right:-35px} .mTourMap .tourPlace a.nav7{top:570px;left:298px}/* 영도대교 */ .mTourMap .tourPlace a.nav7 .point{top:-25px;left:20px} .mTourMap .tourPlace a.nav8{top:320px;left:90px}/* 보수동책방골목 */ .mTourMap .tourPlace a.nav8 .point{left:35px} .mTourMap .tourPlace a.nav9{top:510px;left:280px}/* 조선통신사 축제 */ .mTourMap .tourPlace a.nav9 .point{top:-33px;left:-25px} .mTourMap .tourPlace a.nav9::after{display:block} .mTourMap .tourPlace a.nav10{top:510px;left:auto;right:420px;text-align:right}/* 부산국제영화제전야제 및 연계행사 */ .mTourMap .tourPlace a.nav10 .point{top:-30px;left:auto;right:-35px} .mTourMap .tourPlace a.nav10::after{display:block} .mTourMap .tourPlace a.nav11{top:600px;left:185px}/* 부산자갈치축제 */ .mTourMap .tourPlace a.nav11 .point{top:-60px;left:20px} .mTourMap .tourPlace a.nav11::after{display:block} .mTourMap .tourPlace a.nav12{top:405px;left:290px}/* 부산크리스마스트리문화축제 */ .mTourMap .tourPlace a.nav12 .point{top:55px;left:-75px} .mTourMap .tourPlace a.nav12::after{display:block} .mTourMap .tourPlace a.nav12::before{position:absolute;top:23px;left:-68px;width:80px;height:1px;content:'';background:#fff;-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);transform: rotate(-45deg);} .mTourMap .tourPlace li.active a{z-index:1} .mTourMap .tourPlace li.active a .txt{display:block;padding:0 5px;background:#ff521c} .mTourMap .tourPlace li.active a .point{width:20px;height:26px; background-position:-300px -30px;border-radius:0} .tourNameCon{position:absolute;visibility: hidden;}/* 테블릿 모바일 볼거리명칭 */ .tourNameCon .control{display:none} /* 함께 즐겨요 */ .section2{padding-right:200px;background-image: url('/img/tour/m_section2_bg.jpg')} .section2 a:focus{border:2px dotted #000} /*접근성 선명확. 떨어지는 일부문제있을수 있음*/ .section2 .txt2{margin-bottom:35px;font-family:'NanumSquare';font-size:38px;color:#fff;text-align:center;line-height:44px} .section2 .txt2 span{color:#ffff66} .mTourSearch{position:relative;margin:0 auto 90px;padding-right:40px;max-width:380px;border-bottom:1px solid #fff} .mTourSearch .inpuTxt{width:100%;height:40px;color:#fff;font-weight:bold;background:none;border:0;} .mTourSearch .inpuTxt::-webkit-input-placeholder { color:#fff } .mTourSearch .inpuTxt::-moz-placeholder { color:#fff } .mTourSearch .inpuTxt::-ms-input-placeholder { color:#fff } .mTourSearch .btn{position:absolute;top:5px;right:0;width:24px;} .mTourSearch .btn input{position:relative;padding:0;width:24px;height:30px;text-indent:-9999px;overflow:hidden;opacity:0.5;background:url('/img/common/com_img.png') no-repeat -110px -54px;border:0} .mTourSearch .btn input:focus{border:3px dashed #ffffff; padding:2px;width:30px;height:35px; } .mCenCon{margin:0 auto;width:1220px} .mCenCon::after{display:block;clear:both;content:''} .mCenCon h3{position:absolute;top:0;left:0;padding:0 20px;font-family:'NanumSquare';font-size:16px;color:#fff;line-height:40px;z-index:10} .mCenCon h3.tit1{background:#0a61a3} .mCenCon h3.tit2{background:#000} .mCenCon h3.tit3{background:#FF521C} .mCenCon .swiper-container ul li a{display:block} /* 접근성 추가 */ /* 추천관광코스 */ .mTourCourse{position:relative;float:left;margin-right:10px;width:470px} .mTourCourse .control{position:absolute;top:20px;right:20px;color:#fff;z-index:10} .mTourCourse .control .count{display:inline-block;margin-right:5px} .mTourCourse .control button{margin-left:-1px;width:29px;height:27px;text-indent:-9999px;overflow:hidden;background:url('/img/common/com_img.png') no-repeat;border:1px solid #fff} .mTourCourse .control .prevSlide1{background-position:-177px -268px} .mTourCourse .control .nextSlide1{background-position:-257px -268px} .mTourCourse .control .stopSlide1{background-position:-217px -268px} .mTourCourse .control .startSlide1{background-position:-297px -268px} .mTourCourse li a:focus{border:3px dotted #000} /* 접근성 추가 */ /* 중구축제 */ .mTourFestival{position:relative;float:left;width:364px} .mTourFestival .count{position:absolute;left:0;bottom:15px;width:100%;text-align:center;z-index:10} .mTourFestival .count button{margin:0 4px;width:16px;height:16px;text-indent:-9999px;overflow:hidden;background:#fff;border-radius:50%} .mTourFestival .count button.swiper-pagination-bullet-active{width:16px;height:16px;background:none;border:3px solid #fff} .mTourFestival li a:focus{border:3px dotted #000} /* 접근성 추가 */ /* 중구먹거리 */ .mTourEat{position:relative;float:right;width:364px} .mTourEat .count{position:absolute;left:0;bottom:15px;width:100%;text-align:center;z-index:10} .mTourEat .count button{margin:0 4px;width:16px;height:16px;text-indent:-9999px;overflow:hidden;background:#fff;border-radius:50%} .mTourEat .count button.swiper-pagination-bullet-active{width:16px;height:16px;background:none;border:3px solid #fff} .mTourEat li a:focus{border:3px dotted #000} /* 접근성 추가 */ /* 어디로 갈까요 */ .section3{padding-right:200px;background-image: url('/img/tour/m_section3_bg.jpg');background-repeat:repeat;background-size:auto} .section3 .txt3{margin-bottom:35px;font-family:'NanumSquare';font-size:16px;color:#3b3e41;font-weight:bold;text-align:center;} /* 중구나들이/미디어중구/포토갤러리 */ .mPhotoG{margin:0 auto;width:1220px;height:430px} .mPhotoG {position:relative;text-align:center;} .mPhotoG .menu{position:relative;float:left;display:inline-block;width:130px;border-right:1px solid #bcc7d1;z-index:20} .mPhotoG .menu a{position:relative;display:block;height:46px;font-family:'NanumSquare';font-size:17px;color:#666;line-height:46px;font-weight:bold;background:#fff;} .mPhotoG .menu a:focus{border:2px dashed #000} /* 접근성 추가 */ .mPhotoG .menu.on a{color:#fff;z-index:1} .mPhotoG .menu.on:first-child a::before{background-position: -350px -150px} .mPhotoG .menu:nth-child(1).on a{background:#0071d9} .mPhotoG .menu:nth-of-type(2).on a{background:rgb(1,103,180)} .mPhotoG .menu:nth-of-type(3).on a{background:rgb(3,164,154)} .mPhotoG .menu:nth-of-type(4).on a{background:rgb(250,102,5)} .mPhotoG .menu:nth-of-type(5).on a{background:rgb(3,158,209)} .mPhotoG .menu:nth-of-type(6).on a{background:rgb(200,69,189)} .mPhotoG .tabPhCon{position:absolute;top:0;left:0;padding-top:80px;width:100%;z-index:10} .mPhotoG .tabPhCon ul::after{display:block;clear:both;content:''} .mPhotoG .tabPhCon ul li{float:left;margin:0 10px 10px 0} .mPhotoG .tabPhCon ul li a{display:inline-block} .mPhotoG .tabPhCon ul li a:focus{outline:2px dashed #000;} /* 접근성 추가 */ .mPhotoG .tabPhCon ul li .photo{position:relative;display:inline-block} .mPhotoG .tabPhCon ul li .photo .part{position:absolute;bottom:0;left:0;padding:0 20px;font-family:'NanumSquare';color:#fff;font-weight:bold;line-height:33px;z-index:10} .mPhotoG .tabPhCon ul li .photo .tit{position:absolute;top:0;left:0;padding:24% 10px 0;width:100%;height:100%;font-size:20px;color:#fff;opacity:0;font-weight:bold;text-align:center;background:rgba(0,0,0,0.5);border:5px solid rgba(0,0,0,0);z-index:5;transition: all 0.3s;-moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; } .mPhotoG .tabPhCon ul li .photo.prt1 .part{background:rgba(1,103,180,1)} .mPhotoG .tabPhCon ul li .photo.prt2 .part{background:rgba(3,164,154,1)} .mPhotoG .tabPhCon ul li .photo.prt3 .part{background:rgb(250, 102, 5, 1)} .mPhotoG .tabPhCon ul li .photo.prt4 .part{background:rgb(3, 158, 209,1)} .mPhotoG .tabPhCon ul li .photo.prt5 .part{background:rgba(200,69,189, 1)} .mPhotoG .tabPhCon ul li a:hover .photo .tit{padding-top:26%;opacity:1} .mPhotoG .tabPhCon ul li a:hover .photo.prt1 .tit{border:5px solid rgba(1,103,180,1)} .mPhotoG .tabPhCon ul li a:hover .photo.prt2 .tit{border:5px solid rgba(0,169,159,1)} .mPhotoG .tabPhCon ul li a:hover .photo.prt3 .tit{border:5px solid rgba(255,167,15,1)} .mPhotoG .tabPhCon ul li a:hover .photo.prt4 .tit{border:5px solid rgba(15,175,226,1)} .mPhotoG .tabPhCon ul li a:hover .photo.prt5 .tit{border:5px solid rgba(200,69,189,1)} .mPhotoG .tabPhCon .control{display:none} .mPhotoG .tabPhCon .control button{position:absolute;top:55%;width:35px;height:35px;text-indent:-9999px;overflow:hidden;background:rgba(255,255,255,0.8) url('/img/common/com_img.png') no-repeat;border-radius:50%;z-index:20} .mPhotoG .tabPhCon .control .prevg{left:0;background-position:-10px -300px} .mPhotoG .tabPhCon .control .nextg{right:0;background-position:-45px -300px} /* 빈콘텐츠 */ .section4{background-image: url('/img/tour/m_section3_bg.jpg');background-repeat:repeat;background-size:auto} .fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell{height:auto !important} .mBottomCon{height:150px;} /* ================================================================================ 반응형 콘텐츠(메인콘텐츠) ================================================================================ */ /* PC Device */ @media all and (min-width:1025px){ } /* Tablet Device */ @media all and (max-width:1024px){ .mConMenu{position:absolute;top:180px; } .mConMenu li{margin:0 10px} .mConMenu li a{width:45px;height:50px;overflow:hidden} .mConMenu li a b{display:none} .mConMenu.fix{position:fixed;top:20px} .mTourPlace > ul > li{padding:0 10px} .mTourPlace ul li .con{padding:270px 0;width:auto;height:auto;max-width:420px} .mTourPlace .control{left:50%;top:268px;margin:0 0 0 -210px;padding:0 0 0 110px;width:420px;} .mTourMap{display:none;} .tourNameCon {position:absolute;left:0;bottom:40px;visibility: visible;padding:30px 40px;width:100%;background:rgba(0,0,0,0.6);z-index:20} .tourNameCon .tourName ul{display:table;white-space: nowrap;} .tourNameCon .tourName ul li{display:table-cell;font-size:16px;line-height:22px;text-align:center;vertical-align:middle;opacity:0.4;border:1px solid rgba(255,255,255,0);transition: all 0.2s;-moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;} .tourNameCon .tourName ul li a{display:block;padding:5px 20px;font-family:'NanumSquare';color:#fff;font-weight:bold;} .tourNameCon .tourName ul li.swiper-slide-active{opacity:1;border:1px solid rgba(255,255,255,1)} .tourNameCon .control {display:block;left:0;z-index:30} .tourNameCon .control button{position:absolute;top:50%;margin-top:-11px;width:14px;height:22px;text-indent:-9999px;overflow:hidden;background:url('/img/common/com_img.png') no-repeat} .tourNameCon .control .prevSlide{left:20px;background-position:-101px -270px} .tourNameCon .control .nextSlide{right:20px;background-position:-141px -270px} .section{padding:0} .mConBox{position:relative;padding:80px 10px 20px} .section2 .txt2{margin-bottom:30px;font-size:29px;line-height:38px} .mTourSearch{margin-bottom:30px} .mCenCon{width:100%;max-width:740px} .mTourCourse{float:none;margin-bottom:10px;;width:100%} .mTourCourse li img{width:100%} .mTourFestival{width:49%} .mTourEat{width:49%} .mPhotoG{width:auto;max-width:740px;height:350px} .mPhotoG .menu{width:16.66%} .mPhotoG .tabPhCon{padding:80px 45px 0} .mPhotoG .tabPhCon .control{display:block} .mPhotoG .tabPhCon ul li a .photo .tit{top:auto;bottom:0;padding:0 10px;height:35px;font-size:16px;opacity:1;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;background:rgba(0,0,0,0.8)} .mPhotoG .tabPhCon ul li a:hover .photo .tit{padding:0 10px;border:5px solid transparent !important} .mPhotoG .tabPhCon ul li .photo .part{bottom:auto;top:0} .mBottomCon{height:0} } /* Mobile Device */ @media all and (max-width:760px){ .mConMenu{top:120px;transition: all 0.2s;-moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;} .mConMenu li{margin:0 5px} .mConMenu li a{height:45px} .mConMenu li span{width:40px;height:40px} .mConMenu li .ic1{background-position:-2px -62px} .mConMenu li .ic2{background-position:-2px -107px} .mConMenu li .ic3{background-position:-1px -152px} .mConMenu li.active .ic1{background-position:-47px -62px} .mConMenu li.active .ic2{background-position:-47px -107px} .mConMenu li.active .ic3{background-position:-46px -152px} .mTourPlace > ul > li{padding:0 10px 70px;min-height:560px} .mTourPlace ul li .con{padding:200px 0 0} .mTourPlace ul li .con h3{min-height:70px} .mTourPlace ul li .con h3 img{} .mTourPlace ul li .con p{margin-bottom:20px;font-size:13px;line-height:20px;word-break:keep-all} .mTourPlace ul li .con{max-width:290px} .mTourPlace ul li .con ul li{margin:0;width:25%} .mTourPlace ul li .con ul li span{width:55px;height:55px} .mTourPlace ul li .con ul li a{font-size:13px} .mTourPlace ul li .con ul li .ic1{background-position:-200px -140px} .mTourPlace ul li .con ul li .ic2{background-position:-255px -140px} .mTourPlace ul li .con ul li .ic3{background-position:-310px -140px} .mTourPlace ul li .con ul li .ic4{background-position:-365px -140px} .mTourPlace .control{top:198px;margin:0 0 0 -145px;padding:0 0 0 110px;width:290px;} .tourNameCon{bottom:0;padding:15px 30px 15px} .tourNameCon .tourName ul li a{padding:3px 10px;font-size:13px;line-height:18px} .tourNameCon .tourName ul li.swiper-slide-active a{font-size:15px} .tourNameCon .control button{opacity:0.5} .tourNameCon .control .prevSlide{left:10px} .tourNameCon .control .nextSlide{right:10px} .section{height:auto !important;} .section h2{height:75px} .section h2 img{height:100%} .mTourFestival{float:none;margin-bottom:10px;width:100%} .mTourFestival img{width:100%} .mTourEat{float:none;width:100%} .mTourEat img{width:100%} .mPhotoG .menu{width:33.33%} .mPhotoG .menu a{margin-bottom:1px} .mPhotoG .tabPhCon{padding-top:120px} } /* Mobile Device */ @media all and (max-width:550px){ } /* ================================================================================ 서브콘텐츠 ================================================================================ */ /* 한눈에 본는 중구 */ .mapSearch{margin-bottom:30px;padding:30px;background:#fff;border:1px solid #dfdfdf} .mapSearch::after{display:block;clear:both;content:''} .mapSearch .mapInfor{position:relative;float:left;width:440px;height:480px;background:url('/img/tour/search_map.png') no-repeat;border-right:1px dashed #999} .mapSearch .mapInfor label{position:absolute;} .mapSearch .mapInfor label::before{position:absolute;top:-25px;left:50%;margin-left:-10px;width:20px;height:26px;content:'';opacity:0;background:url('/img/tour/com_tour.png') no-repeat -300px -30px;transition: all 0.2s;-moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;} .mapSearch .mapInfor .dong01{top:230px;left:240px}/* 동광동 */ .mapSearch .mapInfor .dong02{top:290px;left:200px}/* 광복동 */ .mapSearch .mapInfor .dong03{top:215px;left:145px}/* 남포동 */ .mapSearch .mapInfor .dong04{top:190px;left:40px}/* 대청동 */ .mapSearch .mapInfor .dong05{top:290px;left:60px}/* 부평동 */ .mapSearch .mapInfor .dong06{top:305px;left:140px}/* 보수동 */ .mapSearch .mapInfor .dong07{top:355px;left:120px}/* 중앙동 */ .mapSearch .mapInfor .dong08{top:100px;left:220px}/* 영주1동 */ .mapSearch .mapInfor .dong09{top:100px;left:130px}/* 영주2동 */ .mapSearch .mapInfor label.on::before{opacity:1} .mapSearch .mapInfor label.on button{font-weight:bold} .mapSearch .mapSelect{float:right;width:320px} .mapSearch .mapSelect dl{margin-bottom:30px} .mapSearch .mapSelect dt{margin-bottom:15px;padding-bottom:10px;font-size:18px;color:#333;font-weight:bold;border-bottom:1px solid #dedede} .mapSearch .mapSelect dd ul::after{display:block;clear:both;content:''} .mapSearch .mapSelect dd ul li{position:relative;float:left;padding:1px;width:25%;font-size:14px} .mapSearch .mapSelect dd ul li input{position:absolute;top:0;left:-4px;width:100%;height:35px;-webkit-appearance: none;border-radius:0;background:none;border:0;z-index:1} .mapSearch .mapSelect dd ul li input:focus{border:2px dashed #000000} .mapSearch .mapSelect dd ul.dongSel li label{position:relative;display:block;height:35px;line-height:34px;text-align:center;background:#fff;border:1px solid #ccc;z-index:2} .mapSearch .mapSelect dd ul.dongSel li input:checked + label{color:#333;font-weight:bold;border:1px solid #333} .mapSearch .mapSelect dd ul.themaSel li{margin-bottom:5px} .mapSearch .mapSelect dd ul.themaSel li label{position:relative;display:block;padding-top:50px;text-align:center;background:#fff;z-index:1} .mapSearch .mapSelect dd ul.themaSel li label::after{position:absolute;top:0;left:50%;margin-left:-26px;width:52px;height:52px;content:'';background:#4895c1;border-radius:50%} .mapSearch .mapSelect dd ul.themaSel li label::before{position:absolute;top:14px;left:50%;margin-left:-12px;width:25px;height:25px;content:'';background:url('/img/tour/com_tour.png') no-repeat;z-index:1} .mapSearch .mapSelect dd ul.themaSel li input:checked + label{color:#333;font-weight:bold;} .mapSearch .mapSelect dd ul.themaSel li input:checked + label::after{border:3px solid rgba(0,0,0,0.7)} .mapSearch .mapSelect dd ul.themaSel li.ic1 label::after{background:#4895c1;}/* 중구명소 */ .mapSearch .mapSelect dd ul.themaSel li.ic2 label::after{background:#e36060;}/* 축제 */ .mapSearch .mapSelect dd ul.themaSel li.ic3 label::after{background: #be6f00;}/* 맛집 */ .mapSearch .mapSelect dd ul.themaSel li.ic4 label::after{background:#508930;}/* 숙박 */ .mapSearch .mapSelect dd ul.themaSel li.ic5 label::after{background:#3d5b9b;}/* 쇼핑 */ .mapSearch .mapSelect dd ul.themaSel li.ic6 label::after{background:#6a4c88;}/* 뷰티 */ .mapSearch .mapSelect dd ul.themaSel li.ic7 label::after{background: #0a9c9d;}/* 관광안내 */ .mapSearch .mapSelect dd ul.themaSel li.ic1 label::before{background-position:0 -340px} .mapSearch .mapSelect dd ul.themaSel li.ic2 label::before{background-position:-25px -340px} .mapSearch .mapSelect dd ul.themaSel li.ic3 label::before{background-position:-50px -340px} .mapSearch .mapSelect dd ul.themaSel li.ic4 label::before{background-position:-75px -340px} .mapSearch .mapSelect dd ul.themaSel li.ic5 label::before{background-position:-100px -340px} .mapSearch .mapSelect dd ul.themaSel li.ic6 label::before{background-position:-125px -340px} .mapSearch .mapSelect dd ul.themaSel li.ic7 label::before{background-position:-150px -340px} .mapSearch .mapSelect .searchForm{position:relative;padding-right:40px;border-bottom:1px solid #ccc} .mapSearch .mapSelect .searchForm .inpu_txt{padding-bottom:10px;width:100%;border:0} .mapSearch .mapSelect .searchForm .btn{position:absolute;top:0;right:0} .mapSearch .mapSelect .searchForm .btn input{display:block;padding:0;width:30px;height:30px;text-indent:-999px;overflow:hidden;background:url('/img/tour/com_tour.png') no-repeat -365px -195px;border:0} /* 중구명소 */ .subhotCon{position:relative;} .subhotCon .tourSlide{height:405px;overflow:hidden} .subhotCon .control{position:absolute;left:0;bottom:0;z-index:20} .subhotCon .control button{margin-right:1px;width:54px;height:54px;background:rgba(0,0,0,0.35)} .subhotCon .control button span{display:block;margin:0 auto;width:12px;height:22px;text-indent:-9999px;overflow:hidden;background:url('/img/tour/com_tour.png') no-repeat} .subhotCon .control .prev span{background-position:0 -300px} .subhotCon .control .next span{background-position:-45px -300px} .subhotCon .control .stop span{width:13px;height:19px;background-position:-90px -300px} .subhotCon .control .start span{width:10px;height:19px;background-position:-115px -300px} .subhotCon .btnPos{position:absolute;right:5px;bottom:-10px;} .subhotCon .btnPos a{display:inline-block;width:90px;height:36px;color:#fff;font-weight:bold;text-align:center;line-height:36px;background:#3e4452} .subhotCon .btnPos a.red{background:#cf3028} .tour_infor{border-top:1px solid #3e4452} .tour_infor ul{border-bottom:1px solid #d5d5d5} .tour_infor ul::after{display:block;clear:both;content:''} .tour_infor ul li{position:relative;float:left;width:50%;padding:20px 30px 20px 100px;} .tour_infor ul li .name{position:absolute;top:20px;left:3px;width:80px;color:#333;font-weight:bold} .tour_infor ul li .name::after{position:absolute;top:50%;right:0;margin-top:-6px;width:1px;height:13px;content:'';background:#a5a5a5} .tour_infor ul.liw100 li{width:100%} .tourLocation .wrap_controllers{display: none !important;} .tourLocation .mapInfo{position: relative;padding:10px 217px 10px 20px;overflow: hidden;border: 1px solid #dedede;background: #f6f6f6;border-width:0 1px 1px;} .tourLocation .mapInfo ul::after{display:block;clear:both;content:''} .tourLocation .mapInfo ul li{position:relative;float: left;margin:5px 10px 5px 0;padding:10px 0 10px 55px;text-align:left} .tourLocation .mapInfo ul li .ic{position:absolute;top:0;left:0;width:45px;height:45px;vertical-align:middle;background: url('/img/tour/com_tour.png') no-repeat} .tourLocation .mapInfo ul li .ic1{background-position:0 -195px} .tourLocation .mapInfo ul li .ic2{background-position:-60px -195px} .tourLocation .mapInfo ul li b{display:inline-block;margin-right:10px;} .tourLocation .mapInfo ul li .num{display:inline-block;margin-right:10px} .tourLocation .mapInfo .btnMore{ position: absolute; top: 12px; right: 20px;padding-left:14px;width: 170px; height: 50px; color: #fff;line-height: 50px;font-weight: bold;text-align:left;background: #5380d2} .tourLocation .mapInfo .btnMore span{display:inline-block;margin-right:5px;width:27px;height:30px;vertical-align:middle;background: url('/img/tour/com_tour.png') no-repeat -115px -195px} .tourLocation .public > ul > li{position:relative;padding:50px 20px 50px 150px;border-bottom: 1px solid #dedede;} .tourLocation .public > ul > li::before{position:absolute;top:40px;left:0;width:94px;height:94px;content:'';background: url('/img/tour/com_tour.png') no-repeat} .tourLocation .public > ul > li.ic1::before{background-position:-150px -195px} .tourLocation .public > ul > li.ic2::before{background-position:-250px -195px} .tourLocation .public > ul > li h3{margin-top:0} .around_infor{border-top:1px solid #3e4452} .around_infor > li{position:relative;padding:20px 20px 20px 180px;border-bottom:1px solid #d5d5d5} .around_infor > li .name{position:absolute;top:20px;left:5px;width:150px;color:#333;font-weight:bold;} .around_infor > li .name::after{position:absolute;top:5px;right:0;width:1px;height:13px;content:'';background:#a5a5a5} .around_infor > li .name span{display:inline-block;margin-right:10px;width:35px;height:35px;vertical-align:middle;background: url('/img/tour/com_tour.png') no-repeat} .around_infor > li .name .ic1{background-position:-150px -300px} .around_infor > li .name .ic2{background-position:-200px -300px} .around_infor > li .name .ic3{background-position:-250px -300px} .tourTopTxt{display:table;margin-bottom:20px;width:100%;background-position:center;background-size:cover} .tourTopTxt.bg1{background-image: url('/img/tour/food_skin.jpg')} .tourTopTxt.bg2{background-image: url('/img/tour/see_skin.jpg')} .tourTopTxt p{display:table-cell;padding:0 20px;height:279px;font-family:'NanumSquare';font-size:42px;color:#fff;text-align:center !important;vertical-align:middle;line-height:48px;font-weight:bold} .tourTopTxt p span{font-size:26px} /* 관광명소2 */ .hotStreet li{position:relative;padding:30px 0 30px 205px;min-height:200px;overflow:hidden} .hotStreet li::after{position:absolute;left:205px;bottom:0;width:100%;height:1px;content:'';background:#ccc} .hotStreet li:first-child::before{position:absolute;left:205px;top:0;width:100%;height:1px;content:'';background:#ccc} .hotStreet li .photo{position:absolute;top:10px;left:0;width:178px;height:178px;overflow:hidden;border-radius:50%} .hotStreet li .tit{display:block;margin-bottom:15px;font-size:18px;font-weight:bold} .blogReview ul{margin-bottom:20px} .blogReview ul::after{display:block;clear:both;content:''} .blogReview ul li{float:left;margin-bottom:6px;padding:0 3px;width:25%} .blogReview ul li a{position:relative;display:block} .blogReview ul li a:hover{font-weight:normal} .blogReview ul li a dl::after{position:absolute;top:0;left:0;width:100%;height:100%;content:'';opacity:0;transition: all 0.3s;border:5px solid #267ddc} .blogReview ul li a:hover dl::after{opacity:0.5} .blogReview ul li dl{padding:20px;height:270px;background:#fff;border:1px solid #ddd} .blogReview ul li dl dt{position:relative;margin-bottom:20px;padding-bottom:10px} .blogReview ul li dl dt::after{position:absolute;left:0;bottom:0;width:48px;height:1px;content:'';background:#555} .blogReview ul li dl .sname{display:block;margin-bottom:5px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;color:#fff;} .blogReview ul li dl .sname span{padding:0 3px;height:20px;color:#fff;line-height:20px;background:#267ddc} .blogReview ul li dl .tit{position:relative;display:block;padding-bottom:10px;font-size:17px;color:#333;font-weight:bold;line-height:20px;overflow: hidden; text-overflow: ellipsis; white-space: normal; max-height:42px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blogReview ul li dl dd{color:#919191;line-height:22px;overflow: hidden; text-overflow: ellipsis; white-space: normal; max-height:110px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;} .blogReview .btnMore{display:block;text-align:center;} .blogReview .btnMore a{position:relative;display:inline-block;padding-right:15px;width:120px;height:40px;color:#666;font-weight:bold;line-height:40px;background:#fff;border:1px solid #ddd} .blogReview .btnMore a::after{position:absolute;top:50%;right:15px;margin-top:-10px;width:20px;height:20px;content:'';background:url('/img/common/com_img.png') no-repeat -280px -335px} .mapCon{padding:12px 20px 20px;width:282px} .mapCon h3.title{margin:0 0 8px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .mapCon .h_dot{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .aroundCon{position:relative;height:400px;overflow:hidden} .tourTab{margin:20px 0} .tourTab::after{display:block;clear:both;content:''} .tourTab li{position:relative;float:left;width:25%;;text-align:center;background:#fff;z-index:1} .tourTab li a{display:block;margin-left:-1px;font-weight:bold;height:50px;line-height:50px;border:1px solid #ccc;} .tourTab li:first-child a{margin-left:0} .tourTab li.on{z-index:2} .tourTab li.on a{color:#fff;background:#3e4452;border:1px solid #3e4452;} .tourInforCon{position:absolute;top:90px;left:0;width:100%;text-align:center} .tourInforCon ul::after{display:block;clear:both;content:''} .tourInforCon ul li{float:left} .tourInforCon ul li a{display:block} .tourInforCon ul li .infor{padding:5px 15px;text-align:left;background:#fff;border:1px solid #e4e4e4;border-width:0 1px 1px} .tourInforCon ul li .infor .tit{position:relative;display:block;padding:10px 0 10px 35px;font-weight:bold;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .tourInforCon ul li .infor .tit .num{position:absolute;top:3px;left:0;width:26px;height:35px;color:#fff;line-height:26px;text-align:center;background:url('/img/tour/com_tour.png') no-repeat} .tourInforCon .tourInforSlide1 li .infor .tit .num{background-position:-420px -300px} .tourInforCon .tourInforSlide2 li .infor .tit .num{background-position:-460px -300px} .tourInforCon .tourInforSlide3 li .infor .tit .num{background-position:-500px -300px} .tourInforCon .tourInforSlide4 li .infor .tit .num{background-position:-540px -300px} .tourInforCon .bx-controls{position:relative;display:inline-block;margin-top:20px;padding: 0 40px;text-align:center} .tourInforCon .bx-controls button{position:absolute;top:-1px;width:28px;height:28px;text-indent:-9999px;overflow:hidden;opacity:0.6;background:url('/img/common/com_img.png') no-repeat;border:1px solid #838383;border-radius:50%} .tourInforCon .bx-controls .bx-prev{left:0;background-position:-15px -304px} .tourInforCon .bx-controls .bx-next{right:0;background-position:-49px -304px} .tourInforCon .bx-controls .bx-pager-item{display:inline-block;margin:0 4px;width:22px;vertical-align:middle} .tourInforCon .bx-controls .bx-pager-item a{position:relative;display:block;margin:0 auto;width:14px;height:14px;text-indent:-9999px;overflow:hidden;border-radius:50%;background:#fff;border:1px solid #a1a1a1} .tourInforCon .bx-controls .bx-pager-item a.active{width:22px;height:22px;background:none;border:2px solid #3977c3} .tourInforCon .bx-controls .bx-pager-item a.active::after{position:absolute;top:50%;left:50%;margin:-4px 0 0 -4px;width:8px;height:8px;content:'';background:#3977c3;border-radius:50%} /* 태마별 관광코스 */ .courseCon{padding-top:40px} .courseCon h2{margin-bottom:20px;font-family:'NanumSquare';font-size:42px;text-align:center;font-weight:normal;line-height:50px} .courseCon h2 .col1{color:#ccc;} .courseCon h2 .col2{font-size:24px} .courseCon .txt{margin-bottom:50px;text-align:center !important} .courseCon .txt2 {margin-bottom:5px; text-align:center !important; font-size:18px;} .txtbg_cir1{display:inline-block; width:45px; height:20px; vertical-align:middle; /* text-align:center; */ padding-left:11px; line-height:20px; border-radius:10px; color:#fff; background:#5380d2;} .courseCon .courseList{margin-bottom:20px;padding:70px 50px 60px;text-align:right;background:#f6f6f6 url('/img/tour/course_bg.gif') no-repeat center bottom} .courseCon .courseList ol{position:relative} .courseCon .courseList ol::after{display:block;clear:both;content:''} .courseCon .courseList ol li{position:relative;float:left;margin-bottom:40px;padding:28px 2px 0;text-align:center;word-break:break-all;background:url('/img/tour/course_line.png') repeat-x left 5px} .courseCon .courseList ol li::before{ position:absolute;top:-3px;left:50%; margin-left:-12px;width:26px;height:26px; content:''; line-height:24px; font-size:13px; color:#fff; background:#3977C3;border-radius:50%; text-align:center; } .courseCon .courseList ol li.num_1::before{content:"1";} .courseCon .courseList ol li.num_2::before{content:"2";} .courseCon .courseList ol li.num_3::before{content:"3";} .courseCon .courseList ol li.num_4::before{content:"4";} .courseCon .courseList ol li.num_5::before{content:"5";} .courseCon .courseList ol li.num_6::before{content:"6";} .courseCon .courseList ol li.num_7::before{content:"7";} .courseCon .courseList ol li.num_8::before{content:"8";} .courseCon .courseList ol li.num_9::before{content:"9";} .courseCon .courseList ol li.num_10::before{content:"10";} .courseCon .courseList ol li.num_11::before{content:"11";} .courseCon .courseList ol li.num_12::before{content:"12";} .courseCon .courseList ol.line1::before{position:absolute;top:5px;right:0;width:3px;height:100%;content:'';background:url('/img/tour/course_line.png') repeat-y;} .courseCon .courseList ol.line1 li:first-child::after{position:absolute;top:0;right:0;width:6px;height:13px;content:'';background:url('/img/tour/com_tour.png') no-repeat -340px -300px} .courseCon .courseList ol.line2{clear:both} .courseCon .courseList ol.line2 li:last-child::after{position:absolute;top:0;right:0;width:6px;height:13px;content:'';background:url('/img/tour/com_tour.png') no-repeat -365px -300px} .courseCon .courseList ol.line2 li{float:right;} .courseCon .courseList ol.kan6 li{width:16.6%} .courseCon .courseList ol.kan5 li{width:20%} .courseCon .courseList ol.kan4 li{width:25%} .courseCon .courseList ol.kan3 li{width:33.33%} .courseCon .courseList ol.kan2 li{width:50%} .courseMap{width:100%;height:510px} .courseViewList{margin-top:20px;background:url('/img/tour/course_line2.png') repeat-y 7px top} .courseViewList li{position:relative;margin-bottom:60px;padding:20px 0 0 60px} .courseViewList li .num{position:absolute;top:0;left:0;width:26px;height:35px;color:#fff;text-align:center;line-height:25px;font-weight:bold;background:url('/img/tour/com_tour.png') no-repeat -420px -300px} .courseViewList li a{display:block} .courseViewList li dl{position:relative;padding:15px 0 0 310px;min-height:200px} .courseViewList li dl dt{margin-bottom:15px;font-family:'NanumSquare';font-size:18px;font-weight:bold} .courseViewList li dl dd.photo{position:absolute;top:0;left:0;width:280px} .courseViewList li dl dd.con{margin-bottom:10px} .courseViewList li dl dd.addres{color:#777} .s3_1_con{font-family:'NanumSquare';} .s3_1_con .txt{margin-bottom:10px;font-size:16px;font-weight:bold;text-align:center !important;} .s3_1_con h2{position:relative;margin-bottom:55px;font-family:'NanumSquare';font-size:42px;color:#333;text-align:center;line-height:45px;} .s3_1_con h2::after{position:absolute;top:50%;left:0;width:100%;height:1px;content:'';background:#333;z-index:1} .s3_1_con h2 .tit{position:relative;display:inline-block;padding:0 20px;background:#fcfcfc;z-index:2} .s3_1_con h2 .tit span{display:inline-block;color:#0167b4;} .s3_1_con .monthFest ul::after{display:block;clear:both;content:''} .s3_1_con .monthFest ul li{position:relative;float:left;margin-bottom:3px;width:33.33%;} .s3_1_con .monthFest ul li a{display:block;height:100%} .s3_1_con .monthFest ul li a::after{position:absolute;top:0;left:0;width:100%;height:100%;content:'';opacity:0.4;background:#000;z-index:1;transition: all 0.3s;} .s3_1_con .monthFest ul li .month{position:absolute;bottom:0;left:0;padding:0 0 30px 25px;font-size:18px;color:#fff;font-weight:bold;z-index:2} .s3_1_con .monthFest ul li .month span{font-size:32px} .s3_1_con .monthFest ul li.last{width:66.66%} .s3_1_con .monthFest ul li a:hover::after{opacity:0;} .s3_1_con .monthFest ul li.festTxt{padding:40px 40px 35px;max-height:240px;color:#fff;background:#568ddc url('/img/tour/festi_photo_bg.jpg') no-repeat right top;} .s3_1_con .monthFest ul li.festTxt .tit{display:block;font-size:20px;font-weight:bold} .topTxt{position:relative;margin-bottom:45px} .topTxt::after{display:block;clear:both;content:''} .topTxt .txt{position:absolute;top:0;right:0;padding:40px;width:340px;height:262px;font-family:'NanumSquare';color:#fff;background-image:url('/img/tour/coner_bg.png');background-repeat:no-repeat;background-position:right top} .topTxt .txt span{display:block;margin-bottom:40px;font-size:14px;opacity:1;word-spacing: 4px;font-weight:normal} .topTxt .txt p{font-size:18px;} .topTxt .txt p b{display:block;font-size:32px;line-height:42px} .topTxt .txt.bg1{background-color:#31a199} .topTxt .txt.bg2{background-color:#a96d38} .topTxt .txt.bg3{background-color:#4665b6} .cultInfor .txt{margin-bottom:30px;font-family:'NanumSquare';font-size:21px;color:#4d4d4d;line-height:30px} .cultInfor .txt span{display:block;margin-top:10px;font-size:32px;line-height:40px} .cultInfor .txt .col1{color:#208c84} .cultInfor .txt .col2{color:#a96d38} .cultInfor .txt .col3{color:#4665b6} .s4_2_1_2_con::after{display:block;clear:both;content:''} .s4_2_1_2_con li{float:left;margin-bottom:20px;padding:0 2px;width:33.33%;height:350px} .s4_2_1_2_con li .tit{display:block;margin:25px 0 10px;color:#555;font-weight:bold} .s4_2_1_2_con.s2 li{height:auto} .s4_2_1_4_box{ width: 100%; position: relative; overflow: hidden; } .s4_2_1_4_box h2{ font-family: 'NanumSquare'; font-size: 18px; color: #333; line-height: 39px; margin-bottom: 16px; margin-top: 50px; clear: both; } .s4_2_1_4_box h2:first-child{ margin-top: 0; } .s4_2_1_4_box h2 span{ display: inline-block; height: 39px; color: #fff; padding: 0 28px; margin-right: 20px; } .s4_2_1_4_box h2 .col_1{ background: #0167b4; } .s4_2_1_4_box h2 .col_2{ background: #6e01b4; } .s4_2_1_4_box h2 .col_3{ background: #a501b4; } .s4_2_1_4_box .listBox{ overflow: hidden; } .s4_2_1_4_box dl{ width: 33%; float: left; margin-right: 0.5%; margin-bottom: 25px; } .s4_2_1_4_box dl.last, .s4_2_1_4_box dl.full{ margin-right: 0; } .s4_2_1_4_box dl.full{ width: 100%; } .s4_2_1_4_box dt span{ font-weight: bold; margin-top: 25px; display:inline-block; } .s4_02_02_02_con1{position:relative;margin-top:40px;padding-left:310px} .s4_02_02_02_con1 .photo{position:absolute;top:0;left:0;} .s4_02_02_02_con1 dl dt{position:relative;margin-bottom:25px;padding-bottom:20px;font-family:'NanumSquare';font-size:32px;color:#333;font-weight:bold} .s4_02_02_02_con1 dl dt::before{position:absolute;left:0;bottom:0;width:48px;height:1px;content:'';background:#333} .s4_02_02_02_con1 dl dd{margin-bottom:40px} .s4_02_02_02_con1 dl dd ul li{position:relative;padding:5px 20px 5px 160px} .s4_02_02_02_con1 dl dd ul li:nth-child(2n+1){background:#ededed} .s4_02_02_02_con1 dl dd ul li .year{position:absolute;top:5px;left:20px} .s4_02_02_02_con1 dl dt:first-child + dd ul li:nth-child(2n){background:#ededed} .s4_02_02_02_con1 dl dt:first-child + dd ul li:nth-child(2n+1){background:none} .s4_02_02_02_con2{position:relative;margin-top:40px;padding-left:450px} .s4_02_02_02_con2 .photo{position:absolute;top:0;left:0;} .s4_02_02_02_con2 .txt{position:relative;margin-bottom:40px;padding-bottom:20px;font-family:'NanumSquare';font-size:32px;color:#333;line-height:40px} .s4_02_02_02_con2 .txt::before{position:absolute;left:0;bottom:0;width:48px;height:1px;content:'';background:#333} .s4_2_2_4_box .imgBox{ margin-bottom: 15px; } .s4_2_2_4_box .imgBox, .s4_2_2_4_box .imgBox ul{ display: block; overflow: hidden; position: relative; width: 100%; } .s4_2_2_4_box .list_2 li{ width: 49%; float: left; margin-right: 2%; } .s4_2_2_4_box .list_3 li{ width: 32%; float: left; margin-right: 2%; } .s4_2_2_4_box .imgBox li:last-child{ margin-right: 0; } .s4_2_2_4_box .txtBox h3{ margin: 10px 0 5px 0; } .s4_2_2_4_box .txtBox p{ margin-bottom: 10px; display: block; } /* 박기종 */ .s4_2_3_con{padding:40px;background:#fff} .s4_2_3_con .box{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #d5d5d5} .s4_2_3_con .box::after{display:block;clear:both;content:''} .s4_2_3_con .box .photo{float:left;margin-right:50px;text-align:center;line-height:18px} .s4_2_3_con .box .photo img{display:block;margin-bottom:5px} .s4_2_3_con .box .txt{display:block;margin-bottom:20px;font-size:18px;color:#005fca;font-weight:bold} .s4_2_6_1_box{ width: 100%; position: relative; overflow: hidden; margin-top: 40px; } .s4_2_6_1_box .imgBox{ width: 47.5%; margin-right: 5%; float: left; } .s4_2_6_1_box .imgBox:nth-child(2n+2){ margin-right: 0; } .s4_2_6_1_box .imgBox p{ margin-bottom: 26px; } .s4_2_7con{position:relative;margin-bottom:65px} .s4_2_7con .txt{position:absolute;bottom:-45px;right:30px;padding:60px 35px;width:340px;height:274px;color:#fff;background:#4665b6 url('/img/tour/coner_bg.png') no-repeat right top} .s4_2_7con .txt span{display:block;margin-bottom:40px;font-size:14px;opacity:0.65;word-spacing: 10px;font-weight:bold} .s4_2_7con .txt p{font-size:18px;} .s4_2_7con .txt p b{display:block;font-size:32px;line-height:40px} .s4_2_7con .btn{position:absolute;left:5px;bottom:-10px} .s4_2_7con .txt.bg2{background-color:#806259} .tourView.bg_w{ background: #fff; } .tourView .infor dd .btn a.red.mg{ margin-right: 1px; } .imgListBox_3{ width: 100%; position: relative; overflow: hidden; margin-top: 50px; } .imgListBox_3 li{ float: left; width: 33%; margin-right: 0.5%; } .imgListBox_3 li:nth-child(3n+3){ margin-right: 0; } .imgListBox_3 li span{ display: block; margin-top: 20px; font-weight: bold; } .s4_2_7con .txt.s4_2_8_1{ background: #000 url('/img/tour/sub/s4_2_8_1_bg01.png') right top no-repeat; } .s4_2_7con .txt.s4_2_8_1 span{ display: block; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden; opacity: 1; background: url('/img/tour/sub/s4_2_8_1_bg02.jpg') center center no-repeat } .s4_03_01_01_con{position:relative;margin-top:40px;padding-left:450px} .s4_03_01_01_con .photo{position:absolute;top:0;left:0;} .s4_03_01_01_con .txt1{position:relative;margin-bottom:40px;padding-bottom:20px;font-family:'NanumSquare';font-size:32px;color:#333;line-height:40px} .s4_03_01_01_con .txt1::before{position:absolute;left:0;bottom:0;width:48px;height:1px;content:'';background:#333} .s4_03_01_01_con .txt2{margin-top:20px;padding:5px 10px;background:#ededed} .s4_3_1_2con1{padding:30px 20px;height:100px;background:#e7e7e7;border-radius:50px} .s4_3_1_2con1 ul{position:relative;margin:0 auto;width:80%;text-align:center} .s4_3_1_2con1 ul::after{position:absolute;top:5px;left:50%;margin-left:-47%;width:95%;height:1px;content:'';background:#000} .s4_3_1_2con1 ul li{position:relative;float:left;width:25%;padding-top:25px;color:#000} .s4_3_1_2con1 ul li::before{position:absolute;top:0;left:50%;margin-left:-6px;width:12px;height:12px;content:'';background:#000;border-radius:50%} .s4_3_1_2con2{position:relative;margin-bottom:50px;padding:20px 0 0 450px;} .s4_3_1_2con2 .photo{position:absolute;top:0;left:0} .s4_3_1_2con2 h3{position:relative;margin-bottom:40px;padding-bottom:20px;font-size:32px} .s4_3_1_2con2 h3::before{position:absolute;left:0;bottom:0;width:48px;height:1px;content:'';background:#333} .s4_3_1_2con2 p{margin-bottom:30px} .s4_3_1_2con2 p .tit{display:block;margin-bottom:20px;font-size:18px;color:#333;font-weight:bold} .s4_3_1_2con2 h4{margin-bottom:20px} .s4_3_1_2con2 ul::after{display:block;clear:both;content:''} .s4_3_1_2con2 ul li{float:left;padding-right:8px;width:50%} .s4_3_1_2con2 ul li img{display:block;margin-bottom:15px} .s4_3_1_2con3 h4{margin-bottom:20px} .s4_3_1_2con3 ul::after{display:block;clear:both;content:''} .s4_3_1_2con3 ul li{float:left;padding-right:8px;height:420px;width:33.33%} .s4_3_1_2con3 ul li .tit{display:block;font-weight:bold} .s4_3_1_2con3 ul li img{margin-bottom:20px} .s4_3_2_box .topBox{ width: 100%; position: relative; padding: 30px 100px 25px 100px; background: #e7e7e7; border-radius: 45px; } .s4_3_2_box .topBox ul{ width: 100%; position: relative; overflow: hidden; padding-top: 23px; } .s4_3_2_box .topBox ul::after{ content: ""; display: inline-block; position: absolute; top: 5px; left: 0; width: 100%; height:1px ; background: #222; } .s4_3_2_box .topBox ul li{ width: 25%; float: left; position: relative; color: #222; text-align: center; } .s4_3_2_box .topBox ul li::after{ content: ""; display: inline-block; position: absolute; top: -23px; left: 50%; margin-left: -6px; border-radius: 50%; width: 12px; height: 12px; background: #222; } .s4_3_2_box dl{ margin-top:80px; padding-left: 450px; position: relative; min-height: 292px; } .s4_3_2_box dl img{ position: absolute; top:0; left: 0; } .s4_3_2_box dt{ font-family: 'NanumSquare'; font-size: 32px; margin-bottom: 55px; position: relative; color: #333; padding-top: 10px; font-weight: bold; line-height: 1.3; } .s4_3_2_box dt::after{ width: 48px; height: 1px; content: ""; display: inline-block; position: absolute; bottom: -20px; left: 0; background: #555; } .s5_3_box .mapInfo{ height: 89px; line-height: 89px; padding: 0 20px; } .s5_3_box .mapInfo .size{ right: 195px; top: 18px; } .s5_3_box .mapInfo .print{ top: 18px; background: #3e4452; } .s5_3_box .mapInfo a:focus{outline:2px dashed #000000} /*접근성 선명확*/ .s5_4_box .bbs_blog dt{ display: inline-block; font-family: 'NanumSquare'; padding-right: 20px; position: relative; } .s5_4_box .bbs_blog dt::after{ position:absolute; top:3px; right:0; width:13px; height:16px;content:''; background:url('/img/tour/com_tour.png') no-repeat -310px -300px } /* 역사문화해설 갤러리 상세 */ .historyGallView dl{position:relative;padding:0 500px 0 60px;min-height:380px;color:#fff;background:url('/img/tour/s4_7_view_bg.jpg') no-repeat left top} .historyGallView dl .photo{position:absolute;top:0;right:0;width:450px;overflow:hidden} .historyGallView dl dt{margin-bottom:25px;font-family:'NanumSquare';font-size:32px;font-weight:bold} .historyGallView dl dt span{display:block;margin-bottom:50px;padding-top:30px;width:80px;height:75px;font-size:32px;font-weight:bold;text-align:center;background:#0d3276} .historyGallView dl dd.con{padding-right:10px;height:165px;overflow:auto} /* ================================================================================ 반응형 콘텐츠(서브콘텐츠) ================================================================================ */ /* PC Device */ @media all and (min-width:1025px){ } /* Tablet Device */ @media all and (max-width:1024px){ .mapSearch .mapInfor{display:none} .mapSearch .mapSelect{float:none;width:100%} .mapSearch .mapSelect dd ul li{width:20%} .mapSearch .mapSelect dd ul.themaSel li{width:14.285%} .courseCon .courseList{padding:60px 40px 50px} .s3_1_con .monthFest ul li img{width:100%} .s3_1_con .monthFest ul li.last{width:100%} .s3_1_con .monthFest ul li.festTxt{width:100%} .historyGallView dl{padding:30px;background-position:right top;background-size:cover} .historyGallView dl dt{margin-bottom:50px;padding-left:80px} .historyGallView dl dt span{position:absolute;top:0;left:0} .historyGallView dl .photo{position:relative;margin-bottom:20px;width:auto;text-align:center} .historyGallView dl dd.con{padding-right:0;height:auto} } /* Mobile Device */ @media all and (max-width:760px){ .mapSearch{padding:20px} .mapSearch .mapSelect dd ul.themaSel li{width:25%} .courseCon h2{font-size:30px} .courseCon h2 .col2{font-size:20px} .courseMap{height:350px} .s3_1_con h2{margin-bottom:30px;font-size:35px} .s3_1_con .monthFest ul li{width:50%} .s4_2_1_2_con li{width:50%} .s4_02_02_02_con1{padding-left:250px} .s4_02_02_02_con1 .photo{width:200px} .s4_02_02_02_con2{padding-left:0;} .s4_02_02_02_con2 .photo{position:relative;margin-bottom:20px;text-align:center} .s4_02_02_02_con2 .txt{font-size:28px;line-height:32px} .s4_2_2_4_box .imgBox{ text-align: center; } .s4_2_2_4_box .imgBox li{ width: 100%; margin-right: 0; margin-bottom: 10px; } .s4_03_01_01_con{padding-left:0;} .s4_03_01_01_con .photo{position:relative;margin-bottom:20px;text-align:center} .s4_03_01_01_con .txt{font-size:28px;line-height:32px} .s4_3_1_2con2{padding:0} .s4_3_1_2con2 .photo{position:relative;margin-bottom:30px;text-align:center} .s4_3_2_box .topBox{ padding: 50px 25px; } .s4_3_2_box .topBox ul::after{ height: 100%; width: 1px; top:0; left:20px; } .s4_3_2_box .topBox ul li{ width: 100%; margin-bottom: 30px; text-align: left; padding-left: 35px; } .s4_3_2_box .topBox ul li::after{ left: 21px; top:5px; } .s4_3_2_box dl{ padding-left: 0; } .s4_3_2_box dl img{ position: relative; margin-bottom: 15px; width: 100%; } .s4_3_2_box dt{ margin-bottom: 35px; } .s4_3_2_box dt::after{ bottom: -15px; } .s5_3_box .mapInfo{ padding: 20px !important; height: auto; line-height: 1; } .s5_3_box .mapInfo > span{ text-align: left; display: block; margin-bottom: 10px; } .s5_3_box .mapInfo .size{ width: 49%; float: left; position: relative; margin-right: 2%; top: inherit; right: inherit; } .s5_3_box .mapInfo .print{ width: 49%; float: left; position: relative; top: inherit; right: inherit; } .blogReview ul li{width:50%} } /* Mobile Device */ @media all and (max-width:640px){ .subhotCon .control .prev, .subhotCon .control .next{display:none} .subhotCon .btnPos{bottom:0;right:0;z-index:30} .subhotCon .control{position:relative;margin-top:5px} .subhotCon .control button{width:36px;height:36px} .tour_infor ul{border-bottom:0} .tour_infor ul li{float:none;width:100%;border-bottom:1px solid #d5d5d5} .tourLocation .root_daum_roughmap .wrap_map{height:250px !important} .tourLocation .mapInfo{padding:10px;text-align:right;} .tourLocation .mapInfo .btnMore{position:relative;top:0;right:0;display:inline-block;} .tourLocation .public > ul > li{padding:20px 0} .tourLocation .public > ul > li::before{display:none} .around_infor > li{padding:20px} .around_infor > li .name{position:relative;top:0;left:0;display:block;margin-bottom:15px} .around_infor > li .name::after{display:none} .tourTopTxt p{height:130px;font-size:30px;line-height:35px} .tourTopTxt p span{font-size:20px} .courseCon h2{line-height:35px} .courseCon h2 .col2{display:block} .courseCon .courseList{padding:30px 20px 30px} .courseViewList li{margin-bottom:40px;padding:0 0 0 40px;} .courseViewList li dl{padding:0} .courseViewList li dl dd.photo{position:relative;margin-bottom:10px;width:100%;text-align:center} .s3_1_con h2{font-size:25px;line-height:30px} .topTxt .txt{position:relative;padding:20px;width:100%;height:auto} .topTxt .txt span{margin-bottom:20px} .topTxt .txt p b{font-size:25px} .cultInfor .txt span{font-size:25px;line-height:32px} .s4_2_1_2_con li{height:300px} .s4_02_02_02_con1{padding:0} .s4_02_02_02_con1 .photo{position:relative;margin-bottom:20px;width:100%;text-align:center} .s4_2_3_con{padding:20px} .s4_2_3_con .box .photo{margin-right:20px} .s4_2_7con .txt{position:relative;right:0;bottom:0;padding:30px 20px;width:100%;height:auto} .s4_2_7con .txt span{margin-bottom:20px} .s4_2_7con .btn{left:auto;right:5px;bottom:-15px} .s4_2_7con .txt.s4_2_8_1 span{ background: none; text-indent: 0; line-height: 1.3; font-size: 24px; } .s4_3_1_2con3 ul li{margin-bottom:30px;width:100%;height:auto} .s4_3_1_2con3 ul li .photo{display:block;text-align:center} .historyGallView dl{padding: 20px;} .historyGallView dl dt{margin-bottom:35px;padding-left:60px;font-size:26px} .historyGallView dl dt span{padding:0;width:60px;height:60px;font-size:25px;line-height:60px} .hotStreet li{padding:20px 0} .hotStreet li::after{left:0} .hotStreet li:first-child::before{left:0} .hotStreet li .photo{position:relative;display:block;margin:0 auto 30px} } /* Mobile Device */ @media all and (max-width:450px){ .courseCon .courseList ol.line1::before{display:none} .courseCon .courseList ol.kan6 li, .courseCon .courseList ol.kan5 li, .courseCon .courseList ol.kan4 li, .courseCon .courseList ol.kan3 li, .courseCon .courseList ol.kan2 li{width:100%} .courseCon .courseList ol li{margin-bottom:0;padding:20px 0 30px 0;text-align:center;background: url('/img/tour/course_line.png') repeat-y center top} .courseCon .courseList ol li span{display:inline-block;background:#f6f6f6} .courseCon .courseList ol li::after{display:none} .courseCon .courseList ol.line2 li:last-child::after{display:none} .courseCon .courseList ol li::before{top:0;margin-left:-7px} .s3_1_con .monthFest ul li{width:100%} .s4_2_1_4_box h2 span{ display: block; margin-right: 0; } .s4_2_1_4_box dl{ width: 100%; margin-right: 0 !important; } .s4_2_1_4_box dl img{ width: 100%; } .s4_2_6_1_box .imgBox{ width: 100%; margin-right: 0; } .s4_2_6_1_box .imgBox p{ margin: 25px 0; } .imgListBox_3 li{ width: 100%; margin-right: 0; margin-bottom: 30px; } .imgListBox_3 li img{ width: 100%; } .blogReview ul li{width:100%;} .blogReview ul li dl{height:auto} }