/*********************************************
	Layout CSS - Home
	home.css
*********************************************
*
*	1. GLOBAL LAYOUT
*	2. NAVIGATION
*	3. MOBILE MEDIA QUERY (under 768/1200 )
*	4. TOP ( LANDING ) AREA
*	5. FEATURE AREA
*	6. HEROS & SA AREA
*	7. SNS AREA
*	8. FOOTER AREA
*	9. ALL PAGES
*
*   == MEDIA QUERY ==
*/

/*==================================================
    1. GLOBAL         
==================================================*/

html,
body {
    background: #000;
    height: 100%;
    overflow-x: hidden; /* Prevent scroll on narrow devices */    
}
body {
    min-width: 320px;
    
    font-family: metronic-slab, serif;
    font-weight: 400;
    font-style: normal;
    color: #d1d3d4;
}
a{
    color: white;
    word-break: break-word;
}
a:link, a:visited, a:hover, a:active{
    text-decoration: none;
}
a:hover, a:focus{
    color: #ffc20e;
}
hr{  border-top: 1px solid #939598; }
h1,h1,h3{   font-weight: 600;   }
h1, h2 {
    color: #ffc20e;
    font-size: 25px;
}
h3{
    color:#fff;
    font-size: 15px;    
}

.hide{  display: none;  }
.show{  display: block; }

.text-box {
    padding: 4px 0;
    color: #d1d3d4;
    text-align: center;
    /* color: #d1d3d4; */
    /* border: 1px solid green; */
}
#feature-area .text-box {
    margin-top: 30px;
    margin-bottom: -30px;
}


.anchor {
    height: 20px;
    margin-top: -20px;
}

/* =-=-=-=  GLOBAL : FORM  =-=-=-=-=-=-=-=-= */
.btn-dark{
    margin: .5rem auto;
    padding: 3px 1rem;
    font-size: 15px;
    background-color: #4d4d4f;
    color: white;
}



/* =-=-=-=  GLOBAL : MODAL  =-=-=-=-=-=-=-=-= */
.modal{
    background-color: rgba(0, 0, 0, 0.8);
}
.modal .modal-dialog{
    height: 100vh;
    margin: 0;
    max-width: none;
    /* border: 1px solid red; */
}
.modal-content{
    /* background-color: rgba(0, 0, 0, 0.8); */
    background-color: transparent;
    text-align: center;
}
.modal-body{
    padding: 0;
}
.modal-footer{
    border: 0;
    padding: .5rem;
}
.modal-footer .fa-times-circle{
    margin: auto;
}


/*==================================================
    2. NAVIGATION
==================================================*/
/* .navbar{    border: 2px solid red;  } */

#navTop{
    z-index: 1030;
    height: 40px;
    padding: 0;
    background-color: #1c1c1c;
}
#navTopSub{
    z-index: 1020;
    padding: 0;
    height: 50px;
    background-color: #000;
}
/* .navbar-toggler{
    height: 40px;
} */


/* =-=-=-=  Dropdown  =-=-=-=-=-=-=-=-= */
.dropdown-menu{
    background-color: #1c1c1c;
}
/*---	Hide (Desktop) & Replace (Mobile) Dropdown Caret 	------------*/
/* .caret-off a::before,
.caret-off a::after {  display: none;  } */
.dropdown-toggle::before,
.dropdown-toggle::after {  float: right; margin-top: .7rem; display: none !important; }




/* =-=-=-=  TOP NAV : First Bar Menu (M & L)  =-=-=-=-=-=-=-=-= */
.overlay{
    z-index: 1031;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    width: 100%;
    height: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.8);

    transition: -webkit-height .3s ease-in-out;
    transition: height .3s ease-in-out;
    transition: height .3s ease-in-out, -webkit-height .3s ease-in-out;

}
.overlay.open{    
    opacity: 1;
    height: 100vh;
}

