@charset "utf-8";

#wrap{width: 100%; min-width:1700px}
.main,.inner{width: 1180px; margin: auto; position: relative;}
#header{width: 100%; height: 145px; position: relative; background-repeat: repeat-x; background-image: url(../images/common/header/bg-header.jpg); background-position: 0 0;}
#header .main{height: 200px;}
#header h1{position: absolute; left: 0; top: 30px;}
#header .top-menu{position: absolute; right: 0; top: 45px;} 
#header .top-menu li{float: left; padding-right: 10px; margin-left: 10px; border-right: 1px solid #dcdcdc;} 
#header .top-menu li:last-of-type{padding-right:0px; border-right: none;} 
#header .top-menu li a{font-size: 15px; letter-spacing: -1px; font-weight: 600;}

#nav{position: absolute; top:97px; left:0px} 
#gnb{padding-top: 15px;} 
#gnb > li{float: left; width: 289px;text-align: center; padding-bottom: 11px;} 
#gnb >li a{font-size: 20px; font-weight: 600; } 
#gnb >li.me:hover{border-bottom: 3px solid #009a44} 


#gnb li ul{position: absolute; top: 75px; display: none;}
#gnb li.menu1 ul{left: 30px;}
#gnb li.menu2 ul{left: 300px; width: 400px;}
#gnb li.menu3 ul{left: 675px; width: 200px;}
#gnb li.menu4 ul{left:900px; width: 400px;}
#gnb li ul li{margin-left: 0; margin-right: 15px; float: left;}
#gnb li ul li a{font-size: 15px; color:#888}
#gnb li ul li:hover a{font-weight: 600; color:#222}

#visual{width: 100%; height: 600px; position: relative;}
#visual .text{position: absolute; top: 250px; left: 360px; z-index:10; width: 650px;}
#visual .text .text-banner li{width: 100%; position: absolute; left: 0; top: 0; }
#visual .text .text-banner li h2{font-size: 48px; font-weight: 600; letter-spacing:-4px; opacity: 0;position: relative; left: 100px;}
#visual .text .text-banner li:last-of-type h2{color:#fff}
#visual .text .text-banner li p{font-size: 24px; font-weight: 600; letter-spacing:-1.5px; opacity: 0; position: relative;left: 100px; margin-top: 30px; line-height: 1.5;}
#visual .text .text-banner li:last-of-type p{color:#fff}
#visual .main-banner{width: 100%; height: 600px; position: relative; overflow: hidden;}
#visual .main-banner li{width: 100%; height: 600px; position: absolute; background-repeat: no-repeat; background-size: cover; background-position: 0 0; left:0; top: 10px;}
#visual .main-banner li:nth-of-type(1){background-image: url(../images/main/visual/visual.png);}
#visual .main-banner li:nth-of-type(2){background-image: url(../images/main/visual/visual2.png);}
#visual .main-banner li:nth-of-type(3){background-image: url(../images/main/visual/visual.png);}
#visual .main-banner li:nth-of-type(4){background-image: url(../images/main/visual/visual1.png);}

#visual .btn-wrap{}
#visual .btn-wrap .btn{position: absolute; top: 50%; transform:translateY(-50%)}
#visual .btn-wrap .prev{left: 50px;}
#visual .btn-wrap .next{right: 50px;}

#visual .paging{position: absolute; left: 50%; transform:translateX(-50%); bottom: 25px;}
#visual .paging li{width: 25px; height: 25px; border-radius: 50%; background: #f26522; margin-right: 20px; float: left;}
#visual .paging li.on{width: 50px; height: 25px; border-radius:20px; background: #333;}

#container{height: 100%;}
#container:after{display: block; content:'';clear:both;}
#content{width: 100%; margin: auto;}

