@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean"); /* MONTSERRAT */ @font-face { font-family: "mont-R"; font-weight: normal; src: url("../fonts/Montserrat-Regular.eot"); src: url("../fonts/Montserrat-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat-Regular.woff") format("woff"), url("../fonts/Montserrat-Regular.otf") format("opentype"), url("../fonts/Montserrat-Regular.ttf") format("truetype"); src: local("?"), url("../fonts/Montserrat-Regular.woff") format("woff"); } @font-face { font-family: "mont-M"; font-weight: normal; src: url("../fonts/Montserrat-Medium.eot"); src: url("../fonts/Montserrat-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat-Medium.woff") format("woff"), url("../fonts/Montserrat-Medium.otf") format("opentype"), url("../fonts/Montserrat-Medium.ttf") format("truetype"); src: local("?"), url("../fonts/Montserrat-Medium.woff") format("woff"); } @font-face { font-family: "mont-B"; font-weight: normal; src: url("../fonts/Montserrat-Bold.eot"); src: url("../fonts/Montserrat-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat-Bold.woff") format("woff"), url("../fonts/Montserrat-Bold.otf") format("opentype"), url("../fonts/Montserrat-Bold.ttf") format("truetype"); src: local("?"), url("../fonts/Montserrat-Bold.woff") format("woff"); } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } html { width: 100%; height: 100%; } html.overF { overflow: hidden; } html.overF body { overflow-y: auto; } body { position: relative; font-family: "mont-R", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: 400; font-size: 18px; color: #666; letter-spacing: -0.02em; line-height: 1.5; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; } body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, table, tr, th, td { margin: 0; padding: 0; } ul, ol, li { list-style: none; } img, fieldset { border: none; vertical-align: top; } legend, caption { position: absolute; top: -9999px; left: -9999px; z-index: -1; } textarea, button { vertical-align: middle; } input, select { font-family: "mont-R", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 18px; color: #333; line-height: 1.3; letter-spacing: -0.02em; border-radius: 0; vertical-align: top; background: #fff; border: 1px solid #e5e5e5; } input { padding: 3px 20px; height: 50px; } input:focus, input:active { outline: none; } .attach_area .file_div input[readonly] { pointer-events: none; } option { padding: 3px 10px; } option:focus, option:active { outline: none; } input[type="radio"], input[type="checkbox"] { border: 0; padding: 0; height: auto; -webkit-box-shadow: none; box-shadow: none; } input[type="password"] { height: 40px; border: 1px solid #e5e5e5; color: #888; background: #fff; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; } input[type="password"]::-webkit-input-placeholder { color: #aaa; } input[type="password"]:-ms-input-placeholder { color: #aaa; } input[type="password"]::-ms-input-placeholder { color: #aaa; } input[type="password"]::placeholder { color: #aaa; } input[type="password"]:disabled { color: #999; background-color: #f3f3f3; } input[type="password"].readonly { color: #999; background-color: #f3f3f3; } input[type="password"][readonly=readonly] { color: #999; background-color: #f3f3f3; } input[type="text"] { background: #fff; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; } input[type="text"]::-webkit-input-placeholder { color: #aaa; } input[type="text"]:-ms-input-placeholder { color: #aaa; } input[type="text"]::-ms-input-placeholder { color: #aaa; } input[type="text"]::placeholder { color: #aaa; } input[type="text"]:disabled { color: #999; background-color: #f3f3f3; } input[type="text"]:-moz-read-only { color: #999; background-color: #f3f3f3; } input[type="text"]:read-only { color: #999; background-color: #f3f3f3; } input[type="text"].readonly { color: #999; background-color: #f3f3f3; } input[type="text"]:disabled + .cal_btn { opacity: 0.5; } input[type="tel"] { background: #fff; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; } input[type="tel"]::-webkit-input-placeholder { color: #aaa; } input[type="tel"]:-ms-input-placeholder { color: #aaa; } input[type="tel"]::-ms-input-placeholder { color: #aaa; } input[type="tel"]::placeholder { color: #aaa; } input[type="tel"]:disabled { color: #999; background-color: #f3f3f3; } input[type="tel"]:-moz-read-only { color: #999; background-color: #f3f3f3; } input[type="tel"]:read-only { color: #999; background-color: #f3f3f3; } input[type="tel"].readonly { color: #999; background-color: #f3f3f3; } input[type="tel"]:disabled + .cal_btn { opacity: 0.5; } input[type="number"]::-webkit-input-placeholder { color: #aaa; } input[type="number"]:-ms-input-placeholder { color: #aaa; } input[type="number"]::-ms-input-placeholder { color: #aaa; } input[type="number"]::placeholder { color: #aaa; } input[type="number"]:disabled { color: #999; background-color: #f3f3f3; } input[type="number"]:-moz-read-only { color: #999; background-color: #f3f3f3; } input[type="number"]:read-only { color: #999; background-color: #f3f3f3; } input[type="number"].readonly { color: #999; background-color: #f3f3f3; } select { min-width: 160px; height: 50px; padding: 5px 40px 5px 20px; font-size: 18px; color: #888; appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; background: #fff url("../images/select-icon.png") no-repeat right 20px center; vertical-align: top; border: 1px solid #e5e5e5; } select::-ms-expand { display: none; } select:focus, select:active { outline: none; } select:disabled { color: #999; background-color: #f8f8f8; opacity: 1; } textarea { padding: 10px 20px; font-family: "mont-R", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 18px; color: #333; letter-spacing: -0.02em; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; vertical-align: top; background: #fff; border: 1px solid #e5e5e5; resize: none; } textarea:focus, textarea:active { outline: none; } textarea::-webkit-input-placeholder { color: #aaa; } textarea:-ms-input-placeholder { color: #aaa; } textarea::-ms-input-placeholder { color: #aaa; } textarea::placeholder { color: #aaa; } textarea:disabled { color: #999; background-color: #f3f3f3; } textarea:-moz-read-only { color: #999; background-color: #f3f3f3; } textarea:read-only { color: #999; background-color: #f3f3f3; } a { text-decoration: none; color: #666; } a:hover, a:focus, a:active { text-decoration: none; } table { width: 100%; border-collapse: collapse; table-layout: fixed; } button { background: none; border: none; padding: 0; margin: 0; font-family: "mont-R", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 18px; cursor: pointer; overflow: visible; white-space: nowrap; } button:focus, button:active { outline: none; } button::-moz-focus-inner { padding: 0; border: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } @media all and (max-width: 767px) { body { font-size: 14px; } input, select { height: 45px; font-size: 14px; } textarea { height: 120px; font-size: 14px; } button { font-size: 14px; } } /* 2021-08-31 단일클래스 common으로 이동 */ .skip { overflow: hidden; width: 1px; height: 1px; position: absolute; font-size: 0; color: transparent; } .half_wrap::after { content: ""; display: block; clear: both; } .half_wrap .half { float: left; width: 50%; } .mt0 { margin-top: 0 !important; } .align_right { text-align: right; } .align_left { text-align: left; } .align_center { text-align: center; } .point_fill_text { display: inline-block; padding: 3px; background-color: #2f7d4e; color: #fff; } .point_text { color: #2f7d4e; } .gray_fill_text { display: inline-block; padding: 3px; background-color: #888; color: #fff; } /*본문 바로가기*/ .go_cont { position: fixed; top: -50px; left: 0; width: 100%; height: 50px; padding: 15px 0; color: #fff; line-height: 1; z-index: 30; text-align: center; background: #272727; } .go_cont:focus { top: 0; } .dimd { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, 0.5); } .loading { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 300; background: url("../images/loading.gif") no-repeat center; background-size: cover; } #wrap { position: relative; } .inner { width: 1380px; max-width: calc(100% - 240px); margin: 0 auto; } @media all and (max-width: 1750px) { .inner { width: calc(100% - 160px); max-width: calc(100% - 160px); } } @media all and (max-width: 1023px) { .inner { width: 92%; max-width: 92%; } } .sub_body { position: relative; width: 100%; } .sub_body .location { padding: 33px 120px 0; font-size: 15px; font-weight: 400; color: #888; line-height: 1.5; } .sub_body .location:after { content: ""; display: block; clear: both; } .sub_body .location > * { float: left; } .sub_body .location > div { position: relative; padding-left: 20px; } .sub_body .location > div:before { content: ""; position: absolute; top: calc(50% - 1px); left: 0; right: auto; width: 5px; display: block; height: 1px; margin: 0 8px; background: #ddd; vertical-align: middle; } .sub_body .location > div:last-child { color: #333; } .sub_body .title_area { width: 1380px; max-width: calc(100% - 240px); margin: 0 auto; margin-top: 175px; } @media all and (max-width: 1750px) { .sub_body .title_area { width: calc(100% - 160px); max-width: calc(100% - 160px); } } @media all and (max-width: 1023px) { .sub_body .title_area { width: 92%; max-width: 92%; } } .sub_body .title_area h2 { margin-bottom: 50px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 60px; font-weight: 700; color: #333; line-height: 1; letter-spacing: -0.06em; word-break: keep-all; } .sub_body .title_area h2:last-child { margin-bottom: 0; } .sub_body .title_area .h2_txt { margin-top: 80px; word-break: keep-all; } .sub_body .title_area h2 + .h2_txt { margin-top: 0; } @media all and (max-width: 1750px) { .sub_body .location { padding: 33px 50px 0; } .sub_body .title_area { width: 1380px; max-width: calc(100% - 240px); margin: 0 auto; margin-top: 175px; } } @media all and (max-width: 1750px) and (max-width: 1750px) { .sub_body .title_area { width: calc(100% - 160px); max-width: calc(100% - 160px); } } @media all and (max-width: 1750px) and (max-width: 1023px) { .sub_body .title_area { width: 92%; max-width: 92%; } } @media all and (max-width: 1023px) { #wrap { overflow: hidden; } .sub_body .location { display: none; } .sub_body .title_area { margin-top: 120px; } .sub_body .title_area h2 { margin-bottom: 40px; } .sub_body .title_area .h2_txt br { display: none; } } @media all and (max-width: 767px) { .sub_body .title_area { margin-top: 60px; } .sub_body .title_area h2 { margin-bottom: 20px; font-size: 34px; } .sub_body .title_area h2:last-child { margin-bottom: 0; } .sub_body .title_area .h2_txt { margin-top: 25px; } .sub_body .title_area h2 + .h2_txt { margin-top: 0; } } #cBody { position: relative; width: 100%; padding-top: 158px; } #cBody .contents .fixed_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 1.8s ease; transition: all 1.8s ease; } #cBody .contents .fixed_bg.zone { background-image: url("../images/fixed-bg-zone.jpg"); } #cBody .contents .fixed_bg.tinker { background-image: url("../images/fixed-bg-tinker.jpg"); } #cBody .contents .fixed_bg.royal { background-image: url("../images/fixed-bg-royal.jpg"); } #cBody .contents .fixed_bg.wonder { background-image: url("../images/fixed-bg-wonder.jpg"); } #cBody .contents .fixed_bg.joy { background-image: url("../images/fixed-bg-joy.jpg"); } #cBody .contents .fixed_bg.under { background-image: url("../images/fixed-bg-under.jpg"); } #cBody .contents .fixed_bg.spring { background-image: url("../images/fixed-bg-spring.jpg"); } /* #cBody .contents .fixed_bg.performance { background-image: url("../images/fixed-bg-performance.jpg"); } */ #cBody .contents .fixed_bg.performance { background-image: url("../images/fixed-bg-performance_202205.jpg"); } #cBody .contents .fixed_bg.event { background-image: url("../images/fixed-bg-event.jpg"); } #cBody .contents .fixed_bg.festival {background: url("../images/festival/fixed-bg-festival.jpg") no-repeat top center;} #cBody .contents .fixed_bg.active { -webkit-transform: scale(1) rotate(0.001deg); transform: scale(1) rotate(0.001deg); } #cBody.colspan_case { /* 좌우 정렬 */ overflow: hidden; } #cBody.colspan_case .inner { padding-left: 600px; } #cBody.colspan_case.faq .inner { padding-left: 540px; } #cBody.colspan_case .sub_body { z-index: 1; } #cBody.colspan_case .sub_body .title_area { position: absolute; top: 220px; left: 50%; right: auto; width: auto; width: 1380px; max-width: calc(100% - 240px); margin: 0 auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 0; margin: 0; } @media all and (max-width: 1750px) { #cBody.colspan_case .sub_body .title_area { width: calc(100% - 160px); max-width: calc(100% - 160px); } } @media all and (max-width: 1023px) { #cBody.colspan_case .sub_body .title_area { width: 92%; max-width: 92%; } #cBody .contents .fixed_bg.festival { background: url("../images/festival/fixed-bg-festival_mo.jpg") no-repeat top center; background-size: contain; } } #cBody.colspan_case .sub_body .title_area:after { content: ""; display: block; clear: both; } #cBody.colspan_case .sub_body .title_area .title_inner { float: left; width: 600px; } #cBody.colspan_case .sub_body .title_area .h2_txt { width: 350px; } #cBody.colspan_case .sub_body .title_area .srch_area { width: 320px; } #cBody.colspan_case .sub_body .title_area .srch_area input { height: auto; } #cBody.colspan_case .sub_body .title_area .srch_area select { width: 160px; padding: 0 40px 10px 0; color: #333; border: none; border-bottom: 2px solid #333; background-position: right 13px; } #cBody.colspan_case .sub_body .title_area .srch_area .period { padding-top: 9px; border-bottom: 2px solid #000; } #cBody.colspan_case .sub_body .title_area .srch_area .period::after { content: ""; display: block; clear: both; } #cBody.colspan_case .sub_body .title_area .srch_area .period .form_div { float: left; position: relative; width: calc(50% - 24px); height: 40px; } #cBody.colspan_case .sub_body .title_area .srch_area .period .form_div label { position: absolute; font-size: 0; color: transparent; } #cBody.colspan_case .sub_body .title_area .srch_area .period .form_div input { width: calc(100% - 30px); margin-top: 6px; padding: 0; font-size: 18px; border: 0; } #cBody.colspan_case .sub_body .title_area .srch_area .period .form_div a { display: block; position: absolute; top: 5px; right: 0; width: 20px; height: 20px; background: url(../images/calendar-icon.png) no-repeat; font-size: 0; color: transparent; } #cBody.colspan_case .sub_body .title_area .srch_area .period .tilde { float: left; margin-top: 6px; width: 48px; text-align: center; font-size: 20px; font-weight: 400; color: #333; line-height: 1; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap { position: relative; margin-top: 14px; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap::after { content: ""; display: block; clear: both; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_ctrg { float: left; width: 80px; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_ctrg select { width: 100% !important; min-width: 0; padding: 4px 20px 10px 0 !important; background-position: right 17px; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_div { float: left; width: calc(100% - 96px); margin-left: 16px; height: 50px; padding: 3px 75px 9px 0; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_div input { height: auto; padding-top: 6px; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_div .refresh_btn { display: block; position: absolute; top: 10px; right: 0; width: 24px; height: 25px; background: url("../images/refresh-icon-b.png") no-repeat; text-indent: -999px; overflow: hidden; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_div .srch_btn { display: block; position: absolute; right: 35px; top: 8px; } #cBody.colspan_case .sub_body .title_area a.link_arrow { margin-top: 40px; } #cBody.colspan_case .sub_body .title_area .step_state li { font-size: 18px; font-weight: 400; color: #aaa; line-height: 20px; } #cBody.colspan_case .sub_body .title_area .step_state li.on { color: #2f7d4e; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: 700; } #cBody.colspan_case .sub_body .title_area .step_state li:not(:first-child) { margin-top: 20px; } #cBody.colspan_case .sub_body .title_area .step_state li span { display: inline-block; } #cBody.colspan_case .sub_body .title_area .step_state li .num { width: 20px; } #cBody.colspan_case .sub_body .title_area .step_state li .text { width: calc(100% - 20px); } #cBody.colspan_case .sub_body .title_area .center_info { margin-top: 77px; } #cBody.colspan_case .sub_body .title_area .center_info li { position: relative; padding-left: 12px; } #cBody.colspan_case .sub_body .title_area .center_info li::after { content: ""; display: block; clear: both; } #cBody.colspan_case .sub_body .title_area .center_info li::before { content: ''; display: block; position: absolute; top: calc(50% - 1px); left: 0; right: auto; width: 3px; height: 3px; border-radius: 3px; background-color: #aaa; } #cBody.colspan_case .sub_body .title_area .center_info li:not(:first-child) { margin-top: 11px; } #cBody.colspan_case .sub_body .title_area .center_info li .title { float: left; font-size: 16px; font-weight: 700; color: #888; line-height: 1.5; font-family: "mont-B", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; width: 60px; } #cBody.colspan_case .sub_body .title_area .center_info li .text { float: left; margin-left: 30px; font-size: 16px; font-weight: 400; color: #888; line-height: 1.5; width: calc(100% - 90px); } #cBody.colspan_case .sub_wrap { padding: 165px 0 180px; } #cBody.pd0 { padding-top: 0; } .sub_wrap { position: relative; width: 100%; padding: 100px 0 180px; } .sub_wrap.white_box { position: relative; top: 500px; margin-top: 150px; padding-top: 120px; padding-bottom: 180px; } .sub_wrap.white_box .tab_menu { position: absolute; top: -50px; left: calc(50% - 690px); right: auto; width: 100%; width: 1380px; max-width: calc(100% - 240px); margin: 0 auto; } @media all and (max-width: 1750px) { .sub_wrap.white_box .tab_menu { width: calc(100% - 160px); max-width: calc(100% - 160px); } } @media all and (max-width: 1023px) { .sub_wrap.white_box .tab_menu { width: 92%; max-width: 92%; } } .sub_wrap.white_box .tab_menu .swiper-wrapper .swiper-slide { color: rgba(255, 255, 255, 0.5); } .sub_wrap.white_box .tab_menu .swiper-wrapper .swiper-slide:not(:first-child):before { background-color: rgba(255, 255, 255, 0.3); } .sub_wrap.white_box .tab_menu .swiper-wrapper .swiper-slide.on { color: white; } .sub_wrap.white_box .inner { position: relative; } .sub_wrap.white_box:before { content: ""; position: absolute; top: 0; left: auto; right: 0; width: calc(100% - 120px); display: block; height: 100%; background: #fff; } .srch_area.type2.complete + .sub_wrap.white_box { margin-top: 0; } .sub_wrap.white_box .srch_area.type2.complete + .inner { margin-top: 90px; } @media all and (max-width: 1750px) { #cBody.colspan_case { /* 좌우 정렬 */ } #cBody.colspan_case .inner { padding-left: calc(50% - 150px); } #cBody.colspan_case.faq .inner{padding-left: calc(50% - 150px);} #cBody.colspan_case .sub_body { z-index: 1; } #cBody.colspan_case .sub_body .title_area { left: 80px; -webkit-transform: translateX(0); transform: translateX(0); } #cBody.colspan_case .sub_body .title_area .title_inner { width: calc(50% - 150px); } .sub_wrap.white_box { padding-top: 80px; } .sub_wrap.white_box .tab_menu { left: calc(50% - ((100% - 160px) /2)); } .sub_wrap.white_box:before { width: calc(100% - 80px); } .sub_wrap.white_box .card_list_type { width: calc(100% - 80px); margin: 0 auto; } .sub_wrap.white_box .result_box { width: calc(100% - 80px); margin: 0 auto; } .sub_wrap.white_box .srch_area.type3 { width: calc(100% - 80px); margin: 0 auto; } .sub_wrap.white_box .srch_area.type4 { width: calc(100% - 80px); margin: 0 auto; } .sub_wrap.white_box .card_list_type.performance.result_none { left: 0; } .sub_wrap.white_box .card_list_type.performance.result_none .result_box { left: 0; width: 100%; } } @media all and (max-width: 1200px) { #cBody { padding-top: 148px; } #cBody .contents .fixed_bg { background-position: right center; } } @media all and (max-width: 1023px) { /* #cBody { padding-top: 120px; } */ #cBody.colspan_case { /* 좌우 정렬 */ } #cBody.colspan_case .inner { padding-left: 0; } #cBody.colspan_case.faq .inner{padding-left:0;} #cBody.colspan_case .sub_body { padding-top: 120px; z-index: 1; } #cBody.colspan_case .sub_body .title_area { position: relative !important; top: 0 !important; left: 0 !important; bottom: auto !important; height: auto; margin: 0 auto; } #cBody.colspan_case .sub_body .title_area .title_inner { width: 100%; } #cBody.colspan_case .sub_body .title_area .h2_txt { width: 100%; } #cBody.colspan_case .sub_body .title_area .srch_area { width: 100%; } #cBody.colspan_case .sub_body .title_area .srch_area select { width: 100%; padding: 0 15px 15px 0; background-position: right 10px; } #cBody.colspan_case .sub_body .title_area h2 + .srch_area { margin-top: 100px; } #cBody.colspan_case .sub_body .title_area a.link_arrow { margin-top: 20px; } #cBody.colspan_case .sub_body .title_area .step_state:after { content: ""; display: block; clear: both; } #cBody.colspan_case .sub_body .title_area .step_state li { float: left; } #cBody.colspan_case .sub_body .title_area .step_state li:not(:first-child) { margin-top: 0; margin-left: 20px; } #cBody.colspan_case .sub_body .title_area .step_state li .num { width: auto; padding-right: 5px; } #cBody.colspan_case .sub_body .title_area .step_state li .text { width: auto; } #cBody.colspan_case .sub_wrap { padding: 80px 0 90px; } .srch_area.type2 + .sub_wrap.white_box .inner { padding-bottom: 90px; } .sub_wrap.white_box .tab_menu { left: 4%; } .sub_wrap.white_box:before { width: 96%; } .sub_wrap.white_box .card_list_type { position: relative; left: 2%; } .sub_wrap.white_box .result_box { position: relative; left: 3%; } .sub_wrap.white_box .card_list_type.performance.result_none { width: 96%; padding: 0; margin: 0 0 0 4vw; } .sub_wrap.white_box .srch_area.type3 { width: 96%; margin: 0 0 0 4vw; } .sub_wrap.white_box .srch_area.type4 { width: 96%; margin: 0 0 0 4vw; } } @media all and (max-width: 767px) { /* #cBody { padding-top: 60px; } */ #cBody .contents .fixed_bg { background-position: right top; } #cBody .contents .fixed_bg.zone { background-image: url("../images/fixed-bg-zone-m.jpg"); } /* #cBody .contents .fixed_bg.performance { background-image: url("../images/fixed-bg-performance-m.jpg"); } */ #cBody .contents .fixed_bg.performance { background-image: url("../images/fixed-bg-performance-m_202205.jpg"); } #cBody.colspan_case { /* 좌우 정렬 */ } #cBody.colspan_case .sub_body { padding-top: 60px; } #cBody.colspan_case .sub_body .title_area .step_state li { font-size: 14px; } #cBody.colspan_case .sub_body .title_area h2 + .srch_area { margin-top: 28px; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap { margin-top: 8px; } #cBody.colspan_case .sub_body .title_area .srch_area .period .form_div { width: calc(50% - 23px); } #cBody.colspan_case .sub_body .title_area .srch_area .period .form_div input { margin-top: 11px; font-size: 14px; } #cBody.colspan_case .sub_body .title_area .srch_area .period .form_div a { top: 11px; width: 16px; height: 16px; background-size: contain; background-image: url(../images/calendar-icon-m.png); } #cBody.colspan_case .sub_body .title_area .srch_area .period .tilde { margin-top: 10px; width: 46px; font-size: 18px; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_ctrg { width: 100px; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_div { width: calc(100% - 110px); height: 45px; margin-left: 10px; padding-right: 60px; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_div input { padding-top: 7px; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_div .srch_btn { top: 12px; right: 32px; } #cBody.colspan_case .sub_body .title_area .srch_area .period + .srch_wrap .srch_div .refresh_btn { top: 12px; width: 18px; height: 19px; background-image: url(../images/refresh-icon-b-m.png); background-size: contain; } #cBody.colspan_case .sub_body .title_area .center_info { margin-top: 45px; } #cBody.colspan_case .sub_body .title_area .center_info li:not(:first-child) { margin-top: 11px; } #cBody.colspan_case .sub_body .title_area .center_info li .title { font-size: 13px; } #cBody.colspan_case .sub_body .title_area .center_info li .text { margin-left: 0; font-size: 13px; width: calc(100% - 70px); } #cBody.colspan_case .sub_wrap { padding: 40px 0 90px; } .sub_wrap { padding: 50px 0 90px; } .sub_wrap.white_box { top: 500px; margin-top: 90px; padding-top: 50px; padding-bottom: 90px; } .sub_wrap.white_box .tab_menu { top: -40px; } .sub_wrap.white_box .card_list_type { width: 74%; } .sub_wrap.white_box .result_box { width: 92%; } .sub_wrap.white_box .srch_area.type2.complete + .inner { margin-top: 50px; } .sub_wrap.white_box.performance { padding-top: 4vw; } } .family_div { display: none; position: relative; width: 100%; padding: 4px 120px 3px; background: #f8f8f8; border-bottom: 1px solid #eee; } .family_div a { display: inline-block; height: 30px; margin-right: 20px; } .family_div a:nth-child(1) span { padding-left: 40px; } .family_div a span { display: inline-block; padding-left: 30px; font-size: 12px; font-weight: 400; color: #888; line-height: 27px; } .family_div a.av_jamsil span { background: url("../images/av_jamsil-logo.png") no-repeat 0 center; } .family_div a.sky span { background: url("../images/sky-logo.png") no-repeat 0 center; } .family_div a.aqua span { background: url("../images/aqua-logo.png") no-repeat 0 center; } .family_div a.water span { background: url("../images/water-logo.png") no-repeat 0 center; } .family_div a.aqua_vn span{background: url("../images/aqua-vn-logo.png") no-repeat 0 center;} /* header */ #header { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } #header .header_div { position: relative; width: 100%; background: #fff; overflow: hidden; height: 120px; -webkit-transition: background 0.4s ease; transition: background 0.4s ease; } #header .header_div:after { content: ""; position: absolute; top: 119px; left: 0; right: auto; width: 100%; display: block; border-top: 1px solid #ddd; } #header .header_div .logo { position: absolute; top: 0; left: 120px; right: auto; width: auto; z-index: 2; } #header .header_div .logo a { display: block; width: 110px; height: 120px; text-indent: -999px; overflow: hidden; background: url("../images/logo.png") no-repeat center; background-size: 100% auto; } #header .header_div .util { position: absolute; top: 0; left: auto; right: 0; width: auto; z-index: 1; } #header .header_div .util > * { float: left; } #header .header_div .util a { position: relative; display: block; margin: 0 10px; padding: 62px 0 36px; font-size: 16px; font-weight: 500; color: #333; line-height: 1.5; } #header .header_div .util a:before { content: ""; position: absolute; top: 66px; left: -10px; right: auto; width: 1px; display: block; width: 1px; height: 15px; background: #e5e5e5; } #header .header_div .util a:first-child:before { display: none; } #header .header_div .util a:nth-child(3) { margin-right: 0; } #header .header_div .util .all_srch_btn { display: block; width: 115px; margin: 0; padding: 60px 0 36px; text-indent: -999px; background: url("../images/srch-icon.png") no-repeat center 60px; overflow: hidden; } #header .header_div .util .ticket_div { position: relative; width: 140px; height: 120px; margin-left: 10px; background: #2f7d4e; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } #header .header_div .util .ticket_div a { display: block; width: 100%; height: 100%; margin: 0; padding: 34px 20px 0; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 18px; font-weight: 700; color: #fff; line-height: 1.8; text-align: center; } #header .header_div .util .ticket_div a span { display: block; padding-top: 35px; background: url("../images/ticket-icon.png") no-repeat center 0; } #header .header_div .util .ticket_div:hover, #header .header_div .util .ticket_div:active { margin-left: 0; width: 150px; } #header .header_div .util .m_menu_btn { display: none; } #header .srch_open_div { position: fixed; top: -400px; left: 0; width: 100%; padding: 150px 0 115px; background: #fff; z-index: 2; } #header .srch_open_div .srch_area { width: 660px; margin: 0 auto; } #header .srch_open_div .srch_area .srch_div { padding: 0 90px 15px 0; } #header .srch_open_div .srch_area .srch_div .delete_btn { position: absolute; top: 6px; left: auto; right: 45px; width: 26px; display: block; height: 26px; background: #ddd url("../images/delete-icon.png") no-repeat center; border-radius: 50%; } #header .srch_open_div .srch_area .srch_div .srch_btn { top: 5px; } #header .srch_open_div .srch_area input { font-size: 26px; letter-spacing: -0.06em; } #header .srch_open_div .srch_area .srch_surf { margin-top: 40px; } #header .srch_open_div .srch_area .srch_surf:before { content: "ex"; display: inline-block; margin-right: 20px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 22px; font-weight: 700; color: #666; line-height: 1.5; } #header .srch_open_div .srch_area .srch_surf a { font-size: 20px; font-weight: 400; color: #aaa; line-height: 1.5; } #header .srch_open_div .srch_area .srch_surf a:after { content: ""; display: inline-block; width: 1px; height: 15px; margin: 0 7px 0 10px; background: #aaa; } #header .srch_open_div .srch_area .srch_surf a:last-child:after { display: none; } #header .srch_open_div .close_btn { position: absolute; top: 0; left: auto; right: 0; width: 85px; height: 85px; text-indent: -999px; overflow: hidden; background: url("../images/close-btn-icon.png") no-repeat center; z-index: 1; } #header.white_type .header_div { background: none; } #header.white_type .header_div:after { border-top: 1px solid rgba(255, 255, 255, 0.2); } #header.white_type .header_div .logo a { background-image: url("../images/logo-w.png"); } #header.white_type .header_div .util a { color: #fff; } #header.white_type .header_div .util a:before { background: rgba(255, 255, 255, 0.2); } #header.white_type .header_div .one_depth { color: #fff; } #header.white_type .header_div .all_srch_btn { background-image: url("../images/srch-icon-w.png"); } #header.white_type + #cBody .sub_body .location { color: #fff; } #header.white_type + #cBody .sub_body .location .home { opacity: 0.6; } #header.white_type + #cBody .sub_body .location > div { opacity: 0.6; } #header.white_type + #cBody .sub_body .location > div:last-child { opacity: 1; color: #fff; } #header.white_type + #cBody .sub_body .title_area h2 { color: #fff; } #header.over .header_div, #header.scroll_up .header_div { background: #fff; } #header.over .header_div:after, #header.scroll_up .header_div:after { border-top: 1px solid #ddd; } #header.over .header_div .logo a, #header.scroll_up .header_div .logo a { background-image: url("../images/logo.png"); } #header.over .header_div .util a, #header.scroll_up .header_div .util a { color: #333; } #header.over .header_div .util a:before, #header.scroll_up .header_div .util a:before { background: #e5e5e5; } #header.over .header_div .util .ticket_div a, #header.scroll_up .header_div .util .ticket_div a { color: #fff; } #header.over .header_div .one_depth, #header.scroll_up .header_div .one_depth { color: #333; } #header.over .header_div .all_srch_btn, #header.scroll_up .header_div .all_srch_btn { background-image: url("../images/srch-icon.png"); } #header.hide { top: -100%; } #header:not(.scroll_up) .family_div { display: block; } @media all and (max-width: 1750px) { .family_div { padding: 4px 50px 3px; } #header .header_div .logo { left: 50px; } } @media all and (max-width: 1200px) { #header .header_div { height: 110px; } #header .header_div:after { top: 109px; } #header .header_div .logo a { width: 92px; height: 110px; background-image: url("../images/logo-1024.png"); } #header .header_div .util a { padding: 52px 0 30px; font-size: 14px; } #header .header_div .util a:before { top: 55px; } #header .header_div .util .all_srch_btn { width: 60px; padding: 50px 0 36px; background-position: center 50px; } #header .header_div .util .ticket_div { width: 100px; height: 110px; } #header .header_div .util .ticket_div a { font-size: 14px; } #header .header_div .util .ticket_div a span { padding-top: 30px; } #header .header_div .util .ticket_div:hover, #header .header_div .util .ticket_div:active { width: 110px; } #header.white_type .header_div .logo a { background-image: url("../images/logo-1024-w.png"); } #header.over .header_div .logo a, #header.scroll_up .header_div .logo a { background-image: url("../images/logo-1024.png"); } } @media all and (max-width: 1023px) { #cBody{padding-top:100px;} #header{height:100%;} #header .header_div .logo a{height:100px;} .family_div { display: block; position: absolute; top: 220px; left: 0; right: auto; width: 100%; padding: 0; z-index: 1; font-size:0; text-align: center;} .family_div:after { content: ""; display: block; clear: both; } .family_div a { display: inline-block; height: auto; margin-right: 0; text-align: center; border-top: 2px solid #eee; border-right: 2px solid #eee; } .family_div a:nth-child(even) { border-right: none; } .family_div a span { padding: 25px 30px; font-size: 12px; font-weight: 400; color: #888; line-height: 27px; } #header { left: 100%; background: #fff; z-index: 21; -webkit-transition: inherit; transition: inherit; } #header:before { content: ""; position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100px; background: #fff; border: none; z-index: 2; } #header:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #fff; } #header .header_div { top: 380px; min-height: 100vh; height: auto; padding-bottom: 380px; overflow: visible; } #header .header_div:after { display: none; } #header .header_div .logo { position: fixed; top: 0; left: 4%; z-index: 2; } #header .header_div .util { width: 100%; top: 0; z-index: 2; background: #2f7d4e; } #header .header_div .util.fixed { position: fixed; top: 100px; left: 0; } #header .header_div .util a, #header .header_div .util .ticket_div { float: left; width: 50%; height: 62px; padding:15px 0; margin: 0; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 18px; font-weight: 700; color: #fff; line-height:32px; text-align: center; } #header .header_div .util a:before, #header .header_div .util .ticket_div:before { content: ""; display: block; position: absolute; top: 18px; left: 0; right: auto; width: 1px; height: 26px; background: rgba(255, 255, 255, 0.2); } #header .header_div .util .all_srch_btn { position: fixed; top: 0; right: calc(8% + 36px); width: 34px; height: 100px; padding: 0; background-image: url("../images/srch-icon-m.png"); background-position: center; } #header .header_div .util .all_srch_btn:before { display: none; } #header .header_div .util .ticket_div { padding: 0; } #header .header_div .util .ticket_div a { padding: 34px 0; font-size: 18px; } #header .header_div .util .ticket_div a span { padding: 0; background: none; } #header .header_div .util .ticket_div:hover, #header .header_div .util .ticket_div:active { width: 50%; margin-left: 0; } #header .header_div .util .m_menu_btn { position: fixed; top: 0; right: 4%; display: block; width: 36px; height: 100px; margin: 0; padding: 0; background: none; } #header .header_div .util .m_menu_btn:before { display: none; } #header .header_div .util .m_menu_btn span { position: absolute; top: 49px; left: 0; right: auto; width: 36px; display: block; height: 3px; background: #333; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } #header .header_div .util .m_menu_btn span:nth-child(1) { top: 36px; -webkit-transform: rotate(0); transform: rotate(0); } #header .header_div .util .m_menu_btn span:nth-child(3) { top: 62px; -webkit-transform: rotate(0); transform: rotate(0); } #header .header_div .util .m_menu_btn.on span { width: 35px; } #header .header_div .util .m_menu_btn.on span:nth-child(1) { top: 49px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #header .header_div .util .m_menu_btn.on span:nth-child(2) { opacity: 0; } #header .header_div .util .m_menu_btn.on span:nth-child(3) { top: 49px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } #header .header_div .util a:nth-child(1){position:absolute;top:62px;left:0;width:100%;height:72px;padding:20px 0;background: linear-gradient(131deg, #8ac448 0%, #169c00 100%);} #header .header_div .util a:nth-child(1) span{position:relative;padding-left:62px;display:inline-block;line-height:32px;font-weight:bold;} #header .header_div .util a:nth-child(1) span::before{position:absolute;left:0;top:50%;transform:translateY(-50%);content:'';margin-right:12px;display:inline-block;width:50px;height:30px;background: url("../images/gnb/ico_ticket.png") no-repeat center center;background-size:contain;} #header .header_div .gnb{padding-top:0;} #header .header_div { min-height:auto; top:232px; padding-bottom:0;} #header .header_div .gnb_div{height:calc(100vh - 340px);overflow:auto;-webkit-overflow-scrolling:touch;} #header .srch_open_div { top: -100%; height: 100%; padding: 0; background: #fff; } #header .srch_open_div .srch_area { position: absolute; top: 50%; left: 50%; right: auto; width: 68%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #header.white_type:before { background: transparent; border-color: transparent; } #header.white_type .header_div:after { display: none; } #header.white_type .header_div .one_depth { color: #333; } #header.white_type .header_div .one_depth.on, #header.white_type .header_div .one_depth:hover, #header.white_type .header_div .one_depth:active { color: #333; } #header.white_type .header_div .one_depth.on { padding-bottom: 20px; color: #2f7d4e; } #header.white_type .header_div .all_srch_btn { background-image: url("../images/srch-icon-w-m.png"); } #header.white_type .header_div .util .m_menu_btn span { background: #fff; } #header.over:before, #header.scroll_up:before { background: #fff;} #header.over .header_div, #header.scroll_up .header_div { background: none; } #header.over .header_div:after, #header.scroll_up .header_div:after { display: none; } #header.over .header_div .logo a, #header.scroll_up .header_div .logo a { background-image: url("../images/logo.png"); } #header.over .header_div .util a, #header.scroll_up .header_div .util a { color: #fff; } #header.over .header_div .util a:before, #header.scroll_up .header_div .util a:before { background: rgba(255, 255, 255, 0.2); } #header.over .header_div .util .ticket_div a, #header.scroll_up .header_div .util .ticket_div a { color: #fff; } #header.over .header_div .util .m_menu_btn span, #header.scroll_up .header_div .util .m_menu_btn span { background: #333; } #header.over .header_div .all_srch_btn, #header.scroll_up .header_div .all_srch_btn { background-image: url("../images/srch-icon-m.png"); } .family_div { bottom:0; top:initial; padding:20px 0;background:#fff; border:none; border-top:8px solid #f2f2f2; z-index:10;} .family_div::after{position:absolute;left:0;top:-8px;content:'';display:inline-block;width:100%;height:1px;background:#dadada;} .family_div a {position:relative;width:calc(100% / 3);border:none;} .family_div a:nth-child(even) {border-right: none;} .family_div a:nth-child(1) span{padding:0;} .family_div a::after{position:absolute;top:20px;left:0;content:'';display:inline-block;width:1px;height:27px;background-color:#e1e1e1;} .family_div a:nth-child(1)::after{display:none;} .family_div a:nth-child(4)::after{display:none;} .family_div a span {padding:0;display:block;height:60px;font-size:0;background-size:contain!important;} .family_div a.av_jamsil span { background: url("../images/gnb/m_link_icon1.png") no-repeat center center; } .family_div a.sky span { background: url("../images/gnb/m_link_icon2.png") no-repeat center center; } .family_div a.aqua span { background: url("../images/gnb/m_link_icon3.png") no-repeat center center; } .family_div a.water span { background: url("../images/gnb/m_link_icon4.png") no-repeat center center; } .family_div a.aqua_vn span {background: url("../images/gnb/m_link_icon5.png") no-repeat center center;} } @media all and (max-width: 767px) { #cBody { padding-top: 60px; } #header{height:100%;} .family_div { bottom:0; top:initial; padding:20px 0;background:#fff; border:none; border-top:8px solid #f2f2f2; z-index:10;} .family_div::after{position:absolute;left:0;top:-8px;content:'';display:inline-block;width:100%;height:1px;background:#dadada;} .family_div a {position:relative;width:calc(100% / 3);border:none;} .family_div a:nth-child(even) {border-right: none;} .family_div a:nth-child(1) span{padding:0;} .family_div a::after{position:absolute;top:20px;left:0;content:'';display:inline-block;width:1px;height:27px;background-color:#e1e1e1;} .family_div a:nth-child(1)::after{display:none;} .family_div a span {padding:0;display:block;height:60px;font-size:0;background-size:contain!important;} .family_div a.av_jamsil span { background: url("../images/gnb/m_link_icon1.png") no-repeat center center; } .family_div a.sky span { background: url("../images/gnb/m_link_icon2.png") no-repeat center center; } .family_div a.aqua span { background: url("../images/gnb/m_link_icon3.png") no-repeat center center; } .family_div a.water span { background: url("../images/gnb/m_link_icon4.png") no-repeat center center; } .family_div a.aqua_vn span {background: url("../images/gnb/m_link_icon5.png") no-repeat center center;} #header:before { height: 60px; } #header .header_div { min-height:auto; top: 175px; padding-bottom:0;} #header .header_div .gnb_div{padding-bottom:100px;height:calc(100vh - 285px);overflow:auto;-webkit-overflow-scrolling:touch;} #header .header_div:after { display: none; } #header .header_div .logo a { width: 55px; height: 60px; background-image: url("../images/logo.png"); } #header .header_div .util.fixed { top: 60px; text-align:center;} #header .header_div .util a, #header .header_div .util .ticket_div a { height: 50px; padding: 14px 0; font-size: 14px; font-weight: 500; color: #fff; line-height: 1.5; } #header .header_div .util a:before, #header .header_div .util .ticket_div a:before { position: absolute; top: 18px; left: 0; right: auto; width: 1px; height: 13px; } #header .header_div .util a:nth-child(1){position:absolute;top:50px;left:0;width:100%;height:65px;padding:14px 0;background: linear-gradient(131deg, #8ac448 0%, #169c00 100%);} #header .header_div .util a:nth-child(1) span{position:relative;padding-left:31px;display:inline-block;line-height:37px;font-weight:bold;} #header .header_div .util a:nth-child(1) span::before{position:absolute;left:0;top:50%;transform:translateY(-50%);content:'';margin-right:6px;display:inline-block;width:25px;height:15px;background: url("../images/gnb/ico_ticket.png") no-repeat center center;background-size:contain;} #header .header_div .util a:nth-child(2), #header .header_div .util a:nth-child(3){width:50%;} #header .header_div .util a:nth-child(2)::before{display:none;} #header .header_div .util .all_srch_btn { right: calc(8% + 18px); width: 17px; height: 60px; background-size: 17px auto; } #header .header_div .util .ticket_div { height: 50px; } #header .header_div .util .ticket_div::before { position: absolute; top: 18px; left: 0; right: auto; width: 1px; height: 13px; } #header .header_div .util .m_menu_btn { width: 18px; height: 60px; } #header .header_div .util .m_menu_btn span { position: absolute; top: 30px; left: 0; right: auto; width: 18px; height: 2px; } #header .header_div .util .m_menu_btn span:nth-child(1) { top: 24px; } #header .header_div .util .m_menu_btn span:nth-child(3) { top: 36px; } #header .header_div .util .m_menu_btn.on span { width: 18px; } #header .header_div .util .m_menu_btn.on span:nth-child(1) { top: 30px; } #header .header_div .util .m_menu_btn.on span:nth-child(3) { top: 30px; } #header .header_div .gnb{padding-top:0;} #header .srch_open_div .srch_area .srch_div { padding: 0 45px 10px 0; } #header .srch_open_div .srch_area .srch_div .delete_btn { position: absolute; top: 6px; left: auto; right: 28px; width: 15px; display: block; height: 15px; background-size: 7px; } #header .srch_open_div .srch_area .srch_div .srch_btn { width: 18px; height: 18px; background-size: contain; } #header .srch_open_div .srch_area input { font-size: 18px; } #header .srch_open_div .srch_area .srch_surf { margin-top: 20px; } #header .srch_open_div .srch_area .srch_surf:before { margin-right: 15px; font-size: 16px; } #header .srch_open_div .srch_area .srch_surf a { font-size: 15px; } #header .srch_open_div .srch_area .srch_surf a:after { margin-top: -3px; background-color: #e5e5e5; vertical-align: middle; } #header .srch_open_div .close_btn { position: absolute; top: 0; left: auto; right: 0; width: 45px; height: 45px; background-size: 15px; } #header.white_type .header_div .logo a { background-image: url("../images/logo-w.png"); } #header.over .header_div .logo a, #header.scroll_up .header_div .logo a { background-image: url("../images/logo.png"); } } /* gnb */ .gnb_div { position: relative; z-index: 1; } .gnb_div .open_info { position: absolute; top: 180px; left: 120px; right: auto; width: auto; padding: 38px 0 38px 155px; font-size: 16px; font-weight: 400; color: #666; line-height: 1.5; background: url("../images/gnb-bg-icon.png") no-repeat 0 center; } .gnb_div .open_info .time {margin-top:5px;font-family: "mont-B", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 22px; font-weight: 700; color: #333; line-height: 1.5; } .gnb { width: 670px; margin: 0 auto; } .gnb:after { content: ""; display: block; clear: both; } .gnb > li { position: relative; float: left; margin-right: 20px; } .gnb > li:last-child { margin-right: 0; } .gnb .one_depth { position: relative; display: block; padding: 55px 20px 32px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 22px; font-weight: 700; color: #333; line-height: 1.5; word-break: keep-all; } .gnb .one_depth span { display: block; } .gnb .one_depth:after { content: ""; position: absolute; top: auto; left: 0; right: auto; width: 0; bottom: 0; display: block; height: 3px; background: #2f7d4e; -webkit-transition: width 0.4s ease; transition: width 0.4s ease; overflow: hidden; } .gnb .one_depth.active.on, .gnb .one_depth.hover { color: #2f7d4e; } .gnb .one_depth.active.on:after, .gnb .one_depth.hover:after { width: 100%; } .gnb .two_depth { padding: 50px 0; text-align: center; } .gnb .two_depth > li { margin-top: 10px; } .gnb .two_depth a { display: block; font-size: 16px; font-weight: 400; color: #666; line-height: 1.5; } .gnb .two_depth a:hover, .gnb .two_depth a.active { color: #2f7d4e; } @media all and (max-width: 1750px) { .gnb_div .open_info { left: 50px; padding-left: 105px; font-size: 15px; background-size: 95px; } .gnb_div .open_info .time { font-size: 16px; } .gnb { position: relative; left: -10px; } .gnb .one_depth { padding: 55px 10px 32px; } } @media all and (max-width: 1200px) { .gnb_div .open_info { position: absolute; top: 160px; left: 50px; right: auto; width: auto; padding: 110px 0 0; font-size: 15px; background-size: 95px; background-position: center 0; } .gnb_div .open_info .date{line-height:1;} .gnb_div .open_info .open_txt_box{line-height:1;margin-top:5px;} .gnb_div .open_info .time {margin-top:10px;font-size: 16px; } .gnb { width: 500px; } .gnb > li { position: relative; margin-right: 0; } .gnb .one_depth { padding: 50px 20px 32px; font-size: 18px; } .gnb .two_depth a { font-size: 15px; } } @media all and (max-width: 1023px) { .gnb_div { position: relative; top: 0; z-index: 1; } .gnb_div .open_info { display: none; } .gnb { display: block; left: 0; width: 100%; padding-top: 20px; } .gnb > li { float: none; } .gnb .one_depth { padding: 33px 4%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .gnb .one_depth:before, .gnb .one_depth:after { content: ""; position: absolute; top: 48px; left: auto; right: 4%; width: 20px; display: block; height: 2px; background: #333; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .gnb .one_depth:before { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .gnb .one_depth.on, .gnb .one_depth:hover, .gnb .one_depth:active { color: #333; } .gnb .one_depth.on:after, .gnb .one_depth:hover:after, .gnb .one_depth:active:after { width: 20px; } .gnb .one_depth.on { padding-bottom: 20px; color: #2f7d4e; } .gnb .one_depth.on:before { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .gnb .two_depth { display: none; position: relative; padding: 0; text-align: left; } .gnb .two_depth > li { margin-top: 0; } .gnb .two_depth a { display: block; padding: 20px 4%; font-size: 16px; font-weight: 400; color: #666; line-height: 1.5; } .gnb .two_depth a:hover, .gnb .two_depth a.active { color: #2f7d4e; } } @media all and (max-width: 767px) { .gnb .one_depth { padding: 16px 4%; font-size: 21px; font-weight: 700; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; } .gnb .one_depth:before, .gnb .one_depth:after { position: absolute; top: 30px; left: auto; right: 4%; width: 15px; } .gnb .one_depth.on:after, .gnb .one_depth:hover:after, .gnb .one_depth:active:after { width: 15px; } .gnb .one_depth.on { padding-bottom: 10px; } .gnb .two_depth > li { margin-top: 0; } .gnb .two_depth a { padding: 10px 4%; font-size: "mobile"; font-weight: 400; color: #666; line-height: 1.5; } } /* footer */ #footer { position: relative; width: 100%; padding: 100px 120px; border-top: 1px solid #e5e5e5; background: #fff; } #footer:after { content: ""; display: block; clear: both; } #footer .logo { float: left; margin-right: 140px; } #footer .left_div { float: left; } #footer .etc_div { position: absolute; top: 100px; left: auto; right: 120px; width: auto; } #footer .links { margin-bottom: 50px; } #footer .links a { display: inline-block; font-size: 16px; font-weight: 400; color: #666; line-height: 1.5; } #footer .links a.privacy { color: #e10000; } #footer .links a:after { content: ""; display: inline-block; width: 1px; height: 14px; margin: 0 7px 0 10px; background: #e5e5e5; } #footer .links a:last-child:after { display: none; } #footer .address { font-size: 16px; font-weight: 400; color: #666; line-height: 2; } #footer .address strong { font-weight: normal; } #footer .address strong:after { content: ""; display: inline-block; width: 1px; height: 14px; margin: 0 7px 0 10px; background: #e5e5e5; } #footer .address strong:last-child:after { display: none; } #footer .copy { margin-top: 40px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 16px; font-weight: normal; color: #aaa; line-height: 1; } #footer .copy br { display: none; } #footer .partner_site select { width: 100%; height: auto; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 18px; font-weight: 700; color: #333; line-height: 1.5; border: none; background-position: right center; } #footer .sns_div { margin-top: 30px; text-align: right; } #footer .sns_div a { display: inline-block; width: 42px; height: 42px; margin-right: 7px; text-indent: -999px; font-size: 0; overflow: hidden; background-repeat: no-repeat; background-position: center; } #footer .sns_div a.facebook { background-image: url("../images/sns-facebook.png"); } #footer .sns_div a.youtube { background-image: url("../images/sns-youtube.png"); } #footer .sns_div a.instagram { background-image: url("../images/sns-instagram.png"); } #footer .sns_div a:last-child { margin-right: 0; } @media all and (max-width: 1750px) { #footer { padding: 80px 50px; } #footer .logo { margin-right: 50px; } #footer .logo img { width: 120px; } #footer .left_div { width: calc(100% - 400px); } #footer .etc_div { top: 80px; right: 50px; } #footer .links { margin-bottom: 25px; } #footer .links a { font-size: 14px; } #footer .links a:after { margin-top: -2px; vertical-align: middle; } #footer .links a:last-child:after { display: none; } #footer .address { font-size: 14px; } #footer .address strong { font-weight: normal; } #footer .address strong:after { margin-top: -2px; vertical-align: middle; } #footer .copy { margin-top: 20px; font-size: 14px; } #footer .partner_site select { font-size: 14px; } #footer .sns_div { margin-top: 15px; } #footer .sns_div a { width: 32px; height: 32px; background-size: 100%; } } @media all and (max-width: 1023px) { #footer { padding: 40px 4%; } #footer .logo { margin-right: 0; display: none; } #footer .left_div { float: none; width: 100%; } #footer .etc_div { position: relative; top: 0; right: 0; } #footer .links { margin-bottom: 30px; } #footer .links a { font-size: 13px; } #footer .address { font-size: 13px; } #footer .address p { display: inline-block; } #footer .address p:last-child:before { content: ""; display: inline-block; width: 1px; height: 14px; margin: -2px 7px 0 10px; background: #e5e5e5; vertical-align: middle; } #footer .address p:first-child { display: block; } #footer .copy { margin-top: 10px; font-size: 13px; } #footer .partner_site { border-bottom: 2px solid #333; } #footer .partner_site select { padding-left: 0; } #footer .sns_div { margin-top: 25px; text-align: left; } } @media all and (max-width: 767px) { #footer { padding: 30px 4% 40px; } #footer .links { margin-bottom: 30px; } #footer .links a { font-size: 13px; } #footer .address { font-size: 13px; line-height: 1.5; } #footer .address p { display: block; } #footer .address p:last-child:before { display: none; } #footer .address p strong { display: block; } #footer .address p strong:after { display: none; } #footer .copy { margin-top: 10px; font-family: 'mont-R'; line-height: 1.5; } #footer .copy br { display: block; } #footer .partner_site { border-bottom: 1px solid #333; } #footer .sns_div { margin: 25px 0 20px; } } /* quick_menu */ .quick_div { position: fixed; bottom: 50px; right: 50px; z-index: 20; } .quick_div > a { display: block; width: 48px; height: 48px; margin: 10px auto 0; border-radius: 50%; text-align: center; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); } .quick_div > a:first-child { margin-top: 0; } .quick_div .share_area { position: relative; } .quick_div .share_btn { position: relative; display: block; width: 48px; height: 48px; border-radius: 50%; text-align: center; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); background: #333 url("../images/share-icon.png") no-repeat center; -webkit-transition: background-color 0.4s ease; transition: background-color 0.4s ease; z-index: 1; } .quick_div .share_btn.on { background-color: #2f7d4e; } .quick_div .share_open { position: absolute; top: 0; left: -185px; right: auto; width: 185px; display: none; } .quick_div .share_open:after { content: ""; display: block; clear: both; } .quick_div .share_open a { position: relative; left: 50px; display: block; float: left; width: 48px; height: 48px; margin-right: 10px; border-radius: 50%; text-align: center; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); opacity: 0; } .quick_div .share_open a:last-child { margin-right: 0; } .quick_div .share_open a span { display: block; width: 0; height: 0; font-size: 0; text-indent: -999px; overflow: hidden; } .quick_div .share_open a.kakao { background: #f9e000 url("../images/share-kakao.png") no-repeat center 12px; } .quick_div .share_open a.facebook { background: #3a5a9b url("../images/share-facebook.png") no-repeat center 12px; } .quick_div .share_open a.url { background: #888888 url("../images/share-url.png") no-repeat center 12px; } .quick_div .top_btn { font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 12px; font-weight: normal; color: #333; line-height: 46px; background: #fff; border: 1px solid #888; display: none; } .quick_div .top_btn span { display: block; } .quick_div .today_btn { position: relative; display: block; width: 140px; height: 140px; margin:0 auto; padding: 40px 20px 20px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 14px; font-weight: 700; color: #fff; line-height: 1.5; border-radius: 50%; text-align: center; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e50019+1,e88522+100 */ background: #e50019; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #e50019 0%, #e88522 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .quick_div .today_btn .time { margin-top: 3px; font-family: 'mont-R'; font-size: 16px; font-weight: normal; color: #fff; line-height: 1.5; } .quick_div .today_btn:after { content: ""; position: absolute; top: auto; left: 50%; right: auto; width: 30px; bottom: 20px; display: block; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: url("../images/today-plus-icon.png") no-repeat center; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .quick_div .today_open { position: fixed; bottom: 0; right: -1220px; width: 1220px; max-width: calc(100% - 120px); padding: 43px 0 37px 60px; background: #fff; z-index: 2; } .quick_div .today_open .tab_menu { margin-bottom: 30px; } .quick_div .today_open .tab_menu a { font-size: 24px; } .quick_div .today_open .today_roll { position: relative; padding-bottom: 35px; } .quick_div .today_open .today_roll:before { content: ''; display: block; position: absolute; top: auto; left: 0; right: auto; width: calc(100% - 60px); height: 2px; bottom: 0; background: #e5e5e5; } .quick_div .today_open .today_roll .swiper-slide { width: 240px; margin-right: 30px; } .quick_div .today_open .today_roll .swiper-slide:last-child { margin-right: 0; } .quick_div .today_open .today_roll .img_div { width: 240px; height: 283px; overflow: hidden; } .quick_div .today_open .today_roll .img_div img { width: 100%; } .quick_div .today_open .today_roll .txt_div { margin-top: 24px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 20px; font-weight: 700; color: #333; line-height: 1.5; } /* .quick_div .today_open .today_roll .txt_div p { min-height: 60px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } */ .quick_div .today_open .today_roll .txt_div p { min-height: 30px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .quick_div .today_open .today_roll .txt_div .period{font-size:16px;color:#666;} .quick_div .today_open .today_roll .swiper-scrollbar { height: 2px; position: absolute; top: auto; left: 0; right: auto; width: 100%; bottom: 0; background: #e5e5e5; } .quick_div .today_open .today_roll .swiper-scrollbar .swiper-scrollbar-drag { background: #2F7D4E; } .quick_div .today_open .today_time { margin-top: 37px; font-size: 24px; font-weight: 400; color: #333; line-height: 1.5; } .quick_div .today_open .today_time span { font-family: "mont-B", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; } .quick_div .today_open .result_box { padding: 125px 0; margin-right: 60px; } .quick_div .today_open .close_btn { position: absolute; top: 0; left: auto; right: 0; width: 85px; height: 85px; text-indent: -999px; overflow: hidden; background: url("../images/close-btn-icon.png") no-repeat center; z-index: 1; } .quick_div .chatbot{ cursor: pointer; margin:0; margin-right:0; bottom:0; position: relative; display: block; width: 207px; height: 125px; background:url("../images/ico_chatbot.png") no-repeat center center ; border-radius:0; box-shadow:none; } .quick_div .chatbot span{font-size:0;text-indent:-9999px;} @media all and (max-width: 1750px) { .quick_div { right: 50px; } .quick_div .today_open { max-width: calc(100% - 50px); } } @media all and (max-width: 1023px) { .quick_div { right: 4%; } .quick_div .today_open { right: -100%; width: 100%; max-width: 100%; padding: 43px 0 37px 4%; } .quick_div .today_open .today_roll:before { width: 96%; } .quick_div .today_open .result_box { margin-right: 4%; } } @media all and (max-width: 767px) { .quick_div > a { width: 37px; height: 37px; } .quick_div .share_btn { width: 37px; height: 37px; background-image: url("../images/share-icon-m.png"); background-size: 16px; background-position: 10px 10px; } .quick_div .share_open { position: absolute; top: 0; left: -142px; right: auto; width: 142px; } .quick_div .share_open a { width: 37px; height: 37px; } .quick_div .share_open a.kakao { background: #f9e000 url("../images/share-kakao-m.png") no-repeat center 8px; background-size: 25px 22px; } .quick_div .share_open a.facebook { background: #3a5a9b url("../images/share-facebook-m.png") no-repeat center 8px; background-size: 25px 22px; } .quick_div .share_open a.url { background: #888888 url("../images/share-url-m.png") no-repeat center 8px; background-size: 25px 22px; } .quick_div .top_btn { font-size: 11px; line-height: 36px; } .quick_div .today_btn { width: 100px; height: 100px; padding: 30px 10px 12px; font-size: 12px; line-height: 1; } .quick_div .today_btn .time { margin-top: 5px; font-size: 13px; line-height: 1; } .quick_div .today_btn:after { width: 20px; bottom: 12px; height: 20px; background-image: url("../images/today-plus-icon-m.png"); background-size: 19px; border-color: rgba(255, 255, 255, 0.4); } .quick_div .today_open { padding: 40px 0 30px 4%; } .quick_div .today_open .tab_menu { margin-bottom: 20px; } .quick_div .today_open .tab_menu a { font-size: 16px; } .quick_div .today_open .today_roll { padding-bottom: 20px; } .quick_div .today_open .today_roll .swiper-slide { width: 120px; margin-right: 4%; } .quick_div .today_open .today_roll .img_div { width: 120px; height: 140px; } .quick_div .today_open .today_roll .txt_div { margin-top: 10px; font-size: 14px; } .quick_div .today_open .today_roll .txt_div p { min-height: 21px; } .quick_div .today_open .today_roll .txt_div .period{font-size:14px;} .quick_div .today_open .today_time { margin-top: 25px; font-size: 16px; } .quick_div .today_open .close_btn { width: 45px; height: 45px; background-image: url("../images/close-btn-icon-m.png"); background-size: 15px; } .quick_div .today_open .result_box { padding: 52px 0; } .quick_div .chatbot{ width:122px; height:70px; background:url("../images/ico_chatbot_mo.png") no-repeat center center ; background-size:cover; } } /* list_type */ .list_top { margin-bottom: 14px; } .list_top:after { content: ""; display: block; clear: both; } .list_top .total { font-size: 16px; font-weight: 400; color: #333; line-height: 1.5; } .list_top .total span { font-family: "mont-B", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; color: #2f7d4e; } .list_type ul { border-top: 2px solid #e5e5e5; } .list_type ul li { position: relative; border-bottom: 1px solid #e5e5e5; } .list_type ul li a { display: block; padding: 40px 100px 40px 0; } .list_type ul li a:hover > *:not(.date), .list_type ul li a.active > *:not(.date) { color: #2f7d4e; } .list_type ul li a:hover .noti_pin:after, .list_type ul li a.active .noti_pin:after { background-image: url("../images/noti-pin-icon-on.png"); } .list_type ul .division { margin-bottom: 20px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 16px; font-weight: 700; color: #333; line-height: 1; } .list_type ul .division.noti_pin:after { content: ''; display: inline-block; width: 14px; height: 15px; margin-left: 10px; background: url("../images/noti-pin-icon.png") no-repeat 0 0; vertical-align: top; } .list_type ul .title { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 22px; font-weight: 700; color: #333; line-height: 1.5; } .list_type ul .date { position: absolute; top: auto; left: auto; right: 0; width: auto; bottom: 40px; font-size: 18px; font-weight: 400; color: #888; line-height: 1.5; } @media all and (max-width: 1023px) { .list_type ul { border-top: 1px solid #e5e5e5; } .list_type ul li a { padding: 40px 0; } .list_type ul .division { margin-bottom: 20px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 16px; font-weight: 700; color: #333; line-height: 1; } .list_type ul .title { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 22px; font-weight: 700; color: #333; line-height: 1.5; } .list_type ul .date { position: relative; top: 0; bottom: auto; left: 0; margin-top: 30px; } } @media all and (max-width: 767px) { .list_top { margin-bottom: 10px; } .list_top .total { font-size: 13px; } .list_type ul li a { padding: 20px 0; } .list_type ul .division { margin-bottom: 10px; font-size: 13px; } .list_type ul .division.noti_pin:after { width: 12px; height: 12px; margin-left: 7px; background-image: url("../images/noti-pin-icon-m.png"); background-size: 12px; } .list_type ul .title { font-size: 16px; } .list_type ul .date { margin-top: 15px; font-size: 14px; } } .motion_list:after { content: ""; display: block; clear: both; } .motion_list li { float: left; width: calc(50% - 30px); margin-top: 80px; position: relative; top: 150px; opacity: 0; -webkit-transition: all 0.8s ease; transition: all 0.8s ease; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .motion_list li.active { top: 0; opacity: 1; } .motion_list li:nth-child(-n+2) { margin-top: 0; } .motion_list li:nth-child(2) { margin-top: 100px; } .motion_list li:nth-child(even) { float: right; } .motion_list li .img_div { position: relative; width: 100%; overflow: hidden; } .motion_list li .img_div .img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .motion_list li .img_div .img img { width: 100%; } .motion_list li .img_div .division { height: 34px; position: absolute; top: 20px; left: auto; right: 20px; width: 34px; z-index: 1; } .motion_list li .img_div .division span { display: block; height: 100%; text-indent: -999px; overflow: hidden; background-repeat: no-repeat; background-position: center; } .motion_list li .img_div .division span.instagram { background-image: url("../images/thema-instagram.png"); } .motion_list li .img_div .division span.youtube { background-image: url("../images/thema-youtube.png"); } .motion_list li .txt_div { margin-top: 30px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 22px; font-weight: 700; color: #333; line-height: 1.5; } .motion_list li a:hover .img, .motion_list li a:active .img { -webkit-transform: scale(1.1) rotate(0.0001deg); transform: scale(1.1) rotate(0.0001deg); } @media all and (max-width: 1023px) { .motion_list li { width: calc(100% - 20px); } .motion_list li:nth-child(-n+2) { margin-top: 0; } .motion_list li:nth-child(2) { margin-top: 100px; } .motion_list li:nth-child(even) { float: right; } } @media all and (max-width: 767px) { .motion_list li { float: none; width: 100%; margin-top: 50px; } .motion_list li:first-child { margin-top: 0; } .motion_list li:nth-child(2) { margin-top: 50px; } .motion_list li:nth-child(even) { float: none; } .motion_list li .img_div .division { height: 36px; position: absolute; top: 15px; left: auto; right: 15px; width: 36px; z-index: 1; } .motion_list li .img_div .division span { background-size: 36px; } .motion_list li .txt_div { margin-top: 25px; font-size: 16px; } .motion_list li a:hover .img, .motion_list li a:active .img { -webkit-transform: scale(1.1) rotate(0.001deg); transform: scale(1.1) rotate(0.001deg); } } .card_list_type .title_div { margin-bottom: 40px; } .card_list_type .title_div .title { font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 32px; font-weight: 700; color: #333; line-height: 1.5; letter-spacing: -0.06em; } .card_list_type > ul{display:flex; flex-wrap:wrap;}/* 2021-08-17 추가 */ .card_list_type > ul:after { content: ""; display: block; clear: both; } .card_list_type > ul > li { float: left; width: calc((100% - 120px) / 3); margin-top: 85px; margin-right: 60px; } .card_list_type > ul > li:nth-child(-n+3) { margin-top: 0; } .card_list_type > ul > li:nth-child(3n) { margin-right: 0; } .card_list_type > ul > li a { display: block; } .card_list_type a:hover .img_div .img, .card_list_type a:active .img_div .img { -webkit-transform: scale(1.1) rotate(0.001deg); transform: scale(1.1) rotate(0.001deg); } .card_list_type .img_div { position: relative; width: 100%; overflow: hidden; } .card_list_type .img_div .img { -webkit-transition: all 0.6s ease; transition: all 0.6s ease; -webkit-transform: scale(1); transform: scale(1); height: 100%; } .card_list_type .img_div .img img { width: 100%; } .card_list_type .img_div .category { position: absolute; top: 0; left: 0; right: auto; width: auto; min-width: 95px; height: 35px; padding: 0 20px; font-size: 16px; font-weight: 500; color: #fff; line-height: 35px; background: rgba(0, 0, 0, 0.5); text-align: center; } .card_list_type .txt_div { min-height: 91px; } .card_list_type .txt_div .tit { margin-top: 25px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 26px; font-weight: 700; color: #000; line-height: 1.5; letter-spacing: -0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card_list_type .txt_div .tag_list { margin-top: 10px; } .card_list_type .card_roll { position: relative; } .card_list_type .card_roll .swiper-slide { width: 420px; margin-right: 60px; } .card_list_type .card_roll .swiper-slide:last-child { margin-right: 0; } .card_list_type .card_roll .swiper_arrow { position: absolute; top: -65px; left: auto; right: 0; width: auto; } .card_list_type .card_roll .swiper_arrow:after { content: ""; display: block; clear: both; } .card_list_type .card_roll .swiper_arrow .swiper-button-next { position: relative; top: 0; left: 0; float: right; width: 14px; height: 24px; margin: 0 0 0 37px; background: url("../images/next-icon-14x23.png") no-repeat 0 0; } .card_list_type .card_roll .swiper_arrow .swiper-button-prev { position: relative; top: 0; left: 0; float: left; width: 14px; height: 24px; margin: 0; background: url("../images/prev-icon-14x23.png") no-repeat 0 0; } .card_list_type.type2 > ul li { width: 315px; margin-right: 40px; margin-top: 85px; } .card_list_type.type2 > ul li:nth-child(3n) { margin-right: 40px; margin-top: 85px; } .card_list_type.type2 > ul li:nth-child(4n) { margin-right: 0; } .card_list_type.type2 > ul li:nth-child(-n+4) { margin-top: 0; } .card_list_type.type2 .img_div { width: 100%; } .card_list_type.type2 .img_div.benefit { height: 225px; } .card_list_type.type2 .img_div.benefit + .txt_div .tit { overflow: visible; text-overflow: inherit; white-space: inherit; } .card_list_type.type2 .tit { margin-top: 15px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 22px; font-weight: 700; color: #000; line-height: 1.5; } .card_list_type.type2 .card_roll .swiper-slide { width: 315px; margin-right: 40px; } .card_list_type.type2 .card_roll .swiper-slide .tit { margin-top: 25px; } .card_list_type.type2 + .card_list_type.type2 { margin-top: 110px; } .card_list_type.type2 + .gray_info_box { margin-top: 110px; } .card_list_type.performance .list_top { padding: 40px 0 20px; text-align: right; } .card_list_type.performance > ul > li { position: relative; } .card_list_type.performance > ul > li .txt_div { position: relative; min-height: 69px; padding-right: 30px; } .card_list_type.performance > ul > li .txt_div .period { margin-top: 6px; font-size: 16px; font-weight: 400; color: #888; line-height: 1.5; letter-spacing: normal; } /* .card_list_type.performance > ul > li .apply_btn { position: absolute; bottom: 15px; right: 0; } */ /* s : 20240307 공연신청 버튼 수정 */ .card_list_type.performance > ul > li .apply_btn { position: relative; bottom: 0; right: 0; display: flex; margin-top: 10px;} /* e : 20240307 공연신청 버튼 수정 */ .card_list_type.event .txt_div { min-height: auto; } .card_list_type.event .txt_div .tit { color: #333; } @media all and (max-width: 1200px) { .card_list_type > ul > li { margin-top: 85px; margin-right: 60px; } .card_list_type > ul > li:nth-child(-n+3) { margin-top: 85px; } .card_list_type > ul > li:nth-child(-n+2) { margin-top: 0; } .card_list_type > ul > li:nth-child(3n) { margin-right: 60px; } .card_list_type > ul > li:nth-child(even) { margin-right: 0; } .card_list_type > ul > li a { display: block; } .card_list_type.type2 > ul li { margin-right: 40px; margin-top: 85px; } .card_list_type.type2 > ul li:nth-child(4) { margin-right: 40px; margin-top: 85px; } .card_list_type.type2 > ul li:nth-child(3n) { margin-right: 0; } .card_list_type.type2 > ul li:nth-child(-n+3) { margin-top: 0; } } @media all and (max-width: 1023px) { .card_list_type .card_roll .swiper-container { overflow: visible; } .card_list_type.type2 > ul li { margin-right: 40px; margin-top: 85px; } .card_list_type.type2 > ul li:nth-child(3n) { margin-right: 40px; margin-top: 85px; } .card_list_type.type2 > ul li:nth-child(even) { margin-right: 0; } .card_list_type.type2 > ul li:nth-child(-n+2) { margin-top: 0; } .card_list_type.performance .list_top { position: relative; left: -3%; width: 106%; padding: 25px 0 30px; } .card_list_type.performance.result_none .list_top { left: 0; width: 100%; } .card_list_type.performance > ul > li { position: relative; } .card_list_type.performance > ul > li .txt_div { padding-right: 0; } .card_list_type.performance > ul > li .txt_div .period { margin-top: 4px; font-size: 13px; } .card_list_type.performance > ul > li .apply_btn { position: static; margin-top: 15px; } .card_list_type.performance > ul > li .apply_btn a { width: 105px; padding: 0; text-align: center; } } @media all and (max-width: 767px) { .card_list_type .title_div { margin-bottom: 20px; } .card_list_type .title_div .title { font-size: 21px; } .card_list_type > ul li { width: 100%; margin: 50px 0 0; } .card_list_type > ul li:nth-child(-n+3) { margin-top: 50px; } .card_list_type > ul li:nth-child(1) { margin-top: 0; } .card_list_type > ul li:nth-child(3n) { margin-right: 0; } .card_list_type > ul li a { display: block; } .card_list_type .img_div .category { min-width: 75px; height: 30px; padding: 0 15px; font-size: 13px; line-height: 30px; } .card_list_type .txt_div { min-height: auto; } .card_list_type .txt_div .tit { margin-top: 20px; font-size: 18px; } .card_list_type .txt_div .tag_list { margin-top: 10px; } .card_list_type.type2 > ul li { margin-right: 20px; margin-top: 50px; } .card_list_type.type2 > ul li:nth-child(3n), .card_list_type.type2 > ul li:nth-child(4) { margin-right: 20px; margin-top: 50px; } .card_list_type.type2 > ul li:nth-child(even) { margin-right: 0; } .card_list_type.type2 > ul li:nth-child(-n+2) { margin-top: 0; } .card_list_type.type2 + .card_list_type.type2 { margin-top: 80px; } .card_list_type.type2 + .gray_info_box { margin-top: 70px; } .card_list_type.type2 .card_roll .swiper-slide { width: 157px; margin-right: 4%; } .card_list_type.type2 .card_roll .swiper-slide .tit { margin-top: 18px; font-size: 16px; } .card_list_type.type2 .card_roll .swiper_arrow { display: none; } .card_list_type.performance .list_top { left: -15%; width: 130%; } .card_list_type.performance ul > li .txt_div { min-height: auto; } } /* view_type */ .view_type { position: relative; padding-left: 600px; } .view_type .title_div { position: absolute; top: 0; left: 0; right: auto; width: 350px; } .view_type .title_div .back_btn { position: absolute; top: -58px; left: 0; right: auto; width: 41px; } .view_type .title_div .division { margin-bottom: 30px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 20px; font-weight: 700; color: #333; line-height: 1; } .view_type .title_div .title { font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 42px; font-weight: 700; color: #333; line-height: 1.3; letter-spacing: -0.06em; word-break: keep-all; } .view_type .title_div .date { margin-top: 60px; font-size: 18px; font-weight: normal; color: #888; line-height: 1.5; } .view_type .view_div { padding-top: 50px; border-bottom: 1px solid #e5e5e5; } .view_type .view_div .txt_div { padding-bottom: 80px; font-size: 18px; font-weight: 400; color: #666; line-height: 1.8; } /* s : 20240307 공지사항 이미지 크기 값 */ .view_type .view_div .txt_div img {width: 100%;} /* e : 20240307 공지사항 이미지 크기 값 */ .view_type .view_div .file_div { margin-bottom: 40px; } .inner > .view_type:first-child { margin-top: 90px; } @media all and (max-width: 1750px) { .view_type { padding-left: calc(50% - 100px); } .view_type .title_div { position: absolute; top: 0; left: 0; right: auto; width: 320px; } } @media all and (max-width: 1023px) { .view_type { padding-left: 0; } .view_type .title_div { position: relative; top: 0; left: 0; width: 100%; } .inner > .view_type:first-child { margin-top: 0; } } @media all and (max-width: 767px) { .view_type .title_div .back_btn { position: absolute; top: -35px; left: 0; right: auto; width: 30px; } .view_type .title_div .division { margin-bottom: 20px; font-size: 15px; } .view_type .title_div .title { font-size: 27px; } .view_type .title_div .date { margin-top: 30px; font-size: 14px; } .view_type .view_div .txt_div { padding-bottom: 40px; font-size: 14px; line-height: 1.6; } .view_type .view_div .file_div { margin-bottom: 30px; } } /* write_type */ .write_type { padding: 40px 0; border-top: 1px solid #333; border-bottom: 1px solid #e5e5e5; /* 폼 달력 */ } .write_type .form_dl { margin-bottom: 40px; } .write_type .form_dl:last-child { margin-bottom: 0; } .write_type .form_dl dt { margin-bottom: 20px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 20px; font-weight: 700; color: #333; line-height: 1.5; } .write_type .form_dl dt .essential { position: relative; padding-right: 10px; color: #333; } .write_type .form_dl dt .essential:before { content: ""; position: absolute; top: 0; left: auto; right: 0; width: 6px; display: block; height: 6px; background: #2f7d4e; border-radius: 50%; } .write_type .form_dl dt .essential:after { content: '필수'; font-size: 0; color: transparent; } .write_type .form_dl dt .essential span { display: inline-block; margin-left: 10px; font-size: 16px; font-weight: 400; color: #888; line-height: 1.5; } .write_type .form_dl dd::after { content: ""; display: block; clear: both; } .write_type .form_dl dd .form_div select, .write_type .form_dl dd .form_div input, .write_type .form_dl dd .form_div textarea { width: 100%; } .write_type .form_dl dd .info_txt { margin-top: 20px; } .write_type .cal_input { position: relative; height: 50px; border: 1px solid #e5e5e5; padding-right: 50px; } .write_type .cal_input input[type="text"] { height: 48px; border: none; } .write_type .cal_input .cal_btn { display: block; position: absolute; top: calc(50% - 10px); right: 20px; width: 20px; height: 20px; background: url(../images/calendar-icon.png) no-repeat; font-size: 0; color: transparent; } /* table_type */ .table_type { border-top: 1px solid #333; text-align: center; } .table_type table thead th { background: #f8f8f8; color: #333; } .table_type table tbody th { text-align: center; color: #666; } .table_type table th { padding: 20px 20px 15px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 18px; font-weight: 700; color: #333; line-height: 1.5; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .table_type table th:last-child { border-right: 0; } .table_type table td { padding: 20px 20px 15px; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .table_type table td:last-child { border-right: 0; } .table_type table th.bdR, .table_type table td.bdR{border-right: 1px solid #e5e5e5!important;} .table_type table td.border_left{border-left:1px solid #e5e5e5;}/* 2021-08-02 추가 */ .table_type table ul { text-align: left; } .table_type table .green_txt { color: #2f7d4e; font-weight: 700; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; } .table_type + .table_type { margin-top: 20px; } .swipe_table .scroll_bg { display: none; } .swipe_table + .swipe_table { margin-top: 20px; } .swipe_table .table_type { margin-top: 0; } .table_type table.row_table { position: relative; word-break: keep-all; } .table_type table.row_table th { padding: 20px 30px 15px; background-color: #f8f8f8; border-bottom: 1px solid #e5e5e5; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 18px; font-weight: 700; color: #333; line-height: 1.5; text-align: left; word-break: keep-all; } .table_type table.row_table td { padding: 20px 30px 15px; border-left: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .table_type table.row_table td a { display: inline-block; margin-top: -3px; vertical-align: middle; } @media all and (max-width: 767px) { /* table_type */ .table_type { border-top: 1px solid #333; text-align: center; } .table_type table th { padding: 13px 10px 11px; font-size: 14px; word-break: break-all; } .table_type table td { padding: 13px 10px 11px; } .table_type table.row_table th { padding: 13px 10px 11px; font-size: 14px; } .table_type table.row_table td { padding: 13px 10px 11px; font-size: 14px; } .swipe_table { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; overflow-x: auto; width: calc(100% + 8vw); margin-left: -4vw; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .swipe_table .table_type { border-top: none; } .swipe_table table { position: relative; } .swipe_table table::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: auto; width: 100%; height: 1px; background-color: #333; } .swipe_table.on { display: none; } .swipe_table .scroll_bg { display: block; position: absolute; top: 0; left: -4vw; z-index: 2; width: calc(100% + 8vw); height: 100%; background-color: rgba(47, 125, 78, 0.8); } .swipe_table .scroll_bg .txt { position: absolute; top: 50%; left: 50%; font-size: 13px; color: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); white-space: nowrap; } .swipe_table .scroll_bg .txt img { margin-bottom: 30px; width: 206px; } .swipe_table table { width: auto; min-width: 92vw; } .swipe_table table th, .swipe_table table td { padding: 13px 25px 11px; white-space: nowrap; word-break: keep-all; } .swipe_table .table_wrap { padding: 0 4vw; } } /* 체크박스 스타일 */ .chk_type { position: relative; } .chk_type input[type="checkbox"] { display: none; } .chk_type label { display: inline-block; position: relative; padding-left: 34px; font-size: 18px; font-weight: 400; color: #333; line-height: 22px; } .chk_type label:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 22px; height: 22px; background: url("../images/checkbox-icon.png") no-repeat 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .chk_type input[type="checkbox"]:checked + label:before { background-image: url("../images/checkbox-icon-on.png"); } /* 라디오 스타일 */ .radio_type { display: inline-block; position: relative; } .radio_type:not(:first-of-type) { margin-left: 30px; } .radio_type input[type="radio"] { display: none; } .radio_type label { display: inline-block; position: relative; padding-left: 34px; font-size: 18px; font-weight: 400; color: #888; line-height: 24px; } .radio_type label:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 24px; height: 24px; background: url("../images/radio-icon.png") no-repeat 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .radio_type input[type="radio"]:checked + label:before { background-image: url("../images/radio-icon-on.png"); } /* 개인정보수집 동의 */ .agree_div .txt_box { height: 230px; font-size: 18px; font-weight: 400; color: #888; line-height: 1.5; border: 1px solid #e5e5e5; } .agree_div .txt_box .scroll_div { padding: 40px; } .agree_div .txt_box .txt_div { margin-bottom: 10px; } .agree_div .txt_box .txt_div:last-child { margin-bottom: 0; } .agree_div .txt_box .txt_div > ul { margin-left: 15px; margin-bottom: 10px; } .agree_div .txt_box .txt_div > ul > li { position: relative; padding-left: 15px; } .agree_div .txt_box .txt_div > ul > li::before { content: 'ㆍ'; position: absolute; top: 0; left: 0; } .agree_div .txt_box .tit { margin-bottom: 5px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: 700; } .agree_div .txt_box .bold { font-weight: 700; color: #555;} .agree_div .txt_box .highlight { font-size: 20px; background: #fdff7b;font-weight: bold; color: #555;} .agree_div .txt_box .indent { padding-left: 15px; margin-bottom: 10px; } .agree_div .agree_box { padding: 20px 40px; border: 1px solid #e5e5e5; border-top: 0; } /* 법정대리인 개인정보 동의 */ .agree_div.type2 dl { display: table; width: 100%; } .agree_div.type2 dl dt { display: table-cell; width: calc(100% - 140px); font-size: 18px; font-weight: 700; color: #333; line-height: 1.5; font-family: "mont-B", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; vertical-align: middle; } .agree_div.type2 dl dd { display: table-cell; width: 140px; text-align: right; vertical-align: middle; } .write_type + .agree_div.type2 { margin-top: 40px; } .agree_div.type2 + .sub_tit_div { margin-top: 100px; } .inquiry_div > div { margin-bottom: 60px; } .inquiry_div > div:last-child { margin-bottom: 0; } @media all and (max-width: 767px) { .write_type { padding: 30px 0; /* 폼 달력 */ } .write_type .form_dl { margin-bottom: 21px; } .write_type .form_dl:last-child { margin-bottom: 0; } .write_type .form_dl dt { margin-bottom: 11px; font-size: 15px; } .write_type .form_dl dt .essential span { margin-left: 5px; font-size: 13px; } .write_type .form_dl dd .info_txt { margin-top: 20px; width: 100%; font-size: 13px; } .write_type .cal_input { height: 45px; } .write_type .cal_input input[type="text"] { height: 43px; } /* 체크박스 스타일 */ .chk_type label { padding-left: 30px; font-size: 14px; line-height: 20px; } .chk_type label:before { width: 20px; height: 20px; background-size: contain; } /* 라디오 스타일 */ .radio_type:not(:first-of-type) { margin-left: 20px; } .radio_type label { padding-left: 30px; font-size: 14px; line-height: 21px .radio_type label; } .radio_type label :before { width: 21px; height: 21px; background-size: contain; } .agree_div .txt_box { height: 220px; font-size: 14px; } .agree_div .txt_box .scroll_div { padding: 25px; } .agree_div .agree_box { padding: 15px 20px; } .agree_div.type2 dl { word-break: keep-all; display: block; } .agree_div.type2 dl dt { display: block; width: 100%; font-size: 14px; } .agree_div.type2 dl dd { display: block; margin-top: 18px; width: 100%; text-align: left; } .write_type + .agree_div.type2 { margin-top: 26px; } .agree_div.type2 + .sub_tit_div { margin-top: 55px; } .inquiry_div > div { margin-bottom: 40px; } } /* accodian */ .accordion > ul { border-top: 1px solid #e5e5e5; } .accordion .aco_cell { border-bottom: 1px solid #e5e5e5; } .accordion .aco_cell.active { background-color: #f8f8f8; } .accordion .aco_cell.active .aco_btn { padding-bottom: 0; border-bottom: none; } .accordion .aco_cell.active .aco_btn::before { content: '닫기'; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .accordion .aco_cell.active .aco_active_contents { display: none; } .accordion .aco_btn { display: block; position: relative; padding: 40px 30px; } .accordion .aco_btn .text_group { display: block; word-break: keep-all; } .accordion .aco_btn .text_group::after { content: ""; display: block; clear: both; } .accordion .aco_btn .text_group > * { display: inline-block; vertical-align: middle; } .accordion .aco_btn .text_group .text { font-size: 22px; font-weight: 600; color: #333; line-height: 1.3; } .accordion .aco_btn::before { content: '열기'; display: block; position: absolute; top: calc(50% - 6px); right: 30px; width: 22px; height: 13px; font-size: 0; text-indent: -999px; overflow: hidden; background: url(../images/faq-arrow.png) no-repeat; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-transform-origin: bottom; transform-origin: bottom; } .accordion .aco_active_contents { display: none; margin-top: 20px; padding: 0 30px 40px; } .accordion .aco_active_contents .text_group::after { content: ""; display: block; clear: both; } .accordion .aco_active_contents .text_group > * { display: inline-block; vertical-align: middle; } .accordion .aco_active_contents .text_group .text { font-size: 16px; font-weight: 400; color: #666; line-height: 1.5; word-break: keep-all; } @media all and (max-width: 767px) { .accordion .aco_btn { padding: 20px; } .accordion .aco_btn::before { top: calc(50% - 6px); right: 20px; width: 16px; height: 9px; background-size: contain; } .accordion .aco_active_contents { padding: 0 20px 23px; } } /* srch_type */ .srch_area .srch_div { position: relative; padding: 0 30px 18px 0; border-bottom: 2px solid #333; } .srch_area .srch_div input { display: block; width: 100%; height: auto; padding: 3px 0; border: none; } .srch_area .srch_div .srch_btn { position: absolute; top: 0; left: auto; right: 0; width: 28px; display: block; height: 28px; background: url("../images/srch-icon.png") no-repeat center; } .srch_area.type2 { position: fixed; bottom: 0; left: 0; z-index: 20; } .srch_area.type2 .detail_srch_btn { display: block; width: 120px; padding: 120px 0; text-align: center; } .srch_area.type2 .detail_srch_btn span { display: inline-block; width: 34px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 20px; font-weight: 700; color: #fff; line-height: 1; word-break: break-all; } .srch_area.type2 .detail_srch_btn:after { content: ""; display: block; width: 34px; height: 34px; margin: 15px auto 0; border-radius: 50%; background: #fff url("../images/srch-icon.png") no-repeat center; background-size: 18px; } .srch_area.type2 .srch_open { position: fixed; bottom: 0; left: -100%; width: calc(100% - 270px); height: 540px; padding: 85px 120px 145px 270px; background: url("../images/srch-open-bg.jpg") no-repeat right bottom; background-size: cover; } .srch_area.type2 .srch_open .srch_inner { position: relative; } .srch_area.type2 .srch_open .close_btn { position: absolute; top: 0; left: auto; right: 0; width: 85px; height: 85px; text-indent: -999px; overflow: hidden; background: url("../images/close-btn-icon-w.png") no-repeat center; } .srch_area.type2 .srch_list li { padding: 15px 0 10px; } .srch_area.type2 .srch_list li:last-child { padding-bottom: 0; } .srch_area.type2 .srch_list li dl:after { content: ""; display: block; clear: both; } .srch_area.type2 .srch_list li dl dt { float: left; width: 150px; font-family: "mont-B", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 20px; font-weight: 700; color: #fff; line-height: 40px; } .srch_area.type2 .srch_list li dl dt span { font-family: "mont-R", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: 400; } .srch_area.type2 .srch_list li dl dd { float: left; width: calc(100% - 150px); } .srch_area.type2 .srch_list li dl .chk_btn { position: relative; float: left; display: inline-block; padding: 7px 20px; margin: 0 7px 10px 0; font-size: 16px; font-weight: 400; color: rgba(255, 255, 255, 0.6); line-height: 1.5; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; position: relative; display: inline-block; overflow: hidden; } .srch_area.type2 .srch_list li dl .chk_btn:before { content: ""; display: block; width: calc(100% + 2px); height: 100%; position: absolute; top: 100%; left: 0; right: auto; width: 100%; background-color: transparent; border-radius: 100% 100% 0 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .srch_area.type2 .srch_list li dl .chk_btn > span { position: relative; z-index: 1; } .srch_area.type2 .srch_list li dl .chk_btn.on:before, .srch_area.type2 .srch_list li dl .chk_btn:hover:before, .srch_area.type2 .srch_list li dl .chk_btn:active:before { height: 190%; top: -90%; background-color: #fff; } .srch_area.type2 .srch_list li dl .chk_btn span:before { content: ""; display: inline-block; width: 34px; height: 10px; background: url("../images/chk-arrow-icon.png") no-repeat 0 0; opacity: 0.6; } .srch_area.type2 .srch_list li dl .chk_btn.on, .srch_area.type2 .srch_list li dl .chk_btn:hover, .srch_area.type2 .srch_list li dl .chk_btn:active { font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: 700; color: #2f7d4e; } .srch_area.type2 .srch_list li dl .chk_btn.on span:before, .srch_area.type2 .srch_list li dl .chk_btn:hover span:before, .srch_area.type2 .srch_list li dl .chk_btn:active span:before { background-image: url("../images/chk-arrow-icon-on.png"); opacity: 1; } .srch_area.type2 .srch_list li dl .chk_btn:last-child { margin-right: 0; } .srch_area.type2 .srch_list li.choose_key { padding: 0 0 25px; margin-bottom: 25px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .srch_area.type2 .srch_list li.choose_key dd { width: calc(100% - 250px); } .srch_area.type2 .srch_list li.choose_key a { position: relative; display: inline-block; margin-right: 25px; font-size: 16px; font-weight: 400; color: #fff; line-height: 40px; } .srch_area.type2 .srch_list li.choose_key a:after { content: ""; position: absolute; top: 14px; left: auto; right: -20px; width: 10px; display: block; height: 12px; background: url("../images/choose-key-before-icon.png") no-repeat 0 0; } .srch_area.type2 .srch_list li.choose_key a:last-child { margin-right: 0; } .srch_area.type2 .srch_list li.choose_key a:last-child:after { display: none; } .srch_area.type2 .srch_list li.choose_key a span { padding-right: 15px; background: url("../images/close-icon-w-8x8.png") no-repeat right 5px; } .srch_area.type2 .srch_btn_div { position: absolute; top: 9px; left: auto; right: 0; width: auto; } .srch_area.type2 .srch_btn_div a { display: inline-block; width: 26px; height: 26px; margin-left: 17px; text-indent: -999px; overflow: hidden; } .srch_area.type2 .srch_btn_div a.srch_btn { background: url("../images/srch-icon-w.png") no-repeat 0 0; } .srch_area.type2 .srch_btn_div a.refresh_btn { background: url("../images/refresh-icon-w.png") no-repeat 0 0; } .srch_area.type2.complete { position: relative; top: 0; left: 0; bottom: auto; z-index: auto; } .srch_area.type2.complete:before { content: ""; position: absolute; top: 0; left: 120px; right: auto; width: calc(100% - 120px); height: 100%; background: #518751; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(145deg, #518751 0%, #247341 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#518751', endColorstr='#247341',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .srch_area.type2.complete .srch_inner { position: relative; width: 1380px; max-width: calc(100% - 240px); margin: 0 auto; } @media all and (max-width: 1750px) { .srch_area.type2.complete .srch_inner { width: calc(100% - 160px); max-width: calc(100% - 160px); } } @media all and (max-width: 1023px) { .srch_area.type2.complete .srch_inner { width: 92%; max-width: 92%; } } .srch_area.type2.complete .srch_list li.choose_key { padding: 25px 0; margin-bottom: 0; border-bottom: none; } .srch_area.type2.complete .srch_btn_div { position: absolute; top: 32px; left: auto; right: 0; width: auto; } .srch_area.type3 { position: relative; padding: 40px 40px 30px; background-color: #f8f8f8; } .srch_area.type3 .srch_list { max-width: calc(100% - 320px); } .srch_area.type3 .srch_list:after { content: ""; display: block; clear: both; } .srch_area.type3 .srch_list .chk_btn { position: relative; float: left; display: block; padding: 7px 20px; margin: 0 7px 10px 0; font-size: 16px; font-weight: 400; color: rgba(51, 51, 51, 0.6); line-height: 1.5; border: 1px solid #dddddd; border-radius: 20px; position: relative; display: inline-block; overflow: hidden; } .srch_area.type3 .srch_list .chk_btn:before { content: ""; display: block; width: calc(100% + 2px); height: 100%; position: absolute; top: 100%; left: 0; right: auto; width: 100%; background-color: transparent; border-radius: 100% 100% 0 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .srch_area.type3 .srch_list .chk_btn > span { position: relative; z-index: 1; } .srch_area.type3 .srch_list .chk_btn.on:before, .srch_area.type3 .srch_list .chk_btn:hover:before, .srch_area.type3 .srch_list .chk_btn:active:before { height: 190%; top: -90%; background-color: #2f7d4e; } .srch_area.type3 .srch_list .chk_btn span:before { content: ""; display: inline-block; width: 34px; height: 10px; background: url("../images/chk-arrow-icon-type2.png") no-repeat 0 0; } .srch_area.type3 .srch_list .chk_btn.on, .srch_area.type3 .srch_list .chk_btn:hover, .srch_area.type3 .srch_list .chk_btn:active { font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: 700; color: #fff; } .srch_area.type3 .srch_list .chk_btn.on span:before, .srch_area.type3 .srch_list .chk_btn:hover span:before, .srch_area.type3 .srch_list .chk_btn:active span:before { background-image: url("../images/chk-arrow-icon-on-type2.png"); } .srch_area.type3 .srch_list .chk_btn:last-child { margin-right: 0; } .srch_area.type3 .srch_btn_div { position: absolute; top: 50%; right: 40px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .srch_area.type3 .srch_btn_div .input_wrap { position: relative; width: 320px; height: 40px; padding-right: 66px; border-bottom: 2px solid #333; -webkit-box-sizing: border-box; box-sizing: border-box; } .srch_area.type3 .srch_btn_div .input_wrap input { width: 100%; height: auto; padding: 0; border: none; background-color: transparent; } .srch_area.type3 .srch_btn_div .input_wrap a { display: block; position: absolute; top: 0; width: 24px; height: 25px; } .srch_area.type3 .srch_btn_div .input_wrap a span { display: block; text-indent: -999px; overflow: hidden; } .srch_area.type3 .srch_btn_div .input_wrap a.srch_btn { right: 40px; background: url("../images/srch-icon-b.png") no-repeat 0 0; } .srch_area.type3 .srch_btn_div .input_wrap a.srch_btn:after { content: ''; display: block; position: absolute; top: -63px; left: auto; right: 0; width: 195px; height: 45px; font-size: 16px; font-weight: 400; color: #fff; line-height: 45px; content: "검색버튼을 클릭해주세요."; background: #2f7d4e; border-radius: 10px 10px 0 10px; -webkit-box-shadow: 0 5px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 5px 6px rgba(0, 0, 0, 0.05); text-align: center; opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-animation: yo-yo-after 0.5s ease infinite alternate; animation: yo-yo-after 0.5s ease infinite alternate; } .srch_area.type3 .srch_btn_div .input_wrap a.srch_btn:before { content: ''; display: block; position: absolute; top: -18px; left: auto; right: 0; width: 8px; height: 8px; background: url("../images/srch-btn-tooltip-bg.png") no-repeat center; z-index: 1; opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-animation: yo-yo-before 0.5s ease infinite alternate; animation: yo-yo-before 0.5s ease infinite alternate; } .srch_area.type3 .srch_btn_div .input_wrap a.srch_btn.tooltip:after { opacity: 1; } .srch_area.type3 .srch_btn_div .input_wrap a.srch_btn.tooltip:before { opacity: 1; } @-webkit-keyframes yo-yo-after { from { top: -63px; } to { top: -73px; } } @keyframes yo-yo-after { from { top: -63px; } to { top: -73px; } } @-webkit-keyframes yo-yo-before { from { top: -18px; } to { top: -28px; } } @keyframes yo-yo-before { from { top: -18px; } to { top: -28px; } } .srch_area.type3 .srch_btn_div .input_wrap a.refresh_btn { right: 0; background: url("../images/refresh-icon-b.png") no-repeat 0 0; } .srch_area.type4 { position: relative; padding: 40px 40px 30px; background-color: #f8f8f8; text-align: center; } .srch_area.type4 .srch_btn_div select { display: inline-block; min-width: 94px; height: 43px; margin-right: 15px; padding: 0 40px 15px 0; color: #333; border: none; border-bottom: 2px solid #333; background-color: transparent; background-position: right 9px; background-image: url(../images/select-icon2.png); } .srch_area.type4 .srch_btn_div .input_wrap { display: inline-block; position: relative; width: 320px; height: 43px; padding-right: 66px; border-bottom: 2px solid #333; vertical-align: bottom; } .srch_area.type4 .srch_btn_div .input_wrap input { width: 100%; height: auto; padding: 0; border: none; background-color: transparent; } .srch_area.type4 .srch_btn_div .input_wrap a { display: block; position: absolute; top: 0; width: 24px; height: 25px; margin-left: 12px; } .srch_area.type4 .srch_btn_div .input_wrap a span { display: block; text-indent: -999px; overflow: hidden; } .srch_area.type4 .srch_btn_div .input_wrap a.srch_btn { right: 40px; background: url("../images/srch-icon-b.png") no-repeat 0 0; } .srch_area.type4 .srch_btn_div .input_wrap a.srch_btn:last-child { right: 0; } .srch_area.type4 .srch_btn_div .input_wrap a.srch_btn:after { content: ''; display: block; position: absolute; top: -63px; left: auto; right: 0; width: 195px; height: 45px; font-size: 16px; font-weight: 400; color: #fff; line-height: 45px; content: "검색버튼을 클릭해주세요."; background: #2f7d4e; border-radius: 10px 10px 0 10px; -webkit-box-shadow: 0 5px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 5px 6px rgba(0, 0, 0, 0.05); text-align: center; opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-animation: yo-yo-after 0.5s ease infinite alternate; animation: yo-yo-after 0.5s ease infinite alternate; } .srch_area.type4 .srch_btn_div .input_wrap a.srch_btn:before { content: ''; display: block; position: absolute; top: -18px; left: auto; right: 0; width: 8px; height: 8px; background: url("../images/srch-btn-tooltip-bg.png") no-repeat center; z-index: 1; opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-animation: yo-yo-before 0.5s ease infinite alternate; animation: yo-yo-before 0.5s ease infinite alternate; } .srch_area.type4 .srch_btn_div .input_wrap a.srch_btn.tooltip:after { opacity: 1; } .srch_area.type4 .srch_btn_div .input_wrap a.srch_btn.tooltip:before { opacity: 1; } @keyframes yo-yo-after { from { top: -63px; } to { top: -73px; } } @keyframes yo-yo-before { from { top: -18px; } to { top: -28px; } } .srch_area.type4 .srch_btn_div .input_wrap a.refresh_btn { right: 0; background: url("../images/refresh-icon-b.png") no-repeat 0 0; } .srch_area.type4 .srch_btn_div.center_type { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .srch_area.type4 .srch_btn_div.center_type + .info_txt { margin-top: 30px; text-align: center; } @media all and (max-width: 1750px) { .srch_area.type2 .detail_srch_btn { width: 80px; padding: 80px 0; } .srch_area.type2 .srch_open { width: calc(100% - 80px); height: 540px; padding: 85px 120px 145px 80px; } .srch_area.type2.complete:before { left: 80px; width: calc(100% - 80px); } .srch_area.type2.complete .srch_list { width: calc(100% - 80px); margin: 0 auto; } .srch_area.type2.complete .srch_btn_div { right: 40px; } } @media all and (max-width: 1023px) { .srch_area.type2 { width: 100%; } .srch_area.type2 .detail_srch_btn { width: 100%; height: 80px; padding: 30px 0; background: #fff; } .srch_area.type2 .detail_srch_btn span { width: auto; color: #333; vertical-align: top; } .srch_area.type2 .detail_srch_btn:before { content: ''; display: block; position: absolute; top: 0; left: 0; right: auto; width: 100%; height: 50%; -webkit-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.1); box-shadow: 10px 0 10px rgba(0, 0, 0, 0.1); z-index: -1; } .srch_area.type2 .detail_srch_btn:after { display: inline-block; margin: -8px 0 0 10px; vertical-align: top; background-image: url("../images/srch-icon-m.png"); background-size: 26px; } .srch_area.type2 .srch_open { width: 100%; height: 100%; padding: 180px 4%; background-image: url("../images/srch-open-bg-m.jpg"); } .srch_area.type2 .srch_open .close_btn { top: 0; height: 120px; } .srch_area.type2 .srch_list li dl dt { float: none; width: 100%; } .srch_area.type2 .srch_list li dl dd { float: none; width: 100%; margin-top: 40px; } .srch_area.type2 .srch_list li dl .chk_btn:before { z-index: auto; } .srch_area.type2 .srch_list li dl .chk_btn:hover, .srch_area.type2 .srch_list li dl .chk_btn:active { color: rgba(255, 255, 255, 0.6); font-weight: 400; } .srch_area.type2 .srch_list li dl .chk_btn:hover:before, .srch_area.type2 .srch_list li dl .chk_btn:active:before { top: 100%; } .srch_area.type2 .srch_list li dl .chk_btn:hover span:before, .srch_area.type2 .srch_list li dl .chk_btn:active span:before { opacity: 0.6; background-image: url(../images/chk-arrow-icon.png); } .srch_area.type2 .srch_list li dl .chk_btn.on { color: #2f7d4e; } .srch_area.type2 .srch_list li dl .chk_btn.on:before { top: -90%; } .srch_area.type2 .srch_list li dl .chk_btn.on span:before { opacity: 1; background-image: url(../images/chk-arrow-icon-on.png); } .srch_area.type2 .srch_list li.choose_key dd { width: 100%; margin-top: 0; } .srch_area.type2 .srch_btn_div a.srch_btn { background-image: url("../images/srch-icon2-w-m.png"); background-size: 25px; } .srch_area.type2 .srch_btn_div a.refresh_btn { background-image: url("../images/refresh-icon-w-m.png"); background-size: 25px; } .srch_area.type2.complete:before { left: 4%; width: 96%; } .srch_area.type3 { padding: 26px 20px 40px; } .srch_area.type3 .srch_list { max-width: 100%; } .srch_area.type3 .srch_list .chk_btn { padding: 7px 15px; margin: 5px 7px 5px 0; } .srch_area.type3 .srch_list .chk_btn span:before { margin-right: 10px; width: 13px; height: 8px; background-image: url(../images/chk-arrow-icon-type2-m.png); background-size: contain; } .srch_area.type3 .srch_list .chk_btn:before { z-index: auto; } .srch_area.type3 .srch_list .chk_btn:hover, .srch_area.type3 .srch_list .chk_btn:active { color: rgba(51, 51, 51, 0.6); font-weight: 400; } .srch_area.type3 .srch_list .chk_btn:hover:before, .srch_area.type3 .srch_list .chk_btn:active:before { top: 100%; } .srch_area.type3 .srch_list .chk_btn:hover span:before, .srch_area.type3 .srch_list .chk_btn:active span:before { background-image: url(../images/chk-arrow-icon-type2-m.png); } .srch_area.type3 .srch_list .chk_btn.on { color: #fff; } .srch_area.type3 .srch_list .chk_btn.on:before { top: -90%; } .srch_area.type3 .srch_list .chk_btn.on span:before { background-image: url(../images/chk-arrow-icon-on-type2-m.png); } .srch_area.type3 .srch_btn_div { position: static; -webkit-transform: translateY(0); transform: translateY(0); margin-top: 26px; } .srch_area.type3 .srch_btn_div .input_wrap { width: 100%; height: 33px; padding-right: 66px; } .srch_area.type3 .srch_btn_div .input_wrap input { width: 100%; } .srch_area.type3 .srch_btn_div .input_wrap a { margin-left: 7px; } .srch_area.type3 .srch_btn_div .input_wrap a.srch_btn { right: 32px; width: 18px; height: 20px; background-size: contain; background-image: url(../images/srch-icon-b-m.png); } .srch_area.type3 .srch_btn_div .input_wrap a.srch_btn:after { content: ''; display: block; position: absolute; top: auto; left: auto; right: 0; width: 154px; height: 33px; bottom: -43px; content: "검색버튼을 클릭해주세요."; font-size: 13px; line-height: 33px; border-radius: 5px 0 5px 5px; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); } .srch_area.type3 .srch_btn_div .input_wrap a.srch_btn:before { content: ''; display: block; position: absolute; top: auto; left: auto; right: 0; width: 7px; height: 8px; bottom: -10px; background-image: url("../images/srch-btn-tooltip-bg-m.png"); background-size: 7px 8px; } @-webkit-keyframes yo-yo-after { from { top: auto; bottom: -43px; } to { top: auto; bottom: -53px; } } @keyframes yo-yo-after { from { top: auto; bottom: -43px; } to { top: auto; bottom: -53px; } } @-webkit-keyframes yo-yo-before { from { top: auto; bottom: -10px; } to { top: auto; bottom: -20px; } } @keyframes yo-yo-before { from { top: auto; bottom: -10px; } to { top: auto; bottom: -20px; } } .srch_area.type3 .srch_btn_div .input_wrap a.refresh_btn { width: 18px; height: 18px; background-image: url(../images/refresh-icon-b-m.png); background-size: contain; } .srch_area.type4 { padding: 36px 20px 40px; } .srch_area.type4 .srch_btn_div select { min-width: 94px; height: 33px; margin-right: 15px; padding: 0 40px 6px 0; color: #333; border: none; border-bottom: 2px solid #333; background-color: transparent; background-position: right 9px; background-image: url(../images/select-icon2.png); } .srch_area.type4 .srch_btn_div .input_wrap { width: auto; height: 33px; } .srch_area.type4 .srch_btn_div .input_wrap input { height: 100%; padding-bottom: 6px; } .srch_area.type4 .srch_btn_div .input_wrap a { margin-left: 7px; } .srch_area.type4 .srch_btn_div .input_wrap a.srch_btn { right: 32px; width: 18px; height: 20px; background-size: contain; background-image: url(../images/srch-icon-b-m.png); } .srch_area.type4 .srch_btn_div .input_wrap a.srch_btn:after { content: ''; display: block; position: absolute; top: auto; left: auto; right: 0; width: 154px; height: 33px; bottom: -43px; content: "검색버튼을 클릭해주세요."; font-size: 13px; line-height: 33px; border-radius: 5px 0 5px 5px; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); } .srch_area.type4 .srch_btn_div .input_wrap a.srch_btn:before { content: ''; display: block; position: absolute; top: auto; left: auto; right: 0; width: 7px; height: 8px; bottom: -10px; background-image: url("../images/srch-btn-tooltip-bg-m.png"); background-size: 7px 8px; } @keyframes yo-yo-after { from { top: auto; bottom: -43px; } to { top: auto; bottom: -53px; } } @keyframes yo-yo-before { from { top: auto; bottom: -10px; } to { top: auto; bottom: -20px; } } .srch_area.type4 .srch_btn_div .input_wrap a.refresh_btn { width: 18px; height: 18px; background-image: url(../images/refresh-icon-b-m.png); background-size: contain; } .srch_area.type4 .srch_btn_div.center_type { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .srch_area.type4 .srch_btn_div.center_type + .info_txt { margin-top: 30px; text-align: left; } } @media all and (max-width: 767px) { .srch_area .srch_div { padding: 0 15px 9px 0; } .srch_area .srch_div .srch_btn { top: 2px; width: 20px; height: 20px; background-size: contain; background-image: url(../images/srch-icon-b-m.png); } .srch_area.type2 .detail_srch_btn { width: 100%; height: 60px; padding: 22px 0; } .srch_area.type2 .detail_srch_btn span { font-size: 16px; font-weight: 500; } .srch_area.type2 .detail_srch_btn:after { width: 18px; height: 20px; margin: -2px 0 0 10px; background-image: url("../images/srch-icon-m.png"); background-size: 17px 18px; } .srch_area.type2 .srch_open { padding: 90px 4%; } .srch_area.type2 .srch_open .close_btn { width: 50px; height: 60px; background-size: 15px; } .srch_area.type2 .srch_list li { padding: 0; } .srch_area.type2 .srch_list li dl dt { font-size: 15px; line-height: 1.5; } .srch_area.type2 .srch_list li dl dd { margin-top: 20px; } .srch_area.type2 .srch_list li dl .chk_btn { padding: 7px 15px; font-size: 13px; } .srch_area.type2 .srch_list li dl .chk_btn span:before { width: 13px; margin-right: 10px; background-image: url("../images/chk-arrow-icon-m.png"); background-size: 13px auto; } .srch_area.type2 .srch_list li dl .chk_btn:hover span:before, .srch_area.type2 .srch_list li dl .chk_btn:active span:before { background-image: url("../images/chk-arrow-icon-m.png"); background-size: 13px auto; } .srch_area.type2 .srch_list li dl .chk_btn.on span:before { background-image: url("../images/chk-arrow-icon-on-m.png"); } .srch_area.type2 .srch_list li.choose_key { padding: 0 0 15px; } .srch_area.type2 .srch_list li.choose_key a { margin: 10px 25px 10px 0; font-size: 14px; line-height: 1.5; } .srch_area.type2 .srch_list li.choose_key a:after { top: 6px; } .srch_area.type2 .srch_list li.choose_key a span { padding-right: 15px; background-image: url("../images/close-icon-w-8x8-m.png"); background-position: right 5px; background-size: 8px; } .srch_area.type2 .srch_btn_div { top: 0; } .srch_area.type2 .srch_btn_div a { width: 19px; height: 19px; } .srch_area.type2 .srch_btn_div a.srch_btn { background-size: auto 19px; } .srch_area.type2 .srch_btn_div a.refresh_btn { background-size: 19px; } .srch_area.type2.complete .srch_list { width: calc(100% - 40px); } .srch_area.type2.complete .srch_btn_div { top: 25px; right: 20px; } .srch_area.type3 .srch_list .chk_btn { font-size: 13px; } .srch_area.type4 .srch_btn_div { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media all and (max-width: 374px) { .srch_area.type4 .srch_btn_div { display: block; } .srch_area.type4 .srch_btn_div select { width: 100%; margin-right: 0; } .srch_area.type4 .srch_btn_div .input_wrap { margin-top: 20px; width: 100%; } } /* form style */ .form_div { width: 100%; } .form_div select { background-image: url("../images/select-icon2.png"); } .form_div.half_type { float: left; width: 385px; max-width: calc(50% - 5px); } .form_div.half_type + .half_type { margin-left: 10px; } .form_div.half_type + .half_type + .half_type { margin-top: 10px; margin-left: 0; } .form_div.half_type + .info_txt { float: left; width: 100%; } .form_div.half_type + .form_div:not(.half_type) { margin-top: 20px; } .form_div:not(.half_type) + .form_div.half_type { margin-top: 20px; } @media all and (max-width: 1023px) { .form_div.half_type { width: calc(50% - 10px); } } @media all and (max-width: 767px) { .form_div.half_type { width: 100%; max-width: none; } .form_div.half_type:not(:first-child) { margin-top: 10px; } .form_div.half_type + .half_type { margin-left: 0; } .form_div.half_type + .form_div:not(.half_type) { margin-top: 20px; } .form_div:not(.half_type) + .form_div.half_type { margin-top: 20px; } } /* calender style */ .calender_div { width: 390px; max-width: 100%; margin: 15px auto 35px; } .calender_div table { width: 100%; table-layout: fixed; text-align: center; font-family: "mont-B", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; } .calender_div table td { padding: 7px 0; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 18px; font-weight: 700; color: #333; line-height: 43px; } .calender_div table td .on { display: inline-block; width: 43px; height: 43px; color: #fff; border-radius: 50%; background: #2f7d4e; } .calender_div table .month_txt { padding: 0 0 40px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 26px; font-weight: 700; color: #333; line-height: 1; letter-spacing: 0; } .calender_div table .day_txt { padding: 0 0 17px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 16px; font-weight: 500; color: #888; line-height: 1; letter-spacing: 0; } .calender_div table .day_txt.sunday { color: #2f7d4e; } @media all and (max-width: 1023px) { .calender_div { width: 92%; } } @media all and (max-width: 767px) { .calender_div { width: 92%; margin: 0 auto 40px; padding-top: 20px; } .calender_div table td { padding: 5px 0; font-size: 14px; line-height: 32px; } .calender_div table td .on { width: 32px; height: 32px; } .calender_div table .month_txt { padding: 0 0 30px; font-size: 18px; } .calender_div table .day_txt { padding: 5px 0 15px; font-size: 13px; } } /* map style */ .map_area { position: relative; } .map_area .map_txt { padding-left: 40px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 26px; font-weight: 700; color: #2f7d4e; line-height: 1.5; letter-spacing: -0.06em; background: url("../images/map-icon.png") no-repeat 0 4px; } .map_area .map_div { position: relative; margin-top: 40px; height: 860px; background: #f8f8f8; text-align: center; overflow: hidden; } .map_area .map_div > img { max-width: 100%; } .map_area .zoom_btn { position: absolute; top: 0; left: auto; right: calc(50% - 690px); width: auto; } .map_area .zoom_btn a.zoom_in { display: inline-block; margin-right: 7px; border: 1px solid #ddd; position: relative; min-width: auto !important; width: 50px !important; height: 50px !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden; -webkit-transform: scale(1); transform: scale(1); } .map_area .zoom_btn a.zoom_in:before { content: ""; display: block; height: 0; position: absolute; top: 50%; left: 50%; right: auto; width: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; border-radius: 50%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .map_area .zoom_btn a.zoom_in > span { position: relative; z-index: 1; } .map_area .zoom_btn a.zoom_in:hover, .map_area .zoom_btn a.zoom_in:active { -webkit-transform: scale(1.1); transform: scale(1.1); } .map_area .zoom_btn a.zoom_in:hover:before, .map_area .zoom_btn a.zoom_in:active:before { width: calc(100% + 2px); height: calc(100% + 2px); background-color: #2f7d4e; } .map_area .zoom_btn a.zoom_in span { display: block; height: 100%; background: url("../images/zoom-in-icon.png") no-repeat center; text-indent: -999px; } .map_area .zoom_btn a.zoom_in.on span, .map_area .zoom_btn a.zoom_in:hover span, .map_area .zoom_btn a.zoom_in:active span { background: url("../images/zoom-in-icon-on.png") no-repeat center; } .map_area .zoom_btn a.zoom_out { display: inline-block; border: 1px solid #ddd; position: relative; min-width: auto !important; width: 50px !important; height: 50px !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden; -webkit-transform: scale(1); transform: scale(1); } .map_area .zoom_btn a.zoom_out:before { content: ""; display: block; height: 0; position: absolute; top: 50%; left: 50%; right: auto; width: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; border-radius: 50%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .map_area .zoom_btn a.zoom_out > span { position: relative; z-index: 1; } .map_area .zoom_btn a.zoom_out:hover, .map_area .zoom_btn a.zoom_out:active { -webkit-transform: scale(1.1); transform: scale(1.1); } .map_area .zoom_btn a.zoom_out:hover:before, .map_area .zoom_btn a.zoom_out:active:before { width: calc(100% + 2px); height: calc(100% + 2px); background-color: #2f7d4e; } .map_area .zoom_btn a.zoom_out span { display: block; height: 100%; background: url("../images/zoom-out-icon.png") no-repeat center; text-indent: -999px; } .map_area .zoom_btn a.zoom_out.on span, .map_area .zoom_btn a.zoom_out:hover span, .map_area .zoom_btn a.zoom_out:active span { background: url("../images/zoom-out-icon-on.png") no-repeat center; } .map_tab .map_tit { margin-bottom: 30px; font-size: 32px; font-weight: 700; color: #333; line-height: 1.5; } .map_tab .map_txt { display: inline-block; padding-left: 30px; font-size: 20px; font-weight: 700; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; color: #aaa; line-height: 1.5; background-repeat: no-repeat; background-position: 0 4px; } .map_tab .map_txt:nth-child(1) {color:#2f7d4e ; background-image: url("../images/map-icon-small-on.png"); } .map_tab .map_txt:nth-child(2) {color: #f88a29; background-image: url("../images/map-icon-small-on2.png"); } .map_tab .map_txt:nth-child(3) {color:#d31515 ; background-image: url("../images/map-icon-small-on3.png"); } .map_tab .map_txt:after { content: ''; display: inline-block; width: 1px; height: 16px; margin: 0 10px 0 15px; background: #e5e5e5; vertical-align: middle; } .map_tab .map_txt:last-child:after { display: none; } .map_tab .map_div { position: relative; margin-top: 40px; height: 860px; background: #f8f8f8; text-align: center; overflow: hidden; } .map_tab .map_div img { max-width: 100%; } .map_tab .map_div img.mobile { display: none; } @media all and (max-width: 1750px) { .map_area .zoom_btn { right: 50px; } } @media all and (max-width: 1023px) { .map_area .zoom_btn { right: 4%; } .map_tab .map_txt { display: block; margin-top: 10px; } .map_tab .map_txt:after { display: none; } .map_tab .map_txt:first-child { margin-top: 0; } } @media all and (max-width: 767px) { .map_area .map_txt { padding: 0 115px 0 25px; font-size: 18px; background-image: url("../images/map-icon-m.png"); background-size: 15px 19px; background-position: 0 3px; } .map_area .map_div { margin-top: 25px; height: 120vw; } .map_area .zoom_btn { top: -15px; } .map_area .zoom_btn a.zoom_in { position: relative; min-width: auto !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden; -webkit-transform: scale(1); transform: scale(1); } .map_area .zoom_btn a.zoom_in:before { content: ""; display: block; height: 0; position: absolute; top: 50%; left: 50%; right: auto; width: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; border-radius: 50%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .map_area .zoom_btn a.zoom_in > span { position: relative; z-index: 1; } .map_area .zoom_btn a.zoom_in:hover, .map_area .zoom_btn a.zoom_in:active { -webkit-transform: scale(1.1); transform: scale(1.1); } .map_area .zoom_btn a.zoom_in:hover:before, .map_area .zoom_btn a.zoom_in:active:before { width: calc(100% + 2px); height: calc(100% + 2px); background-color: #2f7d4e; } .map_area .zoom_btn a.zoom_in span { background-size: 15px; } .map_area .zoom_btn a.zoom_out { position: relative; min-width: auto !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden; -webkit-transform: scale(1); transform: scale(1); } .map_area .zoom_btn a.zoom_out:before { content: ""; display: block; height: 0; position: absolute; top: 50%; left: 50%; right: auto; width: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; border-radius: 50%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .map_area .zoom_btn a.zoom_out > span { position: relative; z-index: 1; } .map_area .zoom_btn a.zoom_out:hover, .map_area .zoom_btn a.zoom_out:active { -webkit-transform: scale(1.1); transform: scale(1.1); } .map_area .zoom_btn a.zoom_out:hover:before, .map_area .zoom_btn a.zoom_out:active:before { width: calc(100% + 2px); height: calc(100% + 2px); background-color: #2f7d4e; } .map_area .zoom_btn a.zoom_out span { background-size: 15px; } .map_tab .map_tit { margin-bottom: 20px; font-size: 21px; } .map_tab .map_txt { display: block; margin-top: 5px; padding-left: 20px; font-size: 16px; font-weight: 400; color: #aaa; line-height: 1.5; background-size: 15px 19px; background-position: 0 2px; } .map_tab .map_txt:after { display: none; } .map_tab .map_txt:first-child { margin-top: 0; } .map_tab .map_div { margin-top: 20px; height: 600px; background: #f8f8f8; } .map_tab .map_div img { max-width: 100%; } .map_tab .map_div img.pc { display: none; } .map_tab .map_div img.mobile { display: block; } } /* btn_type */ .btn_area { margin-top: 60px; text-align: center; } .btn_area a { display: inline-block; margin-left: 7px; } .btn_area a:first-child { margin-left: 0; } .tab_menu .swiper-wrapper .swiper-slide { position: relative; display: inline-block; width: auto; padding: 0 15px; font-size: 20px; font-weight: 400; color: #aaa; line-height: 1.5; } .tab_menu .swiper-wrapper .swiper-slide:first-child { padding-left: 0; } .tab_menu .swiper-wrapper .swiper-slide:not(:first-child)::before { content: ''; display: block; position: absolute; top: calc(50% - 8px); left: 0; right: auto; width: 1px; height: 16px; background-color: #e5e5e5; } .tab_menu .swiper-wrapper .swiper-slide.on { font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: 700; color: #2f7d4e; } .tab_area .tab_menu { margin-bottom: 25px; } .green_btn { min-width: 160px; height: 56px; padding: 0 60px; border-radius: 28px; border: 1px solid #333; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 20px; font-weight: 700; color: #333; line-height: 54px; position: relative; display: inline-block; overflow: hidden; } .green_btn:before { content: ""; display: block; width: calc(100% + 2px); height: 100%; position: absolute; top: 100%; left: 0; right: auto; width: 100%; background-color: #fff; border-radius: 100% 100% 0 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .green_btn > span { position: relative; z-index: 1; } .green_btn.on:before, .green_btn:hover:before, .green_btn:active:before { height: 190%; top: -90%; background-color: #2f7d4e; } .green_btn.small { min-width: 0; height: 40px; padding: 0 30px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 16px; font-weight: 500; color: #333; line-height: 39px; } .green_btn.on, .green_btn:hover, .green_btn:active { color: #fff; border-color: #2f7d4e; } .gray_btn { min-width: 160px; height: 56px; padding: 0 60px; border-radius: 28px; border: 1px solid #888; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 20px; font-weight: 700; color: #888; line-height: 54px; position: relative; display: inline-block; overflow: hidden; } .gray_btn:before { content: ""; display: block; width: calc(100% + 2px); height: 100%; position: absolute; top: 100%; left: 0; right: auto; width: 100%; background-color: #fff; border-radius: 100% 100% 0 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .gray_btn > span { position: relative; z-index: 1; } .gray_btn.on:before, .gray_btn:hover:before, .gray_btn:active:before { height: 190%; top: -90%; background-color: #888; } .gray_btn.small { min-width: 0; height: 40px; padding: 0 30px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 16px; font-weight: 500; color: #888; line-height: 40px; } .gray_btn.on, .gray_btn:hover, .gray_btn:active { color: #fff; } .white_btn { min-width: 160px; height: 56px; padding: 0 60px; border-radius: 28px; border: 1px solid #fff; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 20px; font-weight: 700; color: #fff; line-height: 54px; position: relative; display: inline-block; overflow: hidden; } .white_btn:before { content: ""; display: block; width: calc(100% + 2px); height: 100%; position: absolute; top: 100%; left: 0; right: auto; width: 100%; background-color: transparent; border-radius: 100% 100% 0 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .white_btn > span { position: relative; z-index: 1; } .white_btn.on:before, .white_btn:hover:before, .white_btn:active:before { height: 190%; top: -90%; background-color: #fff; } .white_btn.small { min-width: 0; height: 40px; padding: 0 30px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 16px; font-weight: 500; color: #fff; line-height: 39px; } .white_btn.on, .white_btn:hover, .white_btn:active { color: #2f7d4e; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .green_btn.small, .gray_btn.small, .white_btn.small { line-height: 37px; } } .more_btn { display: inline-block; border: 1px solid #ddd !important; position: relative; min-width: auto !important; width: 80px !important; height: 80px !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden; -webkit-transform: scale(1); transform: scale(1); } .more_btn:before { content: ""; display: block; height: 0; position: absolute; top: 50%; left: 50%; right: auto; width: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; border-radius: 50%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .more_btn > span { position: relative; z-index: 1; } .more_btn:hover, .more_btn:active { -webkit-transform: scale(1.1); transform: scale(1.1); } .more_btn:hover:before, .more_btn:active:before { width: calc(100% + 2px); height: calc(100% + 2px); background-color: #2f7d4e; } .more_btn span { display: block; height: 100%; background: url("../images/more-icon.png") no-repeat center; text-indent: -999px; } .more_btn.on span, .more_btn:hover span, .more_btn:active span { background: url("../images/more-icon-on.png") no-repeat center; } .back_btn { width: 41px; height: 8px; background: url("../images/back-icon.png") no-repeat 0 0; text-indent: -9999px; overflow: hidden; } .link_arrow { display: inline-block; position: relative; padding-right: 60px; font-size: 16px; font-weight: 400; color: #333; line-height: 1.5; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .link_arrow::after { content: ''; display: block; position: absolute; top: calc(50% - 6px); left: auto; right: 10px; width: 41px; height: 8px; background: url(../images/arrow-btn-icon.png) no-repeat; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .link_arrow:hover { color: #2f7d4e; } .link_arrow:hover::after { right: 0; background-image: url(../images/arrow-btn-icon-on.png); } .down_btn { min-width: 160px; height: 56px; padding: 0 60px; border-radius: 28px; border: 1px solid #333; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 20px; font-weight: 700; color: #333; line-height: 54px; position: relative; display: inline-block; overflow: hidden; } .down_btn:before { content: ""; display: block; width: calc(100% + 2px); height: 100%; position: absolute; top: 100%; left: 0; right: auto; width: 100%; background-color: #fff; border-radius: 100% 100% 0 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .down_btn > span { position: relative; z-index: 1; } .down_btn.on:before, .down_btn:hover:before, .down_btn:active:before { height: 190%; top: -90%; background-color: #2f7d4e; } .down_btn span { padding-right: 30px; background: url("../images/attach-icon-b.png") no-repeat right 1px; } .down_btn.small { min-width: auto; height: 40px; padding: 0 30px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 16px; font-weight: 500; color: #333; line-height: 40px; } .down_btn:hover, .down_btn:active { color: #fff; border-color: #2f7d4e; } .down_btn:hover span, .down_btn:active span { background-image: url("../images/attach-icon-on.png"); } .file_div a { min-height: 42px; padding: 8px 20px; margin-right: 10px; font-size: 16px; font-weight: 400; color: #888; line-height: 1.5; border: 1px solid #888; border-radius: 20px; position: relative; display: inline-block; overflow: hidden; } .file_div a:before { content: ""; display: block; width: calc(100% + 2px); height: 100%; position: absolute; top: 100%; left: 0; right: auto; width: 100%; background-color: #fff; border-radius: 100% 100% 0 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .file_div a > span { position: relative; z-index: 1; } .file_div a.on:before, .file_div a:hover:before, .file_div a:active:before { height: 190%; top: -90%; background-color: #2f7d4e; } .file_div a span { display: inline-block; padding-right: 26px; background: url("../images/attach-icon.png") no-repeat right center; } .file_div a:last-child { margin-right: 0; } .file_div a:hover, .file_div a:active { border: 1px solid #2f7d4e; color: #fff; } .file_div a:hover span, .file_div a:active span { background-image: url("../images/attach-icon-on.png"); } @media all and (max-width: 767px) { .btn_area { margin-top: 40px; } .btn_area a { display: block; width: 100%; margin: 10px auto 0; } .btn_area a:first-child { margin: 0px auto; } .tab_menu .swiper-wrapper .swiper-slide { padding: 0 15px; font-size: 16px; } .tab_area .tab_menu { margin-bottom: 25px; } .green_btn { min-width: 150px; height: 55px; font-size: 15px; } .green_btn.small { display: inline-block; width: auto; padding: 0 20px; font-size: 13px; line-height: 39px; } .gray_btn { min-width: 150px; height: 55px; font-size: 15px; } .gray_btn.small { display: inline-block; width: auto; padding: 0 20px; font-size: 13px; line-height: 39px; } .white_btn { min-width: 150px; height: 55px; font-size: 15px; } .white_btn.small { display: inline-block; width: auto; padding: 0 20px; font-size: 13px; line-height: 39px; } .more_btn { width: 50px !important; height: 50px !important; } .more_btn span { background-size: 18px; } .back_btn { width: 30px; height: 7px; background-size: 100% auto; } .link_arrow { padding-right: 35px; font-size: 13px; } .link_arrow::after { position: relative; top: -2px; right: -7px; display: inline-block; width: 25px; height: 5px; background-size: 25px 5px; } .link_arrow:hover::after { right: -15px; } .down_btn { min-width: 150px; height: 55px; font-size: 15px; } .down_btn.small { display: inline-block; width: auto; font-size: 13px; } .file_div a { min-height: 37px; padding: 8px 25px; margin-right: 5px; font-size: 13px; } .file_div a span { padding-right: 23px; background-size: 13px auto; } .file_div a:last-child { margin-right: 0; } } .attach_area { width: 100%; } .attach_area:after { content: ""; display: block; clear: both; } .attach_area .attach_btn { float: left; display: block; width: 120px; height: 50px; margin-right: 10px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 18px; font-weight: 700; color: #333; line-height: 50px; border: 1px solid #333; text-align: center; position: relative; display: inline-block; overflow: hidden; } .attach_area .attach_btn:before { content: ""; display: block; width: calc(100% + 2px); height: 100%; position: absolute; top: 100%; left: 0; right: auto; width: 100%; background-color: #fff; border-radius: 100% 100% 0 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 0; } .attach_area .attach_btn > span { position: relative; z-index: 1; } .attach_area .attach_btn.on:before, .attach_area .attach_btn:hover:before, .attach_area .attach_btn:active:before { height: 190%; top: -90%; background-color: #2f7d4e; } .attach_area .attach_btn:hover, .attach_area .attach_btn:active { color: #fff; border-color: #2f7d4e; } .attach_area .attach_file { float: left; width: calc(100% - 130px); margin-top: -2px; } .attach_area .attach_file::after { content: ""; display: block; clear: both; } .attach_area .attach_file li { float: left; margin: 2px; min-height: 50px; padding: 12px 20px 9px; font-size: 18px; font-weight: 400; color: #888; line-height: 1.5; background: #f8f8f8; border: 1px solid #e5e5e5; } .attach_area .attach_file li .close_btn { display: inline-block; width: 13px; height: 13px; margin: 2px 0 0 10px; background: url("../images/file-close-icon.png") no-repeat center; } @media all and (max-width: 767px) { .attach_area .attach_btn { width: 106px; height: 45px; font-size: 14px; line-height: 45px; } .attach_area .attach_file { float: left; width: auto; max-width: calc(100% - 116px); } .attach_area .attach_file li { position: relative; max-width: 100%; min-height: 45px; padding: 12px 35px 8px 15px; font-size: 14px; } .attach_area .attach_file li span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach_area .attach_file li .close_btn { position: absolute; top: 50%; right: 15px; margin: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } .captcha_wrap { width: 385px; } .captcha_wrap::after { content: ""; display: block; clear: both; } .captcha_wrap .form_div.half_type { width: 100%; max-width: none; } .captcha_area { position: relative; width: 385px; height: 80px; padding-right: 40px; margin-bottom: 10px; } .captcha_area .captcha_img { position: relative; width: 100%; height: 80px; border: 1px solid #e5e5e5; border-right: 0; overflow: hidden; text-align: center; } .captcha_area .captcha_img img { max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; right: auto; width: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .captcha_area .captcha_btn { position: absolute; top: 0; left: auto; right: 0; width: 40px; } .captcha_area .captcha_btn a { display: block; width: 40px; height: 40px; border: 1px solid #e5e5e5; border-bottom: 0; text-indent: -999px; overflow: hidden; } .captcha_area .captcha_btn a.refresh_btn { background: url("../images/refresh-icon.png") no-repeat center; } .captcha_area .captcha_btn a.listen_btn { border-bottom: 1px solid #e5e5e5; background: url("../images/listen-icon.png") no-repeat center; } @media all and (max-width: 767px) { .captcha_wrap { width: 100%; } .captcha_area { position: relative; width: 100%; height: 90px; padding-right: 45px; margin-bottom: 0; } .captcha_area .captcha_img { width: 100%; height: 90px; } .captcha_area .captcha_btn { width: 45px; } .captcha_area .captcha_btn a { width: 45px; height: 45px; } .captcha_area .captcha_btn a.refresh_btn { background-size: 15px auto; } .captcha_area .captcha_btn a.listen_btn { background-size: 15px auto; } .captcha_area + .form_div { margin-top: 10px; } } /* font style */ .h2_txt { font-size: 18px; font-weight: 400; color: #666; line-height: 1.5; } .sub_tit { font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 26px; font-weight: 700; color: #333; line-height: 1.5; letter-spacing: -0.06em; } .info_txt { font-size: 16px; font-weight: 400; color: #888; line-height: 1.5; } .essential { color: #2f7d4e; } .dot_list li { position: relative; margin-top: 10px; padding-left: 11px; font-size: 16px; font-weight: 400; color: #666; line-height: 1.5; } .dot_list li:first-child { margin-top: 0; } .dot_list li:before { content: ""; display: block; position: absolute; top: 10px; left: 0; width: 3px; height: 3px; background: #aaa; } .swipe_table + .dot_list { margin-top: 30px; } .table_type + .dot_list { margin-top: 30px; } dl.title_list::after { content: ""; display: block; clear: both; } dl.title_list:not(:first-of-type) { margin-top: 13px; } dl.title_list dt { float: left; width: 140px; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 16px; font-weight: 700; color: #666; line-height: 1.5; } dl.title_list dd { float: left; width: calc(100% - 140px); font-size: 16px; font-weight: 400; color: #888; line-height: 1.5; } .tag_list p { display: inline-block; min-height: 32px; padding: 0 15px; margin: 0 2px 10px; font-size: 16px; font-weight: 400; color: #888; line-height: 30px; border-radius: 20px; border: 1px solid #ddd; } .tag_list p:last-child { margin-right: 0; } .sub_tit_div { position: relative; margin-bottom: 20px; } .sub_tit_div:after { content: ""; display: block; clear: both; } .sub_tit_div > .essential { padding-left: 10px; bottom: 0; position: absolute; top: auto; left: auto; right: 0; width: auto; font-size: 16px; font-weight: 400; color: #2f7d4e; line-height: 1.5; } .sub_tit_div > .essential:before { content: ""; position: absolute; top: 0; left: 0; right: auto; width: 6px; display: block; height: 6px; background: #2f7d4e; border-radius: 50%; } .gray_info_box { padding: 40px 45px; background: #f8f8f8; word-break: keep-all; } .gray_info_box .main_text { font-size: 18px; font-weight: 400; color: #666; line-height: 1.5; } .gray_info_box .main_text + .sub_text { margin-top: 10px; } .gray_info_box .sub_text { font-size: 16px; font-weight: 400; color: #888; line-height: 1.5; } .gray_info_box .dot_list li { color: #888; } .result_box + .gray_info_box { margin-top: 120px; } .gray_info_box.weather_icon {position:relative; margin:-80px 0 70px;padding:40px 4.1667vw; text-align:left;display: flex;justify-content: space-between;align-items: center;} .gray_info_box.weather_icon p{position:relative; font-size:20px;line-height:32px;color:#888;} .gray_info_box.weather_icon p span.bold{font-weight:bold;} @media (max-width: 1200px){ .gray_info_box.weather_icon .green_btn{padding:0 20px;font-size:15px;} } @media all and (max-width: 1023px) { .gray_info_box { padding: 25px; } .gray_info_box.weather_icon { padding-left: 100px; } } @media all and (max-width: 767px) { .h2_txt { font-size: 14px; } .sub_tit { font-size: 18px; } .info_txt { font-size: 13px; } .dot_list li { margin-top: 5px; font-size: 13px; } .dot_list li:before { top: 7px; } .swipe_table + .dot_list { margin-top: 15px; } .table_type + .dot_list { margin-top: 15px; } dl.title_list { display: block; } dl.title_list dt { width: 100%; font-size: 13px; } dl.title_list dd { margin-top: 10px; width: 100%; font-size: 13px; } .tag_list p { font-size: 13px; } .sub_tit_div { margin-bottom: 10px; } .sub_tit_div > .essential { font-size: 13px; } .result_box + .gray_info_box { margin-top: 70px; } .gray_info_box .main_text { font-size: 14px; } .gray_info_box .sub_text { font-size: 13px; } .gray_info_box.weather_icon {position:relative; margin:-50px 0 45px; flex-direction:column; padding:50px 13.3333vw;text-align:center;} .gray_info_box.weather_icon p{font-size:15px;line-height: 1.5;letter-spacing: -0.06em;} .gray_info_box.weather_icon p br{display:none;} .gray_info_box.weather_icon .green_btn{margin-top:20px;padding:0 30px;} } /* 커스텀 스크롤 */ .custom_scroll { width: 100%; max-height: 100%; overflow: hidden; } .custom_scroll .mCSB_scrollTools { width: 5px; height: calc(100% - 20px); padding: 0 10px; top: 10px; opacity: 1; } .custom_scroll .mCSB_scrollTools .mCSB_draggerRail { width: 5px; background: #fff; } .custom_scroll .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 5px; background: #ddd; } @media all and (max-width: 1023px) { .custom_scroll { overflow: auto; } } /* swiper 스타일 */ .swiper-slide { display: block; } .swiper-button-next { width: 80px; height: 80px; border-radius: 50%; background: rgba(0, 0, 0, 0.3) url("../images/main-vis-next.png") no-repeat center; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .swiper-button-next:hover, .swiper-button-next:active { background-color: rgba(0, 0, 0, 0.6); } .swiper-button-prev { width: 80px; height: 80px; border-radius: 50%; background: rgba(0, 0, 0, 0.3) url("../images/main-vis-prev.png") no-repeat center; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .swiper-button-prev:hover, .swiper-button-prev:active { background-color: rgba(0, 0, 0, 0.6); } .swiper-pagination { bottom: 40px !important; } .swiper-pagination-bullet { width: 16px; height: 16px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.2); opacity: 1; } .swiper-pagination-bullet-active { background: #fff; border: 1px solid #aaa; } .swiper-pagination .play_btn { display: inline-block; width: 11px; height: 16px; margin-left: 15px; background: url("../images/play-icon-on.png") no-repeat center; } .swiper-pagination .play_btn.on { background-image: url("../images/play-icon.png"); } @media all and (max-width: 1023px) { .swiper-button-prev, .swiper-button-next { display: none; } } @media all and (max-width: 767px) { .swiper-pagination { bottom: 30px !important; } .swiper-pagination-bullet { width: 12px; height: 12px; } .swiper-pagination .play_btn { display: inline-block; width: 8px; height: 10px; margin-left: 5px; background-size: contain; } } .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; z-index: 1010; padding: 0; text-align: left; display: none; } .modal.in { display: block; z-index: 1010; } .modal .modal-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; display: none; } .modal .modal-back.modal-back.in { z-index: 1000; opacity: .5; } .modal .modal-dialog { position: relative; z-index: 1020; width: 820px; top: 50%; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; } .modal .modal-dialog:focus { outline: 1px dotted #2e2d2e; } .modal .modal-dialog .modal-header { height: 104px; padding: 0 40px; line-height: 104px; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box; } .modal .modal-dialog .modal-header .modal-title { display: inline-block; width: 100%; font-family: "mont-B", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 26px; font-weight: 700; color: #333; line-height: 1.5; letter-spacing: -0.06em; max-width: calc(100% - 65px); } .modal .modal-dialog .modal-conts { padding-bottom: 40px; } .modal .modal-dialog .modal-conts .cont { max-height: calc(70vh - 124px); padding: 20px 40px 10px; } .modal .modal-dialog .modal-conts .cont.custom_scroll { padding: 20px 0 10px 40px; } .modal .modal-dialog .modal-conts .cont.custom_scroll .mCSB_container { margin-right: 40px; } .modal .modal-dialog .close-modal { display: block; position: absolute; top: 40px; right: 40px; width: 24px; height: 23px; background: url("../images/popup-close.png") no-repeat center; } .modal .modal-dialog .bot_area { position: relative; padding: 20px 30px; background: #333333; text-align: right; } .modal .modal-dialog .bot_area a { position: relative; display: inline-block; margin-right: 60px; font-size: 16px; font-weight: 400; color: #fff; line-height: 1.5; } .modal .modal-dialog .bot_area a:after { content: ""; position: absolute; top: 4px; left: auto; right: -30px; width: 1px; display: block; height: 15px; background: rgba(255, 255, 255, 0.4); } .modal .modal-dialog .bot_area a:last-child { margin-right: 0; } .modal .modal-dialog .bot_area a:last-child:after { display: none; } .modal .modal-dialog .bot_area a.close-modal { width: auto; top: 0; right: 0; padding-right: 20px; background: url("../images/close-icon-w-14x14.png") no-repeat right center; } .modal .modal-dialog .bot_area .chk_type label { color: #fff; } .modal .modal-dialog .bot_area .chk_type label:before { background-color: #fff; } @media all and (max-width: 1023px) { .modal .modal-dialog { width: 100%; min-height: 100%; top: 0; } .modal .modal-dialog .modal-conts .cont { max-height: none; overflow-y: auto; } } @media all and (max-width: 767px) { .modal .modal-dialog .modal-header { height: auto; padding: 14px 4%; line-height: normal; } .modal .modal-dialog .modal-header .modal-title { font-size: 18px; max-width: calc(100% - 25px); } .modal .modal-dialog .modal-conts { padding-bottom: 70px; } .modal .modal-dialog .modal-conts .cont { padding: 20px 4% 10px; } .modal .modal-dialog .close-modal { top: 0; right: 0; width: 45px; height: 55px; background-image: url("../images/popup-close-m.png"); background-size: 15px; } .modal .modal-dialog .bot_area { padding: 15px 4%; } .modal .modal-dialog .bot_area a { margin-right: 40px; font-size: 14px; } .modal .modal-dialog .bot_area a:after { right: -20px; height: 12px; } .modal .modal-dialog .bot_area a.close-modal { width: auto; height: auto; top: 0; right: 0; padding-right: 20px; background-image: url("../images/close-icon-w-14x14.png"); background-size: 8px; } } .result_box { padding: 160px 0; background-color: #f8f8f8; } .result_box .img_area { width: 102px; height: 102px; margin: 0 auto; border-radius: 50%; border: 1px solid #ddd; } .result_box .img_area img { width: 100%; } .result_box .text_area { margin-top: 20px; font-size: 20px; font-weight: 400; color: #333; line-height: 1.5; text-align: center; } .result_box .text_area p { margin-top: 10px; } .result_box .text_area p:first-child { margin-top: 0; } .result_box .text_area .green_txt { font-family: "mont-B", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; color: #2f7d4e; } .result_box .text_area .sub_text { font-size: 18px; font-weight: 400; color: #888; line-height: 1.5; } .card_list_type + .result_box { margin-top: 120px; } .result_box + .card_list_type { margin-top: 120px; } @media all and (max-width: 767px) { .result_box { padding: 65px 4%; } .result_box .img_area { width: 76px; height: 76px; } .result_box .text_area { margin-top: 10px; font-size: 15px; word-break: keep-all; } .result_box .text_area .sub_text { font-size: 14px; } } .error_wrap { position: relative; height: 100vh; background: url("../images/error-bg.jpg") no-repeat center bottom; background-size: cover; } .error_wrap .logo { position: absolute; top: 60px; left: 120px; right: auto; width: 120px; } .error_wrap .logo img { width: 100%; } .error_wrap .error_txt { position: absolute; top: 50%; left: 50%; right: auto; width: 560px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .error_wrap .error_txt .txt1 { font-size: 60px; font-weight: 700; color: #fff; line-height: 1.3; letter-spacing: -0.06em; font-family: "mont-B", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; } .error_wrap .error_txt .txt2 { margin: 20px 0 40px; font-size: 20px; font-weight: 400; color: #fff; line-height: 1.5; } .error_wrap .error_txt .dot_list { padding: 40px 75px 0; border-top: 1px solid rgba(255, 255, 255, 0.4); text-align: left; } .error_wrap .error_txt .dot_list li { position: relative; padding-left: 80px; font-size: 16px; font-weight: 400; color: #fff; line-height: 1.5; } .error_wrap .error_txt .dot_list li:before { background: #fff; } .error_wrap .error_txt .dot_list li span { position: absolute; top: 0; left: 10px; right: auto; width: 60px; margin-right: 20px; font-weight: 700; font-family: "mont-M", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; } @media all and (max-width: 1750px) { .error_wrap .logo { left: 50px; } } @media all and (max-width: 1023px) { .error_wrap { height: 100vh; background-image: url("../images/error-bg-m.jpg"); } .error_wrap .logo { top: 20px; left: 4%; width: 92px; } .error_wrap .error_txt { top: 45%; } } @media all and (max-width: 767px) { .error_wrap .logo { top: 10px; width: 55px; } .error_wrap .error_txt { top: 35%; width: 92%; } .error_wrap .error_txt .txt1 { font-size: 30px; } .error_wrap .error_txt .txt2 { margin: 25px 0 35px; font-size: 15px; } .error_wrap .error_txt .btn_area a { display: inline-block; width: auto; } .error_wrap .error_txt .dot_list { padding: 30px 25px 0; } .error_wrap .error_txt .dot_list li { padding-left: 70px; font-size: 13px; word-break: keep-all; } .error_wrap .error_txt .dot_list li span { margin-right: 10px; } } @media all and (max-width: 325px) { .error_wrap .error_txt { top: 45%; word-break: keep-all; } .error_wrap .error_txt br { display: none; } } .sticky_top { position: relative; z-index: 3; width: 100%; } .sticky_top .inner { position: relative; padding: 0; } .sticky_top.fixed .inner { position: fixed; top: 0; left: 50%; z-index: 10; padding: 25px 0; background-color: #fff; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .sticky_top.fixed .inner::before { content: ''; display: block; position: absolute; top: 0; left: 50%; right: auto; width: 100vw; height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #ffffff; border-bottom: 1px solid #e5e5e5; } .sticky_top .tab_menu { margin-bottom: 0; } .sticky_top .form_div { position: absolute; top: 50%; right: 0; z-index: 1; width: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .sticky_top .form_div select { padding-left: 0; border: none; border-bottom: 2px solid #333; background-position: right 2px center; color: #333; } .sticky_top .form_div select option { color: #666; } @media all and (max-width: 767px) { .sticky_top .form_div { position: static; margin-top: 21px; padding-bottom: 18px; width: 100%; -webkit-transform: translateY(0); transform: translateY(0); } .sticky_top .form_div select { width: 100%; } .sticky_top.fixed .inner { padding: 12px 0; } .sticky_top.fixed .inner .form_div { display: none; } } .sub_vis { position: relative; } .sub_vis .swiper-container .swiper-slide { overflow: hidden; } .sub_vis img { width: auto; height: 100%; left: 50%; position: relative; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .sub_vis:after { content: ""; position: absolute; top: 0; left: 0; right: auto; width: 100%; height: 100%; background: #fff; z-index: 1; -webkit-transition: all 1.2s ease; transition: all 1.2s ease; } .sub_vis.complete:after { height: 0; } @media all and (max-width: 767px) { .sub_vis .swiper-pagination { bottom: 14px !important; } } /* 2021-07-08 티져 */ #new_teaser{position:relative; width:100%; height:100vh; min-height:1080px; padding-top:100vh;} #new_teaser .gate{position:fixed; top:0; left:0; width:100%; height:100vh; min-height:1080px; padding-top:150px; text-align:center; background:url('../images/teaser-gatebg.jpg') no-repeat center center; background-size:cover;} #new_teaser .gate .txt1 span{display:inline-block; width:428px; height:54px; padding:8px 0; border-radius:27px; background:#1FB2F4; color:#fff; font-size:26px; font-weight:900;} #new_teaser .gate .txt2{font-size:100px; font-weight:900; color:#fff; margin:55px 0 10px;} #new_teaser .gate .txt3{font-size:80px; font-weight:900; color:#fff;} #new_teaser .teaser_con{position:relative; width:100%; height:100vh; min-height:1080px;} #new_teaser .teaser_con .in_con{position:relative; width:100%; height:calc(100% - 100px); min-height:980px;} #new_teaser .teaser_con .in_con::after{content:""; display:block; clear:both;} #new_teaser .teaser_con a{display:block; position:relative; width:33.3%; height:100%; padding:140px 80px; color:#fff; float:left; overflow:hidden;} #new_teaser .teaser_con a:nth-child(2){width:33.4%;} #new_teaser .teaser_con a .img{transform:scale(1); transition:0.5s;} #new_teaser .teaser_con a:nth-child(1) .img{position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; background:url('../images/new-teaser-conimg1.jpg') no-repeat center center; background-size:cover; transform:scale(1); transition:0.5s;} #new_teaser .teaser_con a:nth-child(2) .img{position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; background:url('../images/new-teaser-conimg2.jpg') no-repeat center center; background-size:cover;} #new_teaser .teaser_con a:nth-child(3) .img{position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; background:url('../images/new-teaser-conimg3.jpg') no-repeat center center; background-size:cover;} #new_teaser .teaser_con a:hover .img{transform:scale(1.1); transition:0.5s;} #new_teaser .teaser_con a .txt1{position:relative; font-size:26px; font-weight:900; color:#FFE971} #new_teaser .teaser_con a .txt2{position:relative; font-size:42px; font-weight:900; margin:0 0 43px; word-break:keep-all;} #new_teaser .teaser_con a .txt3{position:relative; font-size:20px; font-weight:900;} #new_teaser .teaser_con a .txt3 span{display:inline-block; padding-right:40px; background:url('../images/new-teaser-arrow.png') no-repeat center right;} #new_teaser_footer{width:100%; height:100px; padding-top:40px; text-align:center; background:#333; font-size:16px; font-weight:500; color:#888;} #teaser_layer{position:fixed; top:100%; left:0; width:100%; height:100vh; z-index:10; background:#fff;} #teaser_layer .swiper-slide{position:relative; width:100%; height:100vh; overflow:hidden} #teaser_layer .swiper-slide .top{position:relative; width:100%; height:50vh;} #teaser_layer .swiper-slide .top .in_con{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1400px; padding-left:647px;} #teaser_layer .swiper-slide .top .in_con .left{position:absolute; top:0; left:0; font-size:42px; font-weight:900; line-height:62px; color:#333;} #teaser_layer .swiper-slide .top .in_con .right{width:753px; font-size:20px; font-weight:400; line-height:32px; color:#333; word-break:keep-all;} #teaser_layer .swiper-slide .bot{width:100%; height:50vh; background:url('../images/new-teaser-layimg1.jpg') no-repeat center center; background-size:cover;} #teaser_layer .xbt{position:absolute; top:40px; right:40px; transform:rotateX(0deg); z-index:50; transition:0.5s;} #teaser_layer .xbt:hover{ transform:rotateZ(180deg);} #teaser_layer .swiper-slide .in_lay2con{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1396px;} #teaser_layer .swiper-slide .in_lay2con .tit{font-size:42px; line-height:62px; font-weight:900; text-align:center; color:#333;} #teaser_layer .swiper-slide .in_lay2con ul{width:100%; margin-top:80px;} #teaser_layer .swiper-slide .in_lay2con ul:after{content:""; display:block; clear:both;} #teaser_layer .swiper-slide .in_lay2con li{width:330px; float:left; margin-right:24px;} #teaser_layer .swiper-slide .in_lay2con li:last-child{margin-right:0;} #teaser_layer .swiper-slide .in_lay2con li .txt{margin-top:40px;} #teaser_layer .swiper-slide .in_lay2con li .txt .txt1{font-size:22px; font-weight:900; color:#333; margin-bottom:20px;} #teaser_layer .swiper-slide .in_lay2con li .txt .txt2{font-size:18px; font-weight:400; color:#333; line-height:30px; word-break:keep-all;} #teaser_layer .swiper-slide .loca_top{position:relative; width:100%; height:55vh; text-align:center;} #teaser_layer .swiper-slide .loca_top .in_con{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1400px;} #teaser_layer .swiper-slide .loca_top .in_con .tit{font-size:42px; font-weight:900; line-height:62px; color:#333;} #teaser_layer .swiper-slide .loca_top .in_con .subtit{font-size:20px; font-weight:400; line-height:32px; color:#333; margin-top:40px;} #teaser_layer .swiper-slide .loca_top .in_con .way{margin-top:80px;} #teaser_layer .swiper-slide .loca_top .in_con .way:after{content:""; display:block; clear:both;} #teaser_layer .swiper-slide .loca_top .in_con .way dl{float:left; text-align:left; padding-left:120px; margin-right:100px; font-size:18px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(1){background:url('../images/new-teaser-bus.png') no-repeat 0 0;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(2){background:url('../images/new-teaser-metro.png') no-repeat 0 0;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(3){background:url('../images/new-teaser-car.png') no-repeat 0 0;} #teaser_layer .swiper-slide .loca_top .in_con .way dt{font-size:20px; font-weight:900; color:#333; margin-bottom:20px;} #teaser_layer .swiper-slide .loca_top .in_con .way dd p{color:#666; margin-bottom:10px;} #teaser_layer .swiper-slide .loca_top .in_con .way dd strong{display:inline-block; width:35px; margin-right:13px;} #teaser_layer .swiper-button-prev{left:120px; background: #F8F8F8 url(../images/teaser-lay-prev.png) no-repeat center;} #teaser_layer .swiper-button-next{right:120px; background: #F8F8F8 url(../images/teaser-lay-next.png) no-repeat center;} #teaser_layer .swiper-slide .loca_bot{width:100%; height:45vh; background:url('../images/new-teaser-layimg6.jpg') no-repeat center center; background-size:cover;} @media all and (max-width:1500px) { #teaser_layer .swiper-button-prev{left:3%;} #teaser_layer .swiper-button-next{right:3%;} #teaser_layer .swiper-slide .top .in_con{width:1280px; padding-left:547px;} #teaser_layer .swiper-slide{overflow-y:auto} #teaser_layer .swiper-slide .in_lay2con{position:relative; top:0%; left:0%; transform:translate(0%, 0%); width:1280px; padding-top:120px; margin:auto;} #teaser_layer .swiper-slide .in_lay2con ul{width:700px; margin:80px auto 0;} #teaser_layer .swiper-slide .in_lay2con li{width:49%; height:700px; float:left; margin-right:0} #teaser_layer .swiper-slide .in_lay2con li:nth-child(2n){float:right;} #teaser_layer .swiper-slide .in_lay2con li .img{width:331px; height:384px; margin:auto; overflow:hidden;} #teaser_layer .swiper-slide .in_lay2con li .img img{width:100%} #teaser_layer .swiper-slide .in_lay2con li .txt{width:331px; margin:30px auto; overflow:hidden;} #teaser_layer .swiper-slide .loca_top .in_con{width:1100px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(2){margin-bottom:30px;} } @media all and (max-width:1400px) { #new_teaser .teaser_con a .txt1{font-size:23px; margin:0 0 10px;} #new_teaser .teaser_con a .txt2{font-size:38px; margin:0 0 43px;} #new_teaser .teaser_con a .txt3{font-size:18px;} #new_teaser .teaser_con a .txt3 span{padding-right:40px; background:url('../images/new-teaser-arrow.png') no-repeat center right; background-size:25px;} #teaser_layer .swiper-slide .top .in_con{width:1100px; padding-left:400px;} } @media all and (max-width:1280px) { #new_teaser .gate .txt2{font-size:90px; line-height:100px;} #new_teaser .gate .txt3{font-size:70px;} #new_teaser .gate .txt1 span{width:400px; height:48px; border-radius:24px; font-size:20px;} #new_teaser .gate .txt2{font-size:90px; margin:55px 0 10px;} #new_teaser .gate .txt3{font-size:70px;} #new_teaser .teaser_con a .txt1{font-size:20px;} #new_teaser .teaser_con a .txt2{font-size:33px; margin:0 0 43px;} #new_teaser .teaser_con a .txt3{font-size:15px;} #teaser_layer .swiper-slide .top .in_con{position:relative; top:0%; left:0%; transform:translate(0%, 0%); width:94%; padding:120px 3% 0;} #teaser_layer .swiper-slide .top .in_con .left{position:relative; top:0; left:0; margin-bottom:80px;} #teaser_layer .swiper-slide .top .in_con .right{width:100%;} #teaser_layer .swiper-slide .in_lay2con{position:relative; top:0%; left:0%; transform:translate(0%, 0%); width:80%; padding-top:120px; margin:auto;} #teaser_layer .swiper-slide .in_lay2con li{width:49%; height:700px; float:left; margin-right:0} #teaser_layer .swiper-slide .in_lay2con li:nth-child(2n){float:right;} #teaser_layer .swiper-slide .in_lay2con li .img{width:331px; height:384px; margin:auto; overflow:hidden;} #teaser_layer .swiper-slide .in_lay2con li .img img{width:100%} #teaser_layer .swiper-slide .in_lay2con li .txt{width:331px; margin:30px auto; overflow:hidden;} } @media all and (max-width:1100px) { #new_teaser .gate .txt1 span{width:380px; height:40px; border-radius:20px; font-size:18px;} #new_teaser .gate .txt2{font-size:80px; margin:55px 0 10px;} #new_teaser .gate .txt3{font-size:60px;} #new_teaser .teaser_con a .txt1{font-size:17px;} #new_teaser .teaser_con a .txt2{font-size:30px;} #new_teaser .teaser_con a .txt3{font-size:15px;} #teaser_layer .swiper-slide .bot{background:url('../images/new-teaser-layimg1.jpg') no-repeat 0 center; background-size:cover;} #teaser_layer .swiper-slide .loca_top{height:auto; padding-bottom:60px;} #teaser_layer .swiper-slide .loca_top .in_con{position:relative; top:0%; left:0%; transform:translate(0%, 0%); width:80%; margin:auto; padding-top:120px;} #teaser_layer .swiper-slide .loca_top .in_con .subtit{margin-top:20px;} #teaser_layer .swiper-slide .loca_top .in_con .way{margin-top:60px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl{float:none; margin-bottom:50px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(2){margin-bottom:50px;} } @media all and (max-width:1023px) { #new_teaser .gate{background:url('../images/teaser-gatebg.jpg') no-repeat center 0; background-size:cover;} #new_teaser .gate .txt1 span{width:330px; font-size:17px;} #new_teaser .gate .txt2{font-size:70px; line-height:80px; word-break:keep-all;} #new_teaser .gate .txt3{font-size:50px;} #new_teaser .teaser_con{height:auto; min-height:auto;} #new_teaser .teaser_con .in_con{height:auto; min-height:auto;} #new_teaser .teaser_con a{width:100%; height:100%; padding:140px 80px; float:none; overflow:hidden;} #new_teaser .teaser_con a:nth-child(2){width:100%;} #teaser_layer .swiper-slide{overflow-y:auto} #teaser_layer .swiper-slide .top .in_con{width:100%; height:auto;} #teaser_layer .swiper-slide .top{height:auto; margin-bottom:100px;} #teaser_layer .swiper-slide .bot{background:url('../images/new-teaser-layimg1-m.jpg') no-repeat center 0; background-size:cover;} #teaser_layer .swiper-slide .in_lay2con{width:90%;} } @media all and (max-width:980px) { #new_teaser .teaser_con a{padding:50px 10% 250px;} #new_teaser .teaser_con a .txt1{font-size:15px;} #new_teaser .teaser_con a .txt2{font-size:21px; margin:0 0 22px;} #new_teaser .teaser_con a .txt3{font-size:13px;} #new_teaser .teaser_con a:nth-child(1) .img{background:url('../images/new-teaser-conimg1-m.jpg') no-repeat bottom right; background-size:cover;} #new_teaser .teaser_con a:nth-child(2) .img{background:url('../images/new-teaser-conimg2-m.jpg') no-repeat bottom right; background-size:cover;} #new_teaser .teaser_con a:nth-child(3) .img{background:url('../images/new-teaser-conimg3-m.jpg') no-repeat bottom right; background-size:cover;} #new_teaser .teaser_con a .txt3 span{padding-right:30px; background:url('../images/new-teaser-arrow.png') no-repeat center right; background-size:20px;} #new_teaser_footer{padding:40px 10%;} #teaser_layer .swiper-slide .top{margin-bottom:100px;} #teaser_layer .swiper-slide .top .in_con{padding:80px 3% 0} #teaser_layer .swiper-slide .top .in_con .left{font-size:36px; line-height:46px; margin-bottom:60px;} #teaser_layer .xbt{top:40px; right:5%;} #teaser_layer .swiper-slide .in_lay2con{padding-top:100px;} #teaser_layer .swiper-slide .in_lay2con .tit{text-align:left;} #teaser_layer .swiper-slide .in_lay2con{width:90%; padding-top:120px; margin:auto;} #teaser_layer .swiper-slide .in_lay2con li{width:100%; height:auto; float:none; margin-bottom:60px;} #teaser_layer .swiper-slide .in_lay2con li:nth-child(2n){float:none;} #teaser_layer .swiper-slide .in_lay2con li .img{width:100%; height:auto;} #teaser_layer .swiper-slide .in_lay2con li .img img{width:100%} #teaser_layer .swiper-slide .in_lay2con li .txt{width:100%; margin:30px auto;} #teaser_layer .swiper-slide .loca_top .in_con .tit{font-size:42px; line-height:62px;} #teaser_layer .swiper-slide .loca_top .in_con .subtit{font-size:20px; line-height:32px; margin-top:40px;} #teaser_layer .swiper-slide .loca_top .in_con .way{margin-top:80px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl{padding-left:120px; margin-right:0; font-size:18px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(1){background:url('../images/new-teaser-bus.png') no-repeat 0 0;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(2){background:url('../images/new-teaser-metro.png') no-repeat 0 0;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(3){background:url('../images/new-teaser-car.png') no-repeat 0 0;} #teaser_layer .swiper-slide .loca_top .in_con .way dt{font-size:20px; margin-bottom:20px;} #teaser_layer .swiper-slide .loca_top .in_con .way dd p{margin-bottom:10px;} #teaser_layer .swiper-slide .loca_top .in_con .way dd strong{width:35px; margin-right:13px;} } @media all and (max-width:768px) { #new_teaser .gate .txt1 span{width:214px; height:27px; padding:4px 0; border-radius:19px; font-size:13px;} #new_teaser .gate .txt2{font-size:50px; margin:27px 0 15px; line-height:60px; word-break:keep-all;} #new_teaser .gate .txt3{font-size:40px;} #new_teaser .teaser_con a .txt1{font-size:15px;} #new_teaser .teaser_con a .txt2{font-size:21px; margin:0 0 22px;} #new_teaser .teaser_con a .txt3{font-size:13px;} #teaser_layer .swiper-slide .top{margin-bottom:60px;} #teaser_layer .swiper-slide .top .in_con{padding:80px 3% 0} #teaser_layer .swiper-slide .top .in_con .left{font-size:31px; line-height:41px; margin-bottom:50px;} #teaser_layer .swiper-slide .top .in_con .right{font-size:17px; line-height:27px;} #teaser_layer .swiper-slide .in_lay2con{padding-top:80px;} #teaser_layer .swiper-slide .in_lay2con .tit{font-size:31px; line-height:41px;} #teaser_layer .swiper-slide .in_lay2con ul{width:100%; margin-top:60px;} #teaser_layer .swiper-slide .in_lay2con li .txt{margin-top:30px;} #teaser_layer .swiper-slide .in_lay2con li .txt .txt1{font-size:20px; margin-bottom:15px;} #teaser_layer .swiper-slide .in_lay2con li .txt .txt2{font-size:18px; line-height:28px;} #teaser_layer .xbt{top:30px;} #teaser_layer .swiper-slide .loca_top .in_con{width:90%;} #teaser_layer .swiper-slide .loca_top .in_con .tit{font-size:33px; line-height:46px;} #teaser_layer .swiper-slide .loca_top .in_con .subtit{font-size:16px; line-height:26px; margin-top:30px;} #teaser_layer .swiper-slide .loca_top .in_con .way{margin-top:60px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl{padding-left:80px; font-size:15px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(1){background:url('../images/new-teaser-bus.png') no-repeat 0 0; background-size:60px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(2){background:url('../images/new-teaser-metro.png') no-repeat 0 0; background-size:60px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(3){background:url('../images/new-teaser-car.png') no-repeat 0 0; background-size:60px;} #teaser_layer .swiper-slide .loca_top .in_con .way dt{font-size:18px; margin-bottom:15px;} #teaser_layer .swiper-slide .loca_top .in_con .way dd p{margin-bottom:7px;} #teaser_layer .swiper-slide .loca_top .in_con .way dd strong{width:35px; margin-right:13px;} } @media all and (max-width:500px) { #new_teaser .gate{min-height:100vh; padding:75px 10% 0; background:url('../images/teaser-gatebg.jpg') no-repeat center 0; background-size:cover;} #new_teaser .gate .txt1 span{width:214px; height:27px; padding:4px 0; border-radius:19px; font-size:13px;} #new_teaser .gate .txt2{font-size:50px; margin:27px 0 15px; line-height:60px; word-break:keep-all;} #new_teaser .gate .txt3{font-size:40px;} #new_teaser .teaser_con a{padding:50px 10% 100px;} #new_teaser .teaser_con a .txt1{font-size:15px;} #new_teaser .teaser_con a .txt2{font-size:21px; margin:0 0 22px;} #new_teaser .teaser_con a .txt3{font-size:13px;} #teaser_layer .swiper-slide .top .in_con{padding:60px 3% 0} #teaser_layer .swiper-slide .top .in_con .left{font-size:21px; line-height:31px; margin-bottom:40px;} #teaser_layer .swiper-slide .top .in_con .right{font-size:15px; line-height:25px;} #teaser_layer .swiper-slide .in_lay2con{padding-top:60px;} #teaser_layer .swiper-slide .in_lay2con .tit{font-size:21px; line-height:31px;} #teaser_layer .swiper-slide .in_lay2con ul{margin-top:40px;} #teaser_layer .swiper-slide .in_lay2con li .txt{margin-top:20px;} #teaser_layer .swiper-slide .in_lay2con li .txt .txt1{font-size:15px; margin-bottom:10px;} #teaser_layer .swiper-slide .in_lay2con li .txt .txt2{font-size:14px; line-height:24px;} #teaser_layer .xbt{top:20px; right:3%;} #teaser_layer .swiper-slide .loca_top .in_con .tit{font-size:21px; line-height:31px;} #teaser_layer .swiper-slide .loca_top .in_con .subtit{font-size:14px; line-height:24px; margin-top:20px;} #teaser_layer .swiper-slide .loca_top .in_con .way{margin-top:40px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl{padding-left:60px; margin-right:0; font-size:13px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(1){background:url('../images/new-teaser-bus.png') no-repeat 0 0; background-size:50px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(2){background:url('../images/new-teaser-metro.png') no-repeat 0 0; background-size:50px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(3){background:url('../images/new-teaser-car.png') no-repeat 0 0; background-size:50px;} #teaser_layer .swiper-slide .loca_top .in_con .way dt{font-size:14px; margin-bottom:10px;} #teaser_layer .swiper-slide .loca_top .in_con .way dd p{margin-bottom:5px;} #teaser_layer .swiper-slide .loca_top .in_con .way dd strong{width:35px; margin-right:13px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(1) dd p{position:relative; padding-left:35px; margin-bottom:5px;} #teaser_layer .swiper-slide .loca_top .in_con .way dl:nth-child(1) dd strong{position:absolute; top:0; left:0; width:auto; margin-right:0;} } /* 20220331 롯데배너 추가 */ .lotteon-banner {position: absolute;bottom: 100px;right: 120px} .lotteon-banner a {display:block;} .lotteon-banner .pc-img {display:block;} .lotteon-banner .mo-img {display:none;} @media all and (max-width: 1750px) { .lotteon-banner {position: absolute;bottom: 80px;right: 50px} } @media all and (max-width:1280px) { .lotteon-banner {width:30%;bottom:50px;} .lotteon-banner .pc-img {width:100%;} } @media all and (max-width:1024px) { .lotteon-banner {position: static; width:100%; margin:10px 0 25px; right: 0;} .lotteon-banner .pc-img {display:none;} .lotteon-banner .mo-img {display:block;width:100%} } /*s : 20220707 우대 페이지 내 리스트 추가*/ .black_txt li{ position: relative; margin-top: 10px; font-size: 18px; font-weight: 400; color: #000; line-height: 1.5; } .black_txt + .dot_list li:nth-child(1){ margin-top: 10px; } .black_txt li.dot{ padding-left: 11px; } .black_txt li.dot:before { content: ""; display: block; position: absolute; top: 10px; left: 0; width: 3px; height: 3px; background: #aaa; } @media (max-width: 767px){ .black_txt li { margin-top: 5px; font-size: 14px; } .black_txt li.dot:before { top: 7px; } } /*e : 20220707 우대 페이지 내 리스트 추가*/ /*s : 20220708 운영운휴 공연이벤트 css추가*/ .top_noticeWrap{ padding: 28px 80px 28px 40px; display: flex; justify-content:space-between; word-break: keep-all; word-wrap: break-word; border-bottom: 1px solid #dadada; } .top_noticeWrap.info{ margin-bottom: 110px; } .top_noticeWrap .txt_wrap{ width: 66%; display: flex; justify-content: flex-start; } .sub_wrap.white_box .top_noticeWrap .txt_wrap{ width: 100%; } .top_noticeWrap .txt_wrap .weather{ display: block; width: 52px; height: 52px; margin-right: 35px; } .top_noticeWrap .txt_wrap .weather img{ width: 100%; } .top_noticeWrap .txt_wrap p{ font-size:20px ; width: calc( 100% - 87px); } .top_noticeWrap .txt_wrap span{ font-weight: bold; } @media (max-width: 1750px){ .sub_wrap.white_box .top_noticeWrap { width: calc(100% - 80px); margin: 0 auto; } } @media (max-width: 1200px){ .top_noticeWrap .green_btn{ padding: 0 43px; } .top_noticeWrap .green_btn > span{ font-size: 17px; } .sub_wrap.white_box .top_noticeWrap .txt_wrap br{ display: none; } } @media (max-width: 1024px){ .top_noticeWrap.info{ display: block; text-align: center; width: 100%; margin: 0; padding: 5.7vw 8vw 5.7vw 8vw; margin-bottom: 80px; } .sub_wrap.white_box .top_noticeWrap{ display: block; text-align: center; width: 96%; margin: 0 0 0 4vw; padding: 5.7vw 7vw 5.7vw 9.8vw; } .top_noticeWrap .txt_wrap{ flex-direction :column; align-items: center; width: 100%; } .top_noticeWrap .txt_wrap .weather{ display: block; width: 52px; height: 52px; margin-right: 0; margin-bottom:15px ; } .top_noticeWrap .txt_wrap p{ font-size:15px ; width: 100%; } .top_noticeWrap .btn_wrap{ margin-top: 20px; } } /*e : 20220708 운영운휴 공연이벤트 css추가*/ /*s : 20230407 운영운휴 공연이벤트 css추가수정*/ .top_noticeWrap .txt_wrap_new .dot_list li{ font-size: 20px; } .top_noticeWrap .txt_wrap_new .dot_list li:first-child{ padding-left: 0; } .top_noticeWrap .txt_wrap_new .dot_list li:first-child::before{ display: none; } @media screen and (max-width:1024px) { .top_noticeWrap .txt_wrap_new .dot_list li:first-child{ text-align: center; } .top_noticeWrap .txt_wrap_new .dot_list li{ font-size: 15px; text-align: left; color: #666; } .top_noticeWrap .txt_wrap_new .dot_list li:nth-child(2){ margin-top: 20px; } } /*e : 20230407 운영운휴 공연이벤트 css추가수정*/ /*s : 20220906 이달의 혜택 카테고리 별 컬러추가*/ .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(1).on:before, .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(1):hover:before, .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(1):active:before { height: 190%; top: -90%; background-color: #b21515; } .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(2).on:before, .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(2):hover:before, .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(2):active:before { height: 190%; top: -90%; background-color: #b46851; } .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(3).on:before, .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(3):hover:before, .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(3):active:before { height: 190%; top: -90%; background-color: #4a83af; } .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(4).on:before, .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(4):hover:before, .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(4):active:before { height: 190%; top: -90%; background-color: #2f7d4e ; } .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(5).on:before, .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(5):hover:before, .benefit_area .srch_area.type3 .srch_list .chk_btn:nth-child(5):active:before { height: 190%; top: -90%; background-color: #bd9158; } /*s : 20220906 이달의 혜택 카테고리 별 컬러추가*/ /* s : 20231019 [즐길거리] 공연&이벤트 페이지 안내 문구 추가 건 */ .flex_column { flex-direction: column; } .mt35 { margin-top: 35px; } @media (max-width:1200px) { .sub_wrap.white_box .top_noticeWrap .txt_wrap br.show { display: block; } } /* e : 20231019 [즐길거리] 공연&이벤트 페이지 안내 문구 추가 건 */ /* s : 20231106 동부산 모바일 GNB 수정 */ @media (max-width: 1023px) { .family_div { display: none !important; } .family_div.family_div_mo { display: block !important; position: relative; } .gnb_wrap { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-top: 235px; } #header .header_div .gnb_div { padding-bottom: 0; height: 100vh; } #header .header_div { top: unset; position: relative; } } @media (max-width: 767px) { .gnb_wrap { padding-top: 175px; } } @media (min-width: 1024px) { .family_div_mo { display: none !important; } } /* e : 20231106 동부산 모바일 GNB 수정 */ /* s: 20231129 푸터 ismsp 추가 */ #footer .isms{margin-top:20px;} #footer .isms a{padding-left:50px;display:block;background:url('../images/ismsp_logo.png') no-repeat left center;} #footer .isms a p{line-height:26px;} #footer .isms a span{font-size:14px;color:#666;font-weight:400;} /* e: 20231129 푸터 ismsp 추가 */ /* s : 20231130 공연페이지 안내문구 수정 */ @media (min-width: 1024px) { .top_noticeWrap .txt_wrap.center_align { align-items: center; } } /* e : 20231130 공연페이지 안내문구 수정 */ /* s : 20240109 공연 안내 문구 영역 수정 */ .top_noticeWrap .sub_txt_wrap p { font-size: 16px; color: #888; } .top_noticeWrap .sub_txt_wrap { padding-left: 85px; margin-top: 10px; } .top_noticeWrap .sub_txt_wrap .weather { margin-right: 20px; } .top_noticeWrap .txt_wrap .weather { width: 50px; height: 50px; } @media (max-width: 1024px) { .top_noticeWrap .txt_wrap { flex-direction: row; } .top_noticeWrap .txt_wrap p { text-align: left; } .top_noticeWrap .txt_wrap .weather { margin-right: 3.333vw; } .top_noticeWrap .sub_txt_wrap { padding-left: 0; padding-bottom: 5.7vw; position: relative; margin-top: 2vw; } .top_noticeWrap .sub_txt_wrap p { font-size: 13px; } .top_noticeWrap .sub_txt_wrap::after { position: absolute; content: ''; display: block; width: 89vw; height: 1px; background:#dadada; bottom: 0; left: 50%; transform: translateX(-52%); } .top_noticeWrap .txt_wrap .weather { width: 40px; height: 40px; margin-bottom: 0; } } /* e : 20240109 공연 안내 문구 영역 수정 */ /* s : 20240223 시즌 콘텐츠 추가 */ #cBody .contents .fixed_bg.season { background: url("../images/fixed-bg-performance_2411.jpg"); background-size: cover; background-position: center; } ul.prfm_list.type2 > li .txt_div .index { font-size: 20px; font-weight: 700; position: relative; padding-left: 50px; line-height: 40px; margin-top: 30px; } ul.prfm_list.type2 > li .txt_div .index::before { display: block; position: absolute; content: ""; width: 40px; height: 40px; left: 0; } ul.prfm_list.type2 > li .txt_div .show { color: #2f7d4e; } ul.prfm_list.type2 > li .txt_div .event { color: #4a83af; } ul.prfm_list.type2 > li .txt_div .goods { color: #b46851; } ul.prfm_list.type2 > li .txt_div .photo { color: #f88a29; } ul.prfm_list.type2 > li .txt_div .show::before { background: url("/common/images/show_ico.png") no-repeat 0 0; } ul.prfm_list.type2 > li .txt_div .event::before { background: url("/common/images/event_ico.png") no-repeat 0 0; } ul.prfm_list.type2 > li .txt_div .goods::before { background: url("/common/images/goods_ico.png") no-repeat 0 0; } ul.prfm_list.type2 > li .txt_div .photo::before { background: url("/common/images/photo_ico.png") no-repeat 0 0; } ul.prfm_list.type2 .txt_div .tit { margin-top: 20px; } ul.prfm_list.type2 > li .txt_div .time { margin-top: 10px; font-size: 16px; color: #2f7d4e; font-weight: 700; } ul.prfm_list.type2 > li .txt_div .location { margin-top: 10px; font-size: 16px; color: #888; font-weight: 700; } ul.prfm_list.type2 > li .txt_div .period { margin-top: 0px; font-size: 16px; color: #888; font-weight: 400; } @media (max-width: 767px) { #cBody .contents .fixed_bg.season { background: url("../images/fixed-bg-performance-m_202411.jpg"); background-position: right top; background-size: cover; } ul.prfm_list.type2 > li .txt_div .index::before { width: 30px; height: 30px; background-size: contain; } ul.prfm_list.type2 > li .txt_div .index { font-size: 15px; line-height: 30px; padding-left: 40px; } ul.prfm_list.type2 > li .txt_div .time { margin-top: 5px; font-size: 13px; } ul.prfm_list.type2 > li .txt_div .location { font-size: 13px; } ul.prfm_list.type2 > li .txt_div .period { font-size: 13px; } } .srch_area.type3.season .srch_list .chk_btn:nth-child(1).on:before, .srch_area.type3.season .srch_list .chk_btn:nth-child(1):hover:before, .srch_area.type3.season .srch_list .chk_btn:nth-child(1):active:before { height: 190%; top: -90%; background-color: #b21515; } .srch_area.type3.season .srch_list .chk_btn:nth-child(2).on:before, .srch_area.type3.season .srch_list .chk_btn:nth-child(2):hover:before, .srch_area.type3.season .srch_list .chk_btn:nth-child(2):active:before { height: 190%; top: -90%; background-color: #2f7d4e; } .srch_area.type3.season .srch_list .chk_btn:nth-child(3).on:before, .srch_area.type3.season .srch_list .chk_btn:nth-child(3):hover:before, .srch_area.type3.season .srch_list .chk_btn:nth-child(3):active:before { height: 190%; top: -90%; background-color: #4a83af; } .srch_area.type3.season .srch_list .chk_btn:nth-child(4).on:before, .srch_area.type3.season .srch_list .chk_btn:nth-child(4):hover:before, .srch_area.type3.season .srch_list .chk_btn:nth-child(4):active:before { height: 190%; top: -90%; background-color: #f88a29 ; } .srch_area.type3.season .srch_list .chk_btn:nth-child(5).on:before, .srch_area.type3.season .srch_list .chk_btn:nth-child(5):hover:before, .srch_area.type3.season .srch_list .chk_btn:nth-child(5):active:before { height: 190%; top: -90%; background-color: #b46851 ; } /* e : 20240223 시즌 콘텐츠 추가 */ /* s : 20240808 시즌 콘텐츠 이미지 반응형 변경 */ .event_detail .inner#dtlConBox > img { width: 100%; } /* e : 20240808 시즌 콘텐츠 이미지 반응형 변경 */