/* =-=-=-=  SIDE MENU : LEFT  =-=-=-=-=-=-=-=-= */
#navTop .navbar-brand img{      height: 26px;  }


/* =-=-=-=  SIDE MENU : Right  =-=-=-=-=-=-=-=-= */
#navTop .nav-item.icon{         margin-left: 20px;      }
#navTop .nav-item.icon .nav-link{
    display: block;
    padding: 4px;
    filter: invert(79%) sepia(0%) saturate(1496%) hue-rotate(217deg) brightness(78%) contrast(89%);
}
/* #navTop .nav-item.icon .nav-link img{         height: 26px;           } */
#navTop .nav-item.icon .nav-link img,
#navTopSub .nav-item.icon .nav-link img{
    height: 26px;
}
#navTopSub .nav-item.icon .nav-link img{
    filter: brightness(0) invert(1);
}

.member-login-box{
    text-align: center;
    padding: 2rem 1rem 1rem 1rem;
}
.member-login-box.dropdown-menu {   /* For full width menu */
    width: 280px;
    padding: 2rem 0 0 0;
}
.member-login-box a{     
    display: block; 
    padding: 1rem 0;    
    font-size: 14px;
}


/* =-=-=-=  Login Form  =-=-=-=-=-=-=-=-= */
.loginForm .btn-login{
    margin: auto;
    width: 130px;
    font-size: 22px;
    border: 1px solid #939598;
}
.loginForm a{
    color: #939598;
}
/* .loginForm button{          
    font-size: 1.5rem;    
} */

.loginMember img{
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
}
.loginMember h5{    color: #ffc20e;   }
.loginMember .link-member{
    float: left;
    text-align: left;
    color: #939598;
}
.loginMember .btn-logout{
    float: right;
    text-align: right;
    color: #ffc20e;
}

/* .dropdown-login.show{
    z-index: 1031;
} */
#navTop .dropdown-login.nav-item.icon.show .nav-link{
    filter: none;
}
.dropdown-login.show .icon-user{
    /* Highlight user icon when dropdown clicked at M & L Size */
    filter: brightness(0) invert(1);
}


/* =-=-=-=  SIDE MENU : Right  =-=-=-=-=-=-=-=-= */
.member-login-box .close-dropdown{ 
    float: left;
    width: 100%;
    background-color: #939598;
}
.member-login-box .close-dropdown a{ 
    height: 22px;
    padding: 0;
}
.member-login-box .close-dropdown img{   
    height: 8px;
}



/* =-=-=-=  TOP NAV : Second Bar Menu (M & L)    =-=-=-=-=-=-=-=-= */
#navTopSub .navbar-brand{   
    /* margin: 0;
    width: 0;     */

    margin-right: 40px;
    padding-top:4px;
    width: 80px;

    -webkit-transition: width .3s; /* Safari */
    transition: -webkit-width .3s ease-in-out;
    transition: width .3s ease-in-out;
    transition: width .3s ease-in-out, -webkit-width .3s ease-in-out;

    /* border: 1px solid red; */
}
#navTopSub .navbar-brand img{   height: 36px;   }

#navTopSub .left-menu .nav-item.first{     margin-left: -.5rem;  }
#navTopSub .left-menu .nav-item{
    margin-right: 30px;
    /* width: 100px; */
    line-height: 30px;
    /* text-align: center; */
    /* border: 1px solid red; */
}
#navTopSub .left-menu .nav-link{
    color: white;
}


#navTopSub .right-menu{
    margin-right: -4px;
}
#navTopSub .right-menu .line{
    border-right: 2px solid white;
    height: 30px;
    margin: 6px 10px;
}

#navTopSub .lang-box{
    z-index: 1010;
    position: absolute;
    /* border: 1px solid red; */
    width: 100%;
    top: 100%;
    left: 0;
    padding: .5rem 0; 
    background: #000;
    text-align: right;
}
#navTopSub .lang-box a{
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 1rem 0 0;
    padding: 4px;
    border-radius: 6px;
    background-color: white;
}
#navTopSub .lang-box a.active{        background: #ffc20e;    }
#navTopSub .lang-box img{    vertical-align: text-top;      }




