@charset "utf-8";
/*
  danny 202007
  1. $Mobile
  2. $Pad
  3. $橫的版型
  4. $Pc
  5. $1025~1279
*/





/* $Mobile
--------------------------------------------------------------------------------------*/
body{ background: #fff; height: auto; }
.form-container{ width:94vw;  min-height: calc(100vh - 0px);  margin: 0 auto; box-sizing: border-box; padding: 70px 0 30px 0; font-size: 14px; line-height: 1.5em; }
.form-container a{ color: #004982; text-decoration: none; }
.form-box{ display: flex; flex-wrap: wrap; margin: 10px 0 0 0; }
.input-box{ position: relative; width: 100%; box-sizing: border-box; margin: 0 0 15px 0; }
input[type='text']{ width: 100%; height: 56px; border: 1px solid rgba(0,0,0,.16); border-radius: 4px; overflow: hidden; font-size: 1.5rem; line-height: 1.5em; box-sizing: border-box; padding: 26px 32px 10px 15px; color: rgba(0,0,0,.8); }
.input-box label{ position: absolute; top: 16px; left: 16px; font-size: 15px; color: rgba(0,0,0,.48); transition: all .4s cubic-bezier(.25,.1,.25,1);  }
.input-box.active label{ top: 8px; left: 16px; font-size: 12px;  }
.input-box.haserror input{ border-color: #e63f41; }
input:focus{ outline: none; border-color: #239de8; }
.input-row{ width: 100%; display: flex; flex-wrap: wrap; }
.input-row+.input-row{ margin: 0px 0 0 0; }
.select-wrap{ width: 100%; margin: 0 0 10px 0;  }
.select-box{ display: inline-block; width: 100%; height: 54px; overflow: hidden; border-radius: 4px; border: 1px solid rgba(0,0,0,.16); position: relative; vertical-align: middle; }
.select-box:before{ display: inline-block; content: "\e874"; font-size: 14px; font-weight: 600; color: rgba(0,0,0,.48); position: absolute; right: 20px; top: 50%; transform: translateY(-50%);  }
select{ background: transparent; width: 100%; height: 54px; padding: 0px 15px; font-size: 1.5rem;  color: #797979; line-height: 1;  border: 0;  border-radius: 0; -webkit-appearance: none; box-sizing: border-box;  position: absolute;}
select:focus{ outline: none; color: rgba(0,0,0,.8); }
.select-box.hasfocus{ outline: none; border-color: #239de8; }
.select-box.haserror{ outline: none; border-color: #E63F4E; }
.check-box{ color: rgba(0,0,0,.6); margin: 0 0 10px 0; }
.check-box input{ position: absolute; opacity: 0; }
.check-box label{ display: inline-block; line-height: 18px; font-size: 13px; box-sizing: border-box; padding-left: 56px; position: relative;  }
.check-box label:before { content: ''; display: inline-block; border-radius: 40px; height: 24px; width: 40px; margin-top: -12px; background-color: rgba(0,0,0,.16); border: 0; transition: background-color ease-out .2s; will-change: background-color; position: absolute;top: 50%; left: 0; }
.check-box label:after { content: ''; position: absolute; background-color: #fff; width: 20px; height: 20px; top: 50%; left: 2px; margin-top: -10px; border-radius: 100%; transition: left ease-out .2s; will-change: left; }
.check-box input:checked~label:before { background-color: #239de8}
.check-box input:checked~label:after { left: 18px; }
.btn-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; }
button{ font-size: 18px; height: 56px; line-height: 58px;  border-radius: 40px; padding: 0 40px; color: #fff; background: #239de8; transition: all .15s ease-out; cursor: pointer; outline: none;margin-top: 5px;  }
button:hover{ background: #1d83c2; }
.button{ display: flex; justify-content: center; align-items: center; width: 85%; font-size: 18px; height: 56px; border-radius: 40px; padding: 0 20px; color: #fff; background: #239de8; transition: all .15s ease-out; cursor: pointer; outline: none;margin-top: 5px;  position: relative; }
.button:hover{ background: #1d83c2; }
.button a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.haserror_txt{ display: block; font-size: 13px; color: #E63F4E; display: none;}
.haserror_ico{ font-size: 18px; color: #E63F4E; position: absolute; right: 16px; top: 20px; display: none;}
.haserror_ico02{ font-size: 18px; color: #E63F4E; margin: 0 5px 0 0;}
.input-box.other{ margin: 10px 0 0 0; width: 100%; display: none; }






/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){

.btn-box{ display: flex; justify-content: center; }
button{ font-size: 18px; height: 56px; line-height: 58px;  border-radius: 40px; padding: 0 40px; color: #fff; background: #239de8; transition: all .15s ease-out; cursor: pointer; outline: none;margin-left: 5px;  }
.button{ display: inline-block;font-size: 18px; height: 56px; line-height: 58px;  border-radius: 40px; padding: 0 40px; color: #fff; background: #239de8; transition: all .15s ease-out; cursor: pointer; outline: none;margin-left: 5px;  }

}





/* $橫的版型 */
@media screen and (orientation:landscape){ 


}





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

body{ background: #fff; height: auto; }
.form-container{ width: 100%; max-width: 968px; min-height: calc(100vh - 0px);  margin: 0 auto; box-sizing: border-box; padding: 100px 0 60px 0; font-size: 18px; line-height: 1.5em; }
.form-container a{ color: #004982; text-decoration: none; }
.form-box{ display: flex; flex-wrap: wrap; margin: 10px 0 0 0; }
.input-box{ position: relative; width: 49%; box-sizing: border-box; margin: 0; }
input[type='text']{ width: 100%; height: 56px; border: 1px solid rgba(0,0,0,.16); border-radius: 4px; overflow: hidden; font-size: 1.5rem; line-height: 1.5em; box-sizing: border-box; padding: 26px 32px 10px 15px; color: rgba(0,0,0,.8); }
.input-box label{ position: absolute; top: 16px; left: 16px; font-size: 15px; color: rgba(0,0,0,.48); transition: all .4s cubic-bezier(.25,.1,.25,1);  }
.input-box.active label{ top: 8px; left: 16px; font-size: 12px;  }
.input-box.haserror input{ border-color: #e63f41; }
input:focus{ outline: none; border-color: #239de8; }
.input-row{ width: 100%; display: flex; justify-content: space-between; }
.input-row+.input-row{ margin: 20px 0 0 0; }
.select-wrap{ width: 49%; margin: 0; }
.select-box{ display: inline-block; width: 100%; height: 54px; overflow: hidden; border-radius: 4px; border: 1px solid rgba(0,0,0,.16); position: relative; vertical-align: middle; }
.select-box:before{ display: inline-block; content: "\e874"; font-size: 14px; font-weight: 600; color: rgba(0,0,0,.48); position: absolute; right: 20px; top: 50%; transform: translateY(-50%);  }
select{ background: transparent; width: 100%; height: 54px; padding: 0px 15px; font-size: 1.5rem;  color: #797979; line-height: 1;  border: 0;  border-radius: 0; -webkit-appearance: none; box-sizing: border-box;  position: absolute;}
select:focus{ outline: none; color: rgba(0,0,0,.8); }
.select-box.hasfocus{ outline: none; border-color: #239de8; }
.select-box.haserror{ outline: none; border-color: #E63F4E; }
.check-box{ color: rgba(0,0,0,.6); margin: 0 0 10px 0; }
.check-box input{ position: absolute; opacity: 0; }
.check-box label{ line-height: 18px; font-size: 13px; box-sizing: border-box; padding-left: 56px; position: relative;  }
.check-box label:before { content: ''; display: inline-block; border-radius: 40px; height: 24px; width: 40px; margin-top: -12px; background-color: rgba(0,0,0,.16); border: 0; transition: background-color ease-out .2s; will-change: background-color; position: absolute;top: 50%; left: 0; }
.check-box label:after { content: ''; position: absolute; background-color: #fff; width: 20px; height: 20px; top: 50%; left: 2px; margin-top: -10px; border-radius: 100%; transition: left ease-out .2s; will-change: left; }
.check-box input:checked~label:before { background-color: #239de8}
.check-box input:checked~label:after { left: 18px; }
.btn-box{ display: flex; flex-direction: row; justify-content: center; }
button{ font-size: 18px; height: 56px; line-height: 58px;  border-radius: 40px; padding: 0 40px; color: #fff; background: #239de8; transition: all .15s ease-out; cursor: pointer; outline: none;margin-left: 5px;  }
button:hover{ background: #1d83c2; }
.button{  width: fit-content; font-size: 18px; height: 56px; line-height: 58px;  border-radius: 40px; padding: 0 40px; color: #fff; background: #239de8; transition: all .15s ease-out; cursor: pointer; outline: none;margin-left: 5px;display: inline-block;}
.button:hover{ background: #1d83c2; }
.haserror_txt{ display: block; font-size: 13px; color: #E63F4E; }
.haserror_ico{ font-size: 18px; color: #E63F4E; position: absolute; right: 16px; top: 20px;}
.haserror_ico02{ font-size: 18px; color: #E63F4E; margin: 0 5px 0 0;}
}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){


}