@charset "UTF-8";



.wrapper {height: 100%; overflow: hidden;}
.wrapper > article {position: relative; float: left; width: 33.33%; height: 100%; overflow: hidden;}
.no_over {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000;}


.wrapper.one > article.mid,.wrapper.one > article.right {width: 29.2%;}
.wrapper.two > article.left,.wrapper.two > article.right {width: 29.2%;}
.wrapper.three > article.left,.wrapper.three > article.mid {width: 29.2%;}
.wrapper > article.on {width: 41.6%;}
.wrapper > article {-webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}


.wrapper > article > a {position: relative; display: block; width: 100%; height: 100%;}
.wrapper > article a:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s;-o-transition: all 0.2s; transition: all 0.2s;  background-repeat: no-repeat; background-image: url('/template/intro/user/images/main/bg_intro_layer.png'); background-position: center bottom -400px; z-index: 3;}
.wrapper > article:hover a:after {background-color:  rgba(0, 0, 0, 0); background-position: center bottom 0;}



.wrapper > article .bg_box_layer {position: absolute; left: 50%;  width: 100%; height: 100%; overflow: hidden; -webkit-background-size: 100% 100%; background-size: 100% 100%; z-index: 2;}
.wrapper > article .bg_box_layer {-webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);transform: translate(-50%, 0); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;}
.wrapper > article .bg_box_layer .bg_box {position: relative; float: left; width: 25%; height: 12.5%; overflow: hidden;}

.wrapper > article .bg_box_layer .bg_box {-webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s;-o-transition: all 0.4s; transition: all 0.4s;}
/*.wrapper > article .bg_box_layer .bg_box:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.30);}*/


.wrapper > article .bg_box_layer .bg_box.shadow1:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.05);}
.wrapper > article .bg_box_layer .bg_box.shadow2:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.10);}
.wrapper > article .bg_box_layer .bg_box.shadow3:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.20);}
.wrapper > article .bg_box_layer .bg_box.shadow4:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.40);}

.wrapper > article .bg_box_layer .bg_box.shadow1_2:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(253, 253, 253, 0.05);}
.wrapper > article .bg_box_layer .bg_box.shadow2_2:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(253, 253, 253, 0.10);}
.wrapper > article .bg_box_layer .bg_box.shadow3_2:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(253, 253, 253, 0.20);}
.wrapper > article .bg_box_layer .bg_box.shadow4_2:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(253, 253, 253, 0.30);}

/* left */
.wrapper > article.left {}
.wrapper > article.left a {background-image: url('/template/intro/user/images/main/img_intro_festival.png'); background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; background-position: 40% top;}
.wrapper > article.left .bg_box_layer .bg_box { background-image: url('/template/intro/user/images/main/img_intro_festival.png'); background-repeat: no-repeat;}
/* mid */
.wrapper > article.mid a {background-image: url('/template/intro/user/images/main/img_intro_foundation.png'); background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%;  background-position: 40% top;}
.wrapper > article.mid .bg_box_layer .bg_box {background-image: url('/template/intro/user/images/main/img_intro_foundation.png'); background-repeat: no-repeat;}
/* right */
.wrapper > article.right a{background-image: url('/template/intro/user/images/main/img_intro_shop.png'); background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%;  background-position: 40% top;}
.wrapper > article.right .bg_box_layer .bg_box {background-image: url('/template/intro/user/images/main/img_intro_shop.png'); background-repeat: no-repeat;}


/*.wrapper > article a:hover .bg_box_layer .bg_box {opacity: 0;}*/

/*left*/
.wrapper > article.left .bg_box_layer .bg_box.row1.col1 {/*background-position: 10% 0;*/ background-position: 10% 14.28%;}
.wrapper > article.left .bg_box_layer .bg_box.row1.col2 {background-position: 35% 0;}
.wrapper > article.left .bg_box_layer .bg_box.row1.col3 {background-position: 60% 0;}
.wrapper > article.left .bg_box_layer .bg_box.row1.col4 {background-position: 85% 0;}

.wrapper > article.left .bg_box_layer .bg_box.row2.col1 {/*background-position: 10% 14.28%;*/ background-position: 10% 28.56%;}
.wrapper > article.left .bg_box_layer .bg_box.row2.col2 {background-position: 35% 14.28%;}
.wrapper > article.left .bg_box_layer .bg_box.row2.col3 {/*background-position: 60% 14.28%;*/ background-position: 85% 14.28%;}
.wrapper > article.left .bg_box_layer .bg_box.row2.col4 {/*background-position: 85% 14.28%;*/ background-position: 60% 14.28%;}
.wrapper > article.left .bg_box_layer .bg_box.row3.col1 {/*background-position: 10% 28.56%;*/ background-position: 10% 0;}

