﻿
        .jpx-wp-wrapper {
            width: 100%;
            left: 0;
            top: 0;
            height: 100%;
            z-index: -2;
            overflow: hidden;
            opacity: 1 !important;
            display: block;
            background: transparent;
            cursor:pointer;
        }

        .jpx-wp-brandlabel div {
            position: fixed;
            right: 0;
            top: 0;
            width: 78px;
            height: 17px;
            z-index: 99;
        }

        #jpx-wp-layer-bg {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        #jpx-wp-layer-left-wrapper {
            visibility: visible;
            z-index: 3;
            overflow: hidden;
            position: fixed;
            display: block;
            outline: none 0px;
            top: 0px;
            height: 100%;
            width: calc((100% - 1119px) / 2);
            left: 0px;
        }

        #jpx-wp-layer-left-container {
            z-index: 0;
            display: block;
            outline: 0 none;
            overflow: hidden;
            height: 100%;
            position: absolute;
            top: 0;
            width: 100%;
            right: 0;
        }

        #jpx-wp-layer-left {
            position: absolute;
            display: block;
            top: 0;
            outline: 0 none;
            overflow: hidden;
            background: transparent;
            height: 100%;
            width: 100%;
            z-index: 1;
            right: 0;
            transform-origin: top right;
            border: 0;
        }

        #jpx-wp-layer-right-wrapper {
            visibility: visible;
            z-index: 3;
            overflow: hidden;
            position: fixed;
            display: block;
            outline: none 0px;
            top: 0px;
            height: 100%;
            width: calc((100% - 1119px) / 2);
            right: 0px;
        }

        #jpx-wp-layer-right-container {
            z-index: 0;
            display: block;
            outline: 0 none;
            overflow: hidden;
            height: 100%;
            position: absolute;
            top: 0;
            width: 100%;
            left: 0;
        }

        #jpx-wp-layer-right {
            position: absolute;
            display: block;
            top: 0;
            outline: 0 none;
            overflow: hidden;
            background: transparent;
            height: 100%;
            width: 100%;
            z-index: 1;
            left: 0;
            transform-origin: top left;
            border: 0;
        } 
        #jpx-wp-layer-top-wrapper {
            visibility: visible;
            z-index: 3;
            position: absolute;
            display: block;
            outline: none 0;
            top: 0;
            left: 0;
            height: 0;
            width: 100%;
            margin-top: 113px;
        }

        #jpx-wp-layer-top-container {
            z-index: 0;
            width: 1170px;
            height: 140.1px !important;
            margin: 0 auto;
            position:relative;
        }

        #jpx-wp-layer-top {
            width: 100%;
            height: 100%;
            background: transparent;
            transform-origin: top center;
            margin: 0;
            top: 0;
        }

        #jpx-wp-layer-top {
            border: 0;
        } 
.clickable, .ct {
    cursor: pointer !important;

    pointer-events: auto !important;
}

.ignore-clicks {
    pointer-events: none !important;
}

.zero-alpha {
    opacity: 0;
}

 


#body_back {
    background-color: black;
}

#body_back .top-grad {
    position: absolute;
    width:100%;
    height:9vw;
    top:0;
    z-index: 1;
    opacity:0.6;
}

#body_back .wrapper {
    position: absolute;
    width:50%;
    height: 100%;
    z-index: 0;
}

#body_back .wrapper.left-wrapper {
    background-color: gray;
    top:0;
    right:50%;
}

#body_back .video-wrapper {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
}

#body_back .video-wrapper video {
    position: absolute;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-65%, -50%);
}

#body_back .wrapper.left-wrapper {
    background-image: url("assets/wwf_fam_left.jpg");
    background-size: cover;
    background-position-x:0%;
    background-position-y:40%;
    background-repeat: no-repeat;
    top:0;
    left:0;
    height:100%;
    /*height:60%;*/
            cursor:pointer;
}

 
#body_back .wrapper.left-wrapper .bottom-grad {
    position: absolute;
    bottom:0;
    width:100vw;
    height:14vh;
    z-index: 1;left:0px;

}



