// padding,margin

$l-space:50px;
$m-space:25px;
$s-space:10px;
@font-face {
    font-family: Brandon_reg;
    src: url(FuturaPTBook.otf);
  }
@font-face {
    font-family: NexaBold;
    src: url(NexaBold.otf);
  }
/*@font-face {
    font-family: NexaLight;
    src: url(NexaLight.otf);
  }*/
ul, li{
    list-style-type:none;
    padding:0;
    margin:0;
}
html{font-size: 16px;}

html,
body{
    font-family:'Brandon_reg','Noto Sans TC','微軟正黑體','Microsoft JhengHei',Helvetica,Arial,sans-serif;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font-weight: 300;
    letter-spacing: 1px;
}

body{

    // Top Menu
    header{
        #my-navbar{
            transition:.6s ease-in-out;
        }
        nav{
            background-color:rgba(230,229,239,.6);
            padding:.5rem 1rem;
            .navbar-brand{
                img{
                    position: relative;
                    height:40px;
                }
            }
            div.collapse{
                ul.navbar-nav{
                    li{
                        margin-right:20px;
                        a{
                            color: #292929 !important;;
                            letter-spacing: 1px;
                            opacity: .7;
                            transition:.2s linear;
                        }
                        a:hover{
                            opacity:1;

                        }
                        a.apply{
                            border:2px solid #292929;
                            padding-left:30px;
                            padding-right:30px;
                        }
                        a.apply:hover{
                            background-color:#fff;
                        }
                    }
                }
                ul.social-bar{
                    position:absolute;
                    right:20px;
                    display: flex;
                    li.chinese{
                        margin-left:50px;
                        margin-right:0;
                        a{
                            margin-right:10px;
                            line-height: 30px;

                        }
                    }
                    .wechat{display:none;}
                }
                .info{
                    display: none;
                }
            }
            .social-bar{
                li{
                    a{
                        cursor: pointer;
                        opacity: .7;
                        transition:.2s linear;
                        img{
                            width:30px;
                            height:30px;
                            cursor:pointer;
                            margin-right:20px;

                        }
                    }
                    a:hover{
                        opacity: 1;
                    }
                }
            }
        }
    }
    .menuCloseLayer{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        color:transparent;
        display: none;
        z-index: 1;
    }
    // END Top Menu
    main{
        //Top Hero img & BG
        div.HeroBG{
            width:100%;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            z-index: -1;
            overflow:hidden;
            ul{
                li{
                    width:100%;
                    .BG2{float: right;}
                    img{transform: scale(1.1);}
                    .KV2{
                        display: none;
                    }
                }
            }
        }
        #top-hero{
            position: relative;
            height:1080px;
            .container{
                height:100%;
                .row{
                    height:100%;
                    .left-content{
                        display: flex;
                        .wrapper{
                            margin:auto;
                            align-items: center;
                            justify-content: center;
                            .event-name{
                                h1{
                                    font-size: 44px;
                                    color:#292929;
                                    opacity: .8;
                                    font-family:'NexaBold','Noto Sans TC','微軟正黑體','Microsoft JhengHei',Helvetica,Arial,sans-serif;
                                    letter-spacing: 1px;
                                }
                            }
                            .slogan{
                                display: inline-block;
                                margin-top:10px;
                                padding:10px 73px;
                                border-radius: 5px;
                                background-color:rgba(255,255,255,.7);
                                box-shadow: 0px 10px 13px -7px rgba(0,0,0,.03), 5px 10px 15px 1px rgba(0,0,0,.01);
                                img{
                                    position: relative;
                                    padding-right:15px;
                                    top:-3px;
                                }
                                h3{
                                    display: inline-block;
                                    line-height: 39px;
                                    margin-bottom:0;
                                    font-size: 20px;
                                }
                            }
                            .nav-link.apply{
                                display: none;
                            }
                        }
                    }
                }
            }
        }
        .intro{
            .container{
                position: relative;
                display: block;
                padding:80px;
                background-color: #e7e9f6;
                top:-50px;
                border-radius: 5px;
                box-shadow: 10px 10px 13px -7px rgba(0,0,0,.08), 5px 10px 15px 1px rgba(0,0,0,.03);
                margin-bottom:100px;
                .whitebg{
                    position:absolute;
                    top:20px;
                    left:20px;
                    width:100%;
                    height:100%;
                    background-color: #fff;
                    border-radius:5px;
                    z-index: -1;
                    box-shadow: 25px 25px 13px -7px rgba(0,0,0,.08), 5px 10px 15px 1px rgba(0,0,0,.04);
                }
                .row{
                    .right-content{
                        position: relative;
                        .wrapper{
                            .tag{
                                background-color:#cec3ef;
                            }
                            h2{
                                margin-top:20px;
                                font-weight: bold;
                            }
                            p{
                                font-size: 20px;
                                margin-top:30px;
                                line-height:25px;
                                text-align: justify;
                            }
                        }
                        .movingarrow{
                            position: absolute;
                            top:-59px;
                            left:-240px;
                            transition:.5s ease-in-out;
                        }
                    }
                    .left-content{
                        position: relative;
                        .movingobjectL{
                            position:absolute;
                            top:0;
                            left:0;
                            transition:.4s ease-in-out;
                        }
                        .movingobjectR{
                            position:absolute;
                            top:0;
                            right:-68px;
                            transition:.3s ease-in-out;
                        }
                    }
                }
            }


        }

        .dtalks{
            overflow-x:hidden;
            .container{
                .row{
                    .right-content{
                        position: relative;
                        .wrapper{
                            padding:50px;
                            padding-left: 0;
                            .card{
                                position: relative;
                                img{
                                    width:100%;
                                    border-radius: 5px;
                                    box-shadow: 10px 10px 13px -7px rgba(0,0,0,.2), 5px 10px 15px 1px rgba(0,0,0,.03);
                                }
                                .whitebg{
                                    position:absolute;
                                    top:20px;
                                    left:20px;
                                    width:100%;
                                    height:100%;
                                    background-color: #ccc3ef;
                                    border-radius:5px;
                                    z-index: -1;
                                    box-shadow: 25px 25px 13px -7px rgba(0,0,0,.08), 5px 10px 15px 1px rgba(0,0,0,.04);
                                    transition:.8s ease-in-out;
                                }
                            }

                        }
                        .movingarrow{
                            position:absolute;
                            bottom:27px;
                            left:-75px;
                            transition:.4s ease-in-out;
                        }
                    }
                    .left-content{
                        justify-content: center;
                        align-items: center;
                        margin:auto;
                        position: relative;
                        .wrapper{
                            padding:50px;
                            .tag{
                                background-color:#cec3ef;
                            }
                            h3{
                                margin-top:20px;
                            }
                            h1{
                                font-weight: bold;
                                margin-top:25px;
                            }
                            p{
                                font-size: 20px;
                                margin-top:50px;
                            }
                        }
                        .movingarrow{
                            position:absolute;
                            top:5px;
                            right:-130px;
                            transition:.5s ease-in-out;
                        }
                    }
                }
            }

        }

        .dtalks{
            overflow-x:hidden;
            .container{
                .row{
                    .right-content{
                        position: relative;
                        .video_wrapper{
                            padding: 0;
                            margin-bottom: 50px;
                            margin: auto;
                            width: 50%;
                            padding: 10px;
                            .card{
                                position: relative;
                                .iframe{
                                    width:100%;
                                    border-radius: 5px;
                                    box-shadow: 10px 10px 13px -7px rgba(0,0,0,.2), 5px 10px 15px 1px rgba(0,0,0,.03);
                                }
                                .whitebg{
                                    position:absolute;
                                    top:20px;
                                    left:20px;
                                    width:100%;
                                    height:100%;
                                    background-color: #ccc3ef;
                                    border-radius:5px;
                                    z-index: -1;
                                    box-shadow: 25px 25px 13px -7px rgba(0,0,0,.08), 5px 10px 15px 1px rgba(0,0,0,.04);
                                    transition:.8s ease-in-out;
                                }
                            }
                        }
                    }
                }
            }
        }

        .dtalks.portfolio{
            .container{
                margin-top:100px;
                .row{
                    .left-content{
                        .wrapper{
                            p{
                                margin-top:10px;
                                margin-bottom:5px;
                            }
                        }
                    }
                }
            }
        }

        .footer{
            .wrapper{
                position: relative;
                background-color: #e7e9f6;
                padding:100px;
                justify-content: center;
                align-items: center;
                margin:auto;
                margin-top:100px;
                .container{
                    .row{
                        justify-content: center;
                        div{
                            display: flex;
                            justify-content: center;
                            .tag{
                                background-color:#fff;
                            }
                        }
                        .footerlogo{
                            span{
                                width:150px;
                                margin:30px;
                                img{
                                    width:100%;
                                }
                            }
                        }
                    }
                }
            }
            .info{
                text-align: center;
                padding-top:20px;
                padding-bottom:10px;
                background-color:#fff;
            }
        }
        main.judges{
            margin-top:50px;
            .intro{
                .container{
                    margin-bottom:0;
                }
            }
        }
    }
    main.judges.highlight{
        .intro{
            .container{
                .row{
                    .right-content{
                        .tabs{
                            display: flex;
                            justify-content: center;
                            margin-top:30px;
                            a{
                                color:#292929;
                                text-decoration: none;
                                p{
                                    padding:15px 60px;
                                    cursor: pointer;
                                    transition:.2s ease-in-out;
                                }
                                p:hover{
                                    background-color:#fff;
                                }
                                p.right{border-left:2px solid #292929;}
                            }


                        }
                    }
                }
            }
        }
    }
    .tag{
        padding:5px 30px;
        border-radius: 5px;
        box-shadow: 10px 10px 13px -7px rgba(0,0,0,.2), 5px 10px 15px 1px rgba(0,0,0,.04);
        font-size: 12px;
        margin-bottom:10px;
    }
    .navbar-dark .navbar-toggler-icon{
        background-image: url(../images/icon/menu.svg);
        opacity: .5;
        transition:.2s ease-in-out;
    }
    .navbar-dark .navbar-toggler-icon:hover{opacity: .8;}

    //----- award categories------//
    main.awardCate{
        margin-top:150px;
        .intro{
            .container{
                padding:30px 100px;
                background-color:transparent;
                box-shadow: none;
                margin-bottom:30px;
                .row{
                    .right-content{
                        .wrapper{
                            h2{
                                text-align: center;
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
        .categoriesDropDown{
            .container{
                .row{
                    .right-content{
                        padding:0;
                        button{
                            position: relative;
                            transition:.3s ease-in-out;
                            font-size: 20px;
                            margin-left: 50px;
                            cursor:inherit;
                            span{
                                width:20px;
                                position:absolute;
                                bottom:15px;
                                img{width:100%;}
                            }
                        }
                        button:hover{
                            background-color:rgba(230, 229, 239, 0.4);
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
    main.judges{
        .dtalks{
            overflow-x: unset;
            .container{
                .row{
                    div{
                        .card{
                            background-color: transparent;
                            border:1px solid transparent;
                            margin-right:30px;
                            .wrapper{
                                padding:0;
                                margin-bottom:50px;
                                .tag{
                                    background-color:#cec3ef;
                                }
                                h1{margin-top:10px;font-weight: bold;}
                                h3{
                                    margin-top:10px;
                                    font-size: 20px;
                                }
                                .card{
                                    a{
                                        cursor: pointer;
                                        opacity: .8;
                                        transition:.2s ease-in-out;
                                        margin-bottom:0;
                                    }
                                    a:hover{
                                        opacity: 1;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    main.judges .dtalks .container .row .right-content .card:hover>.wrapper .card .whitebg{top:-20px;}
    main.awardCate .categoriesDropDown .container .row .right-content button:hover>.movingarrow{left:-25px;bottom:15px;}
    main.awardCate .categoriesDropDown .container:hover>.row .right-content button .movingarrow{bottom:15px;}
    img.fullbg{
        position:fixed;
        top:0;
        right:0;
        z-index: -1;
        height:100%;
    }
    /* Style the button that is used to open and close the collapsible content */
.collapsible {
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    background-color: transparent;
  }

  /* Style the collapsible content. Note: hidden by default */
  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
  }
    //----- END award categories------//
    main.awardCate .intro .container:hover>.row .right-content .movingarrow{left:-120px;}
    .intro .container:hover>.row .right-content .movingarrow
    {left:-200px;}
    .intro .container:hover>.row .left-content .movingobjectL{left:20px;}
    .intro .container:hover>.row .left-content .movingobjectR{top:-20px;}
    .dtalks .container:hover>.row .right-content .movingarrow{bottom:110px;}
    .dtalks .container:hover>.row .right-content .wrapper .card .whitebg{top:-20px;}
    .dtalks .container:hover>.row .left-content .movingarrow{right:-100px;}
    .dtalks .container:hover>.row .right-content .card .wrapper .card .whitebg{top:20px;}
}
//---------------------------------------------------//
//------------------- responsive --------------------//
//---------------------------------------------------//
@media (max-width: 1750px){
    body main div.HeroBG ul li img.KV{
        position: relative;
        left:-150px;
    }
}
@media (max-width: 1470px){
    body main div.HeroBG ul li img.KV{
        left:-200px;
    }
}
@media (max-width: 1350px){
    body{
        main{
            .HeroBG{
                .scene{
                    height:960px;
                    .layer{
                        height:100%;
                        .BG1{
                            display: none;
                        }
                        .KV{display: none;}
                        .KV2{
                            position: relative;
                            display: block;
                            width:100%;
                            bottom:-80px;
                        }

                    }
                }
            }
            #top-hero{
                height:960px;
                .container{
                    .row{
                        .hide{display: none;}
                        .left-content{
                            width:100%;
                            .wrapper{
                                padding-top:600px;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 1200px){
    body main .intro .container .row .left-content .movingobjectL{
        top:-32px;
        left:-69px;
    }
}

@media (max-width: 1024px){
body {
    header{
        nav.navbar-expand-md{
            background-color:rgba(230, 229, 239, 1);
            .navbar-toggler{
                display: block;
                right:10px;
                position:absolute;
                z-index: 10;
             }
            .navbar-brand{z-index: 10;}
            div.collapse{
                position:absolute;
                z-index: 1;
                width:100%;
                top:0;
                left:0;
                margin-top:66px;
                padding-bottom:20px;
                text-align: center;
                flex-direction:column;
                -webkit-box-orient:vertical;
                -webkit-box-direction:normal;
                background-color:rgba(230, 229, 239, 1);
                display: none!important;
                ul.social-bar{
                    display: flex !important;;
                    position:relative;
                    margin-top:20px;
                    justify-content: center;
                    .language.chinese{
                        padding-left:20px;
                        margin-left:0;
                        border-left:1px solid #292929;
                    }
                    .wechat{display: block;}
                }

                ul.navbar-nav{
                    width:100%;
                    flex-direction: column!important;
                    li{
                        margin-right: 0;
                        a.apply{margin:0 30px;}
                    }
                }
                .info{margin-top:15px;display: flex;}
            }
            div.collapse.active{
                display: flex!important;
            }
            ul.social-bar{
                display: none!important;


            }
        }

    }
    .menuCloseLayer.active{
        display:block;
    }
    main{
        #top-hero{
            .container{
                .row{
                    .left-content{
                        .wrapper{
                            padding-top:400px;
                            a.nav-link{
                                display: block!important;
                                color:#292929;
                                border:2px solid #292929;
                                padding-left:30px;
                                padding-right:30px;
                                margin-top:15px;
                                transition:.2s ease-in-out;
                            }
                            a.nav-link:hover{
                                background-color:#fff;
                            }
                        }
                    }
                }
            }
        }


    }

}
body main .dtalks .container .row .right-content .wrapper .card{margin-right:0px;}
}



@media (max-width: 1024px) and (orientation : landscape){

}
@media (max-width: 991px){
    body main .intro .container .row .left-content.hide{display: none;}
    body main .intro .container .row .right-content{width:100%;}
    body main .footer .wrapper .container .row .footerlogo span{margin:10px;}
    .dtalks{
        overflow-x:hidden;
        .container{
            .row{
                .right-content{
                    position: relative;
                    .video_wrapper{
                        padding: 0;
                        margin-bottom: 50px;
                        margin: auto;
                        width: 70%;
                        padding: 10px;
                        .card{
                            position: relative;
                            .iframe{
                                width:100%;
                                border-radius: 5px;
                                box-shadow: 10px 10px 13px -7px rgba(0,0,0,.2), 5px 10px 15px 1px rgba(0,0,0,.03);
                            }
                            .whitebg{
                                position:absolute;
                                top:20px;
                                left:20px;
                                width:100%;
                                height:100%;
                                background-color: #ccc3ef;
                                border-radius:5px;
                                z-index: -1;
                                box-shadow: 25px 25px 13px -7px rgba(0,0,0,.08), 5px 10px 15px 1px rgba(0,0,0,.04);
                                transition:.8s ease-in-out;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 910px){
    body main #top-hero, body main .HeroBG .scene{height:750px;}
}
@media (max-width: 823px) and (orientation : landscape){

}
@media (max-width: 812px) and (orientation : landscape){

}
@media (max-width: 768px){
    body main #top-hero .container .row .left-content .wrapper .event-name h1{
        font-size: 30px;
    }
    body main #top-hero .container .row .left-content .wrapper .slogan{
        padding:5px 40px;
        h3{font-size: 15px;}
        img{width:30px;}
    }
    body main.judges .dtalks .container .row div .card{
        margin-right:12px;
    }
    body main .dtalks .container .row .right-content .wrapper{padding-right:16px;}
}
@media (max-width: 768px) and (orientation : portrait){

}
// iPhone 6 7 8 Plus
@media (max-width: 736px) and (orientation : landscape){
}
@media (max-width: 640px) {
    body main #top-hero, body main .HeroBG .scene{height:650px;}
    body main #top-hero .container .row .left-content .wrapper{padding-top:250px;}
    body main #top-hero .container .row .left-content .wrapper .event-name h1{font-size: 25px;}
    body main #top-hero .container .row .left-content .wrapper .slogan{
        padding:5px 20px;}
    body main .dtalks .container .row .left-content .movingarrow{right:-200px;}
    body .dtalks .container:hover > .row .left-content .movingarrow{right:-190px;}
    body main .dtalks .container .row .right-content .movingarrow{bottom: -150px;}
    body .dtalks .container:hover > .row .right-content .movingarrow{bottom:-130px;}
}
@media (max-width: 576px){
    body main.awardCate .categoriesDropDown .container .row .right-content button{margin-left:80px;}
    body main.judges .dtalks .container .row div .card .wrapper{
        h1{margin-left:20px;}
        h3{margin-left:20px;}
    }
    .dtalks{
        overflow-x:hidden;
        .container{
            .row{
                .right-content{
                    position: relative;
                    .video_wrapper{
                        padding: 0;
                        margin-bottom: 50px;
                        margin: auto;
                        width: 100% !important;
                        padding: 10px;
                        .card{
                            position: relative;
                            .iframe{
                                width:100%;
                                border-radius: 5px;
                                box-shadow: 10px 10px 13px -7px rgba(0,0,0,.2), 5px 10px 15px 1px rgba(0,0,0,.03);
                            }
                            .whitebg{
                                position:absolute;
                                top:20px;
                                left:20px;
                                width:100%;
                                height:100%;
                                background-color: #ccc3ef;
                                border-radius:5px;
                                z-index: -1;
                                box-shadow: 25px 25px 13px -7px rgba(0,0,0,.08), 5px 10px 15px 1px rgba(0,0,0,.04);
                                transition:.8s ease-in-out;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 568px) and (orientation : landscape){
}
@media (max-width: 468px){

}
@media (max-width: 375px) and (orientation : portrait){
}
@media (max-width: 320px){
}
@media (max-width: 320px) and (orientation : portrait){
}