@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2020-11-25
******************************************************** */

/* ****************** 01 회사소개 :: 01 유니드 소개 ********************** */
.intro-con01{position: relative; min-height: 753px; padding-top: 120px;}
.intro-con01-bg{position: absolute; top: 0; left: 0; width: 100%; height: 753px; background: url("../images/content/intro_con01_bg.jpg") center/cover no-repeat;/*  -webkit-transition:clip 0.6s 0.2s; transition:clip 0.6s 0.2s; clip:rect(0,1920px,753px,1920px); */}
/* .intro-con01-bg.aos-animate {clip:rect(0,1920px,753px,0);} */

.intro-con01-inner{position: absolute; width: 100%; bottom: 0; left: 0;}
.intro-con01-inner:before{position: absolute; width: 1137px; top: 0; bottom: 0; left: 0; content: ''; z-index: 1;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#40060b+0,925733+100 */
background: #40060b; /* Old browsers */
background: -moz-linear-gradient(right,  #40060b 0%, #925733 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(right,  #40060b 0%,#925733 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to left,  #40060b 0%,#925733 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40060b', endColorstr='#925733',GradientType=1 ); /* IE6-9 */
}
.intro-con01-inner:after{position: absolute; left: 1114px; top: 0; width: 120px; height: calc(100% + 1px); display: block; content: ''; background-color: var(--main-color); -webkit-transform: skew(-10deg); transform: skew(-10deg);}

@media all and (min-width:1921px){
	.intro-con01-inner:before{width: 65%;}
	.intro-con01-inner:after{left: 63%; margin-left: 0;}
	.intro-con01-inner:after{height:100%;}
}

.intro-con01-inner .area-box{padding-top: 0px; padding-bottom: 0px;}
.intro-con01-inner .area{padding-top: 125px; padding-bottom: 125px; position: relative;}
.intro-con01-year{position: absolute; top: -119px; left: 0; z-index:1;}
.intro-con01-year p{font-size: 38px; font-weight: 300; letter-spacing: -0.35px; color: #fff;}
.intro-con01-year p b{display: block; font-size: 90.5px; font-weight: 700; letter-spacing: -0.75px; line-height:1.1;}
.intro-con01-year p b br{display: none;}
.intro-con01-txt{width: 933px; position: relative; z-index: 1;}
.intro-con01-txt .txt01{font-size: 22px; line-height: 1.7; letter-spacing: -0.5px; color: #fff;}
.intro-con01-txt .txt02{margin-top: 50px; font-size: 18.5px; line-height: 1.7; letter-spacing: -0.5px; color: rgba(255,255,255,0.9);}
.intro-con01-btn{position: absolute; right: 0; bottom: 31px;}
.intro-con01-btn .btn{display: inline-block;}
.intro-con01-btn .btn span{display: inline-block; vertical-align: middle;}
.intro-con01-btn .btn .txt{font-size: 15px; font-weight: 600; color: #000;}
.intro-con01-btn .btn .cir{margin-left: 10px; width: 45px; height: 45px; text-align: center; background-color: var(--main-color); -webkit-border-radius: 100%; border-radius: 100%;}
.intro-con01-btn .btn .cir i{font-size: 20px; color: #fff; line-height: 45px;}

.intro-con01-btn:before{position: absolute; top: 50%; left: -380px; display: block; content: ''; width: 0px; height: 1px; background-color: var(--main-color); -webkit-transition: all 0.4s; transition: all 0.4s;}
.intro-con01-btn.aos-animate:before{width: 360px; transition-delay:1.2s;}

.intro-con02{padding: 285px 0 200px;}
.intro-con02 .area{position: relative;}
.intro-con02-txt{width: 50%; float: right;}
.intro-con02-txt h5{font-size: 25.5px; line-height: 1.6; letter-spacing: -0.75px; color: #000;}
.intro-con02-txt p{margin-top: 40px; font-size: 18.5px; line-height: 1.7; letter-spacing: -0.75px; color: #303030;}
.intro-con02-txt a{position: relative; padding-left: 75px; margin-top: 60px; height: 36px; display: inline-block;}
.intro-con02-txt a:before,
.intro-con02-txt a:after{position: absolute; top: 0; left: 0; display: block; content: ''; width: 36px; height: 36px; background-color: var(--main-color2); -webkit-transform: skew(-15deg); transform: skew(-15deg); -webkit-transition: all 0.3s; transition: all 0.3s;}
.intro-con02-txt a:before{top: 10px; left: 10px; background-color: #e5e5e5;}
.intro-con02-txt a i{position: absolute; top: 0; left: 9px; font-size: 18px; line-height: 36px; color: #fff; z-index: 1;}
.intro-con02-txt a span{display: inline-block; font-size: 13px; line-height: 36px; font-weight: 500; letter-spacing: 0.25px; color: var(--main-color2); -webkit-transition: all 0.3s; transition: all 0.3s;}
.intro-con02-img-m{display: none;}
.intro-con02-img .img01{position: absolute; top: -140px; left: 0;}
.intro-con02-img .img02{position: absolute; top: 203px; left: 345px;}

@media all and ( min-width: 801px ){
	.intro-con02-txt a:hover span{-webkit-transform: translateX(-5px); transform: translateX(-5px)}
	.intro-con02-txt a:hover:before,
	.intro-con02-txt a:hover:after{-webkit-transform: skew(0); transform: skew(0);}
	.intro-con02-txt a:hover:before{top: 0; left: 0;}
}

.intro-con03{padding: 200px 0;}
.intro-con03 .area{position: relative;}
.intro-con03 .intro-con02-txt{padding-left: 0%; float: left; -webkit-box-sizing: border-box; box-sizing: border-box;}
.intro-con03-img-m{display: none;}
.intro-con03-img .img01{position: absolute; top: -140px; right: 0;}
.intro-con03-img .img02{position: absolute; top: 205px; right: 345px;}
.intro-con03-img .img03{position: absolute; top: 472px; right: 202px;}

.intro-con04{padding: 0; background: url("../images/content/intro_con04_bg.jpg") center/cover no-repeat;}
.intro-con04 .area{width: 100%; height: 930px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box;}
.intro-con04-top{font-size: 0;}
.intro-con04-top .tit{width: 100%; font-size: 88px; line-height: 1.22; letter-spacing: -0.63px; color: #fff; display: inline-block; vertical-align: middle; font-weight:400; text-align:center; margin-top:-20px;}
.intro-con04-top .txt{/* width: calc(100% - 445px); */ display: inline-block; vertical-align: middle;}
.intro-con04-top .txt .txt01{font-size: 26px; line-height: 1.46; letter-spacing: -0.5px; color: #fff;}
.intro-con04-top .txt .txt02{margin-top: 20px; font-size: 18.5px; line-height: 1.7; letter-spacing: -0.5px; color: rgba(255,255,255,0.88);}
.intro-con04-bottom{width: 100%; margin-top:84px;}
.intro-con04-list{margin: 0 -3px; display: flex; flex-wrap: wrap;}
.intro-con04-item{width: calc(20% - 6px); margin: 0 3px; padding: 40px 10px 45px; text-align: center; background-color: rgba(255,255,255,0.93); -webkit-box-sizing: border-box; box-sizing: border-box;}
.intro-con04-img{}
.intro-con04-img img{display: inline-block; height: 62px;}
.intro-con04-tit{margin-top: 30px; font-size: 22.5px; font-weight: 700; letter-spacing: -0.75px; color: #000;}
.intro-con04-txt{margin-top: 50px; font-size: 19px; line-height: 1.5; letter-spacing: -1.5px; color: #000;}
.intro-con04-txt span{display: block; font-size:15px; line-height:2; color:#959595; font-weight:600; letter-spacing:0px;}

/* 추가영역 */
.intro-con02.intro-con02-plus{padding: 200px 0 340px;}
.intro-con02-plus .intro-con02-img .img01{position: absolute; top: -140px; left: 0;}
.intro-con02-plus .intro-con02-img .img02{position: absolute; top: 102px; left: 345px;}


@media all and ( max-width: 1920px ){
	.intro-con01-inner:before{width: 70%;}
	.intro-con01-inner:after{left: 67%;}
}
@media all and ( max-width: 1530px ){
	.intro-con01-inner:before{width: 74%;}
	.intro-con01-inner:after{left: 70.5%; height:100%;}
	.intro-con01-txt {width: 61%;}
	.intro-con01-txt .pc-br{display: none;}
	.intro-con01-btn {right: 30px;}
	.intro-con01-btn:before{left: 15px;}
	.intro-con01-btn.aos-animate:before{width: calc(100% - 230px);}

	.intro-con02 .area,
	.intro-con03 .area{padding: 0; margin: 0 30px; width: calc(100% - 60px);}
}
@media all and ( max-width: 1366px ){
	.intro-con01-inner:before{width: 74%;}
	.intro-con01-inner:after{left: 70%; -webkit-transform: skew(-7deg); transform: skew(-7deg);}
	.intro-con01-year{top:-109px;}
	.intro-con01-year p b{font-size:80px;}
	.intro-con02{padding: 200px 0 200px;}
	.intro-con03{padding: 200px 0 200px;}
	.intro-con02.intro-con02-plus{padding:200px 0 270px;}
	.intro-con03 .intro-con02-txt {padding-left: 0;}
	.intro-con02-txt .pc-br{display: none;}
	.intro-con02-img{-webkit-transform: scale(0.9); transform: scale(0.9); transform-origin: left;}
	.intro-con03-img{-webkit-transform: scale(0.9); transform: scale(0.9); transform-origin: right;}
}
@media all and ( max-width: 1220px ){
	.intro-con02{padding: 170px 0 170px;}
	.intro-con03{padding: 170px 0 170px;}
	.intro-con02.intro-con02-plus{padding:170px 0 240px;}
	.intro-con02-img{-webkit-transform: scale(0.8); transform: scale(0.8); transform-origin: left;}
	.intro-con03-img{-webkit-transform: scale(0.8); transform: scale(0.8); transform-origin: right;}
}
@media all and ( max-width: 1120px ){
	.intro-con01-year{top:-101px;}
	.intro-con01-year p b{font-size:70px;}
	.intro-con02-img{-webkit-transform: scale(0.7); transform: scale(0.7); transform-origin: left;}
	.intro-con03-img{-webkit-transform: scale(0.7); transform: scale(0.7); transform-origin: right;}
}
@media all and ( max-width: 1024px ){
	.intro-con01-year{top:-92px;}
	.intro-con01-year p b{font-size:60px;}
	.intro-con01{position: relative; padding-top: 600px; min-height: auto;}
	.intro-con01-bg{position: absolute; height: 600px; clip:rect(0,1920px,600px,1920px);}
	.intro-con01-bg.aos-animate {clip:rect(0,1920px,600px,0);}
	.intro-con01-inner .area {padding-top: 75px; padding-bottom: 20px;}
	.intro-con01-inner{position: relative; bottom: auto; top: -210px;}
	.intro-con01-inner:before{width: 88%;}
	.intro-con01-inner:after{left: 84%; width: 80px;}
	.intro-con01-txt{width: 87%;}
	.intro-con01-btn{position: relative; right: 0; bottom: auto; top: 100px; text-align: right;}
	.intro-con01-btn:before{left: 0;}
	.intro-con01-btn.aos-animate:before{width: calc(100% - 210px);}

	.intro-con02{padding: 130px 0 130px;}
	.intro-con03{padding: 130px 0 130px;}
	.intro-con02.intro-con02-plus{padding:130px 0 170px;}
	.intro-con02 .area,
	.intro-con03 .area{margin: 0 15px; width: calc(100% - 30px);}
	.intro-con02-img{-webkit-transform: scale(0.6); transform: scale(0.6); transform-origin: left;}
	.intro-con03-img{-webkit-transform: scale(0.6); transform: scale(0.6); transform-origin: right;}

	.intro-con04{padding: 120px 0 100px;}
	.intro-con04 .area{height: auto; display: block;}
	.intro-con04-top .tit{width: 100%; padding-right: 0; display: block;}
	.intro-con04-top .tit .pc-br{display: none;}
	.intro-con04-top .txt{margin-top: 20px; width: 100%; display: block;}
	.intro-con04-bottom{margin-top: 160px;}
	.intro-con04-list{margin: -3px 0;}
	.intro-con04-item{width: 100%; margin: 3px 0; padding: 50px 60px; text-align: left; font-size: 0;}
	.intro-con04-img{width: 120px; display: inline-block; vertical-align: middle; text-align: center;}
	.intro-con04-txtgroup{width: calc(100% - 120px); padding-left: 55px; display: inline-block; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.intro-con04-tit{margin-top: 0;}
	.intro-con04-txt{margin-top: 20px;}
}
@media all and ( max-width: 800px ){
	.intro-con01{padding-top: 300px;}
	.intro-con01-bg{height: 300px; clip:rect(0,1920px,300px,1920px);}
	.intro-con01-bg.aos-animate {clip:rect(0,1920px,300px,0);}
	.intro-con01-inner{top: -105px;}
	.intro-con01-inner:before{width: 88%;}
	.intro-con01-inner:after{left: 84%; width: 50px;}
	.intro-con01-inner .area{padding:55px 0 10px;}
	.intro-con01-year{top: -60px; left: 0;}
	.intro-con01-year p{font-size: 24px;}
	.intro-con01-year p b{font-size: 40px;}
	.intro-con01-txt .txt01{font-size: 16px;}
	.intro-con01-txt .txt02{margin-top: 20px; font-size: 14px;}
	.intro-con01-btn{top: 75px; right: 0;}
	.intro-con01-btn .btn .txt{font-size: 13px;}
	.intro-con01-btn .btn .cir{margin-left: 10px; width: 35px; height: 35px;}
	.intro-con01-btn .btn .cir i{font-size: 15px; line-height: 35px;}

	.intro-con01-btn.aos-animate:before{width: calc(100% - 180px);}

	.intro-con02{padding: 15px 0 45px;}
	.intro-con02-txt{margin-top: 25px; width: 100%; float: none;}
	.intro-con02-txt h5{font-size: 18px;}
	.intro-con02-txt p{margin-top: 20px; font-size: 14px;}
	.intro-con02-txt a{padding-left: 60px; margin-top: 30px;}
	.intro-con02-txt a:before,
	.intro-con02-txt a:after{position: absolute; top: 0; left: 0;}
	.intro-con02-txt a:before{top: 7px; left: 7px;}
	.intro-con02-txt a i{position: absolute; top: 0; left: 9px; font-size: 14px; line-height: 36px;}
	.intro-con02-txt a span{font-size: 11px; line-height: 36px;}

	.intro-con02-img .img01,
	.intro-con02-img .img02,
	.intro-con03-img .img01,
	.intro-con03-img .img02,
	.intro-con03-img .img03{display: none;}
	.intro-con02-img-m,
	.intro-con03-img-m{display: block; position: relative; width: 100%; height: 0; padding-top: 52.83%;}

	.intro-con03{padding: 45px 0 50px;}
	.intro-con03 .intro-con02-txt{margin-top: 25px; float: none;}

	.intro-con02.intro-con02-plus{padding:45px 0 50px;}

	.intro-con04{padding: 45px 0 50px;}
	.intro-con04-top .tit{font-size: 30px; margin-top:0;}
	.intro-con04-top .txt .txt01{font-size: 18px;}
	.intro-con04-top .txt .txt02{margin-top: 15px; font-size: 14px;}
	.intro-con04-bottom{margin-top: 65px;}
	.intro-con04-item{width: 100%; margin: 3px 0; padding: 40px 30px;}
	.intro-con04-img{width: 60px;}
	.intro-con04-txtgroup{width: calc(100% - 60px); padding-left: 30px;}
	.intro-con04-img img{height: 40px;}
	.intro-con04-tit{font-size: 16px;}
	.intro-con04-txt{margin-top: 15px; font-size: 15px;}
}
@media all and ( max-width: 700px ){
	.intro-con04{background: #000 url("../images/content/intro_con04_bg_m.jpg") center bottom no-repeat; background-size: cover;}
}
@media all and ( max-width: 640px ){
	.intro-con01-inner:after{left: 84%; -webkit-transform: skew(-5deg); transform: skew(-5deg);}

	.intro-con01-year{top:-103px;}
	.intro-con01-year p b .m-br{display: block;}
}
@media all and ( max-width: 480px ){
	.intro-con01-inner:before{width: 84%;}
	.intro-con01-inner:after{left: 77%; -webkit-transform: skew(-5deg); transform: skew(-5deg);}
}


/* ****************** 우측 메뉴 ********************** */
.sub-rightbar-menu{position: fixed; top:50%; right:0; transform:translate(100%, -50%); transition:all 0.5s; z-index:999}
.sub-rightbar-menu .right-item{display: block; width:155px; text-align:center; padding:20px 10px; box-sizing:border-box; background:#aa8066;}
.sub-rightbar-menu .right-item:nth-child(2){background:#404040;}
.sub-rightbar-menu .right-item .txt{font-size:15.5px; line-height:1.5; letter-spacing:-0.6px; color:#fff; margin-top:15px;}

.sub-rightbar-menu.on{transform:translate(0, -50%);}
.sub-rightbar-menu.on-bottom{transform:translate(100%, -50%);}

@media all and (max-width:1366px){
	.sub-rightbar-menu .right-item{width:120px;}
}
@media all and (max-width:1220px){
	.sub-rightbar-menu{display: none;}
}