#body_back .wrapper.right-wrapper {
    background-image: url("assets/wwf_fam_right.jpg");
    background-size: cover;
    background-position-x:20%;
    background-position-y:40%;
    background-repeat: no-repeat;
    top:0;
    right:0;
    height:100%;
    /*height:60%;*/
            cursor:pointer;
}


#body_back .wrapper.right-wrapper .bottom-grad {
    position: absolute;
    bottom:0;
    width:100vw;
    height:14vh;
    z-index: 1;
}



/* TOP */
#body_top .middle-grad {
    position: absolute;
    width:75%;
    height:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
}

#body_top .top-headline {
    position: absolute;
    top:50%;
    left:50%;
    width:36%;
    transform:translate(-50%,-50%);
    z-index: 99;
}


/* GUTTERS */
.frame {
    position: absolute;
    z-index: 0;
    top:0;
    left:0;
    width:100%;
    height: 100%;
}

#frame-2 {
    display:none;
}
 


.arrow {
    position: absolute;
    top:75%;
    width:27px;
    height:50px;
    margin-top: -25px;
    z-index: 99;
}

.arrow#arrow-right {
    right:3%;
    transform-origin: right;
}

.arrow#arrow-left {
    left:3%;
    transform-origin: left;
}


.cta-wrapper {
    position: absolute;
    bottom:3.5vh;
    left:50%;
    width:378px;
    height:100px;
    margin-left: -189px;
    transform-origin: bottom center;
    z-index: 99;
}

.cta-wrapper .cta {
    position: absolute;
    width:100%;
    transition: transform 0.2s;
}

.cta-wrapper:hover .cta {
    transform:scale(1.075);
}


#body_left .bottom-grad {
    position: absolute;
    bottom:0;
    width:100%;
    height:40%;
    z-index: 0;
}

#video-caption {
    position: absolute;
    top: 80%;
    left: 50%;
    font-size: 25px;
    color: white;
    font-family: "gotham-book";
    text-align: center;
    z-index: 99;
    transform: translate(-50%, -50%);
    width: 90%;
}


.right-copy { 
    position: absolute;
    top: 51%;
    left: 50%;
    width: 571px;
    height: 154px;
    z-index: 99;
    margin: 90px 110px;
    transform: matrix(0.664063, 0, 0, 0.664063, 0, 0);
    opacity: 1;
    color: #fff;
} 

#topADContainer  .banner-container{}
        
#topADContainer .top_banner_img {display:inline-block;float: left;}
#topADContainer .top_banner_img.last{display:inline-block;float: none; }

.youtube {
background-color: #000;
 position: relative;
overflow: hidden;
cursor: pointer;
width:300px;
height:170px;
left:0px;
top:0px;
}

.youtube img {
width: 100%;
height:100%;
left: 0;
opacity: 0.7;
}

.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}

.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
cursor: pointer;
}

.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}

.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}

.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}

.cd-top {display: inline-block;height: 40px;width: 40px;position: fixed;bottom: 40px;margin-left: 1170px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);overflow: hidden;text-indent: 100%;white-space: nowrap;background: #010101 url(../newkd_images/icon/cd-top-arrow.svg) no-repeat center 50%;visibility: hidden;opacity: 0;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s;transition: opacity .3s 0s, visibility 0s .3s;}
.cd-top.cd-is-visible {visibility: visible;opacity: 1;}
.cd-top.cd-fade-out {opacity: .5;}
 
#bsdsidebarads1 {
position: fixed;
margin-left: -615px;
width: 615px;
overflow: hidden;
}

#bsdsidebarads {
position: fixed;
margin-left: 1170px;

width: 615px;
overflow: hidden;
}
#gn-header{    position: relative;}
footer{    position: relative;}




