@charset "utf-8";
/* CSS Document */
html{color:#FFF;background:#FFF; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0; border:0;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
legend{color:#000}
a{text-decoration:none; color: #FFF; }
*:focus{outline:0;}
.clear {clear:both;}
.mobile {display:none !important;}
.desktop {display:block !important;}
.hc-content {font-size: 1em; width: 100%; max-width: 1280px; margin: 0 auto; display: block; overflow: hidden; position: relative; -moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-smoothing:antialiased; }
.hc-sect { display: table; position: relative; width: 100%; margin: 0 auto; overflow: hidden; }
.hc-sect .content-wrap { display: table; position: relative; width: 100%; margin: 0 auto; text-align: center; }
.hc-img { width: 100%; margin: 0 auto; display: block; }
.hc-img.side { max-width: 700px;height: auto; }
.hc-sec .left-wrap { width: 50%; display: table-cell; position: relative; text-align: center;}
.hc-sec .right-wrap { width: 50%; display: table-cell; position: relative; text-align: center;}
.hc-sec .txt-wrap { position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); color: #000; margin: 0 auto; text-align: center; }
.hc-sec video {width: 100%;height: auto;max-width: 640px; z-index: 2;position: relative;}
.h1, .h2 { font-family: 'Montserrat', sans-serif; font-size:3em; color:#000; line-height:1.2; overflow: hidden; font-weight: 200; }

.h3 { font-family: 'Montserrat', sans-serif; font-size:1.2em; color:#000; line-height:1; overflow: hidden; font-weight: 600; }
.f1 { font-family: 'Montserrat', sans-serif; color:#000; line-height:1.8; overflow: hidden; font-weight: 400; font-size: 1.1em;}
.f2 { font-family: 'Montserrat', sans-serif; font-size:1em; color:#000; line-height:1.5; overflow: hidden; font-weight: 400; text-align: center;}

.sec1 .f1 { margin: 3% auto; }
.sec1 .btn { margin-top: 5%; }
.hc-sec.sec1 .left-wrap {width:40%;}
.hc-sec.sec1 .right-wrap {width:60%;}
.hc-sec.sec1 .hc-img.side {max-width:100%;}
.sec3 .f1, .sec2 .f1 { margin: 3% auto; }

.sec4 { margin: 3% auto 6%; }
.sec4 .h2 {text-align:center; margin:50px 0;}
.sec4 .h3 { margin:40px auto 5px; }
.sec4 .note { display: table-cell; width: 33.3333%; vertical-align: top;}
.sec4 .note .note-wrap { width: 90%; text-align: center; }
.sec4 .note.two .note-wrap { margin: 0 auto; text-align: center; }
.sec4 .note-wrap .f1 { width: 95%; margin: 0 auto; }
.sec4 .note.one .note-wrap { float: left; }
.sec4 .note.three .note-wrap { float: right; }

.sec5 .f1 { margin: 3% auto; }
.sec5 .gbtn {margin:40px 0;}
.sec5 .f2 {font-size: 2em;font-weight: 200;padding-right: 5px;}
.sec5 .slick-slide {text-align: center;}
.sec5 .col-6.model {float:right;}
 .hc-content .slick-slide img {display: inline;max-width:450px;}
 .hc-content .slider {position: relative;}
 .hc-content .slick-arrow {position: absolute;top: 50%;display: block;vertical-align: middle;cursor: pointer; ;font-family:"fontello";content: ''; font-size: 30px;z-index: 5;}
 .hc-content .slick-arrow:after {  position: absolute; display: inline-block;padding: 2px;font-family:"fontello";content: '\e802';overflow: hidden;font-size:30px;top: 40%;}
 .hc-content .slick-prev:after { font-family:"fontello"; content: '\e801' !important; left: 20px;font-size:30px; }
 .hc-content .slick-next:after {right:20px;}
 .hc-content .slick-prev {left:0;font-size: 0;}
 .hc-content .slick-next {right:0;font-size: 0;}
 .hc-content .slick-disabled { opacity:0; }l
 .hc-content .slick-disabled:hover { box-shadow:none; cursor:default; opacity:0;}
 .hc-content .slick-dots li button::before {font-size: 45px !important;}
 .hc-content .slick-dots li {margin:0 2px;}
 .hc-content .slick-dots {margin-bottom: -40px;}

/* Dots */
 .hc-content .slick-dotted.slick-slider {margin-bottom: 30px;}
 .hc-content .slick-dots
{
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
 .hc-content .slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
 .hc-content .slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.hc-content .slick-dots li button:hover,
.hc-content .slick-dots li button:focus
{
    outline: none;
}
.hc-content .slick-dots li button:hover:before,
.hc-content .slick-dots li button:focus:before
{
    opacity: 1;
}
 .hc-content .slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 .hc-content .slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

@media (max-width: 1280px) {
.hc-content .youtube .play { height: 5vw; width: 3.5vw; }
.hc-content { font-size: 1.2vw; }
.sec4 .content-wrap { width: 97%; margin: 0 auto;}
.sec4 .f2 { font-size: 0.9em; }	
.hc-content .slick-slide img {width:350px;}
.sec5 .gbtn {margin: 25px 0;}	
} 
@media (max-width: 950px) {
.hc-content .slick-slide img {width:250px;}	
}
@media (max-width: 768px) { 
.mobile {display:block !important;}
.desktop {display:none !important;}
.hc-content { font-size: 2.5vw; }	
.h1, .h2 { font-size: 3em; line-height: 1.2; }	
.f1 { font-size: 1.4em; line-height: 1.6; }	
.hc-sec.sec1 .left-wrap {width:100%;}
.hc-sec.sec1 .right-wrap {width:100%;}
.hc-sec video {max-width:100%;}
.sec1 .f1, .sec2 .f1, .sec3 .f1, .sec5 .f1  { margin: 30px 20px; }
.hc-img.side {max-width: 100%;height: auto;}	
.sec1 .content-wrap, .sec2 .content-wrap, .sec3 .content-wrap, .sec5 .content-wrap { display:flex; flex-direction: column; }
.sec1 .left-wrap, .sec2 .right-wrap, .sec3 .left-wrap, .sec5 .left-wrap { order:2; width: 100%; }
.sec1 .right-wrap, .sec2 .left-wrap, .sec3 .right-wrap, .sec5 .right-wrap { order:1; width: 100%; }	
.sec1 .txt-wrap, .sec2 .txt-wrap, .sec3 .txt-wrap, .sec5 .txt-wrap{ position: relative; top: auto; transform: none; margin: 9% auto 12%; }
.sec2 .play-txt { display:none; }
.hc-content .youtube .play { height: 14vw; width: 10vw; }
.hc-content .video-container { padding-bottom: 125%; }		
.sec3 .txt-wrap {  margin: 9% auto 5%; }	
.sec4 .f2 { font-size: 1.4em; }
.sec4 .h3 {font-size:1.4em;}
.sec4 .note { display: block; width: 100%; vertical-align: top; margin-bottom: 40px; }
.sec4 .note.one .note-wrap { float: none; margin: 0 auto; }
.sec4 .note.three .note-wrap { float: none; margin: 0 auto; }
.sec5 .col-6 {width:100%;}	
.hc-content .slick-slide img  {width:90%;}
.sec5 .gbtn {margin: 40px 0;}
}