@charset "utf-8";
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/NotoSansKR-Light-Hestia.woff) format('woff'),
       url(../fonts/NotoSansKR-Light-Hestia.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/NotoSansKR-Regular-Hestia.woff) format('woff'),
        url(../fonts/NotoSansKR-Regular-Hestia.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(../fonts/NotoSansKR-Medium-Hestia.woff) format('woff'),
        url(../fonts/NotoSansKR-Medium-Hestia.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 600;
   src: url(../fonts/NotoSansKR-Bold-Hestia.woff) format('woff'),
        url(../fonts/NotoSansKR-Bold-Hestia.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(../fonts/NotoSansKR-Black-Hestia.woff) format('woff'),
        url(../fonts/NotoSansKR-Black-Hestia.otf) format('opentype');
}

#skipNavi{position:absolute;margin:0 auto;width:100%;list-style:none;font-size:1.15em;top:-10.5em;left:0;z-index:999999;}
#skipNavi a:active,
#skipNavi a:focus{position:absolute;padding-top:0.5em;width:100%;height:2em;top:10.5em;text-align:center;color:#000;font-weight:bold;background:#fff;border-bottom:1px solid #475470;outline:0;z-index:999999;}
#wrap{font-family:'Noto Sans KR', '맑은 고딕', sans-serif;-webkit-text-size-adjust:100%;font-weight:300;font-size:13px;line-height:150%;color:#121212;}

/* main_layout */
#wrap{}
#header{border-bottom:1px solid rgba(211,211,211,0.4);background:rgba(255,255,255,0.04);position:absolute;left:0;right:0;top:0;z-index:1000;}
#header .inner{max-width:1200px;margin:0 auto;}
#header .inner h1{padding:28px 0;display:flex;}
#header .inner h1 a{display:block;}
#header .inner h1 a:first-child{position:relative;margin-right:20px;padding-right:20px;}
#header .inner h1 a:first-child:before{content:'';display:block;position:absolute;right:0;top:50%;margin-top:-8px;width:1px;height:16px;background:#bababa;}
#header .inner h1 span{display:block;}
#header .inner h1 span:first-child{position:relative;margin-right:20px;padding-right:20px;}
#header .inner h1 span:first-child:before{content:'';display:block;position:absolute;right:0;top:50%;margin-top:-8px;width:1px;height:16px;background:#bababa;}
#header .btn_lang{position:absolute;top:20px;right:80px;background:url(../img/ico_lang.png) no-repeat center center;width:40px;height:40px;text-indent:-9999px;overflow:hidden;}
#header .btn_lang.active{background-image:url(../img/ico_lang_close.png);}
#header .lang{display:none;position:absolute;right:80px;top:60px;background:#00102C;padding:5px;}
#header .lang ul li a{display:block;font-size:14px;color:#fff;font-weight:600;border-top:1px solid #333;padding:5px 0;width:116px;}
#header .lang ul li:first-child a{border-top:0;}
#footer .foot_btn{max-width:1200px;margin:0 auto 120px auto;}
#footer .foot_btn ul{overflow:hidden;margin-left:-2%;}
#footer .foot_btn ul li{float:left;width:48%;margin-left:2%;}
#footer .foot_btn ul li a{display:block;border-left:1px solid #ddd;border-right:1px solid #ddd;padding:40px 20px;background:url(../img/ico_btn_arrow.png) no-repeat right 20px center;font-size:24px;font-weight:600;color:#121212;position:relative;line-height:40px;transition:all .5s;}
#footer .foot_btn ul li a:before{content:'';display:block;position:absolute;left:20px;top:0;right:20px;border-top:1px solid #ddd;transition:all .3s;}
#footer .foot_btn ul li a:after{content:'';display:block;position:absolute;left:20px;bottom:0;right:20px;border-bottom:1px solid #ddd;transition:all .3s;}
#footer .foot_btn ul li a:hover{border-color:#000;}
#footer .foot_btn ul li a:hover:before{border-color:#000;}
#footer .foot_btn ul li a:hover:after{border-color:#000;}
#footer .foot_logo{border-top:1px solid #bababa;padding:25px 0;text-align:center;}
#footer .foot_logo ul{display:flex;justify-content: center;}
#footer .foot_logo ul li:first-child{position:relative;margin-right:20px;padding-right:20px;}
#footer .foot_logo ul li:first-child:before{content:'';display:block;position:absolute;right:0;top:50%;margin-top:-8px;width:1px;height:16px;background:#bababa;}

#container .inner{max-width:1200px;margin:0 auto;padding:80px 0}
.main_visual{background:#012666;padding:125px 20px;text-align:center;display:flex;align-items: center;justify-content: center}
.main_visual img{max-width:100%;}
.main_visual_new{overflow:hidden;}
.main_visual_new .img{background:#012666;padding:0 20px;display:flex;align-items: center;justify-content: center;height:1000px;}
.main_visual_new .img img{max-width:100%;}
.main_visual_new .video{height:1000px;background:url(../img/img_beauty01_01.png) no-repeat center center;background-size:cover;}
.main_visual_new .video video{width:100%;height:100%;object-fit: cover;object-position: center;vertical-align:top;display: block;background: transparent;}
.video-container {position: relative;width: 100%;height: 100%;overflow: hidden;}
.video-thumb {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;z-index: 10;cursor: pointer;display: flex;justify-content: center;align-items: center;transition: background 0.3s;}
.video-thumb:hover {background-color: rgba(0, 0, 0, 0.1);background-blend-mode: multiply;}
.play-btn {width: 70px;height: 70px;background: rgba(0, 0, 0, 0.6);border-radius: 50%;position: relative;transition: all 0.3s ease;box-shadow: 0 4px 10px rgba(0,0,0,0.3);}
.play-btn::after {content: '';position: absolute;top: 50%;left: 55%;transform: translate(-50%, -50%);border-style: solid;border-width: 12px 0 12px 20px;border-color: transparent transparent transparent #ffffff;}
.video-thumb:hover .play-btn {transform: scale(1.1);background: rgba(0, 0, 0, 0.8);}
.video-container.is-playing .video-thumb {display: none;pointer-events: none;}
.controls{position:absolute;left:50%;bottom:0;width:400px;margin-left:-200px;text-align:center;z-index:999;height:40px;}
.controls .swiper-slide-page{font-size:16px;color:#fff;letter-spacing:5px;margin-left:80px;}
.controls .swiper-slide-page span{font-weight:600;line-height:40px;}
.controls .swiper-slide-page span.swiper-pagination-total{opacity:0.4}
.controls .swiper-scrollbar{width:200px;height:2px;background:#ddd;border-radius:0;background:rgba(255,255,255,0.4);position:absolute;left:0;top:50%;margin-top:-1px;}
.controls .swiper-scrollbar .swiper-scrollbar-drag{background:rgba(255,255,255,1)}
.controls .swiper-slide-pause{position:absolute;right:0;top:0;width:40px;height:40px;text-indent:-9999px;overflow:hidden;background:url(../img/btn_pause.png) no-repeat center center;border:0;}

.main_top{margin-bottom:40px;}
.main_top h2{text-align:center;margin-bottom:15px;}
.main_top h2 strong{display:block;font-size:48px;-webkit-text-stroke: 1px black;color:#fff;line-height:130%;font-weight:700;}
.main_top h2 span{display:block;font-size:56px;color:#0D2545;line-height:130%;font-weight:700;}
.main_top p{font-size:17px;color:#333;line-height:170%;text-align:center;}
.tab_area{max-width:872px;margin:0 auto 60px auto;background:#f8f8f8;border-radius:50px;padding:10px;}
.tab_area ul{display:flex;justify-content:space-around;}
.tab_area ul li{width:24%;margin:0 0.5%}
.tab_area ul li a{display:block;font-size:17px;color:#888;border-radius:50px;height:52px;line-height:52px;text-align:center;font-weight:600;}
.tab_area ul li a.active{background: linear-gradient(to left, #215DAB 0%, #0D2545 100%);color:#fff;}
.cont_area .item{display:none;}
.cont_area .item:first-child{display:block;}
.brand_top{display:flex;justify-content: space-between;}
.brand_top h3 strong{display:block;font-size:28px;-webkit-text-stroke: 1px black;color:#fff;line-height:130%;font-weight:700;}
.brand_top h3 span{display:block;font-size:28px;color:#0D2545;line-height:130%;font-weight:600;}
.brand_top .brand_cate_area{max-width:820px;margin-bottom:40px;}
.brand_top .brand_cate_area ul{display:flex;flex-wrap: wrap;justify-content: flex-end;}
.brand_top .brand_cate_area ul li{width:180px;margin-left:20px;margin-bottom:20px;}
.brand_top .brand_cate_area ul li a{display:block;border-bottom:1px solid #ddd;text-align:center;}
.brand_top .brand_cate_area ul li a.active{border-bottom:1px solid #0D2545}
.brand_top .brand_cate_area ul li a img{max-width:180px;}
.brand_cont_area .brand_wrap .brand_img img{width:100%;}
.brand_cont_area .brand_wrap .brand_txt{display:flex;justify-content:space-around;border-bottom:1px solid #ddd;padding:60px 0;}
.brand_cont_area .brand_wrap .brand_txt .tit{font-size:28px;line-height:130%;font-weight:600;min-width:380px;margin-right:120px;}
.brand_cont_area .brand_wrap .brand_txt .txt{font-size:17px;line-height:150%;}
.brand_cont_area .brand_wrap .brand_key{padding:60px 0;border-bottom:1px solid #ddd;}
.brand_cont_area .brand_wrap .brand_key h4{background:#0D2545;line-height:40px;padding:0 0 0 20px;width:282px;box-sizing: border-box;font-size:17px;color:#fff;font-weight:600;margin-bottom:24px;}
.brand_cont_area .brand_wrap .brand_key ul{display:flex;justify-content: flex-end}
.brand_cont_area .brand_wrap .brand_key ul li{width:33.33%;box-sizing: border-box;padding:10px 25px;font-size:15px;font-weight:400;color:#333;line-height:150%;position:relative;}
.brand_cont_area .brand_wrap .brand_key ul li:before{content:'';display:block;position:absolute;left:0;top:0;bottom:0;width:1px;background:#BABABA;}
.brand_cont_area .brand_wrap .brand_key ul li:first-child:before{display:none;}
.brand_cont_area .brand_wrap .brand_insight{padding:60px 0;border-bottom:1px solid #ddd;margin-bottom:60px;display:flex;justify-content:space-between}
.brand_cont_area .brand_wrap .brand_insight .txt{position:relative;width:384px;height:390px;}
.brand_cont_area .brand_wrap .brand_insight .txt h4{font-size:28px;color:#0D2545;line-height:130%;font-weight:600;}
.brand_cont_area .brand_wrap .brand_insight .txt p{position:absolute;left:0;bottom:0;right:0;font-size:15px;color:#333;line-height:150%;}
.brand_cont_area .brand_wrap .brand_insight .txt p.small{font-size:13px;}
.brand_cont_area .brand_wrap .brand_btn{text-align:center;}
.brand_cont_area .brand_wrap .brand_btn a{display:inline-block;vertical-align:top; width:250px;height:50px;line-height:50px;border:1px solid #0D2545;background:url(../img/ico_btn_arrow.png) no-repeat right 30px center;font-size:17px;font-weight:600;color:#0D2545;text-align:left;padding:0 24px;box-sizing: border-box;margin:0 20px;transition:all .5s;}
.brand_cont_area .brand_wrap .brand_btn a:hover{background-image:url(../img/ico_btn_arrow_ov.png);color:#fff;background-color:#0D2545}

@media only screen and (max-width: 1201px) {
    #header .inner h1{padding:28px 20px}
    #header .btn_lang{right:20px;}
    #header .lang{right:20px;}
    .main_visual img{width:50%}
    .main_visual_new .img img{width:50%}
    #container .inner{padding:80px 20px;}
    #footer .foot_btn{margin:0 20px 80px 20px;}
    .brand_top{display:block;}
    .brand_top .brand_cate_area{max-width:none;margin-top:20px;}
    .brand_top .brand_cate_area ul{margin-left:-2%;}
    .brand_top .brand_cate_area ul li{width:23%;margin-left:2%;}
    .brand_cont_area .brand_wrap .brand_insight .txt{width:45%;}
    .brand_cont_area .brand_wrap .brand_insight .img{width:50%;display:flex;align-items: end}
    .brand_cont_area .brand_wrap .brand_insight .img img{width:100%;}
}
@media only screen and (max-width: 1021px) {
    .main_top h2 strong{font-size:36px;}
    .main_top h2 span{font-size:40px;}
    .main_top p{font-size:14px;}
    .tab_area ul li a{font-size:14px;}
    .brand_cont_area .brand_wrap .brand_txt{display:block;}
    .brand_cont_area .brand_wrap .brand_txt .tit{margin-bottom:20px;}
    .brand_cont_area .brand_wrap .brand_txt .txt{font-size:14px;}
    .brand_cont_area .brand_wrap .brand_key ul li{font-size:13px;}
    #footer .foot_btn ul li a{font-size:18px;padding:20px}
}
@media only screen and (max-width: 768px) {
    #header .inner h1{padding:15px 20px;}
    #header .inner h1 a img{height:18px;}
    #header .inner h1 a:first-child{padding-right:10px;margin-right:10px;}
    #header .inner h1 span img{height:18px;}
    #header .inner h1 span:first-child{padding-right:10px;margin-right:10px;}
    #header .btn_lang{right:15px;top:5px;}
    #header .lang{position:absolute;right:0;top:50px;width:50%;padding:20px 10px;}
    #header .lang ul li a{width:auto;padding:15px 0}
    .main_visual{display:block;padding-top:80px;padding-bottom:40px}
    .main_visual img{width:90%;}
    .main_visual_new{background:#012666}
    .main_visual_new .img{display:block;padding:80px 20px 40px 20px;text-align:center;height:auto;}
    .main_visual_new .img img{width:80%;}
    .main_visual_new .video{height:auto;}
    #container .inner{padding:40px 20px}
    .main_top h2 strong{font-size:21px;}
    .main_top h2 span{font-size:24px;}
    .main_top p{font-size:13px;}
    .tab_area{background:none;padding:0;margin-bottom:30px;}
    .tab_area ul{flex-wrap:wrap;}
    .tab_area ul li{width:48%;margin:0 1% 2% 1%;}
    .tab_area ul li a{font-size:12px;height:40px;line-height:40px;background:#F8F8F8;}
    .brand_top h3 strong{font-size:21px;}
    .brand_top h3 span{font-size:21px;}
    .brand_top .brand_cate_area{margin-bottom:30px;}
    .brand_top .brand_cate_area ul{justify-content: flex-start;}
    .brand_top .brand_cate_area ul li{width:31.33%;}    
    .brand_top .brand_cate_area ul li a img{width:100%;}
    .brand_cont_area .brand_wrap .brand_txt{padding:30px 0}
    .brand_cont_area .brand_wrap .brand_txt .tit{font-size:20px;min-width:auto;margin-right:0;}
    .brand_cont_area .brand_wrap .brand_key{padding:30px 0}
    .brand_cont_area .brand_wrap .brand_key ul{display:block;}
    .brand_cont_area .brand_wrap .brand_key ul li{width:auto;padding:15px 0}
    .brand_cont_area .brand_wrap .brand_key ul li:before{width:100%;height:1px;bottom:auto;right:0;}
    .brand_cont_area .brand_wrap .brand_insight{padding:30px 0;display:block;margin-bottom:40px;}
    .brand_cont_area .brand_wrap .brand_insight .txt{width:auto;height:auto;margin-bottom:30px;}
    .brand_cont_area .brand_wrap .brand_insight .txt p{position:static;margin-top:10px;}
    .brand_cont_area .brand_wrap .brand_insight .img{width:auto;}
    .brand_cont_area .brand_wrap .brand_btn a{display:block;width:auto;background-position:right 20px center}
    .brand_cont_area .brand_wrap .brand_btn a:first-child{margin-bottom:10px;}
    #footer .foot_btn{margin:0 20px 40px 20px}
    #footer .foot_btn ul li{float:none;width:auto;margin-top:20px;}
    #footer .foot_btn ul li:first-child{margin-top:0;}
    #footer .foot_btn ul li a:before{left:10px;right:10px;}
    #footer .foot_btn ul li a:after{left:10px;right:10px;}
    #footer .foot_logo{padding:25px 0;margin:0 20px;}
    #footer .foot_logo ul li img{height:18px}
    #footer .foot_logo ul li:first-child{margin-right:10px;padding-right:10px;}
}



/* 다국어 */
#wrap.jpn{word-break:break-all;font-family:'Yu Gothic'}
#wrap.cht{word-break:break-all;font-family:'Microsoft YaHei'}
#wrap.chs{word-break:break-all;font-family:'Microsoft YaHei'}


.jpn .brand_top h3 span{font-size:26px;}
@media only screen and (max-width: 768px) {
    .jpn .brand_top h3 span{font-size:21px;}
}