/* =-=-=-=  Second Menu Affix  =-=-=-=-=-=-=-=-= */
.affix {
    /* position: fixed; */
    position: absolute;
    z-index: 1040 !important;
    top: 0;
    width: 100%;
}
/* #navTopSub.affix2 .navbar-brand {
    border: 1px solid yellow;
} */



/*==================================================
    3. MOBILE MEDIA QUERY (under 768/1200)
==================================================*/

@media (max-width: 1199.98px) {        
    .arw-container{
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    
    .wrapper{
        height: 100%;
        /* overflow: auto; */
        margin-top: -40px;

        /* Momentum Scrolling on iOS Overflow Elements */
        overflow-y: scroll; /* scroll has to be scroll, not auto */
        -webkit-overflow-scrolling: touch;
        /* border: 10px solid red; */
    }

    /* =-=-=-=  TOP MENU (First Menu)  =-=-=-=-=-=-=-=-= */
    #navTop{
        background: transparent url('./../images/layout/topbar-cen.png') top center no-repeat;
    } 
    
    /* =-=-=-=  SIDE MENU : Global  =-=-=-=-=-=-=-=-= */
    .offcanvas-collapse {
        z-index: 1032;
        position: fixed;
        top: 0; /* Height of navbar */
        bottom: 0;
        width: 280px;
        overflow-y: auto;
        opacity: 1;

        background-color: #000;
        font-size: 20px;

        transition: -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        /* -webkit-transform: translateY(-100%);
        transform: translateY(-100%); */

    }
    .offcanvas-collapse.open {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .offcanvas-collapse .nav-item{
        border-bottom: 1px solid #939598;
    }
    .offcanvas-collapse .nav-link{
        padding: 1rem;
    }

    #menuARWGD .topbox,
    #menuAither .topbox{
        position: relative;
        background: transparent url(./../images/layout/sidebar-left.png) no-repeat top left;
    }
    #menuARWGD .topbox .imgwrap,
    #menuAither .topbox .imgwrap{
        height: 20px;
        background: transparent url(./../images/layout/sidebar-right.png) no-repeat top right;
    }

    #menuARWGD .logo,
    #menuAither .logo{
        display: block;
        text-align: center;
        /* opacity: .5; */
    }

    #menuARWGD .logoARW,
    #menuARWGD .logoAither{
        filter: invert(62%) sepia(1%) saturate(144%) hue-rotate(37deg) brightness(90%) contrast(92%);
    }


    .side-content{
        margin-top: -20px;
        height: 100vh;
        padding-bottom: 3rem;
    }
    .side-content .top-logo-area{
        padding: 18px 10px 10px 10px;
        border-bottom: 1px solid #939598;
    }
    .side-content .top-logo-area .logo{
        margin: auto;
        width: 200px;
        /* border: 1px solid red; */
    }

    /* =-=-=-=  SIDE MENU : ARW Game (Left)  =-=-=-=-=-=-=-=-= */
    #menuARWGD{    
        left: 0;
        box-shadow: 6px 3px 10px rgba(0,0,0,.3);
        background: #000 url('./../images/layout/menu-border.png') repeat-y right;
    }
    /* #menuARWGD .side-content{
        border-right: 1px solid #939598;
    } */
    

    /* #menuARWGD .logoARWGD{
        padding: 18px 100px 10px 100px;
        border-bottom: 1px solid #939598;
        opacity: 1;
    } */
    #menuARWGD .logoARW img{
        height: 46px;
    }
    #menuARWGD .logoAither img{
        height: 30px;
    }

    #menuARWGD .lang {      padding: 1rem;      }
    #menuARWGD .lang a{
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 0 .5rem 0 0;
        padding: 4px;
        border-radius: 5px;
        background: white;
    }
    #menuARWGD .lang a.active{        background: #ffc20e;    }
    #menuARWGD .lang img{
        vertical-align: text-top;
    }

    #menuARWGD .download{       border:0; padding: 1rem .5rem 2rem .5rem;     }
    #menuARWGD .download a{     display: inline-block; padding: 2px;     }
    #menuARWGD .download img{   height: 38px;   }


    /* =-=-=-=  SIDE MENU : Aither (Right)  =-=-=-=-=-=-=-=-= */
    #menuAither{      
        right: 0;
        box-shadow: -6px 3px 10px rgba(0,0,0,.3);
        /* border-left: 1px solid #939598; */
        background: #000 url('./../images/layout/menu-border.png') repeat-y left;

        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    #menuAither.open {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
        
    #menuAither .side-content{
        /* border-left: 1px solid #939598; */
        text-align: right;
    }
    /* #menuAither .logoAitherTop{
        display: block;
        padding: 18px 100px 10px 100px;
        border-bottom: 1px solid #939598;
        opacity: 1;
    } */
    #menuAither .logoAitherBtm{
        display: block;
        padding: 3rem 0;
        /* border-bottom: 1px solid #939598; */
    }

    /* #menuAither .login{           padding: 2rem 1rem 1rem 1rem;         } */

    /*==========    5. FEATURE AREA    ==========*/
    #feature-area .text-box p{
        display: block;
        color: #939598;
        font-size: 15px;
    }

    .sa-area{
        max-width: 200px;
    }
}



