@charset "utf-8";


/************메인비주얼************/
#container {margin-top:950px;}
.topmain{position:fixed;top:0;right:0;bottom:0;left:0;min-width:1280px;padding-top:0;}
.section{position: relative;}

/*메인비주얼-비주얼영역*/
.main .video_container{display:block;position:relative;height:100vh;min-height:600px;}
.main .video_container .video_wrap{position: absolute;top: 0;left: 0;bottom: 0;right: 0;width:100%;height:100%;}
.main .video_container .video_wrap{opacity: 0;z-index:0;position: absolute;top:0;right:0;bottom: 0;left:0; -webkit-transition:opacity 2s;-moz-transition:opacity 2s;-o-transition:opacity 2s;transition:opacity 2s;}
.main .video_container .video_wrap.motion{z-index: 1;}
.main .video_container .video_wrap p.visual_tit01 {position:absolute; z-index:3; top:50%; left:50%; margin-left:-223px; margin-top:-55px;}
.main .video_container .video_wrap p.visual_tit02 {position:absolute; z-index:3; top:35%; right:28%;}
.main .video_container .video_wrap p.visual_tit03 {position:absolute; z-index:3; top:35%; left:20%;}
.main .video_container .video_wrap p.visual_tit04 {position:absolute; z-index:3; top:35%; right:23%;}
.main .video_container .video_wrap.on {opacity: 1;z-index: 2;}
.main .video_container .video_wrap .video_inner{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.main .video_container .video_wrap .video_inner:before{content: '';z-index: 1;position: absolute;top:0;left:0;right:0;bottom:0;}
.main .video_container .video_wrap .video_inner.bvisual01{background:url(/img/main/mvisual01.jpg) no-repeat center top; background-size: cover;}
.main .video_container .video_wrap .video_inner.bvisual02{background:url(/img/main/mvisual02.jpg) no-repeat center top;background-size: cover;}
.main .video_container .video_wrap .video_inner.bvisual03{background:url(/img/main/mvisual03.jpg) no-repeat center top;background-size: cover;}
.main .video_container .video_wrap .video_inner.bvisual04{background:url(/img/main/mvisual05.jpg) no-repeat center top;background-size: cover;}
.main .video_container .video_wrap .video_inner.bvisual01:before{background:url(/img/main/mvisual01.jpg) no-repeat center top;background-size: cover;}
.main .video_container .video_wrap .video_inner.bvisual02:before{background:url(/img/main/mvisual02.jpg) no-repeat center top;background-size: cover;}
.main .video_container .video_wrap .video_inner.bvisual03:before{background:url(/img/main/mvisual03.jpg) no-repeat center top;background-size: cover;}
.main .video_container .video_wrap .video_inner.bvisual04:before{background:url(/img/main/mvisual05.jpg) no-repeat center top;background-size: cover;}
.main .video_container .video_wrap .video_inner:after{content: '';position: absolute;top:0;left:0;right:0;bottom:0;background: rgba(0,0,0,0.1);z-index: 1;}
.main .video_container .video_wrap .video_inner.visual01:after{content: '';position: absolute;top:0;left:0;right:0;bottom:0;background: rgba(0,0,0,0.1);z-index: 1;}
.main .video_container .video_wrap .copy_container{position: absolute; z-index: 1;bottom: 40%;left: 0;right:0;width: 100%;text-align: left;color:#ffffff;margin:0 auto;max-width: 1280px;}
.main .video_container .video_wrap.on .video_inner:before{content: none;}
.main .video_container .video_wrap.on .copy_container{opacity: 1;}
.main .video_container .video_wrap .copy_container:after{content: '';position: absolute;right: 0;top:10px;left:345px;height: 1px;background: rgba(255,255,255,0.3);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}


/*메인비주얼-오른쪽버튼*/
.main .video_step_wrap{position: absolute;top: 50%; z-index: 5;color:#ffffff; right: 5%; }
.main .video_step_wrap ul{width: 42px;margin-right: 10px;float: right;}
.main .video_step_wrap ul li{float:left;display: inline-block;width: 50px;text-align: center;opacity: 0; margin-bottom:5px;}
.main .video_step_wrap ul li a{position: relative;text-align: center;width:44px;height:44px;margin:0 auto;display: block}
.main .video_step_wrap ul li a .step_bg_num{  text-indent: -9999em; overflow: hidden; display:block;position:absolute;left:2px;top:2px;height:40px;width:40px;border-radius: 100px; -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;}
.main .video_step_wrap ul li a .step_bg_num:before{content:'';position:absolute;top:0px;left:0px;width:40px;height:40px;border-radius: 50%;
    background: #f36f21;
    transform: scale(0);
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;}
.main .video_step_wrap ul li a .step_bg_num:after{content:'';position:absolute;top:0px;left:0px;width:40px;height:40px;border-radius: 50%;}
.main .video_step_wrap ul li a .step_bg_num1:after{background: url(/img/main/ico_step1.png) no-repeat center; }
.main .video_step_wrap ul li a .step_bg_num2:after{background: url(/img/main/ico_step2.png) no-repeat center;}
.main .video_step_wrap ul li a .step_bg_num3:after{background: url(/img/main/ico_step3.png) no-repeat center;}
.main .video_step_wrap ul li a .step_bg_num4:after{background: url(/img/main/ico_step4.png) no-repeat center;}
.main .video_step_wrap ul li a .step_circle{display:block;position:absolute;width:44px;height:44px;border-radius: 50%;opacity: 0;}
.main .video_step_wrap ul li a .step_circle canvas{position:relative;z-index: 2;}
.main .video_step_wrap ul li.on a .step_bg_num:before
,.main .video_step_wrap ul li a:hover .step_bg_num:before{transform: scale(1)}
.main .video_step_wrap ul li.on a .step_bg_num{border-color: #88bb8a;background:#88bb8a }
.main .video_step_wrap ul li.on a .step_circle{opacity: 1;}


/*메인비주얼-스크롤*/
.main .scroll_arrow{position: absolute;bottom:45px;left:50%;width:33px;height:33px;margin-left:-17px;z-index: 2}
.main .scroll_arrow .arrow{position:absolute;width:33px;height:33px;overflow: hidden}
.main .scroll_arrow .arrow_img{position:absolute;opacity: 0;width:33px;height: 16px;background: url(/img/main/scroll_arrow.png) no-repeat center top;}
.main .scroll_arrow .arrow_img:nth-child(1){
    -webkit-animation: arrow 1.4s 0s linear infinite ;
    -moz-animation: arrow 1.4s 0s linear infinite ;
    animation:  arrow 1.4s 0s linear infinite ;
}
.main .scroll_arrow .arrow_img:nth-child(2) {
    -webkit-animation: arrow 1.4s 0.7s linear infinite;
    -moz-animation: arrow 1.4s 0.7s linear infinite;
    animation: arrow 1.4s 0.7s linear infinite;
}
@-webkit-keyframes arrow {
    0% {-webkit-transform: translate(0px, 2px);opacity: 0;}
    50% {-webkit-transform: translate(0px, 11px);opacity: 1;}
    100% {-webkit-transform: translate(0px, 20px);opacity: 0;}
}
@-moz-keyframes arrow{
    0% {-moz-transform: translate(0px, 2px);opacity: 0;}
    50% {-moz-transform: translate(0px, 11px);opacity: 1;}
    100% {-moz-transform: translate(0px, 20px);opacity: 0;}
}
@keyframes arrow {
    0% {transform: translate(0px, 2px);opacity: 0;}
    50% {transform: translate(0px, 11px);opacity: 1;}
    100% {transform: translate(0px, 20px);opacity: 0;}
}


/************메인컨텐츠************/
.mcon_area {position:relative; clear:both; width:100%; text-align:center; z-index:9; background:#fff;}

/*Ovis 제품리스트*/
.product_list {display:inline-block; width:1200px; padding-top:70px; height:1050px;}
.product_list .box {float:left; width:400px; text-align:center;}
.product_list .box a {display:block; height:490px; text-decoration:none; -webkit-transition: all 0.3s;transition: all 0.3s;}
.product_list .box a:hover {position:relative; box-shadow:0 0 20px #aaa;}
.product_list .box .pro_img {font-size:0; line-height:0;}
.product_list .box .name {padding-top:30px; font-family:'Gotham',sans-serif; font-weight:600; font-size:28px; color:#222;}
.product_list .box .name.line2 {padding-top:0;}
.product_list .box .txt {padding-top:12px; font-family:'Gotham',sans-serif; font-weight:600; font-size:13px; color:#f36f21; letter-spacing:-0.02em;}
.product_list .box .txt2 {padding-top:15px; font-family:'NotoKrR',sans-serif; font-size:15px; color:#888; letter-spacing:-0.06em;}

/*메인 바로가기*/
.mcon {width:100%; min-width:1200px;}
.mcon .mcon_box {float:left; width:50%;}
.mcon .mcon_box a {display:block; height:500px; text-decoration:none;}
.mcon .mcon_box.bg01 {background:url(/img/main/mcon_bg01.jpg) no-repeat center 50%;}
.mcon .mcon_box.bg02 {background:url(/img/main/mcon_bg02.jpg) no-repeat center 50%;}
.mcon .mcon_box .tit {padding-top:150px; font-family:'Gotham',sans-serif; font-weight:600; font-size:30px; color:#fff; letter-spacing:1px;}
.mcon .mcon_box .txt {padding-top:25px; font-size:15px; color:#fff; line-height:28px; opacity:.9;}
.mcon .mcon_box .btn {margin-top:35px; display:inline-block; width:174px; height:50px; line-height:50px; font-family:'Gotham',sans-serif; font-weight:600; color:#fff; border-radius:5px; -webkit-transition: all 0.5s; transition: all 0.5s;}
.mcon .mcon_box .btn.line1 {border:2px solid #e19163;}
.mcon .mcon_box .btn.line2 {border:2px solid #807168;}
.mcon .mcon_box:hover .btn.line1,
.mcon .mcon_box:hover .btn.line2 {border:2px solid #fff; background:#fff;} 
.mcon .mcon_box:hover .btn.line1 {color:#ff7e32;}
.mcon .mcon_box:hover .btn.line2 {color:#714c37;}


/************메인에서만이용하는 헤드************/
#menu_navi {background:none; border-bottom:none;}
#menu_navi ul li a {color:#fff;}
.down #menu_navi {background:#fff; border-bottom:1px solid #efefef;}
.down #menu_navi ul li a {color:#222;}
#head h1.logo a {background:url(/img/common/logo_fff.png) no-repeat left top;}
#head .down h1.logo a {background:url(/img/common/logo.png) no-repeat left top;}
.top_btn {display:none;}