/* base.css */ @charset "utf-8"; /* 전라남도투어 BASE STYLE WRITER : Su Jean, J Last Modify Date : 2019. 03. 19. */ @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; src: url(../fonts/NotoSansKR-Thin.woff2) format("woff2"), /* Modern Browsers */ url(../fonts/NotoSansKR-Thin.woff) format("woff"), /* Modern Browsers */ url(../fonts/NotoSansKR-Thin.otf) format("opentype"); /* Safari, Android, iOS */ } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(../fonts/NotoSansKR-Light.eot); /* IE9 Compat Modes */ src: url(../fonts/NotoSansKR-Light.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */ url(../fonts/NotoSansKR-Light.woff2) format("woff2"), /* Modern Browsers */ url(../fonts/NotoSansKR-Light.woff) format("woff"), /* Modern Browsers */ url(../fonts/NotoSansKR-Light.otf) format("opentype"); /* Safari, Android, iOS */ } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(../fonts/NotoSansKR-Regular.eot); /* IE9 Compat Modes */ src: url(../fonts/NotoSansKR-Regular.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */ url(../fonts/NotoSansKR-Regular.woff2) format("woff2"), /* Modern Browsers */ url(../fonts/NotoSansKR-Regular.woff) format("woff"), /* Modern Browsers */ url(../fonts/NotoSansKR-Regular.otf) format("opentype"); /* Safari, Android, iOS */ } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(../fonts/NotoSansKR-Medium.eot); /* IE9 Compat Modes */ src: url(../fonts/NotoSansKR-Medium.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */ url(../fonts/NotoSansKR-Medium.woff2) format("woff2"), /* Modern Browsers */ url(../fonts/NotoSansKR-Medium.woff) format("woff"), /* Modern Browsers */ url(../fonts/NotoSansKR-Medium.otf) format("opentype"); /* Safari, Android, iOS */ } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(../fonts/NotoSansKR-Bold.eot); /* IE9 Compat Modes */ src: url(../fonts/NotoSansKR-Bold.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */ url(../fonts/NotoSansKR-Bold.woff2) format("woff2"), /* Modern Browsers */ url(../fonts/NotoSansKR-Bold.woff) format("woff"), /* Modern Browsers */ url(../fonts/NotoSansKR-Bold.otf) format("opentype"); /* Safari, Android, iOS */ } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline;} input, select, textarea, button {margin:0; padding:0; font-size:100%;} em, address {font-style:normal;} article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {display:block;} html { position:relative;} body {font-size: 1em; font-weight: 400; line-height: 1.1; font-family: 'Noto Sans KR','맑은 고딕','Malgun Gothic','돋움','dotum','sans-serif'; -webkit-text-size-adjust:none;} article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; } ol, ul { list-style: none; } legend { position:absolute; left:0; top:0; width:1px; height:1px; text-indent:-10000px; overflow:hidden; } button, input, select {border-radius:0;/*-webkit-appearance:none; -moz-appearance:none;*/} input, select, textarea {vertical-align:middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} h1, h2, h3, h4, h5, h6 {font-size:1em;} h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin: 0;} img, fieldset {border:0 none;} img {max-width: 100%;vertical-align: middle; border: 0 none; margin: 0; padding: 0; } hr { display: none;margin:0;padding:0;border:0 } button {text-transform: none; vertical-align: middle; border: 0 none; background-color: transparent; cursor: pointer; } a {color:#000; text-decoration: none;} a:link, a:visited {text-decoration:none;} a:hover, a:focus, a:active {text-decoration:none;} a img {border:0;padding:0;} table {margin:0; border-collapse:collapse; border-spacing:0; font-size:15px; font-size:0.9725rem; } table caption { overflow:hidden; left:0; right:0; width:1px; height:1px; margin-left:-9999px; text-indent:-9999px; } /* clearfix */ .clearfix:after { display: block; clear: both; content: "."; visibility: hidden; height: 0; font-size:0} .clearfix {display: inline-block;} .clearfix {display: block;} /* Other Class Style */ /* ul.ClearBoth li {float:none !important;} ul.FloatRight {float:right;} ul.FloatLeft li {float:left;} ul.BackgroundNone li {background:none !important;} */ .AlignLeft {text-align:left !important;} /* .AlignCenter {text-align:center !important;} .AlignRight {text-align:right !important;} .ValignTop {vertical-align:top !important;} .ValignMiddle{vertical-align:middle !important;} .ValignBottom {vertical-align:bottom !important;} .DisplayBlock {display:block;} .DisplayNone {display:none;} .VisibleHidden { visibility:hidden; } .FloatLeft {float:left;} .FloatRight {float:right;} .ClearBoth {clear:both;} .BackgroundNone {background:none !important;} .BorderNone {border:none !important;} .BorderRightNone {border-right:none !important;} .PaddingNone {padding:0 !important;} .MarginNone {margin:0 !important;} .FontWeightNormal {font-weight:normal !important;} .FontWeightBold {font-weight:bold !important;} .nowrap {white-space:nowrap;} */ /* SKIP NAVIGATION */ .skipNav {position:absolute; width:100%; z-index:999;} .skipNav a {position:absolute; display:block; left:0; top:0; width:1px; height:1px; margin:-10000px 0 0 -10000px; padding:0; background-color:#033477; text-align:center; overflow:hidden; color:#fff; font-weight:bold;} .skipNav a:hover, .skipNav a:active, .skipNav a:focus {margin:0; width:100%; height:auto; padding:10px;} /* HIDDEN TEXT */ .blind{position:absolute; left:-10000px; width:1px; height:1px; clip: rect(0, 0, 0, 0); overflow:hidden; border:0;} /* Global SPACE */ /* .MAL0 {margin-left:0px !important;} .MAL5 {margin-left:5px !important;} .MAL10 {margin-left:10px !important;} .MAL15 {margin-left:15px !important;} .MAL20 {margin-left:20px !important;} .MAL25 {margin-left:25px !important;} .MAL30 {margin-left:30px !important;} .MAL35 {margin-left:35px !important;} .MAL40 {margin-left:40px !important;} .MAL45 {margin-left:45px !important;} .MAL50 {margin-left:50px !important;} .MAL60 {margin-left:60px !important;} .MAL70 {margin-left:70px !important;} .MAR5 {margin-right:5px !important;} .MAR10 {margin-right:10px !important;} .MAR15 {margin-right:15px !important;} .MAR20 {margin-right:20px !important;} .MAR25 {margin-right:25px !important;} .MAR30 {margin-right:30px !important;} .MAR35 {margin-right:35px !important;} .MAR40 {margin-right:40px !important;} .MAB0 {margin-bottom:0px !important;} .MAB5 {margin-bottom:5px !important;} .MAB10 {margin-bottom:10px !important;} .MAB15 {margin-bottom:15px !important;} */ .MAB20 {margin-bottom:20px !important;}/*필요*/ /* .MAB25 {margin-bottom:25px !important;} .MAB30 {margin-bottom:30px !important;} .MAB35 {margin-bottom:35px !important;} .MAB40 {margin-bottom:40px !important;} .MAT0 {margin-top:0 !important;} .MAT5 {margin-top:5px !important;} .MAT10 {margin-top:10px !important;} .MAT15 {margin-top:15px !important;} .MAT20 {margin-top:20px !important;} .MAT25 {margin-top:25px !important;} .MAT30 {margin-top:30px !important;} .MAT35 {margin-top:35px !important;} .MAT40 {margin-top:40px !important;} .MAT50 {margin-top:50px !important;} .MAT55 {margin-top:55px !important;} .MAT60 {margin-top:60px !important;} .MAT-5 {margin-top:-5px !important;} .MAT-10 {margin-top:-10px !important;} .MAT-15 {margin-top:-15px !important;} .MAT-20 {margin-top:-20px !important;} .MAT-25 {margin-top:-25px !important;} .MAT-30 {margin-top:-30px !important;} .MAT-35 {margin-top:-35px !important;} .MAT-40 {margin-top:-40px !important;} */ /* .PAL5 {padding-left:5px !important;} .PAL10 {padding-left:10px !important;} .PAL15 {padding-left:15px !important;} .PAL20 {padding-left:20px !important;} .PAL25 {padding-left:25px !important;} .PAL30 {padding-left:30px !important;} .PAL35 {padding-left:35px !important;} .PAL40 {padding-left:40px !important;} .PAL45 {padding-left:45px !important;} .PAL50 {padding-left:50px !important;} */ /* .PAR5 {padding-right:5px !important;} .PAR10 {padding-right:10px !important;} .PAR15 {padding-right:15px !important;} .PAR20 {padding-right:20px !important;} .PAR25 {padding-right:25px !important;} .PAR30 {padding-right:30px !important;} .PAR35 {padding-right:35px !important;} .PAR40 {padding-right:40px !important;} */ /* .PAT5 {padding-top:5px !important;} .PAT10 {padding-top:10px !important;} .PAT15 {padding-top:15px !important;} .PAT20 {padding-top:20px !important;} .PAT25 {padding-top:25px !important;} .PAT30 {padding-top:30px !important;} .PAT35 {padding-top:35px !important;} .PAT40 {padding-top:40px !important;} */ /* .PAB0 {padding-bottom:0 !important;} .PAB5 {padding-bottom:5px !important;} .PAB10 {padding-bottom:10px !important;} .PAB15 {padding-bottom:15px !important;} .PAB20 {padding-bottom:20px !important;} .PAB25 {padding-bottom:25px !important;} .PAB30 {padding-bottom:30px !important;} .PAB35 {padding-bottom:35px !important;} .PAB40 {padding-bottom:40px !important;} */ /* .PADDING5{padding:5px !important;} .PADDING10{padding:10px !important;} .PADDING10{padding:20px !important;} .PADDING30{padding:30px !important;} .PADDING40{padding:40px !important;} .PADDING50{padding:50px !important;} */ /*임시 admin*/ /* .icon_admin {background:url('../images/main/icon_admin.gif') no-repeat 6px center;width:18px;height:14px;} .icon_admin a {font-size:0px !important;width:18px;height:14px;} */ /* content_api.css */ @charset "utf-8"; .content_api{ position: relative; width: 1112px; min-height: 740px; margin: 72px auto 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; } .border_right {border-right:1px solid #ddd !important;} .border_bottom_none {border-bottom:none !important;} .border_right_none {border-right:none !important;} .bin_box {height:80px;} /*이미지*/ .img_max {width: 100%; height: 100%;} /*공통컬러*/ .cred{color:#f32337 !important;} /*출처표시*/ .open_data_title {color: #2644a5; font-size: 15px; font-weight: 300;text-align:left;} /*커스텀 오버레이*/ /* .overlay {position: absolute;left: 0;bottom: 46px;width: 288px;height:auto;margin-left: -157px;text-align: left;overflow: hidden;font-size: 12px;} .overlay * {padding: 0;margin: 0;} .overlay .info {width: 286px;height:auto;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;} .overlay .info:nth-child(1) {box-shadow: 0px 1px 2px #888;border: 2px solid #252525;box-sizing: border-box;} .overlay ul{margin-left:10px;padding-bottom:20px;} .overlay ul li{position:relative;font-size:14px;padding-left:5px;font-weight:100;margin-bottom:5px;} .overlay ul li:before{position:absolute;top:8px;left:0; content:'';width:2px;height:2px;background-color:#7f7f7f;} .info .title {padding: 14px 0 0 10px;height: 30px;font-size:15px;font-weight: bold;} .info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');} .info .close:hover {cursor: pointer;} */ /*.info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;} .info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}*/ /*버튼*/ .btn_form {font-family: 'Noto Sans KR';display:inline-block; font-size:15px;padding:10px 20px;text-align:center;vertical-align:middle;white-space:nowrap;transition: all .3s;border:1px solid transparent;-webkit-user-select:none;-moz-user-select:none; -ms-user-select:none;-o-user-select:none;user-select:none} .btn_form.min {height:23px; padding:0 7px 3px 6px; border-radius:3px;font-size:12px;} .btn_form.sm {height:25px; line-height:25px; padding:0 12px 2px 8px;font-size:12px} .btn_form.md {font-size:13px;height:34px;line-height:31px;padding:0 15px 0px;} .btn_form.md2 {font-size:13px;height:39px;line-height:35px;padding:0 36px 4px;} .btn_form.md3 {font-size:13px;height:39px;line-height:35px;padding:0 20px;} .btn_form.lg {font-size:16px;height:62px;padding:0 20px 4px 20px;} .btn_form.full { width:100%; height:32px; padding:0 0 4px; border-radius:3px; } .btn_form.disabled, .btn_form[disabled], fieldset[disabled] .btn_form {pointer-events:none;cursor:not-allowed;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none} .btn-default {background-color:#fff;border-color:#929aaa} .btn-default:hover, .btn-default:active, .btn-default.active {border-color:#363c48;} .btn-default-light {color:#FFF;background-color:#9e9fa0;border-color:#999} .btn-default-light:hover, .btn-default-light:active, .btn-default-light.active {background-color:#999;border-color:#999; } .btn-default-dark {color:#FFF;background-color:#222;border-color:#4c5365} .btn-default-dark:hover, .btn-default-dark:active, .btn-default-dark.active {background-color:#363c48;border-color:#4c5365 } .btn-yellow {background-color:#FFCD00;border-color:#ebbc00;color:#FFF} .btn-yellow:hover, .btn-yellow:active, .btn-yellow.active{background-color:#ebbc00;border-color:#ebbc00} .btn-orange {color:#fff;background-color:#ff6600;border-color:#ff6600;} .btn-orange:hover, .btn-orange:active, .btn-orange.active{color:#fff;background-color:#DC6B2F;border-color:#DC6B2F} .btn-red {color:#fff;background-color:#cd2214;border-color:#ab1c10;} .btn-red:hover, .btn-red:active, .btn-red.active{color:#fff;background-color:#cd2214;border-color:#ab1c10} .btn-green {color:#fff !important;background-color:#008755;border-color:#1b623e} .btn-green:hover, .btn-green:active, .btn-green.active {background-color:#006633;border-color:#004c25; color:#ccffcc;} .btn-sky {color:#fff;background-color:#19b5d6;border-color:#19b5d6} .btn-sky:hover, .btn-sky:active, .btn-sky.active{color:#fff;background-color:#159fcc;border-color:#159fcc} .btn-blue {color:#fff;background-color:#005EB8;border-color:#3b63bc} .btn-blue:hover, .btn-blue:active, .btn-blue.active{color:#fff;background-color:#214fb8;border-color:#3b63bc} /* 테이블 공통 */ .table {margin:10px 0 30px;position:relative;} .table table{position:relative; width:100%} .table table:before {content:''; background:#313131; width:100%; height:1px; position:absolute; left:0; top:0} .table tbody ul {padding:0 5px} .table tbody ul li {font-size:1rem; text-align:left; padding-left:11px; position:relative; line-height:160%} .table tbody ul li:before {content:''; position:absolute; left:0; top:10px; width:3px; height:3px; background:#7f7f7f} .table tbody ul li ul {margin-bottom:7px} .table tbody ul li:last-child ul {margin-bottom:0} .table tbody ul li ul li {font-size:0.935rem} .table tbody ul li ul li:before {content:''; position:absolute; left:0; top:9px; width:5px; height:1px; background:#999} span.attach {color:#999; display:block; font-size:0.95em; margin-top:10px; text-align:right} .line-r {border-right:1px solid #ddd !important} /* 테이블 thead */ .tbl_type1 {border-collapse:collapse; font-size:1rem; width:100%} .tbl_type1 thead th, .tbl_type1 tfoot th {font-size:15px;background:#f9f9fb; border-bottom:1px solid #cad0d6; border-right:1px solid #ddd; color:#333; font-weight:700; text-align:center; line-height:150%; padding:12px 5px;vertical-align: middle;} .tbl_type1 tbody th {background:#f9f9fb; border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#333; font-weight:500; text-align:center;vertical-align: middle; padding:10px 3px;} .tbl_type1 tbody td {border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; color:#666; text-align:center; line-height:150%; padding:12px 5px; vertical-align:middle} .tbl_type1 thead th:last-child, .tbl_type1 tbody tr th:last-child, .tbl_type1 tbody tr td:last-child, .tbl_type1 tfoot th:last-child {border-right:none;} /* 테이블 thead */ .tbl_type3 {border-top:1px solid #313131;border-collapse:collapse; font-size:1rem; width:100%} .tbl_type3 thead th, .tbl_type1 tfoot th {font-size:15px;background:#f9f9fb; border-bottom:1px solid #cad0d6; border-right:1px solid #ddd; color:#333; font-weight:700; text-align:left; line-height:150%; padding:12px 5px;vertical-align: middle;} .tbl_type3 tbody th {background:#f9f9fb; border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#333; font-weight:500; text-align:left;vertical-align: middle; padding:10px 15px;} .tbl_type3 tbody td {border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#666; text-align:left; line-height:150%; padding:12px 15px; vertical-align:middle} .tbl_type3 thead th:last-child, .tbl_type3 tbody tr th:last-child, .tbl_type3 tbody tr td:last-child, .tbl_type3 tfoot th:last-child {border-right:none} /* 테이블 thead 물대표 지역선택 */ .tbl_type2 {border-collapse:collapse;width:100%;border-top:2px solid #434040;} .tbl_type2 thead th, .tbl_type2 tfoot th {border-bottom:1px solid #cad0d6;color:#333; font-weight:700; text-align:center; line-height:150%; padding:7px 5px;vertical-align: middle;} .tbl_type2 tbody th {background:#f9f9fb; border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#333; font-weight:500; text-align:center;vertical-align: middle; padding:7px 3px;} .tbl_type2 tbody td {border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#666; text-align:center; line-height:150%; padding:7px 5px; vertical-align:middle} .tbl_type2 thead th:last-child, .tbl_type2 tbody tr th:last-child, .tbl_type2 tbody tr td:last-child, .tbl_type2 tfoot th:last-child {border-right:none} /*탭리스트*/ .api_tab {margin:0px 0 35px 0;/*border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;*/padding-top:45px;} .api_tab ul {width:100%;} .api_tab ul li {display:inline-block;position: relative; padding:0 25px;} .api_tab li:before {content: ''; position: absolute; top: 37%; left: 0; width: 1px; height: 16px; background-color: #d6d6d6;} .api_tab li:first-child:before {content: none;} .api_tab ul li a {position: relative;display: block;padding:4px 0;font-size:18px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;} .api_tab li.active a, .api_tab li a:hover, .api_tab li a:focus {color: #4e6bc8;} .api_tab li.active a:after, .api_tab li a:hover:after, .api_tab li a:focus:after {content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #4e6bc8;} /*공통타이틀*/ .api_Tit {padding:30px 0 37px 0;font-size: 30px; font-weight: 500;} .api_Tit02 {padding:0px 0 37px 0;font-size: 30px; font-weight: 500;} /*현재날씨*/ .weather_today {background:#fafafa url('../images/content/map_img01.png') no-repeat center 80%;min-height:780px;overflow: hidden;border-radius:3px;border:1px solid #e5e5e5;box-sizing:border-box;margin-bottom:70px;} .weather_today .wtr_point {position:relative;padding:32px 10px 15px 42px;color:#010101;text-align:left;font-weight:500;line-height:23px;} .weather_today .wtr_point:before {display:block;content:"";background:url('../images/content/ico_point.png') no-repeat left center;width:20px;height:20px;position:absolute;top:34px;left:16px;} .weather_today ul {position: relative;/*overflow: hidden;*/} .weather_today ul li {background:#fff;border-radius:5px;width:150px;height:74px;padding: 6px 0;} .weather_today ul li:nth-child(1) {position:absolute;top:68px;left:55px;} .weather_today ul li:nth-child(2) {position:absolute;top:40px;left:216px;} .weather_today ul li:nth-child(3) {position:absolute;top:40px;left:370px;} .weather_today ul li:nth-child(4) {position:absolute;top:40px;left:528px;} .weather_today ul li:nth-child(5) {position:absolute;top:40px;left:684px;} .weather_today ul li:nth-child(6) {position:absolute;top:68px;left:842px;} .weather_today ul li:nth-child(7) {position:absolute;top:163px;left:930px;} .weather_today ul li:nth-child(8) {position:absolute;top:248px;left:930px;} .weather_today ul li:nth-child(9) {position:absolute;top:333px;left:930px;} .weather_today ul li:nth-child(10) {position:absolute;top:418px;left:930px;} .weather_today ul li:nth-child(11) {position:absolute;top:503px;left:930px;} .weather_today ul li:nth-child(12) {position:absolute;top:589px;left:930px;} .weather_today ul li:nth-child(13) {position:absolute;top:612px;left:758px;} .weather_today ul li:nth-child(14) {position:absolute;top:612px;left:591px;} .weather_today ul li:nth-child(15) {position:absolute;top:612px;left:424px;} .weather_today ul li:nth-child(16) {position:absolute;top:612px;left:257px;} .weather_today ul li:nth-child(17) {position:absolute;top:589px;left:90px;} .weather_today ul li:nth-child(18) {position:absolute;top:503px;left:35px;} .weather_today ul li:nth-child(19) {position:absolute;top:418px;left:35px;} .weather_today ul li:nth-child(20) {position:absolute;top:333px;left:35px;} .weather_today ul li:nth-child(21) {position:absolute;top:248px;left:35px;} .weather_today ul li:nth-child(22) {position:absolute;top:163px;left:35px;} .weather_today ul li div {width:50%;margin:0 auto;} .weather_today ul li div:first-child {text-align:center;vertical-align: middle;} .weather_today ul li .wea_area {color:#666;font-size: 15px;} .weather_today ul li .wea_temp {color: #222;display: block;font-size: 20px;font-weight: 700;line-height: 20px;} .weather_today ul li span {display:block;} .weather_today ul li .wea_wind {clear: both;color: #4a5b94;display: block;font-size: 13px;position:relative;line-height:28px;} .weather_today ul li .wea_wind img{margin-bottom:3px;} .weather_today ul li:nth-child(2n+1) {background:#fffdf0} /*지역별 기상특보*/ .region_weather {padding:0px 0 50px 0;} .region_weather h3 {padding:30px 0 30px 0; font-size: 34px; font-weight: 500;} .region_weather .text {text-align:right;color:#555453;font-weight:300;} .region_weather .bg_point01 {background-color:#e9f3ff;} .region_weather .bg_point02 {background-color:#e9eefa;} .region_weather .search_wrap_weather {min-height:120px;background-color:#fafafa;border:1px solid #dcdcdc;box-sizing:border-box;} .region_weather .search_wrap_weather .group{padding-top:37px;width:60%;margin-left:auto;margin-right:auto;position:relative;white-space:nowrap;display:table;} .region_weather .search_wrap_weather .group label{width:60%;font-weight:500;margin-right:10px;} .region_weather .search_wrap_weather .group select{padding:0 7px 2px 12px;height:44px;cursor: pointer; min-width: 90px;width:50%;border:1px solid #c2c2c2;/*background:#fff url(../images/content/search_wrap_weather_line.png) no-repeat right center; */font-family: 'Noto Sans KR';box-sizing:border-box;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;} ::-ms-backdrop, .region_weather .search_wrap_weather .group select {height:39px !important;} .region_weather .search_wrap_weather .group select:hover{outline:0;border-color:#888;box-shadow:0 0 6px rgba(0,0,0,.2)} p.wtr_hour {background: #565b6a;color: #fff;position: relative;left: -18px;top: 0px;width: 20px;padding: 0 3px;border-radius:4px;} p.wtr_degree {background: #f44336;color: #fff;position: relative;right:17px;top: 0px;width: 20px;padding: 0 3px;word-break: keep-all;} p.wtr_win_direct {position: relative;right:17px;top: 0px;width: 20px;padding: 0 3px;} p.wtr_wind {background: #3477d1;color: #fff;position: relative;right:17px;top: 0px;width: 20px;padding: 0 3px;} p.wtr_humidity {background: #10a44b;color: #fff;position: relative;right:17px;top: 0px;width: 20px;padding: 0 3px;} /*주간예보*/ .region_weather .cred{color:#f32337;} .region_weather .csky {color:#2277ce;} /*물때표*/ .tide_time_wrap {margin-top:20px;position:relative;border-radius:3px;z-index:0;border:1px solid #bfbfbf;min-height:510px;} .tide_time_wrap .map_area{position:absolute; left:0; top:0; width:60%; height:100%; border:0 none; z-index: 1;} .tide_time_wrap .map_area article{height:80px;} .tide_time_wrap .map_area article h4{position: relative;padding:34px 0 0 66px;text-align:left;font-weight:500;font-size:17px;} .tide_time_wrap .map_area article h4:before {content:'';position:absolute;top:20px;left:26px;width:35px;height:40px;background:url('../images/icon_tide_time.gif') no-repeat left 4px;} .tide_time_wrap .map_deail {padding-left:60%;} .tide_time_wrap .map_deail article{height:80px;background:linear-gradient(to right, rgba(70, 153, 221, 1), rgba(70, 126, 225, 1));} .tide_time_wrap .map_deail article ul {color:#fff;padding:34px 20px 0 20px;} .tide_time_wrap .map_deail article ul li {float:left;} .tide_time_wrap .map_deail article ul li:last-child {float:right;} .tide_time_wrap .map_deail article ul #dateInfo { cursor: pointer; /* 클릭 가능한 커서 스타일 설정 */ } /*위치지도 지역선택 지도*/ aside.relate_site {position:absolute;right:20px;top:15px;z-index:10;} aside.relate_site div {float:left;width:483px;height:auto;position:relative;box-sizing:border-box;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;} aside.relate_site div a.button {border:1px solid #c5c7c8;border-radius:3px;display:block;color:#858585;text-align:left;padding:0 17px;height:50px;line-height:50px;position:relative;font-size:14px;} aside.relate_site div a.button:hover{outline:0;border-color:#888;box-shadow:0 0 6px rgba(0,0,0,.2)} aside.relate_site div a.button span {position:absolute;right:10px;top:50%;margin-top:-4px;display:block;width:11px;height:6px; background:url('../images/content/relate_bul.gif') no-repeat center 50%;-webkit-transform: rotate(0deg); transform: rotate(0deg);-webkit-transition: all .5s ease; transition: all .5s ease;} aside.relate_site div a.button.on span {-webkit-transform: rotate(180deg); transform: rotate(180deg);} aside.relate_site div ul {padding:20px 20px;width:100%;box-sizing:border-box;background:#fff;position:absolute;left:0;top:49px;z-index:10;display:none;border:1px solid #c5c7c8;border-radius:3px;box-shadow:0 0 6px rgba(0,0,0,.2);outline:0;border-color:#888;} aside.relate_site div ul li:first-child {border-top:0;} aside.relate_site div ul li a {display:block; padding:7px 10px 4px 19px; line-height:18px;} aside.relate_site div ul li a:hover {text-decoration:underline;} .tide_time_wrap .map_area .area_map {height:430px !important;}/*지도 크기*/ .tide_time_wrap .map_deail .stationInfo {padding:20px 26px;} .tide_time_wrap .map_deail .stationInfo h5{font-weight:700;font-size:25px;margin-bottom:30px;} .tide_time_wrap .map_deail .stationInfo .stationPos {text-align:left;} .tide_time_wrap .map_deail .stationInfo .stationPos dt{font-size:14px;font-weight: 100;} .tide_time_wrap .map_deail .stationInfo .stationPos dd{font-size:17px;margin:5px 0 20px 0;} .tide_time_wrap .map_deail .stationInfo .tideTimeTable{margin-top:33px;border-top:1px solid #dadadd;padding:28px 0 20px 0;} .tide_time_wrap .map_deail .stationInfo .tideTimeTable li {width:50%;height:50px;float:left;line-height:38px;margin-bottom:15px;font-weight: 300;} .tide_time_wrap .map_deail .stationInfo .tideTimeTable li span.time{display: inline-block;padding:0 15px 0 0px;} .tide_time_wrap .map_deail .stationInfo .tideTimeTable li div{display: inline-block;} .tide_time_wrap .map_deail .stationInfo .tideTimeTable li div.label_tide{width:42px;height:42px;border-radius: 48px;color:#fff;font-weight:500;} .tide_time_wrap .map_deail .stationInfo .tideTimeTable li div.label_tide.label_tideLow{background-color:#f14d27;} .tide_time_wrap .map_deail .stationInfo .tideTimeTable li div.label_tide.label_tideHigh{background-color:#008eda;} .tide_time_wrap .map_deail .stationInfo .tideTimeTable li span.tide_low{display: inline-block;width:40%;color:#d52e08;} .tide_time_wrap .map_deail .stationInfo .tideTimeTable li span.tide_high{display: inline-block;width:40%;color:#008eda;} .tide_time_detail{clear:both;margin-top:50px;} .tide_time_detail h6{font-size:20px;font-weight:400;text-align:left;} .tide_time_detail .font_red{color:#ec1212;} .tide_time_detail .font_blue{color:#1745f1;} /*낚시*/ .fishing_wrap {margin-top:20px;position:relative;border-radius:3px;z-index:0;border:1px solid #bfbfbf;min-height:510px;} .fishing_wrap .map_area{position:absolute; left:0; top:0; width:60%; height:100%; border:0 none;} .fishing_wrap .map_area article{height:80px;} .fishing_wrap .map_area article h4{position: relative;padding:34px 0 0 66px;text-align:left;font-weight:500;font-size:17px;} .fishing_wrap .map_area article h4:before {content:'';position:absolute;top:20px;left:26px;width:35px;height:40px;background:url('./images/icon_tide_time.gif') no-repeat left 4px;} .fishing_wrap .map_deail {padding-left:60%;} .fishing_wrap .map_deail article{height:80px;background:linear-gradient(to right, rgba(70, 153, 221, 1), rgba(70, 126, 225, 1));} .fishing_wrap .map_deail article ul {color:#fff;padding:34px 20px 0 20px;} .fishing_wrap .map_deail article ul li {float:left;} .fishing_wrap .map_deail article ul li:last-child {float:right;} .fishing_wrap .map_area .area_map {height:510px !important;} /*지도 크기*/ .fishing_wrap .map_deail .fish_list {background:#fafafa;height:430px; overflow: auto} .fishing_wrap .map_deail .fish_list ul{text-align:left;} .fishing_wrap .map_deail .fish_list ul li{border-bottom:1px solid #d5d5d4;font-size:16px;} .fishing_wrap .map_deail .fish_list ul li:last-child{border-bottom:none;} .fishing_wrap .map_deail .fish_list ul li a{display:block;padding:10px 0 10px 20px;transition: all .3s;font-weight:300;} .fishing_wrap .map_deail .fish_list ul li a span {color:#ff3000;} .fishing_wrap .map_deail .fish_list ul li a:hover{background-color:#dbdbdb;} .fishing_wrap .map_deail .fish_list ul li a strong{font-weight:500;display:block;margin-bottom:10px;} .fishing_img {width:300px;height:250px;} .fishing_text {text-align:left;} /*공공와이파이*/ /* .icon_wifi_info {position:absolute;bottom:0px;right:40%;z-index:999;} .search_wrap_wifi label{position:absolute; width:0; height:0; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden;} .search_wrap_wifi .group{padding-top:18px;width:100%;margin-left:auto;margin-right:auto;position:relative;white-space:nowrap;display:table;} .search_wrap_wifi .group label{width:100%;color:#fff;margin-right:10px;} .search_wrap_wifi .group select{주석>background: #fff url(../images/content/search_wrap_weather_line.png) no-repeat right center; <-주석이엿음 padding:0 7px 2px 12px;height:42px;cursor: pointer; min-width: 90px;width:73%;border:1px solid #fff;font-family: 'Noto Sans KR';box-sizing:border-box;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;} .search_wrap_wifi .group select:hover{outline:0;border-color:#888;box-shadow:0 0 6px rgba(0,0,0,.2)} */ /* .wifi_list {background:#fafafa;height:430px; overflow: auto} .wifi_list p {text-align:left;margin:25px 0 20px 20px;font-size:17px;font-weight:500;border-bottom:2px solid #222;padding-bottom:10px;} .wifi_list p strong{color:#4e6bc8;} .wifi_list ul{text-align:left;} .wifi_list ul li{border-bottom:1px solid #d5d5d4;font-size:16px;} .wifi_list ul li:last-child{border-bottom:none;} .wifi_list ul li a{display:block;padding:10px 0 10px 70px;font-weight:300;} .wifi_list ul li a span {color:#ff3000;} .wifi_list ul li a strong{font-weight:500;display:block;margin-bottom:10px;} .wifi_list ul li.sk {background:url(../images/content/wifi/icon_sk.png) no-repeat 23px 7px;} .wifi_list ul li.sk a:hover{background:#dbdbdb url(../images/content/wifi/icon_sk.png) no-repeat 23px 7px;} .wifi_list ul li.kt {background:url(../images/content/wifi/icon_kt.png) no-repeat 23px 7px;} .wifi_list ul li.kt a:hover {background:#dbdbdb url(../images/content/wifi/icon_kt.png) no-repeat 23px 7px;} .wifi_list ul li.lg {background:url(../images/content/wifi/icon_lg.png) no-repeat 23px 7px;} .wifi_list ul li.lg a:hover{background:#dbdbdb url(../images/content/wifi/icon_lg.png) no-repeat 23px 7px;} .wifi_list ul li.etc {background:url(../images/content/wifi/icon_etc.png) no-repeat 23px 7px;} .wifi_list ul li.etc a:hover{background:#dbdbdb url(../images/content/wifi/icon_etc.png) no-repeat 23px 7px;} */ /*관광안내소*/ /* .info_list {background:#fafafa;height:430px; overflow: auto} .info_list p {text-align:left;margin:25px 0 20px 20px;font-size:17px;font-weight:500;border-bottom:2px solid #222;padding-bottom:10px;} .info_list p strong{color:#4e6bc8;} .info_list ul{text-align:left;} .info_list ul li{position:relative;border-bottom:1px solid #d5d5d4;font-size:16px;} .info_list ul li:last-child{border-bottom:none;} .info_list ul li a{display:block;padding:10px 0 10px 20px;transition: all .3s;font-weight:300;} .info_list ul li a:hover{background-color:#dbdbdb;} .info_list ul li a strong{font-weight:500;display:block;margin-bottom:10px;} .info_list ul li a span {position:absolute;top:13px;right:10px;font-size:14px;} .info_box01 {border:1px solid #d3d3d3;padding:30px 35px;text-align:left;} .info_box01 ul li {position:relative;padding-left:140px;height:25px;} .info_box01 ul li span{display:block; overflow:hidden; font-size:16px; vertical-align:top; line-height:25px;} .info_box01 ul li span.title {font-weight: 500;position:absolute; top:0; left:5px; width:125px; padding-left:10px; box-sizing:border-box; color:#222;} .info_box01 ul li span.title:before{content:'';display:block; position:absolute; top:11px; left:0; width:2px; height:2px; border-radius:5px; background:#222;} .info_box01 ul li span.text {font-weight:300;width:100%; color:#666;} .info_box01 ul li span.text a:after{content:''; display:inline-block; width:14px; height:14px; margin:0 5px; 원래주석> background:url(../images/content/icon_link.png) 0 0 no-repeat; <주석 vertical-align:middle; } */ /*환율정보*/ /* .exchange_wrap {position:relative;border:1px solid #e7e7e7;box-sizing:border-box;padding:15px 25px;} .exchange_wrap ul{width:100%;display:table;margin-bottom:16px;} .exchange_wrap ul li{display:table-cell;width:1%;text-align:center;vertical-align: middle;} .exchange_wrap ul li dl dt {color:#666;margin-bottom:5px;} .exchange_wrap ul li dl dt i{padding:0 0 13px 0;background:url('../images/content/exchange_icon.png') no-repeat;margin:0 auto;width:37px;height:37px;display:block;} .exchange_wrap ul li dl dd{font-weight:500;} .exchange_wrap ul li:nth-child(1) {padding-right:13px;} .exchange_wrap ul li:nth-child(1) img {box-shadow:2px 2px 2px #888;} .exchange_wrap ul li:nth-child(1) span {margin-top:10px;display:block;text-align:center;color:#666;} .exchange_wrap ul li:nth-child(2) dl dt i{background-position:0 0;} .exchange_wrap ul li:nth-child(2) dl dd{color:#df2b2b;} .exchange_wrap ul li:nth-child(3) dl dt i{background-position:-37px 0;} .exchange_wrap ul li:nth-child(3) dl dd{color:#2b7bdf;} .exchange_wrap ul li:nth-child(4) dl dt i{background-position:-74px 0;} .exchange_wrap ul li:nth-child(4) dl dd{color:#1a252d;} .exchange_wrap p {font-size:11px;font-weight:100;} */ /*전국날씨*/ /* .nation_weather_wrap {background:#a7c1d7 url('../images/content/nation_weather_bg.png') no-repeat top center;border-radius:3px;box-sizing:border-box;} .nation_weather {background: url('../images/content/nation_weather_map.png') no-repeat 63% top;min-height:745px;overflow: hidden;margin-bottom:70px;} .nation_weather .wtr_point {position:relative;padding:32px 10px 15px 42px;color:#010101;text-align:left;font-weight:500;line-height:23px;} .nation_weather .wtr_point:before {display:block;content:"";background:url('../images/content/ico_point.png') no-repeat left center;width:20px;height:20px;position:absolute;top:34px;left:16px;} .nation_weather ul {position: relative; 주석>overflow: hidden; <주석} .nation_weather ul li {background-color:rgba(255, 255, 255, .9);border-radius:5px;width:63px;padding: 6px 0;box-sizing:border-box;border:2px solid #222;} .nation_weather ul li em {color:#666;font-size:15px;} .nation_weather ul li p img{width:30px;} .nation_weather ul li span {color:#cc0000;font-size:14px;} .nation_weather ul li.na_Seoul {position:absolute;top:30px;left:482px;} .nation_weather ul li.na_Chuncheon {position:absolute;top:30px;left:556px;} .nation_weather ul li.na_Gangneung {position:absolute;top:0px;left:628px;} .nation_weather ul li.na_Dokdo {position:absolute;top:50px;left:885px;} .nation_weather ul li.na_Incheon {position:absolute;top:77px;left:398px;} .nation_weather ul li.na_Suwon {position:absolute;top:120px;left:471px;} .nation_weather ul li.na_Cheongju {position:absolute;top:163px;left:543px;} .nation_weather ul li.na_HongSung {position:absolute;top:170px;left:402px;} .nation_weather ul li.na_Andong {position:absolute;top:177px;left:620px;} .nation_weather ul li.na_Daegu {position:absolute;top:276px;left:605px;} .nation_weather ul li.na_Pohang {position:absolute;top:204px;left:693px;} .nation_weather ul li.na_Daejeon {position:absolute;top:255px;left:528px;} .nation_weather ul li.na_Jeonju {position:absolute;top:274px;left:454px;} .nation_weather ul li.na_Mokpo {position:absolute;top:399px;left:360px;} .nation_weather ul li.na_Gwangju {position:absolute;top:365px;left:435px;} .nation_weather ul li.na_Yeosu {position:absolute;top:365px;left:509px;} .nation_weather ul li.na_Changwon {position:absolute;top:364px;left:600px;} .nation_weather ul li.na_Busan {position:absolute;top:341px;left:673px;} .nation_weather ul li.na_Ulsan {position:absolute;top:293px;left:742px;} .nation_weather ul li.na_Jeju {position:absolute;top:544px;left:290px;} */ /*위성영상*/ /* .open_imaging_title {text-align:center;font-weight:500;font-size:15px;padding:20px 0 20px 0;line-height:22px;} .bias_box {margin:30px 0 20px;padding:6px;border:1px solid #e5e5e5;background-color:#fafafa;border-radius: 3px;} .bias_box .bias_box_inner {padding:20px;color:#2644a5;font-weight:300;font-size:15px;} .bias_box .inner_box { margin:10px 0; padding:20px; background:#f8f8f8; } .bias_box .tit {position: relative;margin-bottom:15px;display: inline-block;font-size:18px;color:#1952a9;line-height:24px;padding: 0 15px;z-index: 10;font-weight: 600;} .bias_box .tit:before {display:block;content:"";position:absolute;top: 11px;left: 5px;width: 3px;height:5px;background: #1f5bb6;z-index: 10;} .bias_box .tit:after {display:block;content:"";position:absolute;bottom: -6px;left: 0;width:100%;height: 18px;background: #fffdeb;z-index:-1;} .bias_box .tit.em_blue { color:#084896;} .video_wr .bx-wrapper{margin-bottom:30px;} .video_wr {overflow: hidden;} .video_wr .control_area {display:block;height: 74px;overflow: hidden;margin-bottom:50px;} .video_wr .video_control {width:230px;margin:0 auto;position: relative;} .video_wr .video_control ul {position:relative;} .video_wr .video_control ul li:nth-child(1){position:absolute; top:0px; left:0px; font-size:0; z-index:2;} .video_wr .video_control ul li:nth-child(2){position:absolute;top:0px;left: 78px;font-size:0;z-index:2;} .video_wr .video_control ul li:nth-child(3){position:absolute;top:0px;left: 78px;font-size:0;z-index:2;} .video_wr .video_control ul li:nth-child(4){position:absolute;top:0px;left: 156px;font-size:0;z-index:2;} .video_wr .video_control ul li button{position:relative;width:74px;height:74px;margin:0;padding:0;background: #616161 ;color:transparent;font-size:0;transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;원래주석transition: background-color 0.25s linear; 원래주석} .video_wr .video_control ul li button:before {position: absolute;display: block;background:url('../images/content/video_control.png') no-repeat;width: 100%;height: 1px;bottom: -1px;content:"";z-index:100;transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;} .video_wr .video_control ul li button:hover:before {position: absolute;display: block;background:url('../images/content/video_control.png') no-repeat;width: 100%;height: 1px;bottom: -1px;content:"";z-index:100;transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;} .video_wr .video_control ul li button:after {position: absolute;display: block;width: 100%;height: 1px;bottom: -1px;content:"";z-index:100;transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;} .video_wr .video_control ul li button:hover:after, .video_wr .video_control ul li button:focus:after{background:#2b2b2b ; height:75px;} .video_wr .video_control ul li button.prev:before {background-position:0 0;content:"";position: absolute;display: block;width:74px;height:74px;z-index:1000;} .video_wr .video_control ul li button.play:before{background-position:0 -97px;content:"";position: absolute;display: block;width:74px;height:74px;z-index:1000;} .video_wr .video_control ul li button.pause:before{background-position:0 -193px;content:"";position: absolute;display: block;width:74px;height:74px;z-index:1000;} .video_wr .video_control ul li button.next:before{background-position:0 -293px;content:"";position: absolute;display: block;width:74px;height:74px;z-index:1000;} .video_wr .video_time {width:78%;float:right;overflow: hidden;} .video_wr .video_time ul li {transition:all .3s ease} */ /*.video_wr .video_time ul li:nth-child(12n+12) a,.video_wr .video_time ul li:nth-child(12n+24) a {margin-right:0 !important;}*/ /*.video_wr .video_time ul li:nth-child(n+13) a {margin: 0 10px 0 0;} 원래주석*/ /* .video_wr .video_time ul li a {display:block;float:left;padding: 8px 12px;background: #eee;margin: 0 8px 8px 0;transition: background-color 0.25s linear;transition:all .3s ease;-webkit-transition:all .3s ease;} .video_wr .video_time ul li a.active {background:#de3d04;color:#fff;transition: background-color 0.25s linear;} .video_wr .video_time ul li a:hover {background:#de3d04;color:#fff;transition: background-color 0.25s linear;} .video_wr .video_box .bx-wrapper .bx-viewport #video_box_image li {text-align: center;} .video_wr .video_box .bx-wrapper {box-shadow:none;} .video_wr .video_box .bx-wrapper img{display: inline-block;} */ /*=======================================================================================*/ @media all and (min-width:1201px) { .tide_time_wrap .map_area .area_map {border-right: 1px solid #bfbfbf;border-top: 1px solid #bfbfbf;} .fishing_wrap .map_area {border-right: 1px solid #bfbfbf;} } @media all and (max-width:1200px){ /*현재날씨*/ .weather_today {background-image:none;} .weather_today ul {position: inherit;padding: 30px 2%;width: 96%;} .weather_today ul li {position: inherit !important;top:0 !important;left:0 !important;float: left;margin: 0 1% 10px 0;width: 24%;} /*물때표*/ .tide_time_wrap .map_area {width:100%;height:500px;position:relative;} .tide_time_wrap .map_deail {padding-left:0%;} /*낚시*/ .fishing_wrap .map_area {width:100%;height:510px;position:relative;} .fishing_wrap .map_deail {padding-left:0%;} /*공공와이파이*/ .icon_wifi_info {bottom:510px;right:0%;} } @media all and (max-width: 1024px) and (max-height: 600px){ .api_Con { padding: 14px 15px 20px; } } @media all and (max-width:999px) { .api_Con {padding: 14px 15px 20px;} .api_tab {padding-top:31px;} /*table type01*/ .tbl_type1 thead th {font-size:14px;padding:4px 5px;} .tbl_type1 tbody th {font-size:13px;} .tbl_type1 tbody td {padding:4px 5px;font-size:13px;} /*table type03*/ .tbl_type3 tbody th, .tbl_type3 tbody td {display:block;font-size:14px} .tbl_type3 tbody th {position:relative;padding-left:20px; border-left:none;border-bottom:none;font-weight:500;color:#000;border-right:none;} .tbl_type3 tbody th:after{position:absolute;top:17px;left: 13px;content:'';width:2px;height:2px;background-color:#222;border-radius: 100%;} .tbl_type3 tbody td {border: 1px solid #dadada;border-right: none;border-left: none;color:#666;padding:7px 22px;} .fishing_img {width:100%;height:100%;} /*현재날씨*/ .weather_today ul li {margin: 0 2% 10px 0;width: 31%;} /*지역별 기상특보*/ .search_wrap_weather .group {width:100% !important;} /*낚시*/ .fishing_wrap .map_deail .fish_list {height:350px;} .fishing_wrap .map_deail .fish_list ul li a {font-size:13px;} .fishing_text {font-size:13px;} /*공공와이파이*/ .wifi_list p {font-size:15px;} .wifi_list ul li , .search_wrap_wifi .group select {font-size:13px;} /*관광안내소*/ .info_list ul li {font-size:15px;} .info_box01 ul li span{font-size:15px;} /*전국날씨*/ .nation_weather {background:none;margin-bottom:0px;} .nation_weather ul {padding:10px 2%;} .nation_weather ul li {position: initial !important;float: left;margin: 0 0 10px 2%;width:32%;} .nation_weather ul li:nth-child(3n+1) {margin-left:0%;} } @media all and (max-width:960px){ .content_api{ max-width: 960px; /* 요소의 최대 너비를 960px로 제한 */ width: 100%; /* 화면 너비보다 작은 경우 요소가 화면 너비에 맞게 유지 */ margin: 0 auto; /* 항상 가운데 유지 */ } } @media all and (max-width:767px){ /*타이틀 공통*/ .api_Tit , .region_weather h3 , .api_Tit02{font-size:20px;padding-bottom:25px;} .open_data_title {font-size:13px;} /*탭메뉴 공통*/ .api_tab ul li a {font-size:15px;padding: 11px 0;} .api_tab li.active a:after, .api_tab li a:hover:after, .api_tab li a:focus:after {bottom:5px;} /* 테이블 공통 */ .table {overflow-x:scroll; min-width:265px; position:relative; margin-top:0;} .table > table {width:200%} .table table:before {width:100%} /*주간예보*/ .region_weather .text {text-align:center;margin-bottom:10px;} /*물때표*/ .tide_time_wrap .map_area .area_map {height:350px !important;} .tide_time_wrap .map_area {height:430px;} /*낚시*/ .fishing_wrap .map_area .area_map {height:350px !important;} .fishing_wrap .map_area {height:350px;} /*위성영상*/ .video_wr .video_time {width:98%;} } @media all and (max-width:660px){ /*현재날씨*/ .weather_today ul li {margin: 0 2% 10px 0;width: 48%;} .weather_today ul li:nth-child(2n+1) {background:#fff} .weather_today ul li:nth-child(4n-3), .weather_today ul li:nth-child(4n+4){background:#fffdf0} /*물때표*/ .tide_time_wrap .map_area article{display:none;} aside.relate_site {height: 52px;position: relative;top: 0px;right:0px;padding: 17px 15px;} aside.relate_site div {width:100%;} /*전국날씨*/ .nation_weather ul li {width:49%;} .nation_weather ul li:nth-child(3n+1) {margin-left:2%;} .nation_weather ul li:nth-child(2n+1) {margin-left:0;} /*위성영상*/ .video_wr .video_time {width:92%;} } @media all and (max-width:425px){ .tide_time_wrap .map_deail .stationInfo .tideTimeTable li{ height: 66px; } } @media all and (max-width:420px){ /*위성영상*/ .video_wr .video_time {width:94%;} } @media all and (max-width:414px){ /*관광안내소*/ .info_box01 {border:none;padding:0px;} .info_box01 ul li{padding-left:0px;height:auto;} .info_box01 ul li span.title {position:relative;} .info_box01 ul li span.text {margin-left:15px;} } @media all and (max-width:375px){ /*위성영상*/ .video_wr .video_time {width:84%;} } @media all and (max-width:360px){ /*현재날씨*/ .weather_today ul li {margin: 0 2% 10px 0;width: 98%;} .weather_today ul li .wea_wind {padding-left:0;text-align: center;} .weather_today ul li .wea_wind:before {left: 22%;} .weather_today ul li:nth-child(2n+1) {background:#fffdf0} .weather_today ul li:nth-child(2n+4){background:#fff} /*물때표*/ .tide_time_wrap .map_deail .stationInfo .tideTimeTable li {font-size:14px;} /*전국날씨*/ .nation_weather ul li {width:100%;margin-left:0%;} /*위성영상*/ .video_wr .video_time {width:88%;} } @media all and (max-width:320px){ /*물때표*/ .tide_time_wrap .map_deail .stationInfo .tideTimeTable li span.time {padding:0 3px 0 0;} /*위성영상*/ .video_wr .video_time {width:100%;} } /* content.css */ @charset "utf-8"; h3.titBasic1 {padding-bottom: 47px; font-size: 32px; font-weight: 500;} h3.titBasic2 {font-size: 28px; font-weight: 500;} h5.basicType1 {padding-bottom: 12px; font-size: 20px; font-weight:400;} h5.basicType2 {padding:12px 0; font-size: 17px; font-weight: 400;} p.basicType1 {padding-bottom: 10px; font-size: 18px;} p.basicType2 {font-size: 15px;} p.basicType3 {margin:15px 0; font-size: 20px; font-weight: 500;} dl.basicType1 {position: relative; padding-left: 80px; font-weight: 300; font-size: 15px;} dl.basicType1 dt {position: absolute; top: 0; left: 0; width: 80px; padding-left: 10px; background:url(../images/common/bu_2p.png) 0.jtubeWrap .vidInfo .infoLogo 6px no-repeat; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} dl.basicType1 dd {padding-bottom: 10px;} dl.basicType1 ul {margin-top: 10px; padding-left: 13px;} dl.basicType2 {font-weight: 300; font-size: 15px;} dl.basicType2 dt {padding-left: 10px; background:url(../images/common/bu_2p.png) 0 6px no-repeat;} dl.basicType2 dd {margin-top: 12px; padding-left: 15px;} dl.basicType2 dd p {padding-bottom: 12px; font-size: 14px;} dl.basicType2 dd p:first-child {margin-top: 10px;} ul.basicType1 {margin-bottom: 26px;} ul.basicType1 li {padding-left: 10px; margin-top: 12px; background:url(../images/common/bu_2p.png) 0 7px no-repeat; font-size: 15px; font-weight: 300;} ul.basicType1 li:first-child {margin-top: 0;} ul.basicType1 li p {margin-top: 8px; margin-bottom:4px; padding-left: 3px;} ul.basicType1 li div {margin-top: 8px; margin-bottom:4px; padding-left: 3px;} ul.basicType2 {margin-top: 10px;} ul.basicType2 li {padding-bottom: 8px; font-size: 14px;} ul.basicType2 li p {padding-left: 10px;} ul.basicType3 li {padding:0 1%; font-size: 15px; font-weight: 300; line-height: 1.4;} @media all and (max-width: 767px) { h3.titBasic1 {padding-bottom: 24px; font-size: 20px;} h3.titBasic2 {font-size: 20px;} h5.basicType1 {font-size: 15px;} h5.basicType2 {font-size: 14px;} p.basicType2 {font-size: 14px;} p.basicType3 {font-size: 17px;} ul.basicType1 {margin-bottom: 18px;} ul.basicType1 li {margin-top: 8px; font-size: 13px; line-height: 1.4;} ul.basicType2 {padding-bottom: 10px;} ul.basicType2 li {font-size: 12px; line-height: 1.4;} dl.basicType1 {padding-left: 70px; font-size: 13px;} dl.basicType2 {font-size: 13px;} dl.basicType2 dd {padding-left: 7px;} dl.basicType2 dd p {padding-bottom: 5px; font-size: 12px;} dl.basicType2 dd p:first-child {margin-top: 5px; padding-bottom: 5px; font-size: 12px;} } /* 새창아이콘 (시/군내 버스)(유람선) */ a.iblank { padding-right:18px; background:url(../images/content/icon_blank.png) right center no-repeat; } /* tabMenu btn type1 */ .tabType1 ul {display: inline-block;} .tabType1 ul li {display: table-cell; float: left; position: relative; padding:0 9px;} .tabType1 ul li:first-child {padding-left: 0;} .tabType1 ul li a {display: block; padding-bottom: 3px; color: #36383c; font-size: 16px; white-space: nowrap;} .tabType1 ul li a:before {content: ''; position: absolute; top: 3px; left: 0; width: 1px; height: 12px; background-color: #d2d2d4;} .tabType1 ul li:first-child a:before {content: none;} .tabType1 ul li.active a, .tabType1 ul li a:hover, .tabType1 ul li a:focus {color: #4e6bc8; border-bottom: 2px solid #4e6bc8; font-weight: 500;} /* tabMenu btn type2 */ .tabType2 {font-size: 0;} .tabType2 li {display: inline;} .tabType2 li a {display: inline-block; width: 40px; height: 25px; border: 1px solid #e7e7e7; color: #484848; font-size: 13px; font-weight: 300; text-align: center; line-height: 25px;} .tabType2 li:first-child a {border-right: none;} .tabType2 li.active a, .tabType2 li a:hover, .tabType2 li a:focus {border-bottom: 1px solid #4e6bc8; color: #4e6bc8;} /* tabMenu btn type3 */ .tabType3 { display:inline-block; } .tabType3 li { float:left; position:relative; padding:0 9px; } .tabType3 li:first-child {padding-left:0;} .tabType3 li a { display:block; font-weight:300; font-size:13px; color:#484848; white-space:nowrap; } .tabType3 li a:before { content:''; position:absolute; top:50%; left:0; width:1px; height:12px; margin-top:-6px; background-color:#c0c0c0; } .tabType3 li:first-child a:before { content:none; } .tabType3 li.active a, .tabType3 li a:hover, .tabType3 li a:focus { color:#4e6bc8; } /* tabMenu btn type4 .tabType4 {border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; font-size: 0;} .tabType4 li {display: inline-block; position: relative; padding:0 20px;} .tabType4 li:before {content: ''; position: absolute; top: 25px; left: 0; width: 1px; height: 16px; background-color: #d6d6d6;} .tabType4 li:first-child:before {content: none;} .tabType4 li a {display: block; position: relative; padding: 21px 0; color: #0b0b0b; font-size: 18px;} .tabType4 li.active a, .tabType4 li a:hover, .tabType4 li a:focus {border-bottom: 2px solid #4e6bc8; color: #4e6bc8;} */ .tabType4 {font-size: 0;} .tabType4 li {display: inline-block; position: relative; padding:0 11px;} .tabType4 li:before {content: ''; position: absolute; top: 7px; left: 0; width: 1px; height: 16px; background-color: #d6d6d6;} .tabType4 li:first-child:before, .tabType4 li:nth-of-type(1):before {content: none;} .tabType4 li a {display: block; position: relative; padding: 4px 0; border-bottom: 1px solid #fff; color: #0b0b0b; font-size: 20px; letter-spacing: -1px; letter-spacing: -0.04em;} .tabType4 li.active a, .tabType4 li a:hover, .tabType4 li a:focus {border-bottom: 1px solid #4e6bc8; color: #4e6bc8;} @media all and (max-width: 960px) { .tabType4 li a {font-size: 18px;} } @media all and (max-width: 767px) { .tabType1 ul li a {font-size: 15px;} .tabType4 li a {font-size: 15px;} } /* tabMenu default */ .tabCon {display: none;} .tabCon.active {display: block;} .boardIcon {display: block; position: relative;} .boardIcon:before {content: ''; width: 30px; height: 25px; position: absolute; left: 0; bottom: 0; background-repeat: no-repeat; background-position: 50% 50%; z-index: 3;} .boardIcon.img:before {background-image: url(../images/board/icon_image.png);} .boardIcon.movie:before {background-image: url(../images/board/icon_movie.png);} .boardIcon.audio:before {background-image: url(../images/board/icon_audio2.png);} /* Board */ /* Board List */ .boardStyle { max-width:1050px; margin:20px auto 50px; } /*.boardStyle > h3 { padding:15px 0; border-bottom:3px solid #434040; font-weight:400; font-size:32px; text-align:center; }*/ .boardStyle .infoTxt { padding:20px 0 45px; font-weight:300; font-size:15px; color:#696969; } .boardInfo { padding:17px 10px 20px 15px; text-align:right; } .infoCount { float:left; margin-top:24px; font-size:14px; font-weight:300; color:#494949; } .countTotal { font-weight:400; color:#cf0000; } .countToday { font-weight:400; color:#0041c9; } .boardInfo ul li { /*float:left;*/ display:inline-block; height:43px; line-height:41px; font-weight:300; vertical-align:top; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .boardList { width:100%; margin-bottom:40px; table-layout:fixed; font-size:14px; font-weight:300; color:#2d2d2d; text-align:center; } .boardList thead { border-top:1px solid #b4b4b4; border-bottom:1px solid #e7e7e7; } .boardList tbody tr { border-bottom:1px solid #e7e7e7; } .boardList thead th { font-weight:300; } .boardList th, .boardList td { padding:14px 10px; } .boardList thead th:first-child { background:none; } .boardList .num { width:70px; } .boardList .subject { width:auto; } .boardList .writer { width:7em; } .boardList .date { width:9em; } .boardList .hits { width:4em; } .boardList .file { width:3em; } .boardList td.subject { font-size:15px; text-align:left; } .boardList td.subject.notice { font-weight:400; } .boardList td.subject a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .boardList td.open span { display:inline-block; min-width:4em; padding:4px 8px 5px 8px; border-radius:5px; color:#fff; } .boardList td.open span.on { background-color:#b1370c; } .boardList td.open span.off { background-color:#786b60; } .boardList td.file span { display:block; /*min-height:21px;*/ } .boardList td.file span img { vertical-align:middle; } .boardList td.add { text-align:left; } @media screen and (max-width:960px) { .boardInfo {padding:18px 5px; text-align: center;} .boardInfo ul {font-size: 0;} .infoCount {float: none; margin-top: 0; margin-bottom: 18px; text-align: left;} } /* gallery basic skin */ .boardWrap .titBox {padding-top: 48px; padding-bottom: 52px;} .boardWrap .titBox h3.tit {font-size: 28px; font-weight: 500;} .galleryBasic {padding-left: 3.5%; padding-right: 4%;} .galleryBasic ul {font-size: 0; text-align: left;} .galleryBasic ul li {display: inline-block; width: 24.55%; margin-left: 0.6%; margin-bottom: 35px; text-align: center;} .galleryBasic ul li:first-child, .galleryBasic ul li:nth-child(4n+1) {margin-left: 0;} .galleryBasic ul li a {display: block; border: 1px solid #e3e3e3;} .galleryBasic ul li a .img {overflow: hidden; display: block; position: relative; padding-bottom: 57.3%;} .galleryBasic ul li a .img .thumb {overflow: hidden; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .galleryBasic ul li a .img .thumb img {width: 100%; height: 100%;} .galleryBasic ul li a .img .count {display: block; position: absolute; bottom: 0; right: 0; padding:0 7px; background-color: #000; background-color: rgba(000,000,000,0.8); font-size: 14px; text-align: center; color: #fff; line-height: 23px; font-family: "Dotum","돋움",sans-serif;} .galleryBasic ul li a p {padding-left: 10px; padding-right: 10px;} .galleryBasic ul li a .cate {padding-top: 19px; padding-bottom: 12px; color: #cc7e39; font-size: 14px; font-weight: 300;} .galleryBasic ul li a .cate .city {display: inline-block; padding:0 7px; border: 1px solid #f49948; background-color: #fff; color: #cc7e39; font-size: 14px; font-weight: 300; line-height: 21px;} .galleryBasic ul li a p.tit {overflow: hidden; padding-bottom: 17px; color: #444; font-weight: 300; font-size: 15px; white-space: nowrap; text-overflow: ellipsis;} .galleryBasic ul li a .more {border-top: 1px solid #e3e3e3; color: #656565; line-height: 46px; font-size: 12px; font-family: "Dotum","돋움",sans-serif;} .galleryBasic ul li a .more span {display: inline-block; background-repeat: no-repeat;} .galleryBasic ul li a .more .camera {padding-left: 26px; background-image: url(../images/content/icon_camera.png); background-position: 0 44%;} .galleryBasic ul li a .more .plus {padding-left: 15px; background-image: url(../images/content/icon_plus_red.png); background-position: 0 50%;} .galleryBasic ul li a:hover .img img, .galleryBasic ul li a:focus .img img {-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1); -webkit-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; transition: 0.4s ease-in;} .galleryBasic ul li a:hover p, .galleryBasic ul li a:focus p {background-color: #f8f8f8; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;} .galleryBasic + .pagination {padding-top: 10px;} @media all and (max-width: 960px) { .galleryBasic {padding:0;} } @media all and (max-width: 767px) { .boardWrap .titBox {padding: 30px 0;} .boardWrap .titBox h3.tit {font-size: 20px;} .galleryBasic ul li a .cate {padding-top: 14px; padding-bottom: 8px;} .galleryBasic ul li a .cate .city {font-size: 11px; line-height: 18px;} .galleryBasic ul li a p.tit {padding-bottom: 14px; font-size: 12px;} .galleryBasic ul li a .img .count {font-size: 11px; line-height: 18px;} .galleryBasic ul li a .more {line-height: 33px; font-size: 11px;} .galleryBasic ul li a:hover .img img, .galleryBasic ul li a:focus .img img {-webkit-transform: none;-moz-transform: none;-ms-transform: none;-o-transform: none;transform: none; -webkit-transition: none; -o-transition: none; -moz-transition: none; transition: none;} } @media all and (max-width: 640px) { .galleryBasic ul li {width: 49%; margin:0 0.5% 7px;} .galleryBasic ul li:first-child, .galleryBasic ul li:first-child+li+li+li+li {margin:0 0.5%;} .galleryBasic ul li a .more .camera {padding-left: 18px; background-size:14px auto;} } /* board align */ .boardWrap .alignWrap { padding-top: 30px; padding-bottom:25px; } .boardWrap .alignWrap ul {font-size: 0;} .boardWrap .alignWrap ul li {display: inline-block; vertical-align: top;} .boardWrap .alignWrap ul li.tit {padding-top: 14px; padding-right: 14px; color: #5e5e5e; font-size: 14px; font-weight: 300;} .boardWrap .alignWrap .selectBox {display: inline-block; height: 43px; border: 1px solid #d4d4d4; color: #2a2a2a; font-size: 14px; text-align: left; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardWrap .alignWrap .select01 .selectBox { width: 133px; margin-right:6px;} .boardWrap .alignWrap .select02 .selectBox { width: 233px; } .boardWrap .alignWrap .selectBox select {width: 100%; height: 100%;} .boardWrap .alignWrap .selectBox .customSelect {width: 100%; height: 100%;} .boardWrap .alignWrap .selectBox .customSelect .customSelectInner {width: 100% !important; padding:0 30px 0 14px; background-image:url(../images/board/btn_boardselect_on.gif); background-position: right 13px center; background-repeat: no-repeat; line-height: 41px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .boardWrap .alignWrap .selectBox .customSelectOpen .customSelectInner {background-image:url(../images/board/btn_boardselect_off.gif); } .boardWrap .alignWrap .btn button {overflow: hidden; display: inline-block; width: 44px; height: 43px; border: 1px solid #d4d4d4; border-left: none; background: url(../images/board/btn_board_search.gif) center no-repeat; color: #2a2a2a; font-size: 14px; text-indent:-999px;} @media all and (max-width: 767px) { .boardWrap .alignWrap {position: relative; padding-right: 44px;} .boardWrap .alignWrap ul li.tit {display: none;} .boardWrap .alignWrap .select01 {width: 35%;} .boardWrap .alignWrap .select02 {width: 65%;} .boardWrap .alignWrap .select01 .selectBox, .boardWrap .alignWrap .select02 .selectBox {width: 100%;} .boardWrap .alignWrap .select02 .selectBox {border-left:0 none;} .boardWrap .alignWrap .selectBox .customSelect .customSelectInner { padding:0 24px 0 14px; background-position: right 8px center; } .boardWrap .alignWrap .btn button {position: absolute; top: 30px; right: 0;} } /* board search */ .boardWrap .searchWrap {margin-top: 43px; padding:25px 0; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;} .boardWrap .searchWrap ul {font-size: 0;} .boardWrap .searchWrap ul li {display: inline-block; vertical-align: top;} .boardWrap .searchWrap ul li.tit {padding-top: 14px; padding-right: 22px; color: #5e5e5e; font-size: 14px; font-weight: 300;} .boardWrap .searchWrap .selectBox {display: inline-block; width: 113px; height: 43px; border: 1px solid #d4d4d4; color: #2a2a2a; font-size: 14px; text-align: left; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardWrap .searchWrap .selectBox select {width: 100%; height: 100%;} .boardWrap .searchWrap .selectBox .customSelect {width: 100%; height: 100%;} .boardWrap .searchWrap .selectBox .customSelect .customSelectInner {width: 100% !important; padding-left: 14px; background-image:url(../images/board/btn_boardselect_on.gif); background-position: 89% 50%; background-repeat: no-repeat; line-height: 41px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardWrap .searchWrap .selectBox .customSelectOpen .customSelectInner {background-image:url(../images/board/btn_boardselect_off.gif); } .boardWrap .searchWrap ul li.txt {max-width: 372px; width: 100%;} .boardWrap .searchWrap .searchBox {display: inline-block; position: relative; height: 43px; width: 100%;} .boardWrap .searchWrap .searchBox:before {content: ''; position: absolute; top: 10px; right: 45px; width: 1px; height: 24px; background-color: #d4d4d4;} .boardWrap .searchWrap .searchBox .txt {width: 100%; height: 100%; padding-left: 16px; padding-right: 55px; border: 1px solid #d4d4d4; border-left: none; color: #2a2a2a; font-size: 14px; font-weight: 300;} .boardWrap .searchWrap .searchBox .btn {display: inline-block; position: absolute; top: 0; right: 0; width: 44px; height: 100%; border: none; background:url(../images/board/btn_board_search.gif) center no-repeat; text-indent: -999px; cursor: pointer;} @media all and (max-width: 767px) { .boardWrap .searchWrap {margin-top: 0; padding: 25px 3%;border: none;} .boardWrap .searchWrap ul li {float:left;} .boardWrap .searchWrap ul li:first-child+li {width: 30%;} .boardWrap .searchWrap .selectBox {width: 100%;} .boardWrap .searchWrap ul li.tit {display: none;} .boardWrap .searchWrap ul li.txt {width:70%; max-width:none;} } /* board view */ .viewTit {border-bottom:1px solid #e2e2e2; } .viewTit h4 {padding:20px 5px 17px; border-bottom:2px solid #434040; font-weight:400; font-size:24px; } .viewTit p { padding:15px 0; font-size:14px; color:#6b6b6b; } .viewTit p > span { color:#929292; } .viewContent .txt { padding:12px 0; text-align:justify; line-height:1.4; font-weight:400; } .viewContent .img {padding-bottom: 12px; text-align:center; } .viewContent .img img{ max-width:100%; } .viewContent .link { margin-bottom:5px; } /* gallery view */ .viewBody .postInfo {border-top: 2px solid #434040; border-bottom: 1px solid #e2e2e2;} .viewBody .postInfo ul li {float: left; padding:22px 0; color: #6c6c6c; font-size: 16px; font-weight: 300;} .viewBody .postInfo ul li.label {width: 80px; border-right: 1px solid #e2e2e2; } .viewBody .postInfo ul li.writer {position: relative; padding-left: 27px; padding-right: 16px;} .viewBody .postInfo ul li.writer:after {content: ''; position: absolute; top: 24px; right: 0; width: 1px; height: 15px; background-color: #d1d1d1;} .viewBody .postInfo ul li.date {padding-left: 15px;} .viewBody .postInfo ul li.city {float: right; position: relative; padding-left: 114px; padding-right: 40px; border-left: 1px solid #e2e2e2;} .viewBody .postInfo ul li.city span {display: block; position: absolute; top: 0; left: 0; width: 88px; height: 100%; padding-top: 22px; border-right: 1px solid #e2e2e2; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} @media screen and (max-width:767px) { .viewBody .postInfo ul {padding:0 2%; font-size: 0; text-align: left;} .viewBody .postInfo ul li {display: inline-block; float:none; padding: 17px 0; font-size: 14px;} .viewBody .postInfo ul li.label {width: auto; border-right: none;} .viewBody .postInfo ul li.writer {padding-left: 10px; padding-right: 8px;} .viewBody .postInfo ul li.writer:after {content:none;} .viewBody .postInfo ul li.date {padding-left: 0; padding-right: 10px;} .viewBody .postInfo ul li.city {float:none; padding-right: 0; padding-left: 0; border-left:none;} .viewBody .postInfo ul li.city:before {content:'/'; padding-right: 10px;} .viewBody .postInfo ul li.city span {display: inline-block; position: relative; top: auto; left: auto; width: auto; height: auto; padding-top: 0; padding-right: 10px; border-right: none;} } /* board view - File */ .viewFoot {padding:0 2%;} .boardFile { margin-bottom:35px; font-size:14px; border-top: 1px solid #e2e2e2; border-bottom:2px solid #434040; font-weight:300; color:#3f3f3f; text-align:left; } .boardFile dl { padding:6px 10px; border-top:1px solid #dde2e8; line-height:30px; } .boardFile dl:first-child { border-top:0 none; } .boardFile dl dt { position:relative; float:left; padding:0 14px 0 10px; } .boardFile dl dt:after { content:''; position:absolute; top:50%; right:0; width:1px; height:10px; margin-top:-5px; background-color:#bdbdbd; } .boardFile dl dd { overflow:hidden; position:relative; padding-left:50px; padding-right: 90px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardFile dl dd > span { position:absolute; left:17px; } .boardFile dl dd > a { display:inline-block; max-width:87%; margin-right:3%; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; vertical-align:middle; } .boardFile dl dd > a:hover, .boardFile dl dd > a:focus {text-decoration: underline;} .boardFile dl dd > div { position: absolute; top: 0; right: 0; width:84px; height:28px; line-height:28px; font-family:"돋움", dotum; font-size:12px; vertical-align:middle;} .boardFile dl dd > div a { display:block; padding-left:29px; background:url(../images/board/btn_file_down.png) 8px 7px no-repeat; } .boardFile dl dd > div a:hover, .boardFile dl dd > div a:focus {text-decoration: underline;} .boardFile.type2 {margin-bottom: 0; padding:0 12px 55px; border-top: none;} .boardFile.type2 dl {border-top: none; border-bottom: 1px solid #dde2e8;} .boardFile.type2 dl:first-child {border-top: 1px solid #dde2e8;} @media screen and (max-width:767px) { .boardFile {background-color: #fbfbfb; border: 1px solid #cfcfcf;} .boardFile dl {padding: 15px 15px 0; border-color: #cfcfcf;} .boardFile dl dt {display: block; float:none; padding: 0;} .boardFile dl dt:after {content:none;} .boardFile dl dd {padding-right: 0; padding-bottom: 35px; padding-left: 30px;} .boardFile dl dd > a {display: block;max-width:none; margin-right: 0;} .boardFile dl dd > span {left: 0;} .boardFile dl dd > div {top: auto; bottom: 0; width: 100%; height: 30px; border-top: 1px solid #e4e4e4; text-align: right; } .boardFile dl dd > div a {padding-left: 0; background-position: 82% 50%;} } /* board view - Ctrl */ .viewCtrl { margin:60px 0 30px; border-top:1px solid #dde2e8; font-weight:300; text-align:left; } .viewCtrl dl { position:relative; padding:13px 12px 13px 100px; border-bottom:1px solid #dde2e8; font-size:0; } .viewCtrl dl dt { display:inline-block; font-size:14px; color:#3f3f3f; } .viewCtrl dl dd { display:inline-block; font-size:15px; } .viewCtrl dl dt { position:absolute; left:0; padding:0 10px 0 50px; } .viewCtrl dl.prevList dt { background:url(../images/board/bg_prev_list.png) 13px center no-repeat; } .viewCtrl dl.nextList dt { background:url(../images/board/bg_next_list.png) 13px center no-repeat; } .viewCtrl dl dd { position:relative; width:100%; padding-left:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .viewCtrl dl dd:after { content:''; position:absolute; top:50%; left:0; width:1px; height:10px; margin-top:-5px; background-color:#bdbdbd; } .viewCtrl dl dd a { color:#3f3f3f; } .viewCtrl dl dd a:hover, .viewCtrl dl dd a:focus {text-decoration: underline;} @media screen and (max-width:960px) { /* Board List .boardInfo { margin:10px 0; text-align:left; } .infoCount { float:none; margin-top:0; margin-bottom:10px; padding-left:0; } .boardInfo ul { font-size:0; } .boardInfo .selectBox { width:24%; margin-right:1%; } .boardInfo .selectBox select { width:100%; } .boardInfo .boardSearchText { position:relative; width:50%; padding-right:43px; } .boardSearchText input.text { width:100%; } .boardSearchText input.btn { position:absolute; right:0; } .boardList .num { display:none; } .boardList .hits { display:none; }*/ /* board view - Ctrl .viewCtrl dl { padding:13px 12px 13px 90px; } .viewCtrl dl dt { padding:0 13px 0 39px; } .viewCtrl dl.prevList dt { background-position:10px center; } .viewCtrl dl.nextList dt { background-position:10px center; } .viewCtrl dl dd { padding-left:10px; font-size:14px; }*/ } @media screen and (max-width:767px) { .viewCtrl {margin:30px 0 30px;} .viewCtrl dl { padding: 13px 12px 13px 90px;} .viewCtrl dl dt {padding: 0 10px 0 40px;} .viewCtrl dl dd {padding-left: 10px;} /* Board List .infoCount { font-size:13px; } .boardInfo ul li { height:36px; line-height:36px; } .boardInfo .selectBox select { font-size:13px; } .boardInfo .customSelect { font-size:13px; } .boardSearchText input.text { font-size:13px; text-indent:10px; } .boardList { font-size:13px; } .boardList th, .boardList td { padding:12px 5px; } .boardList td.subject { font-size:13px; } .boardList .writer { display:none; }*/ /* board List - Btn .boardBtn p { font-size:14px; }*/ /* Board List - Page .boardPage ul.pcVer { display:none; } .boardPage .mVer { display:inline-block; } .boardPage .mVer li { display:inline-block; font-weight:300; vertical-align:middle; } .boardPage .mVer li.index { padding:0 20px; border:0 none; font-size:18px; color:#c4c4c4; } .boardPage .mVer li strong { display:inline-block; border-bottom:1px solid #e05509; font-weight:300; color:#e05509; } .boardPage .mVer li span { color:#535353; } .boardPage .mVer li.first, .boardPage .mVer li.next { border:1px solid #cdcdcd; } .boardPage .mVer li.prev, .boardPage .mVer li.last { border:1px solid #cdcdcd; border-left:none; } .boardPage .mVer li img { width:auto; height:15px; } .boardPage .mVer li a { display:block; min-width:36px; height:36px; line-height:36px; text-align:center; vertical-align:top; }*/ } @media screen and (max-width:640px) { /* board view .viewContent { padding:10px 10px 15px 10px; } .viewTit { padding:0 5px; } .viewTit h4 { font-size:18px; padding:10px 0; } .viewTit p { width:100%; padding-bottom:10px; }*/ } @media screen and (max-width:480px) { /* Board List .boardList .date { width:6em; } .boardList td.open span { min-width:3.6em; padding:4px 5px 5px 5px; font-size:12px; }*/ /* board view - File .boardFile .fileName a { width:100%; } .fileName span.icon_fileHwp { display:none; }*/ } /* Board List - no data */ .noData { width:100%; margin-bottom:23px; padding:30px 0 50px 0; border-bottom:1px solid #dedbdb; text-align:center; color: #050505; } .btnWriting {display: block; clear: both; width: 295px; height: 58px; margin: 56px auto 0; padding-left: 35px; padding-top: 19px; background: #373e7a url(../images/content/icon_in.png) 74px 50% no-repeat; color: #fff; font-weight: 300; font-size: 17px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} /* Board List - Btn */ .boardBtn {margin-top: 55px; font-size:0; } .boardBtn.center { padding:0 20px; text-align:center; } .boardBtn p { display:inline-block; font-size:16px; } .boardBtn p a { display:block; width: 139px; height: 57px; margin-right:3px; padding-left: 26px; background-color:#373e7a;background-repeat: no-repeat; background-position: 35% 50%; color:#fff; text-align: center; font-weight: 300; line-height: 57px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardBtn p input { display:block; width: 139px; height: 57px; margin-right:5px; padding-left: 26px; background-color:#373e7a;background-repeat: no-repeat; background-position: 36% 50%; color:#fff; font-family:'Noto Sans KR'; font-size:16px; line-height:1; font-weight: 300; line-height: 57px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardBtn .btn_modify {background-image: url(../images/board/btn_modify.png);} .boardBtn .btn_write {background-image: url(../images/board/icon_pencil.png)} .boardBtn .btn_cancle {background-image: url(../images/board/icon_cansel2.png)} .boardBtn .btn_delete {background-image: url(../images/board/btn_del.png);} .boardBtn .btn_list {background-image: url(../images/board/icon_list.png);} .boardBtn p.only a {width: 235px; height: 58px; margin-right: 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} @media all and (max-width:767px) { .boardBtn {margin-top: 35px;} .boardBtn p a {width: 82px; height:49px; margin-right: 2px; line-height: 49px; font-size: 12px;} } /* Board List - Page */ .pagination {padding-top: 25px;} .boardFooter .pagination {padding-top: 0;} .pagination ul {font-size: 0;} .pagination ul li {display: inline;} .pagination ul li a {overflow: hidden; display: inline-block; width: 36px; height: 36px; border:1px solid #cfcfcf; border-left: none; line-height: 36px; font-size: 14px; font-family:"나눔고딕", Nanum Gothic;} .pagination ul li:first-child a {border-left: 1px solid #cfcfcf;} .pagination ul li.first a, .pagination ul li.last a, .pagination ul li.prev a, .pagination ul li.next a {background-position:center; background-repeat:no-repeat; text-indent: -999px;} .pagination ul li.last a {border-right: 1px solid #cfcfcf;} .pagination ul li.first a {background-image:url(../images/board/icon_first.png);} .pagination ul li.last a {background-image:url(../images/board/icon_last.png);} .pagination ul li.prev a {background-image:url(../images/board/icon_prev.png);} .pagination ul li.next a {background-image:url(../images/board/icon_next.png);} .pagination ul li.active a, .pagination ul li a:hover, .pagination ul li a:focus {position: relative; background-color:#f6f6f6; font-weight: 700;} .pagination ul li.active a:before, .pagination ul li a:hover:before, .pagination ul li a:focus:before {content:''; position:absolute; bottom:9px; left:14px; width:8px; height:2px; background-color:#9d9d9d;} .boardPage .mVer { display:none; } .useItem {display: inline-block; width: 15px; height: 17px; background-repeat: no-repeat; background-position: 50% 50%; vertical-align: middle;} .useItem.useItem1 {background-image: url(../images/board/icon_use1.png);} .useItem.useItem2 {background-image: url(../images/board/icon_use2.png);} .useItem.useItem3 {background-image: url(../images/board/icon_use3.png);} @media all and (max-width:767px) { .pagination ul li a {width: 32px; height: 32px; line-height: 30px; font-size: 12px;} .pagination ul li.active a:before, .pagination ul li a:hover:before, .pagination ul li a:focus:before {left: 12px; bottom: 7px;} .useItem {width: 20px; height: 20px; background-size:contain;} .useItem.useItem1 {background-image: url(../images/board/icon_use1_lg.png);} .useItem.useItem2 {background-image: url(../images/board/icon_use2_lg.png);} .useItem.useItem3 {background-image: url(../images/board/icon_use3_lg.png);} } /* 콘텐츠창고 갤러리형 */ .galleryList > ul {font-size: 0; text-align: left;} .galleryList > ul > li {display: inline-block; width: 19%; margin:0 0.5%; margin-bottom: 36px; border: 1px solid #dadada; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} /*.galleryList > ul > li:first-child+li+li+li+li+li {margin-left: 0;}*/ /*.galleryList > ul > li:first-child {margin-left: 0;}*/ .galleryList ul li a {display: block; width: 100%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .galleryList ul li a .boardIcon {overflow: hidden; height: 121px;} .galleryList ul li a .boardIcon img {width: 100%; height: 100%;} .galleryList a .info {padding:20px 17px 0; text-align: left; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; font-size: 0;} .galleryList a .info .subject {color: #393939; font-size: 15px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} .galleryList a .info .inner {overflow: hidden; padding-top: 6px; padding-bottom: 15px; border-bottom: 1px solid #dadada; color: #7c7c7c; font-size: 13px; font-weight: 300; white-space: nowrap; text-overflow: ellipsis;} .conItems ul li {display: inline-block; vertical-align: middle;} .conItems ul .writer {position: relative; padding-left: 38px; color: #797979; font-size: 15px; line-height: 30px;} .conItems ul .writer .user {overflow: hidden; display: block; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%;} .conItems ul .writer .name {position: relative; height: 30px; padding-top: 8px; padding-left: 14px; font-size: 34px; font-weight: 100; letter-spacing: -4px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .conItems ul .writer .name span {display: inline-block; position: absolute; top: 0; left: 0; font-size: 15px; font-weight: 400;} .conItems .download {padding-left: 23px; background:url(../images/board/icon_down.png) 0 50% no-repeat; color: #797979; letter-spacing: -1px; line-height: 17px; font-size: 12px; font-family: "Dotum","돋움",sans-serif;} .galleryList .conItems {position: relative; min-height:50px; padding: 16px 15px 17px 18px; text-align: right; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .galleryList .conItems .useItem {margin-right: 3px;} .galleryList .conItems ul .writer {position: absolute; top: 10px; left:17px; } .galleryList .conItems .writer {height: 30px;} .galleryList ul li a:hover img, .galleryList ul li a:focus img {-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);-webkit-transition: ease-in 0.4s;-o-transition: ease-in 0.4s;-moz-transition: ease-in 0.4s;transition: ease-in 0.4s;} .galleryList ul li a:hover .subject, .galleryList ul li a:focus .subject {text-decoration: underline;} .boardFooter.gallery {padding-top: 20px;} .boardFooter.gallery p.count {top: 27px;} @media all and (max-width:960px) { .galleryList > ul {text-align: left;} .galleryList > ul > li {width: 24%; margin: 0 0.5% 20px;} .galleryList > ul > li:first-child, .galleryList > ul > li:first-child+li+li+li+li+li {margin:0 0.5%;} .galleryList ul li a .boardIcon {position: relative; height: auto; padding-top: 57.5%;} .galleryList ul li a .boardIcon img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .galleryList ul li a:hover img, .galleryList ul li a:focus img {-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none; -webkit-transition:none; -o-transition:none; -moz-transition:none; transition:none;} } @media all and (max-width:767px) { .galleryList > ul > li {width: 49%; margin-bottom: 7px;} .galleryList a .info .subject {font-size: 12px;} .galleryList a .info {padding: 14px 12px 0;} .galleryList a .info .inner {padding-bottom: 10px; font-size: 11px;} .conItems ul .writer {padding-left: 34px;} .conItems ul .writer .name {padding-left: 10px;} .conItems ul .writer .name span {font-size: 12px;} .conItems ul .writer .name {font-size: 28px;} .conItems .download {font-size: 10px;} .galleryList .conItems {min-height:35px; padding:10px 11px 16px;} .galleryList .conItems ul .writer {top: 5px; left: 13px;} .boardFooter.gallery p.count {display: none;} } /* 리스트형 */ .tblBoard {width: 100%; table-layout: fixed; border-top: 1px solid #7f7f7f; color: #29161c; font-size: 15px;} .tblBoard th, .tblBoard td {padding:12px 7px; border-bottom: 1px solid #dedbdb;} .tblBoard th {font-weight: 400;} .tblBoard td {font-weight: 300; vertical-align: middle;} .tblBoard td.subject a {overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; text-align: left;} .tblBoard td.subject a .category {color: #d0440c;} .tblBoard td.subject a:hover, .tblBoard td.subject a:focus {text-decoration: underline;} .tblBoard .conItems {padding:12px 0;} .tblBoard .conItems .use {margin:0 auto;} /* 답변 게시판 리스트 */ .tblBoard td.subject.question {overflow: hidden; padding:8px 7px; text-align: left;} .tblBoard td.subject.question a {display: inline-block; position: relative; max-width: 547px; padding-right: 65px; line-height: 24px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tblAnswer {display: inline-block; position: absolute; top: 0; right: 0; width: 56px; height: 22px; border:1px solid #e5e3e2; border-radius: 20px; color: #ca724f; font-size: 13px; line-height: 22px; text-align: center; z-index: 2;} .tblBoard td.subject.answer {padding:0;} .tblBoard td.subject.answer a {display: block; position: relative; padding:8px 0; padding-left: 74px; background:url(../images/use/icon_reply.png) 0 30% no-repeat;} td.subject.answer .tblAnswer {top: 2px; right: auto; left: 18px; width: 47px; height: 23px; border: 1px solid #e1bfa7;} @media all and (max-width:960px) { .tblBoard td.subject.question a {display: block; max-width:none; } } @media all and (max-width:767px) { .tblBoard {font-size: 12px;} .tblBoard colgroup {display: none;} .tblBoard th, .tblBoard td {padding:10px 5px;} .tblBoard th.writer, .tblBoard td.writer, .tblBoard th.file, .tblBoard td.file, .tblBoard th.hits, .tblBoard td.hits {display: none;} .tblBoard thead th.num {width: 13%;} .tblBoard thead th.subject {width: 60%;} .tblBoard .conItems {width:7%;} .tblAnswer {width: 46px; height: 20px; font-size: 11px; line-height: 18px;} .tblBoard td.subject.question a {padding-right: 50px;} } /* 글쓰기 */ .boardBody h3.wTit {padding-top: 42px; padding-left: 32px; padding-bottom: 30px; color: #212121; font-size: 20px; font-weight: 500; text-align: left;} .boardBody h3.wTit span {position: relative; display: inline-block; padding-left: 25px;} .boardBody h3.wTit span:before {content: ''; position: absolute; top: 3px; left: 13px; width: 1px; height: 17px; background-color: #c3c3c3;} .wirteWrap {margin-bottom: 55px; border-bottom: 1px solid #dcdcdc;} .wirteWrap > ul > li {position: relative; padding:10px 0; padding-right: 30px; border-top: 1px solid #e3e3e3; text-align: left;} .wirteWrap ul li > div {position: relative; padding-left: 144px;} .wirteWrap ul li .txtSizeXs {float: left; width:117px; padding-left: 8px;} .wirteWrap ul li .txtSizeXs input {width: 100%; height: 51px; padding:0 10px; border: 1px solid #dcdcdc; color: #444; text-align: center;} .wirteWrap ul li .label {display: inline-block; position: absolute; top: 16px; left: 0; width: 144px; padding-left: 43px; background-image:url(../images/board/bu_2p.png); background-position: 37px 7px; background-repeat: no-repeat; color: #6b6b6b; font-size: 15px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .wirteWrap ul li .secondLine {top: 8px;} .wirteWrap ul li .secondLine span {display: block;} .wirteWrap ul li .textBox .text {width: 583px; height: 51px; padding:0 10px; border: 1px solid #dcdcdc; font-size: 15px;} .wirteWrap ul li .textBox .textFull {width: 100%; height: 51px; padding:0 10px; border: 1px solid #dcdcdc; font-size: 15px;} .wirteWrap ul li .textBox .time {display: inline-block; padding-left: 18px; color: #777; font-size: 14px;} .wirteWrap .selectBox {position:relative; text-align:left;} .wirteWrap .selectBox select {width:100%; font-size:15px;} .wirteWrap .selectBox .customSelect {width: 117px; height: 51px; padding:15px; padding-right: 30px; border:1px solid #dcdcdc; background-image: url(../images/board/btn_boardselect_on.gif); background-position: 88px 50%; background-repeat: no-repeat; font-size:15px; color:#434343; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .selectBox .customSelectFocus { border-style:dashed !important; } .wirteWrap .selectBox .customSelectInner {overflow:hidden; width: 100% !important; white-space:nowrap; text-overflow:ellipsis; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} .wirteWrap .selectBox .customSelectInner:after {content:; position:absolute; top:0; right:10px;} .wirteWrap .selectBox .customSelectOpen {background-image: url(../images/board/btn_boardselect_off.gif);} .wirteWrap ul li.writer .selectBox {float:left;} .wirteWrap ul li.writer .selectBox ~ .selectBox {padding-left: 0; margin-left: 8px;} .wirteWrap ul li p.writer {display: inline-block; float: left; width: 107px; height: 49px; margin-left: 8px; color: #434343; font-size: 15px; font-weight: 300; border: 1px solid #dcdcdc; text-align: center; line-height: 46px;} .wirteWrap ul li .fileWrap .textBox {position: relative;} .wirteWrap ul li .fileWrap .textBox .text {width: 100%; padding-left: 88px;} .wirteWrap ul li .fileWrap .textBox .label {position: absolute; top: 13px; left: 0; width: 72px; height: 22px; padding-left: 0; border-right: 1px solid #dcdcdc; background-image: none; color: #7e7e7e; font-size: 14px; font-weight: 300; text-align: center; line-height: 22px;} .wirteWrap ul li .fileWrap .label {top: 3px;} /* 파일 추가 */ .fileBox {position: relative; padding-right: 124px;} .fileBox .fileText {width: 100%; height: 51px; padding-left: 88px; padding-right: 10px; border: 1px solid #dcdcdc; border-right: none; font-size: 14px;} .fileBox > p, .wirteWrap ul li.fileAddItem .fileWrap .fileGroup .textBox .label {position: absolute; top: 13px; left: 0; width: 72px; height: 22px; padding-left: 0; border-right: 1px solid #dcdcdc; background-image: none; color: #7e7e7e; font-size: 14px; font-weight: 300; text-align: center; line-height: 22px;} .fileBox .btn {display: inline-block; position: absolute; top: 0; right: 0; width: 124px; height: 51px; padding-left: 25px; background:url(../images/board/icon_file.png) 22px 50% no-repeat; border:1px solid #dcdcdc; color: #434343; font-size: 15px; text-align: center; line-height: 51px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; cursor: pointer;} .fileBtn {position: absolute; top: 0; right:0; width: 90px; height: 49px; border: 1px solid #dcdcdc;} .fileBtn li {float: left; width: 45px; height: 100%; padding:0;} .fileBtn li:first-child {position: relative;} .fileBtn li:first-child:before {content: ''; position: absolute; top: 13px; right: 0; width: 1px; height: 22px; background-color: #ddd;} .fileBtn li a {overflow: hidden; display: block; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -999px;} .fileBtn li a.btnAdd {background-image: url(../images/board/btn_plus.png);} .fileBtn li a.btnRemove {background-image: url(../images/board/btn_minus.png);} .wirteWrap ul li.fileAddItem div.fileWrap {padding-left: 0; padding-right: 105px;} .wirteWrap ul li.fileAddItem .fileWrap + .fileWrap {margin-top: 20px;} .wirteWrap ul li.fileAddItem div.fileWrap > div {position: relative; padding-left: 144px; margin-top: 10px;} .wirteWrap ul li.fileAddItem div.fileWrap div:first-child {margin-top: 0;} .wirteWrap ul li.fileAddItem .fileWrap .textBox .label {display: inline-block; position: absolute; top: 16px; left: 0; width: 144px; padding-left: 43px; border-right: none; background-image:url(../images/board/bu_2p.png); background-position: 37px 7px; background-repeat: no-repeat; color: #6b6b6b; font-size: 15px; font-weight: 400; text-align: left; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .wirteWrap ul li.fileAddItem .fileWrap .textBox {position: relative; margin-top: 10px;} .wirteWrap ul li.fileAddItem .fileWrap .textBox .fileGroup .label {position: absolute; top: 13px; left: 0; width: 72px; height: 22px; padding: 0; background-image: none; border-right: 1px solid #dcdcdc; color: #7e7e7e; font-size: 14px; font-weight: 300; text-align: center; line-height: 22px;} .wirteWrap ul li.fileAddItem .fileWrap .textBox input {width: 100%; padding-left:88px; padding-right: 10px;} .wirteWrap ul li.fileAddItem .fileWrap .textBox input.textFull {padding: 0 10px;} .inputHidden {overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip:rect(0,0,0,0); border: 0;} .wirteWrap ul li .usage {position: relative; color: #4f4f4f; font-size: 14px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .wirteWrap ul li.category .customSelect {width: 160px; background-position: 90% 50%;} .wirteWrap ul li > div.writer {padding-left: 8px;} .wirteWrap ul li .fileWrap .stxt {padding-top: 7px; padding-bottom: 3px; padding-left: 17px; color: #777; font-size: 14px; font-weight: 300; line-height: 20px;} .wirteWrap .radioGroup {margin-top: 5px; margin-bottom: 13px;} .radioGroup .radioBox {position: relative; display: inline-block; font-size: 14px; font-weight: 300;} .radioGroup .radioBox + .radioBox {margin-left: 20px;} .radioGroup .radioBox input[type="radio"] {overflow:hidden; position:absolute; left:-10000px; width:1px; height:1px; clip: rect(0, 0, 0, 0); border:0;} .radioGroup .radioBox label {display: inline-block; padding-left: 27px; background-image: url(../images/common/icon_radio_off.png); background-repeat: no-repeat; background-position: 0 50%; line-height: 21px;} .radioGroup .radioBox input[type="radio"]:checked + label {background-image: url(../images/common/icon_radio_on.png);} .wirteWrap .textArea {min-height: 51px;} .textArea textarea {width: 100%; height: 140px; padding:10px; border: 1px solid #dcdcdc; font-size: 14px;} .wirteWrap .selectBox.full .customSelect {width: 100%; background-position: 98% 50%;} .wirteWrap ul li .emailGroup .textBox {display: inline-block;} .wirteWrap ul li .emailGroup .textBox .text {width: 203px;} .wirteWrap ul li .emailGroup .formAtsign {display: inline-block; margin:0 4px; color: #434343; font-size: 15px; font-weight: 300;} .wirteWrap ul li .emailGroup .selectBox {display: inline-block; margin-left: 4px; vertical-align: middle;} .wirteWrap ul li .emailGroup .customSelect {width: 203px; background-position: 92% 50%;} .usage .useItem {margin-top: 17px; margin-right: 13px; vertical-align:top;} .usage .selectWrap {position: relative; width: 100%; max-width: 627px; height: 51px; line-height: 49px;} .useSelect {position: absolute; top: 0; left: 0; width: 100%; border:1px solid #dcdcdc; background-color: #fff; background-repeat: no-repeat; background-position: 98% 20px; background-image: url(../images/board/btn_boardselect_on.gif); z-index: 2;} .useSelect.on {background-image: url(../images/board/btn_boardselect_off.gif);} .useSelect li.option {display: none; border-top: 1px solid #dcdcdc;} .useSelect li a {display: block; width: 100%; padding-left: 19px; padding-right: 37px; color: #4f4f4f; font-size: 14px; letter-spacing:-1px; letter-spacing:-0.03em; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .useSelect li.option a:hover, .useSelect li.option a:focus {color: #2a57be; text-decoration: underline;} .warnning {margin-bottom: 37px; color: #4f4f4f; font-size: 14px; line-height: 20px;} .boardBody .btnGroup {font-size: 0;} .boardBody .btnGroup li {display: inline;} .boardBody .btnGroup li a {display: inline-block; width: 195px; height: 58px; padding-left: 29px; background-repeat: no-repeat; background-position: 69px 50%; color: #fff; font-size: 17px; font-weight: 300; line-height: 58px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardBody .btnGroup li .btn1 {margin-right: 1px; background-color: #4f5695; background-image: url(../images/board/icon_cansel2.png);} .boardBody .btnGroup li .btn2 {background-color: #373e7a; background-image: url(../images/board/icon_check.png);} @media all and (max-width:960px) { .wirteWrap ul li .textBox .text {width: 100%;} .wirteWrap ul li .textBox .time {padding-top: 5px; padding-left: 5px;} .wirteWrap ul li .emailGroup:before, .wirteWrap ul li .emailGroup:after {content:''; clear: both; display: block;} .wirteWrap ul li .emailGroup .textBox {float:left; width: 30%;} .wirteWrap ul li .emailGroup .textBox .text {width: 100%;} .wirteWrap ul li .emailGroup .formAtsign {float:left; width: 7%; margin: 0; text-align: center; line-height: 49px;} .wirteWrap ul li .emailGroup .selectBox {float:left; width: 30%; margin-left: 1%;} .wirteWrap ul li .emailGroup .customSelect {width: 100%;} } @media all and (max-width:767px) { .boardBody h3.wTit {padding: 0; padding-bottom: 10px; padding-left: 5px; font-size: 17px;} .wirteWrap {margin-bottom: 35px;} .wirteWrap > ul > li {padding-right: 0;} .wirteWrap ul li > div {padding-left: 82px;} .wirteWrap ul li .label {top: 10px; width: 78px; padding-left: 5px; background: none; font-size: 13px;} .wirteWrap ul li .fileWrap .secondLine {top: 3px;} .wirteWrap ul li .textBox .text {height: 35px;} .wirteWrap ul li .textBox .time {font-size: 12px;} .wirteWrap ul li .selectBox {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .wirteWrap ul li .selectBox {width: 100%;} .wirteWrap ul li .customSelect {width: 100%;background-position: 94% 50%; } .wirteWrap .selectBox .customSelect {width: 100%; height: 35px; padding:0 10px; background-position: 94% 50%; line-height: 33px; font-size: 14px;} .wirteWrap ul li.writer .selectBox {float:none;} .wirteWrap ul li.writer .selectBox ~ .selectBox {margin-left: 0; margin-top: 5px;} .wirteWrap ul li .txtSizeXs {float:none; width: 100%; margin-top: 5px; padding-left: 0;} .wirteWrap ul li .txtSizeXs input {height: 35px; font-size: 14px;} .fileBox {padding-right: 65px;} .fileBox .fileCount {display: none;} .fileBox .fileText {height: 35px; padding-left: 10px; } .fileBox .btn {width: 65px; height: 35px; padding-left: 0; background: none; font-size: 13px; line-height: 33px;} .wirteWrap ul li .fileWrap .textBox .label {top: 6px; width: 55px;} .wirteWrap ul li .fileWrap .textBox input {padding-left: 65px;} .wirteWrap ul li .fileWrap .stxt {padding-left: 5px; padding-top: 5px; padding-bottom: 0; font-size: 12px; line-height: 1.4;} .wirteWrap ul li > div.editor {padding-left: 0;} .wirteWrap ul li .editor .label {display: none;} .wirteWrap ul li .textBox .textFull {height: 35px;} .wirteWrap ul li .emailGroup .formAtsign {line-height: 34px;} .wirteWrap ul li div.usage {padding-left: 0;} .wirteWrap ul li div.usage .label {position: relative; padding-bottom: 10px;} .usage .selectWrap {height: 44px; line-height: 1.4;} .useSelect {background-position: 98% 12px;} .useSelect li a {position: relative; padding: 5px 32px 5px 28px; font-size: 12px; line-height: 1.4;} .usage .useItem {position: absolute; top: 0; left: 7px; height: 100%; margin: 0;} .warnning {margin-bottom: 35px; font-size: 12px;} .wirteWrap ul li.fileAddItem div.fileWrap {padding-right: 0;} .wirteWrap ul li.fileAddItem div.fileWrap > div {padding-left: 82px;} .wirteWrap ul li.fileAddItem .fileWrap .textBox .label {top: 10px; height: auto; width: 78px; padding-left: 5px; background:none; font-size: 13px;} .fileBox > p, .wirteWrap ul li.fileAddItem .fileWrap .fileGroup .textBox .label {top:4px;} .wirteWrap ul li.fileAddItem .fileWrap .textBox input.textFull {padding-right: 70px;} .fileBtn {width: 68px; height: 33px;} .fileBtn li {width: 34px;} .fileBtn li:first-child:before {top: 6px;} } .agreeBox {margin-top: 20px; padding-bottom: 5px; border-bottom: 2px solid #4e4e4e; text-align: left;} .agreeBox ul li {padding-bottom: 13px; padding-left:42px; color: #29161c; font-size: 15px; font-weight: 300; line-height: 21px;} .agreeBox ul li input {position:absolute; left:-10000px; width:1px; height:1px; clip: rect(0, 0, 0, 0); overflow:hidden; border:0;} .agreeBox ul li label {display: inline-block; padding-left: 27px; background-color: #fff; background-image: url(../images/use/icon_joincheck_off.png); background-position: left top; background-repeat: no-repeat; cursor:pointer;} .agreeBox ul li label span {color: #ff4242;} .agreeBox ul li input:checked + label {background-image: url(../images/use/icon_joincheck_on.png);} @media all and (max-width:960px) { .agreeBox {border-bottom: 1px solid #4e4e4e;} .agreeBox ul li {padding:0 10px 13px; font-size: 13px;} .agreeBox ul li label {background-position: left 10%;} } @media all and (max-width:767px) { .agreeBox {margin-top: 0; margin-bottom: 24px; padding-top: 13px; border-top: 1px solid #4e4e4e; } } /* view */ .viewHead {position: relative; padding-top: 50px; padding-bottom: 50px;} .viewHead h3.viewTit {padding-bottom: 17px; font-size: 26px; font-weight: 500; border-bottom: none; line-height: 1.4;} .viewHead .conItems > ul > li {position: relative; padding-left: 25px; color: #797979; font-size: 15px; line-height: 30px;} .viewHead .conItems > ul > li:first-child {padding-left: 38px;} .viewHead .conItems > ul > li:before {content: ''; position: absolute; top: 8px; left: 12px; width: 1px; height: 16px; background-color: #c9cacc;} .viewHead .conItems ul li .useItem {margin-left: 7px;} .viewHead .conItems ul li a.more {padding-right: 28px; background:url(../images/board/icon_next_square.png) 100% 50% no-repeat;color: #797979; font-size: 15px;} .viewHead .conItems ul li a.more:hover, .viewHead .conItems ul li a.more:focus {text-decoration: underline;} .viewHead .conItems ul li.rule {position: static; padding-left: 0;} .viewHead .conItems ul li.rule:before {content:none;} .viewHead .conItems ul li.rule .conRuleWrap {display: none; top: 140px; left: 260px; text-align: left;} .viewHead .conItems ul li.rule .conRuleWrap:before {bottom: auto; top: -11px; background: url(../images/board/arrow_pop_up.png) 53% 50% no-repeat;} .viewHead .conItems ul li.rule .conRuleWrap.active {display: block;} .viewHead .conItems ul li.rule .conRuleWrap .close {bottom: auto; top: 10px;} .viewHead .conItems ul li.rule .btnConRule {overflow: hidden; position: static; top: auto; left: auto; width: 16px; height: 16px; padding-right: 0; text-indent:-999px; vertical-align:middle;} .viewContent {padding:0 30px; color: #333; font-size: 15px; line-height: 22px; font-weight: 300;} .viewContent .mideaWrap {margin-bottom: 50px;} .viewContent .mideaWrap * {max-width: 100%; width: 100%;} .viewContent .conLike {padding-top: 28px; padding-bottom: 47px;} .viewContent .conLike .btn {width: 139px; height: 42px; padding-left: 33px; border: 1px solid #edc1a6; background-repeat: no-repeat; background-position: 30px 50%; background-image: url(../images/board/icon_like.png); border-radius: 20px; color: #d05e19; font-size: 14px; font-weight: 400; text-align: center;} .fileView {padding: 16px 0; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; background-color: #fafafa;} .fileView ul {display: inline-block;} .fileView ul li {float: left; padding-right: 10px; padding-left: 10px; line-height: 28px;} .fileView ul li, .fileView ul li a {display: inline; color: #4f4f4f; font-size: 14px; font-weight: 300;} .fileView ul li .btn {display: inline-block; width: 87px; height: 28px; padding-left: 20px; border: 1px solid #d9d9d9; background:#fff url(../images/board/btn_file_down.png) 7px 50% no-repeat; color: #000; font-size: 13px; text-align: center;} .fileView ul li .btn:hover, .fileView ul li .btn:focus {text-decoration:underline;} .fileView ul li.label {position: relative; padding-left: 0; font-weight: 300;} .fileView ul li.label:before {content: ''; position: absolute; top: 8px; right: 0; width: 1px; height: 13px; background-color: #d2d2d2;} .viewItems {position: relative; padding:34px 38px 58px;} .viewItems ul {position: relative;} .viewItems ul li a {display: block; height: 100%; padding-top: 20px; background-repeat: no-repeat; font-size: 15px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .viewItems ul li.prev, .viewItems ul li.next {position: absolute; top: 0; width: 155px; height: 58px; border: 1px solid #e5e5e5; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .viewItems ul li.prev {left: 0;} .viewItems ul li.prev a {padding-left: 19px; color: #3d3d3d; background-position: 33% 52%; background-image: url(../images/board/icon_prev_black.png);} .viewItems ul li.next {right: 0;} .viewItems ul li.next a {padding-right: 19px; color: #3d3d3d; background-position: 83% 52%; background-image: url(../images/board/icon_next_black.png);} .viewItems ul li.list {display: inline-block;} .viewItems ul li.list a {width: 235px; height: 58px; padding-left: 32px; background: #373e7a url(../images/board/icon_list.png) 40% 50% no-repeat; color: #fff; font-size: 17px; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .commentWrap {margin-bottom: 25px; padding:0 38px;} .commentWrap .scopeGroup { text-align: left;} .scopeGroup .scope {margin-bottom: 0;} .scopeGroup .scope li {display: inline-block; margin-left: 8px;} .scopeGroup .scope li:first-child {margin-left: 0;} .scopeGroup .scope li label {display: inline-block; vertical-align: middle;} .commentWrap input[type="radio"] {display:inline-block; margin-right:2px; margin-left: 10px; vertical-align:middle; -webkit-appearance:radio; -moz-appearance:radio; } .commentWrap input[type="radio"]:first-child {margin-left: 0;} .commentWrap .commentBox {position: relative; padding-right: 120px;} .commentWrap .commentBox .commentTxt {margin-top:10px;} .commentWrap .commentBox .commentTxt textarea {width: 100%; height: 120px; padding:20px 10px; border: 1px solid #d4d4d4; font-size: 14px;} .commentWrap .commentBox .btnComment {display: block; position: absolute; top: 0; right: 0; width: 120px; height: 100%; border: 1px solid #d4d4d4; border-left: none; color: #333; line-height: 118px; font-size: 14px; text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .commentWrap .commentBox .btnComment span {display: inline-block; padding-left: 23px; background:url(../images/content/icon_pencil.png) 0 50% no-repeat; background-size:17px auto; } .reviewTit {padding:15px 27px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: left;} .reviewTit p {display: inline-block;} .reviewTit .tit {margin-right: 16px; font-size: 16px; font-weight: 500;} .reviewTit .total {font-size: 15px; font-weight: 300;} .reviewTit .total span {display: inline-block; margin-right: 3px; color: #de430d;} .reviewList > ul > li {position: relative; border-bottom: 1px solid #ddd; text-align: left;} .reviewList .inner {font-size: 14px; font-weight: 300; line-height: 20px; word-break:keep-all;} .commentItems {position: absolute; right: 30px;} .commentItems ul {font-size: 0;} .commentItems ul li {display: inline;} .commentItems ul li:first-child a {border-left: 1px solid #ddd;} .commentItems ul li a {display: inline-block; padding:0 10px; border: 1px solid #ddd; border-left: none; color: #4c4c4c; font-size: 12px; font-weight: 300; line-height: 30px;} .commentItems ul li a:hover, .commentItems ul li a:focus {text-decoration: underline;} .comment.noneCmment {min-height: auto; padding:12px 0; padding-left: 125px;} .comment {min-height: 100px; padding:24px 0; padding-left: 125px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .comment input[type="radio"] {display:inline-block; margin-right:2px; margin-left: 10px; vertical-align:middle; -webkit-appearance:radio; -moz-appearance:radio; } .comment .commentItems {top: 22px;} .comment .user {position: absolute; top: 20px; left: 0; width: 125px; height: 100%; text-align: center;} .comment .user span {overflow: hidden; display: inline-block; width: 46px; height: 46px; border-radius: 50%;} .comment .user span img {width: 100%; height: 100%;} .comment .name {padding-top: 6px; color: #262626; font-size: 15px; font-weight: 300;} .comment .commentCon {position: relative; padding-right: 205px;} .scope {margin-bottom: 4px;} .scope li {display: none;} .scope li img {vertical-align: top;} .scope li.active {display: block;} .commentCon .date {display: inline-block; position: absolute; top: 0; left: 79px; font-size: 12px; font-weight: 100;} .reComment {padding-top: 16px; padding-bottom: 20px; padding-left: 195px;} .reComment .commentItems {top: 11px;} .reComment .name {position: absolute; top: 17px; left: 125px; padding-left: 28px; padding-right: 15px; background:url(../images/board/icon_reply.png) 0 0 no-repeat; font-size: 14px; font-weight: 300;} .reComment .name:before {content: ''; position: absolute; top: 4px; right: 0; width: 1px; height: 14px; background-color: #ddd;} .reComment .inner {float: left; padding-left: 10px; padding-right: 205px;} .reviewList .comment .commentWrap {margin-bottom: 0; padding: 0;} .reviewList .comment .commentWrap .commentBox {margin-top: 15px;} .reviewList .comment .commentWrap .commentBox .btnComment {font-size: 12px;} .viewFooter .pagination {padding-top: 34px;} .viewFooter .pagination ul li a {width: 21px; border: none;} .viewFooter .pagination ul li.last a {border-right: none;} .viewFooter .pagination ul li.active a {background: none;} .viewFooter .pagination ul li.active a:before {content:''; position:absolute; bottom:9px; left:8px; width:8px; height:2px; background-color:#9d9d9d;} .viewFooter .pagination ul li a:hover, .viewFooter .pagination ul li a:focus {font-weight: 700; background-color:#fff;} .viewFooter .pagination ul li.prev {margin-right: 12px;} .viewFooter .pagination ul li.next {margin-left: 12px;} .viewFooter .pagination ul li.first a, .viewFooter .pagination ul li.last a, .viewFooter .pagination ul li.prev a, .viewFooter .pagination ul li.next a {width: 25px;} @media all and (max-width:960px) { .viewHead .conItems ul li.rule .btnConRule {margin-bottom: 0;} .viewHead .conItems ul li.rule .conRuleWrap {left: 50%;} .viewItems ul li.list a {width: 154px; height: 49px; padding-top: 0; font-size: 14px; line-height: 49px;} .viewItems ul li.prev, .viewItems ul li.next {height: 49px; line-height: 47px;} .viewItems ul li a {padding-top: 0;} .viewContent {padding:0 2%;} .commentWrap {padding:0;} } @media all and (max-width:767px) { .viewContent {font-size: 14px; line-height: 1.4;} .viewHead {padding:30px 0 20px;} .viewHead h3.viewTit {font-size: 18px;} .viewHead .conItems > ul > li {padding-left: 15px; font-size: 12px;} .viewHead .conItems > ul > li:before {left: 6px;} .viewHead .conItems ul li .useItem {margin-left: 4px;} .viewHead .conItems ul li a.more {padding-right: 25px; font-size: 12px;} .viewHead .conItems ul li.rule .btnConRule {width: 20px; height: 20px; background-size:contain;} .viewHead .conItems ul li.rule .conRuleWrap {top: 108px;} .viewHead .conItems ul li.rule .conRuleWrap:before {-webkit-transform: none;-moz-transform: none;-ms-transform: none;-o-transform: none;transform: none;} .viewHead .conItems ul li.rule .conRuleWrap .close {top: auto; bottom: 10px;} .viewContent .mideaWrap {margin-bottom: 30px;} .viewContent .conLike {padding-bottom: 30px;} .viewContent .conLike .btn {width: 130px; height: 40px; padding-left: 29px; font-size: 13px;} .fileView {padding:15px 13px 0;border: 1px solid #cfcfcf; } .fileView ul {display: block; text-align: left;} .fileView ul li {display: block;float:none; padding: 0;} .fileView ul li.label {padding-right: 0;} .fileView ul li.label:before {content:none;} .fileView ul li:first-child+li {padding-bottom: 10px; border-bottom:1px solid #e4e4e4;} .fileView ul li a {color: #3a53a2;} .fileView ul li .btn {float:right; display: block; height: 35px; border: none; background: #fbfbfb url(../images/board/btn_file_down.png) 7px 50% no-repeat;} .viewItems {padding:18px 0 40px;} .viewItems ul li.prev, .viewItems ul li.next {display: none;} .commentWrap.MAT40 {margin-top: 25px !important;} .commentWrap .commentBox {padding-right: 75px;} .commentWrap .commentBox .commentTxt textarea {height: 85px; padding:12px 8px; font-size: 12px;} .commentWrap .commentBox .btnComment {width: 75px; font-size: 13px; line-height: 83px;} .commentWrap .commentBox .btnComment span {padding-left: 19px; background-size:14px auto;} .scopeGroup .scope li {margin-left: 5px;} .reviewList {padding:0 2%;} .reviewTit {padding: 15px;} .reviewTit .tit {font-weight: 400; font-size: 14px;} .reviewTit .total {font-size: 13px;} .reviewList > ul > li {padding-left: 0;} .reviewList .comment.noneComment {padding:8px 0; padding-left: 5px;} .reviewList .comment {padding-top: 20px; padding-bottom: 16px;} .comment .user {position: relative; top: auto; left: auto; width: auto; height: auto; padding-left: 40px; padding-bottom: 10px; text-align: left;} .comment .user span {position: absolute; top: 0; left: 0; width: 31px; height: 31px;} .comment .name {padding-top: 0; line-height: 31px; font-size: 13px;} .comment .commentCon {padding-right: 0; padding-bottom: 16px;} .comment .commentItems {top: auto;} .commentCon .scope {position: absolute; top: -32px; right: 65px; margin-bottom: 0;} .commentCon .date {top: -32px; left: auto; right: 0;} .commentItems {position: relative; top: auto; right: auto; height: auto; margin-top: 0; text-align: right;} .reviewList .inner {font-size: 13px; line-height: 1.4;} .reviewList > ul > li.reComment {padding-left: 24px;} .reComment {padding-top: 10px; padding-bottom: 16px;} .reComment .commentItems {top: auto;} .reComment .name {position: relative; top: auto; left: auto; padding-top: 5px; padding-left: 25px; font-size: 13px;} .reComment .name:before {content: none;} .reComment .inner {padding: 12px 0 12px 25px;} .viewFooter .pagination {padding-top: 20px;} } @media all and (max-width:480px) { .scopeGroup .scope li:nth-child(4) {margin-left: 0;} } @media all and (max-width:350px) { .viewHead .conItems > ul > li {padding-left: 10px;} .viewHead .conItems > ul > li:before {left: 4px;} .viewHead .conItems > ul > li:first-child+li+li+li {padding-left: 0;} .viewHead .conItems > ul > li:first-child+li+li+li:before {content:none;} .viewHead .conItems ul li.rule .conRuleWrap {top: 125px;} } /* table mobile */ #iconDrag {display: none;} @media all and (max-width:767px) { .tblDrag {overflow: hidden; overflow-x: auto;} .tblDrag table {width: 767px;} #iconDrag {display: block; margin-top: 10px; border-top:1px solid #9f9f9f; color:#535353; text-align:center; font-size: 12px;} #iconDrag span {display:inline-block; padding:12px 0 12px 70px; background:url(../images/sub/icon_tableDrag.png) left center no-repeat; background-size:60px auto; } } /* 공유하기 */ .shareBox {display: none; position: absolute; text-align: center; z-index: 200; -webkit-box-shadow: 3px 4px 5px 0px rgba(0,0,0,0.12);box-shadow: 3px 4px 5px 0px rgba(0,0,0,0.12);} .shareBox:after {content:''; position: absolute; bottom: -8px; left: 0; width: 100%; height: 9px; background: url(../images/sub/bg_share.png) 50% 50% no-repeat;} .shareBox ul {width: 211px; height: 50px; padding-top: 9px; padding-left: 23px; border: 1px solid #9e9e9e; background-color: #fff; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .shareBox ul li {float:left} .shareBox ul li a {overflow: hidden; display: inline-block; width: 28px; height: 28px; margin-left: 7px; background-repeat: no-repeat; background-position: 50% 50%; text-indent:-999px;} .shareBox ul li.share1 a {margin-left: 0; background-image: url(../images/sub/icon_social1.png);} .shareBox ul li.share2 a {background-image: url(../images/sub/icon_social2.png);} .shareBox ul li.share3 a {background-image: url(../images/sub/icon_social4.png);} .shareBox ul li.share4 a {background-image: url(../images/sub/icon_share4.jpg);} .shareBox ul li.close a {margin-left: 12px; background-image: url(../images/sub/icon_share_close.png);} .shareBox ul li.share5 a {background-image: url(../images/sub/icon_social3.png);} .shareBox ul li.share6 a {background-image: url(../images/sub/icon_social6.png);} .btnShare {background-repeat: no-repeat; background-image: url(../images/sub/icon_share.png); background-position: 7px 50%;} /*.btnItems > li > .btnShare {border-left:1px solid #e8e8e8;} 190607 */ @media all and (max-width:767px) { .btnShare {background-image: url(../images/sub/icon_share_lg.png);} } /* 통합관광정보 */ .totalInfo {position: absolute; top: 0;left: 0; width: 185px; height: 100%; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;} .totalInfo .cityName {overflow: hidden; display: table; width: 100%; height:106px; text-align: center;} .totalInfo .cityName picture {display: table-cell; height: 100%; vertical-align: middle;} .totalInfo .cityName img {vertical-align:middle;} .totalInfo .infoTheme {padding-top: 17px; padding-bottom: 12px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; text-align: center;} .totalInfo .infoTheme ul {display: inline-block;} .totalInfo .infoTheme ul li {display: table-cell; float: left; position: relative; padding:0 6px;} .totalInfo .infoTheme ul li a {display: block; padding-bottom: 4px; color: #36383c; font-size: 15px; white-space: nowrap;} .totalInfo .infoTheme ul li.active a, .totalInfo .infoTheme ul li a:hover, .totalInfo .infoTheme ul li a:focus {color: #4e6bc8; border-bottom: 1px solid #4e6bc8; font-weight: 500;} .totalInfo .infoTheme ul li a:before {content: ''; position: absolute; top: 3px; left: 0; width: 1px; height: 12px; background-color: #d2d2d4;} .totalInfo .infoTheme ul li:first-child a:before {content: none;} .totalInfo .infoCon .themeList {min-height:479px;} .totalInfo .infoCon .listWrap a {overflow: hidden; display: block; margin:0 12px; padding: 13px 8px 13px; border-top: 1px solid #e8e8e8; color: #000; font-size: 15px; font-weight: 300; white-space: nowrap; text-overflow: ellipsis;} .totalInfo .infoCon .listWrap li:first-child > a {border-top: none;} .totalInfo .infoCon ul li a .addr {display: block; padding-top: 4px; color: #898888; font-size: 12px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden} .totalInfo .infoCon .listWrap li.active a, .totalInfo .infoCon .listWrap li a:hover, .totalInfo .infoCon .listWrap li a:focus {margin:0; padding:13px 20px 13px; background-color: #f8f8f8; background-image: url(../images/content/icon_arrow_sm.png); background-repeat: no-repeat; background-position: 95% 50%;} .totalInfo .infoCon .listWrap li.active + li a, .totalInfo .infoCon .listWrap li:hover + li a {margin:0; padding:13px 20px 13px;} .totalInfo .infoCon {text-align: left;} .totalInfo .infoCon .moTitle {display: none;} .totalInfo .totalCounter {padding: 15px 16px 15px 18px; border-top: 1px solid #e8e8e8;} .totalCounter p {display: inline-block; color: #4c4c4c; font-size: 14px; font-weight: 300; line-height: 22px;} .totalCounter ul {float: right;} .totalCounter ul li {float: left; font-size: 14px;} .totalCounter ul li.counter {margin-right: 12px; line-height: 22px; font-weight: 300; letter-spacing: 2px; line-height: 25px;} .totalCounter .prev, .totalCounter .next {overflow: hidden; display: block; width: 27px; height: 25px; border: 1px solid #e8e8e8; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -999px;} .totalCounter .prev {border-right: none; background-image: url(../images/content/icon_prev.png);} .totalCounter .next {background-image: url(../images/content/icon_next.png);} #totalCon {float: right; width: 81%; padding-top: 38px; padding-bottom: 50px;} #totalCon h3.subTit {padding-bottom: 20px; color: #000; font-size: 20px; font-weight: 500; text-align: left;} #totalCon .touristWrap .titBox {position: relative; padding-bottom: 34px; text-align: left;} .touristWrap .titBox .conTit {display: inline-block; padding-top: 2px; color: #000; font-size: 28px; font-weight: 500;} .touristWrap .titBox .btn {display: inline-block; position: absolute; top: 0; right: 0;} .touristWrap .titBox .btn li {float: left;} .touristWrap .titBox .btn li .btnShare, .touristWrap .titBox .btn li .btn1, .touristWrap .titBox .btn li .btn2 {display: block; width: 88px; height: 44px; padding-left: 21px; border: 1px solid #e8e8e8; border-left: none;background-repeat: no-repeat; color: #5a5a5a; font-size: 13px;text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .touristWrap .titBox .btn li .btn1 {background-image: url(../images/content/icon_audio.png); background-position: 13px 48%;} .touristWrap .titBox .btn li .btn2 {background-image: url(../images/content/icon_star_off.png); background-position: 7px 51%;} .touristWrap .titBox .btn li a:hover, .touristWrap .titBox .btn li a:focus, .touristWrap .titBox .btn li button:hover, .touristWrap .titBox .btn li button:focus {text-decoration: underline;} .touristWrap .titBox .btn li .btn2.active, .touristWrap .titBox .btn li .btn2:hover, .touristWrap .titBox .btn li .btn2:focus {background-image: url(../images/content/icon_star_on.png);} .touristWrap .titBox .btn .shareBox {top: -60px; left:60px;} #totalCon .touristWrap {position: relative; padding-right: 179px;} /*.touristWrap .touristMain {float: left; width: 80%;}*/ /*.touristMain .videoWrap {overflow: hidden; width: 100%; height: 410px;}*/ .touristMain .videoWrap {overflow: hidden; width: 100%;} .touristMain .videoWrap video {width: auto; min-width:100%; height:100%;} .touristMain .videoWrap iframe {width: auto; min-width:100%; height:100%;} .touristMain .mainInfo {position: relative; padding:30px 0 32px 157px; border: 1px solid #e8e8e8; border-top: none; text-align: left;} .touristMain .mainInfo .infoLogo {display: table; position: absolute; top:30px; left: 18px; width: 130px; height: 52px; text-align: center;} .touristMain .mainInfo .infoLogo p {display: table-cell; vertical-align:middle;} .touristMain .mainInfo .vidTit {overflow: hidden; max-width:240px; padding-bottom: 8px; padding-left: 12px; border-left: 1px solid #e5e6ea; color: #232323; font-size: 18px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis;} .touristMain .mainInfo .info {max-width:545px; padding-left: 12px; border-left: 1px solid #e5e6ea;} .touristMain .mainInfo .info li {float: left; color: #1a1a1a; font-size: 13px; font-weight: 300; text-align: center;} .touristMain .mainInfo .info li .bar {display: inline-block; margin:0 6px; padding:0 6px; border-left: 1px solid #cecdcd;} .touristMain .mainInfo .btnItems {position: absolute; top: 29px; right: 15px; z-index: 2;} .touristMain .mainInfo .btnItems .shareBox {top: -62px; left: 2px;} .touristMain .mainInfo .moBtn {display: none;} .touristWrap .moTourVid {display: none;} .touristWrap .touristList {overflow:hidden; position: absolute; top: 0; right: 0; width: 179px; height: 100%; max-height:514px; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .touristList .listTab {padding: 20px 0;border-top: 1px solid #e8e8e8;} .touristList .listTab ul {font-size: 0;} .touristList .listTab ul li {display: inline-block; position: relative;} .touristList .listTab ul li:first-child {padding-right: 15px;} .touristList .listTab ul li:first-child+li {padding-left: 12px;} .touristList .listTab ul li:first-child:before {content: ''; position: absolute; top: 2px; right: 0; width: 1px; height: 14px; background-color: #d1d1d1;} .touristList .listTab ul li a {display: block; padding-bottom: 3px; color: #4e4e4e; font-size: 15px; text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .touristList .listTab ul li.active a, .touristList .listTab ul li a:hover, .touristList .listTab ul li a:focus {border-bottom: 1px solid #4e6bc8; color: #4e6bc8;} .touristList .videoList, .touristList .picList {width: 137px; padding:0 20px;} .touristList .listSlide {min-height: 325px;} .touristList .listSlide .slide li {margin-top: 16px;text-align: left;} .touristList .listSlide .slide li:first-child {margin-top: 0;} .touristList .listSlide .slide li a {display: block;} .touristList .listSlide .slide li a .thum {position: relative; width: 100%; height: 75px; margin-bottom: 8px;} .touristList .listSlide .slide li a .thum img {width: 100%; height: 100%;} .touristList .listSlide .slide li a .tit {overflow: hidden; color: #000; font-size: 13px; font-weight: 300; white-space: nowrap; text-overflow: ellipsis;} .touristList .listSlide .slide li a .date {color: #878787; font-size: 12px; font-weight: 300;} .touristList .videoList .slide li a .thum .time {display: inline-block; position: absolute; bottom: 0; right: 0; padding:2px 3px; background: #000; color: #fff; font-size: 12px; font-family: "Dotum","돋움",sans-serif;} .touristList .videoList .slide li a.active .thum:after, .touristList .videoList .slide li a:hover .thum:after, .touristList .videoList .slide li a:focus .thum:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 75px; background: rgba(000,000,000,0.3) url(../images/content/icon_play_sm.png) 50% 50% no-repeat;} .touristList .videoList .slide li a:hover .tit, .touristList .videoList .slide li a:focus .tit {text-decoration: underline; color: #d34d1f;} .touristList .totalCounter {padding-top: 28px;} .touristList .totalCounter .counter {display: inline-block; margin: 0; padding:0 10px; letter-spacing: 2px;} .touristList .totalCounter .counter .current {font-weight: 700;} .touristList .totalCounter .slick-next, .touristList .totalCounter .slick-prev {overflow: hidden; display: inline-block; width: 27px; height: 25px; border: 1px solid #e8e8e8; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -999px;} .touristList .totalCounter .slick-prev {border: 1px solid #e8e8e8; background-image: url(../images/content/icon_prev.png);} .touristList .totalCounter .slick-next {background-image: url(../images/content/icon_next.png);} #totalCon .btnPopup, #totalCon .tourPopup {display: none;} #totalCon .touristIntro {padding: 42px 15px 0; text-align: left;} .touristIntro .tabBtn {margin-bottom: 20px; font-size: 0;} .touristIntro .tabBtn li {display: inline-block;position: relative; } .touristIntro .tabBtn li:first-child+li {margin-left: 13px; padding-left: 13px;} .touristIntro .tabBtn li:first-child+li:before {content: ''; position: absolute; top: 3px; left: 0; width: 1px; height: 20px; background-color: #dedede;} .touristIntro .tabBtn li a {display: block; padding-bottom: 2px; color: #000; font-size: 22px;} .touristIntro .tabBtn li a:hover, .touristIntro .tabBtn li a:focus, .touristIntro .tabBtn li.active a {border-bottom: 1px solid #4e6bc8; color: #4461bd;} #totalCon .touristTxt {margin-bottom: 50px; padding-right: 2%; font-size: 15px; font-weight: 300; line-height: 24px; text-align: justify;} #totalCon #tab4 {max-height:300px; overflow-y:auto; word-break:break-all; white-space:pre-wrap;} .touristTxt .info {margin-top: 32px;} .touristTxt .info li {padding-left: 9px; background:url(../images/content/bu_2p.png) 0 11px no-repeat; color: #232323; font-size: 15px; font-weight: 300;} .touristTxt .info li span {display: inline-block; width: 72px; color: #797979;} #totalCon .touristMap {padding-left: 15px; text-align: left;} .touristMap .mapWrap {overflow: hidden; position: relative; height: 461px; padding-left: 141px; border: 1px solid #e8e8e8; } .touristMap .markerWrap {position: absolute; top: 0; left: 0; width: 141px; height: 100%; background-color: #fff; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .touristMap .markerWrap .markerList {height: 100%;} .markerList li {height: 9.09090%;} .markerList li a {display: block; height: 100%; padding-top:12px; padding-bottom: 12px; padding-left: 45px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; background-repeat: no-repeat; background-position: 10px 50%; color: #0b0b0b; font-size: 14px; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .markerList li.i1 a {background-image: url(../images/content/icon_map1.png);} .markerList li.i1 a:hover {border-top-color: #fff;} .markerList li.i2 a {background-image: url(../images/content/icon_map2.png);} .markerList li.i3 a {background-image: url(../images/content/icon_map3.png);} .markerList li.i4 a {background-image: url(../images/content/icon_map4.png);} .markerList li.i5 a {background-image: url(../images/content/icon_map5.png);} .markerList li.i6 a {background-image: url(../images/content/icon_map6.png);} .markerList li.i7 a {background-image: url(../images/content/icon_map7.png);} .markerList li.i8 a {background-image: url(../images/content/icon_map8.png);} .markerList li.i9 a {background-image: url(../images/content/icon_map9.png);} .markerList li.i10 a {background-image: url(../images/content/icon_map10.png);} .markerList li.i11 a {background-image: url(../images/content/icon_map11.png);} .markerList li.i11 a:focus, .markerList li.i11 a:hover {border-bottom-color:#fff;} .markerList li a:focus, .markerList li a:hover {border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;background-color: #f8f8f8;} .markerWrap .selectBox {position: absolute; bottom: 0; left: 0; width: 100%; height: 43px; border-top: 1px solid #e8e8e8;} .markerWrap .selectBox select {width: 100% !important; height: 100%;} .markerWrap .selectBox .customSelect {width: 100%; height: 100%; background:url(../images/content/icon_km.png) 16px 50% no-repeat; cursor:pointer;} .markerWrap .selectBox .customSelect .customSelectInner {width: 100% !important; height: 100%; padding-top: 13px; padding-left: 47px; background-repeat: no-repeat; background-position: 94% 50%; background-image: url(../images/content/icon_map_arrow_off.png); color: #0b0b0b; font-size: 14px; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .markerWrap .selectBox .customSelectOpen .customSelectInner {background-image: url(../images/content/icon_map_arrow_on.png);} .touristMap .mapWrap .map {position: relative; width: 100%; height: 100%;} #map .mapCustom {display: inline-block; position: absolute; top: 0; left: 0; -webkit-transform: translate(-50%, -82px);-moz-transform: translate(-50%, -82px);-ms-transform: translate(-50%, -82px);-o-transform: translate(-50%, -82px);transform: translate(-50%, -82px);} #map .mapCustom .title {padding-left: 15px; padding-right: 28px; border: 2px solid #252525; background-repeat: no-repeat; background-position: 95% 50%; background-image: url(../images/content/icon_marker_arrow.png); border-radius: 22px; background-color: #fff; color: #303030; font-size: 15px; line-height: 29px;} .mapCustom2 {padding:7px 28px 8px; border-radius:20px; background-color: #000d36; background-color: rgba(000,013,054,0.8);color: #fff; font-size: 16px;} .mapCustom2 a {color: #fff;} .touristMap .mapSearch {position: relative; padding:15px 101px 15px 141px; border: 1px solid #e8e8e8; border-top: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .touristMap .mapSearch .mapTit {position: absolute; top: 0; left: 0; width: 141px; height: 100%; padding-top: 28px; padding-left: 46px; background:url(../images/content/icon_letter.png) 18px 50% no-repeat; color: #2f2a29; font-size: 14px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .touristMap .mapSearch .searchForm li {float: left; position: relative; max-width: 312px; width: 100%;} .touristMap .mapSearch .searchForm li input[type="text"] {width: 100%; height: 44px; padding-right: 10px;padding-left:64px; border: 1px solid #e8e8e8; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; font-size: 14px;} .touristMap .mapSearch .searchForm li label {display: inline-block; position: absolute; top: 10px; left: 0; width: 56px; height: 23px; border-right: 1px solid #e8e8e8; color: #898989; font-size: 14px; text-align: center; line-height: 23px;} .touristMap .mapSearch .searchForm li.mapStart {margin-right: 7px;} .touristMap .mapSearch .searchForm li.mapArrival {width: 48%;} .touristMap .mapSearch .searchForm li.mapArrival input {background-color: #fff; color: #000; font-size: 13px; letter-spacing: -0.03em;} .touristMap .mapSearch .btn {position: absolute; top: 15px; right: 23px; width: 70px; height: 44px; background-color: #fafafa; border: 1px solid #e8e8e8; color: #000; font-size: 13px; font-weight: 700; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; cursor: pointer;} .touristMain .moTourVid {display: none;} .touristMap .mapSearch .mapLink {display: none;} #totalCon .reCourse {padding-top: 55px; padding-bottom: 40px; padding-left: 15px; text-align: left;} .reCourse h3.subTit span {display: inline-block; padding-left: 6px; color: #d75803; font-size: 18px; font-weight: 400;} .reCourse .course {position: relative ;border-bottom: 1px solid #e6e6e6;} .reCourse .course ul {height: 45px; padding-left: 13px; background:url(../images/content/bu_3p.png) 3px 21px no-repeat; font-size: 0; margin-right : 130px; overflow: hidden; text-overflow: ellipsis; /* display: -webkit-box;*/ /* -webkit-line-clamp: 1; */ /* -webkit-box-orient: vertical;*/ } .reCourse .course ul li {display: inline-block; padding-left: 20px; background:url(../images/content/icon_arrow.png) 6px 50% no-repeat;} .reCourse .course ul li:first-child {padding-left: 0; background: none;} .reCourse .course ul li a {display: block; padding: 14px 0; color: #232323; font-size: 16px; font-weight: 300;} .reCourse .course ul li a.point {color: #982801;} .reCourse .course ul li a:hover, .reCourse .course ul li a:focus {text-decoration: underline;} .reCourse .course .btn {display: block; position: absolute; top: 6px; right: 0; width: 126px; height: 33px; padding-top: 8px; padding-left: 19px; background-image:url(../images/content/icon_location_red.png); background-position: 15px 50%; background-repeat: no-repeat; color: #c96947; font-size: 14px; text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .reCourse .course .btn:hover, .reCourse .course .btn:focus {text-decoration: underline;} #totalCon .hashWrap {padding-left: 15px;} .hashWrap {position: relative;} .hashWrap > p {position: absolute; top: 8px; left: 0; width: 51px; color: #646464; font-size: 14px; text-align: left;} .hashWrap > p span {display: inline-block; padding-right: 3px;font-size: 20px;} .hashWrap ul {border-left: 1px solid #e8e8e8; font-size: 0; text-align: left;} .hashWrap ul li {display: inline-block; color: #646464; font-size: 14px; font-weight: 300;} .hashWrap ul li span, .hashWrap ul li a {display:block; padding:12px 15px; border: 1px solid #e8e8e8; border-left: none; } .hashWrap ul li:first-child span, .hashWrap ul li:first-child a {border-left: none;} .hashWrap ul li + li span, .hashWrap ul li + li a {margin-top: -1px;} @media all and (max-width: 960px) { .totalInfo {position: relative; width: 100%; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .totalInfo .cityName {display: block; height: 98px; padding:28px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;} .totalInfo .cityName picture {display: block;} .totalInfo .cityName img {width: auto; height: 100%;} .totalInfo .infoTheme {padding: 0;} .totalInfo .infoTheme ul {display: block;} .totalInfo .infoTheme ul li {width: 25%; padding: 0; border-left: 1px solid #e8e8e8; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} .totalInfo .infoTheme ul li:first-child {border-left: none;} .totalInfo .infoTheme ul li a:before {content: none;} .totalInfo .infoTheme ul li a {padding:16px 0;} .totalInfo .infoTheme ul li.active a, .totalInfo .infoTheme ul li a:hover, .totalInfo .infoTheme ul li a:focus {position: relative; border-bottom: none; background-color: #f9f9f9;} .totalInfo .infoTheme ul li.active a:after, .totalInfo .infoTheme ul li a:hover:after, .totalInfo .infoTheme ul li a:focus:after {content: ''; position: absolute; bottom: 12px; left: 50%; width: 32px; height: 2px; margin-left: -15px; background-color: #4e6bc8;} .totalInfo .infoTheme ul li:first-child.active a:after, .totalInfo .infoTheme ul li:first-child a:hover:after, .totalInfo .infoTheme ul li:first-child a:focus:after {width: 44px; margin-left: -22px;} .totalInfo .infoCon .moTitle {overflow: hidden; display:block; padding-top: 30px; padding-right: 30px; padding-bottom: 28px; padding-left: 5%; color: #36383c; border-bottom: 1px solid #e8e8e8; background-image: url(../images/content/icon_listdown_lg.png); background-repeat: no-repeat; background-position: 98% 50%; background-size:20px auto;font-size: 18px; font-weight: 500; white-space:nowrap; text-overflow:ellipsis;} .totalInfo .infoCon .moTitle .addr {overflow: hidden; display: block; padding-top: 7px; padding-right: 20px; color: #747474; font-size: 13px; font-weight: 300; white-space:nowrap; text-overflow:ellipsis;} .totalInfo .infoCon.moActive .moTitle {background-image: url(../images/content/icon_listup_lg.png);} .totalInfo .infoCon .themeWrap {display: none;} #totalCon {float: none; width: 100%; padding: 14px 15px 20px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} #totalCon .touristWrap {padding-right: 0;} #totalCon .touristWrap .titBox {display: none;} .touristWrap .touristList {display: none;} .touristWrap .touristMain {width: 100%; height: auto; border: none;} .touristMain .videoWrap {position: relative; height: auto; padding-bottom: 56.202%;} .touristMain .videoWrap video, .touristMain .videoWrap iframe {position: absolute; top: 0; left: 0;} .touristMain .videoWrap > img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .touristWrap .moTourVid {display: block; padding-top: 28px; padding-bottom: 22px; border-bottom: 1px solid #dcdcdc;} .moTourVid ul li {position: relative; min-height: 71px; margin-bottom: 13px; padding-left: 147px; text-align: left;} .moTourVid ul li .thumb {display: block; position: absolute; top: 0; left: 0; width: 129px; height: 71px;} .moTourVid ul li .thumb.movie:before {content:''; position: absolute; bottom: 7px; left: 8px; width: 20px; height: 20px; background: url(../images/content/bu_movie.png) 50% 50% no-repeat; background-size:contain;} .moTourVid ul li .thumb img {width: 100%; height: 100%;} .moTourVid ul li a {overflow: hidden; display: block; padding-top: 5px; padding-bottom: 7px; font-size: 16px; white-space: nowrap; text-overflow: ellipsis;} .moTourVid ul li .info {padding-bottom: 3px;color: #777; font-size: 12px; } .moTourVid ul li .info a {display: inline-block; color: #777; font-size: 12px;} #totalCon .touristIntro {padding: 24px 15px 0;} .touristIntro .tabBtn {margin-bottom: 0;} .touristIntro .tabBtn li a {font-size: 17px;} .touristIntro .tabBtn li:first-child+li:before {top: 0;} #totalCon .touristTxt {margin: 24px 2px 30px;} #totalCon h3.subTit {padding-bottom: 12px; font-size: 17px;} .touristTxt > p {font-size: 14px; line-height: 20px;} .touristTxt .info {margin-top: 20px;} .touristTxt .info li {padding-bottom: 5px; padding-left: 7px; font-size: 14px;} .touristTxt .info li span {color: #000;} #totalCon .touristMap {position: relative; padding-left: 0;} #totalCon .touristMap h3.subTit {padding-top: 3px; padding-bottom:20px;} #totalCon .btnPopup {display: inline-block; position: absolute; top: 0; right: 0; padding:1px 8px 2px 6px; border: 1px solid #e0cbb1; color: #754e31; font-size: 13px; line-height: 22px;} #totalCon .btnPopup span {display: inline-block; width: 17px; height: 17px; margin-right: 4px; border: 1px solid #e0cbb1; border-radius:50%; color:#9b5b38; font-size: 12px; text-align: center; line-height: 17px;} #totalCon .tourPopup {position: absolute; top: 0; left: 0; width: 90%; width:300px; min-height:355px; background-color: #fff; text-align: center; z-index: 12;} .tourPopup .popTit {padding:20px 0; color: #0b0b0b; font-size: 16px;} .tourPopup .popCon { padding:24px 27px; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;} .tourPopup .popCon ul {font-size: 0;} .tourPopup .popCon ul li {display: inline-block; width: 50%; margin-top: 12px; padding-left: 32px; background-repeat: no-repeat; background-position: 0 50%; background-size:25px auto; color: #0b0b0b; font-size: 13px; line-height: 28px; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .tourPopup .popCon ul li:first-child, .tourPopup .popCon ul li:first-child+li {margin-top: 0;} .tourPopup .popCon ul li.i1 {background-image:url(../images/content/icon_map1_lg.png);} .tourPopup .popCon ul li.i2 {background-image:url(../images/content/icon_map6_lg.png);} .tourPopup .popCon ul li.i3 {background-image:url(../images/content/icon_map2_lg.png);} .tourPopup .popCon ul li.i4 {background-image:url(../images/content/icon_map7_lg.png);} .tourPopup .popCon ul li.i5 {background-image:url(../images/content/icon_map3_lg.png);} .tourPopup .popCon ul li.i6 {background-image:url(../images/content/icon_map8_lg.png);} .tourPopup .popCon ul li.i7 {background-image:url(../images/content/icon_map4_lg.png);} .tourPopup .popCon ul li.i8 {background-image:url(../images/content/icon_map9_lg.png);} .tourPopup .popCon ul li.i9 {background-image:url(../images/content/icon_map5_lg.png);} .tourPopup .popCon ul li.i10 {background-image:url(../images/content/icon_map10_lg.png);} .tourPopup .popClose {display: block; height: 57px; background-color: #f7f7f7; color: #656565; font-size: 16px; font-weight: 300; line-height: 57px;} .tourPopup .popClose span {display:inline-block;height: 100%; padding-left: 22px; background:url(../images/content/icon_close_lg.png) 0 51% no-repeat; background-size:14px auto;} .touristMap .mapWrap {height: 50vw; min-height:220px; padding-left: 0;} .touristMap .markerWrap {display: none;} .touristMap .mapSearch {padding:16px;} .touristMap .mapSearch .searchForm {display: none;} .touristMap .mapSearch .btn {display: none;} .touristMap .mapSearch .mapTit {position: relative; float: left; width: auto; height: auto; margin-top: 13px; padding: 0; background: none; font-size: 15px; font-weight: 400;} .touristMap .mapSearch .mapLink {display: block; float: right;} .touristMap .mapSearch .mapLink li {display: inline-block;} .touristMap .mapSearch .mapLink li a {overflow: hidden; display: inline-block; width: 42px; height: 42px; background-repeat: no-repeat; background-position: 50% 50%; background-size:contain; text-indent:-999px;} .touristMap .mapSearch .mapLink li:first-child a {background-image: url(../images/content/icon_google_lg.png);} .touristMap .mapSearch .mapLink li:first-child+li a {background-image: url(../images/content/icon_kakaomap_lg.png);} .touristMap .mapSearch .mapLink li:first-child+li+li a {background-image: url(../images/content/icon_naver_lg.png);} #totalCon .reCourse {padding-top: 34px; padding-bottom: 36px; padding-left: 0;} .reCourse h3.subTit span {font-size: 17px;} .reCourse .course {padding-right: 35px; overflow: hidden; } .reCourse .course ul {height: 29px; margin-right: 0; padding-left: 10px; background-position: 2px 13px; white-space: nowrap;} .reCourse .course ul li {padding-left: 15px; background-image: url(../images/content/icon_arrow.png); background-repeat: no-repeat; background-position: 5px 50%; background-size: 6px auto;} .reCourse .course ul li a {display: inline-block; padding:7px 0; font-size: 13px;} .reCourse .course .btn {overflow: hidden; top: 50%; width: 31px; height: 28px; margin-top: -14px; background-image: url(../images/content/icon_location_lg.png); background-position: 50% 50%; background-size:14px auto; text-indent: -999px;} .reCourse .course .btn span {display: none;} #totalCon .hashWrap {padding-left: 0;} .hashWrap ul li span {padding: 10px 14px; font-size: 13px;} } @media all and (max-width: 767px) { .totalInfo .infoCon .moTitle {background-size: 16px auto; background-position: 95% 50%;} .touristMain .mainInfo {padding: 20px 0 80px 110px;} .touristMain .mainInfo .infoLogo {top: 18px; left: 0; width: 110px; height: 44px;} .touristMain .mainInfo .vidTit {font-size: 16px;} .touristMain .mainInfo .info li {font-size: 11px;} .touristMain .mainInfo .btnItems {top: auto; right: 0; bottom: 0; width: 100%;} .touristMain .mainInfo .btnItems > li {width: 25%;} .touristMain .mainInfo .btnItems > li > button, .touristMain .mainInfo .btnItems > li > a {width: 100%; height: 50px; border-bottom: none; text-indent: 0; background-position: 20% 50%; background-size:20px auto;} .touristMain .mainInfo .btnItems > li:first-child > a, .touristMain .mainInfo .btnItems > li:first-child > button {border-left: none;} .touristMain .mainInfo .btnItems > li > button.btnInterest {background-position: 25% 50%; border-right: none;} .touristMain .mainInfo .btnItems > li .btnLikes {background-position: 25% 50%;} .touristMain .mainInfo .btnItems .shareBox {left: 25%;} .touristMain .mainInfo .btnItems .shareBox:after {background-position: 20% 50%;} #totalCon .touristIntro {padding:20px 2% 0} #totalCon .touristTxt {margin: 20px 0 30px;} } /* 통합관광정보 추천여행코스 */ /* 계절별여행코스 */ .courseTit {color: #0d0909; font-size: 24px; font-weight: 500;} .courseTit strong {color: #e63600; font-weight: inherit;} .courseTit > span {font-weight: 300;} .courseTit2 {font-size: 28px; font-weight: 400;} .courseStit {padding: 14px 4% 0; color: #4a4a4a; font-size: 15px; font-weight: 300; line-height: 22px;} .seasonLbl {display: inline-block; width: 63px; height: 27px; margin-bottom: 16px; border: 1px solid #deb38d; border-radius: 5px; color: #cc5732; font-size: 15px; line-height: 29px; text-align: center;} .coursWrap {padding-top: 42px; padding-bottom: 75px; text-align: center;} .coursWrap .btnItems {position: absolute; top: 42px; right: 0;} .coursWrap .btnItems .shareBox {top: -62px; left: -65px;} .seasonWrap {padding: 45px 3.5% 70px;} .seasonWrap ul li {float: left; width: 24.25%; margin-left: 1%;}/* 248 324*/ .seasonWrap ul li.season1 {margin-left: 0;} .seasonWrap ul li a {display: block; padding:26px 0; border: 1px solid #e5e5e5; background: #fafafa; border-radius: 6px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .seasonWrap ul li a .bgBox {position: relative; width: 100%; padding:58px 0; background-repeat:no-repeat; background-position: 50% 0; background-size: contain;} .seasonWrap ul li.season1 a .bgBox {background-image: url(../images/content/img_season1.png);} .seasonWrap ul li.season2 a .bgBox {background-image: url(../images/content/img_season2.png);} .seasonWrap ul li.season3 a .bgBox {background-image: url(../images/content/img_season3.png);} .seasonWrap ul li.season4 a .bgBox {background-image: url(../images/content/img_season4.png);} .seasonWrap ul li.season1.active a .bgBox, .seasonWrap ul li.season1 a:hover .bgBox, .seasonWrap ul li.season1 a:focus .bgBox {background-image: url(../images/content/img_season1_hover.png); -webkit-transition:0.3s;-o-transition:0.3s;-moz-transition:0.3s;transition:0.3s;} .seasonWrap ul li.season2.active a .bgBox, .seasonWrap ul li.season2 a:hover .bgBox, .seasonWrap ul li.season2 a:focus .bgBox {background-image: url(../images/content/img_season2_hover.png); -webkit-transition:0.3s;-o-transition:0.3s;-moz-transition:0.3s;transition:0.3s;} .seasonWrap ul li.season3.active a .bgBox, .seasonWrap ul li.season3 a:hover .bgBox, .seasonWrap ul li.season3 a:focus .bgBox {background-image: url(../images/content/img_season3_hover.png); -webkit-transition:0.3s;-o-transition:0.3s;-moz-transition:0.3s;transition:0.3s;} .seasonWrap ul li.season4.active a .bgBox, .seasonWrap ul li.season4 a:hover .bgBox, .seasonWrap ul li.season4 a:focus .bgBox {background-image: url(../images/content/img_season4_hover.png); -webkit-transition:0.3s;-o-transition:0.3s;-moz-transition:0.3s;transition:0.3s;} .seasonWrap ul li a .tit {display: inline-block; width: 73px; height: 73px; background-color: #fff; border-radius: 50%; color: #000; font-size: 20px; line-height: 73px; -webkit-box-shadow: 3px 3px 1px 0px rgba(0,0,0,0.45);box-shadow: 3px 3px 1px 0px rgba(0,0,0,0.45);} .seasonWrap ul li.season1 a .tit {font-size: 24px;} .seasonWrap ul li a .tit em {position: relative; display: inline-block;} .seasonWrap ul li a:hover .tit em:after, .seasonWrap ul li a:focus .tit em:after, .seasonWrap ul li.active a .tit em:after {content:''; position: absolute; bottom: 21px; left: 0; width: 100%; height: 1px; background-color: #000;} .seasonWrap ul li a .sub {overflow: hidden; padding: 19px 5px 17px; font-size: 17px; font-weight: 300; white-space:nowrap; text-overflow:ellipsis;} .seasonWrap ul li a .count {display: inline-block; padding:6px 11px; border: 1px solid #e2e2e2; background-color: #fff; color: #cb4910; font-size: 14px; font-weight: 300;} .seasonWrap ul li.active a, .seasonWrap ul li a:hover, .seasonWrap ul li a:focus {background: #fff; border-color: #d5d5d5; -webkit-box-shadow: 1px 7px 7px 0px rgba(0,0,0,0.07);box-shadow: 1px 7px 7px 0px rgba(0,0,0,0.07); -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;} .seasonList {padding:0 3.5%;} .seasonList > ul {} .seasonList > ul > li {width: 100%; padding:25px 3.5%; border-bottom: 1px solid #e4e4e4; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; text-align: left;} .seasonList > ul > li:first-child {border-top: 1px solid #e4e4e4;} .seasonList ul li .listWrap {position: relative; min-height:175px; padding-right: 41%; background-repeat: no-repeat; background-position: 100% 50%; background-size:286px auto;} /*.seasonList ul li.list1 .listWrap {background-image: url(../images/content/img_season5.jpg);}*/ /*.seasonList ul li.list2 .listWrap {background-image: url(../images/content/img_season6.jpg);}*/ /*.seasonList ul li.list3 .listWrap {background-image: url(../images/content/img_season7.jpg);}*/ .seasonList ul li .titWrap {overflow: hidden; padding-top: 13px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .seasonList ul li .listTit {overflow: hidden; display: block; float:left; max-width:350px; color: #2a2a2a; font-size: 22px; white-space:nowrap; text-overflow:ellipsis;} .seasonList ul li .listTit:hover, .seasonList ul li .listTit:focus {text-decoration: underline;} .seasonList ul li .titWrap ul {float:left; font-size: 0;} .seasonList ul li .titWrap ul li {display: inline; font-family:"Dotum","돋움",sans-serif; vertical-align:top; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .seasonList ul li .titWrap li .seasonLbl {display: inline-block; width: auto; height: auto; margin-bottom: 0; margin-left: 8px; padding:0 10px; border: 1px solid #e2e2e2; color:#9a8076; font-size: 12px; font-weight: 700; line-height: 24px;} .seasonList ul li .titWrap .label, .seasonList ul li .titWrap .favorit {display: inline-block; height: 24px; margin-left: 4px; border: 1px solid #e2e2e2; border-radius: 4px; text-align: center; font-size: 12px; line-height: 24px;} .seasonList ul li .titWrap .label {padding:0 11px; color: #9a8076; font-weight: 700; } .seasonList ul li .titWrap .label strong {color: #4e6bc8;} .seasonList ul li .titWrap .favorit {padding-left: 28px; padding-right: 12px; color: #878787; background-repeat: no-repeat; background-position: 10px 50%; background-image: url(../images/content/icon_heart_off.png);} .seasonList ul li .titWrap .favorit.active, .seasonList ul li .titWrap .favorit:hover, .seasonList ul li .titWrap .favorit:focus {background-image: url(../images/content/icon_heart_on.png);} .seasonList ul li .preview {padding-top: 17px;padding-bottom: 20px; font-size: 13px; font-weight: 300; line-height: 18px;} .seasonList ul li .cours {position: relative; height: 30px; padding-left: 27px; padding-bottom: 18px; background:url(../images/content/icon_location.png) 0 0 no-repeat; font-size: 0; white-space: nowrap; /* overflow: hidden;*/ /* text-overflow: ellipsis;*/ /* display: -webkit-box;*/ /* -webkit-line-clamp: 1; */ /* -webkit-box-orient: vertical;*/ } .seasonList ul li .cours:before {content: ''; position: absolute; top: 3px; left: 31px; width:93%; height: 1px; border-bottom: 1px dashed #929292; } .seasonList ul li .cours li {display: inline-block; position: relative; margin-right: 16px; padding-top: 12px; font-size: 14px; font-weight: 300;} .seasonList ul li .cours li:before {content: ''; position: absolute; top: 2px; left: 3px; width: 5px; height:5px; border-radius: 50%; background-color: #2a2a2a;} .seasonList ul li .listWrap .thumb {position: absolute; top: 0; right: 0; width: 286px; height: 100%; padding:10px 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .seasonList ul li .listWrap .thumb img {width: 100%; height: 100%;} .coursMore {display: inline-block; width: 201px; margin-top: 30px; padding:17px 0; padding-right: 23px; border: 1px solid #d3d3d3; background-image: url(../images/content/icon_plus.png); background-position: 82% 50%; background-repeat: no-repeat; font-size: 16px; font-weight: 300; text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .coursMore:hover, .coursMore:focus {text-decoration: underline;} @media all and (max-width: 960px) { .coursWrap .btnItems {display: inline-block; position: relative; top: auto; right: auto; margin-top: 10px;} .seasonWrap ul li a {padding:11px 5px;} .seasonWrap ul li a .bgBox {padding:4.6vw 0; background-size: auto 100%; background-position: 50% 50%;} .seasonWrap ul li a .sub {font-size: 13px;} .seasonWrap ul li a .count {padding:6px; font-size: 12px;} .seasonList {padding:0 2%;} .seasonList ul li .listWrap {overflow: hidden; padding-right: 0;} .seasonList ul li .listWrap .thumb {display: none;} .seasonList ul li .cours {padding-left: 17px; padding-bottom: 0; background-size: 12px auto;} .coursMore {width: 170px; height: 44px; padding: 13px 0; padding-right: 23px; font-size: 15px;} } @media all and (max-width: 640px) { .coursWrap {padding-top: 35px; padding-bottom: 45px;} .courseTit {font-size: 20px;} .courseTit > span {display: block;} .seasonWrap {padding: 30px 2% 27px;} .seasonWrap ul li a .bgBox {margin-bottom: 8px;} .seasonWrap ul li a .tit {width: 9vw; height: 9vw; font-size: 3.5vw; line-height: 9vw;} .seasonWrap ul li.season1 a .tit {font-size: 4vw;} .seasonWrap ul li a .sub {display: none;} .seasonWrap ul li a:hover .tit em:after, .seasonWrap ul li a:focus .tit em:after, .seasonWrap ul li.active a .tit em:after {bottom: 1.8vw;} .seasonList > ul > li {padding: 25px 2% 18px;} .seasonList ul li .titWrap {padding-top: 0;} .seasonList ul li .listTit {float: none; margin-bottom: 12px; font-size: 17px;} .seasonList ul li .titWrap ul {float: none;} .seasonList ul li .titWrap li .seasonLbl {margin-left: 0;} .seasonList ul li .preview {padding-top: 12px; padding-bottom: 15px;} .seasonList ul li .cours li {margin-right: 10px; font-size: 12px;} } @media all and (max-width: 480px) { .coursWrap .btnItems .shareBox {left: 0;} .coursWrap .btnItems .shareBox:after {background-position: 20% 50%;} } /* 계절별여행코스 View */ .courseView {height: 502px; padding-top: 45px; padding-bottom: 45px;} .courseView .courseGuide, .courseView .courseMap {float: left; height: 502px; border: 1px solid #d3d3d3; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .courseView .courseGuide {width: 25%; text-align: left;} .courseView .courseGuide .guideTop {height: 124px; padding:28px 25px 0; border-bottom: 1px solid #d3d3d3; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .courseView .courseGuide .guideTop ul li {padding-left: 9px; padding-bottom: 10px; background:url(../images/sub/bu_2p.png) 0 7px no-repeat; font-size: 15px; font-weight: 300;} .courseView .courseGuide .tabType1 {padding:15px 25px;} .courseView .dayCourse li {position: relative; height: 39px; padding-left: 29%; border-top: 1px solid #d3d3d3; line-height: 39px;} .courseView .dayCourse li.first {background-color: #f6f6f6;} .courseView .dayCourse li .time {display: inline-block; position: absolute; top: 0; left: 0; width: 29%; height: 100%; color: #4f4f4f; font-size: 12px; font-weight: 300; text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .courseView .dayCourse li div {position: relative; height: 39px; padding-left: 20px; border-left: 1px solid #b1b1b1;} .courseView .dayCourse li div .name {display: block; height: 100%; color: #000; font-size: 15px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden;} .courseView .dayCourse li div .num {display: none; position: absolute; top: 8px; left: -10px; width: 22px; height: 22px; border-radius: 50%; background-color: #0045d0; color: #fff; font-size: 14px; font-weight:500; text-align: center; line-height: 22px;} .courseView .dayCourse li.first div .num {background-color: #d80047; border-radius:10px;} .courseView .dayCourse li.first div.active:before {content: none;} .courseView .dayCourse li div.active {border-left: none;} .courseView .dayCourse li div.active:before {content: ''; position: absolute; top: -6px; left: -5px; width: 11px; height: 6px; background: url(../images/content/icon_arrow_travel.png); z-index: 3;} .courseView .dayCourse li div.active .num {display: block;} .courseView .courseMap {width: 75%; border-left: none; } .courseDetail .titBox {position: relative; padding:0 9.5%;} .courseDetail .titBox .prev, .courseDetail .titBox .next {overflow: hidden; display: inline-block; position: absolute; top: 7px; width: 52px; height: 58px; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -999px;} .courseDetail .titBox .prev {left: 4%; background-image: url(../images/content/btn_prev.png);} .courseDetail .titBox .next {right: 4%; background-image: url(../images/content/btn_next.png);} .courseDetail .titBox .pageNum {background:url(../images/content/bg_dashed.png) 0 33px repeat-x;} .courseDetail .titBox .pageNum span {display: inline-block; width: 63px; height: 75px; padding:20px 14px 0; background:#fff url(../images/content/bg_num.png) 50% 0 no-repeat; color: #fff; font-size: 22px; font-weight: 700;} .courseDetail .titBox .courseTit {padding-top: 6px; padding-bottom: 24px; font-size: 28px; font-weight: 400;} .courseDetail .courseInfo {padding-top: 30px; padding-bottom: 42px; border-top: 1px solid #e2e2e2;} .courseDetail .courseInfo .infoCon {float: left; position: relative; width: 63%; padding-bottom: 22px; color: #3d3d3d; font-size: 15px; line-height: 25px; text-align: justify; letter-spacing: -0.01em;} .courseDetail .courseInfo .infoCon .txt {height: auto;} .courseDetail .courseInfo .infoCon .txt.is-truncated {height: 125px;} .courseDetail .courseInfo .more {display: inline-block; position: absolute; bottom: 0; right: 0; margin-left: 14px; color: #ed4343;} .courseDetail .courseInfo .more:hover, .courseDetail .courseInfo .more:focus {text-decoration: underline;} .courseDetail .courseInfo .infoList {float: right; width: 34%; border: 1px solid #d3d3d3; border-bottom: none; text-align: left;} .courseDetail .courseInfo .infoList li {position: relative; min-height:42px; padding:13px 0; padding-left: 31%; border-bottom: 1px solid #d3d3d3; color: #2a2a2a; font-size: 14px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .courseDetail .courseInfo .infoList li span {display: block; position: absolute; top: 0; left: 0; width: 28%; height: 100%; padding-top: 13px; padding-left: 23px; border-right:1px solid #d3d3d3; background:url(../images/content/bu_3p_gray.png) 16% 19px no-repeat; color: #676767; font-size: 14px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .courseDetail .courseInfo .infoList li a {display: block; padding:0 5px; word-break:break-all;} .courseDetail .courseInfo .infoList li a:hover, .courseDetail .courseInfo .infoList li a:focus {text-decoration: underline;} .courseDetail .infoImg {position: relative; max-height:508px; height: 100%; padding-left: 66.2%;} .courseDetail .infoImg ul {overflow: hidden; height: 100%;} .courseDetail .infoImg ul li {height: 254px;} .courseDetail .infoImg ul li.first {overflow: hidden; position: absolute; top:0; left: 0; width: 66%; height: 100%; padding-left: 0;} .courseDetail .infoImg ul li img {width: 100%; height:100%;} .courseDetail .infoImg ul li:first-child + li {margin-bottom: 3px;} .courseDetail .hashWrap {margin-bottom: 60px; padding:18px 0; border-bottom: 1px solid #e2e2e2;} .courseDetail .hashWrap ul { border-left: none;text-align: center;} .courseDetail .hashWrap ul li {display: inline-block;} .courseDetail .hashWrap ul li a {display: block; padding:12px 8px; border: none; color: #222; font-size: 14px; font-weight: 300;} .courseDetail .btn a {display: inline-block; width: 245px; height: 58px; padding-left: 27px; background-color:#373e7a; background-image: url(../images/content/icon_detail.png); background-position: 24% 50%; background-repeat: no-repeat;color: #fff; font-size: 16px; font-weight: 300; text-align: center; line-height: 56px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} @media all and (max-width: 960px) { .coursWrap {padding: 30px 3%;} .courseView {height: auto; margin-bottom: 22px; padding:20px 0 0;} .courseView .courseGuide, .courseView .courseMap {float: none; width: 100%; height: auto;} .courseView .courseGuide {margin-bottom: 18px; border: none;} .courseView .courseGuide.season {position: relative;padding-top: 75px;} .courseView .courseGuide.season .tabType1 {position: absolute; top: 0; left: 0; width: 100%;} .courseView .courseGuide .tabType1 {margin-bottom: 18px; padding: 0; border-top: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3; text-align: center;} .courseView .courseGuide .tabType1 ul {display: block; font-size: 0;} .courseView .courseGuide .tabType1 ul li {display: inline-block; float: none; padding: 0 20px;} .courseView .courseGuide .tabType1 ul li a {padding: 13px 3px 16px;} .courseView .courseGuide .tabType1 ul li a:before {top: 13px; height: 20px;} .courseView .courseGuide .guideTop {height: auto; padding:0; border-bottom: none;} .courseView .courseGuide .guideTop ul {border-left: 1px solid #d3d3d3; border-right: 1px solid #d3d3d3;} .courseView .courseGuide .guideTop ul li {position: relative; min-height:39px; padding-left: 31%; padding-bottom: 0; padding-top: 11px; padding-right: 10px; background: none; border-top: 1px solid #d3d3d3; font-size: 14px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .courseView .courseGuide .guideTop ul li em {display: none;} .courseView .courseGuide .guideTop ul li span {display: block; position: absolute; top: 0; left: 0; width: 29%; height: 100%; padding-top: 11px; padding-left: 18px; border-right: 1px solid #d4d4d4; background: url(../images/sub/bu_2p.png) 10px 17px no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .courseView .courseGuide .guideTop ul li span#distance {display: inline; position: relative; top: auto; left: auto; width:auto; height:auto; padding: 0; border-right: none; background: none;} .courseView .courseGuide .tabWrap {height: auto;} .courseView .courseGuide .courseCon {border: 1px solid #d3d3d3; border-top: none;} .courseView .dayCourse li div .name {font-size: 14px;} .courseView .courseMap {height: 60vw;} .courseDetail .courseInfo {padding-bottom: 25px;} .courseDetail .courseInfo .infoCon {float: none; width: 100%; margin-bottom: 18px;} .courseDetail .courseInfo .infoList {float: none; width: 100%;} .courseDetail .courseInfo .infoCon .txt.is-truncated {overflow: hidden;} .courseDetail .infoImg {max-height:none; height: auto; padding-left: 0;} .courseDetail .infoImg ul {height: auto;} .courseDetail .infoImg ul li.first {position: relative; width: 100%; height: auto; margin-bottom: 2px; padding-top: 65.4%;} .courseDetail .infoImg ul li {position: relative; float: left; width: 49.8%; height: auto; padding-top: 33.65%;} .courseDetail .infoImg ul li:first-child + li {margin-right: 0.4%;} .courseDetail .infoImg ul li img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .courseDetail .hashWrap {margin-bottom: 28px; padding: 10px 0;} .courseDetail .hashWrap ul {border-left: none; text-align: left;} .courseDetail .hashWrap ul li span {padding:2px 5px 2px; font-size: 12px;} .courseDetail .hashWrap ul li + li span {margin-top: 0;} .courseDetail .btn a {width: 205px; height: 49px; font-size: 14px; line-height: 48px;} } @media all and (max-width: 640px) { .seasonLbl {width: 56px; height: 25px; line-height: 25px; font-size: 13px;} .courseTit2 {padding:0 10px; font-size: 18px;} .courseStit {padding:14px 5% 0; font-size: 12px; line-height: 16px;} .courseView .courseGuide .guideTop ul li {font-size: 14px;} .courseDetail .titBox .prev, .courseDetail .titBox .next {top: 15px; width: 33px; height: 38px; background-size:contain;} .courseDetail .titBox .prev {left: 2%;} .courseDetail .titBox .next {right: 2%;} .courseDetail .titBox .pageNum {background: url(../images/content/bg_dashed.png) 0 30px repeat-x;} .courseDetail .titBox .pageNum span {width: 53px; height: 64px; padding: 14px 6px 0; background-size: 53px auto;} .courseDetail .titBox .courseTit {font-size: 18px;} .courseDetail .courseInfo .infoCon {padding-left: 2%; padding-right: 2%; font-size: 14px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .courseDetail .courseInfo .more {right: 2%;} .courseDetail .courseInfo .infoList li {min-height:35px; padding: 11px 0; padding-left: 31%; font-size: 12px;} .courseDetail .courseInfo .infoList li span {background-position: 15px 19px;font-size: 12px;} } /* 이달의 추천여행지 */ .themeView {position:relative; padding-right:262px;} .themeView .postView {padding-top: 58px; padding-bottom: 55px;} .postView .postTitMo {display: none;} .postView .postTop {position: relative; padding-left: 88px;} .postView .postTop .monthTit {position: absolute; top: -6px; left: 0; width: 88px; color: #de3d04; font-size: 38px; font-weight: 400; text-align: left;} .postView .postTop .monthTit strong {font-size: 42px;} .postView .postTop .monthTit span {display: block; padding-top: 3px; font-size: 26px; font-weight: 300;} .postView .postTop .titBox {padding-left: 17px; border-left: 1px solid #d9d9d9; text-align: left;} .postView .postTop .titBox h3.tit {overflow: hidden; font-size: 24px; font-weight: 500; white-space:nowrap; text-overflow:ellipsis;} .postView .postTop .titBox h3.tit + p {padding-top: 16px; } .postView .postTop .titBox p.stit {overflow: hidden; max-width:530px; font-size: 18px; font-weight: 300; white-space:nowrap; text-overflow:ellipsis;} .postView .postTop .titBox p.date {padding-top: 9px; color: #797979; font-size: 14px; font-weight: 300;} .postView .postTop .btnItems {position: absolute; top:40px; right: 0;} .postView .postTop .shareBox {top: -62px; left: -65px;} .postView .postCon {padding-top: 55px;} .postView .postCon p+p {margin-top: 15px;} .postView .reCourse {margin-bottom: 40px;text-align: left;} .postView .reCourse .subTit {margin-bottom: 18px; font-size: 20px; font-weight: 500;} .postView .hashWrap {padding-top: 65px; text-align: left;} .postView .hashWrap .subTit {margin-bottom: 15px; font-size: 20px; font-weight: 500;} /* 190704 ...... */ .postView .postVideo {overflow: hidden; position: relative; margin-top: 55px; padding-top: 56.3%;} .postView .postVideo iframe, .postView .postVideo video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /* 190704 ...... ..� */ .themeView .postList {position: absolute; top: 58px; right: 0; width: 214px; -webkit-transition: top 0.4s; -o-transition: top 0.4s; -moz-transition: top 0.4s; transition: top 0.4s;} .postList .topPager {height: 68px; padding-top: 25px; border: 1px solid #dcdcdc; background-color: #fafafa; font-size: 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .postList .topPager li {display: inline-block; font-size: 15px; font-weight: 300;} .postList .topPager li.sTotal {position: relative; padding-right: 10px;} .postList .topPager li.sTotal:after {content: ''; position: absolute; top: 2px; right: 0; width: 1px; height: 13px; background-color: #d8d8d8;} .postList .topPager li.sTotal span {font-weight: 400;} .postList .topPager li.index {padding-left: 10px;} .postList .slide {min-height: 451px; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc;} .postList .slide>li {text-align: left;} .postList .slide .list li a {display: block; height: 90px; text-align: left; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .postList .slide .list li a div {position: relative; height: 100%; margin: 0 20px; padding-top: 15px; padding-left: 62px; border-top: 1px solid #dcdcdc; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .postList .slide .list li:first-child a div {border-top: none;} .postList .slide .list li:last-child a div {border-bottom: 1px solid #dcdcdc;} .postList .slide .list li a .thumb {overflow: hidden; display: block; position: absolute; top: 18px; left: 0; width: 48px; height: 48px; border-radius: 50%; background-repeat: no-repeat; background-position: 50% 50%; background-size:cover; color: #fff; font-size: 14px; line-height: 48px; text-align: center;} .postList .slide .list li .txt {height: 36px; font-size: 14px; font-weight: 300; line-height: 18px;} .postList .slide .list li .date {padding-top: 4px; color: #737373; font-size: 12px; font-weight: 300;} .postList .slide .list li a:hover, .postList .slide .list li a:focus, .postList .slide .list li.active a {position: relative; border-top: 1px solid #dcdcdc; background-color: #f9f9f9;} .postList .slide .list li:first-child a:hover, .postList .slide .list li:first-child a:focus, .postList .slide .list li.active:first-child a {border-top: none;} .postList .slide .list li.active a div, .postList .slide .list li a:hover div, .postList .slide .list li a:focus div {border-top: none;} .postList .slide .list li a:hover div:before, .postList .slide .list li a:focus div:before, .postList .slide .list li.active a div:before {content: ''; position: absolute; top: 0; left: -14px; width: 11px; height: 100%; background: url(../images/content/icon_month_active.png) 100% 47% no-repeat;} .postList .slide .list li a:hover .thumb, .postList .slide .list li a:focus .thumb, .postList .slide .list li.active a .thumb {background-image: none !important; background-color: #f14205;} .postList .slide .list li.active + li a, .postList .slide .list li:hover + li a {border-top: 1px solid #dcdcdc;} .postList .slide .list li.active + li a div, .postList .slide .list li:hover + li a div {border-top: none;} .postList .slide .list li.active:last-child a, .postList .slide .list li:last-child a:hover, .postList .slide .list li:last-child a:focus {border-bottom:1px solid #dcdcdc;} .postList .slide .list li.active:last-child a div, .postList .slide .list li:last-child a:hover div, .postList .slide .list li:last-child a:focus div {border-bottom:none;} .postList .btPager {padding: 24px 0; border: 1px solid #dcdcdc; border-top: none; font-size: 0;} .postList .btPager li {display: inline-block; font-size: 14px; font-family: "Dotum","돋움",sans-serif;} .postList .btPager li a {overflow: hidden; display: block; width: 27px; height: 24px; border: 1px solid #d3d3d3; background-repeat: no-repeat; background-position: center; text-indent: -999px;} .postList .btPager li a.first {border-right: none; background-image: url(../images/content/btn_first.png);} .postList .btPager li a.prev {background-image: url(../images/content/icon_prev.png);} .postList .btPager li a.next {background-image: url(../images/content/icon_next.png);} .postList .btPager li a.last {border-left: none; background-image: url(../images/content/btn_last.png);} .postList .btPager li.index {padding:0 9px; line-height: 26px; letter-spacing: 3px; vertical-align: top;} .postList .btPager li.index .cur {font-weight: 700;} .postList .btnTop {display: block; width: 214px; height: 59px; margin-top: 8px; padding-top: 20px; padding-left: 14px; border: 1px solid #dcdcdc; background:url(../images/content/btn_top.png) 34% 50% no-repeat; color: #5f5e5e; font-size: 16px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .postList.fix {position: fixed; top: 100px; -webkit-transition: top 0.4s; -o-transition: top 0.4s; -moz-transition: top 0.4s; transition: top 0.4s;} @media all and (max-width: 960px) { .themeView {padding: 0 3%;} .themeView .postList {display: none !important;} .themeView .postView {padding: 35px 0;} .postView .postTitMo {display: block; position: relative; padding-bottom: 13px; border-bottom: 1px solid #dcdcdc;} .postView .postTitMo h3.monthTit {color: #de3d04; font-size: 25px; font-weight: 400;} .postView .postTitMo h3.monthTit .date {display: inline-block; margin-right: 12px; font-size: 24px; font-weight: 300;} .postView .postTitMo h3.monthTit strong {font-size: 28px; font-weight: 500; vertical-align: top;} .postView .postTitMo .btn li a {overflow: hidden; display: block; position: absolute; top: 0; width: 35px; height: 35px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px auto; text-indent: -999px;} .postView .postTitMo .btn li a.prev {left: 2%; background-image: url(../images/content/icon_month_prev.png);} .postView .postTitMo .btn li a.next {right: 2%; background-image: url(../images/content/icon_month_next.png);} .postView .postTop {padding-left: 0;} .postView .postTop .monthTit {display: none;} .postView .postTop .titBox {padding-top: 28px; padding-left: 0; border-left: none;} .postView .postTop .btnItems {top: auto; bottom: 5px;} .postView .postCon {padding-top: 4vw; padding-bottom: 4.5vw;} .postView .postVideo {margin-top: 4vw;} } @media all and (max-width: 767px) { .postView .postTop {padding-right: 0; padding-bottom: 10px;} .postView .postTop .titBox {padding-top: 18px;} .postView .postTop .titBox h3.tit {font-size: 18px;} .postView .postTop .titBox h3.tit + p {padding-top: 15px;} .postView .postTop .titBox p.stit {padding-right:30px; font-size: 14px; line-height: 18px;} .postView .postTop .titBox p.date {padding-top: 16px; font-size: 12px;} .postView .postTop .btnItems {position: relative; top: auto; bottom: auto; margin-top: 10px;} .postView .postTop .shareBox {left:0;} .postView .postTop .shareBox:after {background-position: 20% 50%;} .postView .postCon p+p {margin-top: 10px;} .postView .hashWrap .subTit {margin-bottom: 12px; font-size: 17px;} .postView .hashWrap {padding-left: 0; padding-top: 25px; text-align: left;} .postView .hashWrap > p {position: relative; top: auto; width: auto; padding-bottom: 10px; font-size: 13px;} .postView .hashWrap ul {border-left: 1px solid #e8e8e8;} .postView .hashWrap ul li:first-child span {border-left: none;} .postView .hashWrap ul li + li span {margin-top: -1px;} .postView .hashWrap ul li span {padding: 10px 14px; font-size: 13px;} } /* 뚜벅이여행 */ .titWrap+.tripWrap {padding-top: 0;} .tripWrap {padding: 50px 0;} .tripWrap .titBox {position: relative; padding-bottom: 55px;} /*.tripWrap .titBox .tripTit {font-size: 28px; font-weight: 500;}*/ .tripWrap .titBox .tripTit {padding-top: 4px; color: #2f2f2f; font-size: 20px; font-weight: 300;} .tripWrap .titBox .tripStit {padding-top: 18px; color: #606060; font-size: 18px; font-weight: 300;} .tripWrap .titBox .selectBox {position: absolute; top: 0; right: 4%; width: 109px; height: 36px; padding-left: 53px; color: #2a2a2a; font-size: 14px; font-weight: 300;} .tripWrap .selectBox .selectLabel {display: inline-block; position: absolute; top: 0; left: 0; width: 53px; padding-top: 10px; padding-left: 10px; background:url(../images/common/bu_2p.png) 0 17px no-repeat; color: #484848; font-size: 15px; text-align: left; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tripWrap .titBox .selectBox select {width: 100%; height: 100%;} .tripWrap .titBox .selectBox .customSelect {width: 100%; height: 100%; border: 1px solid #dcdcdc; color: #484848; font-size: 15px; text-align: left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tripWrap .titBox .selectBox .customSelect .customSelectInner {width:100% !important; padding-left: 14px; background-image:url(../images/common/icon_arrow.png); background-position: 90% 50%; background-repeat: no-repeat; line-height: 34px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} .tripWrap .titBox .selectBox .customSelectOpen .customSelectInner {background-image: url(../images/common/icon_arrow_up.png);} .tripList {padding-left: 3.5%; padding-right: 4%;} .tripList ul {text-align: left;} .tripList ul li {float: left; width: 24.4%; margin:0 0.3% 22px; text-align: center;} .tripList ul li a {display: block; border: 1px solid #e3e3e3;} .tripList ul li .thumb {overflow: hidden; display: block; position: relative; padding-bottom: 57.3%;} .tripList ul li .thumb img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .tripList ul li p {padding-left: 10px; padding-right: 10px;} .tripList ul li p.cate {padding-top: 22px; padding-bottom: 7px; color: #335cb1; font-size: 16px;} .tripList ul li .tit {overflow: hidden; color: #080808; font-size: 16px; white-space: nowrap; text-overflow: ellipsis;} .tripList ul li .tit2 {padding-top: 23px; padding-bottom: 14px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden;} .tripList ul li .tit2 .cate {display: inline-block; margin-right: 4px; color: #335cb1; font-size: 16px;} .tripList ul li .second {padding-top: 11px; padding-bottom: 16px; color: #676767; font-size: 14px; font-weight: 300; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} .tripList ul li .second span:first-child {display: inline-block;} .tripList ul li .second span:first-child:after {content: '/'; padding:0 3px;} .tripList ul li .txt {height: 34px; padding:0 28px 19px; color: #676767; font-size: 14px; font-weight: 300; line-height: 17px;} .tripList ul li .more {padding-bottom: 22px; color: #656565; font-size: 12px; font-family: "Dotum","돋움",sans-serif;} .tripList ul li .more span {display: inline-block; width: 104px; height: 34px; padding-top: 10px; border: 1px solid #e3e3e3; background-color: #fff; background-repeat: no-repeat; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tripList ul li .more .location {padding-left: 17px; background-color: #fff; background-image:url(../images/content/icon_location_red.png); background-position: 11px 50%;} .tripList ul li .more .plus {padding-left: 13px; background-image: url(../images/content/icon_plus_red.png); background-position: 15% 50%;} .tripList ul li a:hover .thumb img, .tripList ul li a:focus .thumb img {-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1); -webkit-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; transition: 0.4s ease-in;} .tripList ul li a:hover .tit, .tripList ul li a:focus .tit {text-decoration: underline;} .tripList ul li a:hover p, .tripList ul li a:focus p {background-color: #f8f8f8;} .tripWrap .pagination {padding-top: 23px;} .tripWrap .searchWrap {margin-top: 43px; padding:25px 0; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;} .tripWrap .searchWrap ul {font-size: 0;} .tripWrap .searchWrap ul li {display: inline-block; vertical-align: top;} .tripWrap .searchWrap ul li.tit {padding-top: 14px; padding-right: 22px; color: #5e5e5e; font-size: 14px; font-weight: 300;} .tripWrap .searchWrap .selectBox {display: inline-block; width: 113px; height: 43px; border: 1px solid #d4d4d4; color: #2a2a2a; font-size: 14px; text-align: left; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tripWrap .searchWrap .selectBox select {width: 100%; height: 100%;} .tripWrap .searchWrap .selectBox .customSelect {width: 100%; height: 100%;} .tripWrap .searchWrap .selectBox .customSelect .customSelectInner {width: 100% !important; padding-left: 14px; background-image:url(../images/board/btn_boardselect_on.gif); background-position: 89% 50%; background-repeat: no-repeat; line-height: 41px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tripWrap .searchWrap .selectBox .customSelectOpen .customSelectInner {background-image:url(../images/board/btn_boardselect_off.gif); } .tripWrap .searchWrap ul li.txt {max-width: 372px; width: 100%;} .tripWrap .searchWrap .searchBox {display: inline-block; position: relative; height: 43px; width: 100%;} .tripWrap .searchWrap .searchBox:before {content: ''; position: absolute; top: 10px; right: 45px; width: 1px; height: 24px; background-color: #d4d4d4;} .tripWrap .searchWrap .searchBox .txt {width: 100%; height: 100%; padding-left: 16px; padding-right: 55px; border: 1px solid #d4d4d4; border-left: none; color: #2a2a2a; font-size: 14px; font-weight: 300;} .tripWrap .searchWrap .searchBox .btn {display: inline-block; position: absolute; top: 0; right: 0; width: 44px; height: 100%; border: none; background:url(../images/board/btn_board_search.gif) center no-repeat; text-indent: -999px; cursor: pointer;} @media all and (max-width: 960px) { .tripWrap {padding: 35px 3%;} .tripList {/*padding-top:3.2vw;*/ padding-left: 0; padding-right: 0;} .tripWrap .titBox {overflow: hidden;} .tripWrap .titBox .selectBox {top: 30px; right: 0;} /* .tripWrap .titBox .selectBox {float:right; position: relative; top: auto; bottom:0; right: auto; margin-top:18px; margin-right: 3%;}*/ } @media all and (max-width: 767px) { .tripWrap .titBox {padding-bottom: 15px;} .tripWrap .titBox .tripTit {padding-top: 0; font-size: 18px; line-height: 1.2;} .tripWrap .titBox .tripStit {padding: 14px 18% 0; font-size: 13px; line-height: 18px;} .tripWrap .titBox .selectBox {position: relative; top: auto; right: auto; width:100%; height:43px; margin-top: 15px; padding-left: 0; float:none;} .tripWrap .selectBox .selectLabel {overflow: hidden; left: -9999px; width: 1px; height:1px;} .tripWrap .titBox .selectBox .customSelect .customSelectInner {background-position: 96% 50%;line-height: 41px;} .tripList ul li {width: 49%; margin:0 0.5% 10px;} .tripList ul li p.cate {padding-top: 18px; font-size: 14px;} .tripList ul li .tit {font-size: 14px;} .tripList ul li .second {padding-top: 8px; padding-bottom: 12px; font-size: 12px;} .tripWrap .searchWrap {margin-top: 0; padding: 25px 3%;border: none;} .tripWrap .searchWrap ul li {float:left;} .tripWrap .searchWrap ul li:first-child+li {width: 30%;} .tripWrap .searchWrap .selectBox {width: 100%;} .tripWrap .searchWrap ul li.tit {display: none;} .tripWrap .searchWrap ul li.txt {width:70%; max-width:none;} } /* 뚜벅이여행 상세페이지 */ .cityLbl {display: inline-block; width: 66px; height: 29px; margin-bottom: 18px; border: 1px solid #9fc2dc; border-radius: 6px; color: #246ac8; font-size: 15px; line-height: 27px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .courseView .courseGuide .guideTop.size2 {height: 97px; border-bottom: none;} .courseCon .walkCourse {overflow-y: auto; height: 405px; border-top: 1px solid #e4e4e4;} /* scrollbar */ /* width */ .courseCon .walkCourse::-webkit-scrollbar {width:11px; } /* Track */ .courseCon .walkCourse::-webkit-scrollbar-track {background: #f6f6f6;border: 1px solid #d3d3d3;} /* Handle */ .courseCon .walkCourse::-webkit-scrollbar-thumb {background: #fff url(../images/common/bg_scrollbar.png) 50% 50% no-repeat; border: 1px solid #d3d3d3;} /* Handle on hover */ .courseCon .walkCourse::-webkit-scrollbar-thumb:hover {background: #a8a8a8;} .walkCourse .label {display: inline-block; width: 35px; height: 21px; border: 1px solid #dcdcdc; border-radius: 3px; color: #454545; font-size: 13px; text-align: center; line-height: 20px; vertical-align: top;} .walkCourse li {border-bottom: 1px solid #e4e4e4;} .walkCourse li a {display: block; position: relative; height: 40px; padding-top:9px; padding-left: 66px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .walkCourse li.active a, .walkCourse li a:hover, .walkCourse li a:focus {background-color:#f6f6f6; background-image: url(../images/content/icon_trip_arrow.png); background-position: 96% 50%; background-repeat: no-repeat;} .walkCourse li a:before {content: ''; position: absolute; top: -10px; left: 42px; width: 1px; height: 20px; background-color: #b5b5b5; z-index: 0;} .walkCourse li:first-child a:before {content: none;} .walkCourse li a .num {display: inline-block; position: absolute; top: 10px; left: 33px; width: 20px; height: 20px; border-radius: 50%; background-color: #303ec0; color: #fff; font-size: 12px; font-weight: 500; text-align: center; line-height: 19px; z-index: 2;} .walkCourse li:first-child a .num {background-color: #d80047;} .walkCourse li.last a .num {background-color: #424242;} .walkCourse li a .name {overflow: hidden; display: inline-block; max-width: 128px; padding-right: 8px; font-size: 15px; white-space: nowrap; text-overflow: ellipsis;} .courseDetail .courseTit2 {padding: 25px 0;} .courseDetail .courseInfo .infoConFull {position: relative;} .courseDetail .courseInfo .infoConFull .txt {height: auto; padding:0 10px; color: #3d3d3d; font-size: 15px; line-height: 24px; text-align: center;} .courseDetail .courseInfo .infoConFull .txt.is-truncated {height: 120px;} .courseDetail .courseInfo .infoConFull .more {display: inline-block; position: relative; right: auto; bottom: auto; margin: 0; margin-top: 16px; padding-top: 2px; padding-left: 17px; color: #c06f5a; font-size: 13px; font-weight: 400;} .courseDetail .courseInfo .infoConFull .more span:before {content: '+'; position: absolute; top: 0; left: 0; font-size: 22px; font-weight: 100; line-height: 1;} .courseDetail .courseInfo .infoConFull .more span.close:before {content: '-';} .courseDetail div.list {padding-top: 23px;} .courseDetail .list dl {position: relative; min-height:51px; padding-left: 152px; border-bottom: 1px solid #e3e3e3; text-align: left;} .courseDetail .list dl dt {display: block; position: absolute; top: 0; left: 0; width: 152px; padding-top: 17px; height: 100%; padding-left: 53px; background:url(../images/content/bul_islandintro_list.gif) 44px 54% no-repeat; color: #2a2a2a; font-size: 16px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .courseDetail .list dl dd {padding:17px 0; color: #2a2a2a; font-size: 15px;} .courseDetail .hashWrap.left {margin-bottom: 30px; padding:8px 0; border-bottom: none;} .courseDetail .hashWrap.left ul {padding-left: 42px; text-align: left;} .courseDetail .btn a.list {background-image: url(../images/content/icon_list.png); background-position: 40% 50%;} @media all and (max-width: 960px) { .courseView .courseGuide .guideTop.size2 {height: auto;} .courseCon .walkCourse {height: auto;} .walkCourse li.last {border-bottom: none;} .walkCourse li a {padding-top: 11px;} .walkCourse li a .name {font-size: 14px;} } @media all and (max-width: 767px) { .courseDetail .courseTit2 {padding: 15px 0;} .courseDetail .courseInfo {padding-top: 20px;} .courseDetail .courseInfo .infoConFull .txt {height: auto; font-size: 14px; line-height: 18px;} .courseDetail .courseInfo .infoConFull .more {margin-top: 10px;} .courseDetail .list dl {min-height: 35px; padding-left: 30%; border: 1px solid #d3d3d3; border-top: none;} .courseDetail .list dl:first-child {border-top: 1px solid #e3e3e3;} .courseDetail .list dl dt {width: 28%; padding-top: 13px; padding-left: 23px; border-right: 1px solid #e3e3e3; background-position: 15px 19px; font-size: 12px;} .courseDetail .list dl dd {padding: 11px 5px; font-size: 12px;} .courseDetail div.list {padding-top: 12px;} .courseDetail .hashWrap.left ul {padding-left: 0;} } /* 컨텐츠 버튼 아이템 */ .tripWrap .btnItems {position: absolute; right: 0; top: 98px; z-index: 2;} .btnItems li {float: left;} .btnItems > li > button, .btnItems > li > a {overflow: hidden; display: block; height: 46px; border: 1px solid #e8e8e8; border-left: none; background-color: #fff; background-repeat: no-repeat; background-position:10px 50%; color: #515151; line-height: 12px; font-size: 12px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .btnItems > li .btnAudio {padding-right: 10px; padding-left: 35px;} .btnItems > li .btnShare {padding-right: 12px; padding-left: 36px;} .btnItems > li .btnLikes {padding-right: 15px; padding-left: 34px; font-size: 15px;} .btnItems > li .btnInterest {padding-right: 12px; padding-left: 35px;} .btnItems > li > button > span, .btnItems > li > a > span {display: block;} .btnItems > li:first-child > button, .btnItems > li:first-child > a {border-left: 1px solid #e8e8e8;} .btnInterest {background-repeat: no-repeat; background-image: url(../images/sub/icon_star_off.png); background-position: 7px 51%;} .btnInterest:hover, .btnInterest:focus, .btnInterest.active {background-image:url(../images/sub/icon_star_on.png);} .conViewTit .btnItems .shareBox {top: -62px; left: -65px;} .btnDownload {background-repeat: no-repeat; background-image: url(../images/content/icon_download.png); background-position: 8px 51%;} .btnLikes {background-image: url(../images/sub/icon_like_off.png);} .btnLikes.active, .btnLikes:hover, .btnLikes:focus {background-image: url(../images/sub/icon_like_on.png);} .btnAudio {background-image: url(../images/sub/icon_audio.png);} @media all and (max-width: 767px) { .btnItems > li > button, .btnItems > li > a {background-size: 20px auto;} .btnLikes {background-image: url(../images/sub/icon_like_off_lg.png);} .btnInterest {background-image: url(../images/sub/icon_star_off_lg.png);} .btnAudio {background-image: url(../images/sub/icon_audio_lg.png);} } @media all and (max-width: 359px) { .btnItems > li .btnAudio {letter-spacing: -0.2em;} } /* 템플스테이 */ [data-menu="T002003004002"] a {background-image: url(../images/sub/T002003004002.png);} [data-menu="T002003004003"] a {background-image: url(../images/sub/T002003004003.png);} [data-menu="T002003004004"] a {background-image: url(../images/sub/T002003004004.png);} /* 짜릿한 레포츠여행 */ [data-menu="T002003005003"] a {background-image: url(../images/sub/T002003005003.png);} [data-menu="T002003005002"] a {background-image: url(../images/sub/T002003005002.png);} [data-menu="T002003005004"] a {background-image: url(../images/sub/T002003005004.png);} [data-menu="T002003005005"] a {background-image: url(../images/sub/T002003005005.png);} [data-menu="T002003005001"] a {background-image: url(../images/sub/T002003005001.png);} .tripTab .tabType4 [data-menu="T002003005006"] a {padding-left: 0;} /* 전시/공연/테마파크 */ [data-menu="T002003008001"] a {background-image: url(../images/sub/T002003008001.png);} [data-menu="T002003008002"] a {background-image: url(../images/sub/T002003008002.png);} [data-menu="T002003008003"] a {background-image: url(../images/sub/T002003008003.png);} [data-menu="T002003008004"] a {background-image: url(../images/sub/T002003008004.png);} [data-menu="T002003008005"] a {background-image: url(../images/sub/T002003008005.png);} /* 유람선/크루즈여행 */ [data-menu="T002003007001"] a {background-image: url(../images/sub/T002003007001.png);} [data-menu="T002003007002"] a {background-image: url(../images/sub/T002003007002.png);} [data-menu="T002003007003"] a {background-image: url(../images/sub/T002003007001.png);} [data-menu="T002003007004"] a {background-image: url(../images/sub/T002003007001.png);} [data-menu="T002003007005"] a {background-image: url(../images/sub/T002003007001.png);} [data-menu="T002003007006"] a {background-image: url(../images/sub/T002003007003.png);} [data-menu="T002003007007"] a {background-image: url(../images/sub/T002003007001.png);} @media all and (max-width: 480px) { .tripTab .tabType4 li[data-menu="T002003007007"] {padding-left:0;} .tripTab .tabType4 li[data-menu="T002003007007"]:before {content:none;} } /* 쉼표가있는 힐링여행 */ .tripTab {position: relative; padding-left: 3.5%; padding-right: 4%; padding-bottom: 50px;} .tripTab .tabType4 {border: none;} .tripTab .tabType4 li:before {top: 7px;} .tripTab .tabType4 li a {padding: 4px 0; padding-left: 31px; border-bottom: 1px solid #fff; background-position: 0 bottom; background-repeat: no-repeat; font-size: 20px;} .tripTab .tabType4 li.active a, .tripTab .tabType4 li a:hover, .tripTab .tabType4 li a:focus {border-bottom: 1px solid #4e6bc8; background-position: 0 -1px;} .tripTab .selectBox {position: absolute; top: 0; right: 4%; width: 109px; height: 36px; padding-left: 53px; color: #2a2a2a; font-size: 14px; font-weight: 300;} .tripTab .selectBox select {width: 100%; height: 100%;} .tripTab .selectBox .customSelect {width: 100%; height: 100%; border: 1px solid #dcdcdc; text-align: left;} .tripTab .selectBox .customSelect .customSelectInner {width: 100% !important; padding-left: 14px; background-image:url(../images/common/icon_arrow.png); background-position: 90% 50%; background-repeat: no-repeat; line-height: 34px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} .tripTab .selectBox .customSelectOpen .customSelectInner {width:100% !important; background-image: url(../images/common/icon_arrow_up.png);} .conViewTit {position: relative; padding-bottom: 60px;} .conViewTit .lblCity {display: inline-block; width: 83px; height: 26px; border: 1px solid #edc1a6; border-radius: 20px; color: #e1723b; font-size: 14px; line-height: 26px;} .conViewTit h3.tit {padding-top: 18px; padding-bottom: 20px; font-size: 30px;} .conViewTit h3.tit span {font-weight: 300;} .conViewTit h4.stit {color: #6f6f6f; font-size: 22px; font-weight: 300;} .conViewTit h4.stit2 {padding-top: 25px; color: #6f6f6f; font-size: 18px; font-weight: 300;} @media all and (max-width: 960px) { .tripTab {padding-left: 0; padding-right: 0;} .tripTab .selectBox {top: 32px; right: 0;} } @media all and (max-width: 767px) { .conViewTit h4.stit2 {padding-top: 15px; font-size: 12px;} .tripTab {padding-bottom: 15px;} .tripTab .tabType4 li {padding:0 10px;} .tripTab .tabType4 li:first-child {padding-left: 3px;} .tripTab .tabType4 li:last-child {padding-right: 3px;} .tripTab .tabType4 li:before {top: 4px; height:15px;} .tripTab .tabType4 li a {padding-left: 0; background:none; font-size: 15px; letter-spacing: -1px;} .tripTab .selectBox {position: relative; top: auto; right: auto; width: 100%; height: 41px; margin-top: 22px; padding-left: 0;} .tripTab .selectBox .customSelect .customSelectInner {background-position: 96% 50%;line-height: 41px;} .tripList ul li .tit2 {padding-top: 18px; padding-bottom: 8px; font-size: 14px;} .tripList ul li .tit2 .cate {font-size: 14px;} .tripList ul li .txt {padding: 0 5% 9px; font-size: 12px;} .tripList ul li .more {padding-bottom: 14px;} } .conDetail .tripSlide {position: relative; margin-bottom: 65px;} .conDetail .tripSlide .slide li img {width: 100%; margin:0 auto;} .conDetail .tripSlide .slide .slick-slide {height: auto; } .conDetail .tripSlide .pager button {overflow:hidden; display:inline-block; position: absolute; top: 50%; width: 84px; height: 89px; background-color: #000; background-color: rgba(000,000,000,0.5); background-repeat:no-repeat; background-position:center; text-indent:-999px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} .conDetail .tripSlide .pager .prev {left: 0; background-image: url(../images/content/icon_prev_black.png);} .conDetail .tripSlide .pager .next {right: 0; background-image: url(../images/content/icon_next_black.png);} .conDetail .tripSlide .slick-dots {position: absolute; bottom: 25px; left: 0; width: 100%; font-size: 0; z-index: 2;} .conDetail .tripSlide .slick-dots li {display: inline;} .conDetail .tripSlide .slick-dots li button {display: inline-block; width: 13px; height: 13px; margin-left: 9px; border: 3px solid #fff; background-color: #fff; border-radius: 50%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .conDetail .tripSlide .slick-dots li:first-child button {margin-left: 0;} .conDetail .tripSlide .slick-dots li.slick-active button {background-color: transparent;} /*.conDetail .viewCon .con {padding-top: 70px;}*/ .conDetail .viewCon h4.title {padding-bottom: 20px; font-size: 26px; font-weight: 400;} .viewCon h4.titShip {padding-bottom: 20px; font-size: 22px; font-weight: 400;} .viewCon h4.titShip span { position:relative; margin-left:8px; padding-left:12px; } .viewCon h4.titShip span:before {content: ''; position:absolute; top:50%; left:0; width:1px; height:20px; margin-top:-10px; background-color:#cfcfcf; } .viewCon .txt {margin-bottom: 55px; /*padding: 0 6%;*/ font-size: 15px; font-weight: 300; line-height: 24px;}/* 200128 ...... */ .conDetail .viewCon .infoMap {position: relative; padding-right:50%; background-color: #fafafa; border: 1px solid #e5e5e5;} .viewCon .infoMap .info {min-height:340px;} .viewCon .infoMap .info h4.type2 {color: #000;} .viewCon .infoMap .info ul li a {display: inline-block; color: #1b49cb; word-break:break-all;} .viewCon .infoMap .info ul li a:hover, .viewCon .infoMap .info ul li a:focus {text-decoration: underline;} .viewCon .infoMap .info ul li a.more {display: inline-block; margin-left: 6px; color: #dc5b0d;} .viewCon .mapSearch {position: relative;padding-top: 18px; padding-bottom: 20px; padding-left: 124px; padding-right: 20px; border: 1px solid #e5e5e5; border-top: none; background-color: #fff;} .viewCon .mapSearch .mapTit {position: absolute; top: 0; left: 0; width: 124px; height: 100%; padding-top: 30px; padding-left: 36px; color: #666; font-size: 15px; text-align: left; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .viewCon .mapSearch ul {font-size: 0; text-align: left;} .viewCon .mapSearch ul li {display: inline-block; position: relative; height: 44px; padding-left: 53px; border: 1px solid #e8e8e8; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .viewCon .mapSearch ul li label {display: inline-block; position: absolute; top: 8px; left: 0; width: 53px; height:70%; padding-top: 5px; border-right: 1px solid #e5e5e5; color: #898989; font-size: 15px; font-weight: 300; text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .viewCon .mapSearch ul li.mapStart {max-width: 433px; width: 100%;} .viewCon .mapSearch ul li.mapArrival {float: right; max-width: 523px; width: 100%;} .viewCon .mapSearch ul li input {width: 100%; height: 100%; padding:0 12px; border: none;font-size: 15px;} .viewCon .mapSearch ul li.mapArrival input {padding-right: 82px;} .viewCon .mapSearch .btn {position: absolute; top: 18px; right:20px; width: 70px; height: 44px; border: 1px solid #e8e8e8; background-color: #fff;font-size: 14px; z-index: 2; cursor:pointer;} .conDetail div.btn {margin-top: 50px;} .tripWrap .templeDetail {padding-top:50px; text-align: left;} .tripWrap .templeDetail h4.tit {padding-left: 41px; padding-bottom:27px; color: #0b0b0b; font-size: 22px; font-weight: 400;} .tripWrap .templeDetail .tblWrap {margin-bottom: 50px; padding-bottom: 47px; border-bottom: 1px solid #e3e3e3;} .tblRow {width: 100%; border-top: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc;} .tblRow th, .tblRow td {border-left: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;} .tblRow th {width: 22%; padding-left: 40px; padding-right: 20px; background-color: #fafafa; font-size: 15px; font-weight: 300; vertical-align: middle;} .tblRow th p {padding-left: 9px; background-color: #fafafa; background-image: url(../images/content/bu_3p.png); background-repeat: no-repeat; background-position: 0 7px; line-height: 1.4;} .tblRow th p em.lineBreak {display: block;} .tblRow td {padding:26px 20px 24px 52px; font-size: 15px; font-weight: 300;} .tblRow td ul li {padding-top: 7px; line-height: 1.2;} .tblRow td ul li:first-child {padding-top: 0;} .tripWrap .btnList {display: block; width: 225px; height: 58px; margin: 0 auto; padding-left: 25px; background:#373e7a url(../images/content/icon_list.png) 36% 50% no-repeat; color: #fff; font-size: 17px; line-height: 56px; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tblRow2 {width: 100%; border-top: 1px solid #dcdcdc;} .tblRow2 th, .tblRow2 td {border-bottom: 1px solid #e6e4e4; color: #0c0c0c; font-size: 15px; font-weight: 300;} .tblRow2 th {padding:13px 10px 13px 35px; background-color: #f9f9f9;} .tblRow2 td {padding: 13px 30px;} .tripWrap .tblTit {padding:10px 0; font-size: 22px; font-weight: 400; text-align: left;} .tripWrap .tblDrag .conTbl td a {color: #1b49cb;} .tripWrap .templeDetail .btn, .tripWrap .conDetail .btn {text-align: center;} .tripWrap .templeDetail .btn a, .tripWrap .conDetail .btn a {display: inline-block; width: 245px; height: 58px; padding-left: 27px; background-color:#373e7a; background-image: url(../images/content/icon_detail.png); background-position: 24% 50%; background-repeat: no-repeat;color: #fff; font-size: 16px; font-weight: 300; text-align: center; line-height: 56px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} .tripWrap .templeDetail .btn a.list, .tripWrap .conDetail .btn a.list {background-image: url(../images/content/icon_list.png); background-position: 40% 50%;} @media all and (max-width: 960px) { /* .conDetail .tripSlide .slide li img {max-height:55vw;}*/ .conDetail .tripSlide {margin-bottom:6.2vw ;} .conDetail .viewCon .con {padding:10px 1.5% 0;} .viewCon .txt {margin-bottom: 15px; padding: 0; text-align: justify;} .conDetail .viewCon .infoMap {padding-right: 0;} .viewCon .mapSearch {padding:12px 90px 12px 12px;} .viewCon .mapSearch .mapTit {display: none;} .viewCon .mapSearch ul li {border-color: #cfcfcf;} .viewCon .mapSearch ul li.mapStart {max-width: none;} .viewCon .mapSearch ul li.mapArrival {float: none; max-width: none; border-top: none;} .viewCon .mapSearch ul li.mapArrival input {padding:0 12px;} .viewCon .mapSearch ul li label {top: 0; height: 100%; padding-top: 15px; border-right: 1px solid #cfcfcf; color: #000; font-size: 12px;} .viewCon .mapSearch ul li input {font-size: 12px;} .viewCon .mapSearch .btn {top: 12px; right: 10px; height: 88px; border: 1px solid #bbc2c7; background-color: #f2f2f2;} .tripWrap .templeDetail .tblWrap {margin-bottom: 0; padding-bottom: 27px; border-bottom: none;} .tblRow th {width: 30%; padding-left: 20px;} .tripWrap .conDetail .btn a, .tripWrap .templeDetail .btn a {width: 205px; height: 49px; font-size: 14px; line-height: 48px;} } @media all and (max-width: 767px) { .conViewTit {padding-bottom: 12px;} .conViewTit .lblCity {width: 76px; height: 25px; font-size: 13px; line-height: 25px;} .conViewTit h3.tit {padding-bottom: 15px; font-size: 18px;} .conViewTit h4.stit {font-size: 12px;} .tripWrap .btnItems {display: inline-block; position: relative; right: auto; top: auto; margin-top: 15px;} .tripWrap .btnItems .shareBox {left: 0;} .tripWrap .btnItems .shareBox:after {background-position: 20% 50%;} .conDetail .tripSlide .pager button {width: 10vw; height: 11vw; background-size: 2.5vw auto;} .conDetail .tripSlide .slick-dots {position: relative; bottom: auto; left: auto; padding-top: 12px;} .conDetail .tripSlide .slick-dots li {padding-top: 0;} .conDetail .tripSlide .slick-dots li button {width: 10px; height: 10px; margin-left: 6px; border: none; background-color: #939393;} .conDetail .tripSlide .slick-dots li.slick-active button {border: 1px solid #939393;} .conDetail .viewCon h4.title {font-size: 18px;} .conDetail .viewCon .txt {font-size: 14px; line-height: 20px;} .viewCon .mapSearch ul li {height: 35px;} .viewCon .mapSearch ul li label {padding-top: 12px;} .viewCon .mapSearch .btn {height: 70px;} .tripWrap .templeDetail {margin-bottom: 0; padding-top: 27px;} .tripWrap .templeDetail h4.tit {padding-left: 0; padding-bottom: 15px; font-size: 15px;} .tblRow th {padding:0 10px; font-size: 12px;} .tblRow th p {padding-left: 0; background: none;} .tblRow th p span.lineBreak {display: block;} .tblRow td {padding: 15px 10px; font-size: 12px;} .conDetail div.btn {margin-top: 27px;} .tripWrap .tblTit {padding: 10px 0 0;font-size: 15px;} .tripWrap .templeDetail .btn a.list, .tripWrap .conDetail .btn a.list {background-image: url(../images/content/icon_list_lg.png); background-size:21px auto;} } /* 쉼표가 있는 힐링여행 - 염전체험 */ .tripWrap p.type1 {padding-bottom: 35px; color: #434343; font-size: 15px; font-weight: 300;} .tripWrap .courseView {height: auto; padding:0;} .tripWrap .courseView .courseGuide, .tripWrap .courseView .courseMap {height: 497px; border: none;} .tripWrap .courseView .courseGuide {width: 18.5%; border-left: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;} .tripWrap .courseView .courseGuide .walkCourse {height: auto;} .tripWrap .courseView .courseGuide .walkCourse li a:before {content: none;} .tripWrap .courseView .courseGuide .walkCourse li a {height: 38px; padding-top: 11px; padding-left: 63px;} .tripWrap .courseView .courseGuide .walkCourse li.active a, .tripWrap .courseView .courseGuide .walkCourse li a:hover, .tripWrap .courseView .courseGuide .walkCourse li a:focus {background-position: 92% 50%;} .tripWrap .courseGuide .info {padding-top: 30px; padding-left: 32px;} .tripWrap .courseGuide .info h4 {padding-bottom: 10px; color: #121212; font-size: 18px; font-weight: 400;} .tripWrap .courseGuide .info ul li {color: #3f3f3f; font-size: 15px;} .tripWrap .courseGuide .info ul li {margin-top: 6px; padding-left: 10px; background:url(../images/common/bu_2p.png) 2px 6px no-repeat;} .tripWrap .courseGuide .info ul li:first-child {margin-top: 0;} .tripWrap .courseView .courseMap {width: 81.5%;} .tripWrap .courseView .mapSearch {border: 1px solid #e5e5e5;} .salternDetail {padding-top: 67px;} .salternDetail h4.tit {padding-bottom: 33px; font-size: 26px; font-weight: 400;} .salternDetail .tabType4 {border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; background-color: #fafafa;} .salternDetail .tabType4 li {display: inline-block; position: relative; padding:0 20px;} .salternDetail .tabType4 li:before {content: ''; position: absolute; top: 25px; left: 0; width: 1px; height: 16px; background-color: #d6d6d6;} .salternDetail .tabType4 li:first-child:before {content: none;} .salternDetail .tabType4 li a {padding: 21px 0; color: #0b0b0b; font-size: 18px;} .salternDetail .tabType4 li.active a, .salternDetail .tabType4 li a:hover, .salternDetail .tabType4 li a:focus {border-bottom: 2px solid #4e6bc8; color: #4e6bc8;} .salternDetail .tabCon {padding: 55px 28px 50px; text-align: left;} .salternDetail .tabCon .tabTit {padding-bottom: 20px; font-size: 18px; font-weight: 400;} .salternDetail .tabCon dl {position: relative; color: #2a2a2a; font-size: 15px; font-weight: 300;} .salternDetail .tabCon > dl {padding-left: 110px; line-height: 30px;} .salternDetail .tabCon > dl > dt {position: absolute; top: 0; left: 0; width: 110px; height: 100%; padding-left: 14px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .salternDetail .tabCon dl dd a {display: inline-block; color: #145fc4;} .salternDetail .tabCon dl dd a:hover, .salternDetail .tabCon dl dd a:focus {text-decoration: underline;} .salternDetail .tabCon dl dl {line-height: 25px;} .salternDetail .tabCon dl dl dt {display: block; padding-left: 10px; background-image:url(../images/common/bu_2p.png); background-position: 0 11px; background-repeat: no-repeat;} .salternDetail .tabCon dl dl dt:first-child {padding-top: 2px; background-position: 0 13px;} .salternDetail .tabCon dl dl ul li {padding-left: 10px; color: #735d48;} .salternDetail .tabCon dl dl dd.guide span {display: block; padding-left: 14px;} .pageBtnList.type2 ul li {margin: 0;} .pageBtnList.type2 ul li:first-child {margin-right: 2px;} .pageBtnList.type2 ul li:first-child a {background-color: #373e7a;} @media all and (max-width: 960px) { .tripWrap .courseView .courseGuide {float:none; width: 100%; border-right: 1px solid #e4e4e4;} .tripWrap .courseView .courseGuide .courseCon {border: none;} .tripWrap .courseView .courseMap {float:none; width: 100%; height: 60vw;} .salternDetail .tabType4 li {width: 16.2222%; padding: 0;} .salternDetail .tabType4 li a {font-size: 15px;} } @media all and (max-width: 767px) { .tripWrap p.type1 {padding-bottom: 20px;} .tripWrap .courseView {margin-bottom: 0; padding-top: 10px;} .tripWrap .courseView .courseGuide {height: auto;} .tripWrap .courseGuide .info {padding:20px;} .tripWrap .courseGuide .info h4 {font-size: 15px;} .tripWrap .courseGuide .info ul li {font-size: 12px;} .salternDetail {padding-top: 33px;} .salternDetail h4.tit {font-size: 18px; padding-bottom: 20px;} .salternDetail .tabType4 li a {font-size: 13px;} .salternDetail .tabType4 li a span {display: block; padding-top: 2px;} .salternDetail .tabCon {padding: 30px 3%;} .salternDetail .tabCon .tabTit {padding-bottom: 15px; font-size: 15px;} .salternDetail .tabCon > dl {padding-left: 85px; font-size: 13px; line-height: 24px;} .salternDetail .tabCon > dl > dt {width: 85px; padding-left: 5px;} .salternDetail .tabCon > dl:last-child {padding-left: 0;} .salternDetail .tabCon > dl:last-child dt {position: relative; width: auto; top: auto; left: auto;} .salternDetail .tabCon dl dl {padding-left: 12px; font-size: 13px; line-height: 22px;} .salternDetail .tabCon dl dl dd {margin-bottom: 5px;} } /* 짜릿한 레포츠여행 */ .tripList ul li p.add {height: 36px; padding-bottom:20px; font-weight:300; font-size:14px; color:#676767; line-height:1.3; } .tripList ul li p.add span { display:block; } /* 짜릿한 레포츠여행 상세페이지*/ .conViewTit .add { font-size:18px; color:#6f6f6f; font-weight: 300;} .tripWrap .templeDetail .programWrap {margin-bottom: 50px; padding:30px 4% 35px; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; } .tripWrap .templeDetail .programWrap div.type1 { margin:30px 0 18px; padding-left:9px; background:url(../images/content/bl_txt01.gif) 0 8px no-repeat; font-size:16px; } .tripWrap .templeDetail .programWrap div.type1:first-child { margin-top:0; } .tripWrap .templeDetail .programWrap ul.type2 { margin-left:8px; font-size:15px; color:#404040; line-height:1.6; } .tripWrap .templeDetail .programWrap ul.type2>li { padding-left:8px; background:url(../images/content/bl_txt02.gif) left 12px no-repeat; } .conTbl { width:100%; margin-bottom:15px; line-height:1.4; font-size:15px; color:#2a2a2a; } .conTbl.tdLeft td { padding:9px 20px; text-align:left; } .conTbl th, .conTbl td { padding:9px 10px; border:1px solid #d3d5d7; font-weight:300; text-align:center; vertical-align:middle; } .conTbl th { background-color:#f8f8f8; color:#543a20; } .conTbl td { color:#4c4640; } .conTbl th.algnLeft, .conTbl td.algnLeft { padding:9px 20px; text-align:left; } .tableAttach { margin-left:15px; padding-left:15px; background:url(../images/content/bl_table01.png) 1px 3px no-repeat; font-size:15px; color:#2a2a2a; } @media all and (max-width: 767px) { .tripWrap .templeDetail .programWrap {margin-bottom: 0; padding: 15px 2% 27px; border-bottom: none;} .tripWrap .templeDetail .programWrap div.type1 {margin: 15px 0 12px; font-size: 14px;} .tripWrap .templeDetail .programWrap ul.type2 {font-size: 12px;} .tableAttach {margin-left: 5px; font-size: 12px;} .conTbl {font-size: 12px;} .conTbl th, .conTbl td {padding:7px;} } /* 추억수학여행 */ .tripList ul li .cate1 {padding-top: 24px; padding-bottom: 12px; color: #335cb1; font-size: 15px;} .tripList ul li .tit3 {overflow: hidden; color: #212121; font-size: 15px; white-space: nowrap; text-overflow: ellipsis;} .tripList ul li .txt1 {overflow: hidden; padding:5px 28px 19px; color: #707070; font-size: 13px; font-weight: 300; line-height: 17px; white-space: nowrap; text-overflow: ellipsis;} /* 추억수학여행 상세페이지*/ .schoolLbl {display: inline-block; height: 27px; margin-bottom: 16px; padding:0 7px; border: 1px solid #deb38d; border-radius: 5px; color: #cc5732; font-size: 15px; line-height: 29px; text-align: center;} .courseView .schoolGuide {float: left; height: 502px; border: 1px solid #d3d3d3; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .courseView .schoolGuide {width: 25%; text-align: left;} .courseView .schoolGuide .guideTop {height: 103px; padding:28px 25px 0; border-bottom: 1px solid #d3d3d3; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .courseView .schoolGuide .guideTop ul li {padding-left: 9px; padding-bottom: 10px; background:url(../images/sub/bu_2p.png) 0 7px no-repeat; font-size: 15px; font-weight: 300;} /*.courseCon .schoolCourse {overflow-y: auto; height: 397px;}*/ /*.schoolCourse li { height: 39px; line-height: 39px; border-bottom: 1px solid #e4e4e4;}*/ /*.schoolCourse li.day { padding-left:28px; font-size:15px; color:#36383c;}*/ /*.schoolCourse li a {display: block; position: relative; height:100%; padding-left: 60px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}*/ /*.schoolCourse li.active a,*/ /*.schoolCourse li a:hover,*/ /*.schoolCourse li a:focus {background-color:#f6f6f6; background-image: url(../images/content/icon_trip_arrow.png); background-position: 96% 50%; background-repeat: no-repeat;}*/ /*.schoolCourse li a:before {content: ''; position: absolute; top: -11px; left: 38px; width: 1px; height: 21px; background-color: #b5b5b5; z-index: 0;}*/ /*.schoolCourse li.first a:before {content: none;}*/ /*.schoolCourse li a .num {display: inline-block; position: absolute; top: 10px; left: 27px; width: 22px; height: 22px; border-radius: 50%; background-color: #303ec0; color: #fff; font-size: 14px; font-weight: 500; text-align: center; line-height: 22px; z-index: 2;}*/ /*.schoolCourse li.active a .num {background-color: #d80047;}*/ /*.schoolCourse li a .name {overflow: hidden; display: block; max-width: 90%; padding-right: 8px; font-size: 15px; white-space: nowrap; text-overflow: ellipsis;}*/ .courseGuide .tabWrap.schoolCourse {height: 405px; border-top: 1px solid #d3d3d3;} .tabWrap.schoolCourse .walkCourse {height: auto;} .tabWrap.schoolCourse .walkCourse li a .name {max-width:180px;} .courseDetail .titBox .pageNum.row2 span {padding: 13px 14px 0;} .courseDetail .titBox .pageNum.row2 span i {display: block; font-weight: 300; font-size: 13px; font-style: normal;} .courseDetail .btn2 a {display: inline-block; width: 235px; height: 58px; margin-bottom:5px; background-repeat: no-repeat; color: #fff; font-size: 16px; font-weight: 300; text-align: center; line-height: 56px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} .courseDetail .btn2 a.more {padding-left: 27px; background-color:#373e7a; background-image: url(../images/content/icon_detail.png); background-position: 24% 50%;} .courseDetail .btn2 a.list {padding-left: 32px; background-color:#4b5291; background-image: url(../images/board/icon_list.png); background-position: 40% 50%;} @media all and (max-width: 960px) { .courseGuide .tabWrap.schoolCourse {height: auto; border-top: none;} .courseGuide .tabWrap.schoolCourse .courseCon {border-bottom: none;} .courseDetail .titBox .pageNum.row2 span {padding:9px 6px 0;} .courseDetail .btn2 a {width: 205px; height: 49px; font-size: 14px; line-height: 48px;} } @media all and (max-width: 520px) { .tripList ul li .cate1 {padding-top: 18px; padding-bottom: 8px; font-size: 14px;} .tripList ul li .tit3 {font-size: 14px;} .tripList ul li .txt1 {padding: 5px 28px 12px; font-size: 12px;} .courseDetail .btn2 a {width: 49%;} .courseDetail .btn2 a.more {background-position: 18% 50%;} } /* 테마여행 - 유람선/크루즈여행 */ .cruiseAbout {margin-top: 55px;} .cruiseAbout .cruiseSlide {position: relative; margin-top: 15px; padding-bottom: 18px;} .cruiseAbout .cruiseSlide .slide {position: relative; padding:0 104px;} .cruiseAbout .cruiseSlide .slide:before {content: ''; position: absolute; top: 44px; left: 0; width: 100%; height: 1px; background-color: #dedddc;} .cruiseAbout .cruiseSlide .slide li a {display: block; color: #434343; font-size: 15px; font-weight: 300; letter-spacing: -1px; letter-spacing: -0.05em;} .cruiseAbout .cruiseSlide .slide li a span {overflow: hidden; display: block; position: relative; width: 82px; height: 82px; margin: 0 auto; margin-bottom: 15px; border-radius: 50%;} .cruiseAbout .cruiseSlide .slide li a:hover span:after, .cruiseAbout .cruiseSlide .slide li a:focus span:after, .cruiseAbout .cruiseSlide .slide li.slick-current a span:after, .cruiseAbout .cruiseSlide .slide li.active a span:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(229,92,0,0.8); background-repeat: no-repeat; background-image: url(../images/content/icon_plus_white.png); background-position: 50% 50%; z-index: 2;} .cruiseAbout .cruiseSlide .pager button {overflow: hidden; display: inline-block; position: absolute; top: 0; width: 82px; height: 82px; border: 1px solid #e5e5e5; border-radius: 50%; background-color: #fff; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -999px;} .cruiseAbout .cruiseSlide .pager .prev {left: 0; background-image: url(../images/content/btn_cruise_prev.png);} .cruiseAbout .cruiseSlide .pager .next {right: 0; background-image: url(../images/content/btn_cruise_next.png);} .tripWrap .otherView {padding-top: 58px;} .tripWrap .otherView .viewCon {margin-bottom: 45px;} .tripWrap .otherView .viewCon .txt {margin-bottom: 20px;} .tripWrap .otherView h4.title {font-size: 26px; font-weight: 400;} .tripWrap .otherView .tabType4 {margin-top: 38px; margin-bottom: 38px; background-color: #fafafa;} .tripWrap .otherView .tabCon {padding-bottom: 35px;} /*.viewCon .tblHalf {padding-bottom: 35px;}*/ .viewCon .tblHalf .conTbl {float: left; width: 49.75%;} .viewCon .tblHalf .conTbl + .conTbl {margin-left: 0.5%;} .viewCon .tblHalf .conTbl th, .viewCon .tblHalf .conTbl td {padding: 15px 10px; color: #000;} .viewCon .cruiseTbl {padding-bottom: 35px;} .viewCon .cruiseTbl dl {float: left; width: 50%; min-height: 205px; border: 1px solid #e5e5e5; font-size: 15px; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .viewCon .cruiseTbl dl:first-child {border-right: none;} .viewCon .cruiseTbl dl dt {display: block; padding:18px 0; border-bottom: 1px solid #e5e5e5; background-color: #fafafa;} .viewCon .cruiseTbl dl dt span {display: inline-block; padding-left: 9px; background:url(../images/common/bu_2p.png) 0 7px no-repeat;} .viewCon .cruiseTbl dl dd {padding:0 3%; line-height: 26px;} .viewCon .cruiseTbl dl dt+dd {padding-top: 22px;} .viewCon .cruiseTbl ul {margin-bottom: 22px;} .viewCon .cruiseTbl ul li {padding-left: 9px; background:url(../images/common/bu_2p.png) 0 9px no-repeat; color: #666; text-align: left; line-height: 20px; font-size: 14px; font-weight: 300;} .conDetail .imgHalf { margin:0 -0.7%; font-size:0; } .conDetail .imgHalf li { display:inline-block; width:48.6%; padding:1.5% 0.7% 2%; font-size:16px; vertical-align:top; } .conDetail .imgHalf li img { width:100%; } @media all and (max-width: 960px) { .tripWrap .otherView {padding-top: 35px;} .tripWrap .otherView .tabType4 {margin-top: 20px;} .tripWrap .otherView .tabType4 li {padding: 0; width: 20%;} .tripWrap .otherView .tabType4 li a {display: inline-block; font-size: 15px;} .viewCon .tblHalf {padding-bottom: 0;} .viewCon .tblHalf .conTbl {float:none; width: 100%;} .viewCon .cruiseTbl dl {min-height:240px;} .viewCon .cruiseTbl dl dt+dd {padding-top: 18px;} } @media all and (max-width: 767px) { .tripTab.ship .tabType4 li a {font-size: 14px;} .tripTab.ship .tabType4 li:first-child+li+li a {font-size: 13px; letter-spacing:-0.05em;} .tripTab.ship .tabType4 li:first-child+li+li+li+li a {padding: 0; line-height: 60px;} .tripTab.ship .tabType4 li a span {display: block;} .conDetail.MAT60, .conDetail .tripSlide.MAT40 {margin-top: 26px !important;} .cruiseAbout {margin-top: 35px;} .cruiseAbout .cruiseSlide {margin-top: 0; padding: 0 ;} .cruiseAbout .cruiseSlide .pager button {top: 8px; width: 32px; height: 32px; background-size:7px auto;} .cruiseAbout .cruiseSlide .pager .prev {left: 0;} .cruiseAbout .cruiseSlide .pager .next {right: 0;} .cruiseAbout .cruiseSlide .slide {padding:0 38px;} .cruiseAbout .cruiseSlide .slide:before {top: 23px;} .cruiseAbout .cruiseSlide .slide li a {font-size: 12px;} .cruiseAbout .cruiseSlide .slide li a span {width: 48px; height: 48px; margin-bottom: 5px;} .cruiseAbout .cruiseSlide .slide li a:hover span:after, .cruiseAbout .cruiseSlide .slide li a:focus span:after, .cruiseAbout .cruiseSlide .slide li.slick-current a span:after, .cruiseAbout .cruiseSlide .slide li.active a span:after {background-size:10px auto;} .tripWrap .otherView .viewCon {margin-bottom: 20px;} .tripWrap .otherView h4.title {font-size: 18px;} .tripWrap .otherView .tabType4 {margin-bottom: 22spx; background-color: #fff;} .tripWrap .otherView .tabType4 li:before {top: 10px; height: 60%; } .tripWrap .otherView .tabType4 li a {padding: 15px 10px; font-size: 14px; line-height: 1.4;} .viewCon h4.titShip {font-size: 18px;} .viewCon .tblHalf {padding-bottom: 0;} .viewCon .cruiseTbl {padding-bottom: 10px;} .viewCon .cruiseTbl dl {min-height:auto; float:none; width:100%; padding-bottom: 18px; font-size: 12px;} .viewCon .cruiseTbl dl:first-child {margin-bottom: 10px; border-right: 1px solid #e5e5e5;} .viewCon .cruiseTbl dl dt {padding:12px 10px;} .viewCon .cruiseTbl dl dd {line-height: 1.5;} } @media all and (max-width: 640px) { .conDetail .imgHalf { margin:0; } .conDetail .imgHalf li { display:block; width:auto; padding:1% 0; } } @media all and (max-width: 520px) { .tripWrap .otherView .tabType4 li:before {top: 10px; height: 70%; } } /* 가고싶은 섬 소개 */ .islandIntro {position: relative; padding-top: 47px;} .islandIntro h4.tit {padding-bottom: 40px; color: #181a1b; font-size: 19px; font-weight: 300;} .islandIntro h4.tit span {display: block; padding-top: 10px;} .islandIntro .btnItems {position: absolute; top: 38px; right: 0;} .islandIntro .btnItems .shareBox {top: -63px; left: -65px;} .islandIntro .top {height: 450px; border: 1px solid #e3e3e3; border-right: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .islandList {float: left; width: 18.5%; height: 100%;} .islandList ul li {float: left; width: 50%; text-align: left;} .islandList ul li a {display: block; border-right: 1px solid #e8e8e8; border-top: 1px solid #e3e3e3; color: #969696; font-size: 15px; line-height: 40px; text-align: center;} .islandList ul li:first-child+li a, .islandList ul li:first-child a {border-top: none;} .islandList ul li a.on {color: #4b4b4b;} .islandList ul li a .num {display: inline-block; padding-left: 2px; color: #b25d1f; font-weight: 350; letter-spacing: 1px;} .islandList ul li a.active, .islandList ul li a.current, .islandList ul li a:hover, .islandList ul li a:focus {background-color: #4ea777; border-color: #4ea777; color: #fff; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;} .islandList ul a.active .num, .islandList ul li a.current .num, .islandList ul li a:hover .num, .islandList ul li a:focus .num {color: #fff;} .islandIntro .top .i2 {float: left; width:55%; height: 100%; background-color: #f8f9fb; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .islandIntro .top .svgWrap {overflow: hidden; width: 100%; height: 100%;} .svgWrap {position: relative;} #jeonnam { display: block; position: absolute;top: 0;left: 0; width: 100%; height: 100%;} #jeonnam a:hover path {fill: #5db586; stroke:none; cursor: pointer; -webkit-transition: 0.4s; -o-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;} #jeonnam a.active path {fill: #5db586;} #jeonnam text { width: 28px; fill:#fff !important; stroke:none; font-size: 13px;z-index: 10;} #jeonnam .marker {opacity: 0; width: 24px; height: 32px; stroke:none;} #jeonnam .marker .point {fill:#2A347E !important;} #jeonnam .marker .circle {fill:#fff !important;} #jeonnam a marker.active, #jeonnam a.active .marker, #jeonnam a:hover .marker {opacity: 1; -webkit-animation: marker 0.4s 0.1s 1; -moz-animation: marker 0.4s 0.1s 1; -o-animation: marker 0.4s 0.1s 1; animation: marker 0.4s 0.1s 1; -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both;} @-webkit-keyframes marker { 0% {opacity: 0;-webkit-transform:translateY(-7px);transform:translateY(-7px);} 100% {opacity: 1;-webkit-transform:translateY(0);transform:translateY(0);} } @-moz-keyframes marker { 0% {opacity: 0;-moz-transform:translateY(-7px);transform:translateY(-7px);} 100% {opacity: 1;-moz-transform:translateY(0);transform:translateY(0);} } @-o-keyframes marker { 0% {opacity: 0;-o-transform:translateY(-7px);transform:translateY(-7px);} 100% {opacity: 1;-o-transform:translateY(0);transform:translateY(0);} } @keyframes marker { 0% {opacity: 0;-webkit-transform:translateY(-7px);-moz-transform:translateY(-7px);-o-transform:translateY(-7px);transform:translateY(-7px);} 100% {opacity: 1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);} } .islandIntro .top .i3 {float: right; position: relative; width:26.5%; height: 100%; border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; font-size:16px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .islandIntro .top .i3 .seomMore {display:block; position: absolute; bottom: 0; left: 0; width: 100%; height: 62px; background:#453378 url(../images/content/bg_islandintro_detail.png) 67% center no-repeat; color:#fff;} .islandIntro .top .i3 .logo {overflow: hidden; display: table; width: 100%; height: 90px;} .islandIntro .top .i3 .logo span {display:table-cell; vertical-align: middle;} .islandIntro .top .i3 .logo img {} .islandIntro .top .i3 p.total {margin: 0 15px; padding:7px 0; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; font-size: 15px; font-weight: 300;} .islandIntro .top .i3 p.total span {color: #d3593c;} .islandIntro .top .i3 .seomSlide {position: relative; height: 327px; padding-top: 35px; padding-bottom: 30px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .seomSlide .seomTit {padding-bottom: 23px; font-size: 22px;} .seomSlide .seomTit strong {font-weight: 500;} .seomSlide .thumb {overflow:hidden; width:144px; height:144px; margin: 0 auto; border-radius:50%;} .seomSlide .pager button {overflow: hidden; display: inline-block; position: absolute; top: 33px; width: 36px; height: 36px; border:1px solid #e8e8e8; border-radius: 50%; background-color: #fff; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -999px;} .seomSlide .pager .prev {left: 11px; background-image: url(../images/content/icon_prev_island.png);} .seomSlide .pager .next {right: 11px; background-image: url(../images/content/icon_next_island.png);} .islandIntro .bottom { padding:70px 10px; } .islandIntro .bottom .txt > span { display:block; color:#4e6bc8; } .islandIntro .bottom .txt > div { margin-top:26px; font-size:36px; color:#1c1c1c; letter-spacing:-0.04em; } .islandIntro .bottom .txt > div > em { font-weight:500; } .islandIntro .bottom .txt > div > span { display:block; margin-top:23px; font-family:"나눔명조", Nanum Myeongjo,"Batang","바탕"; font-size:27px; font-weight: 700;} .islandIntro .bottom .txt > p { margin:30px 0; font-weight:300; line-height:1.4; } .islandIntro .bottom .txt > p > span { display:block; } .islandIntro .slider { position:relative; } .islandIntro .slider .slick-slide {height: auto;} .islandIntro .slider .slick-slide img {width: 100%;} .islandIntro .slider .ctrl { position:absolute; top:43%; left:0; width:100%; } .islandIntro .slider .ctrl button { width:84px; height:88px; background-color: #000; background-color: rgba(000,000,000,0.5); background-position:center; background-repeat:no-repeat; text-indent:-99999px; } .islandIntro .slider .ctrl .btn_prev { float:left; background-image:url(../images/content/icon_prev_black.png); } .islandIntro .slider .ctrl .btn_next { float:right; background-image:url(../images/content/icon_next_black.png);} .islandSlider .slick-dots { position:absolute; left:0; right:0; bottom:5%; } .islandSlider .slick-dots li { display:inline-block; } .islandSlider .slick-dots button { width:13px; height:13px; margin:4px; background-color:#fff; border:3px solid #fff; border-radius:50%; text-indent:-9999px; } .islandSlider .slick-dots .slick-active button { background:none; } .islandIntro .bottom .list { margin-top:50px; text-align:left; } .islandIntro .bottom .list dl { overflow:hidden; position: relative; min-height:49px; padding:13px 0; padding-left: 173px; border-bottom:1px solid #e3e3e3; } .islandIntro .bottom .list dl dt { position: absolute; top: 0; left: 0; width: 173px; height: 100%; padding-top: 14px; padding-left:53px; background:url(../images/content/bul_islandintro_list.gif) 45px 22px no-repeat; color: #2a2a2a; font-size: 16px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .islandIntro .bottom .list dl dd { overflow:hidden; font-weight:300; font-size:15px; color:#2a2a2a; line-height: 22px;} .islandIntro .bottom .list dl dd a { color:#143894; } .islandIntro .bottom .list dl dd a:hover, .islandIntro .bottom .list dl dd a:focus {text-decoration:underline;} .islandIntro .bottom .list dl dd ul {margin-top: 17px;} .islandIntro .bottom .list .btn { margin-top:40px; text-align:center; } .islandIntro .bottom .list .btn a { display:inline-block; width: 245px; height: 58px; padding-left: 27px; background-color:#373e7a; background-image: url(../images/content/icon_detail.png); background-position: 24% 53%; background-repeat: no-repeat;color: #fff; font-size: 16px; font-weight: 300; text-align: center; line-height: 56px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; } @media all and (max-width: 960px) { .islandIntro {padding: 40px 3% 0;} .islandIntro h4.tit {padding-bottom: 18px;} .islandIntro .btnItems {display: inline-block; position: relative; top: auto; right: auto; margin-bottom: 15px;} .islandIntro .top {height: auto;border: none;} .islandList {float:none; width:100%; height: auto; padding: 15px 12px; border: 1px solid #cfcfcf; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .islandList ul {font-size: 0; text-align: left;} .islandList ul li {display: inline-block; width: auto; margin:0 5px 5px;} .islandList ul li a {padding:6px 0; padding-left: 8px; background: url(../images/common/bu_2p.png) 0 13px no-repeat; border-right: none; border-top: none; border-bottom: 1px solid #fff; line-height: 1.2; text-align: left; font-size: 14px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} .islandList ul li a.active, .islandList ul li a.current, .islandList ul li a:hover, .islandList ul li a:focus {background-color:#fff; background-color: transparent; border-bottom: 1px solid #6aac88; color: #348e5d;} .islandList ul a.active .num, .islandList ul li a.current .num, .islandList ul li a:hover .num, .islandList ul li a:focus .num {color: #348e5d;} .islandIntro .top .i2 {display: none;} .islandIntro .top .i3 {float: none; width: 100%; height: auto; border: none;} .islandIntro .top .i3 .seomSlide {height: auto; padding-bottom: 0;} .islandIntro .top .i3 .seomSlide .slick-slide {height: auto;} .seomSlide .pager button {top: 50%;} .islandIntro .top .i3 .seomMore {display: none;} .islandIntro .bottom {padding: 30px 0;} .islandIntro .bottom .list .btn {margin-top: 27px;} .islandIntro .bottom .list .btn a {width: 205px; height: 49px; font-size: 14px; line-height: 48px;} } @media all and (max-width: 767px) { .islandIntro h4.tit {font-size: 17px;} .islandIntro .btnItems .shareBox {left: 0;} .islandIntro .btnItems .shareBox:after {background-position: 20% 50%;} .islandList ul li {display: block; width: 25%; margin:0 0 5px;} .islandList ul li a {display: inline-block;} .islandIntro .top .i3 {margin-top: 15px;} .islandIntro .top .i3 .seomSlide {padding-top: 24px;} .seomSlide .seomTit {padding-bottom: 15px; font-size: 20px;} .islandIntro .bottom .txt > span {font-size: 13px;} .islandIntro .bottom .txt > div {margin-top: 15px; font-size: 20px;} .islandIntro .bottom .txt > div > span {margin-top: 12px; font-size: 16px;} .islandIntro .bottom .txt > p {margin:17px 2% 20px; font-size: 14px;} .islandIntro .slider .ctrl button {width: 10vw; height: 11vw; background-size:2.5vw auto;} .islandSlider .slick-dots {position: relative; bottom: auto; left: auto; padding-top: 10px;} .islandSlider .slick-dots li {padding-top: 0;} .islandSlider .slick-dots li button {width: 10px; height: 10px; margin:0; margin-left: 6px; border: none; background-color: #939393;} .islandSlider .slick-dots li.slick-active button {border: 1px solid #939393;} .islandIntro .bottom .list {margin-top: 25px; padding:0 2%;} .islandIntro .bottom .list dl {min-height:23px; padding:10px 0; padding-left: 95px;} .islandIntro .bottom .list dl dt {width: 95px; padding-top: 15px; padding-left: 12px; background-position: 5px 20px; font-size: 13px;} .islandIntro .bottom .list dl dd {font-size: 13px;} .islandIntro .bottom .list .btn a {background-image: url(../images/content/icon_apply_lg.png); background-size:21px auto;} } /* 관광해설 - 사투리 관광가이드 */ .dialectWrap > h3.tit {padding-top:50px; padding-bottom: 48px; color: #0d0909; font-size: 24px; font-weight: 500;} .dialectWrap > h3.tit strong {color: #e63600;} .dialectWrap > h3.tit span {font-weight: 400;} .dialectWrap .dialectInner {position: relative; padding-left: 149px; padding-bottom: 45px;} .dialectWrap .cityList {position: absolute; top: 0; left: 0; width: 133px;} .dialectWrap .cityList .cityLogo {display: table; width: 100%; height: 133px; border: 1px solid #dcdcdc; border-bottom: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .dialectWrap .cityList .cityLogo span {display: table-cell; padding:0 10px; vertical-align: middle;} .dialectWrap .cityList > ul {position: relative; border: 1px solid #dcdcdc;} .dialectWrap .cityList ul li.left, .dialectWrap .cityList ul li.right {float: left; width: 50%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .dialectWrap .cityList ul li.left {border-right: 1px solid #dcdcdc;} .dialectWrap .cityList ul li ul li { border-top: 1px solid #dcdcdc; } .dialectWrap .cityList > ul > li:first-child {width: 100%;} .dialectWrap .cityList ul li a {display: block; padding-top: 10px; padding-bottom: 10px; color: #3a3a3a; font-size: 15px; font-weight: 300;} .dialectWrap .cityList ul li a span {display: inline-block; position: relative; border-bottom: 1px solid #fff;} .dialectWrap .cityList ul li.active a, .dialectWrap .cityList ul li a:hover, .dialectWrap .cityList ul li a:focus {background-color: #f5f5f5; color: #4e6bc8; font-weight: 400;} .dialectWrap .cityList ul li.active a span, .dialectWrap .cityList ul li a:hover span, .dialectWrap .cityList ul li a:focus span {border-bottom:1px solid #4e6bc8;} .dialectWrap .dialectCon .touristWrap {position: relative; padding-right: 182px;} .dialectCon .touristWrap .touristMain .videoWrap {height: 438px;} .dialectCon .touristWrap .touristMain .mainInfo {padding: 32px 0 23px 30px; border: 1px solid #dcdcdc;} .dialectCon .touristWrap .touristMain .mainInfo:before, .dialectCon .touristWrap .touristMain .mainInfo:after {content:''; clear: both; display: block;} /*.dialectCon .touristWrap .touristMain .mainInfo .voiceActor {position: absolute; top: 30px; left: 26px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}*/ .dialectCon .touristWrap .touristMain .mainInfo .voiceActor p {overflow: hidden; display: inline-block; width: 77px; height: 77px; border-radius: 50%;} .voiceActor {float:left; margin-right:13px;} .voiceActor ul {font-size: 0;} .voiceActor ul li {overflow: hidden; display: inline-block; width: 77px; height: 77px; border-radius:50%;} .voiceActor ul li img {width: 100%;} .voiceActor ul li+li {margin-left: 4px;} .dialectCon .dialectInfo {float:left; margin-top: 3px;} .dialectCon .touristWrap .touristMain .mainInfo .vidTit {max-width: 345px; padding-left: 0; border-left: none;} .dialectCon .touristWrap .touristMain .mainInfo .info {max-width: 445px; padding-left: 0; border-left: none;} .dialectCon .touristWrap .touristMain .mainInfo .info li {float: left; padding:0 8px;} .dialectCon .touristWrap .touristMain .mainInfo .info li:first-child {padding-left: 0; border-right: 1px solid #c1c1c1;} .dialectCon .touristWrap .touristMain .mainInfo .info li:first-child+li+li {clear: both; padding-left: 0; } .dialectCon .touristWrap .touristMain .mainInfo .info li.name {margin-top: 9px; color: #1f1f1f; font-weight: 400;} .dialectCon .mainInfo .info li.name + .name {border-left: 1px solid #c1c1c1;} .dialectCon .touristWrap .touristMain .mainInfo .btnItems {top: 44px;} .dialectCon .touristWrap .touristMain .mainInfo .btnItems .shareBox {left: -65px;} .dialectCon .dialectList {position: absolute; top: 0; right: 0; width: 182px; height: auto; border: 1px solid #dcdcdc; border-left: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .dialectCon .dialectList .sdTotal {padding:20px 0; border-bottom: 1px solid #dcdcdc; color: #4c4c4c; font-size: 15px; font-weight: 300;} .dialectCon .dialectList .sdTotal span {color: #e95b15;} .dialectCon .dialectList .slide {overflow-y:auto; height:513px; text-align: left;} /* scrollbar */ /* width */ .dialectCon .dialectList .slide::-webkit-scrollbar {width:11px; } /* Track */ .dialectCon .dialectList .slide::-webkit-scrollbar-track {background: #f6f6f6;border: 1px solid #d3d3d3;} /* Handle */ .dialectCon .dialectList .slide::-webkit-scrollbar-thumb {background: #fff url(../images/common/bg_scrollbar.png) 50% 50% no-repeat; border: 1px solid #d3d3d3;} /* Handle on hover */ .dialectCon .dialectList .slide::-webkit-scrollbar-thumb:hover {background: #a8a8a8;} .dialectCon .dialectList .slide li {border-top: 1px solid #e8e8e8;} .dialectCon .dialectList .slide li:first-child {border-top:none;} .dialectCon .dialectList .slide li a {display: block; padding-top:14px; padding-right: 15px; padding-bottom: 11px; padding-left: 28px;} .dialectCon .dialectList .slide li a .tit {overflow: hidden; font-size: 15px; font-weight: 300; white-space: nowrap; text-overflow: ellipsis;} .dialectCon .dialectList .slide li a .addr {overflow: hidden; padding-top: 5px; color: #8e8e8e; font-size: 12px; font-weight: 300; white-space: nowrap; text-overflow: ellipsis;} .dialectCon .dialectList .slide li.active a, .dialectCon .dialectList .slide li a:hover, .dialectCon .dialectList .slide li a:focus {background-color: #f8f8f8; background-image: url(../images/content/icon_dialect.png); background-position: 10px 50%; background-repeat: no-repeat;} .dialectCon .dialectList .slide li.active a .tit, .dialectCon .dialectList .slide li a:hover .tit, .dialectCon .dialectList .slide li a:focus .tit {font-weight: 400;} .dialectCon .subtitle {padding-top: 44px; text-align: left;} .dialectCon .subtitle .tit {padding-bottom: 20px; font-size: 22px; font-weight: 500;} .dialectCon .subtitle .txt {font-size: 15px; font-weight: 300; line-height: 22px; text-align:justify;} .dialectCon .reCourse {padding-top: 45px; text-align: left;} .dialectCon .reCourse .subTit {padding-bottom: 20px; font-size: 20px; font-weight: 500;} .dialectCon .hashWrap {padding-top: 45px; text-align: left;} .dialectCon .hashWrap .subTit {padding-bottom: 16px; font-size: 20px; font-weight: 500;} .cityList .btnDialect {display: none;} @media screen and (max-width:960px) { .dialectWrap {padding:0 3%;} .dialectWrap .dialectInner {padding-left: 0;} .dialectWrap .cityList {margin-bottom: 14px;;} .dialectWrap .cityList .cityLogo {display: none;} .dialectWrap .cityList .btnDialect {display: block; padding:13px 0; padding-left: 24px; border: 1px solid #dcdcdc; background-image: url(../images/content/icon_listdown_lg.png); background-position: 95% 50%; background-repeat: no-repeat; background-size:16px auto; text-align: left; font-size: 16px; font-weight: 500;} .dialectWrap .cityList .btnDialect.active {background-image: url(../images/content/icon_listup_lg.png);} .dialectWrap .cityList {position: relative; width: 100%;} .dialectWrap .cityList > ul {display: none; position: absolute; top: 45px; left: 0; width: 100%; border-top: none; z-index: 5; background-color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box} .dialectWrap .cityList ul:before {content: none;} .dialectWrap .cityList ul li.left, .dialectWrap .cityList ul li.right {float: none; width: 100%;} .dialectWrap .cityList ul li a {padding-left: 24px; text-align: left;} .dialectWrap .dialectCon .touristWrap {padding-right: 0;} .dialectCon .touristWrap .touristMain .videoWrap {height: auto;} .dialectCon .touristWrap .touristMain .mainInfo {padding: 35px 20px;} .dialectCon .touristWrap .touristMain .mainInfo .voiceActor {display: none;} .dialectCon .dialectInfo {float:none; margin-top: 0;} .dialectCon .dialectList .slide li:first-child {border-top: none;} .dialectList .pager {display: none;} .dialectCon .dialectList .sdTotal {display: none;} .dialectCon .dialectList {overflow: auto; position: relative; width: 100%; max-height: 180px; margin-top: 28px; border: 1px solid #dcdcdc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;} /* scrollbar */ /* width */ .dialectList::-webkit-scrollbar {width:11px; } /* Track */ .dialectList::-webkit-scrollbar-track {background: #f6f6f6;border: 1px solid #d3d3d3;} /* Handle */ .dialectList::-webkit-scrollbar-thumb {background: #fff url(../images/common/bg_scrollbar.png) 50% 50% no-repeat; border: 1px solid #d3d3d3;} /* Handle on hover */ .dialectList::-webkit-scrollbar-thumb:hover {background: #a8a8a8;} .dialectCon .dialectList .slide {height:auto;} .dialectCon .dialectList .slide li a {padding-left: 38px;} .dialectCon .dialectList .slide li.active a, .dialectCon .dialectList .slide li a:hover, .dialectCon .dialectList .slide li a:focus {background-position: 18px 50%;} } @media screen and (max-width:767px) { .dialectWrap > h3.tit {padding-top: 30px; padding-bottom: 27px; font-size: 17px;} .dialectCon .touristWrap .touristMain .mainInfo {padding: 25px 20px 60px;} .dialectCon .touristWrap .touristMain .mainInfo .vidTit {max-width:none; padding-bottom: 13px;} .dialectCon .touristWrap .touristMain .mainInfo .info li {font-size: 12px;} .dialectCon .touristWrap .touristMain .mainInfo .info li.name {margin-top: 7px;} .dialectCon .touristWrap .touristMain .mainInfo .btnItems {top: auto; bottom: 0;} .dialectCon .touristWrap .touristMain .mainInfo .btnItems > li {width: 33.3333%;} .dialectCon .btnItems .btnInterest {border-right: none;} .dialectCon .touristWrap .touristMain .mainInfo .btnItems .shareBox {left: 0;} .dialectCon .subtitle {padding: 35px 2% 0;} .dialectCon .subtitle .tit {padding-bottom: 12px; font-size: 17px;} .dialectCon .subtitle .txt {font-size: 14px; line-height: 1.4;} .dialectCon .reCourse .subTit {padding-bottom: 12px; font-size: 17px;} .dialectCon .hashWrap {padding-top: 36px;} .dialectCon .hashWrap .subTit {font-size: 17px;} } /* 관광해설 - 오디오 관광해설 */ .audioList {padding:0 18px; } .audioList ul {font-size:0; text-align: left;} .audioList ul li {display:inline-block; width:24.2%; margin:0 0.4% 30px; text-align: center;} .audioList ul li a {display: block; padding: 34px 24px 24px; border: 1px solid #dadada; border-bottom: none;} .audioList ul li .tit {padding-bottom: 12px; color: #393939; font-size:18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .audioList ul li .txt {height: 36px; color: #7c7c7c; font-size: 13px; font-weight: 300; line-height: 18px;} .audioList ul li a .btn {display:block; margin-top: 15px;} .audioList ul li a .btn span { display:inline-block; width:41px; height:38px; background-image:url(../images/content/btn_audio.png); background-position: 50% 0; background-repeat: no-repeat; border:1px solid #e2e2e2; text-indent:-9999px; } .audioList ul li a:hover, .audioList ul li a:focus {background-color: #2e48a7; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;} .audioList ul li a:hover .tit, .audioList ul li a:focus .tit, .audioList ul li a:hover .txt, .audioList ul li a:focus .txt {color: #fff;} .audioList ul li a:hover .btn span, .audioList ul li a:focus .btn span {border: 1px solid #5569ad; background-color: #21367c; background-position: 50% 100%;} .audioList ul li .thumb {position:relative; display:block; width:100%; height:0; padding-bottom:72%; } .audioList ul li .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; } .audioList + .pagination {padding-top: 24px;} @media all and (max-width: 767px) { .audioList {padding: 0;} .audioList ul li {width: 49.5%; margin:0; margin-left: 1%; margin-bottom: 10px;} .audioList ul li:first-child, .audioList ul li:first-child+li+li, .audioList ul li:first-child+li+li+li+li, .audioList ul li:first-child+li+li+li+li+li+li {margin-left: 0;} .audioList ul li a {padding: 18px 10px;} .audioList ul li .tit {padding-bottom: 8px; font-size: 14px;} .audioList ul li .txt {font-size: 12px;} .audioList ul li a .btn {margin-top: 12px;} } /* 관광해설 - 오디오 관광해설 - 상세 */ .audioComment {padding-bottom: 55px;} .audioComment .titBox {position: relative; padding-top: 43px; padding-bottom: 25px;} .audioComment .titBox h3.tit {font-size: 28px; font-weight: 500;} .audioComment .titBox .stit {padding-top: 26px; font-size: 15px; font-weight: 300; line-height: 24px;} .audioComment .titBox .stit .lineBreak {display: block;} .audioComment .titBox .btnItems {position: absolute; top:35px; right: 0;} .audioComment .titBox .btnItems .shareBox {top: -62px; left: -65px;} .audioComment .corseWrap .audioTab {max-width: 625px; margin: 0 auto 50px;} .audioComment .corseWrap .listMap {position: relative; padding-left: 332px; height: 500px;} .audioComment .corseWrap .audioCourse {position: absolute; top: 0; left: 0; width: 332px; height: 100%; border: 1px solid #e4e4e4; text-align: left; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .audioCourse>ul {overflow:auto; height:420px;} .audioCourse>ul> li {position: relative; padding-right: 90px; border-bottom: 1px solid #e4e4e4; font-size: 15px; font-weight: 300; } .audioCourse ul li .btn {overflow: hidden; display: block; padding:10px 0; white-space: nowrap; text-overflow: ellipsis;} .audioCourse ul > li .num {display: inline-block; width: 20px; height: 21px; margin-left: 20px; margin-right: 9px; border-radius: 50%; background-color: #303ec0; text-align: center; line-height: 19px; font-size: 13px; color: #fff; font-weight: 500;} .audioCourse ul li .items {position: absolute; top: 0; right: 0; width: 90px; height: 100%; font-size: 0;} .audioCourse ul li .items:before {content: ''; position: absolute; top: 12px; left: 50%; width: 1px; height: 16px; background-color: #e4e4e4;} .audioCourse ul li .items li {display: inline-block; width: 50%; height: 100%;} .audioCourse ul li .items li a {overflow: hidden; display: block; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -999px; font-size: 15px;} .audioCourse ul li .items li a.down {background-image: url(../images/content/icon_download.png);} .audioCourse ul li .items li a.audio {background-image: url(../images/content/icon_audio2.png);} .audioCourse ul li.active {background-color: #f6f6f6;} .audioCourse ul li.active .num {background-color: #d80047;} .audioCourse .totalDown {position: relative; padding-top: 30px; padding-left: 23px;} .audioCourse .totalDown p {padding-left: 8px; background:url(../images/common/bu_2p.png) 0 6px no-repeat; font-size: 15px; font-weight: 300;} .audioCourse .totalDown a {position: absolute; top: 25px; right: 20px; width: 83px; height: 29px; padding-left: 24px; border: 1px solid #e4e4e4; background:url(../images/content/icon_download2.png) 8px 50% no-repeat; color: #6b6561; line-height: 29px; font-size: 12px; font-family: "Dotum","돋움",sans-serif; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .audioComment .corseWrap .mapWrap {height: 100%; border: 1px solid #e4e4e4; border-left: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .audioComment .pageBtnList {margin-top:45px;} .audioComment .pageBtnList ul li:first-child a {background-color: #373e7a;} /* 오디오플레이어 Custom */ .audioPlayerWrap {overflow: hidden; position: relative; height: 100px; padding-left: 332px; border: 1px solid #e5e5e5; border-top: none;} .audioPlayerWrap .audioTit {overflow: hidden; position: absolute; top: 0; left: 0; width: 332px; height: 100%; padding-top: 27px; padding-left: 20px; font-size: 18px; font-weight: 400; text-align: left; white-space:nowrap; text-overflow:ellipsis; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .audioPlayerWrap .audioTit span {display: inline-block; width: 45px; height: 45px; margin-right: 12px; border-radius: 50%; border:1px solid #dcdcdc; background:url(../images/content/icon_audio2.png) 50% 50% no-repeat; vertical-align: middle;} .audioPlayerWrap .audioWrap {width: 100%; height: 100%; margin: 0; padding: 0;} /* 200228...... */ .audioSubtit { border:1px solid #e5e5e5; border-top: none; text-align: left; } .audioSubtit pre {overflow-y:auto; height:300px; padding:20px 25px; color: #333; word-break:break-all; white-space:pre-wrap; font-size: 15px; line-height: 1.5; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} @media all and (max-width: 960px) { .audioComment {padding:0 3% 55px;} .audioComment .titBox .btnItems {display: inline-block; position: relative; top: auto; left: auto; margin-top: 10px;} .audioComment .corseWrap .audioTab {max-width: none; margin:0 auto 20px;} .audioTab .tabType4 li {display: inline-block; float:none; padding:0 10px;} .audioComment .corseWrap .listMap {height: auto; padding-left: 0;} .audioComment .corseWrap .audioCourse {position: relative; width: 100%; height: auto;} .audioCourse>ul {height: auto;} .audioCourse>ul> li {font-size: 14px;} .audioCourse ul > li .num {width: 19px; height: 19px; margin-left: 16px; margin-right: 6px; background-color: #f7f7f7; border: 1px solid #d3d3d3; color: #494949; font-size: 11px;} .audioCourse .totalDown {padding: 14px; padding-left: 43px; background: url(../images/content/icon_a_lg.png) 16px 50% no-repeat; background-size: 20px auto;} .audioCourse .totalDown p {padding-left: 0; background: none; font-size: 14px;} .audioCourse .totalDown a {top: 7px; right: 5px;} .audioCourse ul li.active .num {color: #fff;} .audioComment .corseWrap .mapWrap {height: 55vw !important; border: 1px solid #e4e4e4; border-top: none;} .audioPlayerWrap {height: auto; padding-left: 0;} .audioPlayerWrap .audioTit {overflow: hidden; position: relative; width: 100%; height: auto; padding-top: 12px; padding-left: 13px; padding-right: 110px; font-size: 14px; white-space: nowrap; text-overflow: ellipsis;} .audioPlayerWrap .audioTit span {width: 28px; height: 28px; margin-right: 8px; background-size: 15px auto;} .audioPlayerWrap .audioWrap {height: auto;} .audioPlayerWrap .audioWrap .mejs__inner {padding-top: 23px; padding-left: 14px; padding-right: 45px;} .audioPlayerWrap .audioWrap .mejs__container {height: 55px;} .audioPlayerWrap .audioWrap .mejs__currenttime-container {left: auto; top: -23px; right: 54px;} .audioPlayerWrap .audioWrap .mejs__time {font-size: 12px;} .audioPlayerWrap .audioWrap .mejs__currenttime-container:after {padding-left: 4px; font-size: 12px;} .audioPlayerWrap .audioWrap .mejs__duration-container {left: auto; top: -23px; right: 20px;} .audioPlayerWrap .audioWrap .mejs__time-handle {top: -10px; width: 22px; height: 22px; background: url(../images/content/icon_time_handle_lg.png) 50% 50% no-repeat; background-size: contain;} .audioPlayerWrap .audioWrap .mejs__time-total, .audioPlayerWrap .audioWrap .mejs__time-buffering, .audioPlayerWrap .audioWrap .mejs__time-loaded, .audioPlayerWrap .audioWrap .mejs__time-current {height: 3px;} .audioPlayerWrap .audioWrap .mejs__button.mejs__playpause-button {top: 12px; right: 10px; width: 30px; height: 30px;} .audioPlayerWrap .audioWrap .mejs__button > button:after {content: none;} .audioPlayerWrap .audioWrap .mejs__play > button {padding-left: 0; background-position: 54% -6px;} .audioPlayerWrap .audioWrap .mejs__pause > button {padding-left: 0; background-position: 50% 89%;} } @media all and (max-width: 767px) { .audioComment {padding:0 3% 35px;} .audioComment .titBox .btnItems .shareBox {left: 0;} .audioComment .titBox .btnItems .shareBox:after {background-position: 20% 50%;} .audioComment .titBox {padding-top: 30px;} .audioComment .titBox h3.tit {margin-bottom: 48px; font-size: 18px;} .audioComment .titBox .stit {padding-top: 12px; font-size: 12px; line-height: 1.5;} .audioComment .pageBtnList {margin-top: 35px;} .audioCourse ul li .items li a.down {background-image: url(../images/content/icon_download_lg.png); background-size:19px auto;} .audioCourse ul li .items li a.audio {background-image: url(../images/content/icon_audio2_lg.png); background-size:19px auto;} .audioSubtit pre { padding:15px; font-size: 14px; } } @media all and (max-width: 640px) { .audioComment .corseWrap .mapWrap {height: 92vw !important;} } /* 관광해설 - 설화 애니메이션 */ .boardInfo.type3 {position: relative; text-align: center;} .boardInfo.type3 .infoCount {float: none; position: absolute; top: 32px; left: 10px; margin: 0;} .boardInfo.type3 >ul {font-size: 0;} .boardInfo.type3 .boardSearchText {border-left: none;} .boardInfo.type3 .alignItem {position: absolute; top: 18px; right: 15px; padding-left: 44px;} .boardInfo.type3 .alignItem label {display: inline-block; position: absolute; top: 0; left: 0; width: 44px; height: 100%; padding-top: 13px; font-size: 14px; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardInfo.type3 .alignItem .selectBox {height: 43px; line-height: 41px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardInfo.type3 .alignItem .selectBox select { width:100%; font-size:14px; } .boardInfo.type3 .alignItem .customSelect { width:100%; height:100%; font-size:14px; color:#555453; } .boardInfo.type3 .alignItem .customSelectInner { overflow:hidden; height: 100%; white-space:nowrap; text-overflow:ellipsis; padding:0 30px 0 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .boardInfo.type3 .alignItem .customSelectInner:after { content:url(../images/board/btn_boardselect_on.gif); position:absolute; top:0; right:10px; } .boardInfo.type3 .alignItem .customSelectOpen .customSelectInner:after { content:url(../images/board/btn_boardselect_off.gif); position:absolute; top:0; right:10px; } @media all and (max-width: 960px) { .boardInfo.type3 .infoCount {position: relative; top: auto; left: auto; margin-bottom: 12px; text-align: left;} .boardInfo.type3 .boardSearchText {border-left: 1px solid #cfcfcf;} .boardInfo.type3 .alignItem {top: auto; bottom: 18px;} .boardInfo.type3 .alignItem .selectBox {border-right:1px solid #cfcfcf;} } @media all and (max-width: 767px) { .boardInfo.type3 {padding: 18px 2%;} .boardInfo.type3 >ul {margin-top: 62px;} .boardInfo.type3 .selectBox {width: 30%;} .boardInfo.type3 .boardSearchText {width: 70%; border-top: 1px solid #cfcfcf;} .boardInfo.type3 .alignItem {right: auto; left: 2%; bottom:63px; width: 100%; padding-left: 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardInfo.type3 .alignItem label {overflow: hidden; left: -9999px; width: auto;} .boardInfo.type3 .alignItem .selectBox {width: 96%;} } /* j-tube - 홈 */ .jtubeWrap {position: relative; padding-bottom: 63px;} .jtubeWrap .jtubeTit {padding-top: 12px; color: #575757; font-size: 20px; font-weight: 400;} .jtubeWrap .jtubeTit strong {color: #e94808;} .jtubeWrap .jtubeTit2 {padding-left: 0.5%; color: #000; font-size: 22px; font-weight: 400; text-align: left;} .jtubeWrap .jtubeTit2 span {display: inline-block; width: 21px; height: 24px; margin-right: 3px; background-position: 0 50%; background-repeat: no-repeat; vertical-align: top;} .jtubeWrap .jtubeTit2.tit1 span {background-image: url(../images/sub/T008002.png);} .jtubeWrap .jtubeTit2.tit2 span {background-image: url(../images/sub/T008003.png);} .jtubeWrap .jtubeTit2.tit3 span {background-image: url(../images/sub/T008004.png);} .jtubeWrap .jtubeTit2.tit4 span {background-image: url(../images/sub/T008005.png);} .jtubeWrap .jtubeStit {padding-top: 40px; color: #575757; font-size: 16px; line-height: 1.4;} .jtubeTop {position: relative; padding-bottom: 50px;} .jtubeTop .tabType1 {position: absolute; top: 0; left: 0; padding-top: 0;} .jtubeTop .btnJt {display: block; position: absolute; top: 0; right:0; width: 158px; height: 44px; padding-top: 13px; padding-left: 25px; border: 1px solid #dcdcdc; background:url(../images/content/icon_down_circle.png) 18px 50% no-repeat; color: #5a5a5a; font-size: 15px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .jtubeTop .btnJt:hover, .jtubeTop .btnJt:focus {text-decoration: underline;} .jtubeMain {position: relative; padding-top: 27px; border-top: 1px solid #e2e2e2;} .jtubeWrap .jvideoList.top + .jtubeMain {border-top: none;} .jtubeMain .tabType1 {} .jtubeMain .tabType1 ul {position: absolute; top: 26px; right: 35px; z-index: 3;} .jtubeMain .btnMore {overflow: hidden; position:absolute; top:27px; right:0.5%; width:27px; height:25px; background:url(../images/content/icon_tournews_plus.png) center no-repeat; border:1px solid #dcdcdc; text-indent:-999px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .jtubeWrap .jvideoList {position: relative; padding-top: 27px; } .jtubeWrap .jvideoList.top {padding-top: 0; padding-bottom: 20px; border-bottom: 1px solid #e2e2e2;} .jvideoList ul {font-size: 0; text-align: left;} .jvideoList ul li {display: inline-block; width: 19%; margin:0 0.5%; margin-bottom: 33px; text-align: left;} .jvideoList ul li a {display: block;} .jvideoList ul li .thum {overflow: hidden; position: relative; height: 121px; margin-bottom: 13px;} .jvideoList ul li .thum img {width: 100%; height: 100%;} .jvideoList ul li .thum .time {display: inline-block; position: absolute; bottom: 0; right: 0; width: 40px; height: 17px; background-color: #000; color: #fff; text-align: center; line-height: 17px; font-size: 11px; font-family: "Dotum",'돋움',sans-serif;} .jvideoList ul li .tit {overflow: hidden; padding-bottom: 8px; color: #393939; font-size: 14px; white-space:nowrap; text-overflow:ellipsis;} .jvideoList ul li .writer, .jvideoList ul li .count {overflow: hidden; color: #797979; font-size: 13px; line-height: 16px; white-space:nowrap; text-overflow:ellipsis;} .jvideoList ul li a:focus .thum img, .jvideoList ul li a:hover .thum img {-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1); -webkit-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; transition: 0.4s ease-in;} .jvideoList ul li a:focus .tit, .jvideoList ul li a:hover .tit {text-decoration: underline;} .jtMore {display: block; width: 280px; height: 56px; margin: 0 auto; margin-top: 37px; padding-top: 18px; padding-right: 28px; border: 1px solid #d3d3d3; background:url(../images/content/icon_plus.png) 69% 50% no-repeat; font-size: 16px; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .jtMore:hover, .jtMore:focus {text-decoration: underline;} .jtubeWrap .tabType1 ul li {display: inline-block; padding-top: 5px;} .jtubeWrap .tabType1 ul li a {display: inline-block; padding-bottom: 2px;} .jtubeWrap .tabType1 ul li a:before {content: ''; position: absolute; top: 7px; left: 0; width: 1px; height: 12px; background-color: #d2d2d4;} .jtubeWrap .tabType1 ul li:first-child a:before {content: none;} .jtubeWrap .tabType1 ul li.active a, .jtubeWrap .tabType1 ul li a:hover, .jtubeWrap .tabType1 ul li a:focus {color: #4e6bc8; border-bottom: 1px solid #4e6bc8; font-weight: 400;} .jtubeWrap .tabType1 ul li.select {position: relative; padding-right: 82px; text-align: left;} .jtubeWrap .tabType1 ul li.select .selectBox {display: inline-block; position: absolute; top: 0; right: 0; width: 75px; height: 32px; border: 1px solid #e4e4e4; z-index: 3; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .jtubeWrap .jtubeTop li.select .selectBox select {width: 100% !important; height: 100%;} .jtubeWrap .jtubeTop li.select .selectBox .customSelect .customSelectInner {width: 100%; height: 100%; padding-left: 8px; background-repeat: no-repeat; background-position: 90% 55%; background-image: url(../images/common/icon_arrow.png); color: #484848; font-size: 15px; font-weight: 300; line-height: 28px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .jtubeWrap .jtubeTop li.select .selectBox .customSelectOpen .customSelectInner {background-image: url(../images/common/icon_arrow_up.png); background-position: 90% 50%;} @media all and (max-width: 960px) { /* .jtubeWrap {padding:35px 3%;}*/ .jtubeTop {padding-bottom: 30px;} .jtubeWrap .jtubeTit {padding: 35px 3% 0;} .jtubeMain {margin:0 3%; border-top: none;} .jtubeWrap .jtubeMain .jtubeTit2 {text-align: center;} .jtubeMain .tabType1 ul {display: block; position: relative; top: auto; right: auto; margin-top: 20px; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; text-align: center; font-size: 0;} .jtubeMain .tabType1 ul li {float:none; width: 20%; padding: 0;} .jtubeMain .tabType1 ul li a {display: inline-block; padding:12px 0; color: #000; font-size: 16px;} .jtubeMain .tabType1 ul li.active a, .jtubeMain .tabType1 ul li a:hover, .jtubeMain .tabType1 ul li a:focus {border-bottom: 2px solid #f47740; color: #f04a01; } .jtubeWrap .jtubeMain .tabType1 ul li a:before {top:14px;} .jtubeWrap .jtubeMain .jvideoList {margin:0;} .jtubeTop .tabType1 {position: relative; top: auto; left: auto; padding-top: 18px;} .jtubeTop .btnJt {position: relative; top: auto; right: auto; margin:0 auto; margin-top: 20px;} .jtubeWrap .jvideoList {margin:0 3%;} .jvideoList ul li {width: 32.3333%; margin-bottom: 18px;} .jvideoList ul li .thum {height: auto; padding-top:56.88%;} .jvideoList ul li .thum img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .jvideoList ul li a:focus .thum img, .jvideoList ul li a:hover .thum img {-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none; -webkit-transition:none; -o-transition:none; -moz-transition:none; transition:none;} } @media all and (max-width: 767px) { .jtubeWrap .jtubeTit {font-size: 18px; line-height: 1.4;} .jtubeWrap .jtubeTit2 {font-size: 18px; font-weight: 500;} .jtubeWrap .jtubeTit2 span {height: 19px; background-size:contain;} .jtubeWrap .jtubeStit {padding:30px 2% 0; font-size: 14px;} .jtubeTop .tabType1 {padding-bottom: 25px;} .jtubeWrap .jvideoList {padding-bottom: 20px;} .jvideoList ul li .writer, .jvideoList ul li .count {font-size: 12px; letter-spacing: -0.04em;} .jtMore {width: 205px; height: 49px; padding-top: 16px; font-size: 14px;} } @media all and (max-width: 640px) { .jtubeMain .tabType1 ul li {width: 35%;} .jtubeWrap .jtubeMain .tabType1 ul li a:before {content:none;} } /* j-tube - 남도먹방 */ .btnJtubeMo {display: none;} .jtubeWrap .jtubeVid {position: relative; padding-right: 16.4%;} .foodVid .vidWrap {height: 526px;} .foodVid .vidWrap video, .foodVid .vidWrap iframe {min-width: 100%; width: 100%; height: 100%;} .jtubeWrap .vidInfo {position: relative; padding:40px 28px 50px 232px; border: 1px solid #dedede; border-top: none; text-align: left;} .jtubeWrap .vidInfo .infoLogo {display: table; position: absolute; top:20px; left: 18px; width: 216px; height: 88px; text-align: center;} .jtubeWrap .vidInfo .infoLogo p {display: table-cell; vertical-align:middle;} .jtubeWrap .vidInfo .infoLogo p img { max-height:88px;} .jtubeWrap .vidInfo .vidTit {max-width:430px; padding-top: 4px; padding-bottom: 9px; padding-left: 25px; border-left: 1px solid #e5e6ea; color: #232323; font-size:18px;} .jtubeWrap .vidInfo .info {max-width:545px; padding-left: 25px; border-left: 1px solid #e5e6ea;} .jtubeWrap .vidInfo .info li {float: left; color: #7a7a7a; font-size: 14px; font-weight: 300; text-align: center;} .jtubeWrap .vidInfo .info li .bar {display: inline-block; margin:0 6px; padding:0 6px; border-left: 1px solid #cecdcd; border-right: 1px solid #cecdcd;} .jtubeWrap .vidInfo .btnItems {position: absolute; top: 43px; right: 28px;z-index: 2;} .jtubeWrap .vidInfo .btnItems .shareBox {top: -62px; left: -65px;} .jtubeVid .foodList {position: absolute; top: 0; right: 0; width: 16.4%; height: 100%; padding:22px 23px 0; border: 1px solid #e0e0e0; border-left: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .jtubeVid .foodList .foodTab {margin-bottom: 23px; font-size: 0;} .foodList .foodTab li {display: inline-block; width: 50%;} .foodList .foodTab li:first-child {position: relative;} .foodList .foodTab li:first-child:after {content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 15px; background-color: #e1e1e1;} .foodList .foodTab li a {display: inline-block; padding:0 1px; padding-bottom: 2px; color: #010101; font-size: 14px; font-weight: 300; } .foodList .foodTab li a:hover, .foodList .foodTab li a:focus, .foodList .foodTab li.active a {color: #4e6bc8; border-bottom: 1px solid #4e6bc8; font-weight: 400;} .foodList .foodSlide .item {margin-bottom: 15px;} .foodList .item a {display: block; height: 100%; text-align: left;} .foodList .item a .thum {position: relative; height: 75px; background-color: #000;} .foodList .item a .thum img {width: 100%; height: 100%;} .foodList .item a .thum .time {display: inline-block; position: absolute; bottom: 0; right: 0; padding:2px 3px; background-color: #000; color: #fff; font-size: 12px; font-family: "Dotum","돋움",sans-serif;} .foodList .item a .title {overflow: hidden; padding-top: 8px; font-size: 13px; font-weight: 300; white-space: nowrap; text-overflow: ellipsis;} .foodList .item a .date {padding-top: 3px; color: #878787; font-size: 12px; font-weight: 300;} .foodList .item a:hover .title, .foodList .item a:focus .title {text-decoration: underline;} .foodList .item.active a .thum:after, .foodList .item a:hover .thum:after, .foodList .item a:focus .them:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/content/icon_play_xs.png) 50% 50% no-repeat;} .foodList .item.active a .thum img, .foodList .item a:hover .thum img, .foodList .item a:focus .them img {opacity: 0.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"} .foodList .pager {position: relative; margin-top: 18px; font-size: 0;} .foodList .pager p {font-size: 14px; font-weight: 300;} .foodList .pager p span {display: inline-block; padding:0 3px; line-height: 27px;} .foodList .pager p .current {font-weight: 500;} .foodList .pager .slick-arrow {overflow: hidden; display: inline-block; position: absolute; top: 0; width: 29px; height: 26px; border: 1px solid #d3d3d3; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -999px;} .foodList .pager button.slick-prev {left: 0; margin-right: 12px; background-image: url(../images/content/icon_prev.png);} .foodList .pager button.slick-next {right: 0; margin-left: 12px; background-image: url(../images/content/icon_next.png);} .jtubeWrap .vidInfoCon {padding: 52px 3% 0; text-align: left;} .jtubeWrap .vidInfoCon .tabBtn {margin-bottom: 20px; font-size: 0;} .jtubeWrap .vidInfoCon .tabBtn li {display: inline-block; position: relative;} .jtubeWrap .vidInfoCon .tabBtn li:first-child + li:before {content: ''; position: absolute; top: 3px; left: 0; width: 1px; height: 19px; background-color: #dedede;} .jtubeWrap .vidInfoCon .tabBtn li:first-child+li {margin-left: 13px;padding-left: 12px;} .jtubeWrap .vidInfoCon .tabBtn li a {display: inline-block; color: #747474; font-size: 22px;} .jtubeWrap .vidInfoCon .tabBtn li a:hover, .jtubeWrap .vidInfoCon .tabBtn li a:focus, .jtubeWrap .vidInfoCon .tabBtn li.active a {color: #000;} .jtubeWrap .vidInfoCon .tabCon {min-height: 220px; font-size: 15px; line-height: 22px; font-weight: 300; text-align: justify;} .jtubeWrap .vidInfoCon .tabCon pre { max-height:300px; overflow-y:auto; word-break:break-all; white-space:pre-wrap; } .jtubeWrap .hashWrap {margin-bottom: 45px; padding-bottom: 54px; padding-top: 45px; border-bottom: 1px solid #e3e3e3;} .jtubeWrap .hashWrap h4.tit {padding-bottom: 15px; font-size: 20px; font-weight: 400;text-align: left;} .jtubeWrap .btnList {display: block; margin:0 auto; width: 245px; height: 58px; padding-left: 30px; background:#373e7a url(../images/content/icon_list.png) 37% 50% no-repeat; color: #fff; font-size: 16px; font-weight: 300; line-height: 56px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} @media all and (max-width: 960px) { .btnJtubeMo {display: block; padding:18px 17px; background-color: #4e6bc8; background-image: url(../images/sub/icon_down_arrow_lg.png); background-repeat: no-repeat; background-position: 97% 50%; background-size:20px auto; color: #fff; font-size: 17px; text-align: left;} .btnJtubeMoc.active {background-image: url(../images/sub/icon_up_arrow.png);} .jtubeTop .tabType4 ul {display: none;} .jtubeTop .tabType4 ul li {display: block;padding:0; text-align: left;} .jtubeTop .tabType4 ul li a {display: block; padding:12px 0 12px 24px; border-bottom: 1px solid #e8e8e8; font-size: 14px;} .jtubeWrap .jtubeVid {padding: 0 3%;} .foodVid .vidWrap {position: relative; height: auto; padding-top: 56.202%;} .foodVid .vidWrap video, .foodVid .vidWrap iframe {position: absolute; top: 0; left: 0;} .jtubeWrap .vidInfo .vidTit {overflow: hidden; padding-top: 0; font-size: 17px; white-space: nowrap; text-overflow: ellipsis;} .jtubeWrap .vidInfo .btnItems {top: 68px;} .jtubeVid .foodList {position: relative; width: 100%; height: auto; top: auto; right: auto; padding: 0; padding-top: 28px; padding-bottom: 22px; border: none; border-bottom: 1px solid #dcdcdc;} .jtubeVid .foodList .foodTab {display: none;} .foodList .foodSlide .item {position: relative; min-height: 71px; margin-bottom: 13px; padding-left: 147px; text-align: left;} .foodList .item a .thum {display: block; position: absolute; top: 0; left: 0; width: 129px; height: 71px;} .foodList .item a .date {padding-top: 8px;} .foodList .pager {display: none;} #foodTab1 {display: block;} #foodTab2 {display: none;} .foodList .foodSlide {height:420px; overflow:auto;} /* scrollbar */ /* width */ .foodList .foodSlide::-webkit-scrollbar {width:11px; } /* Track */ .foodList .foodSlide::-webkit-scrollbar-track {background: #f6f6f6;border: 1px solid #d3d3d3;} /* Handle */ .foodList .foodSlide::-webkit-scrollbar-thumb {background: #fff url(../images/common/bg_scrollbar.png) 50% 50% no-repeat; border: 1px solid #d3d3d3;} /* Handle on hover */ .foodList .foodSlide::-webkit-scrollbar-thumb:hover {background: #a8a8a8;} .jtubeWrap .vidInfoCon {padding: 24px 2% 0;} .jtubeWrap .vidInfoCon .tabBtn li a {font-size: 17px;} .jtubeWrap .vidInfoCon .tabBtn li:first-child+li:before {top: 0;} .jtubeWrap .vidInfoCon .tabCon {font-size: 14px; line-height: 20px;} .jtubeWrap .hashWrap {margin-bottom: 0; padding:35px 0;} .jtubeWrap .hashWrap h4.tit {padding-bottom: 12px; font-size: 17px;} } @media all and (max-width: 767px) { .jtubeWrap .vidInfo {padding: 20px 0 65px 110px;} .jtubeWrap .vidInfo .infoLogo {top: 18pxpx; left: 10px; width: 90px; height: 37px;} .jtubeWrap .vidInfo .infoLogo p img { max-height:37px;} .jtubeWrap .vidInfo .vidTit {padding-left: 12px; padding-right: 10px; font-size: 16px;} .jtubeWrap .vidInfo .info {max-width:none; padding-left: 12px; padding-right: 10px;} .jtubeWrap .vidInfo .info li {font-size: 11px;} .jtubeWrap .vidInfo .btnItems {top: auto; right: 0; bottom: 0; width: 100%;} .jtubeWrap .vidInfo .btnItems > li {width: 33.3333%;} .jtubeWrap .vidInfo .btnItems > li > button, .jtubeWrap .vidInfo .btnItems > li > a {width: 100%; padding-left: 18px; border-bottom: none; text-indent: 0; background-position: 20% 50%; background-size:15px auto; font-size: 12px;} .jtubeWrap .vidInfo .btnItems > li:first-child > a, .jtubeWrap .vidInfo .btnItems > li:first-child > button {border-left: none;} .jtubeWrap .vidInfo .btnItems > li > button.btnInterest {border-right: none; background-position: 15% 50%;} .jtubeWrap .vidInfo .btnItems .shareBox {left: 0;} .jtubeWrap .vidInfoCon {padding:20px 2% 0} .jtubeWrap .vidInfoCon .tabBtn {margin-bottom: 16px;} .jtubeWrap .vidInfoCon .tabBtn li a {font-size: 15px;} } @media all and (max-width: 640px) { .jtubeWrap .vidInfo .btnItems .shareBox:after {background-position: 20% 50%;} } /* 영상우체국 */ .jtubeWrap [data-category="jtube4_1"] {padding-left: 33px; background-image: url(../images/sub/jtube4_1.png); background-position: 0 bottom; background-repeat: no-repeat;} .jtubeWrap [data-category="jtube4_2"] {padding-left: 33px; background-image: url(../images/sub/jtube4_2.png); background-position: 0 bottom; background-repeat: no-repeat;} .jtubeWrap [data-category="jtube4_1"]:hover, .jtubeWrap [data-category="jtube4_1"]:focus, .jtubeWrap li.active [data-category="jtube4_1"] , .jtubeWrap [data-category="jtube4_2"]:hover, .jtubeWrap [data-category="jtube4_2"]:focus, .jtubeWrap li.active [data-category="jtube4_1"] {background-position: 0 -1px;} /* 관광새소식 홈 */ .tourNews { position:relative; padding-top:10px; padding-right:380px; text-align:left; } .tourNews h3 { font-weight:500; font-size:18px; font-weight: 400;} .tourNews .btnMore { position:absolute; top:0; right:0; width:27px; height:25px; background:url(../images/content/icon_tournews_plus.png) center no-repeat; border:1px solid #dcdcdc; text-indent:-9999px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tourNews .btnMore a { display:block; height:100%; } .tourNews .lt { padding-left:32px; padding-right: 45px; } .tourNews .rt { position:absolute; top:0; right:0; width:380px; height: 100%; padding-left:35px; padding-right: 30px; border-left:1px solid #e1e1e1; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tourNews .report { position:relative; overflow:hidden; margin-bottom:45px; } .tourNews .report h3 { padding:5px 0 27px; } .tourNews .report .newsThum { float:left; width:40%; margin-right:4%; } .tourNews .report .newsThum a {display: block;} .tourNews .report .thumb { position:relative; display:block; overflow:hidden; max-height:166px; } .tourNews .report .thumb img { width:100%; } .tourNews .report .txt { display:block; margin-top:12px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} .tourNews .report .moDate {display: none;} .tourNews .report .newsList { overflow:hidden; padding-right:1%; } .tourNews .report .newsList li { padding:11px 5px; border-bottom:1px solid #e6e7e2; } .tourNews .report .newsList li:first-child { padding-top:0;} .tourNews .report .newsList li a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size: 16px; font-weight: 300;} .tourNews .report .newsList li a:hover, .tourNews .report .newsList li a:focus {text-decoration:underline;} .tourNews .fastival { position:relative; overflow:hidden; margin-bottom:55px; } .tourNews .fastival h3 { padding:5px 0 25px; } .tourNews .fastival .thumb { float:left; overflow:hidden; width:40%; margin-right:4%; height:167px;} .tourNews .fastival .thumb img { width:100%; } .tourNews .fastival dl { overflow:hidden; padding-top:8px; } .tourNews .fastival dl dt { color: #393939; font-size:20px; font-weight: 400;} .tourNews .fastival dl dt em { color:#c55300; } .tourNews .fastival dl dt .moDate {display: none;} .tourNews .fastival dl dd { padding-left:4px; font-weight:300; } .tourNews .fastival dl dd span { display:block; padding:12px 0; font-size:18px; color:#7c7c7c; } .tourNews .fastival dl dd .dottxt { height:88px; font-size:15px; line-height:22px; } .tourNews .fastival .slide li > span { position:absolute; bottom:0; margin-left:4px; padding:0 35px 5px 1px; background:url(../images/content/bg_tournews_fsmor.png) left bottom no-repeat; font-weight:300; font-size:12px; color:#7c7c7c; } .tourNews .pager { position:absolute; top:0; right:27px; font-size:0; } .tourNews .pager .prev, .tourNews .pager .next { overflow:hidden; display:inline-block; width:27px; height:25px; background-repeat:no-repeat; background-position:center; border:1px solid #dcdcdc; border-right:none; text-indent:-999px; } .tourNews .pager .prev { background-image:url(../images/content/icon_prev.png); } .tourNews .pager .next { background-image:url(../images/content/icon_next.png); } .tourNews .storageWrap .best { position:relative; float:right; width:185px; padding-right:30px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } .tourNews .storage {position: relative;} .tourNews .storage .tabTit { padding:5px 0 22px; } .tourNews .storage h3 { display:inline-block; margin-right:10px; vertical-align:middle; } .tourNews .storage .tabType3 { vertical-align:middle; } .tourNews .storage .tabType3 li a {color: #323232; font-size: 16px;} .tourNews .storage .tabType3 li.active a, .tourNews .storage .tabType3 li a:hover, .tourNews .storage .tabType3 li a:focus {color: #ce4b11; font-weight: 500;} .tourNews .storage .galleryList > ul > li {width: 32.33333%;} .tourNews .notice {position: relative; margin-bottom:45px; } .tourNews .notice h3 { padding:15px 0 22px; } .tourNews .notice .newsList li { padding:11px 3px; border-bottom:1px solid #e6e7e2; font-weight:300; font-size: 15px;} .tourNews .notice .newsList li a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .tourNews .notice .newsList li a .cate {color: #d0440c; font-size: 15px;} .tourNews .notice .newsList li a:hover, .tourNews .notice .newsList li a:focus {text-decoration:underline;} .tourNews .notice .btnMore {top: 10px;} .tourNews .event { position:relative; margin-bottom:45px; } .tourNews .event .tabTit { margin-bottom:20px; } .tourNews .event h3 { display:inline-block; vertical-align:middle; } .tourNews .event .tabType2 { display:inline-block; vertical-align:middle; } .tourNews .event .eventImg a {display: block; width: 100%; height: 201px;} .tourNews .event .eventImg a img {width: 100%; height: 100%;} .tourNews .best {position: relative; margin-bottom: 43px;} .tourNews .best h3 { padding:4px 0 25px; } .tourNews .best ol {float:left; width: 50%; margin-bottom: 12px;} .tourNews .best ol li { margin-top:8px; font-size:15px; font-weight: 300;} .tourNews .best ol li a {overflow: hidden; display: block; white-space:nowrap; text-overflow:ellipsis;} .tourNews .best ol li:first-child { margin-top:0; } .tourNews .best ol li span {display: inline-block; width: 15px; padding-right:7px; font-family:"나눔고딕", Nanum Gothic; font-size:14px; font-weight: 700; text-align: center;} .tourNews .best span.col1 { color:#e3351a; } .tourNews .best span.col2 { color:#3f63bf; } .tourNews .best .reper {clear: both; padding-left: 17px; color: #4f4f4f; font-size: 12px; font-weight: 300;} .tourNews .sns { overflow:hidden; } .tourNews .sns > h3 { float:left; padding-top: 10px;} .tourNews .sns > ul { float:right; } .tourNews .sns > ul li { display:inline-block; padding:0 1px; vertical-align:top; } .tourNews .sns > ul li a {overflow: hidden; display:block; width: 36px; height: 36px; border-radius:50%; background-repeat: no-repeat; background-position: 50% 50%; text-indent:-999px;} .tourNews .sns ul li.s1 a {background-color: #0cc742; background-image: url(../images/common/icon_sns_blog.png); background-size:12px auto;} .tourNews .sns ul li.s2 a {background-color: #f84000; background-image: url(../images/common/icon_sns_youtube.png); background-size:20px auto;} .tourNews .sns ul li.s3 a {background-color: #4d6ba8; background-image: url(../images/common/icon_sns_facebook.png); background-size:10px auto;} .tourNews .sns ul li.s4 a {background-color: #41a3ee; background-image: url(../images/common/icon_sns_twitter.png); background-size:18px auto;} .tourNews .sns ul li.s5 a {background-color: #ffcc00; background-image: url(../images/common/icon_sns_kakao.png); background-size:18px auto;} @media all and (max-width: 960px) { .tourNews {padding:30px 3%;} .tourNews .lt {padding:0;} .tourNews .rt {position: relative; top: auto; right: auto; width: 100%; height: auto; padding: 0; border-left: none;} .tourNews .event .eventImg a {position: relative; height: auto; padding-top: 61.2%;} .tourNews .event .eventImg a img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .tourNews .sns > h3 {margin-right: 27px;} .tourNews .sns > ul {float:left;} } @media all and (max-width: 640px) { .tourNews .report {margin-bottom: 25px;} .tourNews .report h3 {margin-bottom: 18px; padding: 5px 0 11px; border-bottom: 1px solid #e8e8e8; font-size: 17px;} .tourNews .report .newsThum {float:none; width: 100%; margin-right: 0;} .tourNews .newsSlide {padding:0 2%;} .tourNews .newsSlide .slideWrap:first-child+div {display: none;} .tourNews .pager {display: none;} .tourNews .report .newsThum {overflow: hidden;} .tourNews .report .thumb {float: left; position: relative; width: 52%; max-height:none; padding-top: 31.4%;} .tourNews .report .thumb img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .tourNews .report .txt {float:right; width: 48%; margin-top: 17px; padding-left: 14px; font-size: 14px; line-height: 20px; white-space:normal; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tourNews .report .moDate {display: block; padding-top: 7px; color: #7c7c7c; font-size: 13px; font-weight: 300;} .tourNews .report .newsList {clear: both; margin-top: 14px; padding-right: 0;} .tourNews .report .newsList li {padding:5px 10px; border-bottom: none; background:url(../images/common/bu_2p.png) 0 6px no-repeat;} .tourNews .report .newsList li:first-child+li+li+li, .tourNews .report .newsList li:first-child+li+li+li+li {display: none;} .tourNews .report .newsList li a {font-size: 14px;} .tourNews .fastival {margin-bottom: 30px;} .tourNews .fastival h3 {margin-bottom: 18px; padding: 5px 0 11px; border-bottom: 1px solid #e8e8e8; font-size: 17px;} .tourNews .fastival .slide {padding:0 2%;} .tourNews .fastival .slide li {display: none; padding-bottom: 82px;} .tourNews .fastival .slide li:first-child {overflow: hidden; display: block; position: relative;} .tourNews .fastival .thumb {position: relative; width: 52%; height: auto; margin-right: 0; padding-top: 31.4%;} .tourNews .fastival .thumb span {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .tourNews .fastival .slide li a {display: block; float:right; width: 48%; padding-left: 14px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .tourNews .fastival dl {padding-top: 18px;} .tourNews .fastival dl dt {overflow: hidden; display: block; font-size: 14px; white-space:nowrap; text-overflow:ellipsis;} .tourNews .fastival dl dt em {display: block; padding-bottom: 5px;} .tourNews .fastival dl dt .moDate {display: block; padding-top: 7px; color: #7c7c7c; font-size: 13px; font-weight: 300;} .tourNews .fastival dl dd {position: absolute; bottom: 0; left: 0; width: 100%;} .tourNews .fastival dl dd span {display: none;} .tourNews .fastival dl dd .dottxt {height: 72px;font-size: 14px; line-height: 18px;} .tourNews .storage .tabTit {padding: 5px 0 11px;} .tourNews .storage h3 {font-size: 17px;} .tourNews .storage .galleryList > ul > li {width: 49%;} .tourNews .storage .galleryList > ul > li:first-child+li+li {display: none;} .tourNews .storage .tabType3 li a {font-size: 14px;} .tourNews .notice {margin-top: 20px; margin-bottom: 30px;} .tourNews .notice h3 {margin-bottom: 13px; padding: 5px 0 11px; border-bottom: 1px solid #e8e8e8; font-size: 17px;} .tourNews .notice .btnMore {top: 0;} .tourNews .notice .newsList li {padding: 6px 3px; border-bottom: none; font-size: 14px;} .tourNews .notice .newsList li a .cate {font-size: 14px;} .tourNews .event {margin-bottom: 30px;} .tourNews .event .tabTit {margin-bottom: 16px;} .tourNews .best {margin-bottom: 30px;} .tourNews .best h3 {margin-bottom: 12px; padding: 5px 0 11px; border-bottom: 1px solid #e8e8e8; font-size: 17px} .tourNews .best ol li {margin-top: 10px; padding:0 5px; font-size: 14px;} .tourNews .best ol li span {padding-right: 4px;} .tourNews .best .reper {padding-left: 8px;} .tourNews .sns {padding: 13px 11px; border: 1px solid #d4d4d4;} .tourNews .sns > h3 {padding-top: 7px; padding-bottom: 7px; padding-right: 8px; margin-right: 10px; border-right: 1px solid #c7c7c7; font-size: 16px;} .tourNews .sns > ul li a {width: 30px; height: 30px;} } @media all and (max-width: 359px) { .tourNews .sns > h3 {margin-right: 0;} } /* 관광새소식 - 축제홈 */ .festivalWrap {padding-bottom:65px;} .festivalTop {position: relative; padding: 45px 0; border-bottom: 1px solid #e9e8e6;} .festivalTop .todayTit {position: absolute; top: 62px; left: 3%; color: #555453; font-size: 15px; font-weight: 300;} .festivalTop .total {position: absolute; top: 62px; right: 3%; display: block; padding-left: 26px; background:url(../images/content/icon_calendar.png) 0 50% no-repeat; font-size: 16px; font-weight: 300; line-height: 19px;} .festivalTop .todayTit strong {display: inline-block; padding-right: 10px; color: #010101; } .festivalTop .month {position: relative; display: inline-block; padding:0 130px;} .festivalTop .month h3 {padding-bottom: 13px; color: #2a2a2a; font-size: 28px; font-weight: 500;} .festivalTop .month h3 .moTotal {display: none;} .festivalTop .month p {color: #5a5a5a; font-size: 16px; font-weight: 300;} .festivalTop .month .prev a, .festivalTop .month .next a {display: block; position: absolute; top: 3px; width: 106px; height: 45px; border: 1px solid #cfcfcf; border-radius: 21px; background-repeat: no-repeat; background-position-y:0; font-size: 16px; font-weight: 300; line-height: 43px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .festivalTop .month .prev a {left: 0; padding-left: 18px; background-image: url(../images/content/icon_festival_prev.png); background-position-x:24px;} .festivalTop .month .next a {right: 0; padding-right: 18px; background-image: url(../images/content/icon_festival_next.png); background-position-x:75%;} .festivalTop .month li.active a, .festivalTop .month li a:hover, .festivalTop .month li a:focus {border: 1px solid #f27b3a; background-color: #fffdf8; background-position-y:100%; color: #cb5718;} .festivalWrap .festaList {padding: 35px 3.5%;} .festivalWrap .festaList ul li {float: left; width: 32.33333%; margin-right: 1.5%; margin-bottom: 20px;} .festivalWrap .festaList ul li:nth-child(3n) {margin-right: 0;} .festivalWrap .festaList ul li a {display: block; border: 1px solid #dadada;} .festivalWrap .festaList ul li a .thum {display: inline-block; overflow: hidden; width: 100%; height: 187px;} .festivalWrap .festaList ul li a .thum img {width: 100%; height: 100%;} .festivalWrap .festaList ul li a p {} .festivalWrap .festaList ul li a .name {overflow: hidden; padding: 23px 13px 0; color: #393939; font-size: 16px; white-space:nowrap; text-overflow:ellipsis;} .festivalWrap .festaList ul li a .name .cate {display: inline-block; margin-right: 3px;color: #994f19;} .festivalWrap .festaList ul li a .terms {padding-top: 7px; padding-bottom: 25px; color: #7c7c7c; font-size: 14px; font-weight: 300;} .festivalWrap .festaList ul li a:hover .name, .festivalWrap .festaList ul li a:focus .name {text-decoration: underline;} .festivalWrap .festaList ul li a:hover .thum img, .festivalWrap .festaList ul li a:focus .thum img {-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1); -webkit-transition: ease-in 0.4s; -o-transition: ease-in 0.4s; -moz-transition: ease-in 0.4s; transition: ease-in 0.4s;} .festivalWrap .pagination {padding-top: 10px; padding-bottom: 45px;} .festivalWrap .latestWrap {padding: 46px 3.5% 0; border-top: 1px solid #e9e8e6;} .festivalWrap .latestWrap .galleryList > ul > li {margin-bottom: 0;} .latestWrap h3.tit {padding-top: 4px; padding-bottom: 27px; color: #29161c; font-size: 22px; font-weight: 500; text-align: left;} .latestWrap .btn {overflow: hidden; display: block; position: absolute; top: 0; right: 0; border: 1px solid #e5e5e5; width: 28px; height: 25px; background:url(../images/board/icon_plus.png) 50% 50% no-repeat; text-indent: -999px;} .latestWrap .latestBoard {position: relative; float: left; width: 48%;} .latestWrap .latestBoard table {width: 100%;} .latestWrap .latestBoard table td {border-bottom: 1px solid #e6e7e2; line-height: 36px;} .latestWrap .latestBoard table td.subject {font-size: 15px; text-align: left;} .latestWrap .latestBoard table td.writer {color: #555; font-size: 14px; font-weight: 300;} .latestWrap .latestBoard table td.date {color: #747474; font-size: 14px;} .latestWrap .latestBoard table td a {display: block; overflow: hidden; max-width: 310px; padding-left: 3px; padding-right: 8px; white-space: nowrap; text-overflow: ellipsis;} .latestWrap .latestBoard table td a:hover, .latestWrap .latestBoard table td a:focus {text-decoration: underline;} .latestWrap .galleryList {position: relative; float: right; width: 46%;} .latestWrap .galleryList > ul > li {width: 48%; margin:0 1%;} .latestWrap .galleryList ul li a .boardIcon {height: 128px;} .latestWrap .galleryList a .info {padding: 15px 17px 0;} .latestWrap .galleryList a .info .subject {overflow: hidden; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; white-space: nowrap; text-overflow: ellipsis;} .latestWrap .galleryList .useItem {vertical-align: top;} @media all and (max-width: 960px) { .festivalWrap {padding:0 3% 30px;} .festivalTop {padding: 30px 0 24px;} .festivalTop .todayTit {position: relative; top: auto; left: auto; margin-bottom: 15px; font-size: 12px;} .festivalTop .month {display: block; padding:0;} .festivalTop .total {display: none;} .festivalTop .month h3 {padding-bottom: 8px; font-size: 20px;} .festivalTop .month h3 .moTotal {overflow: hidden; display: inline-block; width: 28px; height: 18px; margin-left: 10px; border-left: 1px solid #c7c7c7; background:url(../images/content/icon_calendar_lg.png) 100% 50% no-repeat; background-size:18px auto; font-size: 16px; font-weight: 300; line-height: 19px; text-indent:-999px;} .festivalTop .month p {font-size: 12px;} .festivalWrap .festaList {padding: 18px 0;} .festivalTop .month .prev a, .festivalTop .month .next a {overflow: hidden; top: 0; width: 34px; height: 34px; text-indent:-999px; border: 1px solid #a2a2a2; background-size: 9px auto; border-radius:50%;} .festivalTop .month .prev a {padding-left: 0; background-image: url(../images/content/icon_festival_prev_lg.png); background-position: 48% 50%;} .festivalTop .month .next a {padding-right: 0; background-image: url(../images/content/icon_festival_next_lg.png); background-position: 52% 50%;} .festivalTop .month li.active a, .festivalTop .month li a:hover, .festivalTop .month li a:focus {border: 1px solid #a2a2a2; background-color: #fff; background-position-y:center;} .festivalWrap .festaList ul li a .thum {position: relative; height: auto; padding-top: 56.55%;} .festivalWrap .festaList ul li a .thum img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .festivalWrap .latestWrap {padding: 20px 0;} .latestWrap h3.tit {padding-bottom: 15px; padding-left: 4px; font-size: 17px;} .latestWrap .latestBoard {float:none; width: 100%; margin-bottom: 25px;} .latestWrap .galleryList {float:none; width:100%;} .latestWrap .galleryList ul li a .boardIcon {height: auto;} } @media all and (max-width: 767px) { .festivalWrap .festaList ul {font-size: 0; text-align: left;} .festivalWrap .festaList ul li {display: inline-block; float:none; width: 49%; margin:0 0.5%; margin-bottom: 6px; text-align: center;} .festivalWrap .festaList ul li a .name {padding: 15px 13px 0; font-size: 14px;} .festivalWrap .festaList ul li a .name .cate {display: block; margin-right: 0; padding-bottom: 4px;} .festivalWrap .festaList ul li a .terms {padding-bottom: 14px; font-size: 13px;} .latestWrap .latestBoard table td {padding:5px; border-bottom: none;font-size: 14px; font-weight: 300; line-height: 1.4;} .latestWrap .latestBoard table td.writer {display: none;} .latestWrap .latestBoard table td.subject a {max-width:none; padding-left: 10px; background:url(../images/common/bu_2p.png) 0 7px no-repeat; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; font-size: 14px; white-space:normal;} .latestWrap .latestBoard table td.date {font-size: 13px;} /* .latestWrap .latestBoard table tr:last-child {display: none;}*/ } @media all and (max-width: 520px) { .latestWrap .latestBoard table td.date {display: none;} .latestWrap .latestBoard table td.subject a {max-width:290px; white-space:nowrap;} } /* 관광새소식 - 축제상세 */ .festivalWrap .conViewTit {padding-top: 44px;} .conViewTit h3.tit2 {padding-top: 18px; font-size: 30px; font-weight: 500;} .conViewTit .terms {padding-top: 17px; padding-bottom: 10px; color: #7c7c7c; font-size: 20px; font-weight: 300;} /* 190715 ...... ..�영상 추가 */ .festivalView .festaVideo {overflow: hidden; position: relative; margin-bottom: 48px; padding-top: 56.296%;} .festivalView .festaVideo iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /* // 추가 끝 */ .festivalView .festaSlide {position: relative; } .festivalView .festaSlide .slide .slick-slide {position: relative; overflow: hidden; height:635px;} .festivalView .festaSlide .slide .slick-slide img {display: block; position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);} .festivalView .festaSlide .pager button {overflow:hidden; display:inline-block; position: absolute; top: 50%; width: 84px; height: 89px; background-color: #000; background-color: rgba(000,000,000,0.6); background-repeat:no-repeat; background-position:center; text-indent:-999px; -webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} .festivalView .festaSlide .pager .prev {left: 0; background-image: url(../images/content/icon_prev_black.png);} .festivalView .festaSlide .pager .next {right: 0; background-image: url(../images/content/icon_next_black.png);} .festivalView .festaSlide .slick-dots {position: absolute; bottom: 25px; left: 0; width: 100%; font-size: 0; z-index: 2;} .festivalView .festaSlide .slick-dots li {display: inline;} .festivalView .festaSlide .slick-dots li button {display: inline-block; width: 13px; height: 13px; margin-left: 9px; border: 3px solid #fff; background-color: #fff; border-radius: 50%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .festivalView .festaSlide .slick-dots li:first-child button {margin-left: 0;} .festivalView .festaSlide .slick-dots li.slick-active button {background-color: transparent;} .festivalView .viewCon .con {padding: 70px 6% 0;} .festivalView .viewCon .con h4.title {padding-bottom: 20px; font-size: 26px; font-weight: 400;} .festivalView .viewCon .con p {color: #434343; font-size: 15px; line-height: 24px; font-weight: 300; word-break:keep-all; word-wrap: break-word;} .festivalView .viewCon .conItems {padding-top: 38px; padding-bottom:68px;} .festivalView .viewCon .conItems ul {font-size: 0;} .festivalView .viewCon .conItems ul li {display: inline;} .festivalView .viewCon .conItems ul li a {display: inline-block; margin-left: 24px; color: #2a2a2a; font-size: 16px; font-weight: 300;} .festivalView .viewCon .conItems ul li:first-child a {margin-left: 0;} .festivalView .viewCon .conItems ul li a span {display: block; width: 86px; height: 86px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 50%; background-repeat: no-repeat; background-position: 50% 50%;} .festivalView .viewCon .conItems ul li.item1 a span {background-image: url(../images/content/icon_homepage.png);} .festivalView .viewCon .conItems ul li.item2 a span {background-image: url(../images/content/icon_movie.png);} .festivalView .viewCon .conItems ul li.item3 a span {background-image: url(../images/content/icon_audio_lg.png);} .festivalView .viewCon .infoMap {position: relative; padding-right: 50%; border: 1px solid #e5e5e5;} .viewCon .infoMap .info {padding:37px 20px 0 40px; text-align: left; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .viewCon .infoMap .info h4 {margin-bottom: 30px; color: #4a5191; font-size: 22px; font-weight: 400;} .viewCon .infoMap .info > ul > li {position: relative; min-height:18px; margin-top: 9px; padding-left: 88px; font-size: 15px; font-weight: 300; line-height: 1.2; word-break:break-all;} .viewCon .infoMap .info > ul > li:first-child {margin-top: 0;} .viewCon .infoMap .info ul li .label {display: inline-block; position: absolute; top: 0; left: 0; width: 80px; padding-left: 8px; background:url(../images/sub/bu_2p.png) 0 7px no-repeat;} .viewCon .infoMap .info ul li ul li {margin-top: 9px;} .viewCon .infoMap .info ul li ul li:first-child {margin-top: 0;} .viewCon .infoMap .mapWrap {position: absolute; top: 0; right: 0; height: 100%; width: 50%; border-left: 1px solid #e5e5e5; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .viewCon .infoMap .mapWrap #map {width: 100%; height: 100%;} .viewCon .infoMap .mapWrap .mapItems {position: absolute; top: 0; right: 0; font-size: 0; z-index: 2;} .viewCon .infoMap .mapWrap .mapItems > li {display: inline-block; width: 96px; height: 37px; border-left: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; background-color: #fff; line-height: 37px;} .viewCon .infoMap .mapWrap .mapItems > li > a {display: block; padding-left: 20px; color: #2a2a2a; font-size: 13px; font-weight: 300;} .viewCon .infoMap .mapWrap .mapItems li .btnLegend {background-image: url(../images/content/btn_toltip.png); background-position: 12px 50%; background-repeat: no-repeat;} .viewCon .infoMap .mapWrap .mapItems li .btnSize {background-image: url(../images/content/icon_resize.png); background-position: 12px 49%; background-repeat: no-repeat;} .popLegend {display: none; position: absolute; top: 30px; left:50%; max-width: 341px; width: 100%; background-color: #fff; text-align: left; z-index: 4; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);} .popLegend ul {padding:25px 27px 20px; font-size: 0;} .popLegend ul li {display: inline-block; width: 50%; margin-top: 12px; padding-left: 38px; background-repeat: no-repeat; background-position: 0 50%; background-size: 30px; color: #0b0b0b; font-size: 15px; line-height: 30px; font-weight: 300; letter-spacing: -1px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .popLegend ul li:first-child, .popLegend ul li:first-child+li {margin-top: 0;} .popLegend ul li.i1 {background-image:url(../images/content/icon_map1_lg.png);} .popLegend ul li.i2 {background-image:url(../images/content/icon_map6_lg.png);} .popLegend ul li.i3 {background-image:url(../images/content/icon_map2_lg.png);} .popLegend ul li.i4 {background-image:url(../images/content/icon_map7_lg.png);} .popLegend ul li.i5 {background-image:url(../images/content/icon_map3_lg.png);} .popLegend ul li.i6 {background-image:url(../images/content/icon_map8_lg.png);} .popLegend ul li.i7 {background-image:url(../images/content/icon_map4_lg.png);} .popLegend ul li.i8 {background-image:url(../images/content/icon_map9_lg.png);} .popLegend ul li.i9 {background-image:url(../images/content/icon_map5_lg.png);} .popLegend ul li.i10 {background-image:url(../images/content/icon_map10_lg.png);} .popLegend .popClose {display: block; padding:11px 0; border-top: 1px solid #dedede; color: #656565; font-size: 15px; text-align: right;} .popLegend .popClose span {display: inline-block; padding-left: 20px; padding-right: 15px; background:url(../images/content/icon_close_lg.png) 0 51% no-repeat; background-size: 12px auto; color: #656565; font-size: 15px;} .mapWrap.active:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 3;} .mapWrap.active .popLegend {display: block;} .festivalWrap .festivalBt {position: relative; padding-top: 74px; padding-bottom: 90px; border-bottom: 1px solid #e5e5e5;} .festivalWrap .festivalBt h4.tit {padding-bottom: 40px; color: #29161c; font-size: 26px; font-weight: 400;} .festivalWrap .festivalBt .btnMore {overflow: hidden; display: block; position: absolute; top:84px; right: 0; border: 1px solid #e5e5e5; width: 28px; height: 25px; background:url(../images/board/icon_plus.png) 50% 50% no-repeat; text-indent: -999px;} .festivalWrap .festivalBt .galleryList > ul > li {margin-bottom: 0;} .galleryList a p.subject {padding:17px 17px 0 ;/*border-left: 1px solid #dadada; border-right: 1px solid #dadada;*/ color: #393939; font-size: 14px; text-align: left;} .galleryList a p.subject span {overflow: hidden; display: block; padding-bottom: 10px; border-bottom: 1px solid #dadada; white-space: nowrap; text-overflow: ellipsis;} .festivalWrap .btnHome {display: block; width: 235px; height: 58px; margin: 40px auto 0; padding-left: 35px; background:#373e7a url(../images/content/icon_list.png) 58px 50% no-repeat;color: #fff; font-size: 17px; font-weight: 300; line-height: 58px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} @media all and (max-width:960px) { .festivalView .festaSlide .slide .slick-slide {height:auto;} .festivalView .festaSlide .slide .slick-slide img {position: static; top: auto; left: auto; width:auto; margin:0 auto; -webkit-transform:none; -moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;} .festivalWrap .conViewTit {padding-top: 30px; padding-bottom: 30px;} .festivalView .viewCon .con {padding: 25px 2% 0;} .festivalView .viewCon .con p {text-align: justify;} .festivalView .viewCon .infoMap {padding-right: 0;} .viewCon .infoMap .info {min-height: auto; padding: 37px 20px 37px 40px; border-bottom: 1px solid #e5e5e5;} .viewCon .infoMap .mapWrap {position: relative; top: auto; right: auto; width: 100%; height: 55vw; border-left: none;} .popLegend {top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;} .festivalWrap .festivalBt {padding-top: 35px; padding-bottom: 0; border-bottom: none;} .festivalWrap .festivalBt .btnMore {top: 38px;} .festivalWrap .festivalBt .galleryList > ul > li {width: 32.3333%;} .festivalWrap .galleryList > ul > li:first-child+li+li, .festivalWrap .galleryList > ul > li:first-child+li+li+li {display: none;} } @media all and (max-width: 767px) { .festivalWrap .conViewTit {padding-bottom: 0;} .conViewTit h3.tit2 {padding-top: 18px; font-size: 18px;} .conViewTit .terms {padding-bottom: 18px; font-size: 12px;} .festivalView .festaVideo {margin-bottom: 24px;} .festivalView .festaSlide .pager button {width: 10vw; height: 11vw; background-size: 2.5vw auto;} .festivalView .festaSlide .slick-dots {position: relative; bottom: auto; left: auto; padding-top: 12px;} .festivalView .festaSlide .slick-dots li {padding-top: 0;} .festivalView .festaSlide .slick-dots li button {width: 10px; height: 10px; margin-left: 6px; border: none; background-color: #939393;} .festivalView .festaSlide .slick-dots li.slick-active button {border: 1px solid #939393;} .festivalView .viewCon .con h4.title {font-size: 18px; line-height: 1.3;} .festivalView .viewCon .con p {font-size: 14px; line-height: 1.4;} .festivalView .viewCon .conItems {padding: 25px 0;} .festivalView .viewCon .conItems ul li a span {width: 58px; height: 58px; margin-bottom: 8px; background-size:29px auto;} .festivalView .viewCon .conItems ul li a {font-size: 14px;} .festivalView .viewCon .infoMap .info {background-color: #fafafa;} .festivalView .viewCon .infoMap .mapWrap {padding-bottom:0;} .viewCon .infoMap .info {padding: 23px 4.5%;} .viewCon .infoMap .info h4.type2 {margin-bottom: 15px; font-size: 15px;} .viewCon .infoMap .info h4 {margin-bottom: 15px; color: #000; font-size: 15px;} .viewCon .infoMap .info > ul > li {min-height: 14px; margin-top: 7px; padding-left: 68px; font-size: 12px;} .viewCon .infoMap .info ul li .label {width: 68px;} .viewCon .infoMap .mapWrap {height: 71vw; padding-bottom: 38px;} .viewCon .infoMap .mapWrap .mapItems {top: auto; bottom: 0; width: 100%; border-top: 1px solid #cfcfcf;} .viewCon .infoMap .mapWrap .mapItems > li {display: block; float: left; width: 50%; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .viewCon .infoMap .mapWrap .mapItems > li:first-child {border-right: 1px solid #cfcfcf;} .viewCon .infoMap .mapWrap .mapItems li .btnLegend {background-image: url(../images/sub/icon_tooltip_lg.png); background-size:23px auto;} .viewCon .infoMap .mapWrap .mapItems li .btnSize {background-image: url(../images/content/icon_resize_lg.png); background-size:20px auto;} .popLegend {max-width: none; width: 90%;} .popLegend ul {padding: 18px 18px 10px;} .popLegend ul li {margin-top: 7px; background-size: 25px auto; font-size: 12px; line-height: 25px;} .popLegend .popClose span {font-size: 13px;} .festivalWrap .festivalBt h4.tit {padding-bottom: 20px; padding-left: 3px; font-size: 17px; text-align: left;} } @media all and (max-width: 640px) { .festivalWrap .festivalBt .galleryList > ul > li {width: 49%;} .festivalWrap .galleryList > ul > li:first-child+li+li+li+li {display: none;} } /* 관광새소식 - 축제전체일정 */ .festivalWrap .festaTit {padding-top: 48px; padding-bottom: 23px; font-size: 30px; font-weight: 500;} .festivalWrap .schedule {padding:0 5%; padding-top: 24px;} .festivalWrap .schedule .top {margin-bottom: 42px;} .festivalWrap .schedule .top li {margin-top: 8px; padding-left: 10px; background:url(../images/common/bu_2p.png) 0 6px no-repeat; font-size: 15px; font-weight: 300; text-align: left;} .festivalWrap .schedule table {width: 100%;} .festivalWrap .schedule table th, .festivalWrap .schedule table td:first-child, .festivalWrap .schedule table td:first-child+td {background-color: #fafafa;} .festivalWrap .schedule table th, .festivalWrap .schedule table td {padding:17px 15px; border: 1px solid #dcdcdc; font-size: 15px; font-weight: 300;} .festivalWrap .schedule table td.left {text-align: left;} .festivalWrap .schedule table td p.type1 {display: inline-block; padding-top:3px; padding-bottom: 2px; padding-left: 25px; background:url(../images/content/icon_medal.png) 0 0 no-repeat; color: #e5480a;} .festivalWrap .schedule table td p.type2 {display: inline-block; padding-top: 4px; padding-left: 25px; background:url(../images/content/icon_medal.png) 0 0 no-repeat; color: #2f59ad;} .festivalWrap .schedule table td p.type3 {color: #087249;} .festivalWrap .schedule p.basicType2 {margin-top: 15px; padding-left: 4px; text-align: left; font-weight: 300;} @media all and (max-width:960px) { .festivalWrap .schedule {padding:20px 0 0;} .festivalWrap .schedule table th:first-child {width: 12%;} .festivalWrap .schedule table th:first-child+th {width: 12%;} .festivalWrap .schedule table th:first-child+th+th+th {width: 20%;} } @media all and (max-width: 767px) { .festivalWrap .festaTit {padding-top: 30px; padding-bottom: 18px; font-size: 17px;} .festivalWrap .schedule .top {margin-bottom: 25px; padding:0 2%;} .festivalWrap .schedule .top li {font-size: 12px;} .festivalWrap .schedule .top li:first-child {margin-top: 0;} .festivalWrap .schedule .tblDrag table {width: 640px;} .festivalWrap .schedule table th, .festivalWrap .schedule table td {padding: 10px; font-size: 12px; vertical-align:middle;} } /* 관광새소식 - 콘텐츠창고홈 */ .latestMain {padding-bottom: 75px;} .changgoTit {font-size: 28px; font-weight: 500;} .changgoStit {color: #606060; font-size: 17px; font-weight: 300; line-height: 1.4;} .latestMain .btnMore {overflow: hidden; display: block; position: absolute; top: 0; right: 0; border: 1px solid #e5e5e5; width: 28px; height: 25px; background:url(../images/board/icon_plus.png) 50% 50% no-repeat; text-indent: -999px;} .latestGroup {padding: 43px 30px 48px;} .latestGroup .tabTit {text-align: left;} .latestGroup .tabTit h4.tit {float: left; margin-right: 20px; padding-top: 5px; padding-left: 5px; color: #29161c; font-size: 20px; font-weight: 500;} .latestGroup .tabTit ul {display: inline-block; float: left;} .latestGroup .latestItem {position: relative; width: 48%;} .latestGroup .left {float: left;} .latestGroup .right {float: right;} .latestGroup .latestItem .tabTit {padding-bottom: 27px;} .latestItem .listType table {width: 100%; min-height:185px;} .latestItem .listType td {padding:10px 0; border-bottom: 1px solid #e6e7e2;} .latestItem .listType .subject {width: 73%; padding-left: 6px; color: #000; font-size: 15px; font-weight: 300; text-align: left;} .latestItem .listType .subject a {display: block; max-width: 350px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .latestItem .listType .subject a:hover, .latestItem .listType .subject a:focus {text-decoration: underline;} .latestItem .listType .subject a span {display: inline-block; margin-left: 6px; color: #d7732a; font-size: 14px; font-weight: 400;} .latestItem .listType .subject a .front { display:inline-block; margin-right:5px; color:#3c56ab; } .latestItem .listType .writer {width: 9%; padding:0; color: #555; font-size: 14px; text-align: left;} .latestItem .listType .writer .name {position: relative; color: #555; font-size: 14px;} .latestItem .listType .writer .name span {display: inline-block; position: absolute; top: 0; left: 14px; color: #888; letter-spacing:-3px; font-size: 29px; font-weight: 100; height: 100%;} .latestItem .listType .date {width: 18%; color: #747474; font-size: 14px;} .latestMain .btnWriting {margin-top:0;} .latestMain .latestGall {position: relative; margin-bottom: 56px; padding:0 30px;} .latestGall .tabTit {padding-bottom: 22px; text-align: left;} .latestGall .tabTit h4.tit {float: left; margin-right: 20px; padding-top: 5px; padding-left: 5px; color: #29161c; font-size: 20px; font-weight: 500;} .latestGall .tabTit ul {display: inline-block; float: left;} .latestGall .gallType > ul {font-size: 0; text-align: left;} .latestGall .gallType > ul > li {display: inline-block; width: 24.25%; margin-left:1%; text-align: center;} .latestGall .gallType > ul > li:first-child {margin-left: 0;} .latestGall .gallType ul li a {display: block; position: relative; width: 251px; border: 1px solid #dadada; } .latestGall .gallType ul li a .boardIcon {overflow: hidden;} .latestGall .gallType ul li a img {width: 100%; height: 121px;} .latestGall .gallType .info {padding-bottom: 15px; border-top: none; font-size: 15px;} .latestGall .gallType .info .subject {overflow: hidden; padding: 16px 10px 9px; color: #393939; white-space: nowrap; text-overflow: ellipsis;} .latestGall .gallType .info .writer {display: inline-block; padding-right: 31px; color: #797979;} .latestGall .gallType .info .writer .name {position: relative; color: #555; font-size: 14px;} .latestGall .gallType .info .writer .name span {display: inline-block; position: absolute; top: 0; left: 14px; height: 100%; margin-top: -3px; color: #888; letter-spacing:-4px; font-size: 34px; font-weight: 100;} .latestGall .gallType .info .date {display: inline-block; padding-left: 8px; border-left: 1px solid #d3d3d3; color: #797979;} .latestGall .gallType ul li a:hover .subject, .latestGall .gallType ul li a:focus .subject {text-decoration: underline;} .latestGall .gallType ul li a:hover span img, .latestGall .gallType ul li a:focus span img {-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);-webkit-transition: ease-in 0.4s;-o-transition: ease-in 0.4s;-moz-transition: ease-in 0.4s;transition: ease-in 0.4s;} .latestGall .btnMore {right: 30px;} @media all and (max-width:960px) { .latestMain {padding:0 3% 30px;} .latestGroup {margin-bottom: 15px; padding: 25px 0;} .latestItem .listType .writer, .latestItem .listType .date {display: none;} .latestItem .listType .subject {width: 100%;} .latestMain .latestGall {margin-bottom: 35px; padding: 0;} .latestGall .gallType ul li a {width: 100%;} .latestGall .gallType ul li a .boardIcon {padding-top: 51.4%;} .latestGall .gallType ul li a img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .latestGall .btnMore {right: 0;} .btnWriting {width: 205px; height: 49px; margin:30px auto 0; padding-top: 0; background-position: 20% 50%; font-size: 14px; line-height: 48px;} } @media all and (max-width: 767px) { .changgoTit {font-size: 18px;} .changgoStit {font-size: 13px; line-height: 1.4;} .latestGroup {margin-bottom: 0; padding:25px 0 0;} .latestGroup .left {float:none;} .latestGroup .latestItem {width: 100%;} .latestItem .listType td {padding:5px 10px; border-bottom: none;} .latestItem .listType .subject a {max-width:480px; padding-left: 10px; background:url(../images/common/bu_2p.png) 0 6px no-repeat;} .latestGroup .latestItem .tabTit {padding-bottom: 12px;} .latestGroup .tabTit h4.tit {font-size: 17px;} .latestItem .listType table {min-height:auto; margin-bottom: 20px;} .latestItem .listType .subject {font-size: 14px;} .latestMain .latestGall {margin-bottom: 30px;} .latestGall .tabTit {padding-bottom: 12px;} .latestGall .tabTit h4.tit {font-size: 17px;} .latestGall .gallType > ul > li {float:none; width: 49%; margin-bottom: 7px;} .latestGall .gallType > ul > li:first-child+li+li {margin-left: 0;} .latestGall .gallType .info .subject {padding: 14px 12px 6px;font-size: 12px;} .latestGall .gallType .info .writer .name {font-size: 12px;} .latestGall .gallType .info .writer .name span {font-size: 28px;} .latestGall .gallType .info .date {font-size: 12px;} .latestGall .gallType ul li a:hover span img, .latestGall .gallType ul li a:focus span img {-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none; -webkit-transition:none; -o-transition:none; -moz-transition:none; transition:none;} } @media all and (max-width: 580px) { .latestItem .listType .subject a {max-width:280px;} } .boardWrap {padding-bottom: 55px;} .boardHead {padding-top: 13px; padding-bottom: 42px; border-bottom: 3px solid #4e4e4e;} .boardHead2 {padding-top: 50px; padding-bottom: 40px; border-bottom: 2px solid #4e4e4e;} .boardHead h3.tit, .boardHead2 h3.tit {padding-bottom: 18px; font-size: 30px; font-weight: 500; line-height: 1.5;} .boardHead p.sTit, .boardHead2 p.sTit {color: #29161c; font-size: 17px; font-weight: 300; line-height: 1.5;} .boardHead .lineBreak, .boardHead2 .lineBreak {display: block;} .boardBody {padding:0 13px;} .boardItems {position: relative; padding-top: 38px; padding-bottom: 25px;} .boardInfo .selectBox { position:relative; width:114px; border:1px solid #cfcfcf; text-align:left; } .boardInfo .selectBox select { width:100%; font-size:14px; } .boardInfo .customSelect { width:100%; height:100%; font-size:14px; color:#555453; } .boardInfo .customSelectInner { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 30px 0 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .boardInfo .customSelectInner:after { content:url(../images/board/btn_boardselect_on.gif); position:absolute; top:0; right:10px; } .boardInfo .customSelectOpen .customSelectInner:after { content:url(../images/board/btn_boardselect_off.gif); position:absolute; top:0; right:10px; } .boardInfo .boardSearchText { width:233px; border:1px solid #cfcfcf; } .boardSearchText input.text { width:188px; height:100%; border:0; font-size:14px; text-indent:17px; vertical-align:top; } .boardSearchText input.btn { width:43px; height:100%; background:url(../images/board/btn_board_search.gif) center no-repeat; border:0 none; vertical-align:top; text-indent:-9999px; } .btnConRule {display: inline-block; position: absolute; top: 38px; left: 0; padding-right: 27px; background-image:url(../images/board/icon_question.png); background-position: 98% 50%; background-repeat: no-repeat; font-size: 15px; font-weight: 300;} .boardItems .searchBox {position: absolute; top: 27px; right: 0;} .boardItems .searchBox .text {width: 240px; height: 45px; padding-left: 15px; padding-right: 58px; border: 1px solid #dbdbdb; font-size: 14px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .boardItems .searchBox .btn {overflow: hidden; position: absolute; top: 0; right: 0; width: 48px; height: 100%; border: 1px solid #dbdbdb; background: #fff url(../images/board/icon_search.png) 50% 50% no-repeat; text-indent: -999px;} .boardFooter {position: relative; padding-top: 53px;} .boardFooter p.count {position: absolute; top: 58px; left: 13px; padding-left: 10px; background:url(../images/board/bu_2p.png) 0 7px no-repeat; color: #393939; font-size: 15px; text-align: left;} .boardFooter p.count span {color: #d7430f;} .conRuleWrap {display: none; position: absolute; top:80px; left: -13px; max-width:595px; width: 100%; padding:20px 25px; border: 1px solid #9e9e9e; background-color: #fff; z-index: 5; -webkit-box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.12);box-shadow: 2px 3px 4px 0px rgba(0,0,0,0.12); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .conRuleWrap.active {display: block;} .conRuleWrap:before {content:''; position: absolute; top: -11px; left: 0; width: 100%; height: 11px; background:url(../images/board/arrow_pop_up.png) 41% 50% no-repeat;} .conRuleWrap ul li {padding-left: 20px; background-repeat: no-repeat; background-position: 0 3px; color: #4f4f4f; font-size: 13px; font-weight: 300; text-align: left; line-height: 20px; letter-spacing:-1px; letter-spacing:-0.03em;} .conRuleWrap ul li.r1 {background-image: url(../images/board/icon_use1.png);} .conRuleWrap ul li.r2 {background-image: url(../images/board/icon_use2.png);} .conRuleWrap ul li.r3 {background-image: url(../images/board/icon_use3.png);} .conRuleWrap .close {overflow: hidden; display: block; position: absolute; bottom: 10px; right: 10px; width: 24px; height: 24px; background:url(../images/board/btn_close.png) 50% 50% no-repeat; text-indent:-999px;} .warehouseTab {padding-top: 35px;} .warehouseTab .btnToggleMo {display: none;} .contentwarehouse .left {float:left; padding-top: 12px;} .contentwarehouse .btnConRule {float:left; position: relative; top: auto; left: auto;} .contentwarehouse .tabType1 {float:left; margin-left: 25px;} .contentwarehouse .searchItems {float:right;} .contentwarehouse .right {float:right;} .contentwarehouse .selectBox {float:left; width: 173px; height: 45px; margin-right: 4px; vertical-align: top;} .contentwarehouse .selectBox select {width: 100%; height: 100%;} .contentwarehouse .selectBox .customSelect {width: 100%; height: 100%; border: 1px solid #dbdbdb; color: #5f5e5e; font-size: 14px; font-weight: 300; line-height: 43px; text-align: left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .contentwarehouse .selectBox .customSelect .customSelectInner {width: 100% !important; padding:0 14px; background-image:url(../images/common/icon_arrow.png); background-position: 90% center; background-repeat: no-repeat; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .contentwarehouse .selectBox .customSelect.customSelectOpen .customSelectInner {background-image: url(../images/common/icon_arrow_up.png);} .contentwarehouse .searchBox {float:left; position: relative; top: auto; right: auto;} .galleryList.top {padding-bottom: 10px; margin-bottom: 48px; border-bottom:1px solid #e5e5e5;} .recommend {display: inline-block; width: 35px; height: 18px; margin-right: 5px; background-color: #fb610d; color: #fff; font-size: 13px; text-align: center; line-height: 18px;} @media all and (max-width:960px) { .boardWrap {padding:0 3% 55px;} .boardHead {padding-top: 30px; padding-bottom: 24px; border-bottom: 1px solid #4e4e4e;} .boardHead2 {border-bottom: 1px solid #4e4e4e;} .boardInfo .selectBox {border-right: none;} .boardBody {padding:0} .btnConRule {position: relative; top: auto; left: auto; margin-bottom: 14px;} .boardItems {padding-top: 30px; padding-bottom: 30px;} .boardItems .searchBox {position: relative; top: auto; right: auto; margin-top: 14px;} .boardItems .searchBox .text {width: 70%;} .boardItems .searchBox .btn {right: 15%;} .conRuleWrap {left: 50%; top: 60px; -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);} .conRuleWrap:before {background-position: 50%;} .conRuleWrap ul li {background-size:16px auto; line-height: 1.4;} .contentwarehouse .left {float:none; padding-top: 0;} .contentwarehouse .btnConRule {float:none;} .contentwarehouse .tabType1 {float:none; margin-left: 0;} .contentwarehouse .right {display: inline-block; float:none; margin-top: 10px;} .contentwarehouse .searchBox {margin-top: 0;} .contentwarehouse .searchBox .text {width: 100%;} .contentwarehouse .searchBox .btn {right: 0;} .warehouseTab {padding-top: 0;} .warehouseTab ul li {display: block; padding: 0;} .warehouseTab .btnToggleMo {display: block; padding:13px 0; padding-left: 17px; border: 1px solid #dcdcdc; border-top: none; background-image: url(../images/content/icon_listdown_lg.png); background-position: 95% 50%; background-repeat: no-repeat; background-size:16px auto; text-align: left; font-size: 15px;} .warehouseTab .btnToggleMo.active {background-image: url(../images/content/icon_listup_lg.png);} .warehouseTab ul {display: none; background-color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box} .warehouseTab ul:before {content: none;} .warehouseTab ul li {display: block; border: 1px solid #dcdcdc; border-top: none;} .warehouseTab ul li a {padding:10px 0; padding-left: 24px; border-bottom: none; color: #3a3a3a; font-size: 14px; text-align: left;} .warehouseTab ul li.active a, .warehouseTab ul li a:hover, .warehouseTab ul li a:focus {border-bottom: none; color: #4e6bc8;} .galleryList.top {margin-bottom: 24px;} .galleryList.top > ul > li:last-child {display: none;} } @media all and (max-width: 767px) { .boardWrap {padding:0 3% 35px;} .boardHead {border-bottom: none;} .boardHead2 {padding-top: 30px; padding-bottom: 24px; border-bottom: none;} .boardHead h3.tit, .boardHead2 h3.tit {padding-bottom: 14px; font-size: 18px;} .boardHead p.sTit, .boardHead2 p.sTit {font-size: 12px;} .boardItems {padding-top: 0; padding-bottom: 14px; line-height: 16px;} .btnConRule {background-image: url(../images/board/icon_question_lg.png); background-size:18px auto; font-size: 12px; line-height: 18px;} .conRuleWrap {top: 64px; max-width:none; width: 100%;} .conRuleWrap ul li {margin-bottom: 4px;} .conRuleWrap ul li.r1 {background-image: url(../images/board/icon_use1_lg.png);} .conRuleWrap ul li.r2 {background-image: url(../images/board/icon_use2_lg.png);} .conRuleWrap ul li.r3 {background-image: url(../images/board/icon_use3_lg.png);} .conRuleWrap:before {bottom: auto; top: -11px;} .boardItems .searchBox {margin-top: 5px;} .boardItems .searchBox .text {width: 80%;} .boardItems .searchBox .btn {right: 10%;} .boardInfo .selectBox {width: 50%;} .boardInfo .selectBox ~ .selectBox {border-right: 1px solid #cfcfcf;} .boardInfo .boardSearchText {position: relative; width: 100%; padding-right: 45px; border-top: none;} .boardSearchText input.text {width: 100%; padding:0 10px;} .boardSearchText input.btn {position: absolute; top: 0; right: 0;} .boardFooter {padding-top: 35px;} .boardFooter p.count {display: none;} .contentwarehouse {padding-top: 30px;} .contentwarehouse .right {display: block;} .contentwarehouse .selectBox {width: 40%; margin-right: 0;} .contentwarehouse .searchBox {width: 60%; margin-top: 0;} .contentwarehouse .selectBox .customSelect {border-right: none;} .contentwarehouse .searchBox .text {width: 100%;} .contentwarehouse .searchBox .btn {right: 0;} .recommend {width: 30px; height: 16px; font-size: 11px; line-height: 16px;} } /* 휴양&MICE */ .miceWrap {padding-bottom: 30px;} .miceWrap h3.miceTit {padding-top: 48px; padding-bottom: 22px; font-size: 28px; font-weight: 400;} .miceWrap h3.miceTit02 {padding-top:0px; padding-bottom: 22px; font-size: 32px; font-weight: 400;} .miceWrap .miceStit {padding-bottom: 40px; color: #565656; font-size: 16px; line-height: 24px; font-weight: 300;} .miceWrap .miceStit .lineBreak {display: block;} .miceWrap .miceTxt {padding-top: 10px; text-align: left;} .miceWrap .miceTxt h5.basicType1 {margin-top: 15px;} .miceWrap .miceTxt dl.basicType2 dt strong {display: inline-block; margin-left: 10px; color: #2a57be; font-weight: 500;} /* 휴양&MICE 게시판 */ .miceTop {padding-top: 54px; padding-bottom: 41px; text-align: center;} .miceTop .topTit {margin-bottom: 17px; font-size: 28px;} .miceTop p {margin-bottom: 29px; color: #414141; font-size: 16px; font-weight: 300; line-height: 24px;} .miceTop p .lineBreak {display: block;} .miceTop .btn {display: inline-block; width: 285px; height: 58px; padding-top: 18px; padding-left: 44px; border: 1px solid #c8c7c7; background:url(../images/content/icon_pencil.png) 37px 46% no-repeat; font-size: 18px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .miceTop .btn:hover, .miceTop .btn:focus {text-decoration: underline;} .boardInfo.type2 ul {font-size: 0;} .boardInfo.type2 .boardSearchText {border-left: none;} @media all and (max-width: 960px) { .miceWrap {padding:0 4% 30px;} .boardInfo.type2 .selectBox {border: 1px solid #cfcfcf;} .miceTop p {font-size: 14px; line-height: 1.5;} } @media all and (max-width: 767px) { .miceWrap h3.miceTit {padding-top: 30px; padding-bottom: 10px; font-size: 20px;} .miceWrap .miceStit {padding-bottom: 10px; font-size: 12px; line-height: 1.4;} .miceWrap .miceTxt #iconDrag {padding-bottom: 0;} .miceTop {padding:30px 0 10px;} .miceTop .topTit {margin-bottom: 14px; font-size: 18px;} .miceTop p {margin-bottom: 18px; font-size: 13px;} .miceTop p .lineBreak {display: inline;} .miceTop .btn {width: 205px; height: 49px; padding-top: 0; background-size:18px auto; background-position: 30px 46%; line-height: 47px; font-size: 14px;} .boardInfo.type2 .selectBox {width: 35%;} .boardInfo.type2 .boardSearchText {width: 65%; border: 1px solid #cfcfcf; border-left: none;} } /* 이벤트플랫폼 - 홈 */ .eventPlatform {padding-top: 40px; padding-bottom: 65px; padding-right: 35px; padding-left: 37px;} .eventPlatform > .slideWrap {float: left; width:50.33%; margin-bottom: 60px;} .eventPlatform .btnMore {position:absolute; top:0; right:0; width:27px; height:25px; background:url(../images/content/btn_eventhome_more.png) center no-repeat; border:1px solid #dcdcdc; text-indent:-9999px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .eventPlatform .pager button {overflow: hidden; display: inline-block; position: absolute; top: 50%; width: 62px; height: 66px; background-repeat: no-repeat; background-position: 50% 50%; text-indent:-999px;} .eventPlatform .pager .prev {left: 0; background-image: url(../images/content/icon_prev_event.png);} .eventPlatform .pager .next {right: 0; background-image: url(../images/content/icon_next_event.png);} .eventPlatform .ingEvent {position: relative; margin-bottom: 62px; padding-top: 5px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .eventPlatform .ingEvent h3.eventTit {margin-bottom: 28px; color: #29161c; font-size: 20px; font-weight: 500; text-align: left;} .eventPlatform .ingEvent .slide {height: 357px;} .eventPlatform .ingEvent .slide {position: relative;} .eventPlatform .ingEvent .slide .slick-list, .eventPlatform .ingEvent .slide .slick-track, .eventPlatform .ingEvent .slide li img {width: 100%; height: 100%;} .eventPlatform .ingEvent .slide li a {display: block; height: 100%;} .eventPlatform .ingEvent .slick-dots {position: absolute; bottom: 18px; left: 0; width: 100%; font-size: 0; z-index: 3;} .eventPlatform .ingEvent .slick-dots li {display: inline;} .eventPlatform .ingEvent .slick-dots li button {overflow: hidden; display: inline-block; width: 10px; height: 10px; margin-left: 7px; border: 2px solid #fff; border-radius:50%; background-color: #fff; text-indent:-999px;} .eventPlatform .ingEvent .slick-dots li:first-child button {margin-left: 0;} .eventPlatform .ingEvent .slick-dots li.slick-active button {background-color: transparent;} .ingEvent .slideItems {position: absolute; top: 0; right: 0;} .ingEvent .slideItems li {display: inline-block; float: left; height: 27px; font-size: 14px;} .ingEvent .slideItems li.index {margin-right: 9px; line-height: 27px; letter-spacing: -1px; font-family: 'Dotum','돋움',sans-serif;} .ingEvent .slideItems li.stopPlay {overflow: hidden; display: inline-block; width: 29px; } .ingEvent .slideItems li.stopPlay button {display: inline-block; width: 100%; height: 27px; border: 1px solid #e5e5e5; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -999px;} .ingEvent .slideItems li.stopPlay .stop {background-image: url(../images/content/btn_stop.png);} .ingEvent .slideItems li.stopPlay .play {display: none; background-image: url(../images/content/btn_play.png);} .ingEvent .slideItems li.stopPlay.active .stop {display: none;} .ingEvent .slideItems li.stopPlay.active .play {display: block;} .ingEvent .slideItems li .btnMore {display: block; overflow: hidden; position: static; top: auto; right: auto; height: 100%; border: 1px solid #e5e5e5; border-left: none;} .eventPlatform .latestBoard h3.eventTit {margin-bottom: 16px; color: #29161c; font-size: 20px; font-weight: 400; text-align: left;} .eventPlatform .latestBoard {position: relative; float:none; width: 100%;} .eventPlatform .latestBoard table td a {max-width: 430px;} .eventPlatform .latestBoard table td.date {text-align: right;} .eventPlatform .galleryList {position: relative; float: right; width: 42.7%;} .eventPlatform .galleryList h3.eventTit {margin-bottom: 28px; color: #29161c; font-size: 20px; font-weight: 400; text-align: left;} .eventPlatform .galleryList > ul > li {width: 47%; margin: 0 1.5% 9px;} .eventPlatform .galleryList ul li a .boardIcon {height: 121px;} .eventPlatform .galleryList .workInfo {padding: 20px 17px 16px;} .eventPlatform .galleryList .workInfo .subject {padding-bottom: 4px; border-bottom: none; font-size: 15px;} .eventPlatform .galleryList .workInfo .work {color: #8e7065; font-size: 14px; line-height: 20px;} .eventPlatform .galleryList .btn {position:absolute; top:0; right:0; width:27px; height:25px; background:url(../images/content/btn_eventhome_more.png) center no-repeat; border:1px solid #dcdcdc; text-indent:-9999px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} @media all and (max-width: 960px) { .eventPlatform {padding-left: 3%; padding-right: 3%;} .eventPlatform > .slideWrap {float:none; width:100%; margin-bottom: 45px; padding:0;} .eventPlatform .ingEvent {float: none; width: 100%; margin-bottom: 40px;} .eventPlatform .ingEvent .slide {height: auto;} .eventPlatform .ingEvent .slide li a {position: relative; padding-top: 63.92%;} .eventPlatform .ingEvent .slide li a img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .eventPlatform .eventCal {float: none; width: 100%;} .eventPlatform .galleryList {float:none; width:100%;} .eventPlatform .galleryList > ul > li {width: 49%; margin:0 0.5% 9px;} .eventPlatform .galleryList ul li a .boardIcon {height: auto;} } @media all and (max-width: 767px) { .eventPlatform > .slideWrap {margin-bottom: 10px;} .eventPlatform .ingEvent h3.eventTit {margin-bottom: 16px; font-size: 17px; font-weight: 400;} .eventPlatform .ingEvent .pager button {width: 10vw; height: 11vw; background-color: #000; background-color: rgba(000,000,000,0.6); background-size:2.5vw auto;} .eventPlatform .ingEvent .pager .prev {background-image:url(../images/content/icon_prev_black.png);} .eventPlatform .ingEvent .pager .next {background-image:url(../images/content/icon_next_black.png);} .eventPlatform .ingEvent .slick-dots {position: relative; bottom: auto; left: auto; padding-top: 12px;} .eventPlatform .ingEvent .slick-dots li {padding-top: 0;} .eventPlatform .ingEvent .slick-dots li button {width: 10px; height: 10px; margin-left: 6px; border: none; background-color: #939393;} .eventPlatform .ingEvent .slick-dots li.slick-active button {border: 1px solid #939393;} .eventPlatform .eventCal .eventTit {margin-bottom: 16px; font-size: 17px; font-weight: 400;} .eventPlatform .latestBoard h3.eventTit {margin-bottom: 16px; font-size: 17px;} .eventPlatform .galleryList h3.eventTit {margin-bottom: 16px; font-size: 17px;} } @media all and (max-width: 520px) { .eventCal .calendarSlide .slide ul li {min-height:75px; padding-top: 17px; padding-left: 65px;} .eventCal .calendarSlide .slide ul li .subject {font-size: 14px;} .eventCal .calendarSlide .slide ul li .month {top: 15px; left: 13px;} .eventCal .calendarSlide .slide ul li .terms {font-weight: 12; font-weight: 300; letter-spacing: -0.04em;} .eventPlatform .latestBoard table td a {max-width:290px;} } /* 이벤트플랫폼 - 이벤트 */ .eventPlatform .eventTit2 {margin-bottom: 35px; color: #000; font-size: 28px; font-weight: 500;} .eventPlatform .eventTab {padding:0 35px;} .eventPlatform .eventTab .tabType4 {border-top: 1px solid #dadada; border-bottom: 1px solid #dadada;} .eventPlatform .eventTab .tabType4 li {padding:0 20px;} .eventPlatform .eventTab .tabType4 li:before {content: ''; position: absolute; top: 25px; left: 0; width: 1px; height: 16px; background-color: #d6d6d6;} .eventPlatform .eventTab .tabType4 li:first-child:before {content: none;} .eventPlatform .eventTab .tabType4 li a {padding: 21px 0; color: #0b0b0b; font-size: 18px;} .eventPlatform .eventTab .tabType4 li.active a, .eventPlatform .eventTab .tabType4 li a:hover, .eventPlatform .eventTab .tabType4 li a:focus {border-bottom: 2px solid #4e6bc8; color: #4e6bc8;} .eventTab ul li a {padding-top: 15px; padding-bottom: 17px;} .eventList {padding:47px 4% 0;} .eventList ul {font-size: 0; text-align: left;} .eventList ul li {display: inline-block; width: 32.3333%; margin:0 0.5%; margin-bottom: 23px; text-align: center;} .eventList ul li a {display: block; border: 1px solid #dcdcdc;} .eventList ul li a .thum {overflow: hidden; display: block; position: relative; width: 100%; padding-bottom: 66.8%;} .eventList ul li a .thum img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .eventList ul li a p {font-weight: 300;} .eventList ul li a .cate {padding-top: 23px; padding-bottom: 12px;} .eventList ul li a .cate span {display: inline-block; position: relative; padding:0 10px; border: 1px solid #f49948; color: #ce4d25; font-size: 13px; line-height: 21px;} .eventList ul li a .name {overflow: hidden; width: 100%; padding:0 20px; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .eventList ul li a .terms {padding-top: 8px; padding-bottom: 22px; color: #4e6bc8; font-size: 13px;} .eventList ul li a .terms .dday {display: inline-block; padding-left: 7px; color: #f1447a;} .eventList ul li a .more {padding:17px 0; border-top: 1px solid #dcdcdc; color: #7c7c7c; font-size: 16px;} .eventList ul li a .show {padding:17px 0; border-top: 1px solid #dcdcdc; font-size: 16px; font-weight: 400;} .eventList ul li a:hover .cate span, .eventList ul li a:focus .cate span {background: #f49948;color: #fff; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;} .eventList ul li a:hover .more, .eventList ul li a:focus .more {text-decoration: underline;} .eventPlatform .pagination {padding-top: 35px;} .eventPlatform .searchWrap {margin-top:43px; padding:25px 0; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;} .eventPlatform .searchWrap ul {font-size: 0;} .eventPlatform .searchWrap ul li {display: inline-block; vertical-align: top;} .eventPlatform .searchWrap ul li.tit {padding-top: 14px; padding-right: 22px; color: #5e5e5e; font-size: 14px; font-weight: 300;} .eventPlatform .searchWrap .selectBox {display: inline-block; width: 113px; height: 43px; border: 1px solid #d4d4d4; color: #2a2a2a; font-size: 14px; text-align: left; font-weight: 300; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .eventPlatform .searchWrap .selectBox select {width: 100%; height: 100%;} .eventPlatform .searchWrap .selectBox .customSelect {width: 100%; height: 100%;} .eventPlatform .searchWrap .selectBox .customSelect .customSelectInner {width: 100% !important; padding-left: 14px; background-image:url(../images/board/btn_boardselect_on.gif); background-position: 89% 50%; background-repeat: no-repeat; line-height: 41px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .eventPlatform .searchWrap .selectBox .customSelectOpen .customSelectInner {background-image:url(../images/board/btn_boardselect_off.gif); } .eventPlatform .searchWrap ul li.txt {max-width: 372px; width: 100%;} .eventPlatform .searchWrap .searchBox {display: inline-block; position: relative; height: 43px; width: 100%;} .eventPlatform .searchWrap .searchBox:before {content: ''; position: absolute; top: 10px; right: 45px; width: 1px; height: 24px; background-color: #d4d4d4;} .eventPlatform .searchWrap .searchBox .txt {width: 100%; height: 100%; padding-left: 16px; padding-right: 55px; border: 1px solid #d4d4d4; border-left: none; color: #2a2a2a; font-size: 14px; font-weight: 300;} .eventPlatform .searchWrap .searchBox .btn {display: inline-block; position: absolute; top: 0; right: 0; width: 44px; height: 100%; border: none; background:url(../images/board/btn_board_search.gif) center no-repeat; text-indent: -999px; cursor: pointer;} @media all and (max-width: 767px) { .eventPlatform {padding:30px 3%;} .eventPlatform .eventTit2 {margin-bottom: 24px; font-size:20px;} .eventPlatform .eventTab {padding:0;} .eventPlatform .eventTab .tabType4 li:before {top: 17px;} .eventPlatform .eventTab .tabType4 li a {padding:15px 0; font-size: 15px;} .eventList {padding:22px 0 0;} .eventList ul li {width: 49%; margin-bottom: 7px;} .eventList ul li a .cate {padding-top: 18px; padding-bottom: 7px;} .eventList ul li a .cate span {font-size: 11px; line-height: 18px;} .eventList ul li a .name {padding: 0 10px; font-size: 12px;} .eventList ul li a .terms {padding-bottom: 14px; font-size: 11px;} .eventList ul li a .terms .dday {display: block;} .eventList ul li a .show {padding:11px 0; font-size: 11px;} .eventList ul li a .more {padding:11px 0; color: #656565;font-size: 11px;} .eventPlatform .pagination {padding-top: 10px;} .eventPlatform .searchWrap {margin-top: 0; padding: 25px 3%;border: none;} .eventPlatform .searchWrap ul li:first-child+li {width: 30%;} .eventPlatform .searchWrap .selectBox {width: 100%;} .eventPlatform .searchWrap ul li.tit {display: none;} .eventPlatform .searchWrap ul li.txt {width:70%; max-width:none;} } /* 이벤트플랫폼 - 상세 */ .boardView > .subject {padding-top: 50px; padding-bottom: 17px; color: #333; font-size: 24px;} .boardView > .subject2 {padding-bottom: 15px; color: #333; font-size: 24px;} .boardView .viewBody {padding:0 2%;} .viewBody .eventInfo ul {border-top: 2px solid #434040; border-bottom: 1px solid #e2e2e2;} .viewBody .eventInfo ul li {float: left; position: relative; padding:22px 25px; border-left: 1px solid #e2e2e2; color: #6c6c6c; font-size: 16px; font-weight: 300;} .viewBody .eventInfo ul li:first-child {border-left: none;} .viewBody .eventInfo ul li.terms {overflow: hidden; width: 58%; max-width: 698px; text-align: left; white-space: nowrap; text-overflow: ellipsis;} .boardView .viewBody .viewContent {padding: 35px 12px; border-bottom: none; font-size: 15px; text-align: left;} .boardView .viewBody .viewContent p.img + .txt {padding-top: 38px;} .boardView .viewBody .viewContent .txt {color: #0c0c0c; line-height: 22px; font-weight: 350;} .boardView .viewBody .viewContent a {display: inline-block; margin-top: 16px; padding-bottom: 2px; border-bottom: 1px solid #a3c1f4; color: #0073e9; font-weight: 350; word-break:break-all;} .boardView .viewBody .viewItems {padding:40px 27px 75px} .boardView .viewBody .viewContent .tblRow2 td a {margin: 0; padding: 0; border-bottom: none; font-weight: 300;} .btnEvent { padding:35px 0; } .btnEvent a { display:block; clear:both; width:315px; height:68px; margin:0 auto; padding-left:36px; padding-top:21px; background:#fafafa url(../images/content/icon_in02.png) 74px 50% no-repeat; border:1px solid #3d54b7; color:#001673; font-weight:400; font-size:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .viewContent .boardVideo {overflow: hidden; position: relative; height: 588px; margin-bottom: 12px;} .viewContent .boardVideo iframe, .viewContent .boardVideo video {position: absolute; top: 0; left: 0; min-width:100%; width: 100%; height: 100%;} @media all and (max-width: 960px) { .boardView .viewBody .viewContent a {border-bottom: none; text-decoration:underline;} .btnEvent { padding:30px 0; } .btnEvent a { width:205px; height:49px; padding-top:0; background-position:20% 50%; font-size:14px; line-height:48px; } .viewContent .boardVideo {height: auto; padding-top: 56.261%;} .viewBody .eventInfo ul li.terms {width: auto; max-width:none; } .viewBody .eventInfo ul li:first-child+li+li, .viewBody .eventInfo ul li.writer {display: none;} } @media all and (max-width: 767px) { .boardView > .subject {padding-top: 35px; font-size: 18px;} .viewBody .eventInfo ul {padding:17px 2%; font-size: 0; text-align: left;} .viewBody .eventInfo ul li {display: inline-block; float:none; padding:0; font-size: 14px;} .viewBody .eventInfo ul li:first-child {width: auto; margin-right: 4px; border-right: none;} .viewBody .eventInfo ul li.terms {border-left: none; white-space:normal; font-size: 13px; vertical-align:top;} .boardView .viewBody .viewContent {padding:20px 2% 0;} .boardView .viewBody .viewContent p.img + .txt {padding-top: 20px; padding-bottom: 20px; font-size: 14px; line-height: 1.5;} .boardView .viewBody .viewItems {padding: 30px 0;} } /* 이벤트 갤러리 */ .galleryBasic ul li.active a p.more .plus {background-image: url(../images/content/icon_more_on.png);} .galleryBasic ul li.active a {background-color: #efefef;} .galleryView {margin-top: 25px; padding-left: 3.5%; padding-right: 4%;} .galleryView h4.tit {margin-bottom: 35px; color: #000; font-size: 24px; font-weight: 400;} .galleryView .sliderView {position: relative;} .galleryView .sliderView li a {overflow: hidden; display: block; width: 100%; position: relative; padding-top: 59.865%;} .galleryView .sliderView li a img {display: block; position: absolute; top: 0; left: 0; width: 100%;} .galleryView .sliderView .pager a {overflow:hidden; display:inline-block; position: absolute; top: 50%; width: 84px; height: 89px; padding: 0; background-color: #000; background-color: rgba(000,000,000,0.5); background-repeat:no-repeat; background-position:center; text-indent:-999px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} .galleryView .sliderView .pager .prev {left: 0; background-image: url(../images/content/icon_prev_black.png);} .galleryView .sliderView .pager .next {right: 0; background-image: url(../images/content/icon_next_black.png);} .galleryView .sliderNav {margin-top: 30px;} .galleryView .sliderNav li {margin:0 0.5%;} .galleryView .sliderNav li a {overflow: hidden; display: block; position: relative; padding-top: 59%;} .galleryView .sliderNav li img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} @media screen and (max-width:767px) { .galleryBasic ul li.active a p.more .plus {background-image: url(../images/content/icon_more_on_lg.png); background-size:10px auto;} .galleryView h4.tit {margin-bottom: 18px; font-size: 17px;} .galleryView .sliderNav {margin-top: 18px;} .galleryView .sliderView .pager a {width: 10vw; height: 11vw; background-size: 2.5vw auto;} } /* 관광연계정보 - 문화행사일정 */ .postView .postTop .titBox .date2 {padding-bottom: 12px; color: #797979; font-size: 16px; font-weight: 300;} .culturalevent .top {position: relative; margin-bottom: 25px; padding-top: 62px; border-bottom: 1px solid #756d6a; text-align: left;} .culturalevent .top .city {display: inline-block; width: 166px; height: 53px; background-color: #756d6a; color: #fff; font-size: 22px; font-weight: 300; line-height: 53px; text-align: center; border-top-left-radius:13px; border-top-right-radius:13px;} .culturalevent .top a {display: block; position: absolute; bottom: 15px; right: 5px; color: #756d6a; font-size: 16px; font-weight: 300;} .culturalevent .culturalCon {border: 1px solid #dcdcdc; border-bottom: none; text-align: left;} .culturalevent .culturalCon ul li {padding:24px 32px; border-bottom: 1px solid #dcdcdc;} .culturalevent .culturalCon ul li .tit {padding-left: 12px; background:url(../images/content/bu_3p_maroon.png) 0 9px no-repeat; color: #632b06; font-size: 18px;} .culturalevent .culturalCon ul li .info {margin-top: 10px; padding-left: 12px; color: #424242; font-size: 16px; font-weight: 300;} .culturalevent .pageBtnList ul {margin: 45px 20px 0;} /* 관광연계정보 - 교통정보 */ .trafficWrap {padding: 0 3%; text-align: left;} .trafficWrap .trafficMain {padding-top: 47px;padding-bottom: 45px;} .trafficWrap .trafficMain p {color: #4e4e4e; line-height: 1.5; text-align: center; font-weight:300; font-size: 15px;} .trafficTab {margin-bottom: 40px; text-align: center;} .trafficTab ul {font-size: 0;} .trafficTab ul li {display: inline-block; position: relative; padding:0 17px;} .trafficTab ul li:before {content: ''; position: absolute; top: 2px; left: 0; width: 1px; height: 15px; background-color: #d6d6d6;} .trafficTab ul li:first-child:before {content: none;} .trafficTab ul li a {display: block; padding-left: 33px; background-position: 0 50%; background-repeat: no-repeat; color: #0b0b0b; font-size: 18px; font-weight: 400;} .trafficTab.bus ul li a {background-image: url(../images/content/icon_bus.png);} .trafficTab.airplane ul li a {background-image: url(../images/content/icon_airplane.png);} .trafficTab.train ul li a {background-image: url(../images/content/icon_train.png);} .trafficWrap a {color: #4e6bc8;} .trafficWrap a.iblank {display: inline-block; border-bottom: 1px solid #4e6bc8;} .trafficWrap .titBox {position: relative; margin-bottom: 20px; padding-top: 30px; padding-bottom: 15px; border-bottom: 1px solid #e4e4e4;} .trafficWrap .titBox .link {position: absolute; top: 10px; right: 0; border-left: 1px solid #dcdcdc; font-size: 0;} .trafficWrap .titBox .link li {display: inline-block;} .trafficWrap .titBox .link li a {display: block; width: 212px; height: 46px; padding-left: 28px; border: 1px solid #dcdcdc; border-left: none; background-image: url(../images/content/icon_ticket.png); background-position: 27px 48%; background-repeat: no-repeat; color: #041038; font-size: 15px; line-height: 44px; text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .trafficWrap .titBox .trafficTit {display: inline-block; padding-left: 18px; background-image:url(../images/content/bu_7p.png); background-position: 0 8px; background-repeat: no-repeat; color: #292929; font-size: 20px; font-weight: 400; vertical-align: middle;} .trafficWrap .titBox .btnTraffic {display: inline-block; width: 131px; height: 36px; margin-left: 16px; padding-left: 22px; border: 1px solid #dcdcdc; background: url(../images/content/icon_ticket.png) 12px 50% no-repeat; color: #292929; font-size: 15px; font-weight: 300; text-align: center; vertical-align: middle; line-height: 34px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .trafficWrap p.basicType2 {margin-bottom: 10px; font-weight: 300; text-align: right;} .trafficWrap ul.basicType2 li ul {padding-top: 10px; padding-left: 12px;} .trafficWrap .tblDrag {margin-bottom: 45px;} .trafficWrap thead th {background-color: #788097; color: #fff;} .trafficWrap tbody th {background-color: #e5e7ee; color: #788097; font-size: 16px;} .trafficWrap .conTbl .link {background-color: #f3f4f7;} .tblWide .conTbl th, .tblWide .conTbl td {padding:4px 2px; font-size: 12px;} .trafficWrap .tblWide {overflow-x: auto;} .trafficWrap .tblWide .conTbl thead tr:first-child th {padding:8px 2px; font-size: 13px;} .trafficWrap .tblWide .conTbl thead tr:first-child+tr+tr th {font-size: 11px;} .trafficWrap .tblWide table {min-width: 1045px;} .trafficWrap .conTbl td a.link {display: inline-block; padding-left: 47px; background:url(../images/content/icon_link.png) 0 0 no-repeat; color: #041038; font-size: 15px; text-align: left; font-weight: 400;} .trafficWrap .conTbl td a.link span {display: block; color: #59627c; font-size: 14px;} @media all and (max-width: 767px) { .trafficWrap .trafficMain {padding-top: 30px; padding-bottom: 0;} .trafficWrap .trafficMain p {font-size: 14px;} .trafficTab {margin-bottom: 22px;} .trafficTab ul li {padding: 0; width: 33.3333%; vertical-align: middle;} .trafficTab.bus ul li a {padding-left: 0; background: none; font-size: 15px;} .trafficTab.bus ul li a span {display: block;} .trafficTab.bus ul li.lineTwo:before {top: 9px;} .trafficWrap .titBox {margin-bottom: 5px; padding-bottom: 10px;} .trafficWrap .titBox .link {position: relative; top: auto; right: auto; margin-top: 10px;} .trafficWrap .titBox .link li {width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .trafficWrap .titBox .link li a {width: auto; padding-left: 22px; background-image: url(../images/content/icon_ticket_lg.png); background-position: 8% 50%; background-size:18px auto; font-size: 14px; letter-spacing: -1px;} .trafficWrap .titBox .trafficTit {padding-left: 14px; background-size: 5px auto; background-position: 0 7px;font-size: 16px; letter-spacing: -1px; letter-spacing: -0.04em;} .trafficWrap .titBox .btnTraffic {width: 118px; height: 31px; margin-left: 7px; font-size: 13px; line-height: 29px;} .trafficWrap p.basicType2 {margin-top: 18px; font-size: 12px;} .trafficWrap ul.basicType2 li {padding-bottom: 0;} .trafficWrap .tblDrag {margin-bottom: 25px;} .trafficWrap .conTbl colgroup {display: none;} .trafficWrap tbody th {font-size: 12px;} .trafficWrap .conTbl td a.link {font-size: 13px;} .trafficWrap .conTbl td a.link span {font-size: 12px;} .trafficWrap .tblDrag td.AlignLeft {width: 40%;} } /* 관광연계정보 - 교통정보 - 항공(운항요일) */ .dayList { min-width:160px; font-size:0; } .dayList li { display:inline-block; width:14.28571%; min-width:22px; } .dayList li .day { display:inline-block; width:22px; height:22px; line-height:22px; background-color:#caad77; color:#fff; font-size:14px; border-radius:50%; } .dayList li .day.sat { background-color:#77abca; } .dayList li .day.sun { background-color:#e17373; } @media all and (max-width: 767px) { .dayList li { min-width:20px; } .dayList li .day { width:20px; height:20px; line-height:20px; font-size:12px; } } /* 커뮤니티 - 관광자료신청 */ .applyPrivacy {margin-bottom: 55px; padding-bottom: 165px; border-bottom: 3px solid #2f2f2f; background:url(../images/content/img_sub5_2.jpg) 50% 100% no-repeat;} .applyPrivacy .txtBox {float: left; width: 50%; padding: 22px 24px 0; text-align: left; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .applyPrivacy .txtBox .title {padding-bottom: 12px; color: #212121; font-size: 16px;} .applyPrivacy .txtBox .con {color: #686868; font-size: 15px; font-weight: 300; line-height: 22px;} .applyPrivacy .txtBox .tel {padding-top: 10px; color: #2644a5; font-size: 15px; font-weight: 300;} .applyPrivacy .clauseBox {overflow:hidden; float: left; width: 50%; padding-top: 12px; padding-left: 10px; font-size:14px; color:#4c4c4c; text-align: left; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .applyPrivacy .clauseBox .clauseTxt { overflow-y:scroll; height:112px; line-height:1.5; padding:18px 23px; border:1px solid #ddd; font-weight:300; color:#282828; letter-spacing:-0.04em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .applyPrivacy .clauseBox .agree { padding:10px 30px 15px; border:1px solid #ddd; border-top:0; color:#46373a; } .applyPrivacy .clauseBox .agree > div { display:inline-block; font-size:0; } .applyPrivacy .clauseBox .agree .agreeNo { padding-left:40px; } .applyPrivacy .clauseBox .agree > div input { display:inline-block; margin-right:5px; vertical-align:middle; -webkit-appearance:radio; -moz-appearance:radio; } .applyPrivacy .clauseBox .agree > div label { display:inline-block; font-weight:300; vertical-align:middle; font-size:14px; } .compulTxt2 {padding:0 22px 28px; color: #212121; text-align: left; font-size: 16px; font-weight: 300;} .compulTxt2 .compul {display: inline-block; margin-left: 17px !important; margin-right: 5px;} .applyCon {width:90%; height: 130px; padding:15px 18px; border: 1px solid #dcdcdc; font-size: 15px; font-family: 'Noto Sans KR','맑은 고딕','Malgun Gothic','돋움','dotum','sans-serif';} @media all and (max-width: 960px) { .applyPrivacy .clauseBox .agree {padding:8px 7px;} .applyPrivacy .clauseBox .agree > div {display: block;} .applyPrivacy .clauseBox .agree .agreeNo {margin-top: 5px; padding-left: 0;} } @media all and (max-width: 767px) { .applyPrivacy {margin-bottom: 24px; padding-bottom: 20vw; background-size:contain;} .applyPrivacy .txtBox {float:none; width: 100%; padding: 0 2% 30px;} .applyPrivacy .txtBox .title {padding-bottom: 16px; font-size: 15px; line-height: 1.4;} .applyPrivacy .txtBox .con {font-size: 14px; line-height: 1.3;} .applyPrivacy .txtBox .tel {font-size: 14px;} .applyPrivacy .clauseBox {float:none; width:100%; padding: 0;} .applyPrivacy .clauseBox .clauseTxt {padding:5px 8px; font-size: 13px;} .applyPrivacy .clauseBox .agree > div {vertical-align: middle;} .applyPrivacy .clauseBox .agree > div label {font-size: 13px;} .applyPrivacy .clauseBox .agree > div input {margin-right: 3px;} .compulTxt2 {padding: 0 5px 15px; font-size: 14px; font-weight: 400;} .compulTxt2 span {display: block; padding-top: 10px; padding-left: 4px; color: #6b6b6b;} .compulTxt2 span em.compul {margin-left: 0 !important;} } @media all and (max-width: 350px) { .applyPrivacy .clauseBox .agree .agreeNo {padding-left: 8px;} .applyPrivacy .clauseBox .agree > div label {font-size: 12px; letter-spacing: -0.05em;} } /* 커뮤니티 - 관광웹진보기 */ .webzineView {position:relative; padding-right:262px;} .webzineView .postView {padding-top: 10px; padding-bottom: 55px;} .webzineView .postView .postTop {padding-left: 100px;} .webzineView .postView .postTop .webzineTit {position: absolute; top: -3px; left: 0; width: 100px; color: #5b4242; font-size: 16px; font-weight: 700;} .webzineView .postView .postTop .webzineTit strong {display: block; padding-bottom: 14px; color: #de3d04; font-size: 28px;} .webzineView .postView .postTop .titBox p.date {font-size: 16px;} .webzineView .postView .postTop .btnItems {top: 32px;} /* 190607 */ /*.webzineView .postView .downItems {position: absolute; top: 30px; right: 148px; font-size: 0;}*/ .webzineView .postView .downItems {margin-top: 10px; margin-left: 17px; text-align: left;font-size: 0;} .webzineView .postView .downItems li {display: inline-block; border:1px solid #e8e8e8; border-left:0 none; } .webzineView .postView .downItems li:first-child { border-left:1px solid #e8e8e8; } .webzineView .postView .downItems li a { display:block; padding:0 10px; } .webzineView .postView .downItems li a i { display:inline-block; width:16px; height:42px; line-height:42px; padding-right:7px; background:url(../images/content/icon_postview_down.png) 50% no-repeat; vertical-align:middle; } .webzineView .postView .downItems li a span { display:inline-block; height:42px; line-height:42px; font-weight:300; font-size:15px; vertical-align:middle; } .webzineView .postView .postNav { margin-top:25px; padding:13px 0; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; } .webzineView .postView .postNav p { display:none; } .webzineView .postView .postNav ul { font-size:0; } .webzineView .postView .postNav ul li { display:inline-block; width:4.54545%; font-weight:300; font-size:15px; } .webzineView .postView .postNav ul li a { display:block; } .webzineView .postView .postNav ul li a:hover, .webzineView .postView .postNav ul li.active a { color:#4e6bc8; } .webzineView .postView .postNav ul li a span { position:relative; display:inline-block; } .webzineView .postView .postNav ul li.active a span:before, .webzineView .postView .postNav ul li a:hover span:before, .webzineView .postView .postNav ul li a:focus span:before { content:''; position:absolute; bottom:-2px; left:0; width:100%; height:1px; background-color:#4e6bc8; } .webzineView .postView .topImg {margin-top: 46px; text-align: left;} /* //190607 */ .webzineView .postView .postCon {padding-top: 50px;} .webzineView .postList {position: absolute; top: 10px; right: 0; width: 214px; -webkit-transition: top 0.4s; -o-transition: top 0.4s; -moz-transition: top 0.4s; transition: top 0.4s;} .webzineView .postList .slide {min-height:420px;} .webzineView .postList .slide .list li a {height: 84px;} .webzineView .postList .slide .list li a div {padding-top: 22px;} .webzineView .postList .slide .list li a .num {display: block; position: absolute; top: 18px; left: 0; width: 46px; height: 46px; border-radius:50%; background-color: #958383; color: #fff; font-size: 14px; text-align: center; line-height: 46px;} .webzineView .postList .slide .list li a .tit {font-size: 15px; font-weight: 300;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;} .webzineView .postList .slide .list li a .date {display: block; padding-top: 8px;} .webzineView .postList .slide .list li a:hover .num, .webzineView .postList .slide .list li a:focus .num, .webzineView .postList .slide .list li.active a .num {background-color: #f14205;} .webzineView .postList.fix {position: fixed; top: 100px; -webkit-transition: top 0.4s; -o-transition: top 0.4s; -moz-transition: top 0.4s; transition: top 0.4s;} @media all and (max-width:960px) { .webzineView {padding: 0 3%;} .webzineView .postList {display: none !important;} .webzineView .postView .postTop .webzineTit {display: none;} .webzineView .postView {padding-top: 30px; padding-bottom: 35px;} .webzineView .postView .postTop .titBox p.date {font-size: 14px;} .postView .postTitMo .webzineTit {padding-top: 3px; color: #5b4242;font-size: 18px; font-weight: 400; line-height: 24px;} .postView .postTitMo .webzineTit strong {display: inline-block; margin-right: 5px; color: #de3d04; font-size: 24px; font-weight: 500; vertical-align: top;} .webzineView .postView .postTop {padding-left: 0; padding-bottom: 10px;} .webzineView .postView .postTop .btnItems {top: auto;} /* 190607 */ .webzineView .postView .downItems {margin-left: 0;} .webzineView .postView .postNav { padding:0; border:0 none; } .webzineView .postView .postNav p { display:block; border:1px solid #dcdcdc; background-image: url(../images/content/icon_listdown_lg.png); background-position:95% 50%; background-repeat:no-repeat; background-size:16px auto; font-size:16px; font-weight:500;} .webzineView .postView .postNav p.active { background-image:url(../images/content/icon_listup_lg.png);} .webzineView .postView .postNav p button { width:100%; padding:13px 0 13px 24px; text-align:left; } .webzineView .postView .postNav ul { display:none; } .webzineView .postView .postNav ul li { display:block; width:auto; border:1px solid #dcdcdc; border-top:0 none; } .webzineView .postView .postNav ul li a { padding:10px 0 10px 24px; text-align:left; } .webzineView .postView .postNav ul li.active a, .webzineView .postView .postNav ul li a:hover, .webzineView .postView .postNav ul li a:focus{ background-color:#f5f5f5; } /* //190607 */ .webzineView .postView .postCon {padding-top: 4vw;} .culturalevent .pageBtnList ul {margin:27px 0 0;} } @media screen and (min-width:961px) { .webzineView .postView .postNav ul { display:block !important;} } @media all and (max-width: 767px) { .postView .postTop .titBox .date2 {font-size: 14px;} /* 190607 */ .webzineView .postView .downItems li {margin-top: -1px; margin-left: -1px; border-left: 1px solid #e8e8e8;} .webzineView .postView .downItems li a { padding:0 5px; } .webzineView .postView .downItems li a i { height:34px; line-height:36px; padding-right:5px; } .webzineView .postView .downItems li a span { height:34px; line-height:36px; font-size:13px; } .webzineView .postView .postNav {margin-top: 15px;} .webzineView .postView .postTop .titBox .date2 {padding-bottom: 0;} /* //190607 */ .culturalevent .top {margin-bottom: 22px; padding-top: 35px;} .culturalevent .top .city {width: 106px; height: 40px; line-height: 40px; font-size: 15px;} .culturalevent .top a {bottom: 7px; font-size: 14px;} .culturalevent .culturalCon ul li {padding:18px 14px;} .culturalevent .culturalCon ul li .tit {padding-left: 8px; background-position: 0 6px; font-size: 14px;} .culturalevent .culturalCon ul li .info {margin-top: 5px; padding-left: 8px; font-size: 12px;} } /* 커뮤니티 - 관광가이드북 */ /*.postTop .monthTit2 {position: absolute; top: 0; left: 0; width: 100px; color: #2548b9; font-size: 24px; font-weight: 400;}*/ /*.postTop .monthTit2 .date {display: block; padding-top: 12px; font-size: 20px; font-weight: 300;}*/ .guideBook .postView .postTop {padding-left: 0;} .guideBook .postView .postTop .titBox {padding-left: 0; border-left: none;} .guideBook .postView .postTop .titBox h3.tit {display: inline-block; max-width:70%; vertical-align: top;} .postTop .monthTit2 {position: relative; display: inline-block; margin-right: 13px; padding-right: 14px; color: #2548b9; font-size: 24px; font-weight: 400; vertical-align: top;} .postTop .monthTit2:after {content:''; position: absolute; top: 3px; right: 0; width: 1px; height: 20px; background-color: #bdbbb7;} .postTop .monthTit2 .date {display: inline-block; margin-right: 7px;} .postCon .audioCon {margin-top: 43px; border: 1px solid #dcdcdc; border-top: none;} .audioCon .audioTit {position: relative; padding-right: 84px; border-top: 1px solid #dcdcdc;} .audioCon .audioTit:before {content:''; position: absolute; top: 27px; right: 60px; width: 1px; height: 18px; background-color: #e4e4e4;} .audioCon .audioTit li a {overflow: hidden; display: block;} .audioCon .audioTit li:first-child a {padding:25px 0; padding-left: 29px; background:url(../images/content/icon_audio2.png) 100% 50% no-repeat; color: #333; font-size: 18px; text-align: left; white-space:nowrap; text-overflow:ellipsis;} .audioCon .audioTit li span {display: inline-block; padding-left: 11px; background: url(../images/common/bu_2p.png) 0 8px no-repeat; } .audioCon .audioTit li.down a {position: absolute; top: 0; right: 0; width: 60px; height: 100%; background-image:url(../images/content/icon_download.png); background-repeat: no-repeat; background-position: 50% 50%; text-indent:-999px;} .audioCon .audioWrap {display: none; background-color: #f8f8f8;} .audioCon .audioWrap .audioCustom {position: relative; height: 72px; padding-left: 35px; padding-right: 15px; border-top: 1px solid #dcdcdc;} .audioCon .audioWrap .audioCustom .mejs__container {background-color: #f8f8f8;} .audioCon .audioWrap .audioCustom .mejs__inner {padding-top: 32px; padding-left: 122px; padding-right: 220px;} .audioCon .audioWrap .audioCustom .mejs__currenttime-container {top: 26px;} .audioCon .audioWrap .audioCustom .mejs__currenttime-container:after {font-size: 16px;} .audioCon .audioWrap .audioCustom .mejs__time {font-size: 16px;} .audioCon .audioWrap .audioCustom .mejs__duration-container {top: 26px; left: 64px;} .audioCon .audioWrap .audioCustom .mejs__button > button {background-color: #fff;} .audioCon .audioWrap .audioCustom .mejs__button.mejs__playpause-button {top: 15px; right:120px;} .audioWrap .audioCustom .btnSubt {display: block; position: absolute; top: 15px; right: 15px; width: 112px; height: 39px; border: 1px solid #e5e5e5; background-color: #fff; color: #373332;line-height: 39px; font-size: 15px;} .audioCon .audioWrap .audioSub {overflow-y:auto; height: 500px; padding:24px 33px 20px; border-top: 1px solid #dcdcdc; font-size: 14px; font-weight: 300; line-height: 1.5; text-align: justify; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .audioCon .audioWrap .audioSub ul {margin-bottom: 10px;} .audioCon .totalDown {display: block; position: relative; padding:25px 0; padding-left: 38px; border-top: 1px solid #dcdcdc; background: url(../images/common/bu_2p.png) 28px 34px no-repeat; color: #333; font-size: 18px; text-align: left;} .audioCon .totalDown span {display: block; position: absolute; top: 0; right: 0; width: 60px; height: 100%; background:url(../images/content/icon_download.png) 50% 50% no-repeat;} /*.postBtnList ul {margin-top: 65px; font-size: 0;}*/ /*.postBtnList ul li {display: inline-block; margin:0 2px;}*/ /*.postBtnList ul li a {display: block; width: 245px; height: 58px; background-color: #373e7a; color: #fff; font-size: 16px; font-weight: 300; line-height: 56px;}*/ /*.postBtnList ul li:first-child a {background-color: #3e48a0;}*/ /*.postBtnList ul li span {display: inline-block; padding-left: 35px; background-repeat: no-repeat; background-position: 0 50%;}*/ /*.postBtnList ul li .down span {background-image: url(../images/content/btn_down.png);}*/ @media all and (max-width:960px) { .postTop .monthTit2 {display: none;} .postBtnList ul li a {width: 205px; height: 49px; font-size: 14px; line-height: 47px;} } @media all and (max-width:767px) { .guideBook .postView .postTop .titBox h3.tit {display: block; max-width:none;} .postCon .audioCon {margin-top: 30px;} .audioCon .audioTit {padding-right: 60px;} .audioCon .audioTit:before {top: 14px; right: 45px;} .audioCon .audioTit li:first-child a {padding:15px 25px 15px 12px; font-size: 14px;} .audioCon .audioTit li.down a {width: 45px;} .audioCon .totalDown {padding:14px 0; padding-left: 20px; background-position: 11px 21px; font-size: 14px;} .audioCon .totalDown span {width: 45px;} .audioCon .audioWrap .audioCustom {height: 75px; padding-left:18px; padding-right: 14px;} .audioCon .audioWrap .audioCustom .mejs__inner {padding-top: 45px; padding-left: 0; padding-right: 130px;} .audioCon .audioWrap .audioCustom .mejs__time {font-size: 12px;} .audioCon .audioWrap .audioCustom .mejs__duration-container {top: 13px; left: 48px;} .audioCon .audioWrap .audioCustom .mejs__currenttime-container {top: 13px;} .audioCon .audioWrap .audioCustom .mejs__currenttime-container:after {padding-left: 4px; font-size: 12px;} .audioCon .audioWrap .audioCustom .mejs__button > button {padding-left: 0;} .audioCon .audioWrap .audioCustom .mejs__button > button:after {content:none;} .audioCon .audioWrap .audioCustom .mejs__button.mejs__playpause-button {top:30px; right: 92px; width: 30px; height: 30px;} .audioCon .audioWrap .audioCustom .mejs__play > button {padding-left: 0; background-position: 54% -6px;} .audioCon .audioWrap .audioCustom .mejs__pause > button {padding-left: 0; background-position: 50% 89%;} .audioCon .audioWrap .audioCustom .mejs__time-handle {top: -10px; width: 22px; height: 22px; background: url(../images/content/icon_time_handle_lg.png) 50% 50% no-repeat; background-size: contain;} .audioCon .audioWrap .audioCustom .mejs__time-total, .audioCon .audioWrap .audioCustom .mejs__time-buffering, .audioCon .audioWrap .audioCustom .mejs__time-loaded, .audioCon .audioWrap .audioCustom .mejs__time-current {height: 3px;} .audioWrap .audioCustom .btnSubt {top:30px; right: 14px; width: 87px; height: 28px; font-size: 12px; line-height: 28px;} .audioCon .audioWrap .audioSub {height:280px; padding: 18px 4%; font-size: 12px;} .postBtnList ul {margin-top: 35px;} } @media all and (max-width:520px) { .postBtnList ul {margin:35px 3% 0;} .postBtnList ul li {width: 49%; margin:0 0.5%;} .postBtnList ul li a {width: 100%; font-size: 13px;} .postBtnList ul li span {padding-left: 30px;} } /* kch */ /* content Tab List */ .tabList { margin-bottom:46px; padding:0 16px; border-bottom:1px solid #d3d3d3; } .tabList ul { margin-bottom:-1px; font-size:0; } .tabList li { display:inline-block; min-width:100px; } .tabSize5 li { width:20%; } .tabSize3 li { width: 100%; max-width:198px; } .tabList li a { position:relative; display:block; line-height:21px; margin-left:-1px; padding:22px 10px 20px; background-color:#fafafa; border:1px solid #d3d3d3; color:#29161c; font-size:15px; } .tabList li a span { display:inline-block; } .tabList li a strong { color:#898989; font-family:'돋움','dotum'; } .tabList li a.active { padding-bottom:19px; background-color:#fff; border-bottom-color:#fff; color:#d75803; } .tabList li a.active span { border-bottom:1px solid #d44f07; } .tabList li a.active strong { color:#d9440f; } /* 마이페이지 */ .mypageWrap { margin-bottom:45px; padding-top: 40px;} .mypageWrap input[type="checkbox"] {-webkit-appearance:checkbox;} .mypageWrap h3.mypageTit {padding-bottom:29px; font-size: 30px;} .myInfo {position:relative; padding-top: 28px; padding-bottom: 30px; padding-left: 4%; padding-right: 4%; border-bottom: 1px solid #e4e4e4;} .myInfo .memberIntro {display: inline-block; position: relative; /*float: left;*/ margin-right: 55px;padding-left: 165px;} .myInfo .memberIntro h3 {padding: 17px 0 15px; color:#000; font-size:20px; font-weight: 400; text-align: left;} .myInfo .memberIntro h3 span {display: inline-block; padding-right: 2px; color:#d44f07;} .myInfo p.photo {position: absolute; top: 10px; left: 20px;} .myInfo p.photo span {display:block; width:116px; height:116px; border-radius:50%; overflow:hidden; } .myInfo .memberIntro ul.btn {font-size:0; text-align: left;} .myInfo .memberIntro ul.btn li {display:inline-block;} .myInfo .memberIntro ul.btn li:first-child { padding-right: 9px; border-right: 1px solid #dad8d8;} .myInfo .memberIntro ul.btn li:first-child+li {padding-left: 9px;} .myInfo .memberIntro ul.btn li a { display:inline-block; color:#6b6561; font-size:14px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-family: 'Dotum','돋움',sans-serif;} .myInfo ul.snsList {margin-top: 25px; font-size:0; text-align: left;} .myInfo ul.snsList li {display:inline-block; margin-left: 6px;} .myInfo ul.snsList li:first-child {margin-left: 0;} .myInfo ul.snsList a { display:block; width:29px; height:29px; background-color:#d8d8d8; background-position:center; background-repeat:no-repeat; border-radius:50%; overflow:hidden; font-size:1px; text-indent:-999px; } .myInfo ul.snsList .sns01 a { background-image:url(../images/use/sns_facebook.png); } .myInfo ul.snsList .sns02 a { background-image:url(../images/use/sns_twitter.png); } .myInfo ul.snsList .sns03 a { background-image:url(../images/use/sns_kakao.png); } .myInfo ul.snsList .sns04 a { background-image:url(../images/use/sns_blog.png); } .myInfo ul.snsList .sns01 a.active { background-color:#1546ab; } .myInfo ul.snsList .sns02 a.active { background-color:#41a3ee; } .myInfo ul.snsList .sns03 a.active { background-color:#ffcc00; } .myInfo ul.snsList .sns04 a.active { background-color:#1fb07b; } .mypageWrap .seasonList > ul > li:first-child {border-top: none;} .mypageWrap .pagination {padding-top: 45px;} .mypageWrap .seasonList ul li .titWrap input[type="checkbox"] {float: left; margin-top: 5px; margin-right: 5px; vertical-align: top; cursor:pointer;} .noprofile {display: block;overflow: hidden; position: absolute; top: 0; left: 0; width: 143px; height: 143px; border-radius:50%; border: 1px solid #e3e3e3; background: #f9f9f9 url(../images/use/img_no_profile.png) 50% 50% no-repeat; background-size:auto 82px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .noprofile span {position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; padding-top: 8px; padding-right:16px; border-top: 1px solid #e3e3e3; background:#fff url(../images/use/icon_plus.png) 74% 7px no-repeat; color: #717684; font-size: 14px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} /*.mypageBtn {float: right; width: 60%;}*/ .mypageBtn {display: inline-block; vertical-align:top;} .mypageBtn ul {font-size: 0;} .mypageBtn ul li {display: inline-block; width: 124px; background-color: #f9f9f9;} .mypageBtn ul li a {display: block; height: 100%; min-height: 134px; padding-top: 35px; border: 1px solid #e3e3e3; border-left: none; color: #666; font-size: 16px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .mypageBtn ul li:first-child a {border-left: 1px solid #e3e3e3;} .mypageBtn ul li a .lineBreak {display: block; padding-top: 3px;} .mypageBtn ul li a strong {display: inline-block; width: 57px; height: 21px; margin-top: 10px; border: 1px solid #d3d3d3; border-radius: 4px; color: #828282; line-height: 21px; letter-spacing: 1px; font-size: 14px; font-family: 'Dotum','돋움',sans-serif;} .mypageBtn ul li a strong span {font-weight: 400;} .mypageBtn ul li.active a, .mypageBtn ul li a:hover, .mypageBtn ul li a:focus {position: relative; border: none; background-color: #fff; color: #d75803;} .mypageBtn ul li.active a:before, .mypageBtn ul li a:hover:before, .mypageBtn ul li a:focus:before {content: ''; position: absolute; top: -2px; left: 0; width: 100%; height: 99%; border:1px solid #e7a584;} .mypageBtn ul li.active a strong, .mypageBtn ul li a:hover strong, .mypageBtn ul li a:focus strong {border-color: #e1c3b5; color: #e9a090;} .mypageNav {padding-top: 42px; padding-bottom: 38px;} .mypageNav > ul {position: relative; padding-bottom: 80px;} .mypageNav > ul > li {display: inline-block; padding:0 12px;} .mypageNav > ul > li:first-child:before {content:none;} .mypageNav > ul > li > a span {display: inline-block; position: relative;} .mypageNav > ul > li > a span:before {content:''; position: absolute; top: 0; left: -12px; width: 1px; height: 18px; background-color: #dedede;} .mypageNav > ul > li:first-child > a span:before {content:none;} .mypageNav > ul > li > a {display: block; padding-bottom: 5px; color: #111; font-size: 16px; font-weight: 400;} .mypageNav > ul > li.active > a, .mypageNav > ul > li > a:hover, .mypageNav > ul > li > a:focus {color: #4e6bc8; border-bottom: 1px solid #4e6bc8;} .mypageNav ul li strong {font-weight: 400;} .mypageNav .mypageSub {display: none; position: absolute; top: 38px; left: 0; width: 100%; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; background-color: #f9f9f9; font-size: 0; z-index: 5;} .mypageNav .mypageSub.active {display: block;} .mypageNav .mypageSub li {display: inline-block; padding:23px 0; padding-left: 13px;} .mypageNav .mypageSub li:first-child {padding-left: 0;} .mypageNav .mypageSub li a {display: block; color: #565656; font-size: 16px; font-weight: 400;} .mypageNav .mypageSub li.active a, .mypageNav .mypageSub li a:hover, .mypageNav .mypageSub li a:focus {color: #4e6bc8;} .mypageNavMo {display: none;} .btnMpNav {display: none;} @media all and (max-width:960px) { .mypageWrap {padding:0 3%;} .mypageWrap h3.mypageTit {padding-top: 30px; padding-bottom: 15px; font-size: 20px;} .myInfo {padding:15px 0 28px; border-bottom: none;} .myInfo .memberIntro {margin-right: 0; padding-left: 110px;} .myInfo .memberIntro h3 {padding: 9px 0 14px; font-size: 18px;} .myInfo p.photo {top: 0; left: 0;} .myInfo p.photo span {width: 83px; height: 83px;} .noprofile {top: 10px; width: 116px; height: 116px;}*/ .noprofile span {background-position: 80% 7px;} .noprofile {top: 0; width: 90px; height: 90px; background-size:auto 70px;} .noprofile span {height: 30px; padding-top: 6px; padding-right: 17px; background-position: 83% 4px; font-size: 12px;} .myInfo .memberIntro ul.btn li a {font-size: 13px;} .myInfo ul.snsList {margin-top: 8px;} .myInfo ul.snsList a {width: 20px; height: 20px;} .mypageWrap .pagination {padding-top: 30px;} /* .mypageWrap .tabType1 {position: relative; width: 100%; overflow: hidden; padding: 5px 0 0;}*/ /* .mypageWrap .tabType1 ul {width:100%; white-space: nowrap; overflow: auto; -ms-overflow-style:-ms-autohiding-scrollbar; -webkit-overflow-scrolling:toch; font-size: 0;}*/ /* .mypageWrap .tabType1 ul li {display: inline-block; float:none; width:auto; cursor: e-resize; padding:23px 10px}*/ /* .mypageWrap .tabType1 ul li:before {content: ''; position: absolute; top: 25px; left: 0; width: 1px; height: 12px; background-color: #d2d2d4;}*/ /* .mypageWrap .tabType1 ul li:first-child:before {content:none;}*/ /* .mypageWrap .tabType1 ul li a {display: inline-block; padding:0; font-size: 14px;}*/ /* .mypageWrap .tabType1 ul li a:before {content: none;}*/ .myInfo ul.snsList .sns01 a { background-image:url(../images/common/icon_sns_facebook.png); background-size:7px auto;} .myInfo ul.snsList .sns02 a { background-image:url(../images/common/icon_sns_twitter.png); background-size:12px auto;} /* .myInfo ul.snsList .sns03 a { background-image:url(../images/common/sns_kakao.png); background-size:10px auto;}*/ .myInfo ul.snsList .sns04 a { background-image:url(../images/common/icon_sns_blog.png); background-size:9px auto;} .mypageBtn {display: block; position: absolute; bottom: -58px; left: 0; width: 50%; z-index: 6;} .mypageBtn .btnMpNav {border-right: none; background-color: #fff;} .mypageBtn .btnMpNav strong {color: #f0530e; font-weight: 400;} .mypageBtn ul {display: none; position: absolute; top: 58px; left: 0; width: 100%; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .mypageBtn ul li {display: block; width: 100%; border-bottom: 1px solid #dcdcdc; background-color: #fff; text-align: left;} .mypageBtn ul li.active a, .mypageBtn ul li a:hover, .mypageBtn ul li a:focus {color: #111;} .mypageBtn ul li.active a:before, .mypageBtn ul li a:hover:before, .mypageBtn ul li a:focus:before {content: none;} .mypageBtn ul li a {min-height: auto; height: auto; padding:0 20px; border: none; color: #111; font-size: 14px; line-height: 48px;} .mypageBtn ul li a .lineBreak {display: inline;} .mypageBtn ul li a strong {display: inline-block; position: relative; width: auto; height: auto; margin-top: 0; border: none; border-radius: 0; color: #f0530e; letter-spacing: 0; font-size: inherit; font-weight: 400; font-family: inherit;} .mypageBtn ul li a strong:before {content: '(';} .mypageBtn ul li a strong:after {content: ')';} .mypageBtn ul li.active a strong, .mypageBtn ul li a:hover strong, .mypageBtn ul li a:focus strong {border: none; color: #f0530e; font-size: inherit;} .mypageBtn ul li a strong span {display: none;} .mypageWrap h3.mypageTit {padding-top: 35px;} .mypageNav {display: none;} .mypageNavMo {display: block; position: relative; margin-bottom: 35px; padding-top: 58px;} .mypageNavMo strong {color: #f0530e; font-weight: 400;} .mypageNavMo .depth1 {position: absolute; top: 0; right: 0; width: 50%;} .mypageNavMo .depth2 {position: relative;} .btnMpNav {display: block; padding:0 20px; border: 1px solid #dcdcdc; background-image: url(../images/use/icon_join_arrow_lg.png); background-repeat: no-repeat; background-position: 95% 50%; background-size:15px auto; color: #111; line-height: 56px; font-size: 15px; text-align: left;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .btnMpNav.active {background-image: url(../images/use/icon_join_arrow_up_lg.png);} .mypageNavMo ul {display: none; position: absolute; top: 58px; left: 0; width: 100%; padding-bottom: 0; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; z-index: 5; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .mypageNavMo .depth1 ul {background-color: #fff;} .mypageNavMo ul li {border-bottom: 1px solid #dcdcdc; text-align: left;} .mypageNavMo ul li a {display: block; padding:0 20px; color: #323232; font-size: 14px; line-height: 48px;} .mypageNavMo .depth2 .btnMpNav {border-top: none; background-color: #f4f4f4; background-position: 97% 50%;} .mypageNavMo .depth2 ul {background-color: #f4f4f4; z-index: 4;} } @media all and (max-width:520px) { .btnMpNav {padding:0 10px; letter-spacing: -1px; letter-spacing:-0.04em; font-size: 13px;} .mypageBtn ul li a, .mypageNavMo ul li a {padding: 0 10px; font-size: 13px; line-height: 43px;} } /* photo List */ .myPhotoList { } .myPhotoList ul { text-align: left; font-size:0; } .myPhotoList ul li { display:inline-block; width:25%; max-width:270px; margin-bottom: 10px; padding:0 3px; font-size:14px; text-align: center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .myPhotoList ul li div { padding-bottom:21px; border:1px solid #e3e3e3; } .myPhotoList ul li div p.img { /*margin:-1px;*/ overflow: hidden; position: relative; padding-top: 65%;} .myPhotoList ul li div p.img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .myPhotoList ul li div dl { padding:22px 25px 18px 33px; } .myPhotoList ul li div dt { overflow: hidden; padding-bottom:10px; color:#080808; font-size:16px; white-space:nowrap; text-overflow:ellipsis;} .myPhotoList ul li div dt span {display: block; padding-bottom: 6px; color:#335cb1; } .myPhotoList ul li div dd.top { padding-bottom:10px; color:#a4693a; font-size:14px; font-weight:300; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .myPhotoList ul li div dd.bottom {height:34px; color:#535353; font-size:12px; line-height: 17px; text-align: left;} .myPhotoList ul li div a { display:inline-block; width:102px; line-height:32px; border:1px solid #e3e3e3; color:#422f33; font-size:12px; font-family:'돋움','dotum'; } .myPhotoList ul li div a span { display:inline-block; padding-left:12px; background:url(../images/use/bu_plus.gif) left center no-repeat; } @media all and (max-width: 767px) { .myPhotoList ul li {max-width:none; width: 49%; margin:0 0.5% 7px; padding: 0;} .myPhotoList ul li div {padding-bottom: 14px;} .myPhotoList ul li div dl {padding: 18px 10px 12px;} .myPhotoList ul li div dt {font-size: 14px;} } /* 여행코스만들기 */ .courseChoice { padding-top:20px; } .writeConfirmWrap { padding-top: 40px; border-top:1px solid #e4e4e4;} .courseChoice input, .courseChoice select, .courseChoice button { font-family: 'Noto Sans KR','맑은 고딕','Malgun Gothic','돋움','dotum','sans-serif'; } .courseChoice .sortList { margin-bottom:50px; text-align:center; font-size:0; } .courseChoice .sortList li { position:relative; display:inline-block; max-width:140px; width:33.33333%; background:url(../images/use/line_sort.gif) left 23px repeat-x; vertical-align:top; } .courseChoice .sortList li.active:before { content:''; position:absolute; left:0; top:23px; width:100px; height:3px; margin-left:-33.33333%; background:#2e4389; } .courseChoice .sortList li span { position:relative; display:block; padding:62px 0 0 0; background-position:center top; background-repeat:no-repeat; color:#5d5f80; font-size:14px; z-index:2; } .courseChoice .sortList li.list01 span { background-image:url(../images/use/icon_sort01.gif); } .courseChoice .sortList li.list02 span { background-image:url(../images/use/icon_sort02.gif); } .courseChoice .sortList li.list03 span { background-image:url(../images/use/icon_sort03.gif); } .courseChoice .sortList li.list01.active span { background-image:url(../images/use/icon_sort01_on.gif); } .courseChoice .sortList li.list02.active span { background-image:url(../images/use/icon_sort02_on.gif); } .courseChoice .sortList li.list03.active span { background-image:url(../images/use/icon_sort03_on.gif); } .courseChoice .sortList li:first-child:before, .courseChoice .sortList li:last-child:after { content:''; position:absolute; top:0; width:50%; height:100%; margin-left:0; background:#fff;} .courseChoice .sortList li:first-child:before { left:0; } .courseChoice .sortList li:last-child:after { right:0; } .courseChoice p.alert { line-height:27px; padding:25px; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; color:#2a2a2a; font-size:18px; } .courseChoice p.alert strong { color:#c95109; font-weight:normal; } .writeTop { display:table; width:100%; table-layout:fixed; } .writeTop>div { display:table-cell; width:50%; border:1px solid #e8e8e8; } .writeTop>.writeStep2 { border-left:none; } .courseChoice .writeTit { min-height:150px; border-bottom:1px solid #e8e8e8; text-align:center; } .courseChoice .writeTit h3 { padding-top:30px; padding-bottom:14px; color:#74142f; font-size:24px; } .courseChoice .writeTit h3 .num { display:block; padding-bottom:7px; color:#f14469; font-size:14px;} .courseChoice .writeTit p { color:#7a7a7a; font-size:14px; } .writeContent {position: relative; padding:26px 8%; } .writeContent>div>h4 { position:absolute; left:0; top:0; width:1px; height:1px; font-size:1px; text-indent:-999px; overflow:hidden; } .inputLayout { text-align:left; font-size:15px; } .inputLayout>ul>li { clear:both; padding-bottom:8px; } .inputLayout dl dt { float:left; width:86px; line-height:41px; padding-left:8px; background:url(../images/use/bu_label.gif) left center no-repeat; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#444; } .inputLayout dl dd { margin-left:86px; } .inputLayout dl dd ul { font-size:0; } .inputLayout dl dd ul li { position:relative; } .inputLayout dl dd ul.selectList li { display:inline-block; margin-right:4px; } .inputLayout dl dd input, .inputLayout dl dd select { border:1px solid #d3d3d3; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#000; } .inputLayout dl dd input[type="text"] { width:100%; height:41px; padding:0 4px 0 10px; font-size:14px; } .inputLayout dl dd .styleSelect { min-width:6em; height:41px; line-height:39px; padding:0 40px 0 10px; background:url(../images/use/arrow_select.gif) right center no-repeat; border:1px solid #d3d3d3; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:14px; } .inputLayout dl dd>.styleSelect { width:100%; } .inputLayout dl dd .customSelectOpen { background-image:url(../images/use/arrow_select_on.gif); } .inputLayout .radioList {border-left: 1px solid #d3d3d3;} .inputLayout .radioList li { position:relative; display:inline; overflow:hidden; } .inputLayout .radioList input { position:absolute; left:0; top:0; width:1px; height:1px; margin-left:-999px; } .inputLayout .radioList label { display:inline-block; width:33.33333%; padding-top: 12px; padding-bottom: 10px; border:1px solid #d3d3d3; border-left: none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; text-align:center; color:#404040; font-size:15px; cursor:pointer; } .inputLayout .radioList label.active { background-color: #f6f6f6; color:#4e6bc8; } .inputLayout .radioList label span { display:inline-block; padding:0 2px 2px; border-bottom: 1px solid #fff;} .inputLayout .radioList label.active span {border-bottom: 1px solid #4e6bc8;} .inputLayout .city .radioList a {color: #444; font-size: 15px;} .inputLayout .city .radioList {border-top: 1px solid #d3d3d3;} .inputLayout .city .radioList li label {width: 20%; border-top: none;} .writeContent .stepTit {margin-bottom: 24px; padding-top: 8px; color: #808080; font-size: 18px; font-weight: 300; text-align: left;} .writeContent .stepTit strong {color: #000; font-weight: 500;} .writeContent .stepTab {position: absolute; top: 35px; right: 8%; font-size:0;} .writeContent .stepTab li { display:inline-block; position: relative;} .writeContent .stepTab li:first-child:before {content: ''; position: absolute; top: 3px; right: 0; width: 1px; height: 13px; background-color: #d2d2d4;} .writeContent .stepTab li a {display:inline-block; margin:0 7px; padding-bottom: 4px; color:#36383c; font-size:16px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .writeContent .stepTab li a.on, .writeContent .stepTab li a:hover, .writeContent .stepTab li a:focus { position:relative; border-bottom: 2px solid #ec6030; color:#d34d1f; font-weight: 500;} #tourFind div div { /*max-width:445px; margin:0 auto; */ float:left; width:100%; font-size:0; } #tourFind div div >p { display:inline-block; width: 25%; border:1px solid #d5d5d5; border-left: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} #tourFind .cart01 {border-left: 1px solid #d5d5d5;} #tourFind div div p a {display:block; padding:11px 0; color:#404040; font-size:15px; } #tourFind div div p a span {display: inline-block; padding:0 2px 2px; border-bottom: 1px solid #fff;} #tourFind div div p a.on {background-color: #f6f6f6;} #tourFind div div p a.on span {border-color: #4e6bc8; color:#4e6bc8;} .cartList {overflow-y: auto; height: 217px; border: 1px solid #dcdcdc; border-top: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} /* scrollbar */ /* width */ .cartList::-webkit-scrollbar {width:11px; } /* Track */ .cartList::-webkit-scrollbar-track {background: #f6f6f6;border: 1px solid #d3d3d3;} /* Handle */ .cartList::-webkit-scrollbar-thumb {background: #fff url(../images/common/bg_scrollbar.png) 50% 50% no-repeat; border: 1px solid #d3d3d3;} /* Handle on hover */ .cartList::-webkit-scrollbar-thumb:hover {background: #a8a8a8;} .cartList ul li {border-bottom: 1px solid #e3e3e3; color: #404040; font-size: 15px; text-align: left;} .cartList ul li input {overflow: hidden; position:absolute; left:0; top:0; width:1px; height:1px; margin-left:-999px;} .cartList ul li label {overflow: hidden; display: block; position: relative; padding-left: 33px; padding-right: 88px; background:url(../images/common/bu_2p.png) 22px 20px no-repeat; line-height: 45px; cursor: pointer; white-space: nowrap; text-overflow: ellipsis;} .cartList ul li label span {display: inline-block; position: absolute; top: 0; right: 35px; padding-left: 18px; background-position: left center; background-repeat: no-repeat; color: #444; font-weight: 300;} .cartList ul li input:checked + label span {background-image: url(../images/content/bu_check.png); color: #b06431;} .courseChoice div.arrow {height: 75px; background-image: url(../images/content/arrow_course.png); background-position: center; background-repeat: no-repeat;} .courseGuide .tabWrap {height:375px; overflow:auto;} /* scrollbar */ /* width */ .courseGuide .tabWrap::-webkit-scrollbar {width:11px; } /* Track */ .courseGuide .tabWrap::-webkit-scrollbar-track {background: #f6f6f6;border: 1px solid #d3d3d3;} /* Handle */ .courseGuide .tabWrap::-webkit-scrollbar-thumb {background: #fff url(../images/common/bg_scrollbar.png) 50% 50% no-repeat; border: 1px solid #d3d3d3;} /* Handle on hover */ .courseGuide .tabWrap::-webkit-scrollbar-thumb:hover {background: #a8a8a8;} /*.courseChoice .courseView {padding-top: 0;}*/ .courseChoice .courseView .courseGuide, .courseChoice .courseView .courseMap { height:527px; } .writeConfirmWrap .courseView .courseGuide, .writeConfirmWrap .courseView .courseMap { height:502px; } .courseChoice .courseView .dayCourse {font-size: 0;} .courseChoice .courseView .dayCourse li div { margin-right:46px; } .courseChoice .courseView .dayCourse li div p.name { width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .courseChoice .courseView .dayCourse li div.selectBtnList { position:absolute; right:0; top:0; width:46px; margin-right:0; border:none; } .courseChoice .selectBtnList ul { float:left; padding-right:6px; background:url(../images/use/line_btn.gif) right center no-repeat; } .courseChoice .selectBtnList p { float:right; /*padding-top:12px;*/ height: 100%; padding-right: 3px; } .courseChoice .selectBtnList li { height:auto; line-height:1; padding-left:0; border-top:none;} .courseChoice .selectBtnList button { width:16px; height:15px; margin:2px 0; overflow:hidden; background-repeat:no-repeat; text-indent:-999px; vertical-align:top; } .courseChoice .selectBtnList .btnUp button { background-position:center bottom; background-image:url(../images/use/btn_up.gif); } .courseChoice .selectBtnList .btnDown button { background-position:center top; background-image:url(../images/use/btn_down.gif); } .courseChoice .selectBtnList .btnDel button {display: inline-block; height: 100%; margin: 0; background-image:url(../images/use/btn_del.gif); background-position: center center; } .courseChoice .pageBtnList {margin-bottom: 45px;} .pageBtnList ul { margin:35px 20px 0; font-size:0; text-align: center;} .formBtnList ul { margin:60px 20px; font-size:0; } .pageBtnList ul li, .formBtnList ul li { display:inline-block; margin:0 3px; vertical-align:middle; } .formBtnList ul li a, .formBtnList ul li button { display:block; width:242px; border:1px solid #c8c7c7; font-size:16px; } .formBtnList ul li span { display:inline-block; line-height:56px; padding-left:28px; background-image:url(../images/use/icon_cancel.gif); background-position:left center; background-repeat:no-repeat; color:#000; font-weight:300; vertical-align:top; } .formBtnList ul li button span {background-image:url(../images/use/icon_submit.gif); } .pageBtnList ul li a, .pageBtnList ul li button {display: block; width:245px; color: #fff; font-size: 16px;} .pageBtnList ul li span {display:inline-block; line-height:58px; padding-left:28px; background-position:left center; background-repeat:no-repeat; color:#fff; font-weight:300; vertical-align:top;} .pageBtnList ul li:first-child a {background-color: #505795;} .pageBtnList ul li:first-child + li a, .pageBtnList ul li:first-child + li button {background-color: #373e7a;} .pageBtnList ul li .submit span {background-image:url(../images/use/icon_submit_white.png); } .pageBtnList ul li .eraser span {background-image:url(../images/use/icon_eraser_white.png); } .pageBtnList ul li .modify span { background-image:url(../images/use/icon_modify_white.png); } .pageBtnList ul li .home span { background-image:url(../images/use/icon_home_white.png); } .pageBtnList ul li .list span { background-image:url(../images/use/icon_list.png); } .pageBtnList ul li .write span { background-image:url(../images/use/icon_pencil.png); } .pageBtnList ul li .in span { background-image:url(../images/content/icon_in.png);} .pageBtnList ul li .plus span { background-image:url(../images/content/icon_apply.png);} .pageBtnList ul li .down span { padding-left: 35px; background-image:url(../images/content/btn_down.png);} .pageBtnList ul li .cancel span { background-image:url(../images/board/icon_cansel.png);} @media all and (max-width: 960px) { .courseChoice {padding:30px 3%;} .courseChoice .writeTit {border-bottom: none;} .writeContent {padding: 0 10px 15px;} .writeTop>div {display: block; width: 100%; border-color: #d3d3d3;} .writeTop .writeStep1 {margin-bottom: 35px;} .writeTop>.writeStep2 {border: 1px solid #d3d3d3;} .writeContent .stepTab {top:10px; right: 3%;} #cartFind {max-width:none;} .cartList div.item .img {position: relative; padding-top: 60.33%;} .cartList div.item .img img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .courseChoice .courseView .courseMap {height: 60vw; border: 1px solid #d3d3d3;} .pageBtnList ul li a, .pageBtnList ul li button {width: 205px; font-size: 14px;} .pageBtnList ul li span {line-height: 49px;} } @media all and (max-width: 767px) { .courseChoice .sortList {margin-bottom: 25px;} .courseChoice .sortList li span {font-size: 13px;} .courseChoice .writeTit {min-height:105px;} .courseChoice .writeTit h3 {padding-top: 17px; padding-bottom: 10px; font-size: 18px;} .courseChoice .writeTit h3 .num {padding-bottom: 2px; font-size: 12px;} .courseChoice .writeTit p {font-size: 12px; line-height: 1.4;} .inputLayout {font-size: 14px;} .inputLayout dl dt {width: 70px;} .inputLayout dl dd {margin-left: 76px;} .inputLayout dl.city {position: relative;} .inputLayout dl.city dt {width: 100%; float: none; padding:0; background: none;} .inputLayout dl.city a.moToggle {display: block; padding:11px 0; padding-left: 24px; border: 1px solid #dcdcdc; background-image: url(../images/content/icon_listdown_lg.png); background-position: 95% 50%; background-repeat: no-repeat; background-size:16px auto; text-align: left; font-size: 15px; line-height: normal;} .inputLayout dl.city a.moToggle.active {background-image: url(../images/content/icon_listup_lg.png);} .inputLayout dl.city dd {margin: 0;} .inputLayout .city .radioList {display: none; position: absolute; top: 46px; left: 0; width: 100%; border-top: none; background-color: #fff; z-index: 3;} .inputLayout .city .radioList li {display: block;} .inputLayout .city .radioList li label {width: 100%; padding-left: 24px; text-align: left; font-size: 14px;} .writeContent .stepTit {margin-bottom: 16px; text-align: center; font-size: 16px;} .writeContent .stepTab {position: relative; top: auto; right: auto; margin-bottom: 12px;} .writeContent .stepTab {border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5;} .writeContent .stepTab li {width: 30%;} .writeContent .stepTab li:first-child:before {content:none;} .writeContent .stepTab li a {margin:0; padding:11px 0; font-size: 15px;} #tourFind div div p a {font-size: 14px;} .cartList ul li label {padding-left: 26px; padding-right: 70px; background-position: 18px 21px; font-size: 14px; line-height: 38px;} .cartList ul li label span {right: 18px;} .cartList ul li input:checked + label span {background-image: url(../images/content/bu_check_lg.png); background-size: 13px auto;} .courseChoice div.arrow {height: 45px; background-image: url(../images/content/arrow_course_lg.png); background-size: 15px auto;} .courseChoice .courseView .courseGuide {height: auto; border-top: 1px solid #d3d3d3;} .courseChoice .courseView .courseGuide .courseCon {border: none;} .writeConfirmWrap .courseView .courseGuide .tabType1 {margin-bottom: 0; border-top: none;} .writeConfirmWrap .courseView .courseGuide .guideTop ul {border: none;} .courseChoice .pageBtnList {margin-bottom: 35px;} .pageBtnList ul li .list span { background-image:url(../images/content/icon_list_lg.png); background-size:21px auto;} .pageBtnList ul li .submit span {background-image:url(../images/use/icon_submit_white_lg.png); background-size:21px auto;} .pageBtnList ul li .plus span { background-image:url(../images/content/icon_apply_lg.png); background-size:21px auto;} } @media all and (max-width: 520px) { .pageBtnList ul {margin:35px 3% 0;} .pageBtnList ul li, .formBtnList ul li {width: 49%; margin:0 0.5%;} .pageBtnList ul li a, .pageBtnList ul li button {width: 100%} .pageBtnList ul li .home {font-size: 13px;} .pageBtnList ul li .home span {padding:0; background: none;} } /*.mypageWrap .basicList {padding: 35px 5% 0;}*/ .mypageWrap .basicList .tblBoard {border-top: 1px solid #dedbdb;} .mypageWrap .basicList .tblBoard th {padding: 14px 7px; font-weight: 300;} .tblBoard td .progress1 {color: #3e53ad; font-weight: 400;} .tblBoard td .progress2 {color: #df5018; font-weight: 400;} .tblBoard td .progress3 {color: #848484; font-weight: 400;} .noneBox {padding-top: 57px; padding-bottom: 78px; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; text-align: center;} .noneBox2 {padding-top: 113px; padding-bottom: 138px; border-bottom: 1px solid #e4e4e4; text-align: center;} /* SITEMAP */ .siteMapLayout {padding-top: 20px;} .siteMapLayout h3 { margin-bottom:48px; color:#281b1b; font-size:26px; } .siteMapLayout .siteMapList { text-align:left; } .siteMapLayout .siteMapList section { width:25%; margin-bottom:46px; padding:0 32px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .siteMapLayout .siteMapList section.siteList01, .siteMapLayout .siteMapList section.siteList02, .siteMapLayout .siteMapList section.siteList03, .siteMapLayout .siteMapList section.siteList04, .siteMapLayout .siteMapList section.siteList06 { float:left; } .siteMapLayout .siteMapList section.siteList05 { position:absolute; left:25%; top:440px; } .siteMapLayout .siteMapList section.siteList06 { float:right; } .siteMapLayout .siteMapList h4 {margin-bottom: 18px; padding:10px; border-bottom:2px solid #34a886; color:#281b1b; font-size:20px; font-weight: 500;} .siteMapLayout .siteMapList section>ul>li a { display:block; } .siteMapLayout .siteMapList section>ul>li>a { line-height:19px; padding:10px; background:url(../images/use/bu_sitemap.gif) 1px 17px no-repeat; border-bottom:1px solid #dbdbdb; color:#4b4b4b; font-size:16px; } .siteMapLayout .siteMapList section>ul>li>ul {padding:10px 0;} .siteMapLayout .siteMapList section>ul ul.inlineStyle { font-size:0; } .siteMapLayout .siteMapList section>ul ul.inlineStyle li { display:inline-block; width:33.33333%; text-align:center; } .siteMapLayout .siteMapList section>ul ul li a { padding:6px 10px; color:#717171; font-size:15px; } .siteMapLayout .siteMapList section>ul ul li a:hover, .siteMapLayout .siteMapList section>ul ul li a:focus { color:#2a57be; text-decoration:underline; } /* //kch */ @media all and (max-width: 960px) { .siteMapLayout {padding: 30px 3%;} .siteMapLayout .siteMapList section {padding:0 1%;} .siteMapLayout .siteMapList section.siteList05 {left: 26%;} .siteMapLayout .siteMapList section>ul ul.inlineStyle li {width: 50%;} } @media all and (max-width: 767px) { .siteMapLayout h3 {margin-bottom: 24px; font-size: 20px; font-weight: 500;} .siteMapLayout .siteMapList section {width: 50%; margin-bottom: 30px;} .siteMapLayout .siteMapList section.siteList05 {float: left; position: relative; top: auto; left: auto;} .siteMapLayout .siteMapList section.siteList06 {float:none} .siteMapLayout .siteMapList h4 {margin-bottom: 10px; padding: 8px; font-size: 17px;} .siteMapLayout .siteMapList section>ul>li>a {padding: 8px 10px; font-size: 14px;} .siteMapLayout .siteMapList section>ul>li>ul {padding: 8px 0;} .siteMapLayout .siteMapList section>ul ul li a {font-size: 13px;} } /* 이용안내 */ /* login */ .loginWrap .useTit { margin-bottom:24px; font-weight:500; font-size:32px; } .loginWrap .topTxt { font-weight:300; font-size:15px; color:#6b6b6b; line-height:1.4; } .loginWrap .topTxt span { display:block; } .loginInner { max-width:960px; margin:40px auto; padding-top:50px; border:1px solid #e2e1e3; } .loginInner .info { font-family:"나눔명조", Nanum Myeongjo; font-size:22px; color:#6b6b6b; text-align:center; } .loginInner .txt { text-align:center; } .loginInput { position:relative; width:490px; margin:0 auto; margin-top:26px; padding-right:110px; font-size:14px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .loginInput ul{ width:100%; } .loginInput ul li { position:relative; padding-left:96px; border:1px solid #e8e8e8; } .loginInput ul li:first-child { margin-bottom:5px; } .loginInput ul li label, .loginInput ul li input { height:46px; line-height:46px; color:#6b6b6b; } .loginInput ul li label { position:absolute; left:0; width:96px; padding-left:25px; background:url(../images/use/loginEx_bullet.gif) 18px center no-repeat; border-right:1px solid #e8e8e8; color:#6d6d6d; text-align:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .loginInput ul li input { width:100%; padding:0 10px; background-color:#f8f8f8; border:none; vertical-align:top; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .loginInput ul li input::-webkit-input-placeholder { height:46px; line-height:46px; padding-left:25px; background:url(../images/use/bg_userPass.png) left center no-repeat; color:#c9c9c9; } .loginInput ul li input::-moz-placeholder { color:#c9c9c9; } .loginInput ul li input: -ms-input-placeholder { color:#c9c9c9; } .loginInput ul li:first-child input::-webkit-input-placeholder { background:url(../images/use/bg_userId.png) left center no-repeat; } .loginInput p { position:absolute; right:0; top:0; margin-left:4px; } .loginInput p .btn { width:106px; height:101px; padding-top:25px; background:#284295 url(../images/use/icon_loginBtn.png) center 32px no-repeat; font-family:'Noto Sans KR','sans-serif'; font-weight:600; color:#fff; border:0 none; } .loginEx { overflow:hidden; margin-top:68px; background:#f8f8f8; border-top:1px solid #e2e1e3; } .loginEx dl { float:left; width:50%; padding:35px 10px 40px; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .loginEx dl:first-child { border-right:1px solid #e2e1e3; } .loginEx dl dt { font-weight:300; color:#1d1d1d; } .loginEx dl dt span { padding-left:7px; background:url(../images/use/loginEx_bullet.gif) left center no-repeat; } .loginEx dl dd { font-size:14px; font-weight:300; color:#737373; } .loginEx dl dd.txt { padding:13px 0 23px 0; } .loginEx dl dd.btn { font-size:0; } .loginEx dl dd.btn > div { display:inline-block; min-width:140px; height:40px; line-height:40px; background:#fff; border:1px solid #e2e2e2; border-left:0 none; border-radius:3px; } .loginEx dl dd.btn > div:first-child { border-left:1px solid #e2e2e2; } .loginEx dl dd.btn > div a { display:block; font-size:15px; color:#050505; } .loginEx dl dd.btn > div a span { padding-left:22px; background-position:left center; background-repeat:no-repeat; } .loginEx .findIdBtn span { background-image:url(../images/use/btn_findId.png); } .loginEx .findPassBtn span { background-image:url(../images/use/btn_findPass.png); } .loginEx .joinBtn span { background-image:url(../images/use/btn_join.png); } @media screen and (max-width:960px) { .loginWrap { padding:0 3%; } } @media screen and (max-width:767px) { .loginWrap .useTit {margin-bottom: 15px; padding-top: 30px; font-size: 17px;} .loginWrap .topTxt {font-size: 12px;} .loginInner {margin: 15px auto 30px; padding-top: 0; border: none;} .loginInner .info {padding-top: 33px; border: 1px solid #e2e1e3; border-bottom: none; font-size:17px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } .loginInput { width:100%; margin: 0; padding-top: 30px; padding-right: 0; padding-bottom: 75px; border: 1px solid #e2e1e3; border-top: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .loginInput ul {width: 83%; margin:0 auto;} .loginInput p {position: absolute; top: auto; bottom: 0; width: 100%; margin-top: 0; margin-left: 0;} .loginInput p .btn {width: 100%; height: 50px; padding-top: 0; background-position: 35% 50%; line-height: 48px; font-size: 13px;} .loginEx {margin-top: 48px; border: 1px solid #e2e1e3;} .loginEx dl { width:100%; padding: 25px 10px;} .loginEx dl:first-child { border-right:none; border-bottom:1px solid #e2e1e3;} .loginEx dl dt {font-size: 14px;} .loginEx dl dd.txt {font-size: 13px;} .loginEx dl dd.txt {padding: 10px 0 18px 0;} .loginEx dl dd.btn > div {width: 40%; min-width:auto;} .loginEx dl dd.btn > div a {font-size: 13px;} } /* 아이디/비밀번호 찾기 */ .findInputWrap { max-width:960px; margin:55px auto; border:1px solid #dcdcdc; } .findInputWrap > ul { border-bottom:1px solid #dcdcdc; font-size:0; } .findInputWrap > ul li { display:inline-block; width:50%; font-weight:350; font-size:18px; } .findInputWrap > ul li a { display:block; padding:20px 10px; background-color:#f8f8f8; color:#626262; } .findInputWrap > ul li:first-child a { border-right:1px solid #dcdcdc; } .findInputWrap > ul li.active a, .findInputWrap > ul li a:hover, .findInputWrap > ul li a:focus { background-color:#fff; color:#000; } .findInputWrap > div { padding:50px 10px; } .findInputWrap .tabBtn { font-size:0; } .findInputWrap .tabBtn li { display:inline-block; position:relative; } .findInputWrap .tabBtn li:first-child { padding-right:20px; } .findInputWrap .tabBtn li:first-child+li { padding-left:20px; } .findInputWrap .tabBtn li:first-child:before { content:''; position:absolute; top:2px; right:0; width:1px; height:16px; background-color:#d6d6d6; } .findInputWrap .tabBtn li a { display:block; padding-bottom:5px; color:#4e4e4e; font-size:18px; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .findInputWrap .tabBtn li.active a, .findInputWrap .tabBtn li a:hover, .findInputWrap .tabBtn li a:focus { border-bottom:1px solid #dc5b0d; color:#dc5b0d; } .findInput { position:relative; max-width:583px; margin:0 auto; margin-top:35px; padding-right:126px; font-size:15px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .findInput ul{ width:100%; } .findInput ul li { position:relative; margin-top:5px; padding-left:95px; } .findInput ul li:first-child { margin-top:0; } .findInput ul li label, .findInput ul li input { height:51px; line-height:51px; color:#6b6b6b; } .findInput ul li label { position:absolute; left:0; width:95px; padding-left:7px; background:url(../images/use/loginEx_bullet.gif) left center no-repeat; color:#6d6d6d; text-align:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .findInput ul li input { width:100%; padding:0 10px; border:1px solid #dcdcdc; vertical-align:top; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .findInput ul li input::-webkit-input-placeholder { color:#a5a5a5; } .findInput ul li input::-moz-placeholder { color:#a5a5a5; } .findInput ul li input:-ms-input-placeholder { color:#a5a5a5; } .findInput p { position:absolute; right:0; top:0; margin-left:4px; } .findInput p .btn { width:116px; height:107px; background-color:#284295; border:0 none; font-family:'Noto Sans KR','sans-serif'; font-weight:400; font-size:16px; color:#fff; } .findInput .selectBox { height:51px; border:1px solid #dcdcdc; font-weight:300; font-size:15px; color:#434343; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .findInput .selectBox select { width:100%; height:100%; } .findInput .selectBox .customSelect { width:100%; height:100%; text-align:left; } .findInput .selectBox .customSelect .customSelectInner { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:100% !important; padding:0 30px 0 14px; background-image:url(../images/use/icon_join_arrow.png); background-position:90% 50%; background-repeat:no-repeat; line-height:49px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .findInput .selectBox .customSelectOpen .customSelectInner { background-image:url(../images/use/icon_join_arrow_up.png); } .findInput .groupTel { overflow:hidden; } .findInput .groupTel .text, .findInput .groupTel .selectBox { float:left; width:31%; } .findInput .groupTel .formHyphen { float:left; width:3.5%; height:51px; line-height:51px; color:#909090; } .findInput .groupEmail { overflow:hidden; } .findInput .groupEmail .text, .findInput .groupEmail .selectBox { float:left; width:46%; } .findInput .formAtsign { float:left; width:8%; height:51px; line-height:51px; color:#909090 } .findInput .groupEmail input.email2 { display:none; } /* 이메일 직접입력 */ .findInput .findNumber { overflow:hidden; } .findInput .findNumber .text { float:left; width:67%; } .findInput .findNumber .btn { float:left; width:33%; height:51px; line-height:51px; border:1px solid #dcdcdc; border-left:0 none; font-weight:350; color:#6b6b6b; } .findIdResult dl.txt dt { font-weight:300; color:#4b4b4b; line-height:1.5; } .findIdResult dl.txt dt span { display:block; } .findIdResult dl.txt dd { margin-top:20px; font-weight:500; font-size:22px; color:#284295;} .findIdResult div.txt { padding:30px 0 10px; font-weight:500; font-size:20px; color:#4b4b4b; } .findIdResult div.txt p { margin-top:15px; font-weight:300; font-size:16px; } .findPassResult dl { max-width:472px; margin:0 auto; } .findPassResult dl dt { margin-bottom:24px; font-size:18px; color:#0b0b0b; } .findPassResult dl dd { margin-top:8px; } .findPassResult dl dd:first-of-type { margin-top:0; } .findPassResult dl dd .text { width:100%; height:51px; line-height:51px; border:1px solid #dcdcdc; font-size:15px; text-indent:20px; } .findPassResult .info { display:inline-block; margin:0 auto; padding:12px 0 10px; text-align:left; } .findPassResult .info p { padding-left:15px; background:url(../images/use/bul_jointable_info.png) left 4px no-repeat; font-weight:300; font-size:14px; color:#999; line-height:1.4; } .findBtnWrap { margin:50px 0 5px; } .findPassResult .findBtnWrap { margin:20px 0 0; } .findBtnWrap ul { text-align:center; font-size:0; } .findBtnWrap ul li { display:inline-block; min-width:235px; height:58px; line-height:58px; margin:0 1px 5px; font-size:0; vertical-align:top; } .findBtnWrap ul li.join { background-color:#4b5291; } .findBtnWrap ul li.login { background-color:#4b5291; } .findBtnWrap ul li.find { background-color:#373e7a; } .findBtnWrap ul li.nochange { background-color:#373e7a; } .findBtnWrap ul li a { display:block; font-weighT:300; font-size:17px; color:#fff; } .findBtnWrap ul li button { height:100%; background-color:#373e7a; font-weighT:300; font-size:17px; font-family:'Noto Sans KR'; color:#fff; } .findBtnWrap ul li.join span { padding-left:27px; background-image:url(../images/use/btn_findid_jion.png); background-position: left center; background-repeat: no-repeat; } .findBtnWrap ul li.login span { padding-left:27px; background-image:url(../images/use/btn_join_login.png); background-position: left center; background-repeat: no-repeat; } .findBtnWrap ul li.find span { padding-left:27px; background-image:url(../images/use/btn_findid_find.png); background-position: left center; background-repeat: no-repeat; } .findBtnWrap ul li.nochange span { padding-left:27px; background-image:url(../images/use/btn_findid_nochange.png); background-position: left center; background-repeat: no-repeat; } @media screen and (max-width:767px) { .findInputWrap {margin:30px auto;} .findInputWrap > ul li {font-size: 14px;} .findInputWrap > ul li a {padding:13px 5px;} .findInputWrap > div {padding:25px 0 0;} .findInputWrap .tabBtn li a {font-size: 14px;} .findInput {margin-top: 25px; padding:0 15px 75px; font-size:13px; } .findInput ul li { padding-left:80px; } .findInput ul li label, .findInput ul li input {height: 43px; line-height: 43px;} .findInput ul li label { width:80px; } .findInput p { top: auto; bottom: 0; width: 100%; margin-left: 0;} .findInput p .btn { width:100%; height:51px; padding-top:0; background:#284295; font-size: 13px;} .findInput p .btn div { display:inline; } .findInput .selectBox {height: 43px;} .findInput .selectBox .customSelect .customSelectInner { padding:0 25px 0 5px; background-image: url(../images/use/icon_join_arrow_lg.png); background-size:15px auto; line-height: 43px;} .findInput .findNumber .text {float:none; width: 100%; } .findInput .findNumber .btn {float:none; width: 100%; height: 43px; border: 1px solid #dcdcdc; border-top: none; background-color: #f9f9f9; line-height: 43px;} .findPassResult dl {padding:0 15px;} .findPassResult dl dt {font-size: 14px;} .findPassResult dl dd .text {height: 43px; line-height: 43px;} .findPassResult .info {padding:12px 20px;} .findPassResult .info p {font-size: 13px;} .findBtnWrap {margin:35px auto 0;} .findBtnWrap ul li {min-width:auto; width: 50%; height: 43px; margin: 0; line-height: 43px;} .findBtnWrap ul li.join {width: 100%; margin-bottom: 5px; background-color: #373e7a;} .findBtnWrap ul li a {font-size: 13px;} .findBtnWrap ul li.login span {padding-left: 15px; background-image:url(../images/use/btn_join_login_lg.png);background-size:12px auto;} .findBtnWrap ul li.nochange span {padding-left: 20px; background-image:url(../images/use/btn_findid_nochange_lg.png); background-size:15px auto;} } /* 회원가입 순서 */ .joinWrap .turnList { margin-bottom:50px; font-size:0; } .joinWrap .turnList li { position:relative; display:inline-block; max-width:20%; padding:0 2.5%; font-weight:300; font-size:16px; color:#7e9894; vertical-align:top; letter-spacing:-0.06em; } .joinWrap .turnList li.on { color:#00907d; } .joinWrap .turnList li:before { content:''; position:absolute; top:23px; left:-50%; width:100%; height:2px; background-color:#b6ccc9; z-index:-1; } .joinWrap .turnList li.on:before { background-color:#03ac96; } .joinWrap .turnList li:first-child:before { display:none; } .joinWrap .turnList li div { padding-top:62px; background-position:center top; background-repeat:no-repeat; } .joinWrap .turnList li.turn01 div { background-image:url(../images/use/bg_turnlist01_on.png); } .joinWrap .turnList li.turn02 div { background-image:url(../images/use/bg_turnlist02_off.png); } .joinWrap .turnList li.turn03 div { background-image:url(../images/use/bg_turnlist03_off.png); } .joinWrap .turnList li.turn04 div { background-image:url(../images/use/bg_turnlist04_off.png); } .joinWrap .turnList li.turn02.on div { background-image:url(../images/use/bg_turnlist02_on.png); } .joinWrap .turnList li.turn03.on div { background-image:url(../images/use/bg_turnlist03_on.png); } .joinWrap .turnList li.turn04.on div { background-image:url(../images/use/bg_turnlist04_on.png); } @media screen and (max-width:767px) { .joinWrap .turnList {margin-bottom: 25px; padding: 0 5%;} .joinWrap .turnList li { font-size:13px;} } @media screen and (max-width:480px) { .joinWrap .turnList li:before {top: 5vw;} .joinWrap .turnList li div {padding-top: 13.5vw; background-size:10vw auto;} } /* 회원가입동의 */ .joinWrap .tit { margin-bottom:40px; font-weight:500; font-size:30px; } .joinSect { padding:45px 25px 20px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; text-align:left; } .clauseWrap { padding:0 10px 40px 10px; } .clauseWrap .clauseTit { font-size:20px; color:#15171b; } .clauseWrap .clauseBox { overflow:hidden; padding-top:17px; font-size:14px; color:#4c4c4c; } .clauseWrap .clauseTxt { overflow-y:scroll; height:240px; line-height:1.5; padding:25px 30px; border:1px solid #ddd; font-weight:300; color:#282828; letter-spacing:-0.04em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .clauseWrap .clauseTxt h5 { margin-bottom:18px; font-weight:400; font-size:15px; } .clauseWrap .clauseTxt h6 { font-weight:400; font-size:15px; } .clauseWrap .clauseTxt p { margin-bottom:20px; } .clauseWrap .clauseTxt ol { margin-bottom:20px; } .clauseWrap .agree { padding:10px 30px 15px; border:1px solid #ddd; border-top:0; color:#46373a; } .clauseWrap .agree > div { display:inline-block; font-size:0; } .clauseWrap .agree .agreeNo { padding-left:40px; } .clauseWrap .agree > div input { display:inline-block; margin-right:5px; vertical-align:middle; -webkit-appearance:radio; -moz-appearance:radio; } .clauseWrap .agree > div label { display:inline-block; font-weight:300; vertical-align:middle; font-size:14px; } .joinBtnWrap { margin:40px 0; } .joinBtnWrap ul { text-align:center; font-size:0; } .joinBtnWrap ul li { display:inline-block; height:58px; line-height:58px; margin:0 1px 5px; font-size:0; vertical-align:top; } .joinBtnWrap ul li.prev { background-color:#4b5291; } .joinBtnWrap ul li.next { background-color:#373e7a; } .joinBtnWrap ul li a { display:block; padding:0 70px; font-weighT:300; font-size:17px; color:#fff; } .joinBtnWrap ul li button { height:100%; padding:0 70px; background-color:#373e7a; font-weighT:300; font-size:17px; font-family:'Noto Sans KR'; color:#fff; } .joinBtnWrap ul li.prev span { padding-left:27px; background:url(../images/use/btn_join_prev.png) left center no-repeat; } .joinBtnWrap ul li.next span { padding-right:27px; background:url(../images/use/btn_join_next.png) right center no-repeat; } @media screen and (max-width:1023px) { .clauseWrap{ padding:0 0 20px 0; } } @media all and (max-width: 960px) { .joinBtnWrap ul li {height: 49px; line-height: 49px;} .joinBtnWrap ul li a, .joinBtnWrap ul li button {width: 205px; padding: 0; font-size: 14px;} } @media screen and (max-width:767px){ .joinWrap .tit {margin-bottom: 24px; padding-top:30px; font-size: 18px;} .joinSect { padding:20px 2%; } .clauseWrap .clauseTit {padding-left: 3px; font-size:15px; } .clauseWrap .clauseTxt{ padding:5px 10px; } .clauseWrap .clauseBox { padding-top:12px; } .clauseWrap .agree { padding:10px 15px; } .clauseWrap .agree > div { display:block; line-height:1.5; } .clauseWrap .agree .agreeNo { padding-left:0; } .joinBtnWrap {margin:30px 0;} } @media all and (max-width: 520px) { .joinBtnWrap ul {margin:35px 3% 0;} .joinBtnWrap ul li {width: 49%; margin:0 0.5%;} .joinBtnWrap ul li a, .joinBtnWrap ul li button {width: 100%} } /* 본인실명인증 */ .authCheck { margin-bottom:50px; padding:40px 5%; border-top:1px solid #ddd; line-height:1.5; color:#0b0c0e; } .authCheck .inner { overflow:hidden; } .authCheck .inner > div {display: inline-block; width:50%; border:1px solid #ddd; text-align:center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .authCheck .inner > div dl{ padding:50px 35px 57px;} .authCheck .inner > div dl dt { padding:125px 0 6px 0; font-size:18px; } .authCheck .inner > div.authSms > dl dt { background:url(../images/use/icon_auth_sms.jpg) center top no-repeat; } .authCheck .inner > div.authPin > dl dt { background:url(../images/use/icon_auth_pin.jpg) center 17px no-repeat; } .authCheck .inner > div dl dd { font-size:15px; font-weight:300; word-break:keep-all; } .authCheck .inner > div dl dd.btn { display:inline-block; width:148px; margin-top:24px; border:1px solid #cfcfcf; border-radius:3px; } .authCheck .inner > div dl dd a { display:block; padding:10px 12px 10px 32px; background:url(../images/use/btn_request.gif) 19px center no-repeat; font-weight:300; font-size:15px; color:#050505; } .authCheck .info { margin-top:35px; font-weight:300; font-size:15px; color:#686868; } .authCheck .info span { display:block; } @media screen and (max-width:1023px) { .authCheck { padding:20px 10px; } } /* @media only screen and (max-width: 1024px) and (max-height: 600px){ .api_Con { padding: 14px 15px 20px; } } */ @media screen and (max-width:960px){ .authCheck .inner > div{ width:100%; } .authCheck .inner > div.authSms > dl {position: relative;} .authCheck .info span { display:inline; } } @media screen and (max-width:767px){ .authCheck .inner > div dl{ padding: 25px 20px 75px;} .authCheck .inner > div dl dt {padding: 125px 0 15px 0; font-size: 15px;} .authCheck .inner > div dl dd {font-size: 13px;} .authCheck .inner > div dl dd.btn {display: block; position: absolute; bottom: 0; left: 0; width: 100%; border: none; border-top: 1px solid #cfcfcf;} .authCheck .inner > div dl dd a {padding: 0; background-position: 32% 50%; font-size: 13px; line-height: 48px;} .authCheck .inner > div dl {position: relative;} .authCheck .info {margin-top: 30px; font-size: 14px;} } /* 개인정보입력 */ .joinForm { padding:35px 2% 55px; border-top:1px solid #ddd; } .joinForm .topTxt { margin-bottom:30px; padding:0 20px; text-align:left; } .joinForm .topTxt dt { font-size:20px; color:#212121; } .joinForm .topTxt dd { margin-top:15px; font-weight:300; font-size:15px; color:#686868; line-height:1.5; } .joinForm .topTxt dd span { display:block; } .joinForm .compulTxt { margin-bottom:10px; font-weight:300; font-size:15px; color:#686868; text-align:right; } .joinForm .compul { overflow:hidden; display:inline-block; width:8px; height:8px; margin-left:3px; background:url(../images/use/icon_member_check.gif) center no-repeat; vertical-align:middle; text-indent:-9999px; } .joinForm .compulTxt .compul { margin-top:-3px; margin-right:5px; text-indent:9999px; } .joinForm .joinFormTbl { width:100%; border-top:1px solid #e3e3e3; font-size:15px; text-align:left; } .joinForm .joinFormTbl tr { border-bottom:1px solid #e3e3e3; } .joinForm .joinFormTbl th { width:16%; padding:22px 1% 9px 3.5%; font-weight:400; color:#6b6b6b; text-align:left; vertical-align:top; } .joinForm .joinFormTbl th label { display:inline-block; padding-left:10px; background:url(../images/use/loginEx_bullet.gif) left center no-repeat; vertical-align:middle; } .joinForm .joinFormTbl td { padding:9px 0; vertical-align: middle;} .joinForm .joinFormTbl input.text, .joinForm .joinFormTbl .formHyphen, .joinForm .joinFormTbl .formAtsign, .joinForm .joinFormTbl .styleCheck { float:left; height:51px; line-height:51px; } .joinForm .joinFormTbl input.text { border:1px solid #dcdcdc; text-indent:14px; } .joinForm .joinFormTbl input.text.w40 { width:40%; } .joinForm .joinFormTbl input.text.w80 { width:85%; } .joinForm .joinFormTbl .formHyphen { padding:0 7px; } .joinForm .joinFormTbl .formAtsign { padding:0 10px; } .joinForm .joinFormTbl input.email2 { display:none; } /* 이메일 직접입력 */ .joinForm .joinFormTbl .btn { float:left; margin-left:7px; } .joinForm .joinFormTbl .btn a { display:block; height:49px; line-height:49px; padding:0 20px; background:none; border:1px solid #dcdcdc; font-weight:300; } .joinForm .joinFormTbl .btn input { height:51px; line-height:51px; padding:0 20px; background:none; border:1px solid #dcdcdc; font-family:'Noto Sans KR','sans-serif'; font-weight:300; cursor:pointer; } .joinForm .joinFormTbl .selectBox { float:left; width:143px; height:49px; border:1px solid #dcdcdc; font-weight:300; font-size:15px; color:#434343; } .joinForm .joinFormTbl .selectBox select { width:100%; height:100%; } .joinForm .joinFormTbl .selectBox .customSelect { width:100%; height:100%; text-align:left; } .joinForm .joinFormTbl .selectBox .customSelect .customSelectInner { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:100% !important; padding:0 30px 0 14px; background-image:url(../images/use/icon_join_arrow.png); background-position:90% 50%; background-repeat:no-repeat; line-height:49px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .joinForm .joinFormTbl .selectBox .customSelectOpen .customSelectInner { background-image:url(../images/use/icon_join_arrow_up.png); } .joinForm .joinFormTbl .selectBox.sectMber1 { margin-right:7px; } .joinForm .joinFormTbl .groupMber .selectBox { max-width:47%; } .joinForm .joinFormTbl .groupTel .text, .joinForm .joinFormTbl .groupTel .selectBox { width:143px; max-width:27%; } .joinForm .joinFormTbl .addrTxt1, .joinForm .joinFormTbl .addrTxt2 { clear:both; padding-top:9px; } .joinForm .joinFormTbl .groupEmail .text, .joinForm .joinFormTbl .groupEmail .selectBox { width:25%; } .joinForm .joinFormTbl .styleCheck { position:relative; width:33%; margin-left:2%; } .joinForm .joinFormTbl .styleCheck input { width:21px; -webkit-appearance:checkbox; -moz-appearance:checkbox; } .joinForm .joinFormTbl .styleCheck label { position:absolute; left:0; padding-left:27px; font-weight:300; color:#434343; } .joinForm .joinFormTbl .styleCheck input[type="checkbox"]:not(old){ width:21px; margin:0; padding:0; } .joinForm .joinFormTbl .styleCheck input[type="checkbox"]:not(old){ width:21px; margin:0; padding:0; } .joinForm .joinFormTbl .styleCheck input[type="checkbox"]:not(old) + label { display:inline-block; background:#fff url(../images/use/icon_joincheck_off.png) left center no-repeat } .joinForm .joinFormTbl .styleCheck input[type="checkbox"]:not(old):checked + label { display:inline-block; background:#fff url(../images/use/icon_joincheck_on.png) left center no-repeat; } .joinForm .joinFormTbl .info { clear:both; padding:12px 0 10px; } .joinForm .joinFormTbl .info p { padding-left:15px; background:url(../images/use/bul_jointable_info.png) left 4px no-repeat; font-weight:300; font-size:14px; color:#999; line-height:1.4; } .joinForm .joinFormTbl .groupSns { max-width:792px; } .joinForm .joinFormTbl .groupSns ul li { position:relative; margin-top:8px; padding-left:73px; height:59px; line-height:57px; border:1px solid #dcdcdc; } .joinForm .joinFormTbl .groupSns ul li:first-child { margin-top:0; } .joinForm .joinFormTbl .groupSns ul li div { position:absolute; left:18px; } .joinForm .joinFormTbl .groupSns ul li label { overflow:hidden; display:inline-block; width:34px; height:34px; background-position:center; background-repeat:no-repeat; text-indent:-9999px; vertical-align:middle; } .joinForm .joinFormTbl .sns1 label { background-image:url(../images/use/icon_join_sns01.png); } .joinForm .joinFormTbl .sns2 label { background-image:url(../images/use/icon_join_sns02.png); } .joinForm .joinFormTbl .sns3 label { background-image:url(../images/use/icon_join_sns03.png); } .joinForm .joinFormTbl .sns4 label { background-image:url(../images/use/icon_join_sns04.png); } .joinForm .joinFormTbl input.snsTxt { width:100%; height:57px; line-height:57px; border:0 none; font-size:14px; } .groupAddr .zipcodeTxt:before, .groupAddr .zipcodeTxt:after, .groupAddr .item:before, .groupAddr .item:after {content:''; clear: both; display: block;} .groupAddr .item {padding-top: 9px;} .groupEmail .selectBox {margin-left: 7px;} @media screen and (max-width:960px){ .joinForm .joinFormTbl th { padding:22px 5px 9px 5px; } .joinForm .joinFormTbl input.text.w40 { width:50%; } .joinForm .joinFormTbl input.text.w80 { width:100%; } .joinForm .joinFormTbl .groupEmail .text, .joinForm .joinFormTbl .groupEmail .selectBox { width:40%; vertical-align: middle;} .joinForm .joinFormTbl .styleCheck { float:none; clear:both; width:100%; height:auto; line-height:normal; margin-left:0; padding-top:10px; } } @media screen and (max-width:767px){ .joinForm {padding: 20px 3% 35px;} .joinForm .topTxt {margin-bottom: 15px; padding:0 2%;} .joinForm .topTxt dt {font-size: 13px;} .joinForm .topTxt dd {font-size: 13px;} .joinForm .compulTxt {font-size: 14px;} .joinForm .joinFormTbl input.text, .joinForm .joinFormTbl .formHyphen, .joinForm .joinFormTbl .formAtsign {float:none; height:43px; line-height:43px; } .joinForm .joinFormTbl .styleCheck {float:none; line-height: 21px; font-size: 13px;} .joinForm .joinFormTbl .btn {float:none; margin-top: 5px; margin-left: 0;} .joinForm .joinFormTbl .btn input {width: 100%; height: 43px; background: #f8f8f8; line-height: 41px;} .joinForm .joinFormTbl {font-size: 14px;} .joinForm .joinFormTbl th { width:33%; padding:22px 3px 9px 0px; letter-spacing: -0.05em;} .joinForm .joinFormTbl th label {padding-left: 7px;} .joinForm .joinFormTbl input.text.w40 { width:100%; } .joinForm .joinFormTbl .selectBox {height: 43px;} .joinForm .joinFormTbl .selectBox .customSelect .customSelectInner { padding:0 20px 0 7px; line-height: 41px;} .joinForm .joinFormTbl .info {padding:8px 0;} .joinForm .joinFormTbl .info p {font-size: 13px;} .joinForm .joinFormTbl .formHyphen {padding:0 3px;} .groupAddr .zipcodeTxt {position: relative;} .groupAddr .zipcodeTxt input {width: 54%;} .groupAddr .zipcodeTxt .btn {display: block; position: absolute; top: 0; right: 0; width: 45%; margin-top: 0; background-color: #f8f8f8;} .groupAddr .zipcodeTxt .btn a {padding: 0; height: 41px; text-align: center; line-height: 39px;} .joinForm .joinFormTbl .addrTxt1, .joinForm .joinFormTbl .addrTxt2 {padding-top:5px;} .joinForm .joinFormTbl .formAtsign {display: inline-block; padding: 0 5px;} .joinForm .groupEmail .selectBox {float:none; display: inline-block;} .joinForm .joinFormTbl .groupSns {max-width:none;} .joinForm .joinFormTbl .groupSns ul li {height: 43px; margin-top: 5px; padding-left: 35px; line-height: 41px;} .joinForm .joinFormTbl .groupSns ul li div {left: 7px;} .joinForm .joinFormTbl .groupSns ul li label {width: 20px; height: 20px; background-size:contain;} .joinForm .joinFormTbl input.snsTxt {height: 41px; line-height: 41px;} } /* 회원가입완료 */ .joinFin { margin-bottom:55px; padding:50px 5% 55px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; } .joinFin .joinFinTxt > div { font-family:"나눔명조", Nanum Myeongjo; font-size:28px; color:#0f0e0e; } .joinFin .joinFinTxt > p { margin:28px 0 32px; font-weight:300; color:#525252; line-height:1.5; } .joinFin .joinFinTxt > p span { display:block; } .joinFin > dl { width:380px; margin:0 auto 5px; border:1px solid #e8e8e8; font-size:0; } .joinFin > dl dt, .joinFin > dl dd { display:inline-block; height:46px; line-height:46px; font-size:15px; color:#6b6b6b; text-align:left; } .joinFin > dl dt { width:30%; padding-left:28px; background:url(../images/use/loginEx_bullet.gif) 22px center no-repeat; border-right:1px solid #e8e8e8; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .joinFin > dl dd { width:70%; padding:0 15px; background-color:#f8f8f8; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .joinFin > dl.joinFinId dd { position:relative; padding-right:95px; } .joinFin > dl.joinFinId dd > input { position:absolute; top:50%; right:15px; width:73px; height:24px; margin-top:-12px; line-height:24px; background-color:#f8f8f8; border:1px solid #e8e8e8; font-size:13px; color:#999; cursor:pointer; } .joinBtnWrap ul li.home { background-color:#4b5291; } .joinBtnWrap ul li.login { background-color:#373e7a; } .joinBtnWrap ul li.home span { padding-left:27px; background:url(../images/use/btn_join_home.png) left center no-repeat; } .joinBtnWrap ul li.login span { padding-left:27px; background:url(../images/use/btn_join_login.png) left center no-repeat; } @media screen and (max-width:960px){ .joinFin .joinFinTxt > p span { display:inline; } } @media screen and (max-width:767px){ .joinFin {margin: 25px 3%; padding: 30px 25px; border: 1px solid #e2e1e3; } .joinFin .joinFinTxt {} .joinFin .joinFinTxt > div {font-size: 18px; font-weight: 700;} .joinFin .joinFinTxt > p {margin:20px 0; font-size: 13px;} .joinFin > dl { width:100%; max-width:380px; } .joinFin > dl dt, .joinFin > dl dd { font-size:13px; } .joinFin > dl dt { width:34%; padding-left:15px; background-position:8px center; } .joinFin > dl dd { width:66%; } .joinFin > dl.joinFinId dd > input {top: 38%; right: 3px; height: 34px; width: 60px; font-size: 11px;} } /* 이용안내 - 개인정보보호방침 */ .privacyWrap {padding-bottom: 65px;} .privacyWrap .privacyCon {padding-top: 52px; padding-bottom: 258px; border-top: 1px solid #ddd; background:url(../images/use/bg_privacy.png) 50% 100% no-repeat;} .privacyWrap .privacyCon h4.tit {padding-top: 52px; padding-bottom: 27px; background:url(../images/use/bg_privacy2.png) 50% 0 no-repeat; color: #282828; font-size: 24px; font-weight: 400; font-family:"NanumMyeongjo","나눔명조","Batang","바탕","Noto Sans KR", sans-serif;} .privacyWrap .privacyCon p {color: #282828; font-size: 16px; font-weight: 300; line-height: 28px; } .privacyWrap .privacyCon p .lineBreak {display: block;} @media screen and (max-width:960px){ .privacyWrap {padding:30px 3% 35px;} } @media screen and (max-width:767px){ .privacyWrap {padding:30px 3% 0;} .privacyWrap .privacyCon {padding-top: 25px; padding-bottom:165px; background-size:200px auto;} .privacyWrap .privacyCon h4.tit {padding-top: 30px; padding-bottom: 20px; background-size:18px auto; font-size: 18px;} .privacyWrap .privacyCon p {font-size: 14px; line-height: 1.5;} } /* 회원탈퇴 */ .withdrawalWrap {overflow: hidden;} .withdrawalWrap .useTit { margin-top:30px;margin-bottom:24px; font-weight:500; font-size:32px; } .withDraWal { padding:45px 25px 20px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; text-align:left; } .wdrawWrap .wdrawpss {width:260px} .wdrawWrap .wdrawpss label {position:absolute;left:0;width:96px;padding-left:25px;background:url(../images/use/loginEx_bullet.gif) 18px center no-repeat;border-right:1px solid #e8e8e8;color:#6d6d6d;text-align:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .wdrawWrap .wdrawpss input[type="password"] {width:100%;padding: 0 10px 0 80px;background-color: #f8f8f8;border:none;vertical-align:top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .wdrawWrap .wdrawpss input[type="password"]::-webkit-input-placeholder { height:46px; line-height:46px; padding-left:25px; background:url(../images/use/bg_userPass.png) left center no-repeat; color:#c9c9c9; } .wdrawWrap .wdrawpss input[type="password"]::-moz-placeholder { color:#c9c9c9; } .wdrawWrap .wdrawpss input[type="password"]: -ms-input-placeholder { color:#c9c9c9; } .wdrawWrap .wdrawTit { font-size:20px; color:#15171b; } .wdrawWrap .wdrawBox { overflow:hidden; padding-top:17px; font-size:14px; color:#4c4c4c; } .wdrawWrap .wdrawTxt {height: 150px;line-height:1.5;padding:25px 30px;background: #f9f9f9;border: 1px solid #e8e8e8;font-weight:300;color:#282828;letter-spacing:-0.04em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .wdrawWrap .wdrawTxt h5 { margin-bottom:18px; font-weight:400; font-size:15px; } .wdrawWrap .wdrawTxt h6 { font-weight:400; font-size:15px; } .wdrawWrap .wdrawTxt p { margin-bottom:20px; } .wdrawWrap .wdrawTxt ol { margin-bottom:20px; } .wdrawWrap .agree {padding:10px 30px 15px;border-top:0;color:#46373a;text-align: center;} .wdrawWrap .agree > div { display:inline-block; font-size:0; } .wdrawWrap .agree .agreeNo { padding-left:40px; } .wdrawWrap .agree > div input { display:inline-block; margin-right:5px; vertical-align:middle; } .wdrawWrap .agree > div label { display:inline-block; font-weight:300; vertical-align:middle; font-size:14px; } .wdrawBtnWrap {margin:40px 0;} .wdrawBtnWrap .btnGroup {font-size: 0;} .wdrawBtnWrap .btnGroup li {display: inline;} .wdrawBtnWrap .btnGroup li a {display: inline-block; width: 195px; height: 58px; padding-left: 29px; background-repeat: no-repeat; background-position: 69px 50%; color: #fff; font-size: 17px; font-weight: 300; line-height: 58px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .wdrawBtnWrap .btnGroup li .btn1 {margin-right: 1px; background-color: #373e7a; background-image: url(../images/board/icon_cansel2.png);} .wdrawBtnWrap .btnGroup li .btn2 {background-color: #4f5695; background-image: url(../images/board/icon_check.png);} @media screen and (max-width:767px){ .withdrawalWrap .useTit {margin-bottom: 15px; padding-top: 30px; font-size: 17px;} .wdrawWrap .agree {text-align:left;padding:10px 0 15px;} } @media all and (max-width: 520px) { .wdrawBtnWrap .btnGroup {margin:35px 3% 0;} .wdrawBtnWrap .btnGroup li {width: 49%; margin:0 0.5%;display:inline-block;} .wdrawBtnWrap .btnGroup li a{font-size: 14px;width:100%;background-position: 49px 50%;} .wdrawWrap .agree .agreeYes label {text-align:left;display: inline;} } /* 191001 ......... 스타일 추가 */ .commentWrap .nonMember {margin-top: 20px; font-size: 0; text-align: left;} .commentWrap .nonMember li {display: inline-block; width: 25%;} .commentWrap .nonMember li:first-child {margin-right: 5px;} .commentWrap .nonMember li input {width: 100%; height: 51px; padding:0 14px; border: 1px solid #d4d4d4; line-height: 51px; font-size: 14px;} .scopeNone .commentCon .date { position: relative;top: auto; left: auto; margin-bottom: 8px; font-size: 14px;} @media (max-width: 767px) { .commentWrap .nonMember li {width: 49.5%;} .commentWrap .nonMember li:first-child {margin-right: 1%;} .commentWrap .nonMember li input {height: 43px; line-height: 43px;} .scopeNone .commentCon .date { position: absolute; top: -32px; left: auto; right: 0;} } /* 추가 끝 */