.intro{height:100vh;}
.int_tit{}
.int_tit p{color:#fff; font-family: 'GyeonggiBatang',sans-serif;}
.int_tit h3{color:#fff;  }
.int_tit h3 a{color:#fff; line-height:1.2em}
.int_tit h3 span{display:block; color:#fff; line-height:1.1em}
.intro>div{position:relative; display:table; -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;overflow:hidden; z-index:1;}
.intro>div>div{position:relative; display:table-cell;vertical-align:top;position: relative;z-index: 1;}
.intro ul{display:table;}
.intro li a{position:relative;display:inline-block;color:#fff;font-weight:300;z-index: 1;}
.intro li a::after{position:absolute;top:0;height:100%;width:1px;background-color:#fff;content:'';z-index: -1;  transform-origin:0 50%; opacity:0.8} 
.intro .int_more{position:absolute;display:block;color:#fff;font-weight:bold;} 
.intro1 .int_more{background-position:100% 50%;} 
.intro2 .int_more{background-position:0 50%;} 

.intro .int_more span{display:inline-block; vertical-align:middle}
.intro .int_more font{display:block;}



.intro>div .bg{position:absolute; top:0; display:block;  height:100%; -webkit-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-ms-transition: all 1.5s ease;-o-transition: all 1.5s ease;}

.int_menu{display:inline-block;}
.intro li a:hover{color:#3152c3; font-weight:bold;}
.intro li a:hover::after{width:100%;-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;}



.intro .active> a{opacity:1}


.intro>div.active .bg{transform: matrix(1.1, 0, 0, 1.1, 0, 0);}

.intro>div.other .bg{transform: matrix(1, 0, 0, 1, 0, 0);}


.intro1 li a::after{left:0;} 
.intro2 li a::after{ right:0;} 
 
.intro1 {padding-left:3%;}
.intro1 .bg {left:0;width:100%;transform-origin:0 50%;background: url(/images/intro/bg1.png) no-repeat 74% 50%;}

 
.intro2 {padding-right:3%;}
.intro2 .bg {width:120%;left:-8%;transform-origin:100% 50%;background: url(/images/intro/bg2.png) no-repeat 28% 50% #e7e5dd;}






.intro1 .bg{background:url(/images/intro/sale_pc.png) no-repeat 80% 50%;}
.intro1.other .bg{background: url(/images/intro/sale_pc.png) no-repeat 82% 50%;background-size: cover;}

.intro2 .bg{background: url(/images/intro/franchise_pc.png) no-repeat 50% 50%;}
.intro2.other .bg{background: url(/images/intro/franchise_pc.png) no-repeat 18% 50%;}

.other .int_menu{display:none}








@media (min-width:1300px) {
 .intro>div{float:left; width:50%; height:100vh; }
.intro>div>div{padding-top:185px;}


.active .int_tit p{min-width:400px;}
.active .intro li a{min-width:100px;}

.intro .int_more{width:110px; height:100px;  line-height:100px; font-size:14px; } 
.intro .int_more span{width:35px;margin: 0 10px;}
.intro .int_more font{height:16px; background:url(/images/intro/more.png) no-repeat 50%;}
.intro1 .int_more{padding-right:10px;bottom:200px; left:0;background:url(/images/intro/more_bg.png) no-repeat 50%;} 
.intro2 .int_more{padding-left:10px; text-align:right; bottom:200px; right:0;background:url(/images/intro/more_bg2.png) no-repeat 50%;} 
.intro2 .int_more font{transform:rotate(-180deg)} 

.intro1 .int_more:hover{background:url(/images/intro/more_bg_on.png) no-repeat 50%; color:#ffd245} 
.intro2 .int_more:hover{background:url(/images/intro/more_bg2_on.png) no-repeat 50%; color:#ffd245} 

.intro .int_more:hover font{background:url(/images/intro/more_on.png) no-repeat 50%} 


.intro .active li{float:left; width:25%;}
.intro .active .int_menu{width:80%;}
.intro .active .int_menu ul{min-width:400px; width:100%;}
.intro .active h3{min-width:80%;}


.int_tit p{font-size:30px;}
.int_tit h3{font-size:70px; margin-top:30px;}
.int_tit h3 span{font-size:50px}
.intro ul{margin-top:65px }
.intro li{margin-bottom:25px;}
.intro li a{padding: 0 15px;font-size:22px;}



 .intro .active{width: 75% !important;padding:0 10% !important;}
.intro .active span{}
.intro .active p{opacity:1; visibility:visible; transform: translateY(0%);}



.intro .other{width: 25% !important; }
.intro .other h3{font-size:40px;}
.intro .other h3 span{font-size:40px;}
.intro .other p{opacity:0; visibility:hidden; transform: translateY(100%);}

}
@media (min-width: 640px) and (max-width: 1299px){
 .intro2 {transform-orgin:50% 100%}
 .intro>div{height:50vh;width: 100%;padding-top: 16.5vw;padding: 8vh 10vw 0;}
.intro>div>div{}
 
.active .int_tit p{}

.intro1 .bg{transform-origin:0 0; background-position:80% 40% !important}
 .intro2 .bg{background-position:10% 40% !important}

.intro .int_more{width: 11vw;height: 11vw;line-height: 11vw;font-size: 1.5vw;opacity: 0;margin-top: 2vw;transition-property: opacity, visibility;visibility: hidden;} 
 .active .int_more{opacity:1;visibility: visible;}
.intro .int_more span{width: 4vw;margin: 0 1vw;}
.intro .int_more font{height: 1.6vw;background:url(/images/intro/more.png) no-repeat 50%;background-size: 100%;}
.intro1 .int_more{padding-right: 0vw;left:0;background:url(/images/intro/more_bg.png) no-repeat 50%;bottom: 8vw;} 
.intro2 .int_more{padding-left: 0.5vw;text-align:right;bottom: 8vw;right:0;background:url(/images/intro/more_bg2.png) no-repeat 50%;position: absolute !important;} 
.intro2 .int_more font{transform:rotate(-180deg)} 

.intro1 .int_more:hover{background:url(/images/intro/more_bg_on.png) no-repeat 50%; color:#ffd245} 
.intro2 .int_more:hover{background:url(/images/intro/more_bg2_on.png) no-repeat 50%; color:#ffd245} 

.intro .int_more:hover font{background:url(/images/intro/more_on.png) no-repeat 50%} 



.intro .active .int_menu{width:80%;}
.intro .active .int_menu ul{width:100%;}
.intro .active h3{min-width:80%;}

 .intro .active .int_more{transition-delay:1s;  }

.int_tit p{font-size: 2.5vw;}
.int_tit h3{font-size: 5.8vw;margin-top: 2.5vw;}
.int_tit h3 span{font-size:50px}
.intro ul{margin-top: 5vw;}
.intro li{margin-bottom: 2.5vw;}
.intro li a{padding: 0 1.3vw;font-size: 2.5vw;}



 .intro .active{
    height: 76vh;
}
.intro .active span{}
.intro .active p{opacity:1; visibility:visible; transform: translateY(0%);}



.intro .other{ height: 24vh;padding: 0 12vw;}
 .intro .other div{vertical-align:middle;}
.intro .other h3{font-size:5.8vw;margin-top: 0;}
.intro .other h3 span{font-size:4.1vw;}
.intro .other p{opacity:0;visibility:hidden;transform: translateY(100%);}

}
@media (max-width:640px){
   .intro2 {transform-orgin:50% 100%}
 .intro>div{height:50vh;width: 100%;padding-top: 16.5vw;padding: 30vw 5vw 0;}
.intro>div>div{}
 .intro .bg{background-size:cover}
.active .int_tit p{}

.intro1 .bg{transform-origin:0 0; background-position:80% 40% !important}
 .intro2 .bg{background-position:10% 40% !important}

.intro .int_more{width: 11vw;height: 11vw;line-height: 11vw;font-size: 1.5vw;opacity: 0;margin-top: 2vw;transition-property: opacity, visibility;visibility: hidden;} 
 .active .int_more{}
.intro .int_more span{width: 4vw;margin: 0 1vw;}
.intro .int_more font{height: 1.6vw;background:url(/images/intro/more.png) no-repeat 50%;background-size: 100%;}
.intro1 .int_more{padding-right: 0vw;left:0;background:url(/images/intro/more_bg.png) no-repeat 50%;bottom: 8vw;} 
.intro2 .int_more{padding-left: 0.5vw;text-align:right;bottom: 8vw;right:0;background:url(/images/intro/more_bg2.png) no-repeat 50%;position: absolute !important;} 
.intro2 .int_more font{transform:rotate(-180deg)} 

.intro1 .int_more:hover{background:url(/images/intro/more_bg_on.png) no-repeat 50%; color:#ffd245} 
.intro2 .int_more:hover{background:url(/images/intro/more_bg2_on.png) no-repeat 50%; color:#ffd245} 

.intro .int_more:hover font{background:url(/images/intro/more_on.png) no-repeat 50%} 



.intro .active .int_menu{width:80%;}
.intro .active .int_menu ul{width:100%;}
.intro .active h3{min-width:80%;}

 .intro .active .int_more{transition-delay:1s;  }

.int_tit p{font-size: 4vw;}
.int_tit h3{font-size: 8vw;margin-top: 4vw;}
.int_tit h3 span{font-size: 5vw;}
.intro ul{margin-top: 5vw;}
.intro li{margin-bottom: 3.5vw;}
.intro li a{padding: 0 2vw;font-size: 3.5vw;}



 .intro .active{
    height: 75vh;
}
.intro .active span{
}
.intro .active p{opacity:1; visibility:visible; transform: translateY(0%);}



.intro .other{height: 25vh;padding: 0 5vw;}
 .intro .other div{vertical-align:middle;}
.intro .other h3{font-size:5.8vw;margin-top: 0;}
.intro .other h3 span{font-size:4.1vw;}
.intro .other p{opacity:0;visibility:hidden;transform: translateY(100%);}

}