/* 타이틀 */
.m_tit{ color: #fff;}
.m_tit h3{font-family: var(--enF); font-weight:800; font-size:16px;}
.m_tit h2{font-weight:700; font-size:50px; margin: 15px 0 40px;}
.m_tit p{font-weight:500; font-size:17px; opacity: 0.8;}

.m_tit.c h3{color: var(--mColor);}
.m_tit.c h2{font-size:64px; color: #222; margin: 15px 0 25px;}
.m_tit.c p{color: #666;}


.main{overflow: hidden;}
.main .mv{position:relative;}
.main .mv .slide_wrap{}
.main .mv .slide_wrap .slide_ctn{}
.main .mv .slide_wrap .slide_ctn .item{position:relative; height: 100vh;}
.main .mv .slide_wrap .slide_ctn .item::after{content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.3;}
.main .mv .slide_wrap .slide_ctn .item video{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); min-width: 100%; min-height: 100%;}
.main .mv .slide_wrap .slide_txt{position:absolute; width: 100%; top: 50%; right: 0; transform:translateY(-50%);}
.main .mv .slide_wrap .slide_txt .item{}
.main .mv .slide_wrap .slide_txt .item h2{font-weight:700; font-size:40px; letter-spacing:-0.02em; color: #fff;}
.main .mv .slide_wrap .slide_txt .item p{font-weight:500; font-size:22px; color: #fff; opacity: 0.8; margin-top: 25px;}
.main .mv .slide_wrap .slide_ui{position:absolute; left: 50%; bottom: 90px; transform:translateX(-50%); display:flex; align-items:center;}
.main .mv .slide_wrap .slide_ui .circle{position:relative; width: 49px; height: 49px; margin-right: 30px; cursor: pointer; border:3px solid rgba(255, 255, 255, 0.50); border-radius:50%}
.main .mv .slide_wrap .slide_ui .circle svg{position:absolute; top: -3px; left: -3px;}
.main .mv .slide_wrap .slide_ui .circle svg circle{stroke-dasharray: 145; stroke-dashoffset: 145;}
.main .mv .slide_wrap .slide_ui .circle .icon_box{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 9px; height: 7px; background:url(/automotive/img/main/icon_stop.svg) 50% 50% /cover no-repeat;}
.main .mv .slide_wrap .slide_ui .circle.on .icon_box{width: 10px; height: 10px; background:url(/automotive/img/main/icon_play.svg) 50% 50% /cover no-repeat;}
.main .mv .slide_wrap .slide_num{}
.main .mv .slide_wrap .slide_num p{font-family: var(--numF); font-weight:500; font-size:15px; color: rgba(255, 255, 255, 0.4);}
.main .mv .slide_wrap .slide_num p span.current{position:relative; margin-right: 23px; color: #fff;}
.main .mv .slide_wrap .slide_num p span.current::after{content:""; position:absolute; top: 6px; right: -15px; width: 1px; height: 6px; background: #fff;}

.main .mv .slide_wrap .slide_txt .item p span{position:relative; }
.main .mv .slide_wrap .slide_txt .item.slick-active p span{animation:fadeIn 1.2s both}
.main .mv .slide_wrap .slide_txt .item.slick-active h2{animation:fadeDown 1.2s 0.8s both}

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

@keyframes fadeIn{
	0%{opacity: 0; left: 15px;}
	100%{opacity: 1; left: 0;}
}

.m_about{background:url(/automotive/img/main/m_about.png) 50% 50% /cover no-repeat; padding: 150px 0 114px;}
.m_about .right_list{display:flex;justify-content:flex-end; gap:25px; margin-top: 100px;}
.m_about .right_list .item{position:relative; z-index: 2; padding: 40px 40px 50px; width: 33.33%; max-width: 410px;}
.m_about .right_list .item::before{content:"";position:absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.10);opacity: 0.9; background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(5px); z-index: -1;}
.m_about .right_list .item .txt{margin-top: 60px;}
.m_about .right_list .item .txt h3{font-weight:500; font-size:28px; letter-spacing:-0.03em; color: #fff;}
.m_about .right_list .item .txt p{margin-top: 20px; font-size:16px; line-height: 1.8125em; color: #fff;}

.m_pro{padding: 150px 0 229px;}
.m_pro .pro_list{display:flex; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; margin-top: 62px;}
.m_pro .pro_list .item{position:relative; width: 25%; text-align: center; padding: 70px 0 56px; border-right: 1px solid #e8e8e8;}
.m_pro .pro_list .item a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.m_pro .pro_list .item:last-of-type{border-right: 0;}
.m_pro .pro_list .item .txt{margin-top: 50px;}
.m_pro .pro_list .item .txt h4{font-weight:700; font-size:25px; color: #222;}
.m_pro .pro_list .item .txt p{font-weight:700; font-size:16px; color: #666; margin-top: 10px;}
.m_pro .pro_list .item .hover{position:absolute; top: 0; left: 0; width: 100%; height: 0; background: linear-gradient(0deg, rgba(0, 41, 255, 0.60) 0%, rgba(0, 41, 255, 0.60) 100%), rgba(255, 255, 255, 0.60); backdrop-filter: blur(2px); transition:0.3s; overflow: hidden;}
.m_pro .pro_list .item .hover .btn{position:absolute; top: 50%; left: 0; width: 100%; text-align: center; transform:translateY(-50%);}
.m_pro .pro_list .item .hover .btn p{display:inline-block; vertical-align: top; width: 143px; color: #fff; font-weight:700; font-size:16px; padding: 10px 0 10px 10px; border-bottom: 1px solid #fff;}
.m_pro .pro_list .item .hover .btn p i{margin-left: 19px;}


.m_fs{padding-bottom:250px;}
.m_fs .m_tit{margin-bottom:-140px;}
.m_fs .m_tit h2{font-size:64px; font-family: var(--enF);}
.m_fs .m_tit p{width: 48%;}
.m_fs .fbox{display:flex; align-items:flex-end;}
.m_fs .fbox .item{width: 50%;}
.m_fs .fbox .item:first-of-type{padding-right: 100px;}
.m_fs .fbox .item .slide_list{border-top: 1px solid #000; border-bottom: 1px solid #000;}
.m_fs .fbox .item .slide_list .box{position:relative; padding: 25px 115px 25px 40px; border-bottom: 1px solid #e8e8e8; cursor: pointer;}
.m_fs .fbox .item .slide_list .box a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.m_fs .fbox .item .slide_list .box::after{content:""; position:absolute; top: 50%; right: 40px; width: 64px; height: 42px; background:url(/automotive/img/main/icon_arrows.svg) 50% 50% /cover no-repeat; transform:translateY(-50%); opacity: 0; transition:0.3s}
.m_fs .fbox .item .slide_list .box h3{font-weight:700; font-size:28px; color: #222; transition:0.3s}
.m_fs .fbox .item .slide_list .box p{font-size:16px; color: #666; margin-top: 15px;}
.m_fs .fbox .item .slide_list .box.on h3{color: var(--mColor);}
.m_fs .fbox .item .slide_list .box.on::after{opacity: 1;}
.m_fs .fbox .item.slide_ctn{position:relative; padding-bottom:39.5%;}
.m_fs .fbox .item.slide_ctn figure{position:absolute; top: 0; left: 0; opacity: 0; transition:0.5s}
.m_fs .fbox .item.slide_ctn figure.on{opacity: 1;}

.m_notice{padding-bottom:250px;}
.m_notice .fbox{display:flex; gap:40px; margin-top: 60px;}
.m_notice .fbox .item{position:relative; width: calc((100% - 120px) / 4); border-radius:15px; border:1px solid #e8e8e8; overflow: hidden; transition:0.3s}
.m_notice .fbox .item a{position:absolute; top: 0; left: 0; bottom: 0; right: 0;}
.m_notice .fbox .item figure{position:relative; padding-bottom:66%; overflow: hidden; border-bottom: 1px solid #e8e8e8;}
.m_notice .fbox .item figure img{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); max-width: inherit; max-height: 100%; height: 100%; transition:0.3s}
.m_notice .fbox .item .txt{padding: 35px 35px;}
.m_notice .fbox .item .txt h4{font-weight:500; font-size:20px; line-height: 1.45em; color: #222; margin-bottom:35px;  white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 2.9em; box-sizing:content-box}
.m_notice .fbox .item .txt ul{text-align: right; padding-top: 25px; border-top: 1px solid #e8e8e8;}
.m_notice .fbox .item .txt ul li{font-weight:500; font-size:16px; color: #666;}
.m_notice .fbox .item .txt ul li img{margin-right: 5px; transform:translateY(4px);}
.m_notice .rolling_box{padding: 270px 0; white-space:nowrap; overflow: hidden;}
.m_notice .rolling_box figure{display:inline-block; width: 1997px; vertical-align: top; animation:rolling 15s linear infinite}
.m_notice .rolling_box figure img{margin-right: 90px;}

.m_banner{border-top: 1px solid #eee;}
.m_banner .item{position:relative; padding: 55px 0; border-bottom: 1px solid #eee; transition:0.3s}
.m_banner .item:last-of-type{border-bottom: none;}
.m_banner .item .w1600{display:flex; align-items:center;}
.m_banner .item a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.m_banner .item .txt{width: 50%;}
.m_banner .item .txt h2{font-family:var(--enF); font-weight:bold; font-size:65px; color: #222;}
.m_banner .item .txt p{font-size:17px; color: #666; margin-top: 20px;}
.m_banner .item figure{width: 50%;}
.m_banner .item .btn{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 126px; height: 126px; border-radius:50%; background: rgba(0, 41, 255, 0.7); text-align: center; opacity: 0; transition:0.3s}
.m_banner .item .btn p{position:absolute; top: 48px; left: 50%; transform:translateX(-50%); width: 100%; text-align: center;}
.m_banner .item .btn p span{display:block; font-family:var(--enF); font-weight:600; font-size:14px; color: #fff;}
.m_banner .item .btn p img{margin-top: 10px;}
.m_banner .item.r .txt{text-align: right; order:3}



@keyframes rolling{
	0%{transform:translateX(0);}
	100%{transform:translateX(-1997px);}
}

@media (hover: hover){
	.m_pro .pro_list .item:hover .hover{top: auto; bottom: 0; height: 100%;}

	.m_fs .fbox .item .slide_list .box:hover h3{color: var(--mColor);}
	.m_fs .fbox .item .slide_list .box:hover::after{opacity: 1;}

	.m_notice .fbox .item:hover{border-color:var(--mColor)}
	.m_notice .fbox .item:hover figure img{transform:translate(-50%,-50%) scale(1.1);}

	.m_banner .item:hover{background: rgba(208, 208, 208, 0.25);}
	.m_banner .item:hover .btn{opacity: 1;}
}

@media (max-width: 1600px){
	.m_tit h2{font-size:45px;}
	.m_tit.c h2{font-size:60px;}

	.main .mv .slide_wrap .slide_txt .item h2{font-size:40px;}

	.m_about .right_list .item .txt p br{display:none;}
	
	.m_pro{padding: 150px 0;}
	.m_pro .pro_list .item{ padding: 40px 16px;}
	
	.m_fs{padding-bottom:150px;}
	.m_fs .m_tit{margin-bottom: 50px;}
	.m_fs .m_tit p{width: 100%;}
	.m_fs .fbox .item:first-of-type{order:3; padding-left: 40px; padding-right: 0;}
	
	.m_notice{padding-bottom:150px;}
	.m_notice .fbox{gap:20px; margin-top: 50px;}
	.m_notice .fbox .item{width: calc((100% - 60px) / 4);}
	.m_notice .fbox .item .txt{padding: 20px;}
	.m_notice .fbox .item .txt h4{font-size:18px; margin-bottom:20px;}
	.m_notice .fbox .item .txt ul{padding-top: 20px;}

	.m_banner .item .txt h2{font-size:45px;}

}

@media (max-width: 1200px){
	.m_tit h2{font-size:36px; margin: 15px 0 18px;}
	.m_tit.c h2{font-size:36px; margin: 15px 0 18px;}

	.main .mv .slide_wrap .slide_txt .item h2{font-size:32px; }
	.main .mv .slide_wrap .slide_txt .item p{font-size:20px;}

	.m_about{padding: 100px 0;}
	
	.m_about .right_list{margin-top: 50px;}
	.m_about .right_list .item{padding: 20px 20px 30px;}
	.m_about .right_list .item .txt{margin-top: 40px;}
	.m_about .right_list .item .txt h3{font-size:23px;}
	
	.m_pro{padding: 100px 0 150px;}
	.m_pro .pro_list{margin-top: 50px;}
	.m_pro .pro_list{flex-wrap:wrap; border-bottom: none;}
	.m_pro .pro_list .item{width: 50%; border-bottom: 1px solid #e8e8e8;}
	
	.m_fs .fbox .item .slide_list .box{padding: 10px 16px;}
	.m_fs .fbox .item .slide_list .box::after{right: 16px;}
	.m_fs .fbox .item .slide_list .box p{width: 80%;}
	
	.m_notice{padding-bottom:100px;}
	.m_notice .fbox{flex-wrap:wrap;}
	.m_notice .fbox .item{width: calc((100% - 20px) / 2);}
	.m_notice .rolling_box{padding: 150px 0;}

	.m_banner .item .txt h2{font-size:36px;}
}
@media (max-width: 1030px){
	.main .mv .slide_wrap .slide_ctn .item{height: 100svh;}


	.m_pro{padding: 100px 0;}

	.m_fs{padding-bottom:100px;}
	.m_fs .fbox{flex-wrap:wrap}
	.m_fs .fbox .item{width: 100%;}
	.m_fs .fbox .item:first-of-type{padding-left: 0; margin-top: 30px;}
	.m_fs .fbox .item .slide_list .box h3{font-size:24px;}

	.m_fs .fbox .item.slide_ctn{min-height: 630px; padding-bottom:0;}
	.m_fs .fbox .item .slide_list .box{padding: 20px 16px;}
}

@media (max-width: 860px){
	.m_fs .fbox .item.slide_ctn{min-height: auto; padding-bottom:78.6%;}

	.m_about .m_tit h2 br{display:none; }
}

@media (max-width: 800px){
	.main .mv .slide_wrap .slide_txt{top: 40%;}
	.main .mv .slide_wrap .slide_txt .item h2{font-size:29px;}
	.main .mv .slide_wrap .slide_txt .item h2 br{display:none; }
	.main .mv .slide_wrap .slide_ui{bottom: 50px;}

	.m_about .right_list{flex-wrap:wrap;}
	.m_about .right_list .item{width: 100%; max-width: none;}
	
	.m_pro .pro_list .item{padding: 30px 16px;}
	.m_pro .pro_list .item figure{width: 90%; margin: 0 auto;}
	.m_pro .pro_list .item .txt h4{font-size:22px;}

	.m_fs .fbox .item .slide_list .box h3{font-size:20px;}
	.m_fs .fbox .item .slide_list .box p{margin-top: 10px;}
	
	.m_notice .fbox{gap:10px;}
	.m_notice .fbox .item{width: calc((100% - 10px) / 2);}
	.m_notice .fbox .item .txt{padding: 16px;}
	.m_notice .fbox .item .txt h4{font-size:16px; margin-bottom:12px;}
	.m_notice .fbox .item .txt ul{padding-top: 12px;}
	.m_notice .fbox .item .txt ul li{font-size:14px;}
	.m_notice .fbox .item .txt ul li img{transform:translateY(2px);}
	
	.m_banner .item{padding: 0;}
	.m_banner .item .w1600{flex-wrap:wrap;}
	.m_banner .item figure{order:-1; width: 100%; }
	.m_banner .item.r .txt,
	.m_banner .item .txt{width: 100%; text-align: center; padding: 20px 0 24px;}
	.m_banner .item .txt h2{font-size:28px;}
	.m_banner .item .txt p{margin-top: 12px;}
	
	.m_banner .item:hover{background: transparent;}
	.m_banner .item:hover .btn{opacity: 0;}
}