.inner h2{width: 1180px; text-align: center; font-size: 36px; font-weight: 600; padding-top: 70px;}
.inner h2:after{display: block; content:''; clear:both; border-bottom: 3.5px solid #009a44; width: 40px; margin-left: 570px;}
.inner > p{width: 1180px; text-align: center; font-size: 17px; margin-bottom: 50px; padding-top: 15px; }

#edu{width: 100%;}
#edu .edu{position: relative; margin-bottom: 70px;}
#edu .edu li{float: left; text-align: center; width: 274px; height: 289px; border: 2px solid #dcdcdc; border-radius:15px; margin-right: 22px;position: relative;}
#edu .edu li:nth-of-type(4){margin-right:0px;}
#edu .edu li:hover{background: rgba(17,17,17,0.7); border:2px solid #fff}
#edu .edu li a{display: block; text-align:center;}
#edu .edu li:hover a{color:#fff}
#edu .edu li a img{display: block;position: absolute; left:50%; transform:translateX(-50%)}
#edu .edu li:nth-of-type(1) a img{top: 50px;}
#edu .edu li:nth-of-type(2) a img{top: 50px;}
#edu .edu li:nth-of-type(3) a img{top: 60px;}
#edu .edu li:nth-of-type(4) a img{top: 40px;}
#edu .edu li a strong{display: block; font-size: 30px; margin-top: 170px;}
#edu .edu li a em{display: block; font-size: 24px;margin-top: -5px;}

#event{width: 100%; background: #eeeeee;}
#event .event{position: relative; padding-bottom: 70px;}
#event .event li{float: left; position: relative;}
#event .event li p.more{position: absolute; top: 10px; right: 10px; }

#story{width: 100%; height: 925px; margin: auto; position: relative;}
#story .story1{margin-bottom: 20px;}
#story .story1 li{float: left; width: 280px; margin-right: 20px; height: 280px; border-radius:15px; text-align: center;position: relative;margin-bottom: 20px;}
#story .story1 li:nth-of-type(1){background: #006659;}
#story .story1 li:nth-of-type(2){background: #00ad95;}
#story .story1 li:nth-of-type(3){background: #fdb737;}
#story .story1 li:nth-of-type(4){background: #ffde4e; margin-right:0px;}
#story .story1 li a{display: block; text-align: center; padding-top: 50px; color:#222}
#story .story1 li:nth-of-type(1) a{color:#fff}
#story .story1 li:nth-of-type(2) a{color:#fff}
#story .story1 li a em{display: block; font-size: 23px; padding-bottom: 15px;}
#story .story1 li a span{display: block; font-size: 25px; line-height: 1.3;}
#story .story1 li a img{display: block; position: absolute; bottom: 30px; left:50%; transform:translateX(-50%);transition:0.3s ease}

#story .story2{border-radius:15px;}
#story .story2 li{float: left; width: 580px; border-radius:15px; margin-bottom: 70px; overflow: hidden;}
#story .story2 li:first-of-type{margin-right: 20px;}
#story .story2 li a{display: block;}
#story .story2 li a img{display: block; width: 580px; height: 320px;}
#story .story2 li iframe{}

#seller{width: 100%; background: #f2f2f2; height: 635px;}
#seller .mask{width: 1020px; margin: auto; height: 334px;} 
#seller .mask .seller{width: 1800px; padding-bottom: 70px;position: relative; text-align: center;}
#seller .mask .seller li{width: 323px; height: 330px; float: left; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; position: relative; background: #fff; border-top: 2px solid #666; border-bottom: 2px solid #666; margin-right: 15px;margin-bottom: 10px;}
#seller .mask .seller li img{display: block; position: absolute; top: 40px; left:50%; transform:translateX(-50%)}
#seller .mask .seller li em{display: block; font-size: 18px; margin-bottom: 25px; margin-top: 195px;}
#seller .mask .seller li h3 a{font-size: 24px; line-height: 1.2;display: block;}
#seller .mask .seller li h3 a span{font-weight: 600;color:#333}

#seller .btn-wrap{position: relative;}
#seller .btn-wrap .btn{position: absolute; height: 365px;top:50%; transform:translateY(-50%)}
#seller .btn-wrap .btn a{}
#seller .btn-wrap .prev{left: 0;}
#seller .btn-wrap .next{right: 10px;}

#brand{width: 100%;}
#brand .brand{width: 1180px; margin: auto;}
#brand .brand li{float: left; margin-bottom: 70px;}
#brand .brand li a{display: block; margin-right: 66px;}
#brand .brand li:nth-of-type(5) a{margin-right:0px}
#brand .brand li a img{display: block;transition:0.3s ease}
#brand .brand li:hover a img{transform:scale(1.1)}

#footer{width: 100%; height: 230px; position: relative; background-position: 0 0; background-repeat:repeat-x; background-image: url(../images/common/footer/bg-footer.jpg);}
#footer h2{position: absolute; left: 0; top: 104px;}
#footer h2 img{}

#footer .footer{width: 100%;}
#footer .footer .footer1{float: left;}
#footer .footer .footer1 li{float: left; margin-right: 55px;padding-top: 25px; margin-bottom: 25px; letter-spacing:-1.3px}
#footer .footer .family{float: right; margin-top: 15px; margin-bottom: 15px; width: 225px; height: 40px; background: #fff; line-height: 40px;}
#footer .footer .family a{margin-left: 10px;}
#footer .footer .family a img{width: 15px; height: 15px; margin-left: 115px;}


#footer .footer2{width: 655px; position: absolute; top:103px; left: 145px;}
#footer .footer2 li{float: left; padding-right: 30px; margin-left: 30px; border-right: 1px solid #666; letter-spacing:-1.5px; margin-bottom: 15px;}
#footer .footer2 li:nth-of-type(3n){border-right: 0px;}
#footer .footer2 li:last-of-type{border-right: 0px;}
#footer .right{float: right; margin-top: 25px; text-align: right;}
#footer .right h3{font-size: 18px; line-height: 1.2; letter-spacing:-1px}
#footer .right h4{font-size: 40px; line-height: 1.2;letter-spacing:-2px}
#footer .right > p{font-size: 15px; line-height: 1.2;letter-spacing:-1px}