/*==================================================
    4. TOP ( LANDING ) AREA
==================================================*/
#top{
    margin-top: 20px;
    background: url('./../images/layout/keyvisual-s.jpg') no-repeat center top / cover;
    height: 148vw;
    min-height: 475px;
}
#preregister-detail{
	/*position: fixed; */
    position: absolute; 
	background: url(./../images/layout/preregister-bg-s.png) repeat-x center top  / cover;
	height: 148vw;
	/*height: 152vw;*/	
    min-height: 475px;
    min-width: 320px;
    margin-top: 20px;
    /*width: 100vw;*/

	opacity: 1;
	top: 0px;
    left: 0px;
    right: 0px;
	z-index: 1;
}

#preregister-detail .preregster-click{
    margin-top: 425px;		
}
#preregister-detail .preregster-click img{
	width: 180px;
}
#top .video{
    display: block;
    margin-top: 25vw;
    padding: 7px;
    text-align: center;
    width: 20vw;
    margin-left: auto;
    margin-right: auto;
    /* border: 1px solid red; */
}
/* #top .video:focus,
#top .video:hover{
    opacity: 1;
} */
#top .video img{
    width: 10vw;
    /* min-width: 50px; */
}

#top .logoARWGD{
    text-align: center;
}
#top .logoARWGD img{
    padding-top: 6vw;
    width: 86vw;
    min-width: 140px;
    transform-origin:center bottom;
    -webkit-transition: all .5s ease-out; /* Safari */
    transition: -webkit-all .5s ease-out;
    transition: all .5s ease-out;
    transition: all .5s ease-out, -webkit-all .5s ease-out;
}

/* #top .download-box{     height:70px;     } */
#top .download{         padding: 0px .25rem .4rem .25rem;    }
#top .download img{     width: 20vw;   }
#top .preregster img{     width: 43vw;   }
#top .preregster{         padding: 0px 0px 0.4rem 0px;    }
#top .available img{     width: 18vw;   }
 

/*==================================================
    5. FEATURE AREA
==================================================*/
#feature-area .text-box p{
    display: block;
    /* color: #939598; */
}

