@charset "utf-8";

/* 이벤트 화면 */
@font-face { font-family: 'Paperlogy4'; src: url(../../fonts/popup/Paperlogy-4Regular.woff) format('woff'); } 
@font-face { font-family: 'Paperlogy6'; src: url(../../fonts/popup/Paperlogy-6SemiBold.woff) format('woff'); } 



p, span , h1, h2, dl dt, i ,button{font-family: 'Paperlogy6','MalgunGothic', '맑은 고딕'; }
ul li,input[type="text"] {font-family: 'Paperlogy4','MalgunGothic', '맑은 고딕'; }
.Wrap {padding: 20px;background:url(../../images/popup/bg.png) no-repeat 0 0;background-size: cover;} 
header {max-width: 1080px;margin: 0 auto;display: flex;flex-direction: column;align-items: center;padding: 100px 0 20px 0;} 
header h1 { color:#fff; font-size:4.5rem; font-weight:800; } 
header span {color: #1505c7;display: flex;align-items: center;justify-content: center;position:relative;background: #2aede6;font-size: 	2.5rem	;padding: 2px 35px;border-radius: 80px;} 
header p { font-size:22px; text-align: center; display: flex; width:100%; justify-content: center; padding:0 100px; color:#000; margin-top:15px; } 

.Contents {max-width: 1080px;margin: 0 auto;/* border-radius:20px; *//* box-shadow:0px 0px 4px 1px #5fa3db; *//* background: #fff; *//* padding:30px; */} 
.Contents .info {display: flex;flex-wrap: wrap;position:relative;background: #fff url(../../images/popup/bg_01.png) no-repeat bottom right 40px;border-radius: 12px;padding: 40px;margin-bottom: 30px;font-size:1.25rem;box-shadow: 0px 0px 6px 0px #1b1777;} 
.Contents .info p{margin-bottom: 20px;}
.Contents .info p .point{color:#1505c7 ;}
.Contents .info p .underline{border-bottom: 2px solid #1505c7;padding-bottom: 3px;}
.Contents .info dl {display: flex;width: 100%;  flex-wrap: wrap; } 
.Contents .info dl dt { font-size:1.25rem; color:#202020; width:150px; margin-bottom: 10px; background: #e7f1f8;text-align: center; padding: 3px 5px; border-radius: 30px;margin-right: 10px;} 
.Contents .info dl dd { color:#343434; font-size:1.25rem;width: calc(100% - 160px); font-family: 'Paperlogy4','MalgunGothic', '맑은 고딕';} 


.Contents .Cont {width:100%;height:auto;background:#fff;border-radius: 12px;padding: 40px;box-shadow: 0px 0px 6px 0px #1b1777;} 
.Contents .Cont dl dt{font-size: 1.5rem;margin-bottom: 10px;}
.Contents .Cont dl dt span{font-size: 1.875rem; color: #000bff; font-family:'Paperlogy6','MalgunGothic', '맑은 고딕';}
.Contents .Cont dl dd {background: #f7f8f9;border: 1px  solid #dde7f0;border-radius: 12px;margin-bottom: 20px;position: relative;}
.Contents .Cont dl dd.textbox{background: none; border: none;}
.Contents .Cont dl dd.textbox:hover{background: none;}
.Contents .Cont dl dd:hover{background: #e8f3ff;}
.Contents .Cont dl dd label{display: inline-block;padding: 20px 20px 20px 45px;cursor: pointer;width: 100%;position: relative;border-radius: 12px;}
.Contents .Cont dl dd label span{font-size: 1.25rem;}
.Contents .Cont dl dd label .name{font-size:1.25rem; font-family:'Paperlogy4','MalgunGothic', '맑은 고딕'; }
.Contents .Cont dl dd label .meaning{display: block;margin-top: 10px;width: 100%;font-size: 1.125rem;font-family:'Paperlogy4','MalgunGothic', '맑은 고딕';padding-left: 58px;}
.Contents .Cont dl dd label .meaning i{display: inline-block;margin-right: 10px;margin-left: -53px;font-style: normal;background: #dde7f0;color: #022d54;font-weight: 700;padding: 2px 5px;border-radius: 5px;}
.Contents .Cont dl dd label .point{color:#1505c7;}
.Contents .Cont dl dd input[type="radio"]{width: 0;height: 0;font-size: 0;position: absolute;top: 0;}
.Contents .Cont dl dd label::after{content: '';background: #fff;width: 15px;height: 15px;display: inline-block;border: 1px solid #ddd;position: absolute;top: 26px;left: 20px;}
.Contents .Cont dl dd input[type="radio"]:checked + label{background: #000bff;}
.Contents .Cont dl dd input[type="radio"]:checked + label span{color: #fff;}
.Contents .Cont dl dd input[type="radio"]:checked + label::before{content: '';background: url(../../images/popup/check.png) no-repeat 0 0;width: 28px;height: 22px;display: inline-block;position: absolute;top: 16px;left: 18px;z-index: 3;}
.Contents .Cont dl dd input[type="radio"]:checked + label::after{content: '';background: #081c72;border: 1px solid #ffffff45;z-index: 1;}


textarea{width: 100%; border: 1px solid #ddd;}
textarea.type1{height: 80px; display: block; margin-bottom: 20px;}
textarea.type2{height: 150px;}


.Privacy {max-width: 1080px;text-align: center;padding: 50px 50px;background: #00000062;border-radius: 12px;margin:30px auto;box-shadow: 0px 0px 6px 0px #0a0829;} 
.Privacy h2 { text-align:center; font-size:28px; font-weight:800; color: #fff; } 
.Privacy p { text-align: center; font-size:16px; font-weight:100; margin-top: 20px; color: #000; } 
.Privacy .Privacy_con{display: flex;margin: 40px 0;}
.Privacy ul{width: 50%;padding-right: 30px;border-right: 1px solid #acaeb347;}
.Privacy ul li{position: relative;font-size:1.25rem;color: #fff;text-align: left;margin-bottom: 10px;padding-left: 18px;line-height: 30px;}
.Privacy ul li::before{content: '';position: absolute;display: block;width: 5px;height: 5px;border-radius: 10px;background: #fff;top: 12px;left: 0;}

.Privacy dl {width: 50%;line-height: 40px;text-align: left;padding-left: 30px;} 
.Privacy dl dt {position: relative;padding-left: 18px;display: inline-block;font-size:1.25rem;width: 130px;color: #ffffff;font-family:'Paperlogy4','MalgunGothic', '맑은 고딕';margin-right: 10px;margin-bottom: 23px;}
.Privacy dl dt::before{content: '';position: absolute;display: block;width: 5px;height: 5px;border-radius: 10px;background: #fff;top: 12px;left: 0;}
.Privacy dl dt label{ font-family:'Paperlogy4','MalgunGothic', '맑은 고딕'; }
.Privacy dl dd {display: inline-block;width: calc(100% - 160px);text-align: left;color: #ffffff;} 
.Privacy dl dd input[type="radio"] {width: 0; height: 0; font-size: 0;} 
.Privacy dl dd label{margin-right: 20px;font-size:1.25rem;font-family:'Paperlogy4','MalgunGothic', '맑은 고딕';position: relative;} 
.Privacy dl dd label::before{content: '';width: 18px;height: 18px;display: inline-block;background: #fff;border-radius: 3px;margin-right: 5px;}
.Privacy dl dd label::after{content: ''; width: 0; height: 0;}

.Privacy dl dd input[type="radio"]:checked + label::after{width: 12px;height: 12px;display: inline-block;background: #0206ec;border-radius: 3px;margin-right: 5px;position: absolute;top: 5px;left: 3px;}
.Privacy dl dd input[type="text"] {border: 1px solid #b3cde4;width: 100%;height: 40px;border-radius: 5px;font-size:1.25rem; } 
input[type="radio"]:focus-visible + label { border: 2px solid #000; } 



.btn {background: #37dcff;width:300px;font-size:1.25rem;padding: 13px 30px;border-radius: 9px;}

@media all and (max-width : 1000px) {
   html{font-size: 14px;}
   header{padding: 30px 0 20px 0;}
   header span{font-size: 2rem;}
   header h1{font-size: 3.5rem;}
   .Contents .info{background: #fff; padding: 15px;}
   .Contents .Cont{padding: 15px;}
  .Privacy{padding: 50px 20px;}
  .Privacy dl dd input[type="radio"]:checked + label::after{top:2px}
   

}
@media all and (max-width : 830px) {
   header span{font-size: 1.5rem;}
   .Privacy .Privacy_con{flex-direction: column; margin: 20px 0;}
   .Privacy dl{width: 100%;margin-top: 30px;padding-left: 0;}
   .Privacy dl dt{width: 100%;margin-bottom:10px}
   .Privacy dl dd{width: 100%;}
   .Privacy ul{border-right: none; border-bottom: 1px solid #ddd;width: 100%;padding-bottom: 30px;padding-right: 0;}
   .btn{width: 80%;}
}
@media all and (max-width : 550px) {
   header h1{text-align: center;line-height: 130%;}
   .Wrap{padding: 14px;}
   .Contents .info dl{flex-direction: column;}
   .Contents .info dl dd{width: 100%; margin-bottom: 10px;}
   .Contents .Cont dl dd label{padding: 23px 10px 10px 45px}
   .Contents .Cont dl dd label .meaning{padding-left: 0;}
   .Contents .Cont dl dd label .meaning i{margin-left: 0;}
   .Privacy{padding: 30px 15px;}


}