@charset "utf-8";

@import url('reset.css');


.header {position:fixed; top:0; left: 0; width: 100%;  height:90px; background:rgba(40,40,40,0.6); backdrop-filter:blur(10px); z-index:999999; transition:all 0.1s ease-out; box-shadow:0 0 45px rgba(40,40,40,0.1); margin:0 auto;}
.header .inner {max-width:1480px; height:90px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.header h1 { margin-top:0; }
.header h1 a { display: block; background: url(../images/common/logo_white.svg) no-repeat 50% 50% ; width:95px; height:75px; text-indent:-9999px;}

#gnb {display:flex; align-items:center;}
#gnb nav:before { content:''; position:absolute; left:0; top:100px; right:0; height:0; transition:all 0.3s ease;}
#gnb nav > ul { display:flex; justify-content:center; font-family:'Ubuntu', sans-serif;}
#gnb nav > ul > li { position:relative; }
#gnb nav .btn-dep1 { display:block; font-weight:500; height:90px; padding:0 27px; line-height:90px; font-size:18px; color:rgba(255,255,255,0.8); text-align:center; position:relative; transition:all 0.5s ease;}
#gnb nav .btn-dep1:hover,
#gnb nav .btn-dep1.active {font-weight:600; color:#fff;}


/* 메인동영상 */
.main_video_contents {width:100%; height:1000px; overflow:hidden;}
.main_video_contents .media {width:100%; height:100%; object-fit:cover;}
.main_video_contents .context {display:flex; flex-direction:column; align-items:center; justify-content:center; position:absolute; top:0; left:0; right:0; margin:auto; width:90%; height:1000px; text-align:center; color:#fff;}
.main_video_contents .heading {font-family:'Ubuntu', sans-serif; line-height:1.25; font-size:68px; font-weight:500; color:inherit;}
.main_video_contents .text {margin-top:10px; font-size:26px; line-height:1.6;}


/* 본문 */
#contents {width:100%; margin-top:95px; min-height:calc(100vh - 100px);}

.brand_slogan {font-family:'Ubuntu', sans-serif; font-size:42px; font-weight:600; margin-bottom:30px; letter-spacing:-0.5px;}
.brand_text {font-size:24px; line-height:34px; margin-bottom:50px;}
.main_banner {width:1200px; margin:0 auto; height:210px; border-radius:20px;}
.conbox { position:relative; text-align:center; max-width:1480px; margin:0 auto; padding-bottom:300px;}
.tab_box {margin:50px 0;}

.cont_head {display:flex; justify-content:space-between; align-items:center; padding-top:80px; padding-bottom:80px; text-align:left;}
.cont_head .title {font-size:40px; font-weight:700;}

.img_box {margin:50px 0; border-radius:20px; text-align:center;}
.img_box img {width:100%; height:auto;}

.title_box {display:flex; flex-direction:column; gap:40px;}
.title_box .title {font-size:36px; font-weight:600; line-height:1.6; letter-spacing:-1px;}
.title_box, .partner_box .subject {font-size:32px; font-weight:700; line-height:1.6;}
.title_box .desc {font-size:18px; font-weight:500; line-height:1.6; letter-spacing:-0.3px;}

.text_box {display:flex; flex-direction:column; gap:20px; font-size:18px;}
.text_box .title {font-size:24px; font-weight:700; line-height:1.6;}

.text_box .desc {font-weight:500; line-height:1.6; letter-spacing:-1px;}
.text_box .add_info {display:flex; flex-direction:column; gap:10px; margin-top:20px;}
.text_box .add_info p em {font-weight:700; padding-right:10px;}

.text_box_ty2 {display:flex; gap:80px;}
.text_box_ty2 .title_area {min-width:310px;}
.text_box_ty2 .title_area .pTitle {font-size:20px; color:#C49C47; font-weight:700; line-height:1.4; margin-bottom:10px;}
.text_box_ty2 .title_area .bTitle {font-size:24px; font-weight:700; line-height:1.4; letter-spacing:-0.3px;}
.text_box_ty2 .text_area {margin-top:39px; display:flex; flex-flow:column; flex:1 1 0%; gap:35px;}
.text_box_ty2 .text_area .bText {font-size:20px; font-weight:700; line-height:1.4; margin-bottom:10px;}
.text_group{margin-top:0;}
.text_list ul{}
.text_list li {position:relative; margin-left:15px;}
.text_list li::before {display:inline-block; position:absolute; top:13px; left:-10px; width:2px; height:2px; background-color:#68717A; content:"";}

.line-t {border-top:1px solid #ddd; margin-top:80px; padding-bottom:80px;}

.partner_box {position:relative; text-align:left;}
.partner_list { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin:30px 0 80px;}
.partner_logoArea {position:relative; height:160px; padding:0 60px; display:flex; justify-content:center; align-items:center; background-color:#fff; border:1px solid #e6e8e9; border-radius:16px;}
.partner_name {margin-top:15px; display:flex; justify-content:center; align-items:center; font-size:18px; font-weight:600;}

.grid_box{display:grid; gap:20px;  grid-template-columns: repeat(4, minmax(0px, 1fr));}
.grid_item{padding:40px 35px; background:#f5f6f6; border-radius:10px;}
.grid_item.type1 {padding:0; background:#fff;}
.grid_item .textBox {margin-top:20px; text-align:center;}
.grid_item .textBox .title {font-size:18px; font-weight:700; line-height: 1.6;}
.grid_item .textBox .text {margin-top:5px; font-size:16px;}

.boxSV {overflow:hidden; width:100%; height:140px; border-radius:15px; background: url(../images/common/bg_service_1.jpg) no-repeat 0 / cover;}
.boxSV.wrinkle{background:url(../images/common/bg_service_2.jpg) no-repeat 0 / cover;}
.boxSV.body{background:url(../images/common/bg_service_3.jpg) no-repeat 0 / cover;}
.boxSV.skin{background:url(../images/common/bg_service_4.jpg) no-repeat 0 / cover;}
.boxSV.select{background:url(../images/common/bg_shopping_1.jpg) no-repeat 0 / cover;}
.boxSV.shopping{background:url(../images/common/bg_shopping_2.jpg) no-repeat 0 / cover;}
.boxSV.event{background:url(../images/common/bg_shopping_3.jpg) no-repeat 0 / cover;}
.boxSV.deliver{background:url(../images/common/bg_shopping_4.jpg) no-repeat 0 / cover;}

.image_img {width:100%;}
.image_img img {display:block; object-fit:contain; width:100%; height:auto;}

.oval_tab {display:flex; flex-wrap:wrap; gap:15px; justify-content:center;}
.oval_tab .o_link {display:block; padding:15px 20px; color:rgba(4,19,33,0.7); font-size:20px; line-height:1.5; font-weight:500; min-width:160px; text-align:center; border-radius:60px; border:1px solid #041321; background:#fff;}
.oval_tab .o_link a:focus,a:hover,a:visited {text-decoration:none;}
.oval_tab .o_link.active {color:#fff; font-weight:700; background:#041321; border:1px solid #041321;}

.matchbox {margin-bottom:40px;}
.matchtext.active {display:block}
.matchtext {display:none; font-size:18px; line-height:1.6;}

.linkbox {margin:25px 0 80px;}
.linkbox a {font-size:24px; color:#041321; font-weight:600; position:relative;}
.linkbox a:after {content: ""; display: inline-block; width:25px; height:25px; vertical-align:top; background:url(../images/common/arrow_right_black.svg) no-repeat center / contain; margin-top:6px; margin-left:2px;}

.table_area{margin:5px 0 20px;}
.table_area table{width:100%; border-bottom:1px solid #cdd0d3;}
.table_area table tr {border-bottom:1px solid #cdd0d3; box-sizing:border-box;}
.table_area table tr.d_line {border-bottom:1.8px solid #68717a;}
.table_area table th {border-top: 1px solid #cdd0d3; border-bottom:1px solid #cdd0d3; padding:15px 0; text-align:center; border-left:1px solid #cdd0d3; background:#f5f6f6;}
.table_area table th.line_left, td.line_left {border-left:1px solid #cdd0d3 !important }
.table_area table th:first-child {border-left:0;}
.table_area table td {padding:12px 12px; text-align:center; font-size:18px;}
.table_area table td:first-child {border-left:0;}
.table_area table td {border-left:1px solid #cdd0d3 }

#footer {position:relative; padding:50px 0; background-color:#041321; font-size:16px; font-weight:400;}
#footer .inner {max-width:1480px; margin:0 auto;}
#footer .logo_section {margin-right:auto; margin-left:auto; display:flex; align-items:flex-start;}
#footer .f_link {display:flex; gap:20px;}
#footer .f_link a{color:#fff;}
#footer .f_link .icon {font-size:20px; vertical-align:bottom;} 
#footer .f_info {margin-top:20px; color:#fff; font-weight:400;}
#footer .f_info_type1 {margin-top:5px;}
#footer .f_info a{color:#fff;}
#footer .f_info span{display: inline-flex;}
#footer .f_info .line {align-items:center; height:13px; margin-right:7px; padding-right:10px; border-right:1px solid #848b92;}
#footer .copy {margin-top:40px; border-top:1px solid #3e3e3e; padding-top:30px; color:#8e959b;}

/* 서브페이지 공통 */
@keyframes subVisual{to{transform:scale(1.2);}}
.sub_banner{position:relative; height:420px; color:white; text-align:center; background:#8e959b;}
.sub_visual {width:100%; height:100%; overflow:hidden;}
.sub_visual .visual_img {width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; animation:subVisual 1.5s reverse cubic-bezier(0.4, 0, 1, 1);}
.sub_visual .visual_img.aboutus {background-image:url(../images/common/aboutus_bg.jpg);}
.sub_visual .visual_img.business {background-image:url(../images/common/business_bg.jpg);}
.sub_visual .inner{max-width:1480px; margin:0 auto;}
.sub_visual h2 {font-family:'Ubuntu', sans-serif; font-size:42px; font-weight:700; color:#fff; text-align:center; text-transform:uppercase; padding:200px 0 0 15px; animation:opacity .7s .7s both ease;}

/* swiper */
.swiper {width:1200px; margin:0 auto; height:250px; border-radius:20px; position:relative;}
.swiper-slide {text-align:center; font-size:18px; background:#fff; display:flex; justify-content:center; align-items:center;}
.swiper-slide img {display:block; width:100%; height:100%; object-fit:cover;}
.autoplay-progress {position:absolute; right:16px; bottom:16px; z-index:10; width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-weight:bold; color:#041321;}
.swiper-pagination-bullet-active {opacity: var(--swiper-pagination-bullet-opacity, 1); background: #041321 !important}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:20px !important}


/* css animation */
.text-focus-in{-webkit-animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both; animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both}

@-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}