#feature-area .image-box.first{
    margin-top: 30px;
}
#feature-area .image-box{
    margin-bottom: 30px;
    /* border: 1px solid red; */
}
#feature-area .image-box.first::after{
    content: " ";
    display: block;
    height: 96vw;
    background: url(./../images/layout/feature-1-s.jpg) no-repeat top center / cover;
}
#feature-area .image-box.second::after{
    content: " ";
    display: block;
    height: 96vw;
    background: url(./../images/layout/feature-2-s.jpg) no-repeat top center / cover;
}
#feature-area .image-box.third::after{
    content: " ";
    display: block;
    height: 96vw;
    background: url(./../images/layout/feature-3-s.jpg) no-repeat top center / cover;
}

/*==================================================
    6. HEROS & SA AREA
==================================================*/
#hero{
    padding-top: 60px;
    padding-bottom: 2rem;
}
#hero .text-box{
    font-size: 12px;
}
.hero-area{
    float: left;
    text-align: center;
}

.sa-area{
    float: right;
}

.hero-text-box {    height: 100px;    }
.hero-text-box p {  
    font-size: 12px;
    color: #d1d3d4;
}

.button-area{
    padding-bottom: 6px;
    background: url(./../images/layout/hero-btn-bg-s.png) repeat-x bottom / contain;
    /* border:1px solid red; */
}
.button-area .hero-btn{
    width: 12%;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: .5;

    /* transform-origin:center bottom;
    transition: -webkit-all .3s ease-in-out;
    transition: all .3s ease-in-out;
    transition: all .3s ease-in-out, -webkit-all .3s ease-in-out; */
}
.button-area .hero-btn.active{
    width: 18%;
    filter:none;
    opacity: 1;
}
/* .button-area .hero-btn img{ width: 100%;    } */

#sa-up, #sa-down{       
    position: absolute;
    right: .5rem;
    width: 26px;
}
#sa-down{   top: 0;     }
#sa-up{     bottom: 0;  }



/*==================================================
    7. SNS AREA
==================================================*/
.sns .sns-head{
    margin: 50px 0 0 0;
    height: 40px;
    font-size: 18px;
    line-height: 1.2;
}
.sns .sns-fb .sns-head img{
    float: left;
    width: 40px;
    margin: 0 .8rem 1rem 0;
}
.sns .sns-fb .sns-fb-plugin iframe{
    width: 100%;
}

.sns .sns-follow{
    margin-bottom: 30px;
    text-align: center;
    /* border: 1px solid red; */
}
.sns .sns-follow .sns-link {    
    display: inline-block; 
    margin: 10px;
    width: 100px;
}


/*==================================================
    8. FOOTER AREA
==================================================*/
#footer{
    font-size: 12px;
}
/* #footer a{      border:1px solid red;       } */
.upper{
    padding: 20px 0;
}
.copyright{
    padding: 1rem;
    text-align: center;
}
.copyright span{
    display: block;
    padding: 1rem;
    line-height: 1.25;
}
.copyright .logo-arw img{        height: 72px;     }
.copyright .logo-aither img{     height: 44px;     }
.copyright .logo-foonie img{        height: 110px;     }
.copyright a{
    display: inline-block;
    padding: .5rem;
    font-size: 12px;
    font-weight: 300;
    color: #939598;
    line-height: 2;
}
.links-block a{
    display: inline-block;
    padding: 10px 1px 10px 0;
}

/*==================================================
	9. ALL PAGES
==================================================*/

.page-policy,
.page-terms{
    color:#939598;
    font-size: 15px;
}
#content.page-policy a,
#content.page-terms a{
    color:#d1d3d4;
}

.page-head{
    padding: 4rem 0 1rem 0;
    text-align: center;
}
#content.page-policy .page-head,
#content.page-terms .page-head{
    text-align: left;
}



/*==================================================
=            Bootstrap 4 Media Queries             =
==================================================*/

