@charset "utf-8"; /*common*/ :root { --key-color: #2c1e84; --sub-key-color: #5745c5; --label-yellow : #f4c222; --label-green : #60ad5e; --color-white: #ffffff; --font-bk: #222222; --font-gray: #666666; --font-gray2: #888888; --bg-light: #f5f6f6; --line-top: #f3f4f4; --line: #e8e8e8; --point: #e72528; } body,h1,h2,h3,h4,h5,h6,li,a,textarea,div,p,span,td,input,select,button {font-family: 'Pretendard', sans-serif; /*font-family: 'Cafe24night';*/ color:#222; line-height:1em; /*letter-spacing:-0.05em;*/ margin: 0;} .container {max-width:1290px; width:90%; position: relative; margin: 0 auto; padding: 0;} .table_wrap {display: table; width: 100%;} .table_wrap > div {display:table-cell; vertical-align:middle;} .center, .center_align {text-align:center;} .clear_after:after {content:"";clear:both;display:table;} img {width: 100%; max-width: fit-content;} input[type="button"], label[class*="butn_"] {cursor:pointer} /***display***/ .mo-only {display:none} .p-none {display:block} .pc-only {display:block} .p-only {display:none} @media ( max-width: 980px) { .pc-only {display:none} } @media ( max-width: 768px) { .mo-only {display:block} } @media ( max-width: 480px) { .p-none {display:none} .p-only {display:block} } /***font***/ .tx_14r {font-size:14px!important; font-weight:400!important} .tx_14b {font-size:14px!important; font-weight:700!important} .tx_14sb {font-size:14px!important; font-weight:600!important} .tx_15r {font-size:15px!important; font-weight:400!important} .tx_15sb {font-size:15px!important; font-weight:600!important} .tx_15b {font-size:15px!important; font-weight:700!important} .tx_17r {font-size:17px!important; font-weight:400!important} .tx_17sb {font-size:17px!important; font-weight:600!important} .tx_17b {font-size:17px!important; font-weight:700!important} .tx_20r {font-size:20px!important; font-weight:400!important} .tx_20sb {font-size:20px!important; font-weight:600!important} .tx_20b {font-size:20px!important; font-weight:700!important} .tx_40b {font-size:40px!important; font-weight:700!important} .tx_44b {font-size:44px!important; font-weight:700!important} .center {text-align:center!important} .cont_tit {line-height:1.4!important; word-break:keep-all} .cont_tit + * {padding-top:30px} .cont_tx {color:var(--font-gray)!important; line-height:1.5!important; word-break:keep-all} .cont_tx + * {padding-top:30px} ul li.cont_tx + li.cont_tx {padding-top:0} /*font media query*/ @media ( max-width: 980px) { .tx_44b {font-size: 36px!important} .tx_40b {font-size:30px!important} } @media ( max-width: 480px) { .tx_44b {font-size: 28px!important} .tx_40b {font-size:24px!important} .tx_17r, .tx_17sb, .tx_17b{font-size:16px!important} .tx_20sb, .tx_20r, .tx_20b{font-size:18px!important} .cont_tit + * {padding-top:15px} .cont_tx + * {padding-top:20px} } /***component***/ /*button*/ .more_btn {display: block; width: 78px; height: 36px; border-radius: 36px; background: #fff; line-height: 36px; text-align: center; box-shadow: 1px 1px 30px 1px rgba(0, 0, 0, 0.1); transition:0.2s ease} .more_btn:hover {background:var(--sub-key-color); color:#fff} [class*="butn_"] {background-color:var(--sub-key-color); color:#fff; font-size:18px; font-weight:600; text-align:center; border:none; transition:0.2s ease} [class*="butn_"]:hover{background:var(--key-color);} [class*="butn_"].line {color:var(--sub-key-color); background:var(--color-white); box-shadow:0px 0px 0px 1px var(--sub-key-color)} [class*="butn_"].line:hover {background-color:#E0DDF6} [class*="butn_"].line.bk {color:var(--font-bk); box-shadow:0px 0px 0px 1px var(--font-bk)} [class*="butn_"].line.bk:hover {background-color:#EFEFEF} [class*="butn_"].light {background:#e7e7e7; color:#767676} [class*="butn_"].light:hover{background:#CECECE} [class*="butn_"].icon:before {content:''; display:inline-block; width:16px; height:16px; background:var(--color-white); vertical-align:middle; margin-right:5px} [class*="butn_"].icon.dwn:before {-webkit-mask-size: cover; -webkit-mask-image: url("../img/sub/download_icon.svg")} [class*="butn_"][class*="sns-"] {position:relative; text-indent:70px} [class*="butn_"][class*="sns-"] .ico {display:block; width:40px; height:40px; position:absolute; left:50%; top:50%; transform:translate(calc(-50% - 60px), -50%)} [class*="butn_"].sns-naver {background:#49B75B} [class*="butn_"].sns-naver:hover {background:#40A550; box-shadow:none; color:#fff} [class*="butn_"].sns-naver .ico {background:url("../img/sub/naver_ico.svg") no-repeat center / cover} [class*="butn_"].sns-kakao {background:#FFE600; color:#371C1D} [class*="butn_"].sns-kakao:hover {background:#ECD90D; box-shadow:none; color:#371C1D} [class*="butn_"].sns-kakao .ico {background:url("../img/sub/kakao_ico.svg") no-repeat center / cover} [class*="butn_"].sns-google {background:var(--color-white)!important; color:var(--font-bk); box-shadow:0px 0px 0px 1px var(--line)} [class*="butn_"].sns-google .ico {background:url("../img/sub/google_ico.svg") no-repeat center / cover} [class*="butn_"].sns-google:hover {background:#f7f7f7!important; box-shadow:none} [class*="butn_"].full {width:100%; display:block} [class*="butn_"].full + [class*="butn_"].full {margin-top:15px} .butn_style5.full {max-width:100%; padding:12px 10px} [class*="butn_"][type="button"], [class*="butn_"][type="submit"], span[class*="butn_"]{cursor:pointer} a[class*="butn_"], span[class*="butn_"]{display:inline-block} [class*="butn_"].center {margin:0 auto} .butn_style1 {border-radius:10px; padding:1em 1.72em; min-width:150px} .butn_style1.long {min-width:200px} .butn_style3 {border-radius:6px; padding:0 13px; min-width:100px; font-size:15px; line-height:45px} .butn_style5, .butn_style6 {padding:10px; font-size:14px; font-weight:400; max-width:100px; width:100%} .butn_style5 {border-radius:6px} .butn_style6 {border-radius:30px} [class*="butns_wrap_"]{display:flex; gap:0 10px} [class*="butns_wrap_"][class*="center"] {justify-content:center} [class*="butns_wrap_"][class*="right"] {justify-content:flex-end} .arrow_btn {display:block; width:24px; height:24px; background:#222; -webkit-mask-size: cover; -webkit-mask-image: url("../img/sub/arrow-up.svg"); transform:rotate(180deg); font-size:0} .arrow_btn:hover{background:var(--sub-key-color)} .arrow_btn.reverse {transform:rotate(0deg)} .banner_butn {display:inline-block; height:40px; line-height:40px; padding:0 15px; border-radius:40px; background:#fff; transition:0.2s ease} .banner_butn:hover {box-shadow:0px 0px 26px rgb(84 95 138 / 18%)} #bo_v_share {padding:0; display:inline-block; vertical-align:super; margin-top:20px} #bo_v_share button {width: 24px; height: 24px; background-color: #fff; border: none; background-repeat: no-repeat; background-position: center} #bo_v_share .btn_sns_share {-webkit-mask-image: url(../img/sub/share.svg); background-color: var(--font-bk); margin-right: 20px} #bo_v_share .btn_sns_share:hover {background-color:var(--sub-key-color)} #bo_v_share .btn_sns_share .fa {display:none} #bo_v_share #bo_v_sns {position: absolute; left: 0; top: calc(100% + 10px); display: none; z-index:2} #bo_v_share #bo_v_sns li a {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 1px solid rgba(0, 0, 0, 0.1); background-color: #fff; background-repeat: no-repeat; background-position: center; font-size:0} #bo_v_share #bo_v_sns li a img{display:none} #bo_v_share #bo_v_sns li .sns_f {background-image:url(../img/sub/i_fb.png)} #bo_v_share #bo_v_sns li .sns_t {background-image:url(../img/sub/i_tw.png)} #bo_v_share #bo_v_sns li .sns_link.clip {position:relative} #bo_v_share #bo_v_sns li .sns_link.clip:before { content: ''; display: block; width: 18px; height: 18.7px; -webkit-mask-image: url(../img/sub/share_link.svg); -webkit-mask-size: cover; background: #000; transition: .2s ease;} #bo_v_share #bo_v_sns li .sns_link.clip:hover:before {background:var(--sub-key-color)} #bo_v_act {display: inline-block; background: url(./img/wish_icon_big_gray.png) no-repeat center; background-size: 100% 100%; margin-right:10px; margin-top:20px} #bo_v_act .bo_v_good{ display: flex ; border: 1px solid #ddd; width: auto; line-height: 1em; height: 44px; border-radius: 30px; justify-content: center; align-items: center; padding:0 25px } #bo_v_act .bo_v_good .fa:before {content:''; width: 18px; height: 18px; display:block; border: none; background-repeat: no-repeat; background-position: center; -webkit-mask-image:url(../img/sub/wish_icon_chk.svg); background-color:#ccc; -webkit-mask-size: cover; margin-right:5px} #bo_v_act .bo_v_good:hover .fa:before {background-color:var(--sub-key-color)} #bo_v_act .bo_v_good strong { font-size: 14px; font-weight: normal;} /*email select form*/ .email_input_wrap {display: flex; align-items: center; gap: 5px; width:100%} .email_input_wrap input, .email_input_wrap select {width: 32%} .email_input_wrap span {display: block; font-size: 16px; position: relative; top: -3px;} .email_input_wrap select {color:#999; background:url(../img/main/select_arrow.png) no-repeat 90% 50%; -webkit-appearance: none; -moz-appearance: none;} .frm_input + .email_input_wrap {margin-top: 15px} .email_input_wrap .frm_input:nth-child(1) {min-width:240px} .email_input_wrap.in_data_table {gap:10px} .email_input_wrap.in_data_table input {width:100%} /*checkbox radio*/ [class*="chk_wrap_"] label {width: auto; padding: 0; cursor: pointer;} [class*="chk_wrap_"] label input {position: absolute; display:none} [class*="chk_wrap_"] label span {font-size: 15px; color: var(--font-bk); font-weight: 400; display: inline-block; padding-left: 28px; position: relative; line-height:1.6; word-break:keep-all} [class*="chk_wrap_"] label:hover span {color:var(--sub-key-color)} [class*="chk_wrap_"][class*="check"] label input + span:before {content:""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border: 1px solid #909090; border-radius: 3px;} [class*="chk_wrap_"][class*="check"] label input:checked + span:before {content:""; background:var(--sub-key-color); border:none} [class*="chk_wrap_"][class*="check"] label input:checked + span:after {content:"";position: absolute; left: 2px; top: 7px; width: 15px; height: 9px; background: url("../img/sub/chk_icon.svg") no-repeat center / cover} [class*="chk_wrap_"][class*="radio"] label input + span:before {content:""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border: 1px solid #909090; border-radius: 50%;} [class*="chk_wrap_"][class*="radio"] label input:checked + span:before {content:""; border-color:var(--sub-key-color)} [class*="chk_wrap_"][class*="radio"] label input:checked + span:after {content:"";position: absolute; left: 4px; top: 7px; width: 10px; height: 10px; background:var(--sub-key-color); border-radius:50%} [class*="chk_wrap_"] .row {padding-bottom:10px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:0 10px} [class*="chk_wrap_"] .row + .row {border-bottom:none; padding-top:10px} [class*="chk_wrap_"].flex {display:flex; align-items:center; width:100%} /*number input list_wrap 인원 수 입력폼*/ .data_table_wrap > ul > li > div .number_input_list {display:flex; gap:0 60px; align-items:center} .data_table_wrap > ul > li > div .number_input_list li {align-items:center; gap:0 10px; position:relative} .data_table_wrap > ul > li > div .number_input_list li span {flex-shrink:0} .data_table_wrap > ul > li > div .number_input_list li:after{content:''; display:block; width:1px; height:12px; background:var(--line); position:absolute; right:-30px} .data_table_wrap > ul > li > div .number_input_list li:last-child:after{display:none} .data_table_wrap > ul > li > div .number_input_list li + li {padding-top:0} /*box shadow*/ .box_shadow {box-shadow: 10px 10px 15px 0 rgba(0,0,0,0.05)} /*breadscrumb navigation*/ .bread_right {display:flex; justify-content:space-between; align-items:flex-end} .bread_scrumb {position:relative; padding-left:17px} .bread_scrumb:before{content:''; display:block; width:11px; height:12px; background:url("../img/sub/bread_home.svg") no-repeat center / cover; position:absolute; left:0; top:0; color:var(--font-gray)} .bread_scrumb a, .bread_scrumb span {color:var(--font-gray)} .bread_scrumb a:hover{text-decoration:underline} .bread_scrumb .home {display:block; position:absolute; width:11px; height:12px; left:0; top:0} .bread_scrumb.inner_img {position:absolute; right:0; top:40px; color:#fff} .bread_scrumb.inner_img a, .bread_scrumb.inner_img span {color:#fff; text-shadow:1px 1px 7px rgba(0,0,0,0.2)} .bread_scrumb.inner_img:before {-webkit-mask-image: url("../img/sub/bread_home.svg"); background:#fff} /*title*/ .title_cir {font-size:22px; font-weight:600; padding-left:18px; position:relative} .title_cir.sb{font-weight:700} .title_cir:before {content:''; display:block; width:10px; height:10px; background:var(--sub-key-color); border-radius:50%; position:absolute; left:0; top:6px} .title_cir + * {margin-top:15px} .title_cir + .title_cir_sub {margin-top:10px} .title_cir + .title_cir_sub.with_butn {margin-top:0; display:flex; justify-content:space-between; align-items:center; gap:0 10px} .title_cir_flex_wrap {display:flex; justify-content:space-between; align-items:center} .title_cir_flex_wrap .title_cir + * {margin-top:0} .title_cir_flex_wrap + * {margin-top:15px} .title_cir_sub {padding-left:18px} .title_cir_sub + * {margin-top:15px} .title_cir_sub p {color:var(--font-gray); line-height:1.3; word-break:keep-all} .sub_page_title {position:relative} .sub_page_title .bread_scrumb {position:absolute; right:0; bottom:0} /*table*/ .data_table_wrap {border-top:2px solid var(--font-bk)} .data_table_wrap > ul > li {border-bottom:1px solid var(--line); display:flex} .data_table_wrap > ul > li > label {width:170px; min-height:70px; display:flex; align-items:center; font-size:15px; font-weight:600; padding:10px 10px 10px 25px; background:var(--bg-light); flex-shrink:0} .data_table_wrap > ul > li > label sub {font-size:12px; font-weight:400} .data_table_wrap > ul > li > div {padding: 25px 15px; font-size:15px; display:flex; align-items:center; width:calc(100% - 170px)} .data_table_wrap > ul > li > div.center {justify-content:center} .data_table_wrap > ul > li > div.w110 {width:110px; flex-shrink: 0} .data_table_wrap > ul > li > div > * {line-height:1.3} .data_table_wrap > ul > li > div ul li {display:flex; line-height:1.3} .data_table_wrap > ul > li > div ul li + li{padding-top:10px} .data_table_wrap > ul > li > div ul li strong {width:60px; margin-right:10px; flex-shrink;0} .data_table_wrap.slim {border-top:1px solid var(--font-bk)} .data_table_wrap.slim > ul > li > label, .data_table_wrap.slim > ul > li > div {font-size:17px} .data_table_wrap.slim > ul > li > label {min-height:60px} .data_table_wrap.slim > ul > li > div {padding:15px} .data_table_wrap.slim > ul > li > div ul li strong {font-size:15px} .data_table_wrap.bdt_thin {border-top:1px solid var(--font-bk)} .data_table_wrap.bdt_none {border-top:1px solid var(--line)} .data_table_wrap.include_total {display:grid; grid-template-columns:auto minmax(auto, 380px)} .data_table_wrap.include_total.in_payment {grid-template-columns:auto minmax(auto, 405px)} .data_table_wrap.include_total .table_total_area {background:var(--bg-light); border-left:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; padding:25px; grid-template-rows:auto auto 1fr} .data_table_wrap.include_total .table_total_area .total {align-self:flex-end; justify-self:flex-end} .data_table_wrap.include_total .table_total_area ul {margin-top:20px} .data_table_wrap.include_total .table_total_area ul li {font-size:15px; display:flex} .data_table_wrap.include_total .table_total_area ul li + li{padding-top:3px} .data_table_wrap.include_total .table_total_area ul li span {line-height:1.3} .data_table_wrap.include_total .table_total_area ul li span:first-child {display:block; width:50px; margin-right:10px; flex-shrink:0} .data_table_wrap.include_total .table_total_area .total {font-size:16px} .data_table_wrap.include_total .table_total_area .total strong {font-size:28px; vertical-align:text-top} .data_table_wrap.include_total.half {grid-template-columns: repeat(2, 50%)} .data_table_wrap.with_input > ul > li > div {padding:15px} .data_table_wrap > ul > li > div .info_text {display:flex; gap:0 15px; align-items: center} .data_table_wrap > ul > li > div .info_text span{font-size:13px; color:var(--font-gray); word-break:keep-all} .data_table_wrap > ul > li > div .data_with_butn {display:flex; gap:10px; max-width:340px; width:100%} .data_table_wrap > ul > li > div .data_with_butn [class*="butn_"] {width:60px; height:45px; font-weight:600} .data_table_wrap > ul > li > div .data_with_comment {display:flex; width:100%; gap:0 10px; align-items:center} .data_table_wrap > ul > li > div .data_with_comment p {line-height:1.3; word-break:keep-all} .data_table_wrap > ul > li > div .readonly {border:none; outline:none; box-shadow:none; width:100%} .data_table_wrap > ul > li > div .readonly:focus, .data_table_wrap > ul > li > div .readonly:active{outline:none; box-shadow:none; border:none!important} .data-input-wrap {display:flex; gap:10px; width:100%} .data_table_wrap.with_icon > ul > li > label{width:220px; gap:0 10px} .data_table_wrap.with_icon > ul > li > label i {color:var(--color-white); background:var(--sub-key-color); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px} .data_table_wrap.with_icon > ul > li > div {width:calc(100% - 220px)} .data-input {-webkit-appearance:none; max-width:270px; width:100%; border-radius:6px; box-shadow:0px 0px 0px 1px var(--line); height:45px; border:none; font-size:14px; padding:10px 15px} .data-input.full {max-width:100%} .data-input::placeholder {color:#999} .data-input.date {background:url("../img/sub/date_icon.svg") no-repeat 95% 50%} .data-input.short {max-width:80px} .data-input.short2 {max-width:100px} .data-input.short3 {max-width:150px} .data-input-textarea {width:100%; border-radius:6px; box-shadow:0px 0px 0px 1px var(--line); height:45px; border:none; font-size:14px; padding:10px 15px; height:100px; resize: none} .data-input-textarea::placeholder {color:#999} .right_caption {padding-left:10px} .require {color:var(--sub-key-color)} .table_notion {word-break:keep-all; line-height:1.3} .table_notion.light {color:var(--font-gray)} /*input file custom*/ .file_wrap ul li {display:flex; align-items:center; gap:0 10px} .file_wrap ul li + li {padding-top:10px} .file_wrap ul li > label {flex-shrink:0; width:80px} .file_wrap ul li .filebox {flex-grow:1; display:flex; gap:0 10px} .filebox .upload-name {background:var(--color-white)} .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } .img_name::file-selector-button {display:none} /*이미지 추가 옵션 있을 경우*/ .filebox.preview-image {position:relative} /*.filebox.preview-image .upload-name {position:absolute; left:0; top:0; width:0; height:0; opacity:0}*/ /*popup table*/ * + .pop_inner_table {margin-top:10px} .pop_inner_table {overflow-x:auto} .pop_inner_table table {width:100%; min-width:923px; border-spacing:0} .pop_inner_table table th{background:#815BC6; color:var(--color-white); text-align:center; font-weight:400; padding:10px; font-size:15px; position:relative} .pop_inner_table table th:after{content:''; width:1px; height:15px; background:rgba(255,255,255,0.3); position:absolute; right:0; top:50%; transform:translateY(-50%)} .pop_inner_table table th:first-child {border-top-left-radius:10px; border-bottom-left-radius:10px} .pop_inner_table table th:last-child {border-top-right-radius:10px; border-bottom-right-radius:10px} .pop_inner_table table th:last-child:after {display:none} .pop_inner_table table td {font-size:15px; text-align:center; border-bottom:1px solid var(--line); padding:20px 15px} .pop_inner_table table td [class*="butn_"] {background:#6441A5} .pop_inner_table table td [class*="butn_"]:hover {background:#4f2e8c} /*custom_badge*/ [class*="custom_badge"]{display:inline-block; padding:5px 3px; border-radius:3px; background:rgba(87,69,197,0.2); color:var(--sub-key-color); font-weight:600; min-width:65px} [class*="custom_badge"][class*="_confirm"] {background:rgba(228,53,53,0.2); color:var(--point)} /*layout*/ .mt20 {margin-top:20px} .mr20 {margin-right:20px} .mb20 {margin-bottom:20px!important} .mt15 {margin-top:15px} .pt10 {padding-top:10px} /*component media query*/ @media ( max-width: 1280px) { [class*="chk_wrap_"].flex {flex-direction:column; align-items:flex-start; gap:5px 0} .data_table_wrap > ul > li > label.no_shrink {flex-shrink:1} } @media ( max-width: 980px) { .email_input_wrap .frm_input:nth-child(1) {min-width:auto} .data_table_wrap > ul > li > div .number_input_list {gap:0 30px} .data_table_wrap > ul > li > div .number_input_list li {gap:0 5px} .data_table_wrap > ul > li > div .number_input_list li:after {right:-15px} .data_table_wrap.include_total {grid-template-columns: 1fr} .data_table_wrap.include_total .table_total_area {grid-template-rows:inherit; border-left:none} .data_table_wrap.include_total .table_total_area ul {margin-bottom:40px} .title_cir_sub {padding-left:15px} .sub_page_title {padding-bottom:35px} .sub_page_title.no_bread {padding-bottom:0} } @media ( max-width: 767px) { .bread_scrumb.inner_img {top:25px} [class*="butns_wrap_"].col3 li{width:calc((100% - 20px) / 3)} [class*="butns_wrap_"].col3 li .butn_style1 {min-width:100%; padding:1em 0.42em} [class*="butns_wrap_"].col2 [class *="butn_"]{min-width:calc((100% - 10px) / 2)} .data_table_wrap > ul > li {flex-direction:column} .data_table_wrap > ul > li > label {width:100%; min-height:50px; padding:15px} .data_table_wrap > ul > li > div {width:100%} .data_table_wrap > ul > li > div.center {justify-content:flex-start} .data_table_wrap.include_total .table_total_area {padding:20px 15px} .data_table_wrap.with_input > ul > li > div {padding:15px 0} .data_table_wrap > ul > li > div .data_with_butn {max-width:100%} .data_table_wrap > ul > li > div .data_with_comment {flex-direction:column; align-items:flex-start; gap:10px 0} .data-input-wrap {flex-direction:column} .data-input {max-width:100%} .data-input-wrap .data-input.short3 {max-width:100%} .data_table_wrap > ul > li > div .info_text {flex-direction:column; align-items:flex-start; gap:5px 0} .data_table_wrap.with_icon > ul > li > label {width:100%} .data_table_wrap.with_icon > ul > li > div {width:100%} .file_wrap ul li {align-items: flex-start; gap: 10px 0; flex-direction: column} .file_wrap ul li + li {padding-top:20px} .file_wrap ul li .filebox {width:100%} } @media ( max-width: 480px) { [class*="butn_"] {font-size:15px} [class*="butn_"][class*="sns-"] {text-indent: 50px} [class*="butn_"][class*="sns-"] .ico {width:35px; height:35px; transform: translate(calc(-50% - 50px), -50%)} .butn_style5 {font-size:14px} [class="butns_wrap_"].mt30.last {margin-top:20px} [class*="butns_wrap_"][class*="center"].col2 {min-width:calc(50% - 5%)} [class*="butn_"].text_vw {font-size: 3.8vw; padding: 1em 0;} .email_input_wrap {display:grid; grid-template-columns: calc(100% - 30px) 30px} .email_input_wrap > span {text-align:center} .email_input_wrap > span + .frm_input, .email_input_wrap > span + .frm_input + .frm_input{grid-column: 1 / 3} .email_input_wrap select {background: url(../img/main/select_arrow.png) no-repeat 97% 50%; width:100%} .email_input_wrap > span + .data-input, .email_input_wrap > span + .data-input + .data-input{grid-column: 1 / 3} .email_input_wrap.in_data_table {gap:10px 5px; grid-template-columns: calc(100% - 35px) 30px} .mypage_new_wrap.pt50 {padding-top:9.15vw} .mypage_new_wrap.pb90 {padding-bottom:11.3vw} .data_table_wrap > ul > li > label {min-height:40px} .data_table_wrap > ul > li > div {padding:20px 15px} .data_table_wrap > ul > li > div .number_input_list {flex-direction:column; gap:10px 0} .data_table_wrap > ul > li > div .number_input_list li:after {display:none} .data_table_wrap.with_input > ul > li > div {padding:10px 0} .data_table_wrap.include_total .table_total_area .total strong {font-size:24px} .data_table_wrap.slim > ul > li > label {min-height:40px} .table_notion.mt30 {margin-top:20px} .bread_right {flex-direction:column; align-items: flex-start; gap: 15px 0} .title_cir.mt30 {margin-top:20px} .title_cir.mt60 {margin-top:40px} .title_cir + .title_cir_sub.with_butn {margin-top:10px} .title_cir_flex_wrap.mt60 {margin-top:40px} [class*="butns_wrap_"].mt30.last {margin-top:20px} .filebox [class*="butn_"] {min-width:70px; padding:0} .sub_page_title.mbt50 {margin: 10.2vw 0 7.2vw} .sub_page_title.mt50 {margin: 10.2vw 0 0} .data_table_wrap.slim > ul > li > label, .data_table_wrap.slim > ul > li > div {font-size:15px} } /* head */ #header_wrap_all {position: fixed; top: 0; left: 0; width: 100%; z-index: 19999;} #header_wrap_all .container {max-width:1280px; height: auto;} #header_wrap_all .logo_section {} #wrapper {padding-top: 152px; background: #fff;} .mobile_head_top {display:none} .header_login_wrap {} .header_login_wrap .login_wrap {display: flex; align-items: center; justify-content: center} .header_login_wrap .login_wrap a {font-size: 16px; display: inline-block; margin-right: 1.5em; position: relative; transition:all 0.15s } .header_login_wrap .login_wrap a:hover {color:var(--sub-key-color); font-weight: 600;} .header_login_wrap .login_wrap li:last-child a { margin-right:0} .header_login_wrap .login_wrap li:last-child a:after {content:none} .head_languate_selector{position: absolute; right: 40px; top: 0;} .head_languate_selector .inner_wrap {background: #f5f5f5; border-radius: 20px;} .head_languate_selector > div ul ul{display:none;} .head_languate_selector > div > ul ul li a:hover{ color:var(--blue-color);} .dropdown_block{display:block !important;} .head_languate_selector > div > ul li a{ position: relative; width: 90px; height: 35px; padding: 10px; display: flex; border-radius: 30px; font-weight: 700; align-items: center; background: #f5f5f5; font-size: 14px;} .head_languate_selector > div > ul li.current a:after{position:absolute; content:''; width:12px; height:7px; background:url('../img/main/lang_sel_icon.png') no-repeat center; display:inline-block; right:15px; top:50%; transform: translateY(-50%); } .head_languate_selector > div > ul li a:hover .txt {color: var(--key-color); font-weight:900} .head_languate_selector > div > ul .lang_list li a:hover {background: #ece9e9;} .head_languate_selector .icon {display: inline-block; margin-right: 5px; } .header_login_wrap .favorite_wrap .imgs {display:inline-block; width: 26px; height:23px; background-image:url('../img/main/favorite_icon.png'); background-size:cover} .header_login_wrap .favorite_wrap:hover .imgs { background-image:url('../img/main/favorite_icon_hover.png'); } /* Main menus */ #hd {position: relative; z-index: 19999;} #gnb {display: inline-block; float: none; padding: 0; position: relative; height:100%} .header_menu_section { position:relative; border-bottom: 1px solid #ddd; background:#fff; width:100%; height: 100%; transition: all 0.15s;} .header_menu_section.menu_fixed { position: fixed; left: 0; top: 0; } #gnb>ul {display: flex; height:100%} #gnb>ul>li {display: flex; align-items: center; height: 100%; padding-right: 26px; padding-left:26px; position: RELATIVE; } #gnb>ul>li:after {content:''; display:block; width:100%; height:2px; background:var(--sub-key-color); position:absolute; left:0; bottom:0; transition: all 0.15s; opacity:0} #gnb>ul>li:hover:after{opacity:1} #gnb .gnb_dep1>li>a {color: #222; text-decoration: none; font-weight: 600; font-size: 17px; transition:all 0.15s; display:block; width:100%; height:100%; display:flex; align-items:center} #gnb .gnb_dep1>li:hover > a, #gnb .gnb_dep1>li.active > a{color:var(--sub-key-color)} #gnb .gnb_dep1>li.active:after{opacity:1} .header_menu_section .gnb_dep1>li:hover >a, .header_menu_section .gnb_dep1>li.current>a { color:#175da9;} #gnb ul li ul.sub_menu {display:none;position: absolute; top: 60px; left: 50%; margin-left:-100px; text-align: center; width: 200px ;z-index: 1999; background: #fff; padding: 35px 20px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2);} #gnb ul li ul.sub_menu li {line-height:1em; margin-bottom:25px;} #gnb ul li ul.sub_menu li a {color: #222; font-size: 15px; font-weight: 400; } #gnb ul li ul.sub_menu li a:hover {color: var(--sub-key-color) !important; font-weight: 600; text-underline-offset: 2px;} #gnb ul li ul.sub_menu li.current a {color:var(--key-color) !important; } #gnb ul li ul.sub_menu li:last-child {margin-bottom:0;} #gnb ul li ul.sub_menu li a.sub_click {color:#999; font-size:16px; font-weight:400;} #gnb ul li ul.sub_menu.show_on {display:block; box-shadow:none;background: transparent;} #gnb .gnb_dep1>li.hover_on:hover ul.sub_menu {display:block !important;} .sub_menu_bg_area {display:none; position: absolute; width: 100%; height: 325px; top: 151px; left: 0; background: #fff; border-top: 1px solid var(--line-top);border-bottom: 1px solid #ddd;} .sub_menu_bg_area.active {display:block;} .header_hamburger_menu_pc { position: absolute; left: 0; top: 50%; transform: translateY(-50%); cursor:pointer;} .navbar-toggle {cursor: pointer;color: #fff; transform:translateY(-3.5px)} .header_hamburger_menu.active {position: fixed; right: 10px; top: 10px !important; background: #222935;} .hamburger { font: inherit; display: inline-block; overflow: visible; margin: 0; padding: 0; line-height:1em; cursor: pointer; transition-timing-function: linear; transition-duration: .15s; transition-property: opacity,filter; text-transform: none; color: inherit; border: 0; } .hamburger-box { position: relative; display: inline-block; width: 16px;height: 2px; } .hamburger-inner:after, .hamburger-inner:before { display: block; content: ""; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { width: 100%; height: 2px; border-radius: 0; } .hamburger-inner { margin-top: 1px; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { position: absolute; left: 0; transition-timing-function: ease; transition-duration: .10s; transition-property: transform; border-radius: 4px; background-color: #222; } .hamburger-inner:before { top: 7px; transition-property: transform,opacity;} .hamburger-inner:after { bottom: -14px; } .navbar-toggle.active .hamburger-inner { transform: translate3d(0,7px,0) rotate(45deg);} .navbar-toggle.active .hamburger-inner:before { transform: rotate(-45deg) translate3d(0px,0px,0); opacity: 0;} .navbar-toggle.active .hamburger-inner:after { transform: translate3d(0,-16px,0) rotate(-90deg); bottom:-16px} .navbar-toggle:hover .hamburger-inner, .navbar-toggle:hover .hamburger-inner:after, .navbar-toggle:hover .hamburger-inner:before {background-color: var(--key-color); } /* Media Query */ @media only screen and ( max-width: 1800px ) { } @media only screen and ( max-width: 1440px ) { .gnb_dep1>li>a {font-size: 16px;} } @media only screen and ( max-width: 1280px ) { /* break point */ #gnb,#hamburger_for_pc {display:none;} } @media only screen and ( max-width: 767px ) { #wrapper { padding-top: 70px;} #header_wrap_all .logo_section img {width: 150px;} .header_login_wrap {height: 30px;} .header_login_wrap .login_wrap a {font-size: 13px; margin-right: 1.2rem } .header_login_wrap .login_wrap a:after {right: -0.8em; top: 0.25em; height: 0.8em;} .header_login_wrap .login_wrap {margin-right: 100px;} .head_languate_selector > div > ul li a {font-size: 13px; width: 60px; height: 30px;} .head_languate_selector .icon {display:none} } /*added 2024.08.27 이다혜 head, main menus*/ #header_wrap_all .header_menu_section .container {display:flex; justify-content:space-between; align-items: center} #header_wrap_all .header_menu_section .header_top {border-bottom:1px solid var(--line-top)} #header_wrap_all .header_menu_section .header_top .container {height:90px} #header_wrap_all .header_menu_section .header_top .container .left {display:flex; align-items:center; gap:0 40px} #header_wrap_all .header_menu_section > .container {height:60px} #header_wrap_all .header_menu_section .header_top .container .left .main_sch_wrap {position:relative} #header_wrap_all .header_menu_section .header_top .container .left .main_sch_wrap #sch_str {width:420px; height:48px; background:var(--bg-light); font-size:14px; color:#999; font-family: 'Pretendard', sans-serif; margin-right:0; padding: 0.2em 63px 0.2em 1.5em} #header_wrap_all .header_menu_section .header_top .container .left .main_sch_wrap #sch_str::placeholder {color:#fff; opacity:1; color:#999} #header_wrap_all .header_menu_section .header_top .container .left .main_sch_wrap #sch_submit {background:url('../img/main/sch_icon_new.svg') no-repeat center; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width:63px; height: 100%;} #header_wrap_all .header_menu_section .header_top .container .left .main_sch_wrap #sch_submit:hover {box-shadow:none} #header_wrap_all .header_menu_section .header_inner_wrap, #header_wrap_all .header_menu_section .header_inner_wrap .header_bottom{height:100%} #header_wrap_all .header_menu_section .header_inner_wrap .header_bottom {position:relative; display:flex; gap:26px} #header_wrap_all .header_menu_section .header_inner_wrap .header_bottom .hamburger_wrap {display:flex; height:100%; align-items:center; cursor:pointer} #header_wrap_all .header_menu_section .header_inner_wrap .header_bottom .hamburger_wrap p {padding-left:33px; transition: all 0.35s} #header_wrap_all .header_menu_section .header_inner_wrap .header_bottom .hamburger_wrap:hover p {color:var(--sub-key-color)} .sub_menu_bg_area_hover {background:#fff; position:absolute; width:100%; height:60px; left:0; top:151px; border-top:1px solid var(--line-top); border-bottom:1px solid var(--line-top); display:none} .sub_menu_bg_area_hover.active {display:block} #gnb ul li ul.sub_menu:not(.show_on) {margin-left:0; background:transparent; box-shadow:none; top:60px; left:50%; height:60px; transform:translateX(-50%); width:calc(100% + 530px); padding:0} #gnb ul li ul.sub_menu:not(.show_on) li {margin-bottom:0} #gnb .gnb_dep1>li.hover_on:hover ul.sub_menu {display: flex !important; justify-content: center; gap: 25px; align-items:center} #gnb>ul>li:nth-child(1) > ul.sub_menu:not(.show_on){width:calc(100% + 330px); left:0; transform:translateX(0)} #gnb>ul>li:nth-child(2) > ul.sub_menu:not(.show_on){width:calc(100% + 355px)} #gnb>ul>li:nth-child(4) > ul.sub_menu:not(.show_on){width: calc(100% + 200px)} .header_notice_wrap {height:100%; overflow:hidden; padding:0 35px 0 55px; background:url('../img/main/noti_icon.svg') no-repeat 30px 50%; position:relative} .header_notice_wrap > a {display:block; width:23px; height:23px; background:var(--bg-light); border-radius:50%; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:18px; display:flex; align-items:center; justify-content:center; line-height:0; padding-bottom:2px; transition:0.2s ease} .header_notice_wrap > a:hover{background:var(--sub-key-color); color:#fff} .rolling-list {width:330px; height:100%; margin:0 auto; overflow:hidden; background:#fff} .rolling-list ul {position:relative; display:block; width:100%; margin:0 auto; text-align:left; overflow:hidden} .rolling-list li {height:60px; overflow:hidden; display:flex; align-items:center} .rolling-list li a {width:100%; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:0.2s ease} .rolling-list li a:hover{color:var(--sub-key-color)} .rolling-list li:first-of-type {border-top:0} /***** 모바일 메뉴 시작 ******/ .header_hamburger_menu { display:none; position: fixed; right: 20px; top: 40px; transform-origin: center; transition: all 0.35s; } .mobile_menu_inner_wrap {position: absolute; width: 100%; top: 80px; padding: 50px 30px 0; height: 70vh; overflow-y: auto;} .header_hamburger_menu .hamburger { font: inherit; display: inline-block; overflow: visible; margin: 0; padding: 0; line-height:1em; cursor: pointer; transition-timing-function: linear; transition-duration: .35s; transition-property: opacity,filter; text-transform: none; color: inherit; border: 0; } .header_hamburger_menu .hamburger-box { position: relative; display: inline-block; width: 28px;height: 20px; } .header_hamburger_menu .hamburger-inner:after, .header_hamburger_menu .hamburger-inner:before { display: block; content: ""; } .header_hamburger_menu .hamburger-inner, .header_hamburger_menu .hamburger-inner:after, .header_hamburger_menu .hamburger-inner:before { width: 100%; height: 3px; border-radius: 0; } .header_hamburger_menu .hamburger-inner { margin-top: 1px; } .header_hamburger_menu .hamburger-inner, .header_hamburger_menu .hamburger-inner:after, .header_hamburger_menu .hamburger-inner:before { position: absolute; transition-timing-function: ease; transition-duration: .10s; transition-property: transform; border-radius: 4px; background-color: #222;} .header_hamburger_menu .hamburger-inner:before {top: 8px; transition-property: transform,opacity;} .header_hamburger_menu .hamburger-inner:after {bottom: -16px; } .header_hamburger_menu .navbar-toggle {cursor: pointer;color: #fff;} .header_hamburger_menu.open { transform: rotate(180deg);} .header_hamburger_menu .navbar-toggle.open .hamburger-inner { transform: translate3d(0,6px,0) rotate(45deg);} .header_hamburger_menu .navbar-toggle.open .hamburger-inner:before {transform: rotate(-45deg) translate3d(0px,0px,0); opacity: 0;} .header_hamburger_menu .navbar-toggle.open .hamburger-inner:after {transform: translate3d(0,-16px,0) rotate(-90deg);} .header_hamburger_menu .navbar-toggle.open .hamburger-inner, .header_hamburger_menu .navbar-toggle.open .hamburger-inner:after, .header_hamburger_menu .navbar-toggle.open .hamburger-inner:before {background-color: #fff;} .mobile_menu_contents { position: fixed; top: 0; left: 100%; width: 100%; height: 100%; z-index: 1999;} .mobile_menu_contents.open {left:0;} #mobile_menu_box .gnb_dep1 { margin-top: 0; padding-left:0} #mobile_menu_box .gnb_dep1>li { opacity:0; transform: translateY(50px); transition: all 0.35s ease-out; transition-timing-function: ease; border-bottom: 1px solid rgba(255,255,255,0.2);} #mobile_menu_box .gnb_dep1>li.visible {opacity:1; transform: translateY(0);} #mobile_menu_box .gnb_dep1>li>a {font-size: 22px; padding: 15px 0 15px 30px; height: auto; color: #fff; line-height: 1em; position: relative; display: block;} #mobile_menu_box .gnb_dep1>li.menu-item-has-children .plus {position: absolute; top: 50%; transform: translateY(-50%); transition: transform 0.3s; right: 25px;} #mobile_menu_box .gnb_dep1>li.menu-item-has-children.open .plus { transform: translateY(-50%) rotate(-180deg);} #mobile_menu_box .gnb_dep1>li.menu-item-has-children .plus .plus_add {display: block; width: 20px; height: 2px; position: relative; background: #fff;} #mobile_menu_box .gnb_dep1>li.menu-item-has-children .plus .plus_add:after {content: ""; background: #fff; width: 100%; height: 2px; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); transition: transform 0.3s;} #mobile_menu_box .gnb_dep1>li.menu-item-has-children.open .plus .plus_add:after {transform: translateY(-50%) rotate(0);} #mobile_menu_box .sub_menu { width: 100%; line-height: 1em; float: none; margin: 0; padding: 10px 10px 30px 25px;left:0 !important; display:none;} #mobile_menu_box .sub_menu>li { padding: 10px;} #mobile_menu_box .sub_menu>li>a { font-size: 16px; color: #fff; font-weight: 500;} .mobile-container-overlay { position: fixed; top: -117.5vh; right: -120.5vh; width: 250vh; height: 250vh; border-radius: 50%; background: var(--key-color); transition: .2s; z-index: 0; transform: scale(0); z-index: 10;} .mobile-container-overlay.open {animation: checked-overlay .8s both;} .mobile-container-overlay.close { animation: not-checked-overlay .4s both; } .mobile_menu_contents .mobile_menu_copyright {color: #fff; position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 12px; opacity:0; transition: all 0.35s ease-out; transition-delay:1s;} .mobile_menu_contents.open .mobile_menu_copyright {opacity:1; } .mobile_menu_logo {display: none} /*ldh 24.12.04*/ .mobile_menu_inner_wrap {-ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; /* 파이어폭스 */} .mobile_menu_inner_wrap::-webkit-scrollbar {display:none} @keyframes checked-overlay { 0% { transform: scale(0); } 90% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes not-checked-overlay { 0% { transform: scale(1); } 100% { transform: scale(0); } } @media only screen and ( max-width: 1280px ) { /* 모바일 메뉴 Break Point */ .header_hamburger_menu {display:block;z-index: 19999;} #logo {display: none} .mobile_menu_logo {display: block; position: fixed; top: 0; left: 0; width: 100%; height: 90px; z-index: 1999;} .mobile_menu_logo a { display: block; width: 145px; height: 90px; background: url(../img/main/logo.png) no-repeat center; background-size: 80% !important; transition: 0.35s ease;} .mobile_menu_logo.open a {filter: grayscale(1) brightness(3);} } @media only screen and ( max-width: 767px ) { .header_hamburger_menu { top: 25px;} .mobile_menu_logo, .mobile_menu_logo a { height: 60px; } } /***** 모바일 메뉴 끝 ******/ /*******************/ /* Main */ .main_header_slider_section {position: relative; overflow: hidden;} .main_header_slider_section .swiper-slide {height:calc(100vh - 470px); min-height: 630px; max-height:1024px; display: flex; justify-content: center; align-items: center; background-size:cover} .main_header_slider_section .swiper-slide .slider_title {text-align: left; transition: 0.7s ease-out; transform:translateY(60px); transition-delay: 0.5s; opacity:0; width:90%; max-width:1280px} .main_header_slider_section .swiper-slide.swiper-slide-active .slider_title {transform:translateY(0px); opacity:1;} .main_header_slider_section .slider_title h2 { font-size: 65px; color:#fff; line-height: 1em; margin-bottom: 0.2em;font-weight: 700;padding-top: 25px; } .main_header_slider_section .slider_title h3 {font-size: 30px; color:#fff; font-weight: 700; line-height: 1em; margin-bottom:110px} /* .main_header_slider_section .slider_title h2{transition: 1s ease-out; transform:translateY(50px); transition-delay: 0.5s; opacity:0;transition-timing-function: ease;} .main_header_slider_section .swiper-slide.swiper-slide-active .slider_title h2{ transform:translateY(0px); opacity:1;} .main_header_slider_section .slider_title h3{transition: 1.3s ease-out; transform:translateY(50px); transition-delay: 0.8s; opacity:0;transition-timing-function: ease;} .main_header_slider_section .swiper-slide.swiper-slide-active .slider_title h3{ transform:translateY(0px); opacity:1;} */ .main_header_slider_section .main_sch_wrap {position: absolute; left: 0; bottom: 250px; width: 100%; display: flex; justify-content: center;z-index: 10;} .main_sch_wrap #sch_str {width: 545px; height: 60px; border-radius: 50px; border: 2px solid #fff; background: rgba(0, 0, 0, 0.5); font-size: 25px; color: #fff; padding: 0.2em 1.5em; margin-right: 10px; font-family: 'Cafe24night';} .main_sch_wrap #sch_str:focus { border: 2px solid #fff !important; } .main_sch_wrap #sch_str::placeholder {color:#fff; opacity:1} .main_sch_wrap #sch_submit {width: 63px; height: 63px; border-radius: 100%; border: none; background: var(--key-color); transition: all 0.15s} .main_sch_wrap #sch_submit .fa-search {color: #fff; font-size: 25px; transition: all 0.15s} .main_sch_wrap #sch_submit:hover {box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); } .main_sch_wrap #sch_submit:hover .fa-search {transform: scale(1.1);} .main_link_section .link_btn_wrap {display: flex; align-items: center; justify-content: center; gap: 70px; position: relative;} .main_link_section .link_btn_wrap a {display: block; transform: translate3d(0, 0, 0); cursor:pointer; position: relative; z-index: 10;} .main_link_section .link_btn_wrap a .wrap {display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; z-index: 1;} .main_link_section .link_btn_wrap a span {display: flex; justify-content: center; align-items: center; width: 130px; height: 130px; background: #f2f2f2; border-radius: 20px; position: relative; overflow: hidden;} .main_link_section .link_btn_wrap a span img {position: absolute; top:0; left:0; width:100%; height:100%; max-width:100%} .main_link_section .link_btn_wrap a span .on { opacity:0; transition: all 0.15s;} .main_link_section .link_btn_wrap a p {font-size: 19px; font-weight: 700; transition: all 0.15s; color:#222} .main_recommand_tour {background-image:url(../img/main/main_recommand_bg.jpg); background-size:cover; overflow:hidden; position: relative; width: 100%;} #main_recommand_right_slider {position: absolute; top: 0; left: 440px;/* width: 1890px; */ width: 1380px; padding-bottom: 20px; overflow:hidden; } .main_recommand_tour .swiper-slide img {width: 100%; height: 340px; max-width: 100%; object-fit:cover;} .main_recommand_tour .swiper-slide { width: 450px} .main_hover_slide .swiper-slide a {display: block; height:100%; border-radius: 10px; overflow: hidden; background: #fff; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transition: all 0.1s;} /* 2024.10.30 - 김희정 */ .main_hover_slide .swiper-slide {height:auto;} .main_hover_slide .swiper-slide a {display: flex; flex-direction:column;} .main_hover_slide .swiper-slide a > div {width:100%;} .main_hover_slide .swiper-slide .info {flex:1; min-height:0;} .main_hover_slide .swiper-slide .info {padding: 20px 20px 25px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); border-right:1px solid var(--line); border-radius:0 0 10px 10px; min-height:200px} .main_hover_slide .tags {font-size: 16px; color: #999; word-spacing: 0.1em; margin-bottom: 2em; transition: all 0.15s; height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .main_hover_slide .prd_name {font-size: 20px; font-weight:500; line-height: 1.2em; height: auto; margin-bottom: 0.4em; overflow: hidden;word-wrap: break-word;text-overflow: ellipsis; white-space: nowrap; transition: all 0.15s;} .main_hover_slide .minimum_people {display: none; font-size: 17px; margin-bottom: 0.8em; font-weight: 700;} .main_hover_slide .default-price {font-size: 14px; color: #ccc; font-weight: 700; margin-bottom: 0.4em; position: relative; display: inline-block;transition: all 0.15s;} .main_hover_slide .default-price:after {content: ""; position: absolute; top: 42%; left: -1%; width: 100%; height: 2px; background: #ccc; transition: all 0.15s;} .main_hover_slide .default-price.zero:after {content:none} .main_hover_slide .prd-price {font-size: 18px; font-weight: 700; transition: all 0.15s;} /* 2024.10.30 - 김희정 폰트사이즈 20 > 18로수정 */ .main_hover_slide .prd-price .percent {color:#ff5050; display:inline-block; margin-right: 0;transition: all 0.15s; font-size:16px} .main_hover_slide .link {font-size: 25px; display: flex; width: 2em; height: 2em; color: #c2c2c2; background: #f2f2f2; border-radius: 100%; align-items: center; justify-content: center; padding-bottom: 0.1em; position: absolute; right: 40px; bottom: 40px; transition: all 0.15s; font-family: 'Pretendard', sans-serif;} .main_hover_slide .swiper-slide a:hover {box-shadow: 3px 3px 15px rgba(0,0,0,0.4); box-shadow: 0px 0px 26px rgb(84 95 138 / 18%)} .main_hover_slide .swiper-slide a:hover .default-price {color:#af95dc} .main_hover_slide .swiper-slide a:hover .default-price:after { background:#af95dc;} .main_hover_slide .swiper-slide a:hover .link {color: var(--key-color); background:#fff} #main_recommand_left_slider {position: absolute; top: 0; right: 100%; width: 470px; padding-right: 20px; overflow: hidden; transform: translateX(50%);} #main_recommand_right_slider.element3 {width: 1150px;} .main_recommand_tour #main_recommand_right_slider.element3 .swiper-slide img {height: 280px;} .main_recommand_tour .slider_ctrl_wrap.element3 {height: 520px;} .main_recommand_tour .slider_ctrl_wrap.element3 .ctrl_box {display:none} .main_recommand_tour .slider_ctrl_wrap { width: 440px; height:620px; position:relative } .main_recommand_tour .slider_ctrl_wrap:after {content: ""; position: absolute; left: -170px; bottom: -130px; width: 610px; height: 290px; background-image:url(../img/main/main_ctrl_bg.png); background-size:cover; } .main_recommand_tour .slider_ctrl_wrap .top_txt {font-size: 20px; font-weight: 700; opacity: 0.3; margin-bottom: 1.8em;} .main_recommand_tour .slider_ctrl_wrap h2 {font-size: 48px; font-family: 'Cafe24night'; line-height: 1.2em; margin-bottom: 0.8em; font-weight: 400;} .main_recommand_tour .slider_ctrl_wrap .ctrl_box {display: flex; gap: 15px;} .main_recommand_tour .slider_ctrl_wrap a {display: inline-block; width: 50px; height: 50px; border-radius: 100%;transition: all 0.15s;} .main_recommand_tour .slider_ctrl_wrap a:hover {box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4); transform: scale(1.08);} .main_recommand_tour .slider_ctrl_wrap .btn-prev {background:url(../img/main/slide_prev.png) no-repeat center var(--key-color); background-position:45% 50% } .main_recommand_tour .slider_ctrl_wrap .btn-next {background:url(../img/main/slide_next.png) no-repeat center var(--key-color); } .main_travel_tab_wrap {overflow: hidden;} .main_travel_tab_wrap .flex_wrap {display: flex; flex-wrap: wrap;} .main_travel_tab_wrap .tab_btns {width: 360px;} .main_travel_tab_wrap .tab_contents_wrap {width: 100%; overflow: hidden;position: absolute; top: -15px; left: 360px; padding:12px;} .main_travel_tab_wrap .travel_tab_contents { margin-right: -30px; } .main_travel_tab_wrap .tab_btns h2 { font-size: 50px; font-family: 'Cafe24night'; line-height: 1.2em; margin-bottom: 0.8em; font-weight: 400;} .main_travel_tab_wrap .tab_btns ul {display: flex; flex-direction: column; gap: 20px;} .main_travel_tab_wrap .tab_btns li a {display: inline-block; font-size: 19px; color: #999; background: #f2f2f2; width: 320px; padding: 1em 1.5em; border-radius: 30px; position: relative; transition: all 0.15s;} .main_travel_tab_wrap .tab_btns li a:after {content:"→"; position: absolute; right: 1em; top: 50%; transform: translateY(-56%); font-size: 1.1em; font-family: 'Pretendard', sans-serif;} .main_travel_tab_wrap .tab_btns li a.on, .main_travel_tab_wrap .tab_btns li a:hover { background:var(--key-color); color:#fff } .main_travel_tab_wrap .travel_tab_contents.element3 {padding-right: 280px;} .main_hover_slide.small .tags { font-size: 13px; height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .main_hover_slide.small .prd_name { font-size: 18px;} .main_hover_slide.small .default-price { font-size: 14px; font-weight: 600;} .main_hover_slide.small .minimum_people{ font-size: 14px;font-weight: 600;} .main_hover_slide.small .prd-price { font-size: 20px;} .main_hover_slide.small .link {font-size: 20px; right: 20px; bottom: 40px;} .main_hover_slide.small .swiper-slide a:hover:after {box-shadow: inset 0 0 0 5px var(--key-color);} .main_hover_slide.small .swiper-slide a:hover {border-color: var(--key-color);} .main_hover_slide.small .swiper-slide .thumb-nail {overflow: hidden} .main_hover_slide.small .swiper-slide .thumb-nail img {width: 100%; max-width: 100%; object-fit: cover} /* .main_hover_slide.small .swiper-slide.hover_on a:after {box-shadow: inset 0 0 0 5px var(--key-color);} .main_hover_slide.small .swiper-slide.hover_on a {border-color: var(--key-color);} .main_hover_slide.small .swiper-slide.hover_on a {background:var(--key-color); box-shadow: 3px 3px 15px rgba(0,0,0,0.4);} .main_hover_slide.small .swiper-slide.hover_on a .tags, .main_hover_slide.small .swiper-slide.hover_on a .prd_name, .main_hover_slide.small .swiper-slide.hover_on a .minimum_people, .main_hover_slide.small .swiper-slide.hover_on a .prd-price, .main_hover_slide.small .swiper-slide.hover_on a .prd-price .percent {color:#fff} .main_hover_slide.small .swiper-slide.hover_on a .default-price {color:#af95dc} .main_hover_slide.small .swiper-slide.hover_on a .default-price:after { background:#af95dc;} .main_hover_slide.small .swiper-slide.hover_on a .link {color: var(--key-color); background:#fff} */ .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a:after {box-shadow: inset 0 0 0 5px var(--key-color);} .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a {border-color: var(--key-color);} .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a {background:var(--key-color); box-shadow: 3px 3px 10px rgba(0,0,0,0.3);} .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a .tags, .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a .prd_name, .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a .minimum_people, .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a .prd-price, .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a .prd-price .percent {color:#fff} .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a .default-price {color:#af95dc} .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a .default-price:after { background:#af95dc;} .main_travel_tab_wrap .main_hover_slide.small .swiper-slide.swiper-slide-active a .link {color: var(--key-color); background:#fff} .main_slider_banner_wrap {position:relative; overflow:hidden } .main_slider_banner_wrap .swiper-container {overflow:hidden } .main_slider_banner_wrap .swiper-slide {height:400px; padding:0 20px;position:relative} .main_slider_banner_wrap .swiper-slide img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 100%; object-fit: cover;} .main_slider_banner_wrap .desc {display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; width: 100%; position: relative; flex-direction: column;} .main_slider_banner_wrap .desc h2 {font-size: 50px; font-family: 'Cafe24night'; line-height: 1.2em; margin-bottom: 0.4em; font-weight: 400;} .main_slider_banner_wrap .desc p {font-size: 22px; margin-bottom: 1.5em;} .main_slider_banner_wrap .desc a {display: inline-block; font-size: 17px; padding: 0.75em 4em 0.7em 2em; background: var(--key-color); color: #fff; border-radius: 30px; position: relative; transition: all 0.15s;} .main_slider_banner_wrap .desc a:after {content: ""; position: absolute; right: 2em; top: 50%; transform: translateY(-50%); width: 8px; height: 12px; background: url(../img/main/link_arrow.png) no-repeat center; } .main_slider_banner_wrap .desc a:hover { box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);} .main_slider_banner_wrap .main-banner-prev, .main_slider_banner_wrap .main-banner-next {position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 100%; z-index: 10; cursor: pointer; transition: all 0.15s;} .main_slider_banner_wrap .main-banner-prev {left:230px; background-image: url(../img/main/slide_prev.png); background-repeat:no-repeat; background-position: 45% 50%;} .main_slider_banner_wrap .main-banner-next {right:230px; background-image: url(../img/main/slide_next.png); background-repeat:no-repeat; background-position: center} .main_slider_banner_wrap .main-banner-prev:hover, .main_slider_banner_wrap .main-banner-next:hover {background-color: var(--key-color); border-color: var(--key-color);} .main_cs_center_wrap {overflow:hidden } .main_cs_center_wrap .flex_wrap {display: flex; flex-wrap: wrap; position: relative; } .main_cs_center_wrap .notice_recent {width: 70%} .main_cs_center_wrap .cs_center {width: 30%} .main_cs_center_wrap .notice_recent {padding-right:65px} .main_cs_center_wrap .cs_center {padding-left:65px} .main_cs_center_wrap .titles {font-size: 50px; font-family: 'Cafe24night'; margin-bottom: 0.6em; font-weight: 400;} .notice_recent .latest_board_list {border-top: 1px solid #ddd;} .notice_recent .n_contents {height: 70px; display: flex; align-items: center; border-bottom: 1px solid #ddd;} .notice_recent .n_date {font-size: 16px; color: #999; width: 100px;} .notice_recent .n_contents a {font-size: 18px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 100px);} .notice_recent .n_contents a:hover {text-decoration: underline; text-underline-offset: 2px;} .main_cs_center_wrap .cs_center .tel_link {font-size: 50px; font-family: 'Cafe24night'; margin-bottom: 0.4em; padding-top: 0.2em; font-weight: 400; display: block; cursor: default;} .main_cs_center_wrap .cs_center p {font-size: 18px; line-height: 1.4em; margin-bottom: 2.5em;} .main_cs_center_wrap .cs_center .social_link {display: flex; gap: 10px;} .main_cs_center_wrap .cs_center .social_link a {display: inline-block; width: 40px; height: 40px; border-radius: 100%; background-repeat:no-repeat; background-position: center ; transition: all 0.15s;} .main_cs_center_wrap .cs_center .social_link a:hover { box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);} .main_cs_center_wrap .cs_center .social_link .katalk { background-image: url(../img/main/katalk_icon.png);} .main_cs_center_wrap .cs_center .social_link .insta { background-image: url(../img/main/insta_icon.png);} .main_cs_center_wrap .cs_center .social_link .youtube { background-image: url(../img/main/youtube_icon.png);} .main_cs_center_wrap .btn_link {position: absolute; right: -80px; bottom: 0; display: flex; flex-direction: column; gap: 20px;} .main_cs_center_wrap .btn_link a { display: inline-block; font-size: 19px; color: #999; background: #f2f2f2; width: 250px; padding: 1em 1.5em; border-radius: 30px; position: relative; transition: all 0.15s;} .main_cs_center_wrap .btn_link a:hover { background: var(--key-color); color: #fff;} .main_cs_center_wrap .btn_link a:after { content: "→"; position: absolute; right: 1.5em; top: 50%; transform: translateY(-56%); font-size: 1.1em; font-family: 'Pretendard', sans-serif;} /* footer */ .footer_top_link {display: flex;} .footer_top_link a {font-size: 18px; color: #fff; margin-right: 1.7em; font-weight: 600;} .footer_top_link a:hover {text-decoration: underline; text-underline-offset: 2px;} .footer_info p {font-size: 15px; color: #fff; line-height: 1.6em; font-weight: 100; opacity: 0.6; letter-spacing: 0em; margin-bottom: 2.5em;} .footer_info p a, .footer_info span {color:inherit} .footer_copy { position:relative; /* border-top: 1px solid rgba(255, 255, 255, 0.2); */} .footer_copy p {font-size: 15px; color: #fff; line-height: 1.6em; font-weight: 100; opacity: 0.6; letter-spacing: -0.01em; padding-top:2.5em } /* side quick */ #side_quick_menu {position: fixed; right: 30px; bottom: 120px;z-index: 199;} #side_quick_menu .inner_wrap {display: flex; flex-direction: column; align-items: center; gap: 10px;} #side_quick_menu .inner_wrap button {display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border: none; border-radius: 100%;} #side_quick_menu .inner_wrap .white {background:#fff; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);all 0.15s;} #side_quick_menu .inner_wrap .white .open {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;} #side_quick_menu .inner_wrap .white .open p {font-size: 13px; color: var(--key-color); font-weight: 600;} #side_quick_menu .inner_wrap .white:hover {box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);} #side_quick_menu .inner_wrap .close {display:none} #side_quick_menu.open .inner_wrap .close {display:block} #side_quick_menu.open .inner_wrap .open {display:none} #side_quick_menu .inner_wrap #gototop_btn {background: var(--font-bk); font-size: 14px; color:#fff; transition: all 0.15s;} #side_quick_menu .inner_wrap #gototop_btn:hover {box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);} #side_quick_menu .upper {display: flex; flex-direction: column; align-items: center; width: 100px; min-height: 1px; padding: 6px; /* background: var(--key-color); margin-bottom: 15px; padding: 5px 12px; border-radius: 5px;*/} #side_quick_menu .upper a {display: inline-block; font-size: 14px; color: #fff; padding: 0.7em; width: 100%; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.2);} #side_quick_menu .upper a:last-child {border-bottom:none} #side_quick_menu .view_history {display: none; width: 90px; background: #fff; text-align: center; padding: 15px; border-radius: 50px; box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);} #side_quick_menu .view_history h3 {font-size: 14px; margin-bottom: 0.8em;} #side_quick_menu .view_history .thumb_nail img {width: 60px; height: 60px; object-fit: cover;} #side_quick_menu .view_history .thumb_nail {margin-bottom: 10px; border-radius: 100%; overflow: hidden;} #side_quick_menu .view_history .prd_title {font-size: 12px; line-height: 1.2em; width: 100%; height: 2.2em; overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; word-wrap: break-word; text-align: left; -webkit-box-orient: vertical;} #side_quick_menu .view_history .prd_price {font-size: 11px; line-height: 1.2em;} #side_quick_menu .view_history ul li {padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ddd;} #side_quick_menu .view_history ul li:last-child {padding-bottom: 12px; margin-bottom: 0; border-bottom:none} #side_quick_menu .view_history ul li a:hover .prd_title, #side_quick_menu .view_history ul li a:hover .prd_price {text-decoration: underline} /* Media Query */ @media only screen and ( min-width: 2400px ) { #main_recommand_left_slider {transform: translateX(90%);} .main_travel_tab_wrap .tab_contents_wrap { width: calc(100% + 250px);} } @media only screen and ( min-width: 767px ) { .main_link_section .link_btn_wrap a .wrap:hover span .on {opacity:1;} .main_link_section .link_btn_wrap a .wrap:hover p {color:var(--key-color)} } @media only screen and ( max-width: 1900px ) { #main_recommand_right_slider.element3 {width: 63vw;} .main_recommand_tour #main_recommand_right_slider.element3 .swiper-slide img {height: 14.73vw;} .main_recommand_tour .slider_ctrl_wrap.element3 {height: 28vw;} } @media only screen and ( max-width: 1800px ) { #main_recommand_left_slider {transform: translateX(30%);} } @media only screen and ( max-width: 1680px ) { #main_recommand_left_slider {transform: translateX(0);} } @media only screen and ( max-width: 1600px ) { .main_header_slider_section .slider_title h2 {font-size: 4.06vw; padding-top:1.56vw} .main_header_slider_section .slider_title h3 {font-size: 1.875vw; margin-bottom:6.88vw} .main_header_slider_section .main_sch_wrap {bottom: 15.625vw;} .main_sch_wrap #sch_str {width: 34.0625vw; height: 3.75vw; font-size: 1.5625vw;} .main_sch_wrap #sch_submit { width: 3.9375vw; height: 3.9375vw;} .main_sch_wrap #sch_submit .fa-search {font-size: 1.5625vw;} .main_link_section .link_btn_wrap {gap: 4.375vw;} .main_link_section .link_btn_wrap a span {width: 8.125vw; height: 8.125vw;} .main_link_section .link_btn_wrap a .wrap {gap: 1.25vw;} .main_link_section .link_btn_wrap a p {font-size: 1.0625vw;} .main_recommand_tour .slider_ctrl_wrap { width: 27.5vw; height: 38.75vw;} .main_recommand_tour .slider_ctrl_wrap .top_txt { font-size: 1.0625vw;} .main_recommand_tour .slider_ctrl_wrap h2 { font-size: 3.125vw;} .main_recommand_tour .slider_ctrl_wrap a {width: 3.125vw; height: 3.125vw;} .main_recommand_tour .slider_ctrl_wrap:after {left: -10.625vw; bottom: -8.125vw; width:38.125vw; height: 18.125vw;} #main_recommand_right_slider { left: 27.5vw; /*width: 118.1249vw;*/ width: 90vw;} .main_recommand_tour .swiper-slide { width: 28.125vw; } .main_hover_slide .tags { font-size: 0.875vw; } .main_hover_slide .minimum_people { font-size: 1.0625vw;} .main_hover_slide .default-price { font-size: 1.0625vw;} .main_hover_slide .link { font-size: 1.5625vw;right: 2.5vw; bottom: 2.5vw;} .main_recommand_tour .swiper-slide img {height: 21.25vw;} #main_recommand_left_slider {width: 29.375vw;} .main_travel_tab_wrap .tab_btns { width: 22.5vw;} .main_travel_tab_wrap .tab_contents_wrap { left: 22.5vw;} .main_travel_tab_wrap .tab_btns h2 { font-size: 3.125vw;} .main_travel_tab_wrap .tab_btns li a {font-size: 1.0625vw; width:20vw;} .main_travel_tab_wrap .tab_btns ul {gap: 1.25vw;} .main_hover_slide.small .tags { font-size: 0.8125vw; } /*.main_hover_slide.small .prd_name { font-size: 1.125vw;}*/ .main_hover_slide.small .default-price { font-size: 0.875vw;} /*.main_hover_slide.small .prd-price { font-size: 1.25vw;}*/ .main_hover_slide.small .link { font-size: 1.25vw; right: 1.25vw; bottom: 2.5vw;} .main_slider_banner_wrap .swiper-slide {height: 25vw;} .main_slider_banner_wrap .desc h2 { font-size: 3.125vw;} .main_slider_banner_wrap .desc p { font-size: 1.375vw;} .main_slider_banner_wrap .desc a {font-size: 0.9375vw;} .main_slider_banner_wrap .main-banner-prev, .main_slider_banner_wrap .main-banner-next {width: 3.125vw; height: 3.125vw;} .main_slider_banner_wrap .main-banner-next { right: 50px;} .main_slider_banner_wrap .main-banner-prev {left: 50px} .main_cs_center_wrap .titles, .main_cs_center_wrap .cs_center .tel_link { font-size: 3.125vw;} .notice_recent .n_contents { height: 4.375vw;} .notice_recent .n_date { font-size: 0.875vw; width: 6.25vw; } .notice_recent .n_contents a { font-size: 1.125vw; width: calc(100% - 6.25vw); } .main_cs_center_wrap .cs_center p { font-size: 1vw; } .main_cs_center_wrap .cs_center .social_link a {width: 2.5vw; height: 2.5vw;} .main_cs_center_wrap .btn_link a {font-size: 1.0625vw; width: 15.625vw;} .main_cs_center_wrap .btn_link {right: 0; gap: 1.25vw;} .main_cs_center_wrap .notice_recent { padding-right:4.0625vw; } .main_cs_center_wrap .cs_center { padding-left: 4.0625vw} } @media only screen and ( max-width: 1440px ) { .main_header_slider_section .swiper-slide {min-height: 570px; height:auto} } @media only screen and ( max-width: 1280px ) { /*팝업*/ .hd_pops {top:92px!important} } @media only screen and ( max-width: 1200px ) { .main_header_slider_section .swiper-slide {min-height: 50vw;} } @media only screen and ( max-width: 980px ) { .main_header_slider_section .slider_title h2 { font-size: 6vw; } .main_header_slider_section .slider_title h3 { font-size: 2.4vw; } .main_sch_wrap #sch_str { width: 40vw; height: 5vw; font-size: 2vw; } .main_sch_wrap #sch_submit { width: 5vw; height: 5vw; } .main_sch_wrap #sch_submit .fa-search { font-size: 2vw; } .main_header_slider_section .main_sch_wrap { bottom: 12vw; } .main_link_section .link_btn_wrap a span { width: 10vw; height: 10vw; } .main_link_section .link_btn_wrap a p { font-size: 1.8vw; } .main_recommand_tour .slider_ctrl_wrap .top_txt { font-size: 1.8vw; } .main_recommand_tour .slider_ctrl_wrap h2 { font-size: 3.8vw; } .main_recommand_tour .slider_ctrl_wrap a { width: 5vw; height: 5vw; } .main_hover_slide .tags { font-size: 1.2vw; } .main_hover_slide .prd_name { font-size: 1.8vw; } .main_hover_slide .minimum_people { font-size: 1.5vw; } .main_hover_slide .default-price { font-size: 1.0625vw; } .main_hover_slide .prd-price { font-size: 1.8vw; } .main_hover_slide .link { font-size: 2vw; } .main_travel_tab_wrap .tab_btns h2 { font-size: 3.8vw; } .main_travel_tab_wrap .tab_btns li a { font-size: 1.2vw;} .main_hover_slide.small .tags { font-size: 1.2vw; } .main_hover_slide.small .prd_name { font-size: 1.8vw; } .main_hover_slide.small .default-price { font-size: 1.3vw; } .main_hover_slide.small .prd-price { font-size: 1.8vw; } .main_hover_slide.small .link { font-size: 1.8vw;} .main_slider_banner_wrap .desc h2 { font-size: 3.8vw; } .main_slider_banner_wrap .desc p { font-size: 1.6vw; } .main_slider_banner_wrap .desc a { font-size: 1.4vw; } .main_slider_banner_wrap .swiper-slide { height: 32vw; } .main_slider_banner_wrap .main-banner-prev, .main_slider_banner_wrap .main-banner-next { width: 5vw; height: 5vw; } .main_cs_center_wrap .titles, .main_cs_center_wrap .cs_center .tel_link { font-size: 3.8vw; } .notice_recent .n_contents { height: 5vw; } .notice_recent .n_date { font-size: 1.2vw; width: 8vw; } .notice_recent .n_contents a { font-size: 1.6vw; width: calc(100% - 8vw); } .main_cs_center_wrap .cs_center p { font-size: 1.5vw; margin-bottom: 1.5em;} .main_cs_center_wrap .cs_center .social_link a { width: 4vw; height: 4vw; } .main_cs_center_wrap .btn_link a { font-size: 1.2vw;} } @media only screen and ( max-width: 767px ) { .main_sch_wrap #sch_str { width: 45vw; height: 7vw; font-size: 3vw;} .main_sch_wrap #sch_submit { width: 7vw; height: 7vw; } .main_sch_wrap #sch_submit .fa-search { font-size: 3vw; } .main_header_slider_section .main_sch_wrap { bottom: 8vw; } .main_link_section .link_btn_wrap {flex-wrap: wrap; gap: 6vw;} .main_link_section .link_btn_wrap a span { width: 35vw; height: 35vw; } .main_link_section .link_btn_wrap a p { font-size: 2.8vw; } .main_recommand_tour .slider_ctrl_wrap {width: 100%; height: auto; padding-top: 0; margin-bottom: 30px;} .main_recommand_tour .slider_ctrl_wrap h2 { font-size: 6vw; margin-bottom: 0.5em;} .main_recommand_tour .slider_ctrl_wrap h2 br {display: none} .main_recommand_tour .slider_ctrl_wrap:after {content:none} .main_recommand_tour .slider_ctrl_wrap .top_txt { font-size: 2vw; } .main_recommand_tour .slider_ctrl_wrap a { width: 8vw; height: 8vw; } #main_recommand_right_slider { position: relative; left: 0; width: 100%; overflow: visible; } .main_recommand_tour .swiper-slide { width: 60vw; } .main_recommand_tour .swiper-slide img { height: 45vw; } .main_hover_slide .swiper-slide .info { padding: 5vw 5vw 7vw; } .main_hover_slide .tags { font-size: 2.6vw; } .main_hover_slide .prd_name { font-size: 18px; } .main_hover_slide .minimum_people { font-size: 3.3vw; } .main_hover_slide .default-price { font-size: 13px; } .main_hover_slide .prd-price { font-size: 18px; } .main_hover_slide .link { font-size: 4vw; right: 5vw; bottom: 6vw; } #main_recommand_right_slider.element3 {width: 100%;} .main_recommand_tour #main_recommand_right_slider.element3 .swiper-slide img {height: 45vw;} .main_recommand_tour .slider_ctrl_wrap.element3 {height: auto;} .main_travel_tab_wrap .travel_tab_contents.element3 { padding-right: 0;} .main_travel_tab_wrap .tab_btns { width: 100%; } .main_travel_tab_wrap .tab_btns h2 { font-size: 6vw; } .main_travel_tab_wrap .tab_btns h2 br {display: none} .main_hover_slide.small .tags { font-size: 2.6vw; } .main_hover_slide.small .prd_name { font-size: 18px; } .main_hover_slide.small .minimum_people { font-size: 3.3vw; } .main_hover_slide.small .default-price { font-size: 13px; } .main_hover_slide.small .prd-price { font-size: 18px; } .main_hover_slide.small .link { font-size: 4vw; right: 5vw; bottom: 6vw; } .main_travel_tab_wrap .travel_tab_contents { margin-right: 0;} .main_travel_tab_wrap .tab_contents_wrap { width: 100%; position: relative; left: 0; top: 0; padding: 0; overflow: visible;} .main_travel_tab_wrap .tab_btns ul { gap: 2vw; flex-direction: row; margin-bottom: 30px; } .main_travel_tab_wrap .tab_btns li a { font-size: 2.8vw; width: 28vw; } .main_travel_tab_wrap .tab_btns li a:after {content: none} .main_slider_banner_wrap .swiper-slide { height: 50vw; } .main_slider_banner_wrap .main-banner-prev, .main_slider_banner_wrap .main-banner-next { width: 8vw; height: 8vw; } .main_slider_banner_wrap .main-banner-prev { left: 20px; } .main_slider_banner_wrap .main-banner-next { right: 20px; } .main_slider_banner_wrap .desc h2 { font-size: 6vw; } .main_slider_banner_wrap .desc p { font-size: 2.8vw; padding: 0 40px; word-break: keep-all; line-height: 1.4em; } .main_slider_banner_wrap .desc a { font-size: 2.6vw; } .main_cs_center_wrap .titles, .main_cs_center_wrap .cs_center .tel_link { font-size: 6vw; } .main_cs_center_wrap .notice_recent, .main_cs_center_wrap .cs_center { width: 100%; } .main_cs_center_wrap .notice_recent { padding-right: 0; } .main_cs_center_wrap .cs_center { padding-left: 0; } .main_cs_center_wrap .flex_wrap {gap: 30px;} .notice_recent .n_contents { height: 8vw; } .notice_recent .n_date { font-size: 2.4vw; width: 18vw; } .notice_recent .n_contents a { font-size: 2.8vw; width: calc(100% - 18vw); } .main_cs_center_wrap .cs_center p { font-size: 2.8vw; } .main_cs_center_wrap .cs_center .social_link a { width: 8vw; height: 8vw; } .main_cs_center_wrap .btn_link a { font-size: 3vw; width: 35vw; } } @media only screen and ( max-width: 480px ) { #wrapper { padding-top: 90px; } .mobile_head_top {display: block; border-bottom: 1px solid #ddd; height:30px; background: #FFF;} .mobile_head_top .login_wrap {display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; height: 100%;} .mobile_head_top .login_wrap a {font-size: 14px; display: inline-block; margin-left: 15px;} .header_hamburger_menu { top: 48px; } .main_header_slider_section .swiper-slide { height: 75vw; background-position: center center; } .main_header_slider_section .slider_title h2 { font-size: 8vw; } .main_header_slider_section .slider_title h3 { font-size: 5vw; } .main_sch_wrap #sch_str { width: 70vw; height: 12vw; font-size: 4.3vw; } .main_sch_wrap #sch_submit { width: 12vw; height: 12vw; } .main_sch_wrap #sch_submit .fa-search { font-size: 4vw; } .main_header_slider_section .main_sch_wrap { bottom: 10vw; } .main_link_section .link_btn_wrap {gap: 8vw;} .main_link_section .link_btn_wrap a span { width: 30vw; height: 30vw; } .main_link_section .link_btn_wrap a p { font-size: 4.3vw; } .main_link_section .link_btn_wrap a .wrap { gap: 3.5vw; } .main_recommand_tour .slider_ctrl_wrap .top_txt {font-size: 4.2vw; margin-bottom: 1em;} .main_recommand_tour .slider_ctrl_wrap h2 { font-size: 6.5vw; margin-bottom: 1em; } .main_recommand_tour .slider_ctrl_wrap a { width: 10vw; height: 10vw; background-size: 10px 14px !important;} .main_travel_tab_wrap .tab_btns ul {flex-wrap: wrap;} .main_travel_tab_wrap .tab_btns li {width:100%} .main_travel_tab_wrap .tab_btns li a {width:100%; font-size: 4.6vw; padding: 0.8em 1.5em;} .notice_recent .n_contents { height: 12vw; } .notice_recent .n_date { font-size: 3vw; width: 20vw; } .notice_recent .n_contents a { font-size: 4.2vw; width: calc(100% - 20vw); } .main_cs_center_wrap .cs_center p { font-size: 4.2vw; } .main_cs_center_wrap .cs_center p span {margin-bottom:5px} .main_cs_center_wrap .cs_center .social_link a { width: 10vw; height: 10vw; } .main_cs_center_wrap .btn_link {gap: 2.5vw; } .main_cs_center_wrap .btn_link a { font-size: 4.2vw; width: 38vw; padding: 0.7em 1em; } .main_cs_center_wrap .btn_link a:after {right: 0.6em;} .main_slider_banner_wrap .desc p { font-size: 4vw; padding:0} .main_slider_banner_wrap .desc a { font-size: 3.6vw; } .main_slider_banner_wrap .desc a:after {background-size: 6px 9px !important;} .main_slider_banner_wrap .main-banner-next, .main_slider_banner_wrap .main-banner-prev {background-size: 8px 14px;} .main_hover_slide .tags { font-size: 3.6vw; } .main_hover_slide.small .tags { font-size: 3.6vw; } /* footer */ .footer_top_link {flex-wrap: wrap; gap: 20px; padding-bottom: 25px;} .footer_info .footer_bar {display: block; font-size: 0;} .footer_info p, .footer_copy p { font-size: 3.6vw; word-break: keep-all;} #ft .container:after {bottom: 52px;} /* side quick */ #side_quick_menu {right: 10px; bottom: 30px;} #side_quick_menu .upper {width: 80px;} #side_quick_menu .upper a {font-size: 12px;} #side_quick_menu .inner_wrap button {width: 55px; height: 55px;} #side_quick_menu .inner_wrap button .open img {width:15px; height:10px; object-fit: scale-down; display: block;} #side_quick_menu .view_history {width: 80px;} #side_quick_menu .view_history h3 { font-size: 12px;} #side_quick_menu .view_history .thumb_nail img {height: 50px; width:50px} /* 팝업 */ #hd_pop {width: auto !important;} .hd_pops {top: 92px !important; left: 50vw !important; transform: translateX(-50%);} .hd_pops_con {max-width: 80vw; height: auto !important;} } /***added 2024.08.28 이다혜 Main 헤더 및 메인 비주얼 슬라이더***/ .main_header_slider_section .slider_title p {color:var(--color-white)} .main_header_slider_section .slider_title p:nth-of-type(1){font-family: 'Cafe24star'; font-size:28px; line-height:1.3} .main_header_slider_section .slider_title p:nth-of-type(2){font-size: 18px; line-height:1.5em} .main_header_slider_section .controls_wrap {position:absolute; left:0; bottom:40px; width:100%; z-index:2; display:flex; justify-content:center; align-items:center; font-size:17px; font-weight:600} .main_header_slider_section .controls_wrap span {color:#fff; font-size:17px; font-weight:600} .main_header_slider_section .controls_wrap > span {font-size:0; cursor:pointer} .main_header_slider_section .controls_wrap > span:before{content: ""; display: block; -webkit-mask-size: cover; width:24px; height:24px; background-color:#fff} .main_header_slider_section .controls_wrap .custom-pagination {width:70px; color:#fff; text-align:center} .main_header_slider_section .controls_wrap span.btn_prev {-webkit-mask-image: url(../img/main/sw_prev.svg)} .main_header_slider_section .controls_wrap span.btn_next {-webkit-mask-image: url(../img/main/sw_next.svg)} .play-pause {width:32px; height:32px; background:rgba(0,0,0,0.7); border-radius:50%; border:none; margin-left:15px; font-size:0; display:flex; justify-content:center; align-items:center} .play-pause:before{content: ""; display: block; width:18px; height:18px; background-color:#fff; -webkit-mask-position: center; -webkit-mask-repeat:no-repeat} .play-pause.pause:before{-webkit-mask-image: url(../img/main/pause.svg)} .play-pause.play:before {-webkit-mask-image: url(../img/main/play.svg)} #sch_toggle {position:absolute; right:50px; top:6px; background:url('../img/main/sch_icon_new.svg') no-repeat center; width:35px; height:35px; display:none} #sch_toggle.close {background:url('../img/main/close_new.svg') no-repeat center;} /*media query*/ @media only screen and ( max-width: 1600px ) { .main_header_slider_section .slider_title p:nth-of-type(1) {font-size:1.75vw} .main_header_slider_section .slider_title p:nth-of-type(2) {font-size:1.13vw} } @media only screen and ( max-width: 1280px ) { /*#header_wrap_all {position:relative}*/ #header_wrap_all.fixed {position:fixed} #header_wrap_all .header_menu_section .header_inner_wrap .header_bottom .hamburger_wrap p {display:none} #header_wrap_all .header_menu_section .header_top {border-top:1px solid var(--line-top); border-bottom:none; background:#fff} #header_wrap_all .header_menu_section > .container {height:40px} #header_wrap_all .header_menu_section .header_top .container {height:50px} #header_wrap_all .logo_section {width:130px} #header_wrap_all .header_menu_section .header_top .container .left .main_sch_wrap {transition:.2s ease; visibility:hidden; opacity:0; position: absolute; top: 51px; left: -5.6%; background: #fff; width: calc(100% + 11.2%); padding:10px 0} #header_wrap_all .header_menu_section .header_top .container .left .main_sch_wrap.open {display:block; visibility:visible; opacity:1; border-bottom: 1px solid var(--line)} #header_wrap_all .header_menu_section .header_top .container .left .main_sch_wrap form {display: flex; justify-content: center; padding:0 5%} #header_wrap_all .header_menu_section .header_top .container .left .main_sch_wrap #sch_submit {position: relative; right: -10px; top: 50%; transform: translateY(5px); width: 35px; height: 35px} #header_wrap_all .header_menu_section .header_top .container .left .main_sch_wrap #sch_str {max-width:420px; width:100%} .header_notice_wrap {width:100%; padding:0 35px 0 25px; background: url('../img/main/noti_icon_w.svg') no-repeat 0 50%} .rolling-list {width:100%; background:transparent} .rolling-list li {height:40px} .rolling-list li a {color:#fff} .header_hamburger_menu {position:absolute; top:59px; right:0} .header_menu_section {display:flex; flex-wrap:wrap; flex-direction: column-reverse; background:var(--sub-key-color)} .header_menu_section .header_top {width:100%} .header_login_wrap {display:none} #wrapper {padding-top:92px} #sch_toggle {display:block} /*mobile*/ #mobile_menu_box .mobile_menu_inner_wrap .header_login_wrap {transition:0.3s ease; visibility:hidden; opacity:0; display:block; margin-bottom:20px} #mobile_menu_box .mobile_menu_inner_wrap .header_login_wrap ul li a{color:#fff} #mobile_menu_box .mobile_menu_inner_wrap .header_login_wrap.open {visibility:visible; opacity:1} } @media only screen and ( max-width: 980px ) { .main_header_slider_section .slider_title p:nth-of-type(1) {font-size:2.45vw} .main_header_slider_section .slider_title p:nth-of-type(2) {font-size:1.8vw} } @media only screen and ( max-width: 767px ) { /*mobile*/ .header_login_wrap .login_wrap {margin-right:0} } @media only screen and ( max-width: 480px ) { .main_header_slider_section .slider_title p:nth-of-type(1) {font-size:4.45vw} .main_header_slider_section .slider_title p:nth-of-type(2) {font-size:2.8vw} .main_header_slider_section .controls_wrap {bottom:15px} } /***added 2024.09.02 이다혜 Main 제품리스트***/ .product_content {position:relative} .product_content .title_wrap {display: flex; justify-content: space-between; align-items: center; padding-bottom:25px} .product_content .title_wrap .title {font-size:40px; font-weight:700} .product_content .title_wrap .title span {font-size:28px; color:var(--font-gray2); font-family: 'Cafe24star'; font-weight:normal; margin-left:10px} .product_content .title_wrap a {display:block; width:78px; height:36px; border-radius:36px; background:#fff; line-height:36px; text-align:center; box-shadow: 1px 1px 30px 1px rgba(0,0,0,0.1); transition:0.2s ease} .product_content .title_wrap a:hover{background:var(--sub-key-color); color:#fff} .product_content .product_slide_wrap {overflow:hidden; padding:20px; width: calc(100% + 40px); transform: translateX(-20px)} .main_hover_slide .swiper-slide .thumb-nail {position:relative} .main_hover_slide .swiper-slide .thumb-nail .state-label {position:absolute; left:10px; top:10px; display:block; width:49px; height:49px; border-radius:50%; font-size:13px; font-weight:700; color:#fff; background:var(--sub-key-color); display: flex; justify-content: center; align-items: center; line-height:1.1} .main_hover_slide .swiper-slide .thumb-nail .state-label.arr {background:var(--label-yellow); color:var(--font-bk)} .main_hover_slide .swiper-slide .thumb-nail .state-label.res {background:var(--label-green)} .main_hover_slide .swiper-slide .info .date_label_wrap {display:flex; gap:3px; flex-wrap:wrap} .main_hover_slide .swiper-slide .info .date_label_wrap span{font-size:12px; font-weight:600; color:var(--sub-key-color); background:#eeecf9; padding:5px 10px; border-radius:12px; display:inline-block; letter-spacing:-0.04em;} /* 2024.10.30 - 김희정 letter-spacing:-0.04em; */ .main_hover_slide .swiper-slide .info .date_label_wrap + * {margin-top:15px} .product_content [class*='btn-']:not(.swiper-button-lock) {display:block; width:58px; height:58px; background:#fff; border-radius:50%; box-shadow:1px 1px 30px 1px rgba(0,0,0,0.1); font-size:0; display:flex; justify-content:center; align-items:center; position:absolute; top:50%; transition:0.2s ease} .product_content [class*='btn-']:not(.swiper-button-lock):hover {background:var(--sub-key-color)} .product_content [class*='btn-']:before {content: ""; display: block; -webkit-mask-size: cover; width:12px; height:22px; -webkit-mask-image: url(../img/main/slide_arrow.svg); background-color:var(--font-bk); transition:0.2s ease} .product_content [class*='btn-']:hover:before {background-color:#fff} .product_content [class*='btn-prev'] {left:-100px} .product_content [class*='btn-prev']:before {transform: rotate(180deg)} .product_content [class*='btn-next'] {right:-100px} .main_hover_slide .prd_cate {color:var(--sub-key-color)} .main_hover_slide .prd_cate + .prd_name {margin-top:0.4em} .main_hover_slide .detail_cont {color:var(--font-gray); line-height:1.4; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; margin-top:1.2em} .main_hover_slide .date_cont {display:block; position:relative; color:var(--font-gray); background:url('../img/main/board_clock_icon.svg') no-repeat left top / 13px; padding-left:22px; margin-top:2.5em} /*2024.11.01 김희정 date 하단정렬 */ .product_slide_wrap.review .main_hover_slide .info {display:flex; flex-direction:column;} .product_slide_wrap.review .main_hover_slide .info .detail_cont {margin-bottom:2.5em;} .product_slide_wrap.review .main_hover_slide .info .date_cont {margin-top:auto;} /*2024.10.21 이다혜 메인 상품 리스트 추가수정*/ .main_hover_slide .swiper-slide .thumb-nail { position: relative; width: 100%; /* 필요에 따라 너비를 설정 */ height: 300px; /* 원하는 높이 설정 */ overflow: hidden; /* 넘치는 부분 숨김 */ } .main_hover_slide.slide_col3 .swiper-slide .thumb-nail {height: 311px} .main_hover_slide .swiper-slide .thumb-nail img { width: 100%; /* 너비를 100%로 설정 */ height: 100%; /* 높이를 100%로 설정 */ object-fit: cover; /* 이미지 비율 유지하면서 크기 조정 */ object-position: center; /* 이미지 중앙 정렬 */ max-width:100%; } @media only screen and ( max-width: 1600px ) { .main_hover_slide .swiper-slide .info .date_label_wrap span {font-size:0.8vw} /*2024.10.21 이다혜 추가수정*/ .main_hover_slide .swiper-slide .thumb-nail {height:18.75vw} .main_hover_slide.slide_col3 .swiper-slide .thumb-nail {height: 19.43vw} } @media only screen and ( max-width: 1440px ) { .product_content [class*='btn-prev'] {left:-30px} .product_content [class*='btn-next'] {right:-30px} } @media only screen and ( max-width: 980px ) { .product_content .title_wrap {padding-bottom:15px} .product_content .title_wrap .title {font-size:30px} .product_content .title_wrap .title span {font-size:24px; margin-left:0.42em} .product_content .product_slide_wrap {padding:10px; width: calc(100% + 20px); transform: translateX(-10px); position:relative} .product_content .product_slide_wrap:after{content:''; display:block; width:10px; height:100%; background:#fff; position:absolute; right:0; top:0; z-index:2} .main_hover_slide .swiper-slide .info {padding: 1.875vw 1.5vw 2.125vw} .main_hover_slide .swiper-slide a:hover {box-shadow: 0px 0px 17px rgb(84 95 138 / 18%)} .main_hover_slide .swiper-slide .info .date_label_wrap span {font-size:1.4vw} /*2024.10.21 이다혜 추가수정*/ .main_hover_slide .swiper-slide .thumb-nail {height:30.61vw} .main_hover_slide.slide_col3 .swiper-slide .thumb-nail {height: 32.65vw} } @media only screen and ( max-width: 767px ) { .main_hover_slide .swiper-slide .thumb-nail img{max-width:100%} .main_hover_slide .swiper-slide .info {padding: 12px 12px 15px 12px; min-height:180px} .main_hover_slide .swiper-slide .info .date_label_wrap span {font-size:13px} .product_content .title_wrap .title span {font-size:18px; margin-left:0; display:block; margin-top:0.5em} .product_content [class*='btn-']:not(.swiper-button-lock){display:none} /*2024.10.21 이다혜 추가수정*/ .main_hover_slide .swiper-slide .thumb-nail {height:68.59vw} .main_hover_slide.slide_col3 .swiper-slide .thumb-nail {height: 51.44vw} } @media only screen and ( max-width: 480px ) { .main_link_section.pt100 {padding-top:10.9vw} .main_link_section.pt80 {padding-top:9.45vw} .main_link_section.pbt80 {padding:9.45vw 0} .product_content .title_wrap {padding-bottom:10px} .product_content .title_wrap .title {font-size:24px} .product_content .title_wrap .title span {font-size:18px} } /***added 2024.09.02 이다혜 Main 배너***/ .banner_content {display:grid; grid-template-columns:repeat(2, 1fr); gap:0 30px} .banner_content .item {/*min-height:230px;*/ border-radius:10px; overflow:hidden; /*padding: 35px;*/ position:relative; transition:0.2s ease} .banner_content .item:hover {box-shadow:0px 0px 26px rgb(84 95 138 / 18%)} /*.banner_content .item:first-child {background:#e1e6ed} .banner_content .item:last-child {background:#bbe5e4} .banner_content .item:before {content:''; display:block; width:300px; height:230px; background:#ddd; position:absolute; right:0; bottom:0} .banner_content .item:first-child:before {background:url('../img/main/banner_img01.png') no-repeat right bottom / contain} .banner_content .item:last-child:before {background:url('../img/main/banner_img02.png') no-repeat right bottom / contain}*/ .banner_content .item > a {display:grid; height: 100%; grid-template-rows: auto auto 1fr; position:relative; z-index:2} .banner_content .item > a h2 {font-size:30px; font-weight:700; letter-spacing:-1px} .banner_content .item > a p:nth-of-type(1) {margin-top:1em; font-size:16px; line-height:1.3; font-weight:300} .banner_content .item > a p:nth-of-type(2) {align-self:end; font-size:16px} /*media query*/ @media only screen and ( max-width: 1280px ) { .banner_content .item:before {width:22vw} .banner_content .item > a h2 {font-size:24px} } @media only screen and ( max-width: 980px ) { /*.banner_content .item {padding:25px}*/ } @media only screen and ( max-width: 767px ) { .banner_content {grid-template-columns:100%; gap:30px 0} /*.banner_content .item:before {width:40vw}*/ } @media only screen and ( max-width: 480px ) { .main_banner_section.pt80 {padding-top:9.45vw} .banner_content {gap:20px 0} /*.banner_content .item {min-height:200px}*/ .banner_content .item > a h2 {font-size:22px} .banner_content .item > a p:nth-of-type(1) {font-size:15px} } /***added 2024.09.03 이다혜 Main 여행후기***/ .main_link_section.bg {background:var(--bg-light)} .main_link_section.bg .product_content .product_slide_wrap:after {background:var(--bg-light)} .main_hover_slide.slide_col3 .swiper-slide .thumb-nail img {width:100%!important; height:100%!important; object-fit:cover;} /* height를 auto 에서 100%!important; 수정*/ .main_hover_slide.slide_col3 .prd_cate {min-height:16px; display:block} .main_hover_slide.slide_col3 .detail_cont {min-height:84px} @media only screen and ( max-width: 480px ) { .main_link_section.pbt100{padding:10.9vw 0} } /***added 2024.09.03 이다혜 Main 공지 및 고객센터***/ .main_contact_wrap {display:grid; grid-template-columns:520px calc(100% - 520px)} .main_contact_wrap [class*='area_'] .title_wrap {display:flex; justify-content:space-between} .main_contact_wrap [class*='area_'] .title_wrap + * {margin-top:1.13em} .main_contact_wrap [class*='area_'] .title_wrap .title {font-size:22px; font-weight:700} .main_contact_wrap [class*='area_'] .title_wrap .title:before {content:''; width:50px; height:45px; display:inline-block; vertical-align: middle; margin-right: 0.68em} .main_contact_wrap .area_notice {padding-right:2.92em; position:relative} .main_contact_wrap .area_notice:after{content:''; display:block; width:1px; height:100%; position:absolute; right:0; top:0; background:var(--line)} .main_contact_wrap .area_notice .title_wrap .title:before {background:url('../img/main/main_noti_icon.svg') no-repeat center / contain} .main_contact_wrap .area_notice .notice_cont .latest_board_list {padding-top:0.83em} .main_contact_wrap .area_notice .notice_cont .latest_board_list .n_contents {display:flex; position:relative; font-size:16px} .main_contact_wrap .area_notice .notice_cont .latest_board_list .n_contents:before {content:'·'; padding:0 0.53em 0 0.28em} .main_contact_wrap .area_notice .notice_cont .latest_board_list .n_contents + .n_contents {padding-top:1em} .main_contact_wrap .area_notice .notice_cont .latest_board_list .n_contents .n_date {flex-shrink:0; padding-right:0.94em; color:var(--font-gray2)} .main_contact_wrap .area_notice .notice_cont .latest_board_list .n_contents a {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:300; transition:0.2s ease} .main_contact_wrap .area_notice .notice_cont .latest_board_list .n_contents a:hover {color:var(--sub-key-color)} .main_contact_wrap .area_notice .notice_cont .latest_board_list .n_contents strong {font-weight:normal} .main_contact_wrap .area_contact {padding-left:2.92em} .main_contact_wrap .area_contact .title_wrap .title:before {background:url('../img/main/main_contact_icon.svg') no-repeat center / contain} .main_contact_wrap .area_contact .contact_cont {padding-left:5.83em; display:flex; gap:10px; justify-content:space-between} .main_contact_wrap .area_contact .contact_cont .info {display:grid; grid-template-columns: repeat(2,1fr); gap:1.67em 0} .main_contact_wrap .area_contact .contact_cont .info > div span {color:var(--font-gray2)} .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(1) p, .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(2) p{font-size:22px; font-weight:700; padding-top:0.45em} .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(3), .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(4){grid-column: 1 / 3; display:flex} .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(3) span, .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(4) span{padding-right:0.71em; min-width:83px} .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(3) p, .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(4) p{margin-top:-2px; line-height:1.4} .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(4) {padding-top:1.67em; position:relative} .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(4):before{content:''; display:block; width:calc(100% + 1.67em); height:1px; background:var(--line); position:absolute; left:0; top:0} .main_contact_wrap .area_contact .contact_cont .link_box {display:flex; gap:5px; flex-direction:column} .main_contact_wrap .area_contact .contact_cont .link_box a{display:flex; width:240px; background:var(--bg-light); border-radius:10px; padding:10px 10px 10px 3.33em; min-height:50%; align-items:center; transition:0.2s ease} .main_contact_wrap .area_contact .contact_cont .link_box a > * {font-size:18px; line-height:1.3; position:relative; padding-left:4.02em} .main_contact_wrap .area_contact .contact_cont .link_box a > *:before{content:''; display:block; width:51px; height:47px; position:absolute; left:0; top:0} .main_contact_wrap .area_contact .contact_cont .link_box a:first-child > *:before{background:url('../img/main/f_qna.svg') no-repeat center / contain} .main_contact_wrap .area_contact .contact_cont .link_box a:last-child > *:before{background:url('../img/main/f_faq.svg') no-repeat center / contain} .main_contact_wrap .area_contact .contact_cont .link_box a:hover{background:var(--sub-key-color); color:var(--color-white)} .main_contact_wrap .area_contact .contact_cont .link_box a:first-child:hover > *:before{background:url('../img/main/f_qna_hover.svg') no-repeat center / contain} .main_contact_wrap .area_contact .contact_cont .link_box a:last-child:hover > *:before{background:url('../img/main/f_faq_hover.svg') no-repeat center / contain} .main_contact_wrap .area_contact .contact_cont .link_box a:hover span {color:var(--color-white)} /*media query*/ @media only screen and ( max-width: 1366px ) { .main_contact_wrap {grid-template-columns: 450px calc(100% - 450px)} } @media only screen and ( max-width: 1280px ) { .main_contact_wrap {grid-template-columns: 100%} .main_contact_wrap .area_notice {padding-right:0; border-bottom:1px solid var(--line); padding-bottom:30px} .main_contact_wrap .area_notice:after {display:none} .main_contact_wrap .area_contact {padding-left:0; padding-top:30px} .main_contact_wrap .area_contact .contact_cont {padding-left:0} .main_contact_wrap [class*='area_'] .title_wrap + * {margin-top:2.13em} } @media only screen and ( max-width: 767px ) { .main_contact_wrap .area_contact .contact_cont {flex-direction:column; gap:30px 0} .main_contact_wrap [class*='area_'] .title_wrap .title:before {width:40px; height:35px} .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(1) p, .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(2) p {font-size:18px} .main_contact_wrap .area_contact .contact_cont .info > div:nth-child(4):before {width:100%} .main_contact_wrap .area_contact .contact_cont .link_box a {width:100%} .main_contact_wrap .area_contact .contact_cont .link_box a > *:before {width:40px; height:38px; top:5px} } @media only screen and ( max-width: 480px ) { .main_contact_wrap [class*='area_'] .title_wrap .title {font-size:20px} .main_cs_center_wrap.pbt100 {padding:10.9vw 0} .main_contact_wrap .area_notice .notice_cont .latest_board_list .n_contents {font-size:15px} } /***added 2024.09.04 이다혜 Footer***/ #ft {border-top:1px solid var(--line)} #ft .footer_content_wrap {display:grid; grid-template-columns: minmax(400px, auto) auto} #ft .footer_content_wrap .footer_sns {display:flex; justify-self:end; gap:10px} #ft .footer_content_wrap .footer_sns li a {display:block; width:40px; height:40px; background:#ddd; border-radius:50%; overflow:hidden; position:relative; transition:0.2s ease} #ft .footer_content_wrap .footer_sns li a:hover {box-shadow:0px 0px 11px 0px rgba(0,0,0,0.2)} #ft .footer_content_wrap .footer_sns li a:after{content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0} #ft .footer_content_wrap .footer_sns li:nth-child(1) a{background:url('../img/main/f_insta_bg.png') no-repeat center / cover} #ft .footer_content_wrap .footer_sns li:nth-child(1) a:after{background:url('../img/main/f_insta_icon.svg') no-repeat center / 22px} #ft .footer_content_wrap .footer_sns li:nth-child(2) a{background:#197bee url('../img/main/f_fbook_icon.svg') no-repeat center / 11px} #ft .footer_content_wrap .footer_sns li:nth-child(3) a{background:#32b24a url('../img/main/f_blog_icon.svg') no-repeat center / 24px} #ft .footer_content_wrap .footer_sns li:nth-child(4) a{background:#ffe600 url('../img/main/f_kakao_icon.svg') no-repeat center / 32px} #ft .footer_content_wrap .footer_nav {display:flex; font-size:16px; font-weight:600; align-self:center} #ft .footer_content_wrap .footer_nav li:after{content:'·'; display:inline-block; vertical-align:middle; padding:0 0.44em} #ft .footer_content_wrap .footer_nav li:last-child:after{display:none} #ft .footer_content_wrap .footer_nav li a {transition:0.2s ease} #ft .footer_content_wrap .footer_nav li a:hover {color:var(--sub-key-color)} #ft .footer_content_wrap > p {grid-column: 1 / 3; line-height:1.5; padding-top:1.67em} #ft .footer_bottom {background:var(--bg-light)} /*added 2024.09.04 이다혜 quick***/ #side_quick_menu_new {position:fixed; right:30px; bottom:195px; z-index:20} /* 2024.10.30 - 김희정 top:50%; transform:translateY(-50%); 제거 하고 하단 정렬 */ #side_quick_menu_new ul {position:relative} #side_quick_menu_new ul li {position:absolute; right:0} #side_quick_menu_new ul li:first-child{top:-60px} /* #side_quick_menu_new ul li:last-child{bottom:-75px} 2024.10.30 - 김희정 삭제 */ #side_quick_menu_new ul li a {display:block; width:60px; height:60px; border-radius:60px; display:flex; align-items:center; transition:.2s ease; overflow:hidden; position:relative} #side_quick_menu_new ul li a:before {content:''; display:block; width:30px; height:30px; position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:2} #side_quick_menu_new ul li a:after {content: ''; z-index:3; display: block; position: absolute; right: 13px; top: 50%; transform: translateY(-50%)} #side_quick_menu_new ul li:first-child a {background:#ffe600} #side_quick_menu_new ul li:first-child a:before {background:#ffe600} #side_quick_menu_new ul li:first-child a:after {width: 33px; height: 41px; background: url('../img/main/f_kakao_icon.svg') no-repeat center / cover;} /* 2024.10.30 - 김희정 삭제 #side_quick_menu_new ul li:last-child a {background:#fff; box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08)} #side_quick_menu_new ul li:last-child a:before {background:#fff} #side_quick_menu_new ul li:last-child a:after {width: 31px; height: 28px; background: url('../img/main/q_date_icon.svg') no-repeat center / cover;} */ #side_quick_menu_new ul li a span {visibility:hidden; opacity:0; transition:.3s ease; padding-left: 22px; white-space: nowrap; z-index:1} #side_quick_menu_new ul li:first-child a span {color:#392020} #side_quick_menu_new ul li:hover a {width:123px; height:60px} #side_quick_menu_new ul li:hover a span {visibility:visible; opacity:1} /*media query*/ @media only screen and ( max-width: 1280px ) { #ft .footer_content_wrap {grid-template-columns: 100%} #ft .footer_content_wrap .footer_sns {justify-self: auto; padding-top:1.67em} #ft .footer_content_wrap > p {grid-column: auto} #ft .footer_content_wrap > p span{display:block; font-size:0; height:0} } @media only screen and ( max-width: 480px ) { #ft .footer_content_wrap > p { font-size:14px!important} #ft .footer_content_wrap .footer_nav {font-size:14px} #ft .footer_content_wrap .footer_nav li:after {padding:0 0.24em} #ft .footer_bottom p {font-size:14px!important} .footer_content_wrap.pbt60 {padding:7.9vw 0} .footer_bottom.pbt30 {padding:4.9vw 0} #side_quick_menu_new {right:12px; bottom:110px;} /* 2024.10.30 김희정 추가 */ #side_quick_menu_new ul li a {width:55px; height:55px} #side_quick_menu_new ul li:hover a {width:55px; height:55px;} #side_quick_menu_new ul li a:after {right:11px} #side_quick_menu_new ul li:first-child {top:-40px} /*#side_quick_menu_new ul li:last-child {bottom:-70px} 2024.10.30 김희정 제거 */ }