@CHARSET "UTF-8";

/*어바웃어스_브랜드*/
.video_wrap{height: 645px;overflow: hidden;position: relative;}
.video_wrap:before{content:'';position:absolute;right: 220px;bottom: -30px;width: 500px;height: 500px;background: radial-gradient(#000000d4, transparent 70%);}
.video_wrap video{width: 100%;}
.video_wrap dl{position: absolute;color: #fff;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.video_wrap dl dt{font-size: 3rem;}
.video_wrap dl dt span{line-height: 1.4;font-weight: 700;}
.video_wrap dl dd{margin-top: 170px;text-align: right;}

.brand_now{position: relative;width: 1800px;margin: 0 auto;padding: 100px 0;}

.brand_now:before{z-index: -1;content:'';position:absolute;left: 50%;transform: translateX(-50%);top: 0;width: 100vw;height: 100%;background: url(/nanum/site/builder/dir/main/img/menu5933/brand_nowbg.jpg)no-repeat center center / cover;}
.brand_now.f:before{background-image: url(/nanum/site/builder/dir/main/img/menu5933/brand_nowbg2.jpg);}
.brand_now dl{display: flex;justify-content: end;gap: 45px;margin-bottom: 30px;}
.brand_now dl:last-child{margin-bottom: 0;}
.brand_now dt{width: 200px;padding: 50px 0;flex-shrink: 0;font-size: 1.6rem;color: #555;}
.brand_now dt p{font-size: 2.8rem;color: #003c71;}
.brand_now .brand_vision{display: flex;gap: 20px;width: 1300px;}
.brand_now .brand_vision .story{position: relative;display: flex;flex-direction: column;justify-content: end;width: calc(33.3333% - 13px);min-height: 445px;padding: 60px 40px;color: #fff;background: no-repeat center center / cover;box-sizing: border-box;transition: .5s;}
.brand_now .brand_vision .story:before,
.brand_now .brand_vision .story:after{content:'';position: absolute;left: 0;bottom: 0;width: 100%;}
.brand_now .brand_vision .story:before{height: 200px;background: linear-gradient(0deg, rgba(9, 58, 102, .6), transparent);}
.brand_now .brand_vision .story:after{height: 100%;background: #000;opacity: 0;transition: .5s;}
.brand_now .brand_vision .story.n1{background-image: url(/nanum/site/builder/dir/main/img/menu5933/story01.jpg);}
.brand_now .brand_vision .story.n2{background-image: url(/nanum/site/builder/dir/main/img/menu5933/story02.jpg);}
.brand_now .brand_vision .story.n3{background-image: url(/nanum/site/builder/dir/main/img/menu5933/story03.jpg);}
.brand_now .brand_vision .story.n4{background-image: url(/nanum/site/builder/dir/main/img/menu5933/story04-2.jpg);}
.brand_now .brand_vision .story.n5{background-image: url(/nanum/site/builder/dir/main/img/menu5933/story05.jpg);}
.brand_now .brand_vision .story.n6{background-image: url(/nanum/site/builder/dir/main/img/menu5933/story06.jpg);}
.brand_now .brand_vision .story p{z-index: 1;}
.brand_now .brand_vision .story .tit{font-size: 1.8rem;font-weight: 500;transition: .5s;}
.brand_now .brand_vision .story .txt{position: absolute;width: calc(100% - 80px);padding-top: 20px;font-size: 1.5rem;color: #ffffffb0;box-sizing: border-box;transform: translate3d(0, 100%, 0);border-top: 1px solid rgba(255, 255, 255, .2);transition: .5s;opacity: 0;}

.brand_now.f dt{color: #fff;}
.brand_now.f dt p{color: #fff;}
.brand_now.f .brand_vision .story{box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.3);}

/*연혁*/
.luvi_history .history_bg{margin-bottom: 60px;padding: 200px 50px 50px 50px;font-size: 2.8rem;font-weight: 500;color: #fff;background: url(/nanum/site/builder/dir/main/img/menu5933/history_bg.jpg)no-repeat center center / cover;box-sizing: border-box;}
.luvi_history .history_wrap{position: relative;}
.luvi_history .history_wrap dl{display: flex;gap: 135px;}
.luvi_history .history_wrap dl:not(:first-child){margin-top: 70px;}
.luvi_history .history_wrap dt{flex-shrink: 0;width: 60px;font-size: 2rem;font-weight: 500;color: #333;}
.luvi_history .history_wrap dt.active{color: #043b6b;text-decoration: underline;text-decoration-color: #e4ebf2;text-decoration-thickness: 7px;text-underline-offset: -3px;text-decoration-skip-ink: none;}
.luvi_history .history_wrap dd > div{position: relative;margin-bottom: 5px;padding-left: 20px;color: #555;}
.luvi_history .history_wrap dd > div:before{content: '';position: absolute;left: 0;top: 11px;width: 7px;height: 1px;background: #555;}
.luvi_history .sct{position: absolute;left: 120px;top: 0;bottom: 0;}
.luvi_history .line-guide{position: absolute;width: 2px;height: 100%;top: 0;left: 50%;transform: translateX(-50%);background: #eee;}
.luvi_history .line-guide .progress{position: absolute;width: 100%;height: 0;top:0;left: 50%;transform: translateX(-50%);background: #003c71;}
.luvi_history .line-guide .progress:after,
.luvi_history .line-guide .progress:before{content: '';position: absolute;left: -11px;bottom: -24px;width: 24px;height: 24px;}
.luvi_history .line-guide .progress:after{background: url(/nanum/site/builder/dir/main/img/menu5933/his_arrow.png) no-repeat center center / 9px auto;}
.luvi_history .line-guide .progress:before{background: #003c71;box-shadow: 0 0 20px rgba(0, 60, 113, .8);border-radius: 50%;}


/*bi*/
.bi_version{display: flex;gap: 30px;}
.bi_version > div{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 50%;padding: 100px 0;}
.bi_version > div.n1{border: 1px solid #e4e4e4;background: url(/nanum/site/builder/dir/main/img/menu5933/bi_pattern.jpg)repeat center center / 10px auto;}
.bi_version > div.n2{background: #123a67;}
.bi_version > div p{font-size: 0;}
.bi_version > div p:last-child{margin-top: 50px;}

.color_picker{display: flex;gap: 20px;}
.color_picker dl{width: calc(25% - 10px);padding: 30px;padding-top: 100px;color: #fff;font-weight: 300;box-sizing: border-box;}
.color_picker dl.b{background: #0054a7;}
.color_picker dl.n{background: #003c71;}
.color_picker dl.lg{background: #c8c8c8;color: #555;}
.color_picker dl.dg{background: #201612;}
.color_picker dl dt{margin-bottom: 20px;font-size: 1.8rem;font-weight: 500;}
.color_picker dl dd > p > span{display: inline-block;width: 46px;margin-right: 15px;}

.logo_view{position: relative;display: flex;justify-content: space-between;margin-top: 70px;padding: 130px 0;color: #fff;}
.logo_view:before{z-index: -1;content: '';position: absolute;left: 50%;transform: translateX(-50%);top: 0;width: 100vw;height: 100%;background: url(/nanum/site/builder/dir/main/img/menu5933/logoview_bg.jpg)no-repeat center center / cover;}
.logo_view .lcont{flex-shrink: 0;width: 455px;}
.logo_view .lcont dt{padding-bottom: 40px;margin-bottom: 40px;border-bottom: 1px solid rgba(255, 255, 255, .2);}
.logo_view .lcont dt p:not(.imgbox){display: flex;gap: 50px;margin-top: 10px;font-size: 2rem;font-weight: 500;}
.logo_view .lcont dt p:not(.imgbox) span{position: relative;}
.logo_view .lcont dt p:not(.imgbox) span:before{content: '';position: absolute;right: -32px;top: 50%;transform: translateY(-50%);width: 11px;height: 11px;background: url(/nanum/site/builder/dir/main/img/menu5933/bi_plus.png)no-repeat center center / 11px auto;}
.logo_view .lcont dt p:not(.imgbox) span:last-child:before{display: none;}
.logo_view .lcont dd{font-weight: 200;}
.logo_view .combine ul{position: relative;display: flex;justify-content: space-between;width: 100%;margin-top: 20px;padding: 0 35px;font-size: 2rem;font-weight: 200;text-align: center;box-sizing: border-box;}
.logo_view .combine ul:before,
.logo_view .combine ul:after{content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 50px;height: 50px;border-radius: 50%;}
.logo_view .combine ul:after{background: #ffffff38;}
.logo_view .combine ul:before{background: url(/nanum/site/builder/dir/main/img/menu5933/bi_plus.png)no-repeat center center / 11px auto;}
.logo_view .combine ul li > span{display: block;font-size: 3rem;font-weight: 500;}

.symbol_box{display: flex;gap: 30px;}
.symbol_box li{display: flex;flex-direction: column;justify-content: end;width: calc(33.3333% - 19px);height: 470px;padding: 40px 35px;color: #fff;box-sizing: border-box;background: no-repeat center center / cover;}
.symbol_box li.n1{background-image: url(/nanum/site/builder/dir/main/img/menu5933/symbol_bg1.jpg);}
.symbol_box li.n2{color: #111;background-image: url(/nanum/site/builder/dir/main/img/menu5933/symbol_bg2.jpg);}
.symbol_box li.n3{background-image: url(/nanum/site/builder/dir/main/img/menu5933/symbol_bg3.jpg);}
.symbol_box li .tit{margin-bottom: 10px;font-size: 2rem;font-weight: 500;}
.symbol_box li .txt{font-weight: 300;font-size: 1.5rem;}

.typography{position: relative;display: flex;flex-wrap: wrap;gap: 20px 80px;margin-top: 70px;padding: 70px 0;}
.typography:after{z-index: -1;content: '';position: absolute;left: 50%;transform: translateX(-50%);top: 0;width: 100vw;height: 100%;background: #f7f8f8;}
.typography .tit{flex-basis: 100%;}
.typography > div{width: calc(50% - 40px);font-size: 0;}
.typography > div img{width: 100%;height: 100%;object-fit: none;}

.slogan_bg{position: relative;display: flex;flex-direction: column;justify-content: center;height: 500px;color: #fff;text-align: center;}
.slogan_bg:after{z-index: -1;content: '';position: absolute;left: 50%;transform: translateX(-50%);top: 0;width: 100vw;height: 100%;background: url(/nanum/site/builder/dir/main/img/menu5933/bi_slogan_bg.jpg)no-repeat center center / cover;}
.slogan_bg p:not(.tit){font-size: 1.8rem;}
.slogan_bg .tit{margin-bottom: 10px;font-weight: 600;font-size: 3rem;}
.slogan_bg .tit span{display: block;font-size: 1.8rem;font-weight: 300;text-transform: uppercase;}



/********************1800********************/
@media all and (max-width:1800px){

/*어바웃어스_브랜드*/
.brand_now{width: calc(100% - 40px);}

/*bi*/
.slogan_bg{height: 400px;}

}


/********************1800********************/
@media all and (max-width:1300px){

/*어바웃어스_브랜드*/
.video_wrap video{height: 100%;object-fit: cover;}

.brand_now .brand_vision{width: 100%;}
.brand_now .brand_vision .story{padding: 40px 30px;}

/*bi*/
.slogan_bg{height: 370px;}

.typography{flex-direction: column;gap: 20px;}
.typography > div{width: 100%;}

}

/********************태블릿********************/
@media all and (max-width:1024px){

/*어바웃어스_브랜드*/
.video_wrap dl{text-align: center;}
.video_wrap dl dt{font-size: 2.1rem;}
.video_wrap dl dd{margin-top: 20px;text-align: center;}

.brand_now{padding: 50px 0;}
.brand_now dl{flex-direction: column;gap: 20px;}
.brand_now dl dt{width: 100%;padding: 0;}
.brand_now .brand_vision .story:before{height: 500px;}
.brand_now .brand_vision .story .txt{position: static;width: 100%;margin-top: 20px;transform: none;opacity: 1;}

/*연혁*/
.luvi_history .history_bg{padding: 120px 50px 50px 50px;}
.luvi_history .history_wrap dl{gap: 80px;}
.luvi_history .history_wrap dl:not(:first-child){margin-top: 40px;}
.luvi_history .sct{left: 95px;}

/*bi*/
.bi_version{flex-direction: column;}
.bi_version > div{width: 100%;}
.symbol_box{flex-direction: column;}
.symbol_box li{width: 100%;}
.logo_view{flex-direction: column;gap: 40px;padding: 80px 0;}
.logo_view .lcont{width: 100%;text-align: center;}
.logo_view .lcont dt{padding-bottom: 25px;margin-bottom: 25px;}
.logo_view .lcont dt .imgbox{width: 100px;height: auto;margin: 0 auto;}
.logo_view .lcont dt .imgbox img{width: 100%;height: 100%;}
.logo_view .lcont dt p:not(.imgbox){justify-content: center;}
.logo_view .combine{text-align: center;}
.logo_view .combine .imgbox{width: 250px;height: auto;margin: 0 auto;}
.logo_view .combine .imgbox img{width: 100%;height: 100%;}
.logo_view .combine ul{width: 300px;margin: 20px auto 0;}

.color_picker{flex-wrap: wrap;}
.color_picker dl{width: calc(50% - 10px);}


}

/********************모바일********************/
@media all and (max-width:767px){

/*어바웃어스_브랜드*/
.video_wrap{height: 400px;}

.brand_now .luvisbrand{height: auto;}
.brand_now .brand_vision{flex-direction: column;}
.brand_now .brand_vision .story{width: 100%;min-height: auto;padding: 25px;padding-top: 120px;}
.brand_now .brand_vision .story:before{height: 100%;}
.brand_now .brand_vision .story .txt{margin-top: 10px;padding-top: 10px;font-size: 1.8rem;}

/*연혁*/
.luvi_history .history_bg{padding: 80px 30px 30px 30px;}
.luvi_history .history_wrap dl{gap: 15px;padding-left: 35px;}
.luvi_history .history_wrap dt{width: 40px;}
.luvi_history .history_wrap dd > div{padding-left: 13px;}
.luvi_history .history_wrap dd > div:before{top: 8px;width: 5px;}
.luvi_history .sct{left: 10px;}
.luvi_history .line-guide .progress:after,
.luvi_history .line-guide .progress:before{left: -7px;bottom: -13px;width: 16px;height: 16px;}
.luvi_history .line-guide .progress:after{background-size: 7px auto;}

/*bi*/
.symbol_box li{height: auto;padding: 25px;padding-top: 150px;}
.symbol_box li .txt{font-size: 1.9rem;}

.logo_view{margin-top: 40px;}
.logo_view .combine .imgbox{width: 200px;}

.color_picker{gap: 10px;}
.color_picker dl{width: 100%;padding: 20px;padding-top: 50px;}
.color_picker dl dt{margin-bottom: 10px;font-size: 1.9rem;}
.color_picker dl dd{font-size: 1.8rem;}

.bi_version > div{padding: 60px 20px;box-sizing: border-box;}
.bi_version > div p{width: 85%;}
.bi_version > div p:last-child{margin-top: 20px;}
.bi_version > div p img{width: 100%;}

.typography{margin-top: 40px;padding: 40px 0;}
.typography > div{width: 65%;margin: 0 auto;}
.typography > div img{object-fit: cover;}

.slogan_bg{height: 250px;}

}


/********************500********************/
@media all and (max-width:500px) {

/*bi*/
.typography > div{width: 100%;}
	
}


/********************웹********************/
@media all and (min-width:1025px) {

/*어바웃어스_브랜드*/
.brand_now .brand_vision .story:hover{filter: grayscale(1);}
.brand_now .brand_vision .story:hover:after{opacity: .6;}
.brand_now .brand_vision .story.n3:hover:after,
.brand_now .brand_vision .story.n4:hover:after{display: none;}
.brand_now .brand_vision .story:hover .tit{transform: translate3d(0, -240%, 0);opacity: 1;}/*텍스트 4줄일때*/
.brand_now .brand_vision .story.n4:hover .tit,
.brand_now .brand_vision .story.n5:hover .tit{transform: translate3d(0, -200%, 0);}/*텍스트 3줄일때*/
.brand_now .brand_vision .story:hover .txt{transform: translate3d(0, 0, 0);opacity: 1;}


}