@charset "euc-kr";

.container{overflow:hidden; position:relative; width:100%; height:100%;}
.video_area{height:267px; background:url(/house/2020/gctown/asset/images/index/gate_bg.jpg) no-repeat center; background-size:cover;}
.video_area video {
    position: absolute;
    top: 0;
    left: 50%;
    min-width: 1920px;
    height:267px;
    margin-left: -960px;
}
.contents{position:relative; height:calc( 100vh - 338px ); min-height:500px;}
.box{position:absolute; left:50%; top:50%; width:100%; max-width:1200px; transform:translate(-50%, -50%); font-size:0; box-sizing:border-box;}
.box > div{display:inline-block; width:29.16%; margin-left:6.25%; box-shadow: 13px 15px 30px 0px rgba(0, 0, 0, 0.2);}
.box > div:first-of-type{margin-left:0;}
.box > div h2 img{width:100%;}
.box .title{padding:55px 11.42% 28px; color:#fff;}
.box .title p{position:relative; margin-bottom:10px; font-size:26px; font-weight:400; line-height:34px;}
.box .title span{display:block; height:44px; font-size:15px;}
.box .s1 .title{background:#005151;}
.box .s4 .title{background:#684632;}
.box .s5 .title{background:#783953;}
.box .title .arrow{position:absolute; top:0; right:0;width:25px; height:25px; background:#fff; text-indent:-9999px;}
.box .title .arrow:before, .box .title .arrow:after{content:""; position:absolute; left:8px;width:10px; height:2px; background:#005151;}
.box .title .arrow:before{top:8.5px; transform:rotate(45deg);}
.box .title .arrow:after{position:absolute; top:14.5px; transform:rotate(-45deg);}
.box .s4 .title .arrow:before, .box .s4 .title .arrow:after{background:#684632;}
.box .s5 .title .arrow:before, .box .s5 .title .arrow:after{background:#783953;}

.box h2 i {position:absolute; left:0; top:0; font-size:0; text-indent:-9999px;}
#footer{padding:25px 0; border-top:1px solid #e7e7e7; font-size:14px; color:#333333; text-align:center;}
#footer p{letter-spacing:0; opacity:0.5;}

@media all and (max-width:1366px){
    .box{max-width:none; width:96%;}
    .box > div{width:32%; margin-left:2%;}
}

@media all and (max-width:1024px){
    .box .title{padding:55px 7.69%;}
}

@media all and (max-width:767px){
    .video_area{display:none;}
    .container{background:url(/house/2020/gate/asset/images/index/bg_gate_mo.jpg) repeat-x; background-size:auto 100%;}
    .contents{height:auto; min-height:calc( 100vh - 50px ); margin:0;}
    .box{position:static; left:auto; top:auto; width:100%; padding:45px 25px; transform:none;}
    .box > div{display:block; width:100%; margin:25px auto 0;}
    .box > div:first-of-type{margin-left:auto; margin-top:0;}
    .box > div h2{display:none;}
    .box .title{padding:40px 25px;}
    .box .title p{font-size:20px; line-height:25px;}
    .box .title span{height:auto;}
    #footer{padding:16px 0; border-color:#cccccc; font-size:11px;}
}