.none { display: none; }
.white { color: #fff; }
.red { color: #DB0000; }
.black { color: #000; }
.back_white{background-color: white; opacity: 0.95;}
.inner { max-width: 69.57%; margin: auto; }
.inner2 { max-width: 70%; height: 100%; margin: auto; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.img-wrap img { width: 100%; }

/* header */
#header { width: 100%; height: 65px; position: fixed !important; top: 0; left: 0; z-index: 9; }
#header .h_inner { position: relative; display: flex; justify-content: space-between; width: 95%; height: 100%; margin: 0 auto; padding: 0 1vw 0 5vw; border-bottom: 1px solid #fff; }

#header:hover {height: auto; box-shadow: 4px 4px 6px rgb(0 0 0 / 10%); background: #EFEFEF; transition: all .6s; opacity: 1;}
#header:hover::after {content: ''; width: 100%; height: 1px; background: #d9d9d9; position: absolute; left: 0; top: 65px;}
#header.bg { background-color: white; }

/* hover 시 Scroll 내릴 시 */
#header:hover .menu-list li a,
#header:hover .header-R .lang,
#header .h_inner.black .menu-list li a,
#header .h_inner.black .header-R .lang { color: #000; }

#header:hover .header-R .hamburger-btn span,
#header .h_inner.black .header-R .hamburger-btn span,
#header .h_inner.black:hover::after { background: #000; }

#header .h_inner.black { border-bottom: 1px solid #000; }
#header .h_inner.black:hover { border-bottom: none; }
#header .h_inner.black .Logo img:first-child { display: none; }
#header .h_inner.black .Logo img:last-child {opacity: 1;}

#header .Logo { position: relative; width: 60px; padding: 1vh 0; }
#header .Logo img:last-child { position: absolute; opacity: 0; }
#header:hover .Logo img:first-child { display: none; }
#header:hover .Logo img:last-child { opacity: 1; }

#header .menu-list { width: 800px; height: inherit; line-height: 65px; display: flex; justify-content: center; text-align: center; }
#header .menu-list .depth01 { width: 25%; }
#header .menu-list .depth01 a { color: #fff;  transition: .3s;}
#header .menu-list .depth01 .depth02 { display: none; margin-top: 30px; line-height: 30px; margin-bottom: 30px; }
#header .menu-list .depth01 .depth02 li a { font-size: 0.8rem; font-weight: 200; letter-spacing: -1px; color: #000; font-family: 'Pretendard', sans-serif; }
#header:hover .menu-list .depth01 .depth02 { display: block; transition: .6s; }


#header .header-R { width: 165px; height: inherit; position: relative; }
#header .header-R .lang { height: 65px; display: flex; align-items: center; color: #fff; }
#header .header-R .lang li { padding: 0 10px; }


#header .header-R .hamburger-btn { position: absolute; width: 20px; height: 20px; top: 25px; right: 0; cursor: pointer; z-index: 999; }
#header .header-R .hamburger-btn span { width: 4px; height: 4px; background: #fff; position: absolute; border-radius: 50%; transition: .6s; }
#header .header-R .hamburger-btn span:nth-child(1) { top: 0; left: 0; }
#header .header-R .hamburger-btn span:nth-child(2) { top: 0; left: 7px; }
#header .header-R .hamburger-btn span:nth-child(3) { top: 0; left: 14px; }
#header .header-R .hamburger-btn span:nth-child(4) { top: 7px; left: 0; }
#header .header-R .hamburger-btn span:nth-child(5) { top: 7px; left: 7px; }
#header .header-R .hamburger-btn span:nth-child(6) { top: 7px; left: 14px; }
#header .header-R .hamburger-btn span:nth-child(7) { top: 14px; left: 0; }
#header .header-R .hamburger-btn span:nth-child(8) { top: 14px; left: 7px; }
#header .header-R .hamburger-btn span:nth-child(9) { top: 14px; left: 14px; }

/* 공통 */
.section { position: relative; }
.section .inner { height: inherit; }
.section .cont { position: relative; top: 65px; height: calc(100% - 65px); }
.section button { width: 170px; border-radius: 30px; }
.section button a { display: flex; padding: 10px 20px; justify-content: space-between; align-items: center; }
.section button img { max-width: 41px; }
.section .circle { width: 40px; height: 40px; position: absolute; transform: translateY(20px); border-radius: 50%; background: #000; }
.section .circle a { padding: 50%; }
.section .circle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; }
.section .circle span:first-child { width: 14px; height: 1px; }
.section .circle span:last-child { width: 1px; height: 14px; }
#m2 button{background-color: black;}

.menu { display: none; flex-direction: column; gap: 28px; padding-left: 5%; position: absolute; top: 20%; left: 0%; font-size: 15px; color: rgba(0, 0, 0, 0.6); z-index: 999; }
.menu_1 { top: 46%; color: rgba(255, 255, 255, 0.6); }
.menu.on { display: flex; }

.menu::after { content: ''; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); width: 35%; height: 4px; background-color: #999; }
.menu_1::after { background-color: #fff; }

.menu li.this { color: #000; font-size: 18px; font-weight: bold; }
.menu_1 li.this { color: #fff; font-size: 18px; }


#m1 .m1-swiper { height: 100%; }
#m1 .slide-1 { background: url(../img/main/m1_bg1.png)no-repeat center/cover; }
#m1 .slide-2 { background: url(../img/main/m1_bg2.png)no-repeat center/cover; }
#m1 .swiper-slide .cont { display: flex; justify-content: space-between; align-items: center; }
#m1 .swiper-slide .cont .m1-tit { padding-left: 1vw; }
#m1 .swiper-slide .cont .sub-txt p { line-height : 35px; letter-spacing : -0.73px; font-style : italic; }
#m1 .swiper-slide button { border: 1px solid #fff; }

#m2 .cont ul { padding: 10vh 0 5vh; display: flex; gap: 5%; justify-content: center; }
#m2 .cont ul li { width: 12.5vw; }
#m2 .cont ul li img { width: 100%; }
#m2 .cont .m2-tit { text-align: center; }
#m2 .cont .m2-tit h2 { line-height : 84.38px; letter-spacing : -2.15px; }

#m3 { position: relative; border-top: 1px solid #666; border-bottom: 1px solid #666; }
#m3::before { content: ''; position: absolute; width: 1px; height: 100%; background: #666; left: 50%; transform: translateX(-50%); }
#m3 .cont { display: flex; }
#m3 .cont .content { width: 50%; }
#m3 .cont .cont-L { position: relative; display: flex; flex-direction: column; align-items: flex-end; padding:3% 7% 0 0; }
#m3 .cont .cont-L .img-wrap { width: 24vw; }
#m3 .cont .cont-L > span { position: relative; display: block; width: 24vw; line-height: 24px; }
#m3 .cont .cont-L > span .circle { position: absolute; top: 0; right: 3%; transform: translateY(-50%); }
#m3 .cont .cont-L h1 { white-space: nowrap; color: #1A1A1A;}
#m3 .cont .cont-R { padding:5% 0 0 5%; }
#m3 .cont .cont-R h4 { text-align: right; width: 28vw; color: #1A1A1A; }
#m3 .cont .cont-R .img-wrap { position: relative; width: 28vw; }
#m3 .cont .cont-R .txt { position: absolute; width: 90%; position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); text-align: right; }
#m3 .cont .cont-R .txt .circle { transform: translateY(0); background: transparent; border: 1px solid #ccc; }

#m4 { position: relative; border-bottom: 1px solid #666; }
#m4 .line { position: absolute; width: 50%; height: 1px; background: #666; left: 0; top: 60%;  }
#m4::before {content: ''; position: absolute; width: 1px; height: 100%; background: #666; left: 50%; transform: translateX(-50%);}
#m4 .line::after { content: ''; position: absolute; width: 12px; height: 12px; background: #000; border: 1px solid #666; right: -7px; top: -7px; transform: rotate(45deg); z-index: 1; }
#m4 .cont { display: flex; }
#m4 .cont .content { width: 50%; }
#m4 .cont .cont-L .txt-T { position: relative; height: 57%; padding: 3vh 0 7vh; }
#m4 .cont .cont-L .txt-T .circle { left: 0; bottom: 17%; background: transparent; border: 1px solid #4d4d4d; }
#m4 .cont .cont-L .txt-T .circle span { background: #4d4d4d; }
#m4 .cont .cont-L h3 { line-height : 40px; letter-spacing: -2px; }
#m4 .cont .cont-L h4 { letter-spacing : -1.5px; }
#m4 .cont .cont-L p { line-height: 27px; color: #666;}
#m4 .cont .cont-L .txt-B { height: 43%; padding: 4vh 0; }
#m4 .cont .cont-L .list-wrap { display: flex; align-items: top; }
#m4 .cont .cont-L .list-wrap ul:first-child { width: 47%; }
#m4 .cont .cont-L .list-wrap ul:last-child { width: 53% }
#m4 .cont .cont-L .txt-list { display: flex; flex-direction: column; gap: 15px;}
#m4 .cont .cont-L .txt-list li { position: relative; padding-left: 3%;}
#m4 .cont .cont-L .txt-list li::before {content: ''; position: absolute; width: 4px; height: 4px; background: #000; transform: translate(-13px, 7px); }
#m4 .cont .cont-R { position: absolute; top: 0; left: 50%; width: 50vw; height: 100%; }
#m4 .cont .cont-R .img-wrap { height: 100%; }
#m4 .cont .cont-R img { height: 100%; object-fit: cover; }

#m5 { background: url(../img/main/m5_bg.png)no-repeat center/cover; }
#m5 .cont { padding: 11vh 0; display: flex; align-items: flex-end; gap: 5%; }
#m5 .cont img { display: block; width: 100%; margin-bottom: 15px; }
#m5 .cont .cont_L { text-align: center; }
#m5 .cont .cont_L a p { line-height: 19px; letter-spacing: -0.5px; }
#m5 .cont .cont_R { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
#m5 .cont .cont_R .txt { display: flex; align-items: flex-end; justify-content: space-between; }
#m5 .cont .cont_R .txt h4 { line-height : 21.72px; letter-spacing : -0.45px; }
#m5 .cont .cont_R .txt h4:first-child { border-bottom: 1px solid; padding-bottom: 20px; }
#m5 .cont .cont_R .txt span { line-height : 19px; letter-spacing : -0.64px; color: #4D4D4D; }
#m5 .cont .cont_R .txt h3 { text-align: right; line-height : 83.78px; color: #1A1A1A; }
#m5 .cont .cont_R .certification { display: flex; justify-content: space-between; }
#m5 .cont .cont_R .certification li { width: 23%; }
#m5 .cont .cont_R .certification li a { font-size: 1.125rem; letter-spacing: -0.5px; line-height: 15px; text-align: center; word-break: keep-all; }
#m5 .cont .cont_R .certification li:not(:first-child) a { max-height: 308px; color: #4D4D4D; }
#m5 .cont .cont_R .certification li:not(:first-child) a img { border: 1px solid #DDDEDF; }
#m5 .cont .cont_R .certification li { position: relative; }
#m5 .cont .cont_R .certification li::after { content: ''; width: 38px; height: 38px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);  background: url(../img/main/m5_plus_icon.svg)no-repeat center; opacity: 0; transition: all .4s; }
#m5 .cont .cont_R .certification li:hover::after { opacity: 1; }

#m6 {position: relative;}
#m6::after { content: ''; position: absolute; background: url(../img/main/m6_bg.png)no-repeat center/cover; width: 34vw; height: 690px; bottom: 0; right: 0; z-index: -1; }
#m6 .cont { display: flex; gap: 10%; padding: 8vh 0; }
#m6 .tab-Btn { display: flex; gap: 10%; margin-bottom: 10vh; }
#m6 .tab-Btn li { font-size: 1rem; font-weight: 300; letter-spacing: -1px; cursor: pointer; font-family: 'Pretendard', sans-serif; color: #B2B2B2; }
#m6 .tab-Btn li.on { padding-bottom: 1vh; border-bottom: 1px solid #1A1A1A; color: #1A1A1A; }
#m6 .Product-detail { padding: 5vh 0; color: #1A1A1A; }
#m6 .Product-detail h4.f15 { background: #000; display: inline-block; padding: 1%; }
#m6 .Product-detail p.f18 { margin-bottom: 65px; }
#m6 .Product-detail h4.f18 { margin:80px 0 10px; }
#m6 .Product-detail span.f18 { line-height: 24px; }
#m6 .Product-detail .circle { transform: translateY(40px); background: transparent; border: 1px solid #4D4D4D; }
#m6 .Product-detail .circle span { background: #4D4D4D; }

#topBut{position: absolute;top: -100px; display: flex; background-color: black; font-weight: bold ; color: white;border-radius: 18px;width: 75px; font-size: 1.5rem;height: 75px;right: 6%;align-items: center;justify-content: center; display: none;}
#footer { position: relative; height: 465px !important; background: #000; }
#footer .fp-tableCell { height: 465px !important; }
#footer .f-logo { width: 80px; }
#footer .f-wrap { padding-top: 6vh; display: flex; justify-content: space-between; }
#footer .Left { width: 55vw; }
#footer .Left h4 { margin: 15vh 0 1vh; }
#footer .Left ul { display: flex; flex-wrap: wrap; gap: 3%; color: #B2B2B2; }
#footer .Left ul li { margin: 1vh 0; font-size: 1.1rem; letter-spacing: -1px; }
#footer .Left ul li span { font-weight: 700; margin-right: 10px; }
#footer .Right { width: 11vw; text-align: right; }
#footer .Right li { position: relative; padding: 1vh 0; border-bottom: 1px solid rgba(178, 178, 178, 0.3); }
#footer .Right li:last-child { border: none; }
#footer .Right li::before {content: ''; width: 28px; height: 5px; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: url(../img/main/footer_Right_arrow.svg)no-repeat center; opacity: 0; transition: all .4s; }
#footer .Right li:hover::before { opacity: 1; transform: translateX(-10px); }
#footer .copy { width: 100%; position: absolute; border-top: 1px solid; bottom: 0; }
#footer .copy p { width: 1400px; margin: auto; line-height: 50px; color: #808080; }

/* haeder 번역메뉴 */
.lang {width: 58px;height: 22px !important;background: #7e192d;border-radius: 10px;position: absolute;margin-right: 25px;margin-top: 7px;top: 17px;right: 17%; cursor: pointer;}
.lang > span {display: block;line-height: 22px;font-size: 0.8rem;font-weight: 300;color: #fff;position: relative;z-index: 99;text-align: center;width: 100%;}
.lang .lang_menu {position: absolute;left: 0;top: 0;width: 100%;height: auto;border-radius: 10px;background: #7e1c2f;z-index: 9;padding: 23px 0 0;opacity: 0;transition: all 0.4s;display: none;}
.lang .lang_menu > ul{line-height: 30px;}
.lang .lang_menu > ul > li {padding: 0 12px; text-align: center;}
.lang .lang_menu > ul > li > a {display: inline-block;font-size: 0.8rem;padding: 0 0 2px 0;font-weight: 300;color: #fff;position: relative;}