@charset "UTF-8";

@font-face {
  font-family: 'DungGeunMo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GmarketSansLight';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
:root{
  --GM : 'GmarketSansMedium';
}
body{
  font-family: 'GmarketSansLight';
  line-height: 1.6;
}

h1{
  font-family: 'DungGeunMo'; font-style: italic; display: inline-block; position: relative;
  border: 1px solid #fff; border-width: 1px 0; padding:0.1em 0.25em 0.1em 0.1em;
}
.landing{
  background: #0D6EFD;
  color:#fff;
  height:70vh;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position:relative;
}
.landing *{ position: relative;}
.bg::before{
  content: '';
  display: block;
  position: absolute;
  top:0; left: 0;
  width:100%; height: 100%;
  background:url(../img/5.png) 50% 50%;
  background-size: 140px;
  mix-blend-mode: color-burn;
  opacity: 0.5;
}


.landing h1{  
  font-size: 6rem;
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 #053b8b, 3px 3px 0 #053b8b, 4px 4px 0 #053b8b;
}
h1 span:nth-child(1){ color: aqua;}
h1 span:nth-child(2){ color:springgreen;}
h1 span:nth-child(3){ color:coral;}
h1 span:nth-child(4){ color:hotpink;}
h1 span:nth-child(5){ color:gold;}

h1 + p { margin: 20px 0  30px 0; color:#e8eef4; font-size: 1.8rem;}
h1 + p strong{ font-family: var(--GM);}

.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  background: gold;
  color:#000;
  font-family: var(--GM);
  font-size: 2rem;
  border-radius: 4px;
  width:20rem;
  height: 5rem;
  box-shadow: 0 3px 0 0 #ff7b00;
  position: relative;
  cursor: pointer;
  margin: 0 auto;
}
.btn:hover{
  box-shadow: none;
  top:2px;
}


.header{
  background: #0D6EFD; text-align: center;
  color:#fff;  padding:20px 0;
  position: relative;
}
.header.bg::before{
  background:url(../img/5.png) 50% 50%;
  background-size: auto 100%;
}
.header h1{
 font-size: 3rem;  
}

.test-list{
  text-align: center;  
}
.test-list > li{ padding:4rem;}
.test-list > li:not(:first-child){
  border-top:1px solid #ddd;
}

.test-list li h2{ font-family: var(--GM); font-size: 2rem;}
.test-list li p{ width: 500px; max-width: 100%; margin: 0 auto; word-break: keep-all; margin-top:1rem;}
.rd-list{ display: flex; justify-content: center; align-items: center;  margin-top:2rem;}
[class^=radio]{ position: relative;
  border: 1px solid #ccc; margin-left: -1px;
  width:100px; height: 40px; 
}
[class^=radio] input{ 
  width:100%; height: 100%; position: absolute; top:0; left: 0;  margin:0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; 
}
[class^=radio] label{
  position: relative; font-size: 1.4rem;
  display: block;
  width:100%; height: 100%; line-height: 40px;
  font-family: var(--GM);
  cursor: pointer;
  transition: all 0.3s;
}
[class^=radio] input:checked + label{ color:#fff;}
.radio-yes{ border-radius: 4px 0 0 4px; border-color:#0D6EFD; color:#0D6EFD;}
.radio-yes label:hover{ background: rgba(13, 110, 253, 0.1);}
.radio-yes input:checked + label{ background:#0D6EFD;}

.radio-no{ border-color:#DC3545; color:#DC3545;}
.radio-no label:hover{ background: rgba(220, 53, 69, 0.1);}
.radio-no input:checked + label{ background:#DC3545;}

.radio-maybe{border-radius: 0 4px 4px 0; border-color:#198754; color:#198754;}
.radio-maybe label:hover{ background: rgba(25, 135, 84, 0.1);}
.radio-maybe input:checked + label{ background:#198754;}

.footer{
  background-color: #e8eef4;
  height: 30vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

.footer h2{ 
  font-family: var(--GM);
  font-size: 2rem;
}

.result{ width:600px; max-width: calc(100% - 60px); margin:3rem auto; text-align: center;}
.result img{ width:400px; max-width: 100%;}
.result h3{ font-family: var(--GM); font-size: 3rem; margin-top:2rem}
.result p{margin:2rem 0 3rem 0;}