@import url("common.css");

/* 메인공통 */
*{box-sizing: border-box; position: relative;}
h2.title{font-size: 68px; font-weight: 700; line-height: 125%; word-break: keep-all; letter-spacing: 1.5pt}
h3.title{font-size: 67px; font-weight: 800; letter-spacing: 0.2pt; line-height: 100%; text-transform: uppercase; font-family: 'Prompt', sans-serif; word-break: keep-all;}
h3.title span{font-size: 65px; font-weight: 200; letter-spacing: 0.2pt; line-height: 100%; font-family: inherit; word-break: keep-all;}
h5.title{font-size: 33px; font-weight: 700; line-height: 100%; word-break: keep-all;}

.tit{font-size: 28px; font-weight: 200; line-height: 1; padding: 40px 0 0 0; word-break: keep-all;}
.sub_tit{font-size: 26px; font-weight: 300; line-height: 1; word-break: keep-all;}
.txt{font-size: 20px; font-weight: 300;  line-height: 1; word-break: keep-all;}
.s_txt{font-size: 16px; font-weight: 400; line-height: 175%;}
.s_tit{font-size: 14px; font-weight: 500; letter-spacing: 0.5pt; line-height: 1; text-transform: uppercase; font-family: 'Prompt', sans-serif;}

.delay0{opacity: 0; animation: fade 1s 0.4s both;}
.delay1{opacity: 0; animation: fade 1s 0.6s both;}
.delay2{opacity: 0; animation: fade 1s 0.8s both;}
.delay3{opacity: 0; animation: fade 1s 1s both;}

@keyframes fade{
	0%{transform: translateY(-30px); opacity: 0;}
	100%{transform: translateY(0px); opacity: 1;}
}

/* 풀페이지 인디케이터 */
#fp-nav ul li a span::after{content: ""; width: 12px; height: 12px; background: url(/img/indicator.png) no-repeat center / cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; opacity: 0; transition: .5s;}
#fp-nav ul li a.active span::after{width: 22px; height: 22px; transform: translate(-50%, -50%) rotate(180deg); visibility: visible; opacity: 1;}
#fp-nav ul li:hover a span::after{width: 16px; height: 16px; transform: translate(-50%, -50%) rotate(90deg); visibility: visible; opacity: 1;}
#fp-nav ul li:hover a.active span::after{width: 22px; height: 22px; transform: translate(-50%, -50%) rotate(270deg);}
#fp-nav.action ul li a span{background-color: #bcbcbc;}

/* 비주얼 */
#visual{width: 100%; height: 100vh; background: black;}
#visual video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55;}
#visual .container{color: #fff; padding-top: 0;}
#visual h2.title{animation: text 1.5s both;}
#visual .tit{color: rgba(255, 255, 255, 0.8); animation: text 1.5s 0.45s both; letter-spacing: 0.5pt}

.jarallax {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity:0.6;
   overflow: hidden;
}
.jarallax iframe{position:absolute; width: 100%; height: 100%;}

@keyframes text{
  0%{transform: translateY(-20px); opacity: 0;}
  100%{transform: translateY(0px); opacity: 1;}
}

/* 비즈니스 */
#business{background: #f0f0f0 url(/img/business_bg.png) no-repeat top -45px right 16% / 547px auto;}
#business .fp-tableCell{display: flex; flex-direction: column; justify-content: space-between; padding-top: 100px;}
#business .container{height: auto; padding-top: 0; margin-bottom: 80px;}
#business h3.title{color: #222; text-align: center;}
#business .sub_tit{color: #222; text-align: center; margin-top: 14px;}
#business .busi_cont{height: 100%; display: grid; grid-template-columns: repeat(3, 1fr);}
#business .cont{height: 100%; overflow: hidden;}
#business .cont>img{width: 100%; height: 100%; object-fit: cover; transition: 0.5s;}
#business .cont .background{display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); transition: 0.5s; overflow: hidden; padding: 30px; box-sizing: border-box;}
#business .background>img{padding-bottom: 28px; max-width: 58px; object-fit: contain; transform-origin: bottom; transform: translateY(30px); opacity: 0; transition: .3s;}
#business .background .s_tit{color: rgba(255, 255, 255, 0.5); padding: 30px 0 16px; text-align: center; transition: .3s;}
#business .background h5.title{text-align:center; letter-spacing: 0.4pt; color: #fff; font-weight: 300; transition: .3s;}
#business .background .txt{color: rgba(255, 255, 255, 0.7); padding: 0; transform-origin: bottom; transform: translateY(30px); opacity: 0; transition: .3s; text-align: center; line-height: 155%; height: 0;}
#business .background .more_btn{transform-origin: bottom; transform: translateY(50px); opacity: 0; transition: .3s;}

