@charset "UTF-8";

/* 헤더 */
.header {position: fixed; top: 0; left: 0; width: 100%; height:85px; align-items: center;background-color: rgba(255,255,255,1); z-index: 10000; display: flex; justify-content: space-between; padding: 0 50px; border-bottom:1px solid #eee;}
.header .logo {padding: 15px; font-size:25px; color: #fff; text-align: center;}
.right_menu{width:300px;}
.main_menu{}
.main_menu > li{ display: inline-flex;}
.main_menu > li > a{display: flex; padding:25px 40px; font-size:1.2em; font-family: "Pretendard"; font-weight: 700;}
.myvideo{width:100%; height:100%; object-fit:cover; position: relative;}
.mobileVideo{display: none;}

/* 페이지 앵커 */
#pageMenu { position: fixed; right:40px; top:50%; transform: translate(0,-50%); width: 80px; z-index: 999; }
#pageMenu li { margin: 5px 0; }
#pageMenu a { display: block; width: 100%; position: relative; text-align: right; padding-right: 20px; }
#pageMenu a span { color: #fff; font-size: 0px; font-family: 'Montserrat'; font-weight: bold; line-height: 30px; display: inline-block; }
#pageMenu.on a span { color: #fff; }
#pageMenu a i {display: inline-block; position: absolute; width: 8px; height: 8px; background: #d5d5d5; border-radius: 50%; top: 50%; right: 0; transform: translateY(-50%); }
#pageMenu a i::before {content: ''; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 17px; height: 17px; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; opacity: 0; transition: all 0.3s;}
#pageMenu li.active a span { font-size: 13px;}
#pageMenu li.active a i::before {content: ''; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 17px; height: 17px; border: 1px solid #ddd; border-radius: 50%; opacity: 1;}

.section{display: flex; justify-content: center; align-items: center; position: relative;}
.section_content{width:1435px; height:100%; box-sizing: border-box; padding-top:40px; margin:auto; box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 0px 100px; padding-top:40px; flex-direction: column; position: relative;}

.category_title{display: flex; width: 100%; font-size: 60px; font-family: "Play"; font-weight: 700; letter-spacing: -1px;}
.category_sub_title{display: flex; width: 100%; font-size: 1.5em; font-family: "Play"; font-weight: 700; letter-spacing: -0.5px; color:#01afff; margin-top:10px; margin-bottom:0px;}
.category_contents{width:100%; padding:30px 0; line-height: 1.75em; }
.category_content{width:100%; margin-bottom:20px;  line-height: 1.75em; font-size:18px;  letter-spacing: -0.5px;}
.category_content strong{font-size:24px; font-weight: 700;}
.category_content b{font-size:20px; font-weight: 700;}

.company_business_list{display: flex; flex-direction: row; justify-content: space-between; width:100%;}
.company_business_list > li{width:30%; border:1px solid #eee; border-radius: 10px; background:#fff; font-size:16px;}

.business_lista_img{height:220px; width:100%; overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.company_business_title{padding:30px 20px;}
.company_business_title h2{font-size:20px; font-weight: 700;margin-bottom:3px; letter-spacing: -1px;}
.company_business_title h3{font-size:14px; font-family: "Play"; letter-spacing: -0.5px; font-weight: 700; color:#01afff; margin-bottom:15px;}

.company_business_title ol{ font-size:14px; color:#777; margin-top:15px; letter-spacing:-1px}
.company_business_title ol > li{margin-bottom:5px; line-height:1.3em;}

.production_bg{ width:100%; height:508px; background: #1c1c1c url('../assets/images/pro_bg.png') 50% 50% no-repeat; position: absolute; top:30px;}
.production_part{position:absolute; top:80px; left:0; width:100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-top:30px;}
.production_left{flex:1; }
.production_right{flex:1; background:#333;  margin-top:128px; height:300px;}
.production_content{width:1275px; height:100%; display: flex; flex-direction: column; }
.production_inner_content{width:1275px; height:300px; display: flex; flex-direction: row; }
.production_kiosk{border-top-left-radius: 15px; border-bottom-left-radius: 15px; width:50%; height:100%;  position: relative; box-sizing: border-box; padding:50px; background: url('../assets/images/blue_bg.png') left top repeat-y;}
.production_barrier{ width:50%; height:100%; background: #fff; box-sizing: border-box; padding:50px; position: relative;}
.production_title_grp{display: flex;  flex-direction: row; }
.production_title{width:465px;}
.pro_title{color:#fff;}
.pro_sub_title{margin-top:0px; margin-bottom:32px; color:#41c3ff}
.production_desc{color:#fff; padding:25px 0 0 50px; line-height: 1.75em; font-size:15px;}
.production_desc > b{font-size:18px; font-weight: 700;}

.pro_detail_sub_title{color:#fff; font-family: "Play"; font-weight: 700;}
.pro_detail_title{font-size:24px; font-weight: 700; color:#fff;}
.pro_detail_img_grp{padding:35px 0; height:100px; display: flex; flex-direction: row;}
.pro_detail_img_desc{padding-left:40px;}

.pro_be_detail_sub_title{color:#333; font-family: "Play"; font-weight: 700;}
.pro_be_detail_title{font-size:24px; font-weight: 700; color:#333;}
.pro_be_detail_img_grp{padding:30px 0; height:100px; display: flex; flex-direction: row;}
.pro_be_detail_img_desc{padding-left:40px;}

.news_container{position:absolute; bottom:0; width:100%; height:40%; box-sizing: border-box; padding:40px 0;}
.news_inner_content{ width: 1275px; margin: 20px auto; display: flex; flex-direction: row; height:100%; }
.news_desc{margin-top:10px; color:#999; font-size:14px; line-height:1.45em;}
.news_title_grp{width:40%;}
.news_list_container{width:100%;}
.news_list {display: flex; flex-direction: row; justify-content: space-between; width:100%; height:100%; }
.news_list > li{border:1px solid #eee; border-radius: 10px; padding:50px 35px; width:30%; box-sizing:border-box; height:90%; position: relative;}
.news_title{ font-size: 18px; font-weight: 700; margin-bottom:10px; height:50px; letter-spacing: -1px; line-height: 1.3em;}
.news_content{ color:#777; font-size:15px; line-height:1.4em;}
.news_date{margin-top:10px; color:#999; position:absolute; bottom:30px; font-size:14px;}

.inquiry_container{width:100%; height:470px; background:url('../assets/images/qa_bg.png'); position:absolute; top:80px; background-size:cover}
.inquiry_inner_container{width:1275px; margin:0 auto; display: flex; flex-direction: row;}
.inquiry_title_grp{width:50%; padding:50px 0; box-sizing: border-box;}
.title_white{color:#fff;}
.inquery_desc{color:#fff; margin-top:20px; font-size:14px; line-height:1.4em;}

.inquery_tel{color:#fff; margin-top:30px; font-size:20px; font-family: "Play"; font-weight: 700; margin-bottom:5px;}
.inquery_mail{color:rgba(255, 255, 255, 0.6);font-family: "Play"; font-weight: 700;}
.inquiry_input_grp{width:50%;}
.inquiry_tbl{width:100%; margin-top:40px;}
.inquiry_tbl td{color:#fff; padding:15px 10px; border-bottom:1px solid rgba(255, 255, 255, 0.2)}
.inquiry_tbl td.tbl_label{width:70px;}
.inquiry_input{border:none; background: transparent; color:#fff; width:100%; padding:10px;outline: none; font-family: "Pretendard";}
.inquiry_textarea{border:none; background: transparent; color:#fff; width:100%; padding:10px; height:70px; outline: none; font-family: "Pretendard";}

input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    font-family: "Pretendard";
}
.inquiry_btn{width:100%; height:50px; background: #01afff; display: flex; justify-content: center; align-items: center; margin-top:10px; color:#fff; font-size: 20px; border:none; border-radius: 5px; font-weight: 700; letter-spacing: -1px;}
.tbl_label.textarea{vertical-align: top; padding-top:25px;}
.company_information{position:absolute; bottom:0; width:100%; height:35%; }
.company_inner_information{width:1275px; margin:0 auto; display: flex; flex-direction: row; }

.company_info{ background:#eaf0f5; padding:20px 60px; width:60%; border-radius: 7px;}
.company_info li{border-bottom:1px solid #d7dcdf; padding:13px 20px; font-size:16px;}
.company_info li:last-child{border:none; }
.company_info label{display: inline-flex; width:80px;}

.footer_content{width:1275px; margin:0 auto; height:60px; display: flex;align-items: center; font-family: "Play"; color:rgba(255, 255, 255, 0.6); justify-content: center; font-size:13px;}

/* 페이지 */
#section1 {background-color: #000f63;}
#section2 {background-color: #fff;}
#section3 {background-color: #fff;}
#section4 {background-color: #fff; }
#section5 {background-color: #fff}
#section6 {background-color: black;}

#section6 .section-inner {min-height:240px;}

/* 애니메이션 */
.section.active .ani-01 {animation: fadeLeft 0.5s 0.35s forwards;}
.section.active .ani-02 {animation: fadeLeft 0.5s 0.55s forwards;}
.section.active .ani-03 i {animation: fadeUp 0.4s 0.2s forwards;}

@keyframes fadeIn {
	0%{ opacity: 0;}
	100%{ opacity: 1;}
}
@keyframes fadeUp {
	0%{transform:translateY(80px); opacity: 0;}
	100%{transform:translateY(0); opacity: 1;}
}
@keyframes fadeLeft {
	0%{transform:translateX(-80px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}
@keyframes fadeRight {
	0%{transform:translateX(80px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}
@keyframes up {
	0%{transform:translateY(120%);}
	100%{transform:translateY(0);}
}
@keyframes moveTxt {
	0%{transform:translateX(-20px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}

.fp-controlArrow.fp-prev {left: 120px;}
.fp-controlArrow.fp-next {right: 120px;}

.copyright{position: absolute; z-index:100000; bottom:150px; left:100px; font-size:40px; color:#fff; font-weight:600; letter-spacing: -1px}
.copyright b{font-weight: 700; color:#ffcc00; font-size:50px;}