/* XS (.col-) 	-----------------------------------*/ 
/*  iPhone 5/SE :   320px  */
/*  iPhone 6/7/8 :  375px  */
@media only screen and (min-width : 375px) {
    .offcanvas-collapse{
        width: 80vw;
        max-width: 380px;
    }
    #preregister-detail .preregster-click{
        margin-top: 115vw;
            
    }
    #preregister-detail .preregster-click img{
        width: 43vw;
    }
    /* #top .video{
        margin-bottom: 5rem;
    } */
}
/*  iPhone 6/7/8 Plus :  425px  */
@media only screen and (min-width : 425px) {
    /* #top .video{
        margin-bottom: 6rem;
    } */

    .modal iframe{  width: 400px;   height: 225px;  }
}
/*  Android Mobile L :  480px  */
@media only screen and (min-width : 480px) {
    #top .video img{
        /* width: 60px; */
        width: 10vw;
    }
    #top .download-box {   height: 100%;    }
	#top .preregster-box{	height: 100%;	margin-bottom:5px;}
	
    /* #top .download img{         height: 120px;     } */
}
/* SM (.col-sm-)	-----------------------------------*/ 
@media only screen and (min-width : 576px) {
    .modal iframe{  width: 560px;   height: 315px;  }
    
    /* #top .video {        margin-bottom: 8rem;    } */
    #top .download-box {        height: 100%;    }
	#top .preregster-box{	height: 100%;	}
	
}
/* MD(.col-md-)	-----------------------------------*/ 
@media only screen and (min-width : 768px) {

    .anchor {
        height: 46px;
        margin-top: -46px;
    }

    .modal-dialog {
        margin: 10rem auto;
        max-width: 740px;
    }
    .modal iframe{  width: 720px;   height: 405px;  }

    h1{     font-size: 60px;    }
    h2{     font-size: 40px;    }
    h3{     font-size: 20px;    }

    .offcanvas-collapse{
        display: none;
    }

    .btn-dark{
        font-size: 24px;
    }
    
    /*==========    4. TOP ( LANDING ) AREA    ==========*/
    #top{
        background: url('./../images/layout/keyvisual-m.jpg') no-repeat center top  / cover;
        height: 92.7vw;
        margin-top: auto;
    }
    #top .logoARWGD img{
        /* margin-bottom: 4rem;
        padding: 0 2rem 0 0; */
        padding-top: 0vw ;
        width: 61vw;
    }
    #top .video{
        margin-top: 18.5vw;
        padding: .5rem;
    }
    #top .video img{    width: 8vw;    }
    #top .download img{     width: 17.5vw;    }
    #top .preregster img{     width: 36vw;    }
	#top .available img{     width: 15vw;   }
	#preregister-detail{
		background: url(./../images/layout/preregister-bg-m.png) no-repeat center top  / cover;
        /*height: 92.7vw;*/
		height: 105vw;
		width: 100%;
        min-width: auto;
        /*margin-top: 90px;*/
	}

	#preregister-detail .preregster-click{
	    margin-top: 88vw;
	}
	#preregister-detail .preregster-click img{
		width: 36vw;
	}

    /*==========    5. FEATURE AREA    ==========*/
    #feature-area .text-box {
        /* position: absolute;
        bottom: 0;
        padding: 0; */
        font-size: 20px;
        width: 100%;
        margin-bottom: -10px;
    }
    #feature-area .text-box p{    padding: 0;    }

    #feature-area .image-box.first{
        margin-top: 100px;
    }
    #feature-area .image-box{
        margin-top: 50px;
    }
    #feature-area .image-box.first::after{
        height: 54vw;
        background: url(./../images/layout/feature-1-l.jpg) no-repeat top center / contain;
    }
    #feature-area .image-box.second::after{
        height: 54vw;
        background: url(./../images/layout/feature-2-l.jpg) no-repeat top center / contain;
    }
    #feature-area .image-box.third::after{
        height: 54vw;
        background: url(./../images/layout/feature-3-l.jpg) no-repeat top center / contain;
    }


    /*==========    6. HEROS & SA AREA    ==========*/    
    #hero .text-box,
    .hero-text-box p {
        padding: 0;
        font-size: 20px;
    }
    .hero-text-box {    height: 150px;    }
    .button-area{
        width: 100%;
        padding-bottom: 12px;
        background: url(./../images/layout/hero-btn-bg-m.png) no-repeat bottom center / contain;
    }
    #sa-up, #sa-down {
        right: 1rem;
    }

    /*==========    7. SNS AREA    ==========*/
    .sns .sns-head {         
        font-size: 24px;    
        line-height: 100%;
        height:  50px;
    }
    .sns .sns-fb .sns-head img {     width: 50px;    }
    .sns .sns-follow .sns-head {    margin-bottom: 6px;     }
    .sns .sns-follow .sns-link {
        margin: 6px;
        width: 96px;
    }

    /*==========    8. FOOTER AREA    ==========*/
    #footer{        font-size: 18px;    }
    .upper{
        padding: 80px 0 40px 0;
    }   
    .copyright a{      line-height: 1;     }
    .copyright .logo-arw p{      padding: 1rem;     }
    .copyright .logo-aither p{      padding: 1rem 2rem;     }
    .copyright .logo-aither img{    margin: 14px 0;     }
    .copyright .logo-foonie p{      padding: 1rem 2rem;     }
    .copyright .logo-foonie img{    margin: -30px 0;     }


    /*==========    9. ALL PAGES    ==========*/
    .page-policy,
    .page-terms{
        color:#939598;
        font-size: 20px;
    }
}