#business .cont:hover>img{filter: grayscale(1);}
#business .cont:hover .background{background: rgba(23, 28, 97, 0.93);}
#business .cont:hover h5.title{font-weight: 700;}
#business .cont:hover .background>img{transform: translateY(0); opacity: 1; transition: 0.5s; transition-delay: 0.3s;}
#business .cont:hover .txt{transform: translateY(0); opacity: 1; transition: 0.5s; padding: 26px 0 34px; height: auto;}
#business .cont:hover .more_btn{transform: translateY(0); opacity: 1; transition: 0.5s; transition-delay: 0.6s;}
#business .cont:hover .more_btn:hover{background-position: 100% 100%; box-shadow: 0px 5px 25px 0px rgba(235, 100, 0, 0.2); transition-delay: 0s;}

/* tech */
#tech{background: #f0f0f0;}
#tech .container{display: flex; align-items: center;}
#tech .img_area{}
#tech .img_area img{max-width: 525px; width: 100%;}
#tech .img_area .pc{display: block;}
#tech .img_area .mo{display: none;}
#tech .text_area{width: calc(100% - 525px); padding-left: 90px;}
#tech .text_area h3.title{color: #222;}
#tech .text_area p{color: #777; padding: 15px 0 52px;}

/* media */
#media{height: calc(100% - 164px); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f0f0f0;}
#media .container{}
#media h3.title{color: #222; width: max-content; margin: 0 auto 65px;}
#media h3.title span{font-size: 33px; position: absolute; bottom: 5.2px; left: calc(100% - 10px);}
#media .media_list{}
#media .media_list li{padding: 25px 0; border-top: 1px solid #ddd;}
#media .media_list li:last-child{border-bottom: 1px solid #ddd;}
#media .media_list li a{display: flex; gap: 40px; align-items: center;}
#media .media_list li a .img_area{position:relative; width: 270px;}
#media .media_list li a .img_area img.img_area {width: 100%; background-repeat:no-repeat; background-size:cover; background-position:center;}
#media .media_list li a .img_area img.play {position:absolute; top:50%; left:50%; transform:translate(-25px,-25px); max-width:50px;}
#media .media_list li a .text_area{width: calc(100% - 310px);}
#media .media_list li a .txt{color: #222; font-weight: 400; line-height: 155%; margin-bottom: 10px;}
#media .media_list li a .s_txt{color: #888; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}


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

} 

@media all and (max-width:1030px){
#tech .text_area p br{display: none;}
}

/************************************************************************
	@media ~980px
************************************************************************/
@media all and (max-width:980px){
/* 메인공통 */
h2.title{font-size: 50px;}
h3.title{font-size: 49px;}
h3.title span{font-size: 44px; font-weight: 200;}
h5.title{font-size: 24px;}

.tit{font-size: 23px; font-weight: 200; padding: 28px 0 0 0;}
.sub_tit{font-size: 21px; font-weight: 400;}
.txt{font-size: 17px; font-weight: 400;}
.s_txt{font-size: 14px;}
.s_tit{font-size: 13px;}

.section{padding: 110px 0;}
#media{padding: 110px 0 !important;}
#bottom_wrap,
#visual{padding: 0;}

/* 비주얼 */
#visual .container{color: #fff; padding-top: 0;}
#visual h2.title{}
#visual .tit{}

/* 비즈니스 */
#business{background: #f0f0f0 url(/img/business_bg.png) no-repeat top -45px right -3% / 350px auto;}
#business .fp-tableCell{padding-top: 0px;}
#business .container{height: auto; padding-top: 0;}
#business .sub_tit{margin-top: 10px;}
#business .busi_cont{height: 500px;}
#business .cont{max-height: initial;}
#business .cont .background{padding: 20px;}
#business .background>img{max-width: 48px;}
#business .background .s_tit{padding: 0 0 12px;}
#business .cont:hover .s_tit{padding: 16px 0 12px;}
#business .cont:hover .txt{padding: 18px 0 26px;}
#business .background h5.title{font-weight: 400;}

/* tech */
#tech .container{padding-top: 0;}
#tech .img_area{width: 55%}
#tech .img_area img{max-width: 525px; width: 100%;}
#tech .text_area{width: 45%; padding-left: 40px;}
#tech .text_area h3.title{color: #222;}
#tech .text_area p{color: #777; padding: 12px 0 36px;}

/* media */
#media{height: 100%; padding-top: 0;}
#media h3.title{margin: 0 auto 42px;}
#media h3.title span{font-size: 27px; bottom: 5.2px; left: calc(100% - 9px);}
#media .media_list li{padding: 20px 0;}
#media .media_list li a{display: flex; gap: 30px;}
#media .media_list li a .img_area{width: 240px;}
#media .media_list li a .text_area{width: calc(100% - 270px);}
#media .media_list li a .txt{margin-bottom: 10px;}
#media .media_list li a .sub_txt{}

}