.wrapper > article.left .bg_box_layer .bg_box.row3.col2 {background-position: 35% 28.56%;}
.wrapper > article.left .bg_box_layer .bg_box.row3.col3 {background-position: 60% 28.56%;}
.wrapper > article.left .bg_box_layer .bg_box.row3.col4 {background-position: 85% 28.56%;}

.wrapper > article.left .bg_box_layer .bg_box.row4.col1 {background-position: 10% 42.84%;}
.wrapper > article.left .bg_box_layer .bg_box.row4.col2 {background-position: 35% 42.84%;}
.wrapper > article.left .bg_box_layer .bg_box.row4.col3 {background-position: 60% 42.84%;}
.wrapper > article.left .bg_box_layer .bg_box.row4.col4 {background-position: 85% 42.84%;}

.wrapper > article.left .bg_box_layer .bg_box.row5.col1 {background-position: 10% 57.12%;}
.wrapper > article.left .bg_box_layer .bg_box.row5.col2 {background-position: 35% 57.12%;}
.wrapper > article.left .bg_box_layer .bg_box.row5.col3 {background-position: 60% 57.12%;}
.wrapper > article.left .bg_box_layer .bg_box.row5.col4 {background-position: 85% 57.12%;}

.wrapper > article.left .bg_box_layer .bg_box.row6.col1 {background-position: 10% 71.4%;}
.wrapper > article.left .bg_box_layer .bg_box.row6.col2 {/*background-position: 35% 71.4%;*/ background-position: 10% 85.68%;}
.wrapper > article.left .bg_box_layer .bg_box.row6.col3 {background-position: 60% 71.4%;}
.wrapper > article.left .bg_box_layer .bg_box.row6.col4 {background-position: 85% 71.4%;}

.wrapper > article.left .bg_box_layer .bg_box.row7.col1 {/*background-position: 10% 85.68%;*/ background-position: 35% 71.4%;}
.wrapper > article.left .bg_box_layer .bg_box.row7.col2 {/*background-position: 35% 85.68%;*/ background-position: 85% 85.68%;}
.wrapper > article.left .bg_box_layer .bg_box.row7.col3 {background-position: 60% 85.68%;}
.wrapper > article.left .bg_box_layer .bg_box.row7.col4 {/*background-position: 85% 85.68%;*/ background-position: 35% 85.68%;}

.wrapper > article.left .bg_box_layer .bg_box.row8.col1 {background-position: 10% 99.96%;}
.wrapper > article.left .bg_box_layer .bg_box.row8.col2 {background-position: 35% 99.96%;}
.wrapper > article.left .bg_box_layer .bg_box.row8.col3 {background-position: 60% 99.96%;}
.wrapper > article.left .bg_box_layer .bg_box.row8.col4 {background-position: 85% 99.96%;}


/*mid*/
.wrapper > article.mid .bg_box_layer .bg_box.row1.col1 {background-position: 10% 0;}
.wrapper > article.mid .bg_box_layer .bg_box.row1.col2 {background-position: 35% 0;}
.wrapper > article.mid .bg_box_layer .bg_box.row1.col3 {/* background-position: 60% 0;*/ background-position: 60% 28.56%;}
.wrapper > article.mid .bg_box_layer .bg_box.row1.col4 {background-position: 85% 0;}

.wrapper > article.mid .bg_box_layer .bg_box.row2.col1 {/*background-position: 10% 14.28%;*/ background-position: 35% 14.28%;}
.wrapper > article.mid .bg_box_layer .bg_box.row2.col2 {/*background-position: 35% 14.28%;*/ background-position: 10% 14.28%;}
.wrapper > article.mid .bg_box_layer .bg_box.row2.col3 {background-position: 60% 14.28%;}
.wrapper > article.mid .bg_box_layer .bg_box.row2.col4 {background-position: 85% 14.28%;}

.wrapper > article.mid .bg_box_layer .bg_box.row3.col1 {background-position: 10% 28.56%;}
.wrapper > article.mid .bg_box_layer .bg_box.row3.col2 {background-position: 35% 28.56%;}
.wrapper > article.mid .bg_box_layer .bg_box.row3.col3 {/* background-position: 60% 28.56%;*/ background-position: 60% 0;}
.wrapper > article.mid .bg_box_layer .bg_box.row3.col4 {background-position: 85% 28.56%;}

