@charset 'utf-8'; .transition{-webkit-transition: all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out -o-transition:all 0.3s ease-in-out; transition::all 0.3s ease-in-out;} .only-m {display:none;} .only-sm {display:none;} .only-pc {display:block;} .viewall {display:none;} .inner {position: relative; width:100%; max-width: 1880px; margin:0 auto; padding:0 20px;} .area_rgh {text-align: right;} .btn_wrap {display: flex; gap:10px;} .btn_wrap > a {font-size:1em; font-weight: 700; padding:15px 48px; display: inline-block; border-radius: 60px; } .btn_color {color:#fff; background:#055cff;} .btn_line {color:#055cff; background:transparent; border:2px solid #055cff;} .txt_yel {color:#eee74d !important;} /* header */ #header {position:absolute; width:100%; height:105px; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; z-index: 10;} #header .inner {height:100%; max-width: none; margin:0 auto; display: flex; flex-wrap: nowrap; align-items: center;justify-content: space-between;} #header .logo {width:248px;} #header .logo a {display: inline-block; width:248px; height:72px; background:url('/images/common/logo.png') center no-repeat;} #header .logo_fix {flex:0 0 10%; max-width:10%; display: none;} #header #gnb {display: flex; flex:auto;} #header #gnb .depth1 > li > a {color:#000;} /* 헤더 색상 변경 - 슬라이드에 따라 변경 */ #header.main1 #gnb .depth1 > li > a {color:#fff;} #header.main1 .m_view:after, #header.main1 .m_view:before, #header.main1 .m_view span {background-color: #fff;} /* 헤더 색상 변경 - fixed 변경 */ #header.is-fixed {position: fixed !important; background:#fff; border-bottom:1px solid #e6e9ee; height:90px;} #header.is-fixed .logo a {width:210px; background-size:contain;} #header.is-fixed #gnb .depth1 > li > a {color:#000;} #header.is-fixed .m_view:after, #header.is-fixed .m_view:before, #header.is-fixed .m_view span {background-color: #000;} /* GNB 메뉴 오버 */ .subPage #header.active {position: relative !important;} #header.active {position: fixed !important; background:#fff; border-bottom:1px solid #e6e9ee; height:90px;} /*#header.active .logo a {width:210px; background-size:contain;}*/ #header.active #gnb .depth1 > li.active > a {color:#00a9bb !important;} #header.active #gnb .depth1 > li > a {color:#000 !important;} #header.active .m_view:after, #header.active .m_view:before, #header.active .m_view span {background-color: #000;} #gnb .depth1 {display: flex; width:100%; flex-wrap: nowrap;justify-content:center;align-items:center;} #gnb .depth1 > li {text-align: center;} #gnb .depth1 > li > a {position: relative; color:#fff; font-size:1.38em; cursor: pointer; padding:20px 32px 5px 32px;} #gnb .depth1 > li > a::after {content: ''; display: inline-block; width:9px; height:8px; background:url('/images/common/icon_gnb_over.png') center no-repeat; position: absolute; bottom:-15px; left:50%; opacity: 0; visibility: hidden; transition: all .5s ease; -webkit-transition: all .5s ease; -zzmoz-transition: all .5s ease; } #gnb .depth1 > li.active:hover > a::after {opacity: 1; visibility: visible;} #gnb .depth1 > li .depth2 {position:absolute; bottom:-60px; border-radius: 10px; background:#00a9bb; display: flex; overflow: hidden; opacity: 0; visibility: hidden; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; } #gnb .depth1 > li.active .depth2 {opacity: 1; visibility:visible; z-index: 999} #gnb .depth1 > li .depth2 li {padding:2px;} #gnb .depth1 > li .depth2 li a {display: inline-block; color:#b8f2f4; font-size:1.25em; padding:16px 23px; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; } #gnb .depth1 > li .depth2 li a:hover {color:#fff; opacity: 1;} #gnb .depth1 > li:nth-child(1) .depth2 {left:13%;} #gnb .depth1 > li:nth-child(3) .depth2 {left:23%;} #gnb .depth1 > li:nth-child(4) .depth2 {left:30%;} #gnb .depth1 > li:nth-child(5) .depth2 {left:40%;} #gnb .logo_m {display: none;} #gnb .close_m {display: none;} #gnb .top_menu {position: relative; left:-30px; flex: 0 0 auto; } #gnb .top_menu ul {display: flex; flex:auto; border-radius: 20px; overflow: hidden; align-items: center;} #gnb .top_menu ul > li:first-child {position: relative; left:30px; background:#00a9bb; padding:0 19px; border-radius:20px;} #gnb .top_menu ul > li:first-child a {color:#fff; font-size:1.38em; } #gnb .top_menu ul > li:nth-child(2) {padding-left:48px;} #gnb .top_menu ul > li {height:38px; line-height:38px; background:#fff; padding:0 20px;} #gnb .top_menu ul > li a {color:#5a5a5a;} #header .m_view {display: block; width:36px; height:40px; position: relative; cursor: pointer; } #header .m_view:after, #header .m_view:before, #header .m_view span {position: absolute; top: 49%; right:0; width: 36px; height: 2px; background-color: #000;} #header .m_view:after, #header .m_view:before { content: "";} #header .m_view:before {margin-top: -9px;} #header .m_view:after {margin-top: 7px;} #header .m_view span {margin: -1px 0 0 -9px; text-indent: -9999px; display: block;} /* 햄버거 오픈 - 사이트맵 */ #m_gnb {position: fixed; top:0; right:-100%; height:100%; width: 100%; background:url('/images/common/bg_sitemap.jpg') ; overflow-y: scroll; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; z-index: 2;} #m_gnb.active {right:0px;} #m_gnb .right_area {position: absolute; right: 0; top: 0; width: 6%; max-width: 200px; height: 100%; border-left: 1px solid #dcdfe3; text-align: center; display: flex; justify-content: center; padding-top:30px;} #m_gnb .right_area .close_m {position: relative; display:block; width:28px;height:29px;cursor: pointer; background:url('/images/common/mgnb_close.png') center no-repeat; background-size:cover; text-indent: -9999px; z-index: 999;} #m_gnb .right_area::after {content: url('/images/common/logo_sitemap.png'); position:absolute; left: 50%; top: 40%; transform: translate(-50%, -20%);} #m_gnb .gnb_wrap { } #m_gnb .gnb_wrap .depth1 {display: flex; align-items: stretch; flex-wrap: wrap; max-width: 1600px; position: absolute; transform: translate(-50%, 0); left: 50%; width: 100%; height: 100%;} #m_gnb .gnb_wrap .depth1 > li {border-left:1px solid #e6e9ee; position: relative; flex:1 1 33.333%; padding-left:20px;} #m_gnb .gnb_wrap .depth1 > li:nth-child(-n+3) {padding-top:30px;} #m_gnb .gnb_wrap .depth1 > li > a {display: block; font-size:1.28em; font-weight: 700; color:#000; padding:20px 0;} #m_gnb .gnb_wrap .depth2 {display: block; padding:20px 0; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; } #m_gnb .gnb_wrap .depth2 a {position: relative; font-size:1em; color:#444444; line-height: 1.71em;} #m_gnb .gnb_wrap .depth2 a:hover {color:#02a9bc;} #m_gnb .channel {display: none; } .m_overlay {position: fixed; top:0; left:0; width:100%; height:100%; background:#1f2431; opacity:0; visibility: hidden; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease;} .m_overlay.active {opacity: .5; visibility: visible;} /* footer */ #footer {padding:93px 0;} #footer .inner {max-width: 1800px;} #footer .logo {display: inline-block; width:193px; height:56px; background:url('/images/common/logo.png') center no-repeat; background-size: cover; margin-right:60px;} .subPage #footer {border-top:1px solid #dedede;} #footer .area_top {margin:0 0 50px 0;} #footer .area_top > div {display: flex; align-items: flex-end;} #footer .area_top > div a {color:#57575b; font-size:1.25em; padding-bottom:5px;} #footer .area_top > div b a {font-weight: 700; margin-right:25px;} #footer .sns_wrap {position: absolute; right:20px; top:6px;} #footer .sns_wrap > ul {display: flex; gap:13px;} #footer .area_mid {margin:0 0 60px 0;} #footer .area_mid > ul {display: flex; gap:23px;} #footer .area_mid > ul > li {flex: 1 1 ; border:1px solid #dedede; border-radius: 5px; padding:20px; color:#a4a4a4; font-weight: 400;} #footer .area_mid h5 {color:#57575b; font-size:16px; font-weight: 400; margin-bottom:10px;} #footer .area_mid span {display: block; letter-spacing:-.082em;} #footer .area_bot {} #footer .area_bot > ul {display: flex; margin-bottom:10px;} #footer .area_bot > ul > li {font-size:1.25em; color:#a4a4a4; font-weight: 400;} #footer .area_bot > ul > li::after {content: '/'; display: inline-block; margin:0 10px; vertical-align: middle;} #footer .area_bot > ul > li:last-child::after {display: none;} #footer .area_bot > div {font-size:0.88em; font-weight: 400; color:#a4a4a4;} /* 메인 비주얼 */ .m_visual {position: relative; width:100%; background-size: cover; z-index: 1;} .m_visual .inner {display: flex; width: 100%; max-width: 1840px; justify-content: flex-end; margin: 0 auto; align-items: flex-start; flex-direction: column; word-break: keep-all;} .m_visual .swiper {flex-shrink: 0; width: 100%; max-height:970px; position: relative; transition-property: transform;} .m_visual .img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; background-position: center; background-size: cover;} .m_visual .swiper .swiper-button-prev {background:none; display: inline-block; width:52px; height:52px; line-height:52px; text-align: center; color:#fff; left:100px;} .m_visual .swiper .swiper-button-next {background:none; display: inline-block; width:52px; height:52px; line-height:52px; text-align: center; color:#fff; right:100px;} .m_visual .swiper-slide img {width:100%; max-width: none} .m_visual .txt_wrap {position: absolute; bottom: 6vw; left: calc(4vw + 140px);} .m_visual .txt_wrap ul {display: flex; } .m_visual .txt_wrap ul > li {position: relative; background:#f6f6f6; border-radius: 100%; width:12vw; text-align: center;} .m_visual .txt_wrap ul > li:nth-child(2) {left:-10px;} .m_visual .txt_wrap ul > li:nth-child(3) {left:-20px;} .m_visual .txt_wrap ul > li::before {content: ""; display: block; padding-top:12vw;} .m_visual .txt_wrap ul > li > div {position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); width:100%;} .m_visual .txt_wrap ul > li > div span {font-size:1.25vw; letter-spacing: -.075em;} .m_visual .txt_wrap ul > li > div span.num {font-size:2.24vw; font-weight: 700;} .m_visual .txt_wrap ul > li > div b {font-size:1.7vw; font-weight: 400;} .m_visual .txt_wrap ul > li > div b::after {content: ''; display: inline-block; width:1vw; height:1vw; background:url('/images/main/mv_icon.png') no-repeat; background-size:cover; margin-left: 5px; top: -3px; position: relative;} /* m_spot 01 */ #m_01 {position: relative; width:100%; height:100vh; background:url("/images/main/bg_mspot_01.jpg") center no-repeat; background-size: cover;} #m_01 .inner {height:100%;} #m_01 .text_wrap {position: absolute; top:50%; left:132px; transform: translate(0, -50%); color:#fff;} #m_01 .text_wrap h3 {font-size:4.38em; display: block; margin-bottom:80px; font-weight: 400;} #m_01 .text_wrap h3::after {content: ''; display: inline-block; width:49px; height:89px; background:url("/images/main/icon_mspot_01.png") center no-repeat; vertical-align: middle; margin-left:18px;} #m_01 .text_wrap p {font-size:2em; display: block; line-height: 1.50em; word-break: keep-all;} /* m_spot 02 member */ #m_02 {background:#f2f6f8;} #m_02 .swiper-pagination {display: none;} #m_02 .tit {display: block; width:100%; text-align: center; margin:150px 0 0 0;} #m_02 .tit h3 {font-size:3.75em; font-weight: 400; margin-bottom:15px; word-break: keep-all;} #m_02 .tit span {font-size:1.75em; font-weight: 400; color:#57575b; word-break: keep-all;} #m_02 .swiper {background:url('/images/main/bg_member.png') 41% 26% no-repeat; padding-top:100px;} #m_02 .swiper-wrapper {align-items: flex-end;} #m_02 .swiper-slide {display: flex; flex-direction: column; justify-content: center; align-items: center;width: fit-content; width:20%;} #m_02 .swiper-slide-active {width: 30% !important; height:600px;} #m_02 .swiper-slide .text_wrap {display: none; position: absolute; right:-270px; top:0;} #m_02 .swiper-slide .text_wrap h4 {font-size:3.13em; color:#000000; font-weight: 400;} #m_02 .swiper-slide .text_wrap span {font-size:1.5em; color:#00a9bb; font-weight: 400; display: inline-block; margin-bottom:50px} #m_02 .swiper-slide .text_wrap li {font-size:1.5em; color:#57575b; line-height: 1.50em;} #m_02 .swiper-slide-active .text_wrap {display: block;} #m_02 .swiper-slide .img_wrap {width:54%; text-align: center} #m_02 .swiper-slide-active .img_wrap {width:100%} #m_02 .swiper-button-prev {left:15%; background:none;} #m_02 .swiper-button-next {right:15%; background:none;} #m_02 .btn_wrap {display: block;} #m_02 .btn_wrap a {display: inline-block; border:1px solid #1c1c1c; color:#000; border-radius: 20px; padding:7px 20px; margin-top:20px;} /* m_spot 03 brand */ #m_03 {background:url('/images/main/bg_brand.jpg') center no-repeat; background-size:cover; padding:280px 0 190px 0;} #m_03 .inner {max-width: 1800px;} #m_03 .top {display: flex; color:#fff; margin-bottom:160px;} #m_03 .top h3 {flex:0 0 50%; font-size:4.375em; font-weight: 400; line-height: 1.2em;} #m_03 .top h3 span {display: block; margin-left:140px;} #m_03 .top p {flex:0 0 50%; font-size:2em; line-height: 1.5em;} #m_03 .brand {} #m_03 .brand > ul {display: flex; justify-content: space-between; align-items: center; background:url('/images/main/bg_brand_logo.png') repeat-x; padding:67px 0;} #m_03 .brand > ul > li {flex:auto; text-align: center} /*#m_03 .brand > ul > li:nth-child(3) {padding-top:20px;}*/ #m_04 {padding:200px 0 225px 0;} #m_04 .inner {max-width: 1800px;} #m_04 .top h3 {font-size:4.375em; font-weight: 400; line-height: 1.2em; display: block; padding-bottom:175px; border-bottom:1px solid #000; margin-bottom:90px;} #m_04 .bt p {font-size:2em; line-height: 1.5em; width:100%; text-align: right; padding-right:100px;} #m_04 .bt ul {display: flex; gap:3px; margin-top:90px;} #m_brand {background:#f6f6f6;} #m_brand .inner {max-width: 1800px;} #m_brand .tit {display: block; width:100%; text-align: center; margin:150px 0 100px 0;} #m_brand .tit h3 {font-size:3.75em; font-weight: 400; margin-bottom:15px; word-break: keep-all;} #m_brand .tit span {font-size:1.75em; font-weight: 400; color:#57575b; word-break: keep-all;} #m_brand .tabs {display: flex; width:100%; border-right:1px solid #e3e3e3; -webkit-box-shadow: 11px 11px 27px 0px rgba(134,148,170,0.23); -moz-box-shadow: 11px 11px 27px 0px rgba(134,148,170,0.23); box-shadow: 11px 11px 27px 0px rgba(134,148,170,0.23); margin-bottom:58px;} #m_brand .tabs > li {flex:0 0 16.666%; background:#fff; border:1px solid #e3e3e3; border-right: none; cursor: pointer; text-align: center; height:80px; line-height: 80px; display: flex; align-items: center; justify-content: center; overflow: hidden;} #m_brand .tabs > li.active {border:5px solid #00a9bb;} #m_brand .tabs > li img {width: 80%;} #m_brand .tab_content .item_wrap {display: flex; justify-content: space-between; gap:20px;} #m_brand .tab_content .item {flex: 1 1 calc(50% - 20px); display: flex; gap:20px;} #m_brand .tab_content .item:last-child {justify-content: flex-end} #m_brand .tab_content .item .img_wrap {flex:0 0 300px;} #m_brand .tab_content .item img {width:100%; height:100% !important;} #m_brand .tab_content .text_wrap {width: 100%;} #m_brand .tab_content table {background:#fff; border:1px solid #e4e4e4; width:100%; height:calc(100% - 85px);} #m_brand .tab_content table tr {border-bottom:1px solid #e4e4e4;} #m_brand .tab_content table th {text-align: left; font-weight: 500; padding:15px 20px; color:#000; font-size:1.625em;} #m_brand .tab_content table td {padding:15px 20px; vertical-align: top; color:#57575b; font-size:1.375em;} #m_brand .tab_content table td > div {color:#000; margin-bottom:10px;} #m_brand .tab_content .btn {width:100%;} #m_brand .tab_content .btn button {display: block; width:100%; background:#00a9bb; color:#fff; text-align: center; border-radius: 30px; margin-top:25px; font-size:1.375em; padding:16px 0;} #m_brand .tab_btn {margin-top:40px; padding-bottom:130px; display: flex; justify-content: flex-end;} #m_brand .tab_btn > div {width:50px; height:50px; border:1px solid #cacaca; background:#fff; display: flex; align-items: center; justify-content: center; background:#fff; cursor: pointer;} #m_brand .tab_btn .tab_prev {border-right:none;} #m_brand .tab_btn .tab_next {} /* 실버케어 */ #m_05 {height: 100vh;} #m_05 .item_wrap {display: flex; width:100%; height: 100vh;} #m_05 .item_wrap .item {position: relative; width:20%; color:#fff; padding:100px 0 0 80px; cursor: pointer;} #m_05 .item_wrap .item::before {content: ''; position: absolute; top:0; left:0; width:100%; height:100%;background:rgba(19,32,45,.5); } #m_05 .item_wrap .item.active::before {display: none;} #m_05 .item_wrap .item .top {position: relative; z-index: 9; margin-bottom:70px; display: inline-block;} #m_05 .item_wrap .kids.active .top::after {content:''; background: url('/images/main/icon_kids.png') no-repeat; display: inline-block; width:168px; height:168px; position: absolute; top: 0; right: -200px;} #m_05 .item_wrap .item .top h3 {font-size:2.5em; font-weight: 400;} #m_05 .item_wrap .item.active .top h3 {font-size:3.125em;} #m_05 .item_wrap .item .top span {font-size:2.5em; font-weight: 700;} #m_05 .item_wrap .item.active .top span {position: relative; font-size:8.125em; font-weight: 800; letter-spacing: -.06em;} #m_05 .item_wrap .silver {background:url('/images/main/img_m05_01.jpg') right no-repeat; background-size:cover;} #m_05 .item_wrap .kids {background:url('/images/main/img_m05_02.jpg') right no-repeat; background-size:cover;} #m_05 .item_wrap .reset {background:url('/images/main/img_m05_03.jpg') right no-repeat; background-size:cover;} #m_05 .item_wrap .item.active {width:60%; position: relative; opacity: 1;} #m_05 .item_wrap .item .text_wrap {opacity: 0; position: relative;z-index: 9;} #m_05 .item_wrap .item.active .text_wrap {opacity: 1;} #m_05 .item_wrap .item.active .text_wrap p {font-size:1.75em;} #m_05 .item_wrap .item button {opacity: 0;} #m_05 .item_wrap .item.active button {position: relative; display: inline-block; background:#00a9bb; color:#fff;padding:15px 77px 15px 20px; font-size:1.375em; margin-top:58px; border-radius: 40px; z-index: 9; opacity: 1;} #m_05 .item_wrap .item.active button::after {content:''; background:url(/images/main/icon_care_btn.png) no-repeat; width:20px; height:20px; position: absolute; right:20px; top:16px;} #m_05 .item_wrap .item .mask_bg {position: absolute; top:0; left:0; width:100%; height:100%; background: rgb(0,93,103); background: linear-gradient(156deg, rgba(0,93,103,1) 0%, rgba(0,93,103,0) 42%);} #m_05 .item_wrap .item.active .mask_bg {opacity: 1;} #m_06 {position: relative; background:#effafb; padding:145px 0; display: flex; align-items: center; width:100%;} #m_06 .inner {max-width: 880px;} #m_06::after {content: ''; display: inline-block; width:380px; height:528px; background:url('/images/main/icon_center.png') no-repeat; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-size:contain;} #m_06 .lft_area {flex:50%;} #m_06 .lft_area h3 {font-size:3.75em; font-weight: 400; margin-bottom:96px; letter-spacing: -.08em;} #m_06 .lft_area .con {position: relative; padding:82px 0 90px 0;} #m_06 .lft_area .con::after {content: ''; display: block; width:100%; height:100%; background:#00a9bb; position: absolute; top: 0; left: -50%; width: 100vw; margin-left: calc(-50vw + 50%); z-index: 0;} #m_06 .lft_area .con > * {position: relative; z-index: 1; color:#fff;} #m_06 .lft_area .con span {font-size:3.125em; display: inline-block; margin-bottom:18px; position: relative;} #m_06 .lft_area .con span::after {content: ''; display: inline-block; width:113px; height:127px; background:url('/images/main/icon_center_01.png') no-repeat; background-size:contain; position: absolute; bottom:0; right: -120px;} #m_06 .lft_area .con p {font-size:2em;} #m_06 .lft_area .img {width:100%; text-align: center; max-width: 200px; margin: 0 auto;} #m_06 .rgh_area {flex:50%;display: flex; flex-direction: column; gap:45px; background:#485462; padding:145px 0 150px 12%;} #m_06 .rgh_area .con {display: flex; gap:20px; align-items: flex-start; gap:20px;} #m_06 .rgh_area .txt span {position: relative; display: block; border:1px solid #7c8794; border-radius: 20px; color:#fff; padding:20px 25px; font-size:1.875em; line-height:1.33em;} #m_06 .rgh_area .txt span::before {content: ''; display: inline-block; width:52px; height:52px; background:url('/images/main/icon_center_02.png') center no-repeat #485462; position: absolute; top:-26px; left:-26px;} #m_06 .rgh_area .txt span::after {content: ''; display: inline-block; width:52px; height:52px; background:url('/images/main/icon_center_03.png') center no-repeat #485462; position: absolute; bottom:-26px; right:-26px;} #m_06 .rgh_area .txt p {color:#c2c7ce; font-size:1.375em; line-height: 1.36em; font-weight: 400; display: block; margin-top:20px;} #m_07 {} #m_07 .inner {max-width: 1800px;} #m_07 .top {} #m_07 .item_wrap {display: flex; width:100%; align-items: center; } #m_07 .item_wrap > * {flex:0 0 50%; width: 50%;;} #m_07 .item_wrap:nth-child(2n) {flex-direction: row-reverse;} #m_07 .item_wrap .txt_wrap {position:relative;} #m_07 .item_wrap .txt_wrap > div {position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); width:70%;} #m_07 .item_wrap .txt_wrap h4 {color:#009dae; font-size:3.05em; line-height: 1.23em; font-weight: 700; letter-spacing: -.085em;} #m_07 .item_wrap .txt_wrap p {color:#57575b; font-size:1.65em; display: block; margin-top:50px; letter-spacing: -.095em; line-height: 1.57em; word-break: keep-all;} #m_07 .banner > ul {display: flex; width:100%; justify-content: space-between; margin-top:100px;} #m_07 .swiper-button-prev, #m_07 .swiper-button-next {display: none;} #m_07 .swiper-pagination {display: none;} #m_08 {background:url('/images/main/bg_m08.jpg') center no-repeat; background-size:cover; padding:160px 0 190px 0; margin-top:120px;} #m_08 .inner {max-width: 1800px;} #m_08 h3 {font-size:3.75em; font-weight:600; margin-bottom:15px; word-break: keep-all; display: block; width:100%; text-align: center; color:#6bcdd7 ; margin-bottom:63px;} #m_08 .tab_wrap {display: flex;} #m_08 .tab_wrap .m_scroll {flex:0 0 auto;} #m_08 .tab_wrap .tabs {position: relative; width:205px; z-index: 1;} #m_08 .tab_wrap .tabs li {position: relative; font-size:1.75em; color:#fff; padding:25px 0; border-bottom:1px solid rgba(255, 255, 255, 0.2); padding-left:14px; cursor: pointer;} #m_08 .tab_wrap .tabs li a {color:#fff;} #m_08 .tab_wrap .notab {position: relative;font-size:1.75em; color:#fff; padding:25px 0; border-bottom:1px solid rgba(255, 255, 255, 0.2); padding-left:14px; cursor: pointer; z-index: 1;} #m_08 .tab_wrap .notab::before {content: ''; display:block; width:0%; height:100%; position: absolute; left:0; top:0; background: linear-gradient(135deg, #01a9bb 0%,#6bcdd7 100%); z-index: -1; opacity: 0;-webkit-transition: all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out -o-transition:all 0.3s ease-in-out; transition::all 0.3s ease-in-out;} /*#m_08 .tab_wrap .notab:hover::before {width:120%; opacity: 1;}*/ #m_08 .tab_wrap .tabs li::before {content: ''; display:block; width:0%; height:100%; position: absolute; left:0; top:0; background: linear-gradient(135deg, #01a9bb 0%,#6bcdd7 100%); z-index: -1; opacity: 0;-webkit-transition: all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out -o-transition:all 0.3s ease-in-out; transition::all 0.3s ease-in-out;} #m_08 .tab_wrap .tabs li.active::before {width:120%; opacity: 1;} #m_08 .tab_wrap .tab_content {flex:1 1 auto; display: flex; gap:30px; z-index: -1;} #m_08 .tab_wrap .tab_content > * {flex:1 1 50%;} #m_08 .tab_wrap .img_wrap {overflow: hidden; width:770px} #m_08 .tab_wrap .img_wrap .slider {width:770px; display: block; box-sizing: border-box;} #m_08 .tab_wrap .img_wrap .slick-track {display: flex;margin:auto;} #m_08 .tab_wrap .img_wrap .slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0; z-index: 8;} #m_08 .tab_wrap .img_wrap img {width:100%;} #m_08 .tab_wrap .txt_wrap {font-size:1.75em; color:#fff; padding:10px 0 0 10px;} #m_08 .tab_wrap .txt_wrap h4 {font-size:31px; font-weight: 400; display: inline-block; margin-bottom:20px;} #m_08 .tab_wrap .txt_wrap li {position: relative; padding:22px 0 22px 55px;} #m_08 .tab_wrap .txt_wrap li span {display: inline-block; margin-right:10px;} #m_08 .tab_wrap .txt_wrap i {display: inline-block; width:48px; height:48px; line-height:49px; text-align: center; font-style: normal; border-radius: 100%; position: absolute; left:0; top:15px; vertical-align: middle;} #m_08 .tab_wrap .txt_wrap .two {padding:22px 0;} #m_08 .tab_wrap .txt_wrap .two i {position: relative; top:0; margin-right:5px;} #m_08 .tab_wrap .txt_wrap i.loca {background:url('/images/main/icon_loca.png') center no-repeat #00a9bb; } #m_08 .tab_wrap .txt_wrap i.park {background:url('/images/main/icon_park.png') center no-repeat #00a9bb; } #m_08 .tab_wrap .txt_wrap i.tel {background:url('/images/main/icon_tel.png') center no-repeat #00a9bb; } #m_08 .tab_wrap .txt_wrap i.staK {background:#697215; } #m_08 .tab_wrap .txt_wrap i.staG {background:#02a94e; } #m_08 .tab_wrap .txt_wrap i.staP {background:#8f0b71; } #m_08 .tab_wrap .txt_wrap i.staO {background:#ef7d1e; } #m_08 .tab_wrap .txt_wrap i.staB {background:#273992; } #m_08 .tab_wrap .txt_wrap i.staB2 {background:#ac4e0b; } #m_08 .tab_wrap .txt_wrap i.out {background:#eee74d; color:#0b1c40; border:2px solid #0b1c40; width:40px; height:40px; line-height: 38px; position: relative; left:auto; top:-3px; margin-right:6px;} #m_08 .tab_wrap .txt_wrap .txt_yel {font-weight: 700;} #m_08 .tab_wrap .txt_wrap .btn {margin-top:40px;} #m_08 .tab_wrap .txt_wrap .btn a.call {width: 100%; background: #0b1c40; border-radius: 30px; text-align: center; color: #fff; font-size: 1em; padding: 15px 0; margin-bottom:10px;} #m_08 .tab_wrap .txt_wrap .btn a.info {display: inline-block; width: 100%; max-width: 434px; background: #00a9bb; border-radius: 30px; text-align: center; color: #fff; font-size: 1em; padding: 15px 0;} #m_08 #tab0801:after {content:url('/images/main/icon_subway01.png'); display: inline-block; width:145px; height:609px; position: absolute; right:120px; bottom:0; } #m_08 #tab0802:after {content:url('/images/main/icon_subway02.png'); display: inline-block; width:145px; height:609px; position: absolute; right:120px; bottom:0; } #m_08 #tab0803:after {content:url('/images/main/icon_subway03.png'); display: inline-block; width:145px; height:609px; position: absolute; right:120px; bottom:0; } #m_08 #tab0804:after {content:url('/images/main/icon_subway04.png'); display: inline-block; width:145px; height:609px; position: absolute; right:120px; bottom:0; } #m_08 #tab0805:after {content:url('/images/main/icon_subway05.png'); display: inline-block; width:145px; height:609px; position: absolute; right:120px; bottom:0; } #m_08 .slide-btn-prev {position: absolute; top:50%; background:rgba(0, 0, 0, 0.5); display: inline-block; width:52px; height:52px; line-height:52px; text-align: center; color:#fff; left:20px; z-index: 9; cursor: pointer;} #m_08 .slide-btn-next {position: absolute; top:50%; background:rgba(0, 0, 0, 0.5); display: inline-block; width:52px; height:52px; line-height:52px; text-align: center; color:#fff; right:20px; z-index: 9; cursor: pointer;} #m_08 .slideCount {position: absolute; display: inline-block; background:rgba(0, 0, 0, 0.5); border-radius: 20px; width: auto; padding: 5px 10px; left: 50%; bottom:10px; transform: translate(-50%, 0); color:#fff; font-weight: 400; z-index: 999;} #m_09 {padding:170px 0 190px 0;} #m_09 .inner {max-width: 1800px; display: flex; gap:50px;} #m_09 .lft_area {flex:1 1 50%;} #m_09 .lft_area .top {display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid #000000; padding-bottom:30px;} #m_09 .lft_area h3 {font-size:3.75em; font-weight: 400;} #m_09 .lft_area button {border:1px solid #dbdbdb; display: inline-block; width:59px; height:59px;} #m_09 .lft_area ul {} #m_09 .lft_area ul > li {padding:20px 0; border-bottom:1px solid #e8e8e8;} #m_09 .lft_area ul > li a {display: flex; width:100%; align-items: center;} #m_09 .lft_area ul > li .date {display: flex; flex-direction: column; align-items: center; padding:0 30px;} #m_09 .lft_area ul > li .date b {font-size:1.43em; color:#57575b; font-weight: 600;} #m_09 .lft_area ul > li .date span {color: #929294; font-weight: 300;} #m_09 .lft_area ul > li .tit {font-size:1.625em; color:#000;} #m_09 .rgh_area {flex:1 1 50%;} #m_09 .rgh_area ul {display: flex; gap:50px; height:100%;} #m_09 .rgh_area ul > li {flex:1 1 auto; border:1px solid #dbdbdb; text-align: center;} #m_09 .rgh_area ul > li a {color:#000;} #m_09 .rgh_area ul > li h3 {font-size:2.625em; font-weight: 400; margin:30px 0 30px 0;} #m_09 .rgh_area p {font-size:1.5em; color:#57575b; line-height: 1.66em;} #m_09 .rgh_area dl {font-size:1.5em; color:#009dae; line-height: 1.66em;} #m_09 .rgh_area .coun {position: relative; padding-top: 90px;} #m_09 .rgh_area .coun::before {content: ''; width:117px; height:96px; display: inline-block; background:url('/images/main/icon_notice_01.png') center no-repeat;} #m_09 .rgh_area .time {position: relative; padding-top: 90px;} #m_09 .rgh_area .time::before {content: ''; width:96px; height:96px; display: inline-block; background:url('/images/main/icon_notice_02.png') center no-repeat;} #m_10 {background:url('/images/main/bg_m10.jpg') center no-repeat; background-size:cover; padding:160px 0 190px 0; margin-top:120px;} #m_10 .inner {max-width: 1800px;} #m_10 h3 {font-size:3.75em; font-weight: 400; color:#fff; text-align: center; display: block; margin-bottom:60px;} #m_10 .form_wrap {max-width: 1300px; margin:0 auto;} #m_10 .form_wrap .row:first-child {z-index: 2;} #m_10 .form_wrap .row:nth-child(2) {z-index: 1;} #m_10 .form_wrap .row {display: flex; justify-content: space-between; gap:35px; margin-bottom:20px; position: relative;} #m_10 .item {display: flex; align-items: center; width:100%;} #m_10 .item > span {color:#fff; font-size:1.5em; font-weight: 400; display: inline-block; width:90px; flex:0 0 90px; } #m_10 .item > div {width: 100%;} #m_10 .item input[type=text]::placeholder {color:#dfdfdf;} #m_10 .item input[type=text], #m_10 .item input[type=date] {width:100%; border:1px solid rgba(255, 255, 255, 0.5); border-radius: 5px; background:rgba(72, 84, 98, 0.5); color:#fff; height:65px; font-size:1.5em; font-weight: 400;} #m_10 .item input[type=date]::-webkit-calendar-picker-indicator {filter: invert(1);} #m_10 .item textarea {border:1px solid rgba(255, 255, 255, 0.5); border-radius: 5px; background:rgba(72, 84, 98, 0.5); color:#fff; width:100%; height:169px; resize: none; padding:20px;font-size:1.5em; font-weight: 400;} #m_10 .item textarea::placeholder {color:#dfdfdf; } #m_10 .btn button {display: inline-block; background:#00a9bb; color:#fff; font-size:1.5em; padding:20px 89px; border-radius: 35px; margin:0 auto;} #m_10 .row .agree_item {padding-left:90px;} #m_10 .row .txt {display: inline-block; font-size:1.375em; color:#c5cad0;} #m_10 .row .txt a {color:#fff; text-decoration: underline; margin-left:10px;} #m_10 .row .txt b {font-weight: 400;} .selectBox2 * { box-sizing: border-box; } .selectBox2 {position: relative; height: 65px; border-radius: 4px; border: 1px solid #fff; cursor: pointer; color:#dfdfdf;} .selectBox2::after {content:url('/images/main/icon_down.png'); position: absolute; right:17px; top:20px;} .selectBox2 .label {display: flex; align-items: center; width: inherit; height: inherit; border: 0 none; outline: 0 none; padding-left: 15px; background:rgba(72, 84, 98, 0.5); cursor: pointer; color:#dfdfdf; width:100%; font-size:1.5em; font-weight: 400;} .selectBox2 .optionList { position: absolute; top:64px; left: 0; width: 100%; background:rgba(255, 255, 255, 1); color: #2d3351; list-style-type: none; padding: 0; overflow: hidden; max-height: 0; transition: .3s ease-in; font-size:1.5em; border-radius: 0 0 5px 5px; z-index: 9;} .selectBox2.active .optionList { max-height: 500px;} .selectBox2 .optionItem {padding: 10px 15px 10px; transition: .1s;} .selectBox2 .optionItem:last-child { border-bottom: 0 none;} .selectBox2 .optionItem:hover {background:rgba(65, 85, 109, 0.5); color:#fff;} .selectBox2 .optionList::-webkit-scrollbar {width: 6px;} .selectBox2 .optionList::-webkit-scrollbar-track {background: transparent; } .selectBox2 .optionList::-webkit-scrollbar-thumb {background: #303030; border-radius: 45px;} .selectBox2 .optionList::-webkit-scrollbar-thumb:hover {background: #303030;} .swiper .swiper-pagination {display: inline-block; background:rgba(0, 0, 0, 0.5); border-radius: 20px; width: auto; padding: 5px 10px; left: 50%; transform: translate(-50%, 0); color:#fff; font-weight: 400; } .swiper .swiper-pagination-current {font-weight: 700;} .swiper .swiper-button-prev {background:rgba(0, 0, 0, 0.5); display: inline-block; width:52px; height:52px; line-height:52px; text-align: center; color:#fff; left:20px; z-index: 6} .swiper .swiper-button-next {background:rgba(0, 0, 0, 0.5); display: inline-block; width:52px; height:52px; line-height:52px; text-align: center; color:#fff; right:20px; z-index: 6} /* 퀵메뉴 */ .quick_wrap {position: fixed; right:0; top:20%; display: flex; flex-direction: column; align-items: center; z-index: 9;} .quick_wrap.bt-fixed {top:auto; bottom:500px;} .quick_wrap > ul {background:#fff; width:100px;} .quick_wrap > ul > li:nth-child(2) {gap:10px;} .quick_wrap > ul > li:nth-child(2) i {padding-left:9px;} .quick_wrap > ul > li a {color:#444444; font-size:18px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap:20px; border-bottom:1px solid #f0f0f0; padding:20px 0;} .quick_wrap > ul > li:nth-child(5) div.event_pc {font-size:18px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap:10px; border-bottom:1px solid #f0f0f0; padding:20px 0;} .quick_wrap > ul > li:nth-child(5) div.event_m {display: none;} .quick_wrap .gotop a {display: flex; align-items: center; justify-content: center;width:63px; height:63px; background:#c2ecf0; border-radius: 100%; margin-top:15px;} /* 서브비주얼 */ .sub11 {background:url("/images/common/sub_visual0101.jpg") center no-repeat; background-size: cover;} .sub12 {background:url("/images/common/sub_visual0102.jpg") center no-repeat; background-size: cover;} .sub13 {background:url("/images/common/sub_visual0103.jpg") center no-repeat; background-size: cover;} .sub14 {background:url("/images/common/sub_visual0104.jpg") center no-repeat; background-size: cover;} .sub15 {background:url("/images/common/sub_visual0105.jpg") center no-repeat; background-size: cover;} .sub16 {background:url("/images/common/sub_visual0106.jpg") center no-repeat; background-size: cover;} .sub17 {background:url("/images/common/sub_visual0107.jpg") center no-repeat; background-size: cover;} .sub18 {background:url("/images/common/sub_visual0108.jpg") center no-repeat; background-size: cover;} .sub21 {background:url("/images/common/sub_visual0201.jpg") center no-repeat; background-size: cover;} .sub22 {background:url("/images/common/sub_visual0202.jpg") center no-repeat; background-size: cover;} .sub23 {background:url("/images/common/sub_visual0203.jpg") center no-repeat; background-size: cover;} .sub24 {background:url("/images/common/sub_visual0204.jpg") center no-repeat; background-size: cover;} .sub25 {background:url("/images/common/sub_visual0205.jpg") center no-repeat; background-size: cover;} .sub26 {background:url("/images/common/sub_visual0206.jpg") center no-repeat; background-size: cover;} .sub27 {background:url("/images/common/sub_visual0207.jpg") center no-repeat; background-size: cover;} .sub28 {background:url("/images/common/sub_visual0208.jpg") center no-repeat; background-size: cover;} .sub29 {background:url("/images/common/sub_visual0209.jpg") center no-repeat; background-size: cover;} .sub31 {background:url("/images/common/sub_visual0301.jpg") center no-repeat; background-size: cover;} .sub32 {background:url("/images/common/sub_visual0302.jpg") center no-repeat; background-size: cover;} .sub33 {background:url("/images/common/sub_visual0303.jpg") center no-repeat; background-size: cover;} .sub34 {background:url("/images/common/sub_visual0304.jpg") center no-repeat; background-size: cover;} .sub35 {background:url("/images/common/sub_visual0305.jpg") center no-repeat; background-size: cover;} .sub36 {background:url("/images/common/sub_visual0306.jpg") center no-repeat; background-size: cover;} .sub37 {background:url("/images/common/sub_visual0307.jpg") center no-repeat; background-size: cover;} .sub38 {background:url("/images/common/sub_visual0308.jpg") center no-repeat; background-size: cover;} .sub41 {background:url("/images/common/sub_visual0401.jpg") center no-repeat; background-size: cover;} .sub42 {background:url("/images/common/sub_visual0402.jpg") center no-repeat; background-size: cover;} .sub43 {background:url("/images/common/sub_visual0403.jpg") center no-repeat; background-size: cover;} .sub44 {background:url("/images/common/sub_visual0404.jpg") center no-repeat; background-size: cover;} .sub45 {background:url("/images/common/sub_visual0405.jpg") center no-repeat; background-size: cover;} .sub46 {background:url("/images/common/sub_visual0406.jpg") center no-repeat; background-size: cover;} .sub47 {background:url("/images/common/sub_visual0407.jpg") center no-repeat; background-size: cover;} .sub51 {background:url("/images/common/sub_visual0501.jpg") center no-repeat; background-size: cover;} .sub52 {background:url("/images/common/sub_visual0502.jpg") center no-repeat; background-size: cover;} .sub53 {background:url("/images/common/sub_visual0503.jpg") center no-repeat; background-size: cover;} .sub54 {background:url("/images/common/sub_visual0504.jpg") center no-repeat; background-size: cover;} .sub55 {background:url("/images/common/sub_visual0505.jpg") center no-repeat; background-size: cover;} .sub56 {background:url("/images/common/sub_visual0506.jpg") center no-repeat; background-size: cover;} .subPage #header {position: relative;} .subtitle_wrap .sub_tit {width:100%; height:100%; text-align: center; margin-top:95px;} .subtitle_wrap .sub_tit .stit {font-size:4.375em; letter-spacing: -.08em;} .subtitle_wrap .sub_tit .btit {font-size:1.125em; margin-top:10px;} .subtitle_wrap .sub_tit .btit span {color:#00aabe;} #sub_visual {position: relative; width:100%; height:530px; display: block; overflow: hidden; margin-top:90px;} #sub_visual .inner {height:100%;} /* 서브 메뉴 - LNB */ .sublnb_wrap {position: relative; display: block; z-index: 9; clear: both; width:100%; height:100%;} .snav_warp {padding-top:70px; position: relative; display: block;} .snav_warp ul {display: flex; width: 100%; flex-direction: row; align-items: center; justify-content:center; gap:7px;} .snav_warp ul li {display: flex; max-width: 160px; width: 100%; text-align: center; align-items: center; justify-content: center; height: 160px;} .snav_warp ul li a {position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap:10px; width:100%; height:100%; color:#767984; border:1px solid #d6d8e2; font-size:1.25em; } .snav_warp ul li a span {display: block; width:100%; z-index: 2;} .snav_warp ul li.on {} .snav_warp ul li.on a {background:#00a9bb; color:#fff;} .snav_warp ul li.on a::after {content:''; display: inline-block; width: 100%; height:100%; background:url('/images/common/sub_active.png') 90% no-repeat; position: absolute; z-index: 1;} .snav_warp .product {position: relative; display: block; } .snav_warp .product ul li:nth-child(1).on a {background:#005593;} .snav_warp .product ul li:nth-child(2).on a {background:#003161;} .snav_warp .product ul li:nth-child(3).on a {background:#d6012b;} .snav_warp .product ul li:nth-child(4).on a {background:#c5158d;} .snav_warp .product ul li:nth-child(5).on a {background:#0d0d0d;} .snav_warp .product ul li:nth-child(6).on a {background:#8abc3e;} .snav_warp .product ul li:nth-child(-n+6).on a::after {display: none;} .snav_warp .product ul li:nth-child(1) i {display: block; background:url('/images/common/snav_logo01.png') no-repeat; width:124px; height:23px;} .snav_warp .product ul li:nth-child(2) i {display: block; background:url('/images/common/snav_logo02.png') no-repeat; width:109px; height:53px;} .snav_warp .product ul li:nth-child(3) i {display: block; background:url('/images/common/snav_logo03.png') no-repeat; width:101px; height:40px;} .snav_warp .product ul li:nth-child(4) i {display: block; background:url('/images/common/snav_logo04.png') no-repeat; width:106px; height:40px;} .snav_warp .product ul li:nth-child(5) i {display: block; background:url('/images/common/snav_logo05.png') no-repeat; width:110px; height:38px;} .snav_warp .product ul li:nth-child(6) i {display: block; background:url('/images/common/snav_logo06.png') no-repeat; width:105px; height:21px;} .snav_warp .product ul li:nth-child(1).on i {background:url('/images/common/snav_logo01_on.png') no-repeat;} .snav_warp .product ul li:nth-child(2).on i {background:url('/images/common/snav_logo02_on.png') no-repeat;} .snav_warp .product ul li:nth-child(3).on i {background:url('/images/common/snav_logo03_on.png') no-repeat;} .snav_warp .product ul li:nth-child(4).on i {background:url('/images/common/snav_logo04_on.png') no-repeat;} .snav_warp .product ul li:nth-child(5).on i {background:url('/images/common/snav_logo05_on.png') no-repeat;} .snav_warp .product ul li:nth-child(6).on i {background:url('/images/common/snav_logo06_on.png') no-repeat;} .sub_wrap {position: relative; padding:110px 0 150px 0; min-height:600px;} .sub_wrap .inner {max-width: 1540px;} .tab_menu {margin-top:110px;} .tab_menu .inner {max-width: 1540px; } .tab_menu .inner ul {display: flex; flex-wrap: wrap; border-top:1px solid #d6d8e2; border-left:1px solid #d6d8e2; border-bottom:2px solid #00a9bb;} .tab_menu .inner ul > li {flex:0 0 20%; border-right:1px solid #d6d8e2; border-bottom:1px solid #d6d8e2; text-align: center;} /*.tab_menu .inner ul > li:nth-last-child(-n+5) {border-bottom:none;}*/ .tab_menu.four .inner ul > li {flex:0 0 calc(25% - 1px);} .tab_menu.six .inner ul > li {flex:0 0 16.666%;} .tab_menu .inner ul > li a {color:#000000; font-size:1.5em; padding:20px 0; display: block;word-break: keep-all;} .tab_menu .inner ul > li.on a {background: #00a9bb; color:#fff;} #dept3 .inner {margin-top: -119px; padding-top: 120px;} @media screen and (max-width:1640px) { #m_08 #tab0801:after, #m_08 #tab0802:after, #m_08 #tab0803:after, #m_08 #tab0804:after, #m_08 #tab0805:after {width: 45px;} } @media screen and (max-width:1440px) { #header .logo {width:225px;} #gnb .depth1 > li .depth2 li a {padding:16px 4px; font-size:1em;} #gnb .depth1 > li > a {font-size:1em; padding:20px 5px 0 5px;} #gnb .top_menu {left:0;} #gnb .top_menu ul > li {padding:0 10px;} #gnb .top_menu ul > li:first-child a {font-size:1em;} #gnb .top_menu ul > li:nth-child(2) {padding:0 10px 0 40px;} #m_brand .tab_content .item_wrap {flex-direction: column;} #m_07 .item_wrap .txt_wrap h4 {font-size:2.25em;} #m_07 .item_wrap .txt_wrap p {font-size:1.35em;} #m_08 .tab_wrap .tab_content {flex-direction: column;} /* #m_08 .tab_wrap .swiper-container {width:500px;}*/ #m_08 #tab0801:after, #m_08 #tab0802:after, #m_08 #tab0803:after, #m_08 #tab0804:after, #m_08 #tab0805:after {display: none;} } @media screen and (max-width:1024px) { .only-m {display:block;} .only-pc {display:none;} .inner {padding:0 20px;} .m_visual .content {align-items: flex-start; flex-direction: column; padding:10vw 20px 0 20px; justify-content: center;} .m_visual .content .btxt {padding-bottom:20px;} .m_visual .content .stxt {font-size:30px;} .m_visual .content .area_rgh {display: none;} .sub35 {background:url("/images/common/sub_visual0305_m.jpg") center no-repeat; background-size: cover;} #header {position: relative; height:60px;} #header .logo {width: 140px;} #header .logo a, #header.is-fixed .logo a {width:140px; height:41px; background-size: contain;} #header .m_view:after, #header .m_view:before, #header .m_view span {background-color:#21a6b4 !important; width:30px;} #header #gnb {visibility: hidden; position: fixed; left:-100%; top:0; bottom:0; width: 100%; max-width: none; background:#fff; z-index: 9;} #header #gnb.active {left:0; visibility: visible; padding:30px 20px; overflow-y: scroll;} #header #gnb.active .popup_bg {opacity: 1; visibility: visible; background:#fff;} #header .m_top {display: flex; align-items: center;} #header .m_top .reser a {display: block; background:#485462; color:#fff; border-radius: 20px; margin-right:0; padding:5px 10px;} #gnb .depth1 {display: inline-block;} #gnb .depth1 > li {cursor: pointer;padding: 5px 10px;border-bottom:1px solid #f0f0f0; } #gnb .depth1 > li > a {display: block; font-weight: 900; color:#000; font-size: 1.625em; padding:6px 10px 13px 10px;} #gnb .depth1 > li.active > a::before {content: none;} #gnb .depth1 > li .depth2 {position: relative; top:0; width:100% !important; border-radius: 0; left:0 !important; background:none; box-shadow: none;opacity: 0; visibility: hidden; height:0;} #gnb .depth1 > li .depth2 > li {display: block; padding:10px 0;} #gnb .depth1 > li .depth2 > li a {font-weight: 600; color:#000;} #gnb .depth1 > li .depth2::after {content: none;} #gnb .depth1 > li.active .depth2 {opacity: 1; visibility: visible; height: 100%; display: block;} /* 햄버거 오픈 - 모바일 */ #m_gnb.active {right:0px; width: 80%; background:#fff;} #m_gnb .right_area {border-left: none; padding:0; display:inherit} #m_gnb .right_area .close_m {position: absolute;top:21px;right:20px;display:block;width:20px;height:20px;cursor: pointer; background:url('/images/common/mgnb_close_m.png') center no-repeat; background-size:cover; text-indent: -9999px;} #m_gnb .right_area::after {display: none;} #m_gnb .gnb_wrap {margin-top:60px; padding:20px; border-top:1px solid #e6e9ee;} #m_gnb .gnb_wrap .depth1 {display: block; position: relative;} #m_gnb .gnb_wrap .depth1 > li {border-left:none; display: block; border-bottom:1px solid #e6e9ee; position: relative; padding:0 !important;} #m_gnb .gnb_wrap .depth1 > li:last-child {display: none;} #m_gnb .gnb_wrap .depth1 > li > a {display: block; font-size:1.28em; font-weight: 500; color:#000; padding:20px 0;} #m_gnb .gnb_wrap .depth1 > li::after {content: ''; position: absolute; right:10px; top:24px; width:8px; height:12px; background:url('/images/common/icon_mgnb.png') no-repeat; background-size:contain; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; } #m_gnb .gnb_wrap .depth1 > li.active::after {transform: rotate(90deg);} #m_gnb .gnb_wrap .depth2 {display: none; padding:20px 10px; margin-bottom:18px; background:#f6f7f9; } #m_gnb .gnb_wrap .depth1 > li.active .depth2 {display: block;} #m_gnb .gnb_wrap .depth2 a {position: relative; font-size:1em; color:#444444; line-height: 1.71em;} #m_gnb .channel {display: block; } #m_gnb .channel ul {display: flex; gap:5px; margin-top:30px;} #m_gnb .channel ul > li > a {display: inline-block; width:30px; height:30px; border-radius: 100%; border:1px solid #4e4e4e; } #m_gnb .channel ul > li:nth-child(1) > a {background:url('/images/common/m_gnb_kakao.png') center center no-repeat; background-size: 50%;} #m_gnb .channel ul > li:nth-child(2) > a {background:url('/images/common/m_gnb_blog.png') center center no-repeat; background-size: 30%;} #m_gnb .channel ul > li:nth-child(3) > a {background:url('/images/common/m_gnb_youtube.png') center center no-repeat; background-size: 50%;} /* footer */ #footer {padding:30px 0;} #footer .logo {width:142px; height:45px; background-size:contain;} #footer .area_top > div {align-items: flex-start; flex-direction: column;} #footer .area_top .sns_wrap a {width:30px; display: block;} #footer .area_top .link {border-top:1px solid #ececec; border-bottom:1px solid #ececec; padding:15px 20px; margin-top:30px; width: 100vw; margin-left: calc(-50vw + 50%);} #footer .sns_wrap {right:20px;} #footer .area_mid {display: none;} #footer .area_bot > ul {flex-wrap: wrap;} /* 퀵메뉴 */ .subPage .quick_wrap.active {right:10px;} .quick_wrap.bt-fixed {bottom:10px;} /* .subPage .quick_wrap {display: none !important;} */ .quick_wrap {right:10px; top:auto; bottom:10px;} .subPage .quick_wrap {right:-45px;} .quick_wrap > ul {background:none; width:auto;} .quick_wrap > ul > li {margin-bottom:3px;-webkit-box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.11); -moz-box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.11);box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.11); text-align: center;} .quick_wrap > ul > li a {border:none; padding:0; display: block; width:45px; height:45px; text-align: center; border-radius:3px; background:#fff; line-height:1em; padding-top:4px;} .quick_wrap > ul > li a i {border:none; padding:0; border-radius: 100%; } .quick_wrap > ul > li:nth-child(2) i {padding-left:0px;} .quick_wrap > ul > li:nth-child(1) a i img {width:15px;} .quick_wrap > ul > li:nth-child(2) a i img {width:18px;} .quick_wrap > ul > li:nth-child(3) a i img {width:13px;} .quick_wrap > ul > li:nth-child(4) a i img {width:18px;} .quick_wrap > ul > li:nth-child(5) i img {width:18px;} .quick_wrap > ul > li:nth-child(5) div.event_pc {display: none;} .quick_wrap > ul > li:nth-child(5) div.event_m {display: flex; align-items: center; justify-content: center; flex-direction: column; gap:10px; background:#ffe00d; border-radius: 3px; overflow: hidden; widtht:45px; height:45px;line-height:1em; gap:0;} .quick_wrap > ul > li span {font-size:11px;} .quick_wrap .gotop {display: none;} .quick_wrap.active .m_quickOpen {opacity: 0;} .subPage .quick_wrap .m_quickOpen {display: block; width:45px; height:45px; position: absolute; left: -50px; bottom: 0; opacity: 1;-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);} .subPage .quick_wrap .m_quickClose {display: block; width:45px; height:45px;} .quick_wrap .m_quickOpen , .quick_wrap .m_quickClose {display: none} #sub_visual {height:210px; margin-top:25px;} .sub_wrap {padding:60px 0 70px 0; height: 100%;} /* 서브 메뉴 - LNB */ .snav_warp {width:100%; height:100%; z-index: 9999;} .snav_warp .smenu {padding:15px; border:1px solid #d7d9e3; width:100%; height:100%; font-size: 1.25em; z-index: 8; display: block; position:relative; cursor: pointer;} .snav_warp .smenu::after { content: ''; display: block; float: right; position: relative; top: 10px; right: 10px; width: 15px; height: 20px; background: url('/images/common/arrow_snav_m.png') no-repeat; background-size:contain;} .snav_warp ul {display: block; flex-direction: column; position: absolute; z-index:9; border-radius: 10px; overflow: hidden; margin-top:10px; gap:0px; opacity: 0; visibility: hidden; } .snav_warp ul li {background:none; width:100%; max-width: none; height:auto;} .snav_warp ul li a {background:#fff; border:none; border-bottom: 1px solid #168fa0;background:#00a9bb; color:#fff; text-align: left; padding:10px;} .snav_warp ul li.on a::after {background: url('/img/common/icon_set.png') -20px -245px no-repeat; } .snav_warp ul li.on {position:relative; display: block;} .snav_warp.active ul li.on {display: block ;} .snav_warp .product ul li i {display: none !important;} .snav_warp .product ul li:nth-child(-n+6).on a {background:#00a9bb;} .snav_warp .txt_wrap.active ul {opacity: 1; visibility: visible} .subtitle_wrap .sub_tit {margin-top:65px;} .subtitle_wrap .sub_tit .stit {font-size:1.8em;} .subtitle_wrap .sub_tit .btit {font-size:1em;} .sub44 {background-position: 80% center;} /* 서브 텝 메뉴 */ .tab_menu {margin-top:60px;} .tab_menu .inner ul {} .tab_menu .inner ul > li {flex:0 0 50%;} .tab_menu .inner ul > li a {height:100%; display: flex; align-items: center; justify-content: center; font-size:1.25em; height:60px; padding:0;} /* 메인 비주얼 */ .m_visual .swiper {height:auto; min-height:380px; max-height: none;} .m_visual .img {background-position: bottom; background-repeat: no-repeat; background-size: cover;} .m_visual .swiper .swiper-button-prev {display: none;} .m_visual .swiper .swiper-button-next {display: none;} #sub_visual.sub15 {display: none;} /* 카운팅 */ .cout {line-height: 0;} .cout > ul {} .cout > ul > li {display: flex; justify-content: space-between; align-items: center;color:#fff; padding:24px 20px; font-size:1.14em; } .cout > ul > li > div::after {content: ''; display: inline-block; width:11px; height:11px; background:url('/images/main/icon_mv.png') center no-repeat; background-size: cover; margin-left:10px;} .cout > ul > li:first-child {background:#57677e;} .cout > ul > li:nth-child(2) {background:#0b1c40;} .cout > ul > li:last-child { background:#000000;} .cout .num {font-weight: 600; font-size:1.46em;} .cout b {font-size:1em; font-weight: 400; margin-left: 6px; display: inline-block;} /* m_spot 01 */ #m_01 {height:55vh; background:url("/images/main/bg_mspot_01_mo.jpg") 50% 100% no-repeat; background-size: cover;} #m_01 .text_wrap {left:0; top:10vh; transform: none; position: relative;} #m_01 .text_wrap h3 {font-size:2.85em; margin-bottom:0; line-height: 24px;} #m_01 .text_wrap p {font-size:1.25em;} /* m_spot 02 member */ #m_02 .tit {margin:60px 0 0 0;} #m_02 .tit h3 {font-size: 1.98em; letter-spacing:-.08em;} #m_02 .tit span {font-size:1.25em;} #m_02 .swiper {background:url('/images/main/bg_member.png') 55% 66% no-repeat; background-size:30%;} #m_02 .swiper-slide { width:100%; flex-direction: row;} #m_02 .swiper-slide-active {width: 100% !important; align-items: flex-end; height:300px;} #m_02 .swiper-slide .text_wrap {position: relative; right:auto; top:auto; transform:none; flex:0 0 100%; margin-bottom: 100px; z-index: 9;} #m_02 .swiper-slide .text_wrap h4 {font-size:1.85em;} #m_02 .swiper-slide .text_wrap span {font-size:1em; margin:10px 0 25px 0;} #m_02 .swiper-slide .text_wrap li {font-size:1em;} #m_02 .swiper-slide-active .img_wrap {position: absolute; right: 0; width: 57%;} #m_02 .swiper-button-prev {left: calc(50% - 51px); top: 10%;} #m_02 .swiper-button-prev > img {width:20px;} #m_02 .swiper-button-next {right:calc(50% - 51px); top: 10%;} #m_02 .swiper-button-next > img {width:20px;} /* m_spot 03 brand */ #m_03 {padding:90px 0; background-position: 20% 50%;} #m_03 .top {flex-direction: column; gap:30px; margin-bottom:80px;} #m_03 .top h3 {font-size: 2.85em; line-height: 1.12em;} #m_03 .top h3 span {margin:0;} #m_03 .top p {font-size:1.25em;} #m_03 .brand > ul {background:#fff; flex-wrap: wrap; padding:0;} #m_03 .brand > ul > li {flex:1 1 calc(50% - 1px); display: flex; align-items: center; justify-content: center; border-left:1px solid #1c1c1c; border-bottom:1px solid #1c1c1c; height: 110px; padding: 0 20px;} #m_03 .brand > ul > li:nth-child(3) {padding-top:10px;} #m_04 {padding:80px 0 0 0;} #m_04 .top h3 {font-size:2.18em; letter-spacing: -.08em; padding-bottom:67px; margin-bottom:45px;} #m_04 .bt p {font-size:1.25em; letter-spacing:-.095em; padding:0;} #m_04 .bt ul {flex-wrap: wrap; margin-top:45px; gap:0; width: 100vw; margin-left: calc(-50vw + 50%);} #m_04 .bt ul li {width: calc(50% - 2px);} #m_04 .bt ul li img {width:100%;} #m_brand .tit {margin:80px 0 30px 0;} #m_brand .tit h3 {font-size: 1.85em; letter-spacing: -.08em;} #m_brand .tit span {font-size:1.25em;} #m_brand .tabs {flex-wrap: wrap; margin-bottom:20px;} #m_brand .tabs > li {flex:0 0 33.333%; height:auto; border-bottom:none; padding:20px 0; height:90px;} /* #m_brand .tabs > li:nth-child(3) {padding-top:30px;}*/ #m_brand .tab_content .item_wrap {gap:10px; flex-direction: row;} #m_brand .tab_content .item {flex-direction: column; gap:10px;} #m_brand .tab_content .item:last-child {display: none;} /* #m_brand .tab_content table td:first-child {display: none;}*/ #m_brand .tab_btn {justify-content: center; padding-bottom:80px;} #m_brand .tab_btn > div {width:30px; height:30px;} #m_brand .tab_content table th {font-size:1.25em;} #m_brand .tab_content table td {font-size:1em; height:65px;} #m_brand .tab_content .btn button {font-size:16px} #m_brand .tab_content .item .img_wrap {flex:0 0 200px;} #m_05 {background:#00a9bb; padding:40px 0; height:700px; word-break: keep-all;} #m_05 .item_wrap {height:100%;} #m_05 .item_wrap .item {width:100%; padding:40px 20px;} #m_05 .item_wrap .item.active {width:90%; margin:0 auto;} #m_05 .item_wrap .item.active .top h3 {font-size:2.25em;} #m_05 .item_wrap .item.active .top span {line-height: 0.95em; font-size:5.25em;} #m_05 .item_wrap .item.active .text_wrap p {font-size:1.25em; text-align: center;} #m_05 .item_wrap .kids.active .top::after {position: relative; width: 30%; background-size: contain; right: -3%; height: 80px; top: 18px;} #m_05 .item_wrap .item .top {width:100%; text-align: center;} #m_05 .item_wrap .item .text_wrap {width:100%; height:100%; text-align: center;} #m_05 .item_wrap .kids {background-position: 73% center;} #m_05 .item_wrap .reset {background-position: 60% center;} #m_05 .item_wrap .item.active button {font-size:1em; position: absolute; bottom: 8%; left:50%; transform: translate(-50%, 0); padding:15px 50px 15px 16px; z-index: 9;} #m_05 .item_wrap .item.active button::after {width:15px; height:15px; background-size:contain;} #m_05 .item_wrap .item .mask_bg {background:rgba(0,0,0,0.3);} /* #m_05 .item_wrap {display: block;} #m_05 .item_wrap .item.active {width:100%;} #m_05 .item_wrap {flex-direction: column;} #m_05 .item_wrap .item.active .top h3 {font-size:2.25em;} #m_05 .item_wrap .item.active .top span {line-height: 0.95em; font-size:5.25em;} #m_05 .item_wrap .item.active .text_wrap p {font-size:1.25em;}*/ #m_06 {flex-direction: column; padding:50px 0 0 0;} #m_06::after {display: none;} #m_06 .lft_area {flex:100%; } #m_06 .lft_area h3 {font-size: 1.85em; letter-spacing: -.08em;text-align: center; margin-bottom:48px;} #m_06 .lft_area .con {padding:60px 0; gap:10px;} #m_06 .lft_area .con::after {left:0;} #m_06 .lft_area .con p {font-size: 1.25em;} #m_06 .lft_area .con span {font-size:2.125em;} #m_06 .lft_area .con span::after {width:75px; bottom:-40px; right:-80px;} #m_06 .rgh_area {flex-direction: row; flex:100%; width:100%; padding:60px 20px;} #m_06 .rgh_area .txt {flex: 1 1 90%;} #m_06 .rgh_area .txt span {font-size:1.27em; letter-spacing: -.08em; padding: 10px 15px;} #m_06 .rgh_area .txt p {font-size:1em;} #m_06 .rgh_area .txt span::before { top: -6px; background-size: contain; width: 22px; height: 22px; left: -6px;} #m_06 .rgh_area .txt span::after { bottom: -6px; background-size: contain; width: 22px; height: 22px; right: -6px;} #m_07 .item_wrap {flex-direction: column !important;} #m_07 .item_wrap > * {flex:0 0 100%; width:100%;} #m_07 .item_wrap .txt_wrap {margin:70px 0 20px 0;} #m_07 .item_wrap .txt_wrap > div {position: relative; left:auto; top:auto; transform: none; width:100%;} #m_07 .item_wrap .txt_wrap h4 {font-size:1.85em;} #m_07 .item_wrap .txt_wrap p {font-size:1.25em; margin-top:25px;} #m_07 .swiper-slide {text-align: center;} #m_08 {padding:60px 0;} #m_08 h3 {font-size:2.25em;margin-bottom:30px;} #m_08 .tab_wrap {flex-direction: column;} #m_08 .tab_wrap .m_scroll {overflow-x: scroll; position: relative;} #m_08 .tab_wrap .tabs {flex: auto; flex-wrap: wrap; width:100%; display: flex; margin-bottom:20px; background:rgba(0, 0, 0, 0.3);} #m_08 .tab_wrap .tabs li {border:none; font-size:1.24em; padding:18px 0; flex:0 0 33.333%; text-align: center;border-bottom:1px solid rgba(255, 255, 255, 0.3); border-right:1px solid rgba(255, 255, 255, 0.3); } #m_08 .tab_wrap .tabs li::before {display: none;} #m_08 .tab_wrap .tabs li.active {background:#21a6b4;} #m_08 .tab_wrap .tab_content {flex-direction: column;} #m_08 .tab_wrap .img_wrap {width:100%} #m_08 .tab_wrap .img_wrap .slider {width:100%;} #m_08 .tab_wrap .txt_wrap {font-size:1.35em;} #m_08 .tab_wrap .txt_wrap li {padding:15px 0 10px 55px;} #m_08 .tab_wrap .txt_wrap i {width:38px; height:38px; line-height: 38px;} #m_08 .tab_wrap .txt_wrap .btn a.info {max-width: none;} #m_08 .tab_content:after {display: none !important;} #m_08 .tab_wrap .txt_wrap i.out {width:35px; height:35px; line-height: 31px; top:0;} #m_08 .tab_wrap .notab {position: absolute; bottom:20px; right:0; width:33.3333%; font-size:1.24em; padding:18px 0; flex:0 0 33.333%; text-align: center;border-bottom:1px solid rgba(255, 255, 255, 0.3); border-right:1px solid rgba(255, 255, 255, 0.3);} #m_08 .slide-btn-prev {left:10px; width:35px; height:35px; line-height: 35px;} #m_08 .slide-btn-next {right:10px; width:35px; height:35px; line-height: 35px;} #m_09 {padding:50px 0;} #m_09 .inner {flex-direction: column; gap:30px;} #m_09 .lft_area h3 {font-size:2.14em;} #m_09 .lft_area ul > li .tit {font-size:1.35em;} #m_09 .lft_area button {width:40px; height:40px;} #m_09 .rgh_area ul {flex-direction: column; gap:0;} #m_09 .rgh_area ul > li {text-align: left;} #m_09 .rgh_area ul > li:first-child {border-bottom:none;} #m_09 .rgh_area ul > li h3 {font-size:1.78em;} #m_09 .rgh_area .coun {padding:20px;} #m_09 .rgh_area .time {padding:20px;} #m_09 .rgh_area .coun::before {position: absolute; right:20px; width: 70px; background-size: contain;} #m_09 .rgh_area .time::before {position: absolute; right:20px;width: 70px; background-size: contain;} #m_09 .rgh_area p, #m_09 .rgh_area dl {font-size:1.35em;} #m_10 {padding:80px 0 95px 0; margin-top:60px;} #m_10 h3 {font-size:2.14em;} #m_10 .form_wrap .row {flex-direction: column;} #m_10 .row .txt {font-size:1.25em;} #m_10 .row .agree_item {padding:0;} .swiper .swiper-pagination {bottom:10px; font-size:11px;} .swiper .swiper-button-prev {width:32px; height:32px; line-height:32px; left:0;} .swiper .swiper-button-next {width:32px; height:32px; line-height:32px; right:0;} } @media screen and (max-width:768px) { .only-sm {display:block;} .tab_menu .inner ul > li a {font-size:1em;} .sub21 {background:url("/images/common/sub_visual0201_m.jpg") center no-repeat; background-size: cover;} .sub22 {background:url("/images/common/sub_visual0202_m.jpg") center no-repeat; background-size: cover;} .sub23 {background:url("/images/common/sub_visual0203_m.jpg") center no-repeat; background-size: cover;} .sub24 {background:url("/images/common/sub_visual0204_m.jpg") center no-repeat; background-size: cover;} .sub25 {background:url("/images/common/sub_visual0205_m.jpg") center no-repeat; background-size: cover;} .sub26 {background:url("/images/common/sub_visual0206_m.jpg") center no-repeat; background-size: cover;} #m_05 .item_wrap .item.kids .top {display: flex; flex-direction: column; align-items: center;} /* #m_05 .item_wrap .kids.active .top::after {top:0;}*/ #m_06 .rgh_area {flex-direction: column; } #m_07 .banner > ul {flex-direction: column;} #m_brand .tabs > li img {width:100%;} } @media screen and (max-width:425px) { .m_visual .img {background-size: contain;} #m_03 .brand > ul > li img {width: 80%;} #m_06 .rgh_area .con .img {width:30%;} #m_06 .lft_area .con span::after {width: 55px; right: -40px;} } @media screen and (max-width:320px) { }