.steps { padding-top: 70px; padding-bottom: 70px; }
.steps .ctr { max-width: 1020px; }
.steps .img { background: black; display: block; position: absolute; width: 400px; height: 400px; top: 85px; overflow: hidden; }
.steps .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=90); opacity: 0.9; }
.steps .img .sbtw { position: absolute; left: 0; top: calc(50% - 40px); }
.steps .bks { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
.steps .bks .bk { background: white; display: block; position: relative; width: 100%; height: auto; text-align: center; padding: 15px; font-size: 22px; line-height: 30px; font-weight: bold; margin-bottom: 25px; }
.steps .bks .bk .n { display: inline-block; margin-right: 5px; }
.steps .bks .bk a { font-weight: bold; display: inline-block; margin: 0 3px; }
.steps .bks .bk a, .steps .bks .bk a:link, .steps .bks .bk a:visited, .steps .bks .bk a:hover, .steps .bks .bk a:active { color: #fca311; text-decoration: underline; }
.steps .bks .bk:after { content: ""; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; display: block; position: absolute; width: 40px; height: 20px; left: calc(50% - 20px); bottom: -12px; }
.steps .bks .bk:last-child { margin-bottom: 0; }
.steps .bks .bk:last-child:after { display: none; }
.steps:hover .img img, .steps:active .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; }

#tophysical { position: absolute; width: 0; height: 0; left: 0; top: -60px; }

#toonline { position: absolute; width: 0; height: 0; left: 0; top: -60px; }

#physical { background: #f2f2f2; }
#physical .ctr { padding-left: 460px; }
#physical .img { left: 0; }
#physical .img .sbt { color: black; }
#physical .img .sbt:after { background: black; }
#physical .bks .bk { color: #7f7f7f; }
#physical .bks .bk:after { background-image: url("../images/stepsarr-physical.png"); }

#online { background: #e7e8eb; }
#online .ctr { padding-right: 460px; }
#online .img { right: 0; }
#online .bks .bk { color: #727a8b; }
#online .bks .bk:after { background-image: url("../images/stepsarr-online.png"); }

@media (max-width: 1080px) { .steps .ctr { max-width: calc(100% - 60px); }
  #physical .ctr { padding-left: 430px; }
  #online .ctr { padding-right: 430px; } }
@media (max-width: 1000px) { .steps .img { top: 78px; }
  .steps:hover .img img, .steps: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); }
  .steps .bks .bk { font-size: 20px; line-height: 28px; } }