.wrapper > article.mid .bg_box_layer .bg_box.row4.col1 {background-position: 10% 42.84%;}
.wrapper > article.mid .bg_box_layer .bg_box.row4.col2 {background-position: 35% 42.84%;}
.wrapper > article.mid .bg_box_layer .bg_box.row4.col3 {/*background-position: 60% 42.84%;*/ background-position: 85% 42.84%;}
.wrapper > article.mid .bg_box_layer .bg_box.row4.col4 {/*background-position: 85% 42.84%;*/ background-position: 60% 42.84%;}

.wrapper > article.mid .bg_box_layer .bg_box.row5.col1 {background-position: 10% 57.12%;}
.wrapper > article.mid .bg_box_layer .bg_box.row5.col2 {background-position: 35% 57.12%;}
.wrapper > article.mid .bg_box_layer .bg_box.row5.col3 {background-position: 60% 57.12%;}
.wrapper > article.mid .bg_box_layer .bg_box.row5.col4 {background-position: 85% 57.12%;}

.wrapper > article.mid .bg_box_layer .bg_box.row6.col1 {/* background-position: 10% 71.4%;*/ background-position: 35% 71.4%;}
.wrapper > article.mid .bg_box_layer .bg_box.row6.col2 {/* background-position: 35% 71.4%;*/ background-position: 10% 71.4%;}
.wrapper > article.mid .bg_box_layer .bg_box.row6.col3 {background-position: 60% 71.4%;}
.wrapper > article.mid .bg_box_layer .bg_box.row6.col4 {background-position: 85% 71.4%;}

.wrapper > article.mid .bg_box_layer .bg_box.row7.col1 {/* background-position: 10% 85.68%;*/ background-position: 35% 85.68%;}
.wrapper > article.mid .bg_box_layer .bg_box.row7.col2 {/* background-position: 35% 85.68%;*/ background-position: 35% 99.96%;}
.wrapper > article.mid .bg_box_layer .bg_box.row7.col3 {/* background-position: 60% 85.68%;*/ background-position: 10% 99.96%}
.wrapper > article.mid .bg_box_layer .bg_box.row7.col4 {background-position: 85% 85.68%;}

.wrapper > article.mid .bg_box_layer .bg_box.row8.col1 {/* background-position: 10% 99.96%;*/ background-position: 60% 85.68%;}
.wrapper > article.mid .bg_box_layer .bg_box.row8.col2 {/* background-position: 35% 99.96%;*/ background-position: 10% 85.68%;}
.wrapper > article.mid .bg_box_layer .bg_box.row8.col3 {background-position: 60% 99.96%;}
.wrapper > article.mid .bg_box_layer .bg_box.row8.col4 {background-position: 85% 99.96%;}

/*right*/
.wrapper > article.right .bg_box_layer .bg_box.row1.col1 {/*background-position: 10% 0; */background-position: 35% 28.56%;}
.wrapper > article.right .bg_box_layer .bg_box.row1.col2 {background-position: 35% 0;}
.wrapper > article.right .bg_box_layer .bg_box.row1.col3 {background-position: 60% 0;}
.wrapper > article.right .bg_box_layer .bg_box.row1.col4 {background-position: 85% 0;}

.wrapper > article.right .bg_box_layer .bg_box.row2.col1 {background-position: 10% 14.28%;}
.wrapper > article.right .bg_box_layer .bg_box.row2.col2 {background-position: 35% 14.28%;}
.wrapper > article.right .bg_box_layer .bg_box.row2.col3 {/*{background-position: 60% 14.28%;*/ background-position: 10% 0;}
.wrapper > article.right .bg_box_layer .bg_box.row2.col4 {background-position: 85% 14.28%;}

.wrapper > article.right .bg_box_layer .bg_box.row3.col1 {background-position: 10% 28.56%; }
.wrapper > article.right .bg_box_layer .bg_box.row3.col2 {/*background-position: 35% 28.56%;*/ background-position: 60% 14.28%;}
.wrapper > article.right .bg_box_layer .bg_box.row3.col3 {background-position: 60% 28.56%;}
.wrapper > article.right .bg_box_layer .bg_box.row3.col4 {background-position: 85% 28.56%;}

