@import url('sub.css'); 



/**** S:: VR Àü½Ã°ü ****/
.vr_cont{position: relative; overflow: hidden;}
.vr_cont .vr_bg{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); animation: vr_bg 3s linear forwards;}
.vr_cont .vr_bg::after{content:''; display: block; width: 100%; height: 100%; background:#4C290B; opacity: 0.25; mix-blend-mode: color; position: absolute; left:0; top:0;}
.vr_cont .vr_ci{display: block; max-width: 1086px; width: 80%; position: absolute; left:-226px; bottom:0; z-index: 2;}
.vr_cont .vr_ci img{width: 100%; height: auto;}
.vr_cont .vr_in{position: relative; z-index: 5;} 
.vr_cont .vr_in dl{display: flex;}
.vr_cont .vr_in dl dt{width: 50%; padding: 0 50px 0 0; box-sizing:border-box;}
.vr_cont .vr_in dl dt .fs54{color:var(--white); font-weight: 300; text-wrap: balance;}
.vr_cont .vr_in dl dd{width: 50%;}
.vr_cont .vr_in dl dd .vr_box{box-sizing:border-box; padding: 150px 50px; text-align:center; border:1px solid var(--borderW); display: block;}
.vr_cont .vr_in dl dd .vr_box:hover{background:var(--grayBgW);}
.vr_cont .vr_in dl dd .vr_box img{width: 104px; height: auto; margin: 0 auto 12px;}
.vr_cont .vr_in dl dd .vr_box .fs36{font-weight: 700; color:var(--white);}
.vr_cont .vr_in dl dd .vr_box .more{margin: 40px auto 0; color:var(--black); border-color:transparent; background:var(--white); transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);}


.vr_cont .vr_in dl dd .vr_box:hover .more{color:var(--white); background:transparent; border-color:var(--sub2); transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);}
.vr_cont .vr_in dl dd .vr_box:hover .more::before {background:var(--sub2); transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1); transform:translate3d(0, 0, 0);}


@keyframes vr_bg {
	0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}

/**** E:: VR Àü½Ã°ü ****/





/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){


/**** S:: VR Àü½Ã°ü ****/
.vr_cont .vr_in dl dt .fs54 br{display: none;}
/**** E:: VR Àü½Ã°ü ****/


}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){


/**** S:: VR Àü½Ã°ü ****/
.vr_cont .vr_ci{width: 70%; left:-10%;}
.vr_cont .vr_in dl{}
.vr_cont .vr_in dl dt{padding: 0 30px 0 0;}
.vr_cont .vr_in dl dd .vr_box{padding: 100px 30px;}
/**** E:: VR Àü½Ã°ü ****/



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/**** S:: VR Àü½Ã°ü ****/
.vr_cont .vr_ci{width: 50%; left:-10%;}
.vr_cont .vr_in dl{flex-wrap:wrap;}
.vr_cont .vr_in dl dt{width: 100%; padding: 0 0 30px; text-align:center;}
.vr_cont .vr_in dl dd{width: 100%;}
.vr_cont .vr_in dl dd .vr_box{padding: 50px 30px;}
.vr_cont .vr_in dl dd .vr_box img{width: 80px; height: auto; margin: 0 auto 8px;}
.vr_cont .vr_in dl dd .vr_box .more{margin: 30px auto 0;}
/**** E:: VR Àü½Ã°ü ****/


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){



/**** S:: VR Àü½Ã°ü ****/
.vr_cont .vr_in dl dt{padding: 0 0 30px;}
.vr_cont .vr_in dl dd .vr_box{padding: 30px 20px;}
.vr_cont .vr_in dl dd .vr_box img{width: 60px; height: auto;}
.vr_cont .vr_in dl dd .vr_box .more{margin: 20px auto 0;}
/**** E:: VR Àü½Ã°ü ****/



}