/* LG(.col-lg-) -----------------------------------*/ 
@media only screen and (min-width : 992px) {
    
    /*==========    4. TOP ( LANDING ) AREA    ==========*/
    /* #top .logoARWGD img{
        margin-bottom: 12rem;
        padding: 0 2rem 0 0; 
    } */
    /* #top .download img {
        width: 26vw;
    } */

    /*==========    7. SNS AREA    ==========*/
    .sns{               margin-bottom: 60px;    }
    .sns .sns-head {    font-size: 30px;      }
    .sns .sns-fb .sns-head img {    width: 60px;    }
    .sns .sns-follow .sns-head {    margin-bottom: 16px;     }
    .sns .sns-follow .sns-link {
        margin: 10px;
        width: 120px;
    }

    /*==========    8. FOOTER AREA    ==========*/
    .copyright .logo-arw p{     padding: 1rem 3rem;     }
    .copyright .logo-aither p{  padding: 1rem 6rem;     }
    .copyright .logo-foonie p{  padding: 1rem 2rem;     }

}
/* XL(.col-xl-) -----------------------------------*/ 
@media only screen and (min-width : 1200px) {

    .modal-dialog {
        margin: 7rem auto;
    }
    .modal-footer {
        padding: 1rem;
    }
    /* =-=-=-=  SECTION : Landing Area  =-=-=-=-=-=-=-=-= */
    #top{
        background: url('./../images/layout/keyvisual-l.jpg') no-repeat bottom center / cover;
        height: 52vw;
        max-height: 900px;
        /* min-height: 480px;
        max-height: 580px; */
    }
	#preregister-detail{
		background: url(./../images/layout/preregister-bg-l.png) no-repeat top center / cover;
        /*height: 47vw;*/
		width: 100%;
        /*max-height: 990px; */
        max-height: 1200px; 

	}

	#preregister-detail .preregster-click{
	    margin-top: 72vw;
        margin-top: 1050px;
	}		
	#preregister-detail .preregster-click img{
		width: 21vw;
	}

    #top .logoARWGD {   padding-right: 6rem;    }
    #top .logoARWGD img{
        /* margin-bottom: 0;
        padding: 0 10rem 0 1rem;  */
        padding-top: 0vw ;
        width: 61vw;
        max-width: 370px;
    }

    #top .video{
        margin-top: 17vw;
        padding: 0;
        padding-bottom: 1vw;
    }
    #top .video img{
        width: 5vw;
        max-width: 90px;
    }
    #top .download img {
        width: 10.4vw;
    }
	#top .preregster img {
        width: 21vw;
    }
	#top .download-box{
		height: 80%;
		padding: 0px 0px 5px 0px; 
	}

    .modal iframe{  width: 960px;   height: 540px;  }

    /*==========    5. FEATURE AREA    ==========*/    
    #feature-area .image-box.first::after,
    #feature-area .image-box.second::after,
    #feature-area .image-box.third::after{
        height: 612px;
    }
    #feature-area .text-box {
        padding: 2rem 0;
    }
    /*==========    8. FOOTER AREA    ==========*/
    .copyright .logo-arw p{      padding: 1rem 4rem;     }
    .copyright .logo-aither p{   padding: 1rem 7rem;     }

    #sa-top{
        padding: 1rem 0;
        /* border: 1px solid red; */
    }
    #sa-btm{
        padding: 1rem 0;
        /* border: 1px solid red; */
    }
}

