@import url('/css/font_nanumbarungothic.css');/*'NanumBarunGothic'*/
@import url('/css/font_GangwonEduPower.css'); /* 'GangwonEduPowerEB;'강원교육체 */

html,
body,
form{ position: relative; width:100%; height:100%;}
body * { box-sizing:border-box;}
body { font-family: NanumBarunGothic, sans-serif; font-size: 18px; line-height: 1.4; font-weight: 500; color:#fff; }
.head { width:100%; max-width:640px; height:60px; padding:0 10px; position:fixed; top:0; left:50%; transform:translateX(-50%); border-bottom:1px solid rgba(256,256,256,0.4); display:flex; justify-content:space-between; align-items:center; z-index:100;}
.head h1.nc_logo a { display: block; width: 50px; height: 100%; overflow:hidden; text-indent:-300px; color:transparent; background: url(//img.nocutnews.co.kr/mnocut/common/logo_fff107.png) no-repeat center; background-size: 100% auto; }
.head h2 { font-size: 20px; font-weight: 800; }
.head .btn_sns { display: block; width: 40px; height: 100%; overflow: hidden; text-indent: -300px; color: transparent; background: url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/ico_arrow.png) no-repeat center; background-size: 21px auto; }

.container { width: 100%; height:100%;position:relative; overflow:hidden;overflow-y:auto; -ms-overflow-style: none; border:0 solid red; z-index:90;background: url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/bg.jpg) no-repeat center; background-size:640px 100%; }
.container::-webkit-scrollbar { display: none; }
.container .fix { max-width:640px; position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; height:100%;padding-top:60px;  z-index:10; display:none; overflow:hidden;overflow-y:auto; -ms-overflow-style: none; }
.container .fix::-webkit-scrollbar { display: none; }
.container .active {display:block; }

.container .main { background: url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/bg1.jpg) no-repeat center; background-size:cover; text-align:center; }
.container .main h1 { padding-top:20%; font-family:GangwonEduPowerEB; font-size:40px;}
.container .main p small {display:block; margin-top:5px; font-size:70%;}
.container .main .btn { width: 70%; max-width: 300px; height: 50px; line-height: 50px; display: block; border-radius: 30px; position: absolute; left: 50%; transform: translateX(-50%); font-family: GangwonEduPowerEB; font-size: 20px; }

.container .main .btn1 { bottom:calc(10% + 70px); }
.container .main .btn2 { bottom:10%;  line-height:55px;}

