#vision { padding-top: 50px; }
#vision .ctr { overflow: hidden; }
#vision .kv { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; overflow: hidden; }
#vision .kv > img { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#vision .kv .slg { display: block; position: absolute; width: 480px; height: 480px; left: calc(50% - 240px); top: 0; }
#vision .kv .slg > img { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#vision .btns { display: block; position: absolute; width: 100%; height: auto; left: 0; bottom: 50px; text-align: center; }
#vision .btns .btn { width: 220px; padding: 11px 25px 12px 45px; border-width: 2px; border-style: solid; margin-left: 8px; }
#vision .btns .btn, #vision .btns .btn:link, #vision .btns .btn:visited { background: none; border-color: white; color: white; }
#vision .btns .btn:hover, #vision .btns .btn:active { background: #fca311; border-color: #fca311; color: white; }
#vision .btns .btn:first-child { margin-left: 0; }

@media (max-width: 1460px) { #vision .ctr { width: calc(100% - 80px); margin: 0 40px; }
  #vision .kv { width: 1380px; margin-left: calc(50% - 690px); } }
@media (max-width: 1200px) { #vision .ctr { width: calc(100% - 60px); margin: 0 30px; }
  #vision .kv { width: 1200px; margin-left: calc(50% - 600px); }
  #vision .kv .slg { width: 400px; height: 400px; left: calc(50% - 200px); } }
@media (max-width: 768px) { #vision { padding-top: 40px; }
  #vision .ctr { width: 100%; margin: 0; }
  #vision .kv { width: 1000px; margin-left: calc(50% - 500px); }
  #vision .kv .slg { width: 400px; height: 400px; left: calc(50% - 200px); }
  #vision .btns { position: relative; left: auto; bottom: auto; margin: 0 auto; padding-top: 30px; }
  #vision .btns .btn { width: 200px; padding: 9px 5px 9px 25px; }
  #vision .btns .btn, #vision .btns .btn:link, #vision .btns .btn:visited { background: #14213d; border-color: #14213d; color: #b8bcc4; }
  #vision .btns .btn:hover, #vision .btns .btn:active { background: #fca311; border-color: #fca311; color: white; } }
@media (max-width: 640px) { #vision { padding-top: 0px; }
  #vision .kv { width: 900px; margin-left: calc(50% - 450px); }
  #vision .kv .slg { width: 350px; height: 350px; left: calc(50% - 175px); } }
@media (max-width: 500px) { #vision .kv { width: 768px; margin-left: calc(50% - 384px); }
  #vision .kv .slg { width: 300px; height: 300px; left: calc(50% - 150px); }
  #vision .btns { padding-top: 5px; }
  #vision .btns .btn { display: block; width: 250px; margin: 15px auto 0 auto; }
  #vision .btns .btn:first-child { margin-left: auto; } }
@media (max-width: 420px) { #vision .kv { width: 640px; margin-left: calc(50% - 320px); }
  #vision .kv .slg { width: 250px; height: 250px; left: calc(50% - 125px); }
  #vision .btns .btn { width: 220px; } }
#mission { padding-top: 100px; }
#mission .ctr { background: #f2f2f2; max-width: 1120px; overflow: hidden; }
#mission .kv { background: black; display: block; position: relative; width: 680px; height: auto; margin-left: calc(100% - 680px); }
#mission .kv > img { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#mission .kv:after { content: ""; background-repeat: no-repeat; background-size: 100% 100%; background-position: left center; background-image: url("../images/gradienth.png"); display: block; position: absolute; width: 200px; height: 100%; left: 0; top: 0; pointer-events: none; }
#mission .cnt { display: block; position: absolute; width: 360px; height: auto; left: calc(28% - 180px); top: 45px; text-align: center; }
#mission .cnt .txt { display: block; position: relative; width: 100%; height: auto; line-height: 30px; }

@media (max-width: 1320px) { #mission .ctr { width: 1032px; }
  #mission .cnt { left: calc(26% - 180px); } }
@media (max-width: 1200px) { #mission .ctr { width: 982px; }
  #mission .cnt { left: calc(24% - 180px); } }
@media (max-width: 1080px) { #mission .ctr { width: 470px; margin: 0 auto; }
  #mission .kv { width: 100%; margin-left: auto; margin-right: auto; }
  #mission .kv:after { background-position: bottom center; background-image: url("../images/gradientv.png"); width: 100%; height: 200px; left: 0; top: auto; bottom: 0; }
  #mission .cnt { position: relative; left: auto; top: auto; margin: -60px auto 50px auto; } }
@media (max-width: 768px) { #mission { padding-top: 90px; } }
@media (max-width: 640px) { #mission { padding-top: 80px; }
  #mission .ctr { width: 420px; }
  #mission .kv:after { height: 150px; } }
@media (max-width: 500px) { #mission .ctr { width: 360px; }
  #mission .cnt { width: 90%; }
  #mission .cnt .txt { font-size: 16px; line-height: 25px; } }
@media (max-width: 420px) { #mission .ctr { width: 100%; }
  #mission .cnt .txt .inline { display: inline; } }
#learning { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7)); background-image: -webkit-linear-gradient(#ffffff, #f7f7f7); background-image: -moz-linear-gradient(#ffffff, #f7f7f7); background-image: -o-linear-gradient(#ffffff, #f7f7f7); background-image: linear-gradient(#ffffff, #f7f7f7); padding-top: 50px; padding-bottom: 70px; }
#learning .ctr { max-width: 1120px; text-align: center; }
#learning .bk { background: black; display: inline-block; position: relative; width: 100%; height: auto; max-width: 470px; vertical-align: top; }
#learning .bk .img { display: block; position: relative; width: 100%; height: auto; overflow: hidden; }
#learning .bk .img img { display: block; position: relative; width: 100%; height: auto; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; }
#learning .bk .btn { display: block; position: absolute; width: 250px; left: calc(50% - 125px); bottom: -20px; }
#learning .bk:first-child { margin-right: 90px; }
#learning .bk:first-child:after { background: #e5e5e5; content: ""; display: block; position: absolute; width: 1px; height: 220px; right: -46px; top: 0; }
#learning .bk:hover .img img, #learning .bk:active .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; }
#learning .bk:hover .btn, #learning .bk:active .btn { background: #fca311; border-color: #fca311; color: white; }

@media (max-width: 1200px) { #learning .bk:first-child { margin-right: 40px; }
  #learning .bk:first-child:after { display: none; } }
@media (max-width: 1080px) { #learning .bk { display: block; margin: 0 auto; }
  #learning .bk:first-child { margin-right: auto; margin-bottom: 60px; } }
@media (max-width: 1000px) { #learning .bk .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }
  #learning .bk:hover .img img, #learning .bk:active .img img { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } }
@media (max-width: 640px) { #learning { padding-bottom: 80px; }
  #learning .bk { max-width: 420px; }
  #learning .bk .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }
  #learning .bk:hover .img img, #learning .bk:active .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); }
  #learning .bk:first-child { margin-bottom: 70px; }
  #learning .bk .btn { bottom: -25px; } }
@media (max-width: 500px) { #learning .bk { max-width: 360px; }
  #learning .bk .btn { width: 220px; left: calc(50% - 110px); } }
@media (max-width: 420px) { #learning .bk { max-width: 300px; } }
#achievement { padding-top: 50px; padding-bottom: 30px; }
#achievement .ctr { text-align: center; }
#achievement .sbt { margin-bottom: 30px; }
#achievement .bks { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#achievement .bks .bk { display: inline-block; position: relative; width: 100%; height: auto; max-width: 320px; vertical-align: top; margin-left: 30px; }
#achievement .bks .bk img { display: block; position: relative; width: 100%; height: auto; }
#achievement .bks .bk:first-child { margin-left: 0; }

@media (max-width: 1080px) { #achievement .bks .bk { margin-left: 0; }
  #achievement .bks .bk:first-child { margin-left: auto; } }
@media (max-width: 1000px) { #achievement .bks .bk { margin: -15px auto 0 auto; } }
@media (max-width: 640px) { #achievement { padding-top: 40px; } }
@media (max-width: 420px) { #achievement .bks .bk { max-width: 300px; } }
#movie { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f7f7f7), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(#f7f7f7, #ffffff); background-image: -moz-linear-gradient(#f7f7f7, #ffffff); background-image: -o-linear-gradient(#f7f7f7, #ffffff); background-image: linear-gradient(#f7f7f7, #ffffff); padding-top: 70px; }
#movie .ctr { max-width: 1140px; }
#movie .container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
#movie .container iframe, #movie .container object, #movie .container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media (max-width: 1200px) { #movie .ctr { width: calc(100% - 60px); margin: 0 30px; } }
@media (max-width: 640px) { #movie .ctr { width: 100%; margin: 0; } }
#testimony { padding-top: 100px; padding-bottom: 30px; }
#testimony .bg { background: #f7f7f7; content: ""; display: block; position: absolute; width: 100%; height: 60%; left: 0; bottom: 0; }
#testimony .ctr { max-width: 1160px; }
#testimony .sbt { margin-bottom: 55px; }
#testimony .crs { display: block; position: relative; width: 100%; height: auto; }
#testimony .crs .slick-prev { background: url(../images/fucicprev.png) no-repeat center; position: absolute; width: 40px; height: 40px; left: -30px; top: 125px; text-indent: -9999px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#testimony .crs .slick-prev, #testimony .crs .slick-prev:link, #testimony .crs .slick-prev:visited { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
#testimony .crs .slick-prev:hover, #testimony .crs .slick-prev:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
#testimony .crs .slick-next { background: url(../images/fucicnext.png) no-repeat center; position: absolute; width: 40px; height: 40px; right: -30px; top: 125px; text-indent: -9999px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#testimony .crs .slick-next, #testimony .crs .slick-next:link, #testimony .crs .slick-next:visited { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
#testimony .crs .slick-next:hover, #testimony .crs .slick-next:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
#testimony .crs .slick-dots { position: relative; bottom: auto; width: 90vw; height: auto; margin-top: 10px; margin-left: calc(50% - 45vw); }
#testimony .crs .slick-dots li button:before { color: #14213d !important; }
#testimony .crs .bk { background: black; display: block; position: relative; width: 100%; height: auto; max-width: 250px; margin: 0 auto 30px auto; }
#testimony .crs .bk .name { display: block; position: absolute; width: 150px; height: auto; left: 10px; top: 10px; font-size: 26px; line-height: 34px; text-align: left; color: white; font-weight: bold; text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 5px; }
#testimony .crs .bk .img { display: block; position: relative; width: 100%; height: auto; overflow: hidden; }
#testimony .crs .bk .img img { display: block; position: relative; width: 100%; height: auto; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; }
#testimony .crs .bk .btn { display: block; position: absolute; width: 200px; padding: 7px 12px 7px 7px; font-size: 16px; line-height: 22px; left: calc(50% - 100px); bottom: -20px; }
#testimony .crs .bk:hover .img img, #testimony .crs .bk:active .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; }
#testimony .crs .bk:hover .btn, #testimony .crs .bk:active .btn { background: #fca311; border-color: #fca311; color: white; }

@media (max-width: 1280px) { #testimony .ctr { max-width: 870px; } }
@media (max-width: 1000px) { #testimony .ctr { max-width: 580px; }
  #testimony .crs .bk .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }
  #testimony .crs .bk:hover .img img, #testimony .crs .bk:active .img img { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } }
@media (max-width: 768px) { #testimony { padding-top: 90px; } }
@media (max-width: 640px) { #testimony { padding-top: 80px; }
  #testimony .ctr { max-width: 300px; } }
@media (max-width: 420px) { #testimony .crs .slick-prev { left: -15px; }
  #testimony .crs .slick-next { right: -15px; } }
@media (max-width: 360px) { #testimony .ctr { max-width: 290px; }
  #testimony .crs .bk { max-width: 240px; } }
#participate { padding-top: 80px; padding-bottom: 30px; }
#participate .ctr { max-width: 1120px; }
#participate .crs { display: block; position: relative; width: 100%; height: auto; }
#participate .crs .slick-prev { background: url(../images/fucicprevw.png) no-repeat center; position: absolute; width: 40px; height: 40px; left: 0; top: 50%; text-indent: -9999px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#participate .crs .slick-prev, #participate .crs .slick-prev:link, #participate .crs .slick-prev:visited { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
#participate .crs .slick-prev:hover, #participate .crs .slick-prev:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
#participate .crs .slick-next { background: url(../images/fucicnextw.png) no-repeat center; position: absolute; width: 40px; height: 40px; right: 0; top: 50%; text-indent: -9999px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#participate .crs .slick-next, #participate .crs .slick-next:link, #participate .crs .slick-next:visited { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
#participate .crs .slick-next:hover, #participate .crs .slick-next:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
#participate .crs .slick-dots { position: absolute; width: 100%; height: 30px; top: calc(50% + 40px); }
#participate .crs .slick-dots li button:before { color: white !important; }
#participate .crs .bk { background: black; display: block; position: relative; width: 100%; height: auto; }
#participate .crs .bk img { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#participate .sbtw { position: absolute; left: 0; top: calc(50% - 70px); }
#participate .btns { display: block; position: relative; width: 100%; height: auto; margin: -25px auto 0 auto; text-align: center; }
#participate .btns .btn { display: inline-block; position: relative; width: 210px; padding-top: 12px; padding-bottom: 12px; margin: 0 3px; }

@media (max-width: 1200px) { #participate .ctr { width: calc(100% - 60px); margin: 0 30px; } }
@media (max-width: 1000px) { #participate .crs .slick-dots { top: auto; bottom: 10px; }
  #participate .btns { margin-top: 0; }
  #participate .btns .btn { width: 200px; margin: 20px 4px 0 4px; } }
@media (max-width: 940px) { #participate .sbtw { top: calc(50% - 110px); }
  #participate .btns { width: 480px; } }
@media (max-width: 640px) { #participate .ctr { width: 100%; margin: 0; }
  #participate .sbtw { top: 80px; }
  #participate .crs { width: 640px; height: 230px; margin-left: calc(50% - 320px); }
  #participate .crs .slick-prev { left: calc(325px - 50vw); }
  #participate .crs .slick-next { right: calc(325px - 50vw); } }
@media (max-width: 500px) { #participate .btns { width: 100%; padding-top: 5px; }
  #participate .btns .btn { display: block; width: 250px; margin: 15px auto 0 auto; } }
@media (max-width: 420px) { #participate .btns .btn { width: 220px; } }
#wrap { padding-top: 90px; }

@media (max-width: 640px) { #wrap { padding-top: 68px; } }