/*  For Animation Margin -----------------------------------*/ 
@media only screen and (min-width : 1400px) {
     #top .logoARWGD img {
        padding-top: 0px;
        width: 60vw;
        max-width: 600px;
    } 
    #top .video{
        margin-top: 8vw;
    }
	#top .video img{
        width: 5vw;
        max-width: 80px;
    }
    /* #top{
        min-height: 550px;
        max-height: 700px;
    } */
		

	#top .download img {
		max-width: 172px;
    }
	#top .available img {
		max-width: 172px;
    }
	#top .video-box{margin-bottom:9px;}
	#top .preregster-box{margin-bottom:11px;}
	#top .download-box{margin-bottom:6px;}

	#top .preregster img{
	    max-width: 365px;
    }
    #top .download {
		padding: 0px .5rem 0rem .5rem ;
    }
    #preregister-detail .preregster-click{
        margin-top: 62vw;
        margin-top: 1050px;
    }       
}
/*  Over HD(1920) -----------------------------------*/ 
@media only screen and (min-width : 1900px) {
    #top .logoARWGD img {
        /* margin-bottom: 3rem;
        padding: 0 3rem 0 1rem;  */
        padding-top: 5px;
		width: 60vw;	
	    max-width: 620px;
    }
    #top .video{
        margin-top: 10vw;
    }
	#top .download-box{
		width: 100%;
	}
	#top .download{
		padding: 3px .5rem 0rem .5rem ;
		margin:0px;
	}
    #top .download img {
		max-width: 175px;
    }
	#top .available img {
		max-width: 175px;
    }
	#top .preregster-box{
		width: 100%;
        max-height: 990px;
	}
    #preregister-detail{
        width: 100%;
        /*max-height: 990px;*/
        max-height: 1600px; 
    }
    #preregister-detail .preregster-click{
        margin-top: 46vw;
        margin-top: 1400px;
    }       

	#preregister-detail .preregster-click img{
	    max-width: 370px;
    }

	#top .preregster{
        padding-top:10px;
		padding-bottom:10px;
    }

	#top .preregster img{
	    max-width: 370px;
    }
    .modal-dialog {
        margin: 12rem auto;
    }
}
 @media only screen and (min-width : 2560px) {
	#preregister-detail{
		width: 100%;
        /*max-height: 990px;*/
        max-height: 1800px;	
	}
    #top .video{
        margin-top: 5vw;
    }
	#preregister-detail{
		background: url(./../images/layout/preregister-bg-l.png) no-repeat top center / cover;
	}

    #preregister-detail .preregster-click{
        margin-top: 40vw;
        margin-top: 1600px;
    }       

 }
 @media only screen and (min-width : 4000px) {
    #preregister-detail{
        width: 100%;
        max-height: 1800px; 
    }
    #preregister-detail .preregster-click{
        margin-top: 1900px;
    }       
    #preregister-detail .preregster-click img{
        max-width: 480px;
    }
 }