.container .main .btn a {width:100%; height:100%; display:block; position:relative; top:0; left:0; border-radius:30px;}
.container .main .btn1 a {border:3px solid #fff; background:#1f292b; }
.container .main .btn2 a {background:#4b5455; }
.container .main .btn1:hover:before {
	content: '';position: absolute;left:50%; transform:translateX(-50%); top:0; border-radius:30px; 
	background: linear-gradient(45deg, #2c59a6, #61c9ee);transition:0.3s ease; filter: blur(10px); opacity:1;
	background-size: 400%;width:100%;height:100%;animation: moveGradient 2s linear infinite; z-index:-1;
}
.container .main .btn1 a:hover:before{ content:''; width:calc(100% - 6px); height:calc(100% - 6px); position:absolute; top:3px; left:50%; transform:translateX(-50%); display:block; z-index:0;border-radius:30px; }
.container .main .btn1 a:hover {border-color:#61c9ee; background:#1f292b }

.survey_b .bar_b { width:100%; height:60px; position:relative; }
.survey_b .bar_b .bar{ width:calc(100% - 80px); height:20px; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); border-radius:10px; background:#000; }
.survey_b .bar_b .bar span { height:100%; display:block; background: linear-gradient(45deg, #62d4f1, #4984fd); transition:0.3s ease; background-size: 200%; animation: moveGradient 3s linear infinite; border-radius:20px;}
.survey_b .bar_b small { position:absolute; right:50px; top:43px; font-size:12px; text-align:right;}
.survey_b .bar_b a{ width:20px; height:50px; position:absolute; top:5px; text-indent:-300px; color:transparent; opacity:0.3; background: url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/ico_arrow2.png) no-repeat center; background-size:15px auto;}
.survey_b .bar_b a.btn_prev{left:13px;}
.survey_b .bar_b a.btn_next{right:13px;transform:scale(-1)}
.survey_b .bar_b a:hover ,
.survey_b .bar_b a.sel {opacity:1;}
.survey_b .start_b,
.survey_b .question,
.survey_b .question2,
.survey_b .loading { width: 100%; height: calc(100% - 60px); border: 0 solid red; position: relative; text-align: center; display: none; }
.survey_b.active .start_b.active,
.survey_b.active .question2.active,
.survey_b.active .loading.active { display: flex; }
.survey_b.active .question.active { display: block; }

.survey_b .start_b { flex-direction:column; justify-content:center; font-size:24px;}
.survey_b .start_b p {padding:20px 0;}
.survey_b .start_b .btn_start {width:120px; height:120px; border:2px solid #fff; border-radius:50%; text-align:center; line-height:120px; margin:40px auto 0; font-size:20px; background: url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/bg.jpg) no-repeat 70% 85%; background-size:500px auto;  font-family:GangwonEduPowerEB; position:relative; }
.survey_b .start_b .btn_start:hover:after { content: ''; position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); top: 50%; background: linear-gradient(45deg, #fff, rgba(256,256,256,0.2)); transition: 0.3s ease; filter: blur(15px); opacity: 0.7; animation: moveGradient 2s linear infinite; border-radius: 50%; background-size: 400%; width: 105%; height: 105%; z-index: -1; }

.survey_b .question ,
.survey_b .question2 { position:relative; left:0; top:0; width:100%; overflow:hidden;}
.survey_b .question .survey ,
.survey_b .question2 .survey{ position:absolute; top:0; left:100%; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; opacity:1; transition:all 0.5s ease-out;}
.survey_b.active .active .survey.play { left: 0; }
.survey_b.active .active .survey.next { left: -100%; }
.survey_b.active .active .survey.prev { left: 100%; }

.survey_b .survey > div { max-width:400px; width:80%; margin:0 auto; text-align:center; }
.survey_b .survey .b1{ min-height:25%; padding:20px; margin-bottom:10px; border-radius:20px; background:#fff; color:#000; font-size:22px; word-break:keep-all; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;}
.survey_b .survey .b1 h2{ font-family:GangwonEduPowerEB; font-size:36px;}
.survey_b .survey .b2 label:has(input[type="radio"]) {width:100%; height: 55px; display:block; margin-bottom: 5px; border-radius: 20px; border: 3px solid rgba(256,256,256,0.2); line-height:49px; overflow:hidden; opacity:0; cursor:pointer;}
.survey_b .survey .b2 input[type="radio"]{visibility:hidden; position:absolute;top:-300px; }
.survey_b .survey .b2 label:hover,
.survey_b .survey .b2 label:has(input[type="radio"]:checked) { border-color: #fff; background-color: rgba(256,256,256,0.3);}
.survey_b .survey .b2 label:nth-of-type(1) { animation: fade2 0.6s linear forwards; }
.survey_b .survey .b2 label:nth-of-type(2) { animation: fade2 0.8s linear forwards; }
.survey_b .survey .b2 label:nth-of-type(3) { animation: fade2 1s linear forwards; }
.survey_b .survey .b2 label:nth-of-type(4) { animation: fade2 1.2s linear forwards; }
.survey_b .survey .b2 label:nth-of-type(5) { animation: fade2 1.4s linear forwards; }

.loading { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.loading p { margin-bottom:10px; font-size: 40px; font-family: GangwonEduPowerEB; animation: fade 2s linear infinite; }
.loading span { display: block; width: 80px; height: 80px; animation: rotate360 2s linear infinite; background: url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/ico_loading.png) no-repeat center; background-size: 100%; }

.result_b { width: 100%; height: 100%; position: relative; text-align: center;}
.result_b > div { width: 80%; max-width: 400px; height: calc(100% - 180px); padding:20px; margin:35px auto 10px; position: relative; background: #fff; border-radius: 20px; color: #000; }
.result_b > div h2{width:100%; padding:20px 0 40px; margin-bottom:40px; border-bottom:1px solid #d3d3d3;}
.result_b > div h2 span{ font-size:24px; font-weight:500;}
.result_b > div h2 span:after{ content:'···'; letter-spacing:-5px; padding-left:3px;}
.result_b > div h2 strong{ font-size:34px; font-weight:700; color:#c90000; display:block;}
.result_b .btn_news{ width: 80%; max-width:400px; height: 55px; display: block; margin:0 auto 10px; border-radius: 20px; border: 3px solid #fff; line-height: 49px; font-size:20px; overflow: hidden; background-color:rgba(256,256,256,0.3)}
.result_b .sns_b { display:flex; justify-content:center; align-items:center;}
.result_b .sns_b a { width:40px; height:40px; margin:0 3px; border:1px solid #ababab; border-radius:50%; overflow:hidden; text-indent:-300px; color:transparent;}
.result_b .sns_b a.s_face { background:url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/ico_sns1.png) no-repeat center; background-size:60% auto; }
.result_b .sns_b a.s_x { background:url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/ico_sns2.png) no-repeat center; background-size:60% auto;}
.result_b .sns_b a.s_band { background:url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/ico_sns3.png) no-repeat center; background-size:60% auto;}
.result_b .sns_b a.s_kakao { background:url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/ico_sns4.png) no-repeat center; background-size:60% auto;}
.result_b .sns_b a.s_url { background:url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/ico_sns5.png) no-repeat center; background-size:60% auto;}

@keyframes moveGradient { 0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@keyframes rotate360 {
	0% { transform:rotate(0deg); }
	100% { transform: rotate(359deg); }
}
@keyframes fade {
	0% { opacity:0.5; }
	50% { opacity: 1; }
	100% { opacity:0.5;}
}
@keyframes fade2 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.snslayer { font-size: 14px; }
.snslayer .sns_wrap { box-sizing:content-box;}

.container .fix.news_l {top: 80px; padding:0 20px;height: calc(100% - 100px); }
.news_l .btn_b { display:flex; justify-content:space-between; margin-bottom:20px;}
.news_l .btn_b  .btn_result {display:block; padding-left:22px; line-height:30px; background: url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/ico_arrow3.png) no-repeat 0 center; background-size: 15px auto; }
.news_l .btn_b  .btn_refresh {display:block; width:30px; height:30px; overflow:hidden; color:transparent; text-indent:-300px; background: url(//img.nocutnews.co.kr/mnocut/v4/story/s250617/ico_refresh.png) no-repeat 0 center; background-size: 95% auto; }

.news_l li {width:100%; margin-bottom:20px;}
.news_l li:last-child {margin-bottom:0;}
.news_l li a{position:relative; display:flex; align-items:center;}
.news_l li .img {width:140px;height: 90px;display:block;overflow:hidden;position:relative;flex-shrink:0;background:rgba(256,256,256,0.2);}
.news_l li .img img { width:100%; height:auto; min-height:100%; position:relative; z-index:2;}
.news_l li .txt {padding-left:15px; }
.news_l li .txt strong{display:block; margin-bottom:10px; font-weight:400;}
.news_l li .txt span{font-size:20px;font-weight:600;}
.foot {height:100%; padding:50px 0; }
.foot p { margin-bottom:15px; font-size:16px;}
.foot p strong { font-weight:600;}
.foot p:last-child { margin-bottom:0;}

@media all and (max-width:500px) {
	.container {  background-size:cover; }
	.container .main { background-size: cover; }

}

@media all and (max-width:450px) {

}

@media all and (max-width:385px) {
	.container .main h1 { font-size:36px; }

}
@media all and (max-width:350px) {

}