#welcome { padding-top: 50px; }
#welcome .img { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#welcome .img > img { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#welcome .cnt { display: block; position: absolute; width: 460px; height: auto; left: calc(50% - 230px); top: calc(50% - 70px); text-align: center; }
#welcome .cnt .sbtw { position: relative; }
#welcome .cnt .txt { font-size: 20px; display: block; position: relative; width: 100%; height: auto; line-height: 30px; color: white; font-weight: bold; text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 5px; }
#welcome .cnt .txt p { font-size: 20px; line-height: 30px; }

@media (max-width: 1460px) { #welcome .ctr { width: calc(100% - 80px); margin: 0 40px; } }
@media (max-width: 1200px) { #welcome .ctr { width: calc(100% - 60px); margin: 0 30px; } }
@media (max-width: 1080px) { #welcome .ctr { width: 100%; margin: 0; }
  #welcome .img { width: 1000px; margin-left: calc(50% - 500px); } }
@media (max-width: 640px) { #welcome .img { width: 640px; margin-left: calc(50% - 320px); }
  #welcome .cnt { position: relative; width: 81%; left: auto; top: auto; margin: 30px auto 0 auto; }
  #welcome .cnt .sbtw { position: absolute; left: 0; top: -180px; }
  #welcome .cnt .txt { font-size: 16px; color: #444444; font-weight: normal; text-align: left; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; }
  #welcome .cnt .txt .inline { display: inline; }
  #welcome .cnt .txt p { font-size: 16px; line-height: 28px; text-align: left; } }
@media (max-width: 500px) { #welcome .cnt { width: 100%; padding: 0 30px; } }
@media (max-width: 420px) { #welcome .cnt { padding: 0 20px; }
  #welcome .cnt .txt p { font-size: 16px; line-height: 25px; } }
#form { padding-top: 60px; padding-bottom: 30px; }
#form .ctr { max-width: 800px; }
#form .bk { margin-bottom: 40px; }
#form .bk:last-child { margin-bottom: 0; }
#form .bk p.formtit { font-size: 26px; line-height: 34px; font-weight: bold; padding-bottom: 10px; }
#form .bk p.note { font-size: 14px; line-height: 20px; text-align: center; }
#form .bk p span { display: inline-block; }
#form .bk > div { display: block; position: relative; margin-top: 10px; }
#form .bk > div label { position: relative; display: block; width: 100%; border: 1px solid #e7e8eb; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 7px 7px 7px 35px; cursor: pointer; -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; }
#form .bk > div input[type=checkbox] { position: absolute; display: block; width: 13px; height: 13px; left: 10px; top: 10px; }
#form .bk > div input[type=checkbox]:focus, #form .bk > div input[type=checkbox]:link, #form .bk > div input[type=checkbox]:visited, #form .bk > div input[type=checkbox]:hover, #form .bk > div input[type=checkbox]:active { outline: medium none !important; }
#form .bk > div:hover label, #form .bk > div:active label { border: 1px solid #b8bcc4; }
#form .bk > div.active label, #form .bk > div.active:link label, #form .bk > div.active:visited label, #form .bk > div.active:hover label, #form .bk > div.active:active label { background: rgba(137, 144, 158, 0.2); }
#form .bk > div.active.other label { padding-bottom: 50px; }
#form .bk > div.active.other input[type=text] { display: block; }
#form .bk > div.other input[type=text] { display: block; display: none; position: absolute; left: 35px; top: 30px; width: calc(100% - 50px); width: -webkit-calc(100% - 50px); width: -moz-calc(100% - 50px); width: -o-calc(100% - 50px); background: none; }
#form .bk > label { font-size: 20px; line-height: 28px; font-weight: bold; color: #2b3750; }
#form .bk > label br { display: none; }
#form .bk > label span { background: #b8bcc4; display: inline-block; font-size: 14px; line-height: 16px; font-weight: normal; color: white; padding: 3px 8px; margin-left: 5px; margin-bottom: 5px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; vertical-align: middle; }
#form .bk input[type=text] { display: block; width: 100%; font-size: 18px; line-height: 25px; padding-top: 10px; padding-bottom: 5px; border-top: none; border-right: none; border-bottom: 1px solid #89909e; border-left: none; }
#form .bk input[type=text]:focus, #form .bk input[type=text]:link, #form .bk input[type=text]:visited, #form .bk input[type=text]:hover, #form .bk input[type=text]:active { outline: medium none !important; }
#form .bk .btn { display: block; position: relative; width: 250px; padding-left: 25px; margin: 0 auto; }

#form-end { padding-top: 60px; padding-bottom: 30px; display: none; }
#form-end .ctr { max-width: 800px; }
#form-end .bk p { text-align: center; }
#form-end .bk p.formtit { font-size: 26px; line-height: 34px; font-weight: bold; padding-bottom: 10px; }
#form-end .bk p span { display: inline-block; }

@media (max-width: 900px) { #form .ctr { max-width: 90%; } }
@media (max-width: 640px) { #form { padding-top: 30px; }
  #form .ctr { max-width: 81%; }
  #form .bk p { font-size: 16px; line-height: 25px; }
  #form .bk p.formtit { font-size: 22px; line-height: 30px; }
  #form .bk > div label { font-size: 16px; }
  #form .bk > label { font-size: 18px; line-height: 25px; }
  #form .bk input[type=text] { font-size: 16px; line-height: 22px; } }
@media (max-width: 500px) { #form .ctr { width: 100%; max-width: none; padding: 0 30px; } }
@media (max-width: 420px) { #form .ctr { padding: 0 20px; }
  #form .bk > label br { display: block; } }
#wrap { padding-top: 90px; }

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