@charset "UTF-8";

@font-face {
  font-family: 'Aeonik';
  font-weight: 300;
  src: url('font/Aeonik-Light.woff') format('woff');
}

@font-face {
  font-family: 'Aeonik';
  font-weight: 400;
  src: url('font/Aeonik-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Aeonik';
  font-weight: 600;
  src: url('font/Aeonik-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Aeonik';
  font-weight: 700;
  src: url('font/Aeonik-Bold.woff') format('woff');
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body,td,th {
	font-family: 'Aeonik', 'Helvetica Neue', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #000;
}

body {
	margin-left: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
}

a, a:visited, a:hover {
  text-decoration: none;
  color: #000;
}

.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 40px;
  margin: 0 auto;
  box-sizing: border-box;
}


/* nav */
.nav {
	position: relative;
	width: 100%;
	background: #333;
	margin: 0;
	z-index: 99999;
  padding: 10px 0;
}

/* header */
.header {
	padding: 80px 0;
  background-color: #ee755f;
}

.header_title {
	font-size: 50px;
	line-height: 1.1;
	font-weight: 300;
	color: #FFF;
  text-align: center;
}

.header_title img {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
}

.header_body {
  margin-top: 40px;
	font-size: 20px;
  font-weight: 300;
	line-height: 1.4;
	color: #FFF;
  display: table;
}

.header_body > div {
  display: table-cell;
}

.header_body > div:first-child {
  padding-right: 40px;
}

.header_body > div:last-child {
  padding-left: 40px;
}

/* main */
.main_cont {
	position: relative;
	width: 100%;
	height: 70vh;
}

.main {
	position: absolute;
	vertical-align: top;
	width: 100%;
	padding: 50px 0;
	background: #FFF;
  text-align: center;
}

.number {
	position: relative;
	display: block;
	vertical-align: top;
	font-size: 20px;
	line-height: 48px;
	font-weight: 600;
	color: #333;
	background-color: #dad6d2;
	border-radius: 25px;
	width: 50px;
	height: 50px;
  margin: 0 auto;
	margin-bottom: 20px;
}

.question_cont {
	display: table;
  width: 100%;
}

.question_cont > * {
  position: relative;
  display: table-cell;
  padding: 0 10px;
  height: 200px;
  vertical-align: middle;
  text-align: center;
}

.main_title {
	font-size: 36px;
	line-height: 40px;
	font-weight: 400;
	color: #000;
	margin-bottom: 10px;
}

.main_body {
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: #999;
}

.yesno_cont {
	position: relative;
	width: auto;
	height: auto;
	margin: 10px 0;
}

.btn_yesno {
	display: inline-block;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	margin: 10px;
	border: solid 3px;
	border-color: #F0F0F0;
	border-radius: 50px;
	width: 25%;
	max-width: 120px;
	padding: 30px 20px 25px;
  cursor: pointer;
}

.yes {
	color: #58ad9a;
}

.yes:hover {
	border-color: #58ad9a;
	background-color: rgba(0, 187, 136,.1)
}

.no {
	color: #ee755f;
}

.no:hover {
	border-color: #ee755f;
	background-color: rgba(255, 136, 0,.1)
}

.icon_yesno {
  width: 1.8em;
  height: 1.4em;
}

.btn_gray {
	width: 200px;
	height: 60px;
	border: none;
	border-radius: 30px;
	background: #dad6d2;
	font-size: 16px;
	line-height: 60px;
	font-weight: 400;
	letter-spacing: 1px;
	color: #000;
	align-content: center;
  margin: 0 auto;
	margin-top: 40px;
  cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
}

.btn_gray:hover {
	background: #a9a1a1;
}

@keyframes animationNext1 {
    from {
      opacity: 1; z-index: 99;
    }
    to {
      opacity: 0; z-index: 9;
    }
}

@keyframes animationNext2 {
    from {
      left: 100px; opacity: 0; z-index: 9;
    }
    to {
      left: 0; opacity: 1; z-index: 99;
    }
}

@keyframes animationBack1 {
    from {
      opacity: 1; z-index: 99;
    }
    to {
      opacity: 0; z-index: 9;
    }
}

@keyframes animationBack2 {
    from {
      left: -100px; opacity: 0; z-index: 9;
    }
    to {
      left: 0; opacity: 1; z-index: 99;
    }
}


/* result */
.result_cont {
	position: relative;
	vertical-align: top;
	width: 100%;
	padding: 150px 0;
	background: #FFF;
}

.result {
  text-align: center;
	position: relative;
	vertical-align: middle;
}

.result_title {
	font-size: 30px;
	line-height: 36px;
	font-weight: 600;
	margin-top: 5px;
}

.validated {
	color: #58ad9a;
}

.invalidated {
	color: #ee755f;
}

.result_btn {
	margin-bottom: 50px;
  text-align: center;
}

.result_btn > * {
  margin: 0 auto;
}

.btn_cyan {
	width: 280px;
	height: 60px;
	border: none;
	border-radius: 30px;
	background: #675dc0;
  color: #fff;
	font-size: 16px;
	line-height: 60px;
	font-weight: 400;
	letter-spacing: 1px;
	align-content: center;
	margin-top: 60px;
  cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
}

.btn_cyan:hover {
	opacity: 0.8;
}

.btn_gray_small {
	width: 280px;
	border-radius: 30px;
	border: 1px solid #a9a1a1;
	font-size: 14px;
	line-height: 1.3;
  padding: 20px 0;
	font-weight: 400;
	letter-spacing: 1px;
	color: #333;
	align-content: center;
	margin-top: 20px;
  cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
}

.btn_gray_small:hover {
	background: #DDD;
}

/* detail */
.result_detail {
	position: relative;
	width: auto;
	background: #F7F7F7;
	padding: 50px 0;
}

.result_table {
	position: relative;
	width: 100%;
	max-width: 600px;
}

.result_info {
	display: inline-block;
	height: 20px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	padding: 0 10px 30px;
}

.result_info .yes {
	display: inline-block;
	vertical-align: top;
	color: #58ad9a;
	margin-left: 5px;
}

.result_info .no {
	display: inline-block;
	vertical-align: top;
	color: #ee755f;
	margin-left: 5px;
}

.result_info_title {
	background: #FFF;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	padding: 30px;
	border-radius: 100px;
}

.result_info_title_text {
  margin: 0 auto;
  max-width: 560px;
}

.result_info_body {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: #999;
	margin:5px auto;
  max-width: 480px;
}

/* footer */
.footer {
  background-color: #dad6d2;
	padding: 50px 0;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 1px;
	color: #333;
  text-align: center;
}

/* AIA */
.aia_cont {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
}

.aia_cont .contents {
	display: table-cell;
	width: 100vw;
	height: 100vh;
	vertical-align: middle;
  text-align: center;
}

.aia_title {
	font-size: 20px;
	line-height: 26px;
	font-weight: 400;
	color: #1e3c3f;
	margin-bottom: 10px;
}

@media screen and (max-width: 767px){
  .container {
    padding: 0 20px;
  }

  .header {
  	padding: 40px 0;
  }

  .header_body {
    display: block;
    font-size: 16px;
    line-height: 22px;
  }

  .header_body > div:first-child {
    display: block;
    margin-bottom: 20px;
    padding-right: 0;
  }

  .header_body > div:last-child {
    padding-left: 0;
  }

  .result_cont {
  	padding: 50px 0;
  }

  .btn_gray {
  	width: 160px;
  	height: 50px;
  	font-size: 14px;
  	line-height: 50px;
  	margin-top: 20px;
  }

  .yesno_cont {
  	margin: 10px 0;
  }

  .main_title {
  	font-size: 20px;
  	line-height: 24px;
  }

  .main_body {
  	font-size: 14px;
  	line-height: 18px;
  }

  .btn_yesno {
  	max-width: 84px;
  }
}

@media screen and (max-height: 800px){
  .main_cont {
  	height: 100vh;
  }
}

@media screen and (max-height: 500px){
  .footer_cont {
  	display: none;
  }
}