@media (max-width: 920px) { .steps .img { position: relative; top: auto; margin: 0 auto 30px auto; }
  .steps .bks { max-width: 400px; }
  #physical .ctr { padding-left: 0; }
  #physical .img { left: auto; }
  #online .ctr { padding-right: 0; }
  #online .img { right: auto; } }
@media (max-width: 768px) { #tophysical { top: -50px; }
  #toonline { top: -50px; } }
@media (max-width: 640px) { #tophysical { top: -40px; }
  #toonline { top: -40px; } }
@media (max-width: 560px) { .steps .ctr { max-width: 360px; }
  .steps .img { width: 360px; height: 360px; }
  .steps .bks .bk { font-size: 18px; line-height: 25px; } }
@media (max-width: 500px) { .steps .ctr { max-width: 320px; }
  .steps .img { width: 320px; height: 320px; } }
@media (max-width: 500px) { .steps .ctr { max-width: 290px; }
  .steps .img { width: 290px; height: 290px; } }
#action { 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: 100px; padding-bottom: 50px; }
#action .ctr { max-width: 1160px; overflow: hidden; }
#action .go { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#action .go .img { background: black; display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#action .go .img > img { display: block; position: relative; width: 100%; height: auto; margin: 0 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; }
#action .go .btn { display: block; position: absolute; width: 250px; padding: 11px 25px 12px 45px; border-width: 2px; border-style: solid; left: calc(50% - 125px); top: calc(50% - 25px); }
#action .go .btn, #action .go:link .btn, #action .go:visited .btn { background: none; border-color: white; color: white; }
#action .go:hover .img img, #action .go:active .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; }
#action .go:hover .btn, #action .go:active .btn { background: #fca311; border-color: #fca311; color: white; }

@media (max-width: 1200px) { #action .ctr { width: calc(100% - 60px); margin: 0 30px; } }
@media (max-width: 1000px) { #action .ctr { width: 100%; margin: 0; }
  #action .go { width: 920px; margin-left: calc(50% - 460px); }
  #action .go .img img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }
  #action .go .btn, #action .go:link .btn, #action .go:visited .btn { background: rgba(0, 0, 0, 0.5); }
  #action .go:hover .btn, #action .go:active .btn { background: #fca311; } }
@media (max-width: 768px) { #action { padding-top: 90px; } }
@media (max-width: 640px) { #action { padding-top: 80px; } }
@media (max-width: 420px) { #action .go .btn { width: 220px; left: calc(50% - 110px); } }
#qa { padding-top: 100px; padding-bottom: 30px; }
#qa .ctr { max-width: 1160px; }
#qa .sbt { margin-bottom: 55px; }
#qa .crs { display: block; position: relative; width: 100%; height: auto; }
#qa .crs .slick-prev { background: url(../images/fucicprev.png) no-repeat center; position: absolute; width: 40px; height: 40px; left: -30px; top: 80px; 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; }
#qa .crs .slick-prev, #qa .crs .slick-prev:link, #qa .crs .slick-prev:visited { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
#qa .crs .slick-prev:hover, #qa .crs .slick-prev:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
#qa .crs .slick-next { background: url(../images/fucicnext.png) no-repeat center; position: absolute; width: 40px; height: 40px; right: -30px; top: 80px; 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; }
#qa .crs .slick-next, #qa .crs .slick-next:link, #qa .crs .slick-next:visited { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
#qa .crs .slick-next:hover, #qa .crs .slick-next:active { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
#qa .crs .slick-dots { position: relative; bottom: auto; width: 80vw; height: auto; margin-top: -10px; margin-left: calc(50% - 40vw); }
#qa .crs .slick-dots li button:before { color: #14213d !important; }
#qa .crs .bk { display: block; position: relative; width: 100%; height: auto; max-width: 320px; margin: 0 auto 20px auto; text-align: left; }
#qa .crs .bk .quz { display: block; position: relative; width: 100%; height: auto; font-size: 22px; line-height: 30px; font-weight: bold; margin: 0 auto; padding-bottom: 10px; }
#qa .crs .bk .ans { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; text-align: justify; }
#qa .crs .bk .ans a { font-weight: bold; display: inline-block; margin: 0 3px; }
#qa .crs .bk .ans a, #qa .crs .bk .ans a:link, #qa .crs .bk .ans a:visited, #qa .crs .bk .ans a:hover, #qa .crs .bk .ans a:active { color: #fca311; text-decoration: underline; }

@media (max-width: 1280px) { #qa .ctr { max-width: 1040px; }
  #qa .crs .bk { max-width: 300px; } }
@media (max-width: 1160px) { #qa .ctr { max-width: 700px; } }
@media (max-width: 800px) { #qa .ctr { max-width: 350px; }
  #qa .crs .slick-dots { margin-top: 0px; }
  #qa .crs .bk { min-height: 150px; } }
@media (max-width: 768px) { #qa { padding-top: 90px; } }
@media (max-width: 640px) { #qa { padding-top: 80px; } }
@media (max-width: 460px) { #qa .crs .slick-prev { left: -20px; }
  #qa .crs .slick-next { right: -20px; } }
@media (max-width: 420px) { #qa .ctr { max-width: 290px; }
  #qa .crs .slick-prev { left: -15px; }
  #qa .crs .slick-next { right: -15px; }
  #qa .crs .bk { max-width: 240px; }
  #qa .crs .bk .quz { font-size: 20px; line-height: 28px; }
  #qa .crs .bk .ans { font-size: 16px; line-height: 22px; } }
#wrap { padding-top: 140px; }

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