*{margin: 0; padding: 0;}
body{font-family: 'NanumSquareR','Roboto-Regular', 'sans-serif'; color:#1a1a1a;overflow-x: hidden; max-width:1920px; letter-spacing: -1px; font-size:18px;}
li{list-style: none;}
a{color:#1a1a1a; text-decoration: none}
input::placeholder{color:#bfbfbf}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #225c84 inset !important;
  box-shadow: 0 0 0px 1000px #225c84 inset !important;
  -webkit-text-fill-color: #fff !important;
}

header{width:100%;height:80px; line-height: 80px; position: fixed; top:0; left: 0; background-color: #fff; border-bottom: 1px solid #e5e5e5; z-index: 10000; display: table; max-width:1920px;}
.headerWrap{width:80%; margin: 0 auto; position: relative;}
.logo{float:left;}
.logo > a > img{display: block; width:180px; margin:25px 0 0 0}
header > .headerWrap > ul{width:35%; float:right; height:100%;}
header > .headerWrap > ul > li{float:left; width:30%; line-height: 80px; text-align: right;}
header > .headerWrap > ul > li > a{display: inline-block; width:100%; text-align: center; color:#1a1a1a;}
header > .headerWrap > ul > li > a > img{display: block; width:25px; margin:28px 0 0 0; float: right}
header > .headerWrap > ul > li:last-child{width:5%; float:right;}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all 0.4s;
  box-sizing: border-box;
}

.menu-trigger {
  position: relative;
  width: 50px;
  height: 33px;
  margin: 20px 0 0 0;
}

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #484848;
  border-radius: 4px;
}

.menu-trigger span:nth-of-type(1) {
  top: 10px;
}

.menu-trigger span:nth-of-type(2) {
  top: 20px;
    width: 60%;
}

.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

/* 2th bar out 되고, 1st 3rd bar 회전하며 X */

.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
    top: 0px;
}
.menu-trigger.active span:nth-of-type(2) {
  left: 50%;
  opacity: 0;
  animation: active-menu-bar05 0.8s forwards;
}
@keyframes active-menu-bar05 {
  100% {
    height: 0;
  }
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
    bottom: -11px !important;
}

#visual_wrap{width:100%; height: 100vh; clear: both;}
#animate{position: relative; background-color: #225c84; width: 100%; height: 100%; top:0; left:0; z-index: -1;}
#animate p{position: absolute; font-family: 'SB_B'; color: #fff;}
#animate p:nth-child(1){font-size: 22px; top: 260px; left:8%;}
#animate p:nth-child(2){font-size: 28px; top: 185px; left:17%; color:rgba(255,255,255,0.7);}
#animate p:nth-child(3){font-size: 16px; top: 150px; left:23%; color:rgba(255,255,255,0.4);}
#animate p:nth-child(4){font-size: 14px; top: 250px; left:37%;}
#animate p:nth-child(5){font-size: 28px; top: 210px; left:73%; color:rgba(255,255,255,1);}
#animate p:nth-child(6){font-size: 28px; top: 150px; left:85%; color:rgba(255,255,255,0.7);}
#animate p:nth-child(7){font-size: 180px; top: 35%; width: 100%; letter-spacing: -7px; text-align: center;}
#animate p:nth-child(8){font-size: 16px; top: 650px; left:15%;}
#animate p:nth-child(9){font-size: 28px; top: 550px; left:26%; color:rgba(255,255,255,0.4); }
#animate p:nth-child(10){font-size: 22px; top: 630px; left:60%; color:rgba(255,255,255,0.7);}
#animate p:nth-child(11){font-size: 22px; top: 590px; left:68%;}
#animate p:nth-child(12){font-size: 42px; top: 670px; left:79%; color:rgba(255,255,255,0.7);}
#animate p:nth-child(13){font-size: 28px; top: 530px; left:90%; color:rgba(255,255,255,0.4);}

#visual{width:100%; margin:0 auto; height:100%; background: url(../images/visual.jpg) no-repeat; background-size: cover; position: absolute; top:0; left:0; display: none;}
#visual p{font-family: 'SB_B'; position: absolute; font-size: 180px; color:#fff; letter-spacing: -7px; top: 35%; width: 100%; text-align: center;}
#visual span{display: block; font-size:22px; text-align: center; width:100%;padding-top: 550px; color:#fff;}

#content{width:100%; clear: both; overflow: hidden;}
.content_wrap{width:80%;margin:0px auto; }
.content_wrap img{display:block; width: 30%; height: 580px; float: left;}
.content_wrap .intro{padding: 80px 0 10px}
.content_wrap .intro p{font-family: 'SB_B'; font-size: 70px; padding: 0 0 0 35%; color: #224f6f;}
.content_wrap .intro .line{width:110%; height: 2px; background-color: #d7d7d7; margin: 10px 0}
.content_wrap .intro span{display: block; width: 55%; padding: 0px 0 0 35%; line-height: 24px;}
.content_wrap p.fastLink{font-family: 'NanumSquareR'; font-size: 16px; width: 12%; margin: 100px 0 0 0; font-weight: bold;}
.content_wrap p:last-child{margin: 45px 0 0 0;}
.content_wrap p.fastLink a img{width: 40px; float: right; height: auto;}

.animated-title {font-size:80px; font-family: 'SB_B'; font-weight:300; position: relative; width: 100%;max-width:100%; height: auto; padding:30px 0 100px; overflow-x: hidden; overflow-y: hidden; -webkit-text-stroke: 2px #cacaca; color: #fff;}
.animated-title .track {position: absolute; white-space: nowrap;will-change: transform;animation: marquee 50s linear infinite; }
.animated-title .bottomTrack {animation: marquee 70s linear infinite; }
.animated-title .track .content strong{color: #1a1a1a;} 
.flow{padding: 100px 0 70px}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (hover: hover) and (min-width: 700px){
    .animated-title .content {-webkit-transform: translateY(calc(100% - 8rem)); transform: translateY(calc(100% - 8rem));}
}

.swiper-container {
    width: 80%;
    margin: 0 auto;
    height: 550px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff; /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    /*box-shadow: 0px 2px 10px 0px #848484;*/
}
.mainSlide img{width:100% !important;}

/*#slideWrap{width: 79%; margin: 00px auto; overflow: hidden; position: relative; padding: 230px 0;}
.swiper-slide:nth-child(2n){margin: 75px 0 0 0;}
.swiper-slide > div img{display: block; width: 100%;}*/
.swiper-slide > div.slideText{position: absolute; bottom: 0; background: #fff; width: 100%;}
.swiper-slide > div h2{border-right: 1px solid #cacaca; border-left: 1px solid #cacaca; box-sizing: border-box; font-family: 'SB_B'; font-size: 28px; padding: 15px 0 5px 20px; color: #224f6f; text-align: left;}
.swiper-slide > div p{border-right: 1px solid #cacaca; border-left: 1px solid #cacaca; border-bottom: 1px solid #cacaca; box-sizing: border-box; padding: 5px 20px 20px 20px; text-align: left; font-size: 16px;}

#patrner{width: 80%; margin: 40px auto 200px;}
#patrner h1{font-family: 'SB_B'; font-size: 70px; color: #224f6f;}
#patrner ul{width: 100%;}
#patrner ul li{width: 24%; height: 65px; line-height: 65px; float: left; border: 1px solid #cacaca; box-sizing: border-box; margin: 5px 1% 5px 0;}
#patrner ul li:nth-child(4n){margin: 5px 0% 5px 0;}
#patrner ul li img{display: block; width: 80%; text-align: center; vertical-align: middle; margin: 10px auto;}

footer{width:100%; background-color: #2c2c2c; clear: both; margin: 50px 0 0 0;}
.contactWrap{width:80%; margin: 0 auto; position: relative; padding: 40px 0;}
.contactWrap p{text-align: center; color: #fff; text-decoration-line: underline; /*text-decoration-thickness: 5px;*/    letter-spacing: 0px;}
.contactWrap strong{position: absolute; font-family: 'SB_B'; text-align: center; top: 45px; width: 100%; margin:0 auto; font-size: 140px; color: rgba(255,255,255,0.4);}
.contactWrap a{position: relative; display: inline-block; width: 12%; left: 50%; height: 54px; line-height: 30px; text-align: center; color: #fff; margin: 75px 0 0 -6%; cursor: pointer; overflow: hidden; padding: 0;}
.contactWrap a:before, .contactWrap a:after {content: ""; width: 100%; height: 0; background: #353535; border-bottom: 1px solid rgba(255, 255, 255); position: absolute; top: 0; right: -50%; transform: rotate(45deg); transition: all 0.3s ease 0s;}
.contactWrap a:after {border: none; border-top: 2px solid rgba(255, 255, 255); top: auto; right: auto; bottom: 0;left: -50%;}
.contactWrap a:hover:before, .contactWrap a:hover:after {height: 40%;}
.contactWrap a >span {display: block; padding: 10px 20px; font-size: 20px; color: #fff; text-transform: uppercase; border: 2px solid rgba(255, 255, 255); z-index: 1;}
.copyright{width: 100%; border-top: 1px solid #fff; margin: 10px 0 0 0; color: #b5b5b5; padding: 0 0 50px 0;}
.copyright ul{margin: 30px 0 0 10%; width: 100%;}
.copyright ul li a{display: inline-block; color: #b5b5b5; width: 100%; font-size: 15px;}
.copyright ul li:nth-child(2) a{color:#fff;}
.copyright ul.info{margin: 40px 0 0 10%; font-size: 13px;}
.copyright ul.info li{font-size: 13px; float: left; padding: 0 50px 0 0;}
.copyright p.adress{margin: -20px 10% 0 0%; float: right; line-height: 20px; font-size: 13px; letter-spacing: 0px;}

#about{margin: 80px 0 0 0;}
#about .aboutWrap{width: 80%; margin: 0 auto; padding: 60px 0;}
#about .aboutWrap h1{font-family: 'SB_B'; font-size: 52px;}
#about .aboutWrap p{width: 40%; font-size: 18px; margin: 25px 0 0 0; line-height: 24px;}
#about .aboutWrap img{display: block; float: right; margin: -40px 0;}

#history{width: 100%; margin: 350px 0 20px; clear: both; background-color: #224f6f;}
#history h2{text-align: center; font-family: 'SB_B'; font-size: 52px; color: #fff; padding: 40px 0 10px;}
#history ul{width: 80%; margin: 0 auto;}
#history ul li{width: 100%; padding: 30px 0}
#history ul li h3{color: #fff; font-size: 32px; /*font-weight: bold;*/ width: 5%; float: left;}
#history ul li h3:after{content: "|"; padding: 0 0 0 50px;}
#history ul li div{width:90%; padding: 0 0 0 180px;}
#history ul li div p{color: #fff; width: 100%; font-size: 20px; line-height: 35px;}
#history ul li p.business{width: 100%; height: 40px;}
#history ul li p.business span{color: #fff; display: inline-block; padding: 0 50px 15px 0; float:left; font-size: 24px;}
#history ul li p.business span a{color: #ffc965; font-size: 24px;}

#portfolioWrap{width: 80%; margin: 100px auto;}
#portfolioWrap .portfolio{width: 30%; height: 550px; float:left ;margin: 20px 0 40px;}
#portfolioWrap .portfolio:nth-child(1){background: url(../images/portfolio_01.jpg) center/100% no-repeat;}
#portfolioWrap .portfolio:nth-child(2){background: url(../images/portfolio_01.jpg) center/100% no-repeat; margin: 40px 5% 0;}
#portfolioWrap .portfolio:nth-child(3){background: url(../images/portfolio_01.jpg) center/100% no-repeat;}
#portfolioWrap .portfolio:nth-child(4){background: url(../images/portfolio_01.jpg) center/100% no-repeat;}
#portfolioWrap .portfolio:nth-child(5){background: url(../images/portfolio_01.jpg) center/100% no-repeat; margin: 40px 5% 0;}
#portfolioWrap .portfolio{}
#portfolioWrap .portfolio h3{font-size: 48px; margin: 40px auto; text-align: center; color:#fff;}
#portfolioWrap .portfolio p{width: 80%; margin: 0 auto; color: #fff;}



#story{width:100%; margin: 120px auto 0; overflow-x: hidden;}
#story h2{text-align: center; font-family: 'SB_B'; font-size: 48px; color: #224f6f;}
#story p{text-align: center; font-size: 18px; margin:15px 0}
#story img{margin: 20px 0 0 0; display: inline-block; overflow-x: hidden;}

.swiper{width: 100%; height: 100%;}
.swiper-slide{ text-align: center;  font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center;}
.swiper-slide img{display: block; width: 30%; height: 100%; object-fit: cover;}
.swiper{width: 100%; height: 300px; margin-left: auto; margin-right: auto;}
.swiper-slide{background-size: cover; background-position: center; overflow: hidden;}
.mySwiper2{height: 100%; width: 80%; margin: 0 auto; overflow-x: hidden;}
.mySwiper{height: 20%; box-sizing: border-box; padding: 10px 0;}
.mySwiper .swiper-slide{width: 100%; height: 100%; opacity: 0.4;}
.mySwiper .swiper-slide:hover{opacity: 1;}
.mySwiper .swiper-slide-thumb-active{opacity: 1;}
.swiper-slide img {display: block; width: 30%; height: 100%; object-fit: cover; cursor:pointer; transition: all 0.2s linear;}
.swiper-slide img:hover{transform: scale(1.02); overflow:hidden;}

.slideStory{width: 80%; margin: 120px auto 0; overflow-x: hidden; position: relative;}
.slideStory .swiper-slide{margin: 0}
.mySwiper2 .swiper-slide img{width: 50%; height:600px; border-radius: 4px; margin:0 !important;}
.slideStory .swiper-slide .slideText{text-align: left; position: relative; top: -100px; left: 10px;}
.slideStory .swiper-slide h3{border: none; font-size: 26px; padding: 0 0 0 70px;}
.slideStory .swiper-slide p{border: none; text-align: left !important; font-size: 36px !important; padding: 0 0 0 70px; margin:0 0 25px 0 !important; font-weight: bold;}
.slideStory .swiper-slide span{display: inline-block; padding: 0 0 0 70px; width:70%; font-size: 16px; line-height: 20px;}

.slideStory2{width: 81%; margin: 10px auto 0; overflow-x: hidden;}
.slideStory2 .swiper-slide{margin: 0}
.slideStory2 .swiper-slide img{width: 95%; margin: 0 !important; border-radius: 4px;}

.swiper-button-next2{}
.swiper-button-prev2{}

#contact{width: 80%; margin: 80px auto;}
.infoContact{width:40%; float: left; position: fixed; top: 100px; max-width:760px;}
.infoContact h3{font-size: 62px; font-family: 'SB_B'; color: #225c84; margin: 90px 0 0;}
.infoContact p{width: 90%;}
.infoContact .privacy{border: 2px solid #d3d3d3; margin: 20px 0; height: 250px; border-radius: 4px; width: 90%; overflow-y: scroll; padding: 10px 15px;}
.infoContact .privacy h4{font-size:16px; margin:20px 0 10px;}
.infoContact .privacy p{font-size:13px; width:100%; font-weight: bold; margin:0 0 10px 0;}
.infoContact .privacy span{display:block; font-size:13px; width:100%; color:#878787;}

.infoContact small input{display: inline-block; margin: 0 5px 0 0}
.infoContact span{font-size:13px; display: block; line-height: 16px; color:#878787;}
.infoContact span:first-child{margin: 50px 0;}



.writeContact{background: #225c84; width: 50%; color: #fff; float: right;}
.writeContact div {margin: 150px 0 50px;}
.writeContact div.seleckBox02{margin:230px 0 0 0;}
.writeContact div h4{font-size: 32px; padding: 0 0 0 20px}
.writeContact div ul{margin: 30px 0;}
.writeContact div ul li p{width: 100px; float:left;}
.writeContact div ul.infoQu > li{border-bottom:2px solid #ffc965; height: 50px; line-height: 50px; margin: 15px 0 5px; padding: 0 0 0 30px}
.writeContact div ul > li input{border: none; background: none ;width: 70%; height: 40px; color:#fff; outline: none; font-size: 16px; font-family: 'NanumSquareR';}
.writeContact div ul > li span{display: inline-block; width:20%;  height: 100%;  border: 2px solid #ffc965; border-radius: 4px; color: #fff; text-align: center; float: left; margin: 0 2%; height:40px; line-height: 40px; cursor: pointer;}
/*.writeContact div ul > li a:hover{background: #f1e4a7; color:#333;}*/
.writeContact div ul > li:nth-child(5) {border-bottom:2px solid #ffc965; clear: both; height: 60px; line-height: 60px; margin: 10px 0; padding: 0 0 0 30px}
.writeContact div textarea{width: 92%; margin: 10px auto; display: block; padding: 10px 5px}
.writeContact a.send{font-family: 'SB_B'; font-size:42px; text-align: right; display: block; color: #fff; margin: 10px; text-decoration: line-through; text-decoration-color: #ffc965; width: 20%; float: right;}

.active01{background: #ffc965; color:#1a1a1a !important; border: 2px solid #ffc965; font-weight: bold; transition: 0.25s;}
.active02{background: #ffc965; color:#1a1a1a !important; border: 2px solid #ffc965; font-weight: bold; transition: 0.25s;}

#toggle{display: none; position: fixed; top: 0; left:0; width: 100%; height:100vh; background: rgba(0,0,0,0.8); z-index: 10000000;}
#toggle ul{width:80%; margin:230px auto 0;}
#toggle ul li{width:100%; margin:30px 0 0 0;}
#toggle ul li a{font-family: 'SB_B'; color:#fff; font-size: 100px; background-size:0 2px; transition: background-size 0.5s;}
#toggle ul li a:hover {background-size: 100% 2px; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: left bottom;}


@media only screen and (max-width: 1600px) {
    #toggle ul li a{font-size: 72px;}
    #visual p{font-size:155px; top: 350px;}
    #animate p:nth-child(1){font-size: 22px; top: 260px;}
    #animate p:nth-child(2){font-size: 28px; top: 185px;}
    #animate p:nth-child(3){font-size: 16px; top: 150px;}
    #animate p:nth-child(4){font-size: 14px; top: 250px;}
    #animate p:nth-child(5){font-size: 28px; top: 210px;}
    #animate p:nth-child(6){font-size: 28px; top: 150px;}
    #animate p:nth-child(7){font-size: 155px; top: 350px; width: 100%; letter-spacing: -7px;}
    #animate p:nth-child(8){font-size: 16px; top: 650px;}
    #animate p:nth-child(9){font-size: 28px; top: 550px;}
    #animate p:nth-child(10){font-size: 22px; top: 630px;}
    #animate p:nth-child(11){font-size: 22px; top: 590px;}
    #animate p:nth-child(12){font-size: 42px; top: 670px;}
    #animate p:nth-child(13){font-size: 28px; top: 530px;}
    .content_wrap .intro{padding: 100px 0 10px;}
    .content_wrap .intro p{font-size: 60px;}
    .content_wrap .intro .line{width: 120%;}
    .content_wrap .intro span{font-size: 16px; width: 60%;}
    .content_wrap p.fastLink{width:16%; font-size: 16px !important;}
    .flow{padding: 70px 0 90px !important;}
    .animated-title{padding:10px 0 95px; font-size: 70px;}
    .contactWrap strong{font-size:120px}
    .contactWrap a >span{font-size:18px;}
    .copyright ul li{width:10%;}
    .copyright ul.info{margin: 80px 0 0 10%;}
    .flow{padding: 100px 0 100px}
    
    #history ul li div p.business span:nth-child(1){padding:0 20px 0 0;}
    #history ul li div p.business span{padding:0 20px}
    
}
@media only screen and (max-width: 1200px) {
    header > .headerWrap > ul{width:50%;}
    #visual span{padding-top: 450px; font-size: 26px;}
    #visual p{font-size:80px; top: 350px;}
    #animate p:nth-child(1){font-size: 20px; top: 260px;}
    #animate p:nth-child(2){font-size: 26px; top: 185px;}
    #animate p:nth-child(3){font-size: 14px; top: 150px;}
    #animate p:nth-child(4){font-size: 13px; top: 250px;}
    #animate p:nth-child(5){font-size: 26px; top: 210px;}
    #animate p:nth-child(6){font-size: 26px; top: 150px;}
    #animate p:nth-child(7){font-size: 80px; top: 350px; width: 100%; letter-spacing: -7px;}
    #animate p:nth-child(8){font-size: 14px; top: 650px;}
    #animate p:nth-child(9){font-size: 26px; top: 550px;}
    #animate p:nth-child(10){font-size: 20px; top: 630px;}
    #animate p:nth-child(11){font-size: 20px; top: 590px;}
    #animate p:nth-child(12){font-size: 40px; top: 670px;}
    #animate p:nth-child(13){font-size: 26px; top: 530px;}
    .writeContact div ul > li input{width:60%}
    .content_wrap img{height: 590px;}
    .content_wrap .intro p{font-size: 48px}
    .content_wrap p.fastLink{width: 30%; margin: 40px 0 0 0;}
    .content_wrap p.fastLink a img{height: 10px;}
    
    .animated-title{font-size: 60px;}
    .flow {padding: 70px 0 75px !important;}
    
    #slideWrap{padding: 320px 0;}
    .swiper-slide > div h2{font-size: 20px;}
    .swiper-slide > div p{font-size: 16px;}
    .slideStory .swiper-slide p{font-size:30px !important;}
    .slideStory .swiper-slide span{font-size: 14px;}
    
    #patrner h1{font-size: 48px;}
    #patrner ul li{height: 50px;}
    
    .contactWrap strong {font-size: 80px;}
    .contactWrap a{width:25%; margin: 50px 0 0 -12.5%; line-height: 40px;}
    .contactWrap a >span{    padding: 5px 15px;}
    .copyright ul.info{width:45%;}
    .copyright ul li{width:22%;}
    .copyright ul.info{width:55%;}
    
    #about .aboutWrap p{width:50%;}
    #about .aboutWrap img{margin: 30px 0; width: 100%;}
    
    #history ul li p.business{height:100px;}
    #history ul li p.business span{font-size: 22px}
    #history ul li p.business span a{font-size: 22px}
    
    .infoContact h3{font-size:42px;}
    .infoContact p{font-size:16px;}
    .writeContact div h4{font-size:26px;}
    .writeContact div ul > li span{font-size:16px;}
    .writeContact a.send{font-size:26px;}
    
    .mySwiper2 .swiper-slide img{width:80%;}
    .slideStory .swiper-slide p{font-size:22px;}
    .slideStory .swiper-slide span{width: 75%;}
    .swiper-container{height:485px;}
    
}

@media only screen and (max-width: 780px) {
    #toggle ul li{margin:20px 0 0 0;}
    #toggle ul li a{font-size: 60px;}
    .headerWrap{width:90%;}
    header > .headerWrap > ul{width:60%;}
    header > .headerWrap > ul > li > a{font-size:15px;}
    .menu-trigger{height:30px;}
    .menu-trigger span:nth-of-type(2){top:18px;}
    .menu-trigger.active span:nth-of-type(3){bottom:-14px !important;}
    .logo > a > img{width: 150px; margin: 30px 0 0 0;}
    #visual span {padding-top: 460px;}
    #visual p{font-size:75px; top: 350px;}
    #animate p:nth-child(1){font-size: 18px; top: 260px;}
    #animate p:nth-child(2){font-size: 22px; top: 185px;}
    #animate p:nth-child(3){font-size: 12px; top: 150px;}
    #animate p:nth-child(4){font-size: 11px; top: 250px;}
    #animate p:nth-child(5){font-size: 22px; top: 210px;}
    #animate p:nth-child(6){font-size: 22px; top: 150px;}
    #animate p:nth-child(7){font-size: 80px; top: 350px; width: 100%; letter-spacing: -7px;}
    #animate p:nth-child(8){font-size: 12px; top: 650px;}
    #animate p:nth-child(9){font-size: 22px; top: 550px;}
    #animate p:nth-child(10){font-size: 18px; top: 630px;}
    #animate p:nth-child(11){font-size: 18px; top: 590px;}
    #animate p:nth-child(12){font-size: 28px; top: 670px;}
    #animate p:nth-child(13){font-size: 22px; top: 530px;}
    
    .content_wrap .intro{padding: 30px 0 0 0}
    .content_wrap img{display: none;}
    .content_wrap .intro p{padding: 0; text-align: center;}
    .content_wrap .intro span{padding: 0; width: 100%; text-align: center; line-height: 20px;}
    .content_wrap .intro .line{display: none;}
    .content_wrap p.fastLink{display: none;}
    
    .animated-title{font-size: 44px;}
    .flow {padding: 50px 0 60px !important;}
    
    #slideWrap{padding: 150px 0;}
    .swiper-slide:nth-child(2n) {margin: 45px 0 0 0;}
    
    #patrner{margin: 40px auto 150px;}
    #patrner h1{font-size: 36px}
    #patrner ul li{width: 32%;}
    #patrner ul li:nth-child(4n){margin: 5px 1% 5px 0;}
    
    .contactWrap{padding: 20px 0 10px;}
    .contactWrap strong{font-size: 55px; top: 60px;}
    .contactWrap p{font-size: 15px}
    .contactWrap a{width: 30%; margin: 50px 0 0 -15%; height: 54px;}
    .contactWrap a >span {font-size: 16px;}
    .copyright ul li {width: 20%;}
    .copyright ul li a{font-size: 13px;}
    .copyright ul.info{width:100%; margin: 65px 0 0 10%;}
    .copyright p.adress{margin: 100px auto 0; float: none; width: 80%; line-height: 15px;}
    
    #about .aboutWrap{width:90%;}
    #about .aboutWrap h1{font-size:42px;}
    #about .aboutWrap p{width:80%; font-size: 16px;}
    
    #history h2{font-size: 46px;}
    #history ul{width:90%;}
    #history ul li{padding:35px 0;}
    #history ul li div{width:80%; padding: 0 0 0 130px;}
    #history ul li h3{font-size: 22px;}
    #history ul li p.business span{font-size: 18px; padding: 5px 25px 0 0;}
    #history ul li p.business span a{font-size: 18px;}
    
    #story h2{font-size: 36px;}
    #story p{width:80%; margin: 0 auto; font-size: 16px;}
    #contact{width:100%;}
    .infoContact{width:90%; position: relative; top: 30px; left: 50%; margin: 0 0 0 -45%;}
    .infoContact .privacy{width:100%; margin: 20px 0; box-sizing: border-box; font-size: 12px;}
    .writeContact{width: 100%; margin: 50px 0 0 0;}
    .writeContact div{margin: 70px 0;}
    .writeContact a.send{font-size:40px;}
    .swiper{height:430px}
    .slideStory{margin:30px auto 0;}
    .mySwiper2 .swiper-slide img{height:430px;}
    .slideStory .swiper-slide h3{font-size:26px !important;}
    .slideStory .swiper-slide p{font-size:18px !important;}
    .slideStory .swiper-slide .slideText{top:-40px;}
    .swiper-container{width:90%; margin: 20px auto !important;}
}

@media only screen and (max-width: 460px) {
    #toggle ul li a{font-size: 34px;}
    header{height:50px; line-height: 50px;}
    .logo > a > img{width: 130px;}
    header > .headerWrap > ul{width:50%;}
    header > .headerWrap > ul > li{display: none;}
    header > .headerWrap > ul > li:last-child{display: block; width:10%;}
    header > .headerWrap > ul > li > a > img{width:20px;}
    #visual_wrap{height:450px;}
    #visual{height:450px;}
    #visual p{font-size: 36px; top: 210px; letter-spacing: -2px;}
    #animate p:nth-child(1){font-size: 14px; top: 130px;}
    #animate p:nth-child(2){font-size: 18px; top: 85px;}
    #animate p:nth-child(3){font-size: 12px; top: 180px;}
    #animate p:nth-child(4){font-size: 11px; top: 150px;}
    #animate p:nth-child(5){font-size: 18px; top: 110px;}
    #animate p:nth-child(6){font-size: 16px; top: 50px;}
    #animate p:nth-child(7){font-size: 36px; top: 210px; width: 100%; letter-spacing: -2px;}
    #animate p:nth-child(8){font-size: 12px; top: 295px;}
    #animate p:nth-child(9){font-size: 18px; top: 290px;}
    #animate p:nth-child(10){font-size: 13px; top: 330px;}
    #animate p:nth-child(11){font-size: 13px; top: 390px; left:22%}
    #animate p:nth-child(12){font-size: 20px; top: 370px;}
    #animate p:nth-child(13){font-size: 16px; top: 230px; left: 84%;}
    #visual span {padding-top: 260px; font-size:14px;}
    .content_wrap{width:90%;}
    .content_wrap .intro p{font-size: 24px;}
    .content_wrap .intro span{font-size: 13px;}
    .contactWrap strong{font-size: 40px; top: 40px;}

    .animated-title{font-size: 36px; -webkit-text-stroke:1px #cacaca}
    .flow {padding: 50px 0 !important;}
    
    #slideWrap{width:90%; padding: 80px 0;}
    .swiper{height:510px;}
    .swiper-slide:nth-child(2n){margin: 0;}
    .swiper-slide img{height:430px;}
    .swiper-slide > div h2{font-size:16px;}
    .swiper-slide > div p{font-size:12px;}
    #patrner{width:90%;}
    #patrner h1 {font-size: 24px;}
    #patrner ul li {width: 49%; height: 30px; line-height: 30px;}
    #patrner ul li img{margin: 5px auto;}
   
    .contactWrap{width:90%;}
    .copyright ul{width:90%; margin:5px auto 0;}
    .copyright ul li{width: 33%;}
    .copyright ul.info li{width:50%; height: 35px; line-height: 21px;}
    .contactWrap a{width:50%; margin:30px 0 0 -25%;}
    .copyright ul.info {width: 90%; margin: 0 auto;}
    .copyright ul.info li{width:100%; height:25px; line-height: 25px;}
    .copyright p.adress{width:90%;}
    
    #about .aboutWrap h1{font-size: 28px;}
    #about .aboutWrap p{width:90%; font-size:14px; line-height: 20px;}
    #about .aboutWrap img{width: 100%;}
    
    #history{margin:150px 0 20px}
    #history h2{font-size: 28px;}
    #history ul li h3{width:100%; font-size: 18px;}
    #history ul li h3:after{display: none;}
    #history ul li div{width:100%; margin: 0 auto; padding: 0;}
    #history ul li div p{font-size:14px}
    #history ul li p.business{height:30px;}
    #history ul li p.business span{font-size: 14px; padding: 7px 15px 0 0;}
    #history ul li p.business span a{font-size: 14px;}
    
    .infoContact h3{font-size: 26px;}
    .infoContact p{font-size:14px; width: 100%;}
    .writeContact a.send{font-size: 26px;}
    .writeContact div h4{font-size: 20px; padding: 0 0 0 10px;}
    .writeContact div ul.infoQu > li{padding: 0 0 0 10px; font-size: 14px;}
    .writeContact div ul > li span{font-size:14px; margin: 0 1.9%;}
    .writeContact div.seleckBox02{margin: 150px 0 0 0;}
    .writeContact div ul > li:nth-child(5){font-size: 14px; padding: 0 0 0 10px;}
    .writeContact div textarea{height: 100px;}
    .writeContact div ul > li input{width: 60%;}
    
    #story h2{font-size:26px;}
    #story p{width:90%; font-size: 14px !important; padding: 0 10px;}
    #story img{width:100%; top: 0; position: absolute; height: 200px}
    #story img.basicBg{display: none;}
    .slideStory2 .swiper-slide{height:150px !important;}
    .slideStory .swiper-slide .slideText{top:70px;}
    .slideStory .swiper-slide h3{font-size:18px; padding: 10px;}
    .slideStory .swiper-slide span{padding: 0 10px; width: 95%; font-size: 12px;}
    .slideStory2{height:200px}
}