@charset "utf-8";
/* page-brand-about — 이 화면에서만 쓰는 규칙.

   읽는 차례: theme.css -> base.css -> site.css -> page-*.css -> (손으로 쓴 페이지 CSS)
   색·글자 크기·간격 값은 전부 theme.css 의 변수를 쓴다. */
.brand{overflow: hidden;padding-top:7rem;}
.brand #sec01 .tit,.brand #sec01 .tit > *{font-size:4.2rem;font-weight:500;line-height:0.95;padding-bottom:2rem;text-align:center;font-family: "poppins";color: var(--black);}
.brand #sec01 .des{margin-top:1.5rem;opacity:0.8;font-size:2rem;font-weight:400;line-height:1.6;letter-spacing: -0.08rem;text-align:center;}
.brand_about .section{padding-top:18rem;}
.brand_about .section .sec_tit{font-size:3rem;font-weight:500;line-height:1.33;}
.brand_about .section .des{font-size:2rem;line-height:1.7;letter-spacing: -0.08rem;}
.brand_about .section .des.ft_b{font-weight:500;}
.brand_about .section .des + .des{padding-top:1.5rem;}
.brand_about{padding-bottom:18rem;}
.brand_about #sec01 .txt_box{padding-bottom:6rem;}
.brand_about #sec01 .sec01_banner{width:100%;position: relative;overflow: hidden;aspect-ratio:1/0.494;}
.brand_about #sec01 .video-content{position:relative;width:100%;min-width:1920px;padding-top:49.48%;height:100%;top:0;left:50%;transform: translateX(-50%);}
.brand_about #sec01 .video-content .video-content__control{position:absolute;top:0;left:0;z-index:100;background-color: transparent;width:100%;height:100vh;}
.video-content iframe,.video-content object,.video-content embed{position:absolute;top:0;left:0;width:100%;height:100%;}
.brand_about #sec01 .video__text{position:absolute;bottom:4rem;left:50%;transform: translateX(-50%);z-index:10;font-size:3rem;letter-spacing: -0.06rem;color: var(--white);text-decoration: underline;font-weight:300;transition:color .5s;cursor: pointer;}
.brand_about #sec01 .video__text:hover{color: var(--mainColor);}
.brand_about #sec01 .video__text .arrow{background-image: url("../img/common/arrow_next_w.svg");display: inline-block;background-size:contain;width:2rem;height:2rem;transition:all .5s;}
.brand_about #sec01 .video__text:hover .arrow{background-image: url("../img/common/arrow_next_o.svg");}
.brand_about #sec02{padding:20rem 0;}
.brand_about #sec02 .txt_box{text-align:center;}
.brand_about #sec02 .txt_box h3{font-size:4.6rem;font-weight:700;line-height:1.35;letter-spacing: -0.23rem;}
.brand_about #sec02 .txt_box p{padding-top:6.3rem;font-size:2.4rem;font-weight:500;line-height:1.67;letter-spacing: -0.096rem;}
.brand_about #sec03{background:#fafafa;padding:18rem 0;text-align:center;height:100vh;}
.brand_about .sec03_tit{padding-bottom:10.5rem;}
.brand_about .top{position: relative;}
.brand_about .symbol_box{width:100%;gap:2.6rem;position:absolute;left:50%;top:0;transform: translateX(-50%);opacity:0;}
.brand_about .symbol_box > img{padding-top:4rem;}
.brand_about .symbol_box > div{gap:2.5rem;}
.brand_about .symbol_box > div span{font-size:2.2rem;font-weight:500;letter-spacing: -0.088rem;}
.brand_about .hidden_box{position:absolute;top:16.5%;left:36.5%;width:0;clip-path: inset(0 100% 0 0);width:11rem;height:3.6rem;width:33%;height:27%;transition:clip-path 0.5s;}
.brand_about .desc_box{padding-top:7.2rem;}
.brand_about .desc_tit{font-size:1.9rem;font-weight:700;letter-spacing: -0.076rem;padding-bottom:2.5rem;}
.brand_about .desc_txt{font-size:1.8rem;line-height:1.78;letter-spacing: -0.072rem;}
.brand_about #sec04{text-align:center;}
.brand_about #sec04 .sec_tit{padding-bottom:2.5rem;}
.brand_about #sec04 .des:last-child{padding-bottom:5.5rem;}
.brand_about #sec05 .sec_tit{padding-bottom:6rem;text-align:center;}
.sustain_wrap{display: none;}
.sustain_box{display: grid;grid-template-columns: repeat(2,1fr);}
.sustain_box .img_box,.sustain_box .txt_box{width:100%;height:100%;}
.sustain_box .img_box img{width:100%;}
.sustain_box .txt_box{flex-direction:column;}
.sustain_box .txt_box .sustain_num{font-size:3.2rem;font-weight:500;opacity:0.08;}
.sustain_box .txt_box .sustain_tit{font-size:4.2rem;font-weight:500;margin: .5rem 0 5rem;}
.sustain_box .txt_box .sustain_desc,.sustain_box .txt_box .sustain_desc span{display:block;font-size:2rem;font-weight: normal;line-height:1.6;opacity:0.9;letter-spacing: -0.08rem;}
.sustain_box .txt_box .sustain_desc span +span{margin-top:1.5rem;}
.sustain_box.ver2 .txt_box{padding-left:clamp(11rem,7.639vw,20rem);padding-right:2rem;align-items:flex-start;}
.sustain_box.ver2 .txt_box .sustain_desc,.sustain_box.ver2 .txt_box .sustain_desc span,.sustain_box.ver3 .txt_box .sustain_desc,.sustain_box.ver3 .txt_box .sustain_desc span{opacity:0.8;color:#393939;}
.sustain_box.ver3 .txt_box{padding-left:clamp(11rem,7.639vw,23.5rem);align-items:flex-start;}
.sustain_mark{margin-top:6rem;}
.sustain_mark .mark_box{flex-direction:column;}
.sustain_mark .mark_box + .mark_box{margin-left:3rem;}
.sustain_mark .mark_box p{text-align:center;padding-top: .7rem;height:4.5rem;display:flex;align-items:center;}
.dl-page input[type="text"],.dl-page input[type="password"],.dl-page select{width:100%;height:5.4rem;padding:0 2rem;border-radius: .2rem;border: solid 1px var(--black10);background-color: var(--white);}
.dl-page select{width:100%;height:4.3rem;padding:0 1.8rem;font-size:1.6rem;font-weight: normal;letter-spacing: -0.064rem;color: var(--black);border:0.1rem solid #f0f0f0;border-radius:0.2rem;background: var(--white);}
.dl-page select{background: var(--white) url("../img/common/arr_selectbox.svg")no-repeat center right 1.4rem / 2rem auto;padding-right:4rem;}
.dl-page input[type="radio"],.dl-page input[type="checkbox"]{width:2.4rem;height:2.4rem;margin:0;padding:0;border:0;vertical-align: middle;background: url("../img/common/chk_off.svg") no-repeat center / contain;}
.dl-page input:not(:disabled)[type="radio"]:checked,.dl-page input:not(:disabled)[type="checkbox"]:checked{background: url("../img/common/chk_on.svg")no-repeat center /contain;}
.dl-page textarea{width:100%;border:1px solid var(--border);min-height:10rem;}
.dl-paginate{display:flex;justify-content:center;align-items:center;gap:1.8rem;padding-top:10rem;}
.dl-paginate .last{display: none;}
.dl-paginate ol{display:flex;}
.dl-paginate ol li a{font-size:1.4rem;line-height:1.14;font-family: "Pretendard";opacity:0.2;padding:0 1.2rem;}
.dl-paginate ol li a.this{opacity:1;}
.dl-page .dl-paginate .pagination__prev .pagination--inactive,.dl-page .dl-paginate .pagination__prev.on .pagination--active,.dl-page .dl-paginate .pagination__next.on .pagination--active{display: none;}
.dl-page .dl-paginate .pagination__prev.on,.dl-page .dl-paginate .pagination__next.on{cursor :default;}
.dl-page .dl-paginate .pagination__prev.on .pagination--inactive,.dl-page .dl-paginate .pagination__next.on .pagination--inactive{display:block;}
.dl-page .dl-paginate .pagination__next .pagination--inactive{display: none;cursor : no-drop;pointer-events : none;}