@charset "utf-8";





/*main*/
.main_vis {position: fixed; width: 100%; height: 100vh; overflow: hidden;}
.main_vis .vis {background: url("/resources/img/main/main_vis1.jpg")no-repeat center/cover; float: left; height: 100vh;}
.main_vis .vis .inner {max-width: 97%;}
.main_vis .vis_txt {text-align: center; color: #fff; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%;}
.main_vis .vis_txt .brand {width: 80px; height: 53px; background: url("/resources/img/main/toro_logo.png")no-repeat center; display: inline-block; -webkit-background-size: contain;
background-size: contain;}
.main_vis .vis_txt .txt_wrap .tit {font-size: 80px; font-weight: 600;}
.main_vis .vis_txt .txt_wrap .txt {font-size: 20px; margin-top: 5px;}
.main_vis .vis_txt .txt_wrap .more {width: 200px; height: 40px; margin-top: 30px; display: inline-block;}
.main_vis .vis_txt .txt_wrap .more a {display: inline-block; width: 100%; height: 100%; text-align: center; color: #fff; border: 1px solid #fff; background-color: rgba(255,255,255,.2); line-height: 40px; transition: all .3s ease-in-out;}
.main_vis .vis_txt .txt_wrap .more a:hover {background-color: rgba(255,255,255,.4);}


.main .contents .title {font-size: 24px; padding: 100px 0 60px; box-sizing: border-box; border-bottom: 1px solid #000; }

.main .contents {position: absolute; width: 100%; top: 100vh; left: 0; background-color: #fff;}

.main_vis .vis2 {background: url("/resources/img/main/main_vis2.jpg")no-repeat center/cover;}
.main_vis .vis3 {background: url("/resources/img/main/main_vis3.jpg")no-repeat center/cover;}
.main_vis .vis4 {background: url("/resources/img/main/main_vis4.jpg")no-repeat center/cover;}

.main_vis .vis2 .brand {width: 130px; height: 44px;background: url("/resources/img/main/clubcar_logo.png")no-repeat center/contain; }
.main_vis .vis3 .brand {width: 100px; height: 50px;background: url("/resources/img/main/foley_logo.png")no-repeat center/contain; }
.main_vis .vis4 .brand {display: none;}

.slick-arrow {display: none !important;}
.slick-dots {position: absolute; bottom: 30px; width: 112px; left: 50%; transform: translateX(-50%);}

.slick-dots li { display: inline-block; margin: 0 8px;}
.slick-dots li button {text-indent: -9999px; font-size: 0; background: none; border: none;border: 1px solid #fff; background-color: rgba(255,255,255,.6); display: inline-block; width: 100%; height: 100%;width: 12px; height: 12px; padding: 0; cursor: pointer;}

.slick-dots li.slick-active button {background-color: #fff;}
/*section 공통*/

.section .txt_wrap, .section .img_box {position: relative; width: 50%; box-sizing: border-box;}
.section .img_box {width: 50%; height: 550px; overflow: hidden;}

.section .img_box .img { background: url("/resources/img/main/toro_pd.jpg")no-repeat center; -webkit-background-size: cover;
background-size: cover; text-indent: -9999px; width: 100%; height: 100%; transition: all .6s ease-in-out;}
.section .img_box .img.hover {transform: scale(1.05);}
.section .txt_wrap .tit_box .tit {font-size: 80px; display: inline-block;     cursor: default; transition: all .4s ease-in-out;-webkit-transition-delay: .15s;transition-delay: .15s;float: left; line-height: 100%;}

.section .txt_wrap .tit_box .tit.hover {transform: translateX(25px);}
.section .txt_wrap .tit_box .plus_btn {display: inline-block; margin-left: 5%;     margin-top: 5px; float: left;}
.section .txt_wrap .tit_box .plus_btn a {display: block; width: 80px; height: 80px; position: relative; text-indent: -9999px;}
.section .txt_wrap .tit_box .plus_btn a span{width: 1px; height: 40px; left: 50%; transform: translateX(-50%); top: 0px; content: ""; position: absolute; background-color: #000; display: inline-block; transition: all .3s ease-in-out;}
.section .txt_wrap .tit_box .plus_btn a span.md {width: 80px; height: 1px; top: 50%; transform: translateY(-50%); left: 0;}
.section .txt_wrap .tit_box .plus_btn a span.top {transform-origin:right bottom;}
.section .txt_wrap .tit_box .plus_btn a span.bt {bottom:0px; top: auto; transform-origin:right top;}

.section .txt_wrap .tit_box .plus_btn a:hover span.top, .section .txt_wrap .tit_box .plus_btn a:hover span.bt {left: 100%;}
.section .txt_wrap .tit_box .plus_btn a:hover span.top {transform: rotate(-45deg);}
.section .txt_wrap .tit_box .plus_btn a:hover span.bt {transform: rotate(45deg);}


.section .txt_wrap .tit_box .plus_btn a.hover span.top, .section .txt_wrap .tit_box .plus_btn a.hover span.bt {left: 100%;}
.section .txt_wrap .tit_box .plus_btn a.hover span.top {transform: rotate(-45deg);}
.section .txt_wrap .tit_box .plus_btn a.hover span.bt {transform: rotate(45deg);}

.section {padding: 60px 0; box-sizing: border-box; position: relative;}

.section .txt_wrap .txt_box {font-family: 'Noto Sans KR', sans-serif; margin-top: 60px;}
.section .txt_wrap .txt_box .name {font-weight: 400; line-height: 150%; font-size: 20px;}

.section .txt_wrap {padding-top: 30px;}

.section .txt_wrap.fl {padding-right: 3%; box-sizing: border-box;}
.section .txt_wrap.fr {padding-left: 3%; box-sizing: border-box;}

.block {display: block;}
.section .txt_wrap .txt_box .txt {margin-top: 30px; word-break: keep-all;}
.section .txt_wrap .txt_box .txt p{ margin-top: 25px; line-height: 150%; width: 80%;}

ul.basic li{position: relative; line-height: 150%; margin-bottom: 5px; padding-left: 7px; box-sizing: border-box; word-break: keep-all;}
ul.basic li:last-child{margin-bottom: 0;}

ul.basic li:before {content: ""; width: 2px; height: 2px; background-color: #000; top: 10px; left: 0; position: absolute;}

.pd_btn {position: absolute; bottom: 90px; width: 20%; height: 40px; left: 50%; transform: translateX(-50%);}
.pd_btn a {display: block; width: 200px; height: 100%; background-color: #000; color: #fff; font-size: 14px; text-align: center; line-height: 40px; transition: all .3s ease-in-out; margin: 0 auto;}
.pd_btn a span {display: inline-block;background: url(/resources/img/main/arrow_ico.png)no-repeat center right; width: 0px; height: 10px;transition: all .3s ease-in-out;}
.pd_btn:hover a {transform: translateX(50px);}
.pd_btn.rt:hover a {transform: translateX(-50px);}

.pd_btn:hover a span {width: 30px; margin-left: 8px;}

.pd_btn.hover a {transform: translateX(50px);}
.pd_btn.rt.hover a{transform: translateX(-50px);}

.pd_btn.hover a span {width: 30px; margin-left: 8px;}

.section.spk .img_box .img {background: url("/resources/img/main/spk_pd.jpg")no-repeat bottom center; -webkit-background-size: cover;
background-size: cover;}
.section.club .img_box .img {background: url("/resources/img/main/club_pd.jpg")no-repeat center; -webkit-background-size: cover;
background-size: cover;}
.section.foley .img_box .img {background: url("/resources/img/main/foley_pd.jpg")no-repeat center; -webkit-background-size: cover;
background-size: cover;}
.section.other .img_box .img {background: url("/resources/img/main/other_pd.jpg")no-repeat center; -webkit-background-size: cover;
background-size: cover;}


/***0420 메인 동영상***/
.main_vis_logo {position: fixed; width: 100%; height: 100vh; overflow: hidden; background: rgba(0,0,0,.3);}
.main_vis_logo .txt {color:#fff; font-size: 24px; text-align: center; background:url(/resources/img/main/main-vis_logo.png) center top no-repeat;/* z-index: 1; */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding-top: 130px; width: 270px;}
.main_vis_logo .txt2 {color: #fff; font-size: 24px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 100px;}
.bgMovie {position: fixed; top: 0; left: 50%; width: 100%; height: 100vh; transform: translateX(-50%); z-index: -1;}
.bgMovie video {width: 100%;height: auto;}






@media screen and (max-width:1500px){
   .bgMovie video { width: auto; height: 120vh;}
}

@media screen and (max-width:1200px){
    .section .txt_wrap .tit_box .tit {font-size: 70px;}

    .bgMovie {height: 130vh}
    .bgMovie video {width: auto;height: 100%; position: absolute; left: 50%; transform: translateX(-50%);}
}

@media screen and (max-width:1024px){
    .main_vis .vis_txt .txt_wrap .tit {font-size: 70px;}

    .section .txt_wrap .tit_box .tit {font-size: 53px;}
    .section .txt_wrap .tit_box .plus_btn {margin-left: 3%;}
    .section .txt_wrap .tit_box .plus_btn a {width: 60px; height: 60px;}
    .section .txt_wrap .tit_box .plus_btn a span {height: 30px;}
    .section .txt_wrap .tit_box .plus_btn a span.md {width: 60px;}

    .main .contents .title {padding: 80px 0 40px;}
    .txt_wrap .block {display: inline;}

    .main_vis_logo, .bgMovie {height: 80vh;}
    .main .contents {top: 80vh;}

    .section .txt_wrap .txt_box .txt p{ width: 90%;}
}


@media screen and (max-width:768px){
    .main_vis .vis_txt .txt_wrap .tit {font-size: 60px;}

    .main_vis .vis_txt .brand {height: 45px;}
    .main_vis .vis2 .brand {height: 38px;}

    .section .txt_wrap, .section .img_box {float: none; width: 100%;}
    .section .img_box {height: 400px; animation-name: fadeInDown;}
    .pd_btn {position: static; transform: translateX(0); margin-top: 30px;}
    .section .txt_wrap .txt_box {margin-top: 30px;}
    .section .txt_wrap .tit_box, .section .txt_wrap .txt_box .name, .section .txt_wrap .txt_box .txt {animation-name: fadeInDown;}

    .main.contents .title {padding: 60px 0 20px;}
    .section .txt_wrap.fl {padding-right: 0;}
    .section .txt_wrap.fr {padding-left: 0;}
    .section .txt_wrap .tit_box .tit {line-height: 150%;}
    .section .txt_wrap .txt_box .txt p{ width: 100%;}
    .pd_btn a:hover {transform: translateX(0) !important;}



    /*풀화면일때 이미지, 버튼에 효과준거 빼기*/
    .section .img_box .img.hover {transform: scale(1);}
    .pd_btn.hover a, .pd_btn.rt.hover a{transform: translateX(0);}
    .pd_btn.hover a span {width: 0; margin-left: 0;}

    .main_vis_logo, .bgMovie {height: 56vh;}
    .main .contents {top: 56vh;}


}

@media screen and (max-width:500px) {
    .main_vis .vis_txt .txt_wrap .tit {font-size: 50px;}
    .main_vis .vis_txt .txt_wrap .txt {font-size: 16px;}
    .main_vis .vis_txt .txt_wrap .more {width: 170px; margin-top: 15px; height: 30px;}
    .main_vis .vis_txt .txt_wrap .more a {line-height: 30px;}
    .main_vis .vis_txt .brand {height: 35px;}
    .main_vis .vis2 .brand {height: 30px;}

    .ham_menu > .ham_inner > .gnb > ul > li:before {top: 35px;}

    .main_vis_logo, .bgMovie {height: 37vh;}
    .main .contents {top: 37vh;}
    .main_vis_logo .txt {display: none;}
    .main_vis_logo .txt2 {margin-top: 10px;}
}