@charset "utf-8";

#wrap{width:100%;}
#header{z-index:3; position:absolute; top:0; left:0; width:100%;}
#header>div{width:100%; max-width:1090px; margin:0 auto; height:82px;}  /*ÇØ´ç ¿ÀºêÁ§Æ® ¾È¿¡ µé¾îÀÖ´Â ³»¿ëµéÀÇ Å©±â°¡ max-width¸¦ ¹þ¾î³ªÁö ¾Êµµ·Ï:ÃÖ´ë1090px*/
.pc{width:100%;}

/* ÁÂÃø¹Ú½º Logo */

#header>div>ul>li:first-child{float:left;}
#header>div>ul>li:first-child>h1{padding-top:30px;}
#header>div>ul>li:first-child>h1>a>img{width:200px;}

/* ¿ìÃø¹Ú½º Navigation */

#header>div>ul>li:last-child{float:right;}

/* aside GNB */

#header>div>ul>li:last-child>aside{padding-top:15px;}
#header>div>ul>li:last-child>aside>ul{float:right;}
#header>div>ul>li:last-child>aside>ul>li{float:left; margin-left:12px; color:#575756; font-size:10px; line-height:1rem;}
#header>div>ul>li:last-child>aside>ul>li>a{color:#575756; font-weight:500; font-family: 'Muli', sans-serif; font-size:12px; line-height:1rem; text-shadow:1px 1px 1px rgba(243,243,243,0.7);}
#header>div>ul>li:last-child>aside>ul>li>a>i{color:#575756; font-size:16px; line-height:1rem;}

/* nav LNB */

#header>div>ul>li:last-child>nav{padding-top:15px;}
#header>div>ul>li:last-child>nav>ul.depth1{width:100%; position:relative;}
#header>div>ul>li:last-child>nav>ul.depth1>li{float:left; margin-left:20px;}
#header>div>ul>li:last-child>nav>ul.depth1>li>a,
#header>div>ul>li:last-child>nav>ul.depth1>li>button{display:inline-block; font-size:16px; color:#575756; font-weight:600; font-family: 'Muli', sans-serif; padding-bottom:5px; text-shadow:1px 1px 1px rgba(243,243,243,0.7);}
#header>div>ul>li:last-child>nav>ul.depth1>li>button:hover{color:#a1abe5;}
#header>div>ul>li:last-child>nav>ul.depth1>li.addClass>a{border-bottom:1px solid #575756;}
#header>div>ul>li:last-child>nav>ul.depth1>li>a:hover{border-bottom:1px solid #575756;}
#header>div>ul>li:last-child>nav>ul.depth1>li>a:focus{border-bottom:1px solid #575756;}
#header>div>ul>li:last-child>nav>ul.depth1>li>a>i{width:auto;}
#header>div>ul>li:last-child>nav>ul.depth1>li:last-child>button{font-size:18px; margin-top:-3px;}
#header>div>ul>li:last-child>nav>ul.depth1>li>ul.depth2{position:absolute; top:20px; width:inherit; height:0; overflow:hidden; transition:height 0.3s; padding-top:10px;}
#header>div>ul>li:last-child>nav>ul.depth1>li:hover>ul.depth2{height:auto;}
#header>div>ul>li:last-child>nav>ul.depth1>li>ul.depth2>li{padding:5px 0;}
#header>div>ul>li:last-child>nav>ul.depth1>li>ul.depth2>li>a{display:inline-block; font-size:13px; color:#575756; font-weight:600; font-family: 'Muli', sans-serif; text-shadow:1px 1px 1px rgba(243,243,243,0.7);}
#header>div>ul>li:last-child>nav ul.depth3{display:none;}