.videoad{z-index:10} 
.video-ad{margin:0px auto; position: unset;width: 1200px;height: 100%;height: 770px;z-index: 0;}
.vid-wrap{overflow: hidden;height: 100%;width: 100%;float: left;}
#mst_video{background:#000;}

.clickable_area{position: absolute;top: 0px;width: 100%;height: 770px;cursor: pointer;}
.aside2 {
    width: 300px !important;
    height: 300px !important;
    right: 0px;
    bottom: 90px;
    border: 1px solid;
    position: fixed  !important;
    z-index: 15000;    top: auto !important;
}



  
#gnbBanrDiv {z-index: 1001;position: relative;}
#gbn_data_section{  max-height: 800px;position: relative;}
.gnb_bnr_html {width: 100%;position: relative;z-index: 600;top: 0;left: 0;right: 0;min-width: 1170px;}
.gbn_summery_banner {height: 65px;text-align: center;position: relative;z-index: 600;}
.gbn_summery_banner.firsttime {display:none;}
.gbn_summery_banner .small_banner img.banner{height: 65px;vertical-align: top;}
.gbn_summery_banner .small_banner{display:block;float:left;position: relative;}
.gbn_summery_banner .small_banner .expend_btn_area{ position:absolute;top:15px;right:25px;}

.gbn_banner_details {display:none;position: absolute;top: 0;left: 0;right: 0;cursor:pointer}
.gbn_banner_details.firsttime {display:block;position: relative;top: 0;left: 0;right: 0;}
.gbn_banner_details .gnb_bnr_cont {position: relative;width: 1170px;text-align: center;margin: 0 auto;height: 800px;}
.gbn_banner_details .gnb_bnr_cont .gnb_bnt_close {position: absolute;top: 65px;right: 30px;width: 50px;height: 50px;} 
.gbn_banner_details .gnb_bnr_cont .innerbanner{width: 1170px;margin-top: 0px;height:100%}
.gbn_banner_details .gnb_bnr_cont .innerbanner_onlyimg {width: 970px;margin-top: 170px;height: 456px;}
.gbn_banner_details .gnb_bnr_cont .tv_promo_mov {position: absolute;top: 155px;left: 280px;}
.gbn_banner_details .gnb_bnr_cont.side .tv_promo_mov {position: absolute;top: 260px;right:30px;    left: auto;}          

.btn_box_mt{position: relative;top:-800px;left:0;right:0;}
.btn_box_cd{position: relative;width:1170px;text-align:right;margin:0 auto; }
.gnb_bnt_close {position: absolute;top: 65px;right: 30px;width: 50px;height: 50px;} 



 
@media (max-width: 1650px) { 
.gbn_banner_mom_cont{background-size: cover !important;}
/*.gbn_banner_details .gnb_bnr_cont { height: 750px;}
.btn_box_mt { top: -775px;}*/
}
 


 
@media (min-width: 1367px) and (max-width: 1599px) { 
.gbn_banner_mom_cont{background-size: cover !important;}
/*.gbn_banner_details .gnb_bnr_cont { height: 628px;}
.btn_box_mt { top: -650px;}*/
}
 

 
@media (min-width: 1280px) and (max-width: 1366px) { 
.gbn_banner_mom_cont{background-size: cover !important;}
/*.gbn_banner_details .gnb_bnr_cont { height: 528px;}
.btn_box_mt { top: -550px;}*/
}
  
@media (min-width: 1151px) and (max-width: 1279px) { 
.gbn_banner_mom_cont{background-size: cover !important;}
.gbn_banner_details .gnb_bnr_cont { height: 575px;}
.btn_box_mt { top: -610px;}
.btn_box_cd{width:100%;}

}
  

@media(max-width: 1150px) { 
.gbn_banner_mom_cont{background-size: cover !important;}
.gbn_banner_details .gnb_bnr_cont { height: 500px; }
.btn_box_mt { top: -520px;
    left: -150px;} 
.btn_box_cd{width:100%;}

}
  