.wrapper > article.right .bg_box_layer .bg_box.row4.col1 {background-position: 10% 42.84%;}
.wrapper > article.right .bg_box_layer .bg_box.row4.col2 {background-position: 35% 42.84%;}
.wrapper > article.right .bg_box_layer .bg_box.row4.col3 {background-position: 60% 42.84%;}
.wrapper > article.right .bg_box_layer .bg_box.row4.col4 {background-position: 85% 42.84%;}

.wrapper > article.right .bg_box_layer .bg_box.row5.col1 {background-position: 10% 57.12%;}
.wrapper > article.right .bg_box_layer .bg_box.row5.col2 {background-position: 35% 57.12%;}
.wrapper > article.right .bg_box_layer .bg_box.row5.col3 {background-position: 60% 57.12%;}
.wrapper > article.right .bg_box_layer .bg_box.row5.col4 {background-position: 85% 57.12%;}

.wrapper > article.right .bg_box_layer .bg_box.row6.col1 {background-position: 10% 71.4%;}
.wrapper > article.right .bg_box_layer .bg_box.row6.col2 {/*background-position: 35% 71.4%;*/ background-position: 35% 85.68%;}
.wrapper > article.right .bg_box_layer .bg_box.row6.col3 {background-position: 60% 71.4%;}
.wrapper > article.right .bg_box_layer .bg_box.row6.col4 {background-position: 85% 71.4%;}

.wrapper > article.right .bg_box_layer .bg_box.row7.col1 {background-position: 10% 85.68%;}
.wrapper > article.right .bg_box_layer .bg_box.row7.col2 {/*background-position: 35% 85.68%;*/ background-position: 85% 85.68%;}
.wrapper > article.right .bg_box_layer .bg_box.row7.col3 {background-position: 60% 85.68%;}
.wrapper > article.right .bg_box_layer .bg_box.row7.col4 {/*background-position: 85% 85.68%;*/ background-position: 35% 71.4%;}

.wrapper > article.right .bg_box_layer .bg_box.row8.col1 {background-position: 10% 99.96%;}
.wrapper > article.right .bg_box_layer .bg_box.row8.col2 {/*background-position: 35% 99.96%;*/ background-position: 10% 99.96%;}
.wrapper > article.right .bg_box_layer .bg_box.row8.col3 {background-position: 60% 99.96%;}
.wrapper > article.right .bg_box_layer .bg_box.row8.col4 {background-position: 85% 99.96%;}


/*오버했을때 원래모습*/
.wrapper > article:hover .bg_box_layer .bg_box:after {opacity: 0 !important;}
.wrapper > article:hover .bg_box_layer .bg_box.row1.col1 {background-position: 0% 0;}
.wrapper > article:hover .bg_box_layer .bg_box.row1.col2 {background-position: 33.33% 0;}
.wrapper > article:hover .bg_box_layer .bg_box.row1.col3 {background-position: 66.66% 0;}
.wrapper > article:hover .bg_box_layer .bg_box.row1.col4 {background-position: 99.99% 0;}

.wrapper > article:hover .bg_box_layer .bg_box.row2.col1 {background-position: 0% 14.28%;}
.wrapper > article:hover .bg_box_layer .bg_box.row2.col2 {background-position: 33.33% 14.28%;}
.wrapper > article:hover .bg_box_layer .bg_box.row2.col3 {background-position: 66.66% 14.28%;}
.wrapper > article:hover .bg_box_layer .bg_box.row2.col4 {background-position: 99.99% 14.28%;}

.wrapper > article:hover .bg_box_layer .bg_box.row3.col1 {background-position: 0% 28.56%;}
.wrapper > article:hover .bg_box_layer .bg_box.row3.col2 {background-position: 33.33% 28.56%;}
.wrapper > article:hover .bg_box_layer .bg_box.row3.col3 {background-position: 66.66% 28.56%;}
.wrapper > article:hover .bg_box_layer .bg_box.row3.col4 {background-position: 99.99% 28.56%;}

.wrapper > article:hover .bg_box_layer .bg_box.row4.col1 {background-position: 0% 42.84%;}
.wrapper > article:hover .bg_box_layer .bg_box.row4.col2 {background-position: 33.33% 42.84%;}
.wrapper > article:hover .bg_box_layer .bg_box.row4.col3 {background-position: 66.66% 42.84%;}
.wrapper > article:hover .bg_box_layer .bg_box.row4.col4 {background-position: 99.99% 42.84%;}