/* search */
.search-box{
	background:rgba(255,255,255,0.75);
	width:100%; height:70px;
	position:relative; top:10px; right:0;
	padding-top:20px; border-radius: 5px;
	z-index:10; display:none;	
}
.search-box .close-btn{
	width:20px; height:20px;
	position:absolute; top:10px; right:10px;
	text-align:center; line-height:20px;
	font-size:15px; cursor:pointer;
	color:#575756;
}
.search-box .close-btn:hover{
	color:#a1abe5;
}
.search-box .box-inner{position:relative; top:0; left:0; width:80%; margin:0 auto; padding:0 2rem;}
.search-box h3{float:left; line-height:50px; font-size:16px; font-weight:600; font-family: 'Muli', sans-serif; margin-right:2rem;}
.search-box ul li{float:left; line-height:50px; margin-right:1rem;}
.search-box ul li:last-child{margin-right:0rem;}
.search-box ul li a{display:block; font-size:13px;}
.search-box ul li a:hover{font-weight:600;}
.search-box fieldset{
  position: relative;
  display: inline-block;
  padding: 0 0 0 40px;
  background: #fff;
  border: none;
  border-radius: 5px;
  margin-right:4rem;
  float:left;
}
.search-box fieldset input,
.search-box fieldset button {
  position: relative;
  width: 200px;
  height: 50px;
  padding: 0;
  display: inline-block;
  float: left;
}
.search-box fieldset input {
  color: #575756;
  z-index: 2;
  border: 0 none;
}
.search-box fieldset input:focus {
  outline: 0 none;
}
.search-box fieldset input:focus + button {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.search-box fieldset input:focus + button .xi-search {
  -webkit-transform: translate(0px, 0);
      -ms-transform: translate(0px, 0);
          transform: translate(0px, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  color: #fff;
}
.search-box fieldset button {
  z-index: 1;
  width: 50px;
  border: 0 none;
  background: #575756;
  cursor: pointer;
  border-radius: 0 5px 5px 0;  
  -webkit-transform: translate(-50px, 0);
      -ms-transform: translate(-50px, 0);
          transform: translate(-50px, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.search-box .xi-search {
  font-size: 1.4rem;
  color: #575756;
  z-index: 3;
  top: 25%;
  -webkit-transform: translate(-190px, 0);
      -ms-transform: translate(-190px, 0);
          transform: translate(-190px, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;
}

/* mobile only */

.mobile{z-index:5; display:none; position:fixed; width:100%; height:65px; background:#ffffff;}
.mobile>ul{text-align:center; position:relative;}
.mobile>ul>li:nth-child(1){position:absolute; top:24px; left:20px;}
	.appBarBtn{position:relative; display:block; width:26px; height:16px; display:none;}
	.appBarBtn>i{display:block; position:absolute; left:0; width:100%; height:2px; background:#575756;}
	.appBarBtn>i.bar1{top:0; transform:rotate(0deg); transition:all 0.3s;}
	.appBarBtn>i.bar1.addAppbar{top:50%; margin-top:-1px; transform:rotate(45deg); transition:all 0.3s;}
	.appBarBtn>i.bar2{top:50%; margin-top:-1px;}
	.appBarBtn>i.bar2.addAppbar{top:50%; margin-top:-1px; opacity:0; transition:all 0.3s;}
	.appBarBtn>i.bar3{bottom:0; transform:rotate(0deg); transition:all 0.3s;}
	.appBarBtn>i.bar3.addAppbar{bottom:50%; margin-bottom:-1px; transform:rotate(-45deg); transition:all 0.3s;}

div.burger {
    height: 26px; 
    width: 26px;
    position: absolute;
    top: 8px; 
    left: 20px;
    cursor: pointer;    
}
    div.x,
    div.y,
    div.z {
        position: absolute; margin: auto;
        top: 0px; bottom: 0px;      
        background: #575756;
        border-radius:2px;
        -webkit-transition: all 200ms ease-out;
           -moz-transition: all 200ms ease-out;
            -ms-transition: all 200ms ease-out;
             -o-transition: all 200ms ease-out;
                transition: all 200ms ease-out;
    }       
    div.x, div.y, div.z { height: 2px; width: 26px; }
    div.y{top: 18px;}
    div.z{top: 37px;}
    div.collapse{
        top: 20px;
        background:#575756;
        -webkit-transition: all 70ms ease-out;
           -moz-transition: all 70ms ease-out;
            -ms-transition: all 70ms ease-out;
             -o-transition: all 70ms ease-out;
                transition: all 70ms ease-out;
    }	
    div.rotate30{
        -ms-transform: rotate(30deg); 
        -webkit-transform: rotate(30deg); 
        transform: rotate(30deg);   
        -webkit-transition: all 50ms ease-out;
           -moz-transition: all 50ms ease-out;
            -ms-transition: all 50ms ease-out;
             -o-transition: all 50ms ease-out;
                transition: all 50ms ease-out;                  
    }
    div.rotate150{
        -ms-transform: rotate(150deg); 
        -webkit-transform: rotate(150deg); 
        transform: rotate(150deg);  
        -webkit-transition: all 50ms ease-out;
           -moz-transition: all 50ms ease-out;
            -ms-transition: all 50ms ease-out;
             -o-transition: all 50ms ease-out;
                transition: all 50ms ease-out;                  
    }   
    div.rotate45{
        -ms-transform: rotate(45deg); 
        -webkit-transform: rotate(45deg); 
        transform: rotate(45deg);   
        -webkit-transition: all 100ms ease-out;
           -moz-transition: all 100ms ease-out;
            -ms-transition: all 100ms ease-out;
             -o-transition: all 100ms ease-out;
                transition: all 100ms ease-out;                 
    }
    div.rotate135{
        -ms-transform: rotate(135deg); 
        -webkit-transform: rotate(135deg); 
        transform: rotate(135deg);  
        -webkit-transition: all 100ms ease-out;
           -moz-transition: all 100ms ease-out;
            -ms-transition: all 100ms ease-out;
             -o-transition: all 100ms ease-out;
                transition: all 100ms ease-out;                 
    }
	
div.circle{ 
    border-radius: 50%;
    width: 0px;
    height: 0px; 
    position:absolute;
    top: 32px;
    left: 40px;
    background:#fff;
    opacity:1;
    -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
}
div.circle.expand{
    width:1200px;
    height:1200px;
    top: -568px;
    left: -560px;   
    -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu {
    height: 568px; 
    width: 100%;
	max-width:480px;
    position: absolute;
    top: 0px; left: 0px;
}
div.menu ul li {
    list-style: none;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    width:100%;
    text-align:center;
    font-size:0px;
    -webkit-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -moz-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu ul li a {
    color:#575756;
    text-transform:uppercase;
    text-decoration:none;   
    letter-spacing:3px;         
}
div.menu ul li a:hover{
	font-weight:bold;
}
div.menu li.animate{
    font-size:1rem;
    opacity:1;
    -webkit-transition: all 160ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -moz-transition: all 160ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 160ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 160ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 160ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu li.animate:nth-of-type(1){ 
    top:100px;
    transition-delay: 0.0s; 
}
div.menu li.animate:nth-of-type(2){
    top:150px;
    transition-delay: 0.02s;            
}
div.menu li.animate:nth-of-type(3){
    top:200px;
    transition-delay: 0.04s;
}
div.menu li.animate:nth-of-type(4){
    top:250px;
    transition-delay: 0.06s;
}
div.menu li.animate:nth-of-type(5){
    top:300px;
    transition-delay: 0.08s;
}
div.menu li.animate:nth-of-type(6){
    top:350px;
    transition-delay: 0.10s;
}
div.menu li.animate:nth-of-type(7){
    top:400px;
    transition-delay: 0.12s;
}
div.menu li.animate:nth-of-type(8){
    top:450px;
    transition-delay: 0.14s;
}	
div.menu li.animate:nth-of-type(9){
    top:500px;
    transition-delay: 0.16s;
}	
	
.mobile>ul>li:nth-child(2){position:absolute; top:12.5px; left:50%; margin-left:-100px; display:block; transition:all 0.3s; z-index:1;}
.mobile>ul>li:nth-child(3){position:absolute; top:7px; right:3px;}
.mobile>ul>li>a{color:#575756;}
.mobile>ul>li>a>img{width:200px;}

.mobile form{
    position: relative;
    top: 4px;
    right: 0;
    width: 50px;
    height: 50px;
    background: white;
    box-sizing: border-box;
    border-radius: 25px;
	z-index:2;
	transition: all 0.5s;
}
.mobile input{
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 42px;
    line-height: 30px;
    outline: 0;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
	background-color:transparent;
	border: 1px solid transparent;
	color:#ffffff;
	transition: all 0.5s;
}
.mobile .mo-search-btn{
    box-sizing: border-box;
    padding: 5px;
    width: 42px;
    height: 42px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: #575756;
    text-align: center;
    font-size: 26px;
	z-index:11;
	transition: all 0.5s;
}
.mobile form.on{
    width: 180px;
    cursor: pointer;
	transition: all 0.5s;
}
.mobile form.on input{
	background: #575756;
	border: 1px solid white;
    width:180px;
	transition: all 0.5s;
}
.mobile form.on .mo-search-btn{
    color: white;
	transition: all 0.5s;
}

/* sec1 fullscreen slider */

#main{z-index:2; position:relative; width:100%;}
#section1{width:100%; overflow:hidden;}
#section1 > #fullScreenSlider{width:100%; height:900px; position:relative;}
#fullScreenSlider .vegas-slide-inner{width:100%; height:100%; padding-top:15rem; position:relative;}
.vegas-slide-inner h2{font-size:6rem; text-align:center; font-family: 'Dancing Script', cursive; text-shadow:2px 2px 3px #f3f3f3;}
.section1-bottom-icon-wrap{z-index:2; position:absolute; left:0; bottom:-20px; width:100%; height:80px; background:rgba(243,243,243,0.7);}
	.section1-icon-left-wrap{position:absolute; bottom:20px; left:80px; width:60px; height:60px;
	}
	.section1-icon-center-wrap{width:60px; height:60px; position:absolute; bottom:20px; left:50%; margin-left:-30px;}
	.section1-icon-right-wrap{position:absolute; bottom:20px; right:80px; width:60px; height:60px;}
	
	.section1-icon-center-wrap>a,
	.section1-icon-left-wrap>button,
	.section1-icon-right-wrap>button{float:left; font-size:30px; width:60px; text-align:center; padding:15px 0; color:#575756;}
	.section1-icon-left-wrap>button:hover,
	.section1-icon-right-wrap>button:hover{background:rgba(255,255,255,0.9);}

	.section1-icon-center-wrap>a{margin-top:0; transition:all 0.3s;}
	.section1-icon-center-wrap>a:hover{margin-top:15px; transition:all 0.3s;}

/* sec2 brand */	

#section2{width:100%;}
#section2>div{width:auto; background:#f3f3f3;}
#section2>div>ul{width:100%;}
#section2>div>ul>li{float:left; width:50%;}
#section2>div>ul>li:nth-child(1){background:#e5b8bd;}
#section2>div>ul>li:nth-child(2){background:#b8d8e5;}
#section2>div>ul>li>ul{padding:70px 80px; height:168px;}
#section2>div>ul>li>ul>li>h2{font-size:20px; color:#fff; display:inline-block; word-break:beark-all;}
#section2>div>ul>li>ul>li>h2>span{display:block; height:15px; border-bottom:1px solid #ffffff;}
#section2>div>ul>li>ul>li>p{padding-top:30px; line-height:200%; font-size:14px; color:rgba(255,255,255,0.9); word-break:keep-all;}
#section2>div>ul>li:nth-child(2)>ul>li:nth-child(2){display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-top:20px;}
#section2>div>ul>li>ul>li>div{display:block; width:20%; border-radius:50%; overflow:hidden; background-color:#ffffff;}
#section2>div>ul>li>ul>li>div>a{width:100%; height:100%; border-radius:50%;}
#section2>div>ul>li>ul>li>div>a>img{width:100%; height:auto; transform:scale(0.8); transition: all 0.3s ease-in-out;}
#section2>div>ul>li>ul>li>div>a:hover>img{transform:scale(1);}

/* sec3 video list */

#section3{width:100%;} 
#section3>div{width:100%; height:auto;/*ÀӽóôÀÌ auto*/}
.section3-nav{width:100%; height:52px; background:#b8bee5;}
.section3-nav>ul{width:100%;text-align:center;}
.section3-nav>ul>li{display:inline-block;}
.section3-nav>ul>li>a{display:block; padding:19px 30px; font-size:14px; color:#fff;}
.section3-nav>ul>li>a:hover{background:#a1abe5;}

.section3-video{width:100%;}
.section3-video>li{cursor:pointer;float:left; width:33.333%;overflow:hidden;}
.section3-video>li>div{position:relative;width:100%;}
.section3-video>li>div>video{z-index:1;position:relative;width:100%;transform:scale(1, 1);transition:all 0.6s;}
.section3-video>li>div>p{z-index:2;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0, 0);transition:all 1s;}
.section3-video>li:hover>div>p{background:rgba(0,0,0,.8);transition:all 1s;}
.section3-video>li>div>ul{z-index:3;position:absolute;left:80px;top:250px;opacity:0;transition:all 1s;}
.section3-video>li:hover>div>ul{top:150px;opacity:1;transition:all 1s;}
.section3-video>li>div>ul>li{}
.section3-video>li>div>ul>li>h2{font-size:25px;color:#fff;padding-bottom:60px;}
.section3-video>li>div>ul>li>p{font-size:18px;color:#fff;padding-bottom:60px;}
.section3-video>li>div>ul>li:last-child{position:relative;display:block;width:102px;height:102px;border-radius:50%;border:1px solid #fff;overflow:hidden;}
.section3-video>li>div>ul>li:last-child>a{display:block;width:100%;height:100%;background:transparent;color:#fff;transition:all 0.3s;}
.section3-video>li>div>ul>li:last-child>a:hover{background:#fff;color:#000;transition:all 0.3s;}
.section3-video>li>div>ul>li:last-child>a>span{text-transform:uppercase;display:block;position:absolute;top:50%;width:100%;height:14px;font-size:14px;margin-top:-7px;font-weight:600;text-align:center;}

.section3-video>li:hover>div>video{transform:scale(1.3, 1.3);transition:all 0.6s;}
.section3-video>li>div>img{width:100%;transform:scale(1, 1);transition:all 0.6s;}
.section3-video>li:hover>div>img{transform:scale(1.3, 1.3);transition:all 0.6s;}
.section3-video>li.video_1, .section3-video>li.video_2{display:none;}

/* sec4 loadmore */

#section4{width:100%; background:#add9c9;}
#section4>div{width:100%;padding:60px 0;text-align:center;}
#section4>div>button{cursor:pointer;background:#add9c9;width:200px;height:50px;font-size:16px;color:#f1f1f1;border:1px solid rgba(255,255,255, 0.7);}
#section4>div>button:hover{font-weight:bold; color:#fff;}

/* footer */

#footer{z-index:1;position:relative;width:100%;background:#575756;}
#footer>div{width:100%;max-width:1090px;margin:0 auto;height:auto;padding:36px 0 14px 0;}
#footer>div>ul{width:100%;}
#footer>div>ul>li{width:100%;}

/* Sitemap */

.footer-sitemap-wrap{width:auto;padding-bottom:60px;}
.footer-sitemap-wrap>li{float:left;margin-right:60px;}
.footer-sitemap-wrap>li:last-child{margin-right:0;}
.footer-sitemap-wrap>li>i{display:block;width:20px;height:2px;background:#fff;margin-bottom:20px;opacity:0.2;}
.footer-sitemap-wrap>li>h2{color:#fff;font-size:16px;font-weight:600;font-family: 'Muli', sans-serif;padding-bottom:20px; letter-spacing:1px;}
.footer-sitemap-wrap>li>h2>a{color:#fff;}
	/* sub menu */
	.footer-sub{width:auto;}
	.footer-sub>li{padding-bottom:15px;}
	.footer-sub>li>a{font-size:13px;color:#bbbbba;}
	.footer-sub>li>a:hover{color:#fff;}

/* address */

address{display:block;width:100%;padding-bottom:10px;}	
address ul>li:first-child{float:left;color:#bbbbba;margin:12px 0;}	
address ul>li:last-child {float:right;text-align:center;}	
address ul>li:last-child>ul{width:100%;}	
address ul>li:last-child>ul>li{display:inline-block; margin:0 7px; width:35px; height:35px; border-radius:50%; border:1px solid #bbbbba; overflow:hidden;}
address ul>li:last-child>ul>li:last-child{margin-right:0;}
address ul>li:last-child>ul>li>a{display:block; width:35px; height:35px; color:#575756; background:#bbbbba; font-size:25px; text-align:center;}	
address ul>li:last-child>ul>li>a:hover{background:#fff;}	
address ul>li:last-child>ul>li>a>i{margin-top:5px;}