/************************************************************************
	@media ~680px
************************************************************************/
@media all and (max-width:680px){
/* 메인공통 */
h2.title{font-size: 38px;}
h3.title{font-size: 37px;}
h3.title span{font-size: 32px; font-weight: 200;}
h5.title{font-size: 20px;}

.tit{font-size: 19px; font-weight: 200; padding: 16px 0 0 0; line-height: 130%;}
.sub_tit{font-size: 17px;}
.txt{font-size: 14px;}
.s_txt{font-size: 13px;}
.s_tit{font-size: 12px;}

.section{padding: 60px 0;}
#media{padding: 60px 0 !important;}
#bottom_wrap,
#visual{padding: 0;}


/* 비지니스 */
#business{background: #f0f0f0 url(/img/business_bg.png) no-repeat top -45px right -3% / 240px auto;}
#business .fp-tableCell{padding-top: 0;}
#business .container{margin-bottom: 30px;}
#business .sub_tit{margin-top: 8px;}
#business .busi_cont{height: auto;}
#business .cont{max-height: 280px;}
#business .busi_cont{display: grid; grid-template-columns: repeat(1, 1fr);}
#business .cont:nth-child(2){grid-row: initial;}
#business .cont:nth-child(1){grid-column: initial; grid-row: initial;}

#business .cont .background{padding: 20px;}
#business .background>img{max-width: 48px; padding-bottom:initial}
#business .background .s_tit{padding: 0 0 12px;}
#business .cont:hover .s_tit{padding: 16px 0 12px;}
#business .cont:hover .txt{padding: 18px 0 22px;}
#business .background h5.title{font-weight: 400;}

/* tech */
#tech .container{display: block;}
#tech .img_area{width: 100%; margin-bottom: 20px;}
#tech .img_area img{max-width: initial; width: 100%;}
#tech .img_area .pc{display: none;}
#tech .img_area .mo{display: block;}
#tech .text_area{width: 100%; padding-left: 0px;}
#tech .text_area h3.title{color: #222;}
#tech .text_area p{color: #777; padding: 10px 0 20px;}

/* media */
#media h3.title{margin: 0 auto 30px;}
#media h3.title span{position: relative; font-size: 27px; bottom: initial; left: -7px;}
#media .media_list li a{display: flex; gap: 20px;}
#media .media_list li a .img_area{width: 220px;}
#media .media_list li a .text_area{width: calc(100% - 240px);}
}



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

/* business */
#business{background: #f0f0f0 url(/img/business_bg.png) no-repeat top -45px right -10% / 210px auto;}

/* media */
#media{height: 100%; padding-top: 0;}
#media .media_list li{padding: 20px 0;}
#media .media_list li a{display: block; gap: 0px;}
#media .media_list li a .img_area{width: 100%;}
#media .media_list li a .text_area{width: 100%;}
#media .media_list li a .txt{margin: 20px 0 10px;}
#media .media_list li a .sub_txt{}

}



/************************************************************************
	@media ~320px
************************************************************************/
@media all and (max-width:380px){
/* business */
#business{background: #f0f0f0 url(/img/business_bg.png) no-repeat top -45px right -18% / 210px auto;}

}

@media all and (max-width:320px){


}