.wrapper > article:hover .bg_box_layer .bg_box.row5.col1 {background-position: 0% 57.12%;}
.wrapper > article:hover .bg_box_layer .bg_box.row5.col2 {background-position: 33.33% 57.12%;}
.wrapper > article:hover .bg_box_layer .bg_box.row5.col3 {background-position: 66.66% 57.12%;}
.wrapper > article:hover .bg_box_layer .bg_box.row5.col4 {background-position: 99.99% 57.12%;}

.wrapper > article:hover .bg_box_layer .bg_box.row6.col1 {background-position: 0% 71.4%;}
.wrapper > article:hover .bg_box_layer .bg_box.row6.col2 {background-position: 33.33% 71.4%;}
.wrapper > article:hover .bg_box_layer .bg_box.row6.col3 {background-position: 66.66% 71.4%;}
.wrapper > article:hover .bg_box_layer .bg_box.row6.col4 {background-position: 99.99% 71.4%;}

.wrapper > article:hover .bg_box_layer .bg_box.row7.col1 {background-position: 0% 85.68%;}
.wrapper > article:hover .bg_box_layer .bg_box.row7.col2 {background-position: 33.33% 85.68%;}
.wrapper > article:hover .bg_box_layer .bg_box.row7.col3 {background-position: 66.66% 85.68%;}
.wrapper > article:hover .bg_box_layer .bg_box.row7.col4 {background-position: 99.99% 85.68%;}

.wrapper > article:hover .bg_box_layer .bg_box.row8.col1 {background-position: 0% 99.96%;}
.wrapper > article:hover .bg_box_layer .bg_box.row8.col2 {background-position: 33.33% 99.96%;}
.wrapper > article:hover .bg_box_layer .bg_box.row8.col3 {background-position: 66.66% 99.96%;}
.wrapper > article:hover .bg_box_layer .bg_box.row8.col4 {background-position: 99.99% 99.96%;}




/*btn_layer*/
.btn_layer {position: absolute; left: 0; top: 50%; width: 100%; z-index: 4; text-align: center; color: #fff;-webkit-transform: translate(0 , -50%);
-moz-transform: translate(0 , -50%); -ms-transform: translate(0 , -50%); -o-transform: translate(0 , -50%); transform: translate(0 , -50%);
-webkit-transition: all 0.4s; -moz-transition: all 0.4s;-ms-transition: all 0.4s;-o-transition: all 0.4s;transition: all 0.4s;}
.wrapper > article > a:hover .btn_layer {opacity: 0;}
.btn_layer .tit_box{margin-bottom: 50px;}
.btn_layer .tit_box .tit1 {margin-bottom: 10px; font-size: 2.278em;  font-family: 's-core-dream';}
.btn_layer .tit_box .tit2 { font-weight: 300;}

.btn_layer .link_box {font-weight: 300;}
.btn_layer .link_box p {display: inline-block; padding: 0 30px 15px 20px; background-image: url('/template/intro/user/images/main/arr_link_box.png'); background-position: right bottom;	background-repeat: no-repeat;}



.over_layer {position: absolute; left: 0; bottom: 17%; width: 100%; opacity: 0; z-index: 4; text-align: center; color: #fff; -webkit-transition: all 0.4s; -moz-transition: all 0.4s;-ms-transition: all 0.4s;-o-transition: all 0.4s;transition: all 0.4s;}
.wrapper > article > a:hover .over_layer {opacity: 1;}
.over_layer .tit_box{margin-bottom: 50px;}
.over_layer .tit_box .tit1 {margin-bottom: 10px; font-size: 3.333em; font-weight: 700; font-family: 's-core-dream'; text-shadow: 5px 6px 9px rgba(0, 0, 0, 0.28);}
.over_layer .tit_box .tit2 { font-weight: 400; font-size: 1.222em;}

.over_layer .link_box {display: block; margin: 0 auto; width: 240px; height: 60px; line-height: 60px; background-color: #f39700;font-weight: 300; -webkit-box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.22);;
-moz-box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.22);;
box-shadow:0px 7px 18px 0px rgba(0, 0, 0, 0.22); ;}
.wrapper > article.left .over_layer .link_box {background-color: #f39700;}
.wrapper > article.mid .over_layer .link_box {background-color: #036eb8;}
.wrapper > article.right .over_layer .link_box {background-color: #d70051;}
.over_layer .link_box p {display: inline-block; padding-right: 50px; font-size: 1em; background-image: url('/template/intro/user/images/main/arr_over_link_box.png'); background-position: right center;	background-repeat: no-repeat;}