@charset "utf-8";

.bg{background-color:#eff2f5;}
.main-cont-wrap{width:100%; max-width:1520px; margin:0 auto; padding:72px 15px;}
.main-title-box{margin-bottom:25px; padding-left:15px; font-weight:600; font-size:24px;}

@media screen and (max-width:980px){
	.main-cont-wrap{padding:60px 15px;}
	.main-title-box{margin-bottom:20px; padding-left:10px; font-size:22px;}
}

@media screen and (max-width:880px){
	.main-cont-wrap{padding:50px 15px;}
	.main-title-box{margin-bottom:15px; padding-left:5px; font-size:20px;}
}

@media screen and (max-width:780px){
	.main-cont-wrap{padding:40px 15px;}
}

#visual-section{width:100%; max-width:1490px; margin:0 auto; border-radius:10px; overflow:hidden; position:relative;}
#visual-section .owl-carousel{width:100%;}
#visual-section .owl-carousel .item{-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-position:center center !important; background-repeat:no-repeat !important; background-size:cover !important;}
#visual-section .owl-carousel .item img{width:auto; max-width:100%; display:inline;}
#visual-section .stretchy_wrapper{width:100% !important; height:0px; padding-bottom:820px; position:relative !important; overflow:hidden !important; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-position:center center; background-repeat:no-repeat; background-size:cover; display:block; -webkit-transition:padding 0.5s; -moz-transition:padding 0.5s; -ms-transition:padding 0.5s; -o-transition:padding 0.5s; transition:padding 0.5s;}
#visual-section .stretchy_wrapper > * {width:100%; height:100%; top:0; bottom:0; left:0; right:0; display:block; position:absolute !important;}
#visual-section .owl-carousel .owl-dots{width:100%; bottom:35px; left:0; text-align:center; position:absolute;}
#visual-section .owl-carousel .owl-dots .owl-dot{margin:0 10px; display:inline-block;}
#visual-section .owl-carousel .owl-dots .owl-dot span{width:10px; height:10px; border-radius:50%; background-color:#fff; vertical-align:bottom; display:inline-block; position:relative;}
#visual-section .owl-carousel .owl-dots .active span:after{width:20px; height:20px; top:-5px; left:-5px; border-radius:50%; border:1px solid #fff; content:""; display:block; position:absolute;}
#visual-section .owl-carousel .owl-prev{width:92px; height:90px; top:50%; left:10%; margin-top:-45px; text-indent:-9000px; background:url("../img/mslide_prev.png") no-repeat; display:block; position:absolute;}
#visual-section .owl-carousel .owl-next{width:92px; height:90px; top:50%; right:10%; margin-top:-45px; text-indent:-9000px; background:url("../img/mslide_next.png") no-repeat; display:block; position:absolute;}
#visual-section .visual-txt{width:100%; max-width:1520px; top:50%; left:50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); padding:0 15px; z-index:1000; text-align:center; position:absolute;}
#visual-section .visual-txt h3{font-weight:800; font-size:40px; color:#333;text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff; margin-bottom:15px;}
#visual-section .visual-txt h2{font-weight:900; font-size:48px; color:#333;text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff;}
#visual-section .active .visual-txt h3{transform: scale(1); animation: grow 1.2s ease-in-out forwards;}
#visual-section .active .visual-txt h2{transform: scale(1); animation: grow 1.2s ease-in-out forwards;}

@keyframes grow{
  from { transform: scale(1); }
  to   { transform: scale(1.25); }
}

@media screen and (max-width:1490px){
	#visual-section{border-radius:0;}
}

@media screen and (max-width:1200px){
	#visual-section .visual-txt h3{font-size:36px;}
	#visual-section .visual-txt h2{font-size:44px;}
}

@media screen and (max-width:980px){
	#visual-section .stretchy_wrapper{padding-bottom:450px;}
}

@media screen and (max-width:880px){
	#visual-section .visual-txt h3{font-size:32px;}
	#visual-section .visual-txt h2{font-size:42px;}
	#visual-section .stretchy_wrapper{padding-bottom:400px;}
}

@media screen and (max-width:780px){
	#visual-section .visual-txt h3{margin-bottom:10px; font-size:30px;}
	#visual-section .visual-txt h2{font-size:40px;}
	#visual-section .stretchy_wrapper{padding-bottom:350px;}
}

@media screen and (max-width:680px){
	#visual-section .visual-txt h3{font-size:24px;}
	#visual-section .visual-txt h2{font-size:38px;}
}

@media screen and (max-width:640px){
	#visual-section .stretchy_wrapper{height:auto; padding-bottom:0;}
	#visual-section .stretchy_wrapper > * {top:auto; bottom:auto; left:auto; right:auto; position:relative !important;}
}

@media screen and (max-width:580px){
	#visual-section .visual-txt h3{font-size:20px;}
	#visual-section .visual-txt h2{font-size:34px;}
}

@media screen and (max-width:480px){
	#visual-section .visual-txt h3{font-size:18px;}
	#visual-section .visual-txt h2{font-size:30px;}
}

.product-wrap{}
.product-area{width:100%; max-width:1520px; margin:0 auto; padding:60px 15px;}
.product-area h2{padding-left:15px; font-weight:700; font-size:24px;}
.product-area ul{margin:0 -16px;}
.product-area ul:after{clear:both; content:""; display:block;}
.product-area ul li{width:25%; padding:16px; float:left;}
.product-area .prd-ibox{border:1px solid #dfdfdf; position:relative;}
.product-area .prd-ibox .prd-tit{width:100%; top:20px; left:0; z-index:99; font-weight:600; font-size:22px; text-align:center; color:#222; position:absolute; transition:all 0.2s ease-in-out;}
.product-area .prd-ibox .prd-desc{width:100%; bottom:20px; left:0; padding:0 10px; z-index:99; font-size:14px; line-height:160%; text-align:center; color:#666; position:absolute; transition:all 0.2s ease-in-out;}
.product-area .prd-ibox .prd-img{background-color:#fff;}
.product-area .prd-ibox .prd-img img{max-width:100%; vertical-align:middle;}
.product-area .prd-ibox .over-bg{width:100%; height:100%; top:0; left:0; opacity:0; z-index:1; background:url("../img/ovbg.png") no-repeat center center; background-size:cover; position:absolute; transition:all 0.2s ease-in-out; }
.product-area a:hover .over-bg{opacity:1;}
.product-area a:hover .prd-ibox .prd-tit{color:#fff;}
.product-area a:hover .prd-ibox .prd-desc{color:#fff;}

@media screen and (max-width:1300px){
	.product-area ul{margin:0 -10px;}
	.product-area ul li{padding:10px;}
}

@media screen and (max-width:1200px){
	.product-area h2{margin-bottom:10px;}
	.product-area ul{margin:0 -5px;}
	.product-area ul li{padding:5px;}
}

@media screen and (max-width:1000px){
	.product-area ul li{width:33.3333%;}
}

@media screen and (max-width:980px){
	.product-area h2{padding-left:0; font-size:22px;}
}

@media screen and (max-width:880px){
	.product-area{padding:40px 15px;}
	.product-area ul li{width:50%;}
	.product-area h2{font-size:20px;}
	.product-area .prd-ibox .prd-tit{top:15px; font-size:20px;}
	.product-area .prd-ibox .prd-desc{bottom:15px;}
}

@media screen and (max-width:580px){
	.product-area .prd-ibox .prd-img{padding:30px 0;}
	.product-area .prd-ibox .prd-tit{font-size:18px; letter-spacing:-0.5px;}
	.product-area .prd-ibox .prd-desc{line-height:140%; letter-spacing:-0.5px;}
}

#product-section{}
#product-section .prd-tab{}
#product-section .prd-tab:after{clear:both; content:""; display:block;}
#product-section .prd-tab ul{margin:0 -8px;}
#product-section .prd-tab ul:after{clear:both; content:""; display:block;}
#product-section .prd-tab ul li{width:25%; padding:0 8px; float:left;}
#product-section .prd-tab a{width:100%; border-radius:10px; background-color:#fff; display:flex; position:relative;}
#product-section .prd-tab a.curr{background-color:#ea5406;}
#product-section .prd-tab .box{width:100%; height:205px; padding:30px; display:flex; justify-content:space-between; position:relative;}
#product-section .prd-tab .box h4{font-weight:600; font-size:18px;}
#product-section .prd-tab .box .img{right:10px; bottom:10px; position:absolute;}
#product-section .prd-tab .box .img img{max-width:100%;}
#product-section .prd-tab a.curr h4{color:#fff;}

@media screen and (max-width:680px){
	#product-section .prd-tab ul li{width:50%; padding:8px;}
}

#product-section .prd-box{margin-top:15px;}
#product-section .prd-box ul{margin:0 -8px;}
#product-section .prd-box ul:after{clear:both; content:""; display:block;}
#product-section .prd-box ul li{width:16.666%; padding:0 8px 16px; float:left;}

@media screen and (max-width:1340px){
	#product-section .prd-box ul li{width:20%;}
}

@media screen and (max-width:1080px){
	#product-section .prd-box ul li{width:25%;}
}

@media screen and (max-width:880px){
	#product-section .prd-box ul li{width:33.333%;}
}

@media screen and (max-width:680px){
	#product-section .prd-box ul li{width:50%;}
}

#product-section .prd-box .prd-ibox{width:100%; height:162px; border-radius:10px; background-color:#fff; overflow:hidden; gap:5px; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative;}
#product-section .prd-box .prd-ibox:after{width:100%; height:100%; top:0; left:0; border-radius:10px; border:1px solid #ddd; content:""; display:block; position:absolute;}
#product-section .prd-box .prd-ibox .prd-img{}
#product-section .prd-box .prd-ibox .prd-img img{max-width:100%;}
#product-section .prd-box .prd-ibox .prd-tit{font-weight:600; font-size:16px; color:#333;}
#product-section .prd-box a:hover .prd-ibox:after{border:2px solid #ea5406;}

#company-section{}
#company-section .com-area{}
#company-section .com-area ul{margin:0 -8px;}
#company-section .com-area ul:after{clear:both; content:""; display:block;}
#company-section .com-area ul li{width:20%; padding:0 8px; float:left;}
#company-section .com-area a{width:100%; border-radius:10px; display:flex; position:relative;}
#company-section .com-area a:after{width:100%; height:100%; top:0; left:0; border-radius:10px; border:1px solid #ddd; content:""; display:block; position:absolute;}
#company-section .com-area a:hover:after{border:2px solid #ea5406;}
#company-section .com-area .box{width:100%; height:156px; padding:30px; display:flex; justify-content:space-between;}
#company-section .com-area .box h4{font-weight:600; font-size:18px;}
#company-section .com-area .box .icon{margin-top:-20px;}

@media screen and (max-width:1340px){
	#company-section .com-area .box{height:auto; gap:20px; flex-direction:column;}
	#company-section .com-area .box .icon{padding-top:20px; text-align:center;}
}

@media screen and (max-width:980px){
	#company-section .com-area .box{padding:20px; gap:10px;}
	#company-section .com-area .box .icon{padding:20px 10px 0;}
	#company-section .com-area .box .icon img{max-width:100%;}
}

@media screen and (max-width:780px){
	#company-section .com-area ul li{width:33.333%; padding:8px;}
}

@media screen and (max-width:680px){
	#company-section .com-area .box h4{font-size:16px;}
}

@media screen and (max-width:580px){
	#company-section .com-area .box{padding:20px 15px;}
	#company-section .com-area .box h4{font-size:16px; letter-spacing:-0.5px;}
}

@media screen and (max-width:480px){
	#company-section .com-area .box{padding:20px 10px;}
	#company-section .com-area .box h4{font-size:15px;}
}

#video-section{}
#video-section .video-area{position:relative;}
#video-section a{gap:10px; display:flex; flex-direction:column;}
#video-section .img{height:155px; border-radius:10px; background-repeat:no-repeat; background-position:center center; position:relative;}
#video-section .img em{top:10px; right:10px; position:absolute;}
#video-section .txt{font-weight:400; font-size:16px; letter-spacing:-0.5px; color:#333; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
#video-section .slider-button-next,
#video-section .slider-button-prev{width:30px; height:30px; top:-55px; right:0; z-index:999; font-size:20px; color:#b8b8b8; display:flex; align-items:center; position:absolute;}
#video-section .slider-button-next{right:30px;}

#notice-section{}
#notice-section .noti-area{display:flex; align-items:center; justify-content:space-between;}
#notice-section .noti-area .notice-box{gap:10px; display:flex; align-items:center;}
#notice-section .noti-area .notice-box h4{font-weight:600; font-size:18px;}
#notice-section .noti-area .notice-box div{margin-left:10px; font-size:16px; line-height:160%; color:#333; display:flex; border-bottom:1px solid #ccc;}
#notice-section .noti-area .btn-box{gap:20px; display:flex; align-items:center;}
#notice-section .noti-area .btn-box a{width:200px; height:54px; padding:10px; font-weight:600; font-size:18px; border-radius:30px; border:1px solid #ddd; gap:20px; display:flex; align-items:center; justify-content:center;}

#notice-section .noti-area .btn-box a:hover{color:#ea5406; border-color:#ea5406;}

@media screen and (max-width:1180px){
	#notice-section .noti-area .btn-box a{width:150px; height:54px; padding:10px; font-weight:600; font-size:16px; gap:10px;}
}

@media screen and (max-width:980px){
	#notice-section .noti-area{gap:20px; flex-direction:column;}
}

@media screen and (max-width:580px){
	#notice-section .noti-area .btn-box{width:100%; gap:10px; flex-direction:column;}
	#notice-section .noti-area .btn-box a{width:100%; height:40px;}
}
