@font-face {font-family:"r"; src: url(./font/rounded-mplus-1c-regular.ttf);}
@font-face {font-family:"r_m"; src: url(./font/rounded-mplus-1c-medium.ttf);}
html,body{margin:0;border:0;padding:0;width:100%; height:100%;font-family:"r",sans-serif; background-color:#fff;-webkit-text-size-adjust: 100%;-webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing: grayscale;color: #000;line-height: 1}
*{box-sizing:border-box;-webkit-tap-highlight-color: transparent; user-select: none;}
a{color: #000; text-decoration: none; transition:.2s}
a:hover{opacity: 0.6}
h1,h2,h3,h4,h5,p{margin:0; padding:0}
img{max-width: 100%;border: 0;-ms-interpolation-mode:bicubic;vertical-align: middle;-webkit-backface-visibility: hidden;pointer-events: none;}
input[type=text]:focus{	outline: none;border:0;	}
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
 .slick-slide img { width: 100%; }
.disable{opacity:0.3; pointer-events: none}
@-webkit-keyframes move-left{0%{transform: none;}65%{transform: translateX(-50px);}100%{transform: translateX(-50px);}}@keyframes move-left{0%{transform: none;}65%{transform: translateX(-50px);}100%{transform: translateX(-50px);}}@-webkit-keyframes move-right{0%{transform: none;}65%{transform: translateX(50px);}100%{transform: translateX(50px);}}@keyframes move-right{0%{transform: none;}65%{transform: translateX(50px);}100%{transform: translateX(50px);}}@-webkit-keyframes width-to-zero{0%{width: 38px;}100%{width: 8px;}}@keyframes width-to-zero{0%{width: 38px;}100%{width: 8px;}}@-webkit-keyframes move-up{100%{bottom: 69.75px;}}@keyframes move-up{100%{bottom: 69.75px;}}@-webkit-keyframes move-down{100%{top: 69.75px;}}@keyframes move-down{100%{top: 69.75px;}}


.btn{display: flex; justify-content: center; align-items: center; width: 210px; height: 90px; border-radius:20px; background-color: #0e97d0; font-size:30px; color: #fff; cursor:pointer;transition: all .2s ease-in-out;}
.btn.gray{background-color: #999}
.btn:hover{background-color:#6ec1e3;opacity: 1}
.btn.gray:hover{background-color: #c2c2c2; opacity: 1}

body{position: relative;display: flex; align-items: center; justify-content: center}
body.v:before,body.v:after{position: absolute;left: 0; width: 100%; height: 50%; content: "";}

body.v:before{top: 0; background-color:#DBF7FB}
body.v:after{bottom: 0; background-color:#DCF996}
body.v.p_active:before{top: 0; background-color:#EDFBFD}
body.v.p_active:after{bottom: 0; background-color:#EDFCCA}


body.h{background: url(../img/bg_line.png) repeat-x center center; background-size: auto 100%}
body.h.p_active:before{position: absolute;top: 0; left: 0;  height: 100%;  width:100%; content: ""; background-color:rgba(255,255,255,.5)}

#page{width:1260px;height: 880px; background: url("../img/bg.png") no-repeat center top; background-size:100% auto;transform-origin: center center; z-index: 1}
#page.top{background: url("../img/top/bg.png") no-repeat center top;background-size:1260px auto}
#header{position: relative;width:1260px;height:140px; background: url("../img/header.png") no-repeat center top; background-size:1260px auto; z-index: 10}
#main{width:1260px;height:690px}

#slider_wrap{position: relative; overflow: hidden}
#slider_wrap img{cursor:grab; pointer-events: inherit}
#slider_wrap img:active{cursor: grabbing}
#slide_arrow button{position: absolute; right:20px; top:50%; margin-top: -25px; background: url("../img/slider/arrow.png") no-repeat center center; background-size:auto 50px; border: 0; width:40px; height: 50px; cursor: pointer; text-indent: -9999em}
#slide_arrow button:hover{opacity: 0.6}
#slide_arrow button.slick-prev{transform: rotate(180deg); left: 20px}

#nav{position: relative; display: flex; padding: 0 100px; justify-content: space-between; margin-top: 15px; z-index: 10}
#nav span{transition: all .2s ease-in-out; cursor: pointer}
#nav span.active{margin-top: -30px}
#nav span img{width: 230px}
#nav span:hover{opacity: 0.6}
#board{height: 600px; background:url("../img/question/board.png") no-repeat right top; background-size: 1245px auto;padding: 100px 130px 100px 130px;}
#board_contents{display:none; height: 100%}
#board h2{position:relative; height: 65px; background-position:center center; background-size:auto 65px; background-repeat: no-repeat; line-height: 0;transition: opacity .8s ease; margin-top: 15px;}
#board h2 span{position: absolute; font-size:75px; left:50%; top:17px; margin-left: -24px}
#board h2 font{position: absolute; font-size:60px; right:60px; top:19px;}

#board dl{display: flex; height:calc(100% - 85px); margin: 0; margin-top: 15px}
#board dt,#board dd{display: flex;justify-content: center; margin: 0}
#board dd{flex-direction: column; width: calc(100% - 290px)}
#board dt{width:240px; align-items: center; margin-right: 10px}
#board dd ul,#board dd li{margin: 0; padding: 0; list-style: none}
#board dd ul{padding-bottom:25px;}
#board dd li{font-size: 23px; margin-top:20px; padding-left:10px; line-height: 1.5}
#board dd li:first-child{margin-top: 0}
#board .text_area{display: flex; align-items: center}
#board .text_area span{display: flex; align-items: center; justify-content: center;width:90px;}
#board .text_area ul{width:calc(100% - 145px); margin-left:15px}
#board .btn_area{display: flex; flex-wrap: wrap; margin-top:20px}
#board .q_btn{position: relative; padding:8px; display: flex; justify-content: space-between; align-items: center; width: calc((100% - 10px)/2); min-height: 86px; color: #fff; border-radius: 20px; margin-top:10px; cursor: pointer;transition: all .2s ease-in-out;}
#board .q_btn:hover{opacity: 0.6;}
#board .q_btn:nth-child(even){margin-left: 10px}
#board .q_btn:nth-child(-n+2){margin-top: 0}


#board .q_btn i{display: block; width:70px; border-radius: 15px; overflow: hidden}
#board .q_btn font{width:calc(100% - 85px); font-size: 20px; line-height:1.1;font-family:"r_m"}

#board .q_btn.x i{opacity: 0}
#board .q_btn.x font{width:94%; left: 3%; position: absolute;}



#board.level1 h2{background-image:url("../img/question/title1.png"); color:#ff4b00}
#board.level1 dd ul{background:url("../img/question/line1.png") no-repeat left bottom; }
#board.level1 .q_btn{background-color: #FD7038}

#board.level2 h2{background-image:url("../img/question/title2.png"); color:#e70059}
#board.level2 dd ul{background:url("../img/question/line2.png") no-repeat left bottom; }
#board.level2 .q_btn{background-color: #ec337a}

#board.level3 h2{background-image:url("../img/question/title3.png"); color:#148c00}
#board.level3 dd ul{background:url("../img/question/line3.png") no-repeat left bottom; }
#board.level3 .q_btn{background-color: #43a333}

#board.level4 h2{background-image:url("../img/question/title4.png"); color:#0086d6}
#board.level4 dd ul{background:url("../img/question/line4.png") no-repeat left bottom; }
#board.level4 .q_btn{background-color: #339ede}


#pagenation{position: relative; display: flex; justify-content: center}
#pagenation div{display: flex;}
#pagenation div i{width:55px; height: 55px; background-position:center center; background-repeat: no-repeat; background-size:55px auto; margin-left:20px}
#pagenation div i:nth-child(even){margin-top:20px}
#pagenation div i:nth-child(1){background-image:url("../img/icon/p1.png"); margin-left: 0}
#pagenation div i:nth-child(2){background-image:url("../img/icon/p2.png");}
#pagenation div i:nth-child(3){background-image:url("../img/icon/p3.png");}
#pagenation div i:nth-child(4){background-image:url("../img/icon/p4.png");}
#pagenation div i:nth-child(5){background-image:url("../img/icon/p5.png");}

#pagenation div i.active:nth-child(1){background-image:url("../img/icon/p1_on.png");}
#pagenation div i.active:nth-child(2){background-image:url("../img/icon/p2_on.png");}
#pagenation div i.active:nth-child(3){background-image:url("../img/icon/p3_on.png");}
#pagenation div i.active:nth-child(4){background-image:url("../img/icon/p4_on.png");}
#pagenation div i.active:nth-child(5){background-image:url("../img/icon/p5_on.png");}

#pagenation span{position: absolute; right:85px; top:0; cursor: pointer}
#pagenation span img{height:90px; z-index: 0}
#pagenation span i{position: absolute; right: 163px; top: -12px; z-index: 1}
#pagenation span i img{height: 125px;}
#pagenation span.active{cursor: default; pointer-events: none}


.popup_contents{position: absolute; left:0; right: 0; top: 160px; margin: auto; width: 990px; border:5px solid #e4b75e; border-radius:15px; background-color:#fff; background-position:center 50px; background-size:630px auto; background-repeat: no-repeat; z-index: 10;transform:scale(0); transition: all .5s ease-in-out; pointer-events: none; opacity: 0}
.popup_contents.active{transform:scale(1); opacity: 1; pointer-events:inherit}
.popup_box{position: relative; padding-top:300px; padding-bottom: 50px; display: flex; flex-direction: column; align-items: center}
.popup_box i{position: absolute; left:145px; top:100px; display: block; width:210px}
.popup_box b{position: absolute; right:410px; top: 25px; display: block; width:200px}
.lv1 .popup_box i {left: 100px; top: 100px;}
.lv1 .popup_box b{right:460px; top:75px;}

.popup_box .sw{display: flex; justify-content: center; align-items: center; flex-direction: column;margin: 0 50px}
.popup_box .sw p{font-size: 20px; line-height: 1.8; color:#5f3401; margin: 0; margin-bottom:35px}
.popup_box .sw .btn{width: 200px; height: 80px}
.popup_box h3{font-size: 32px; color:#7A572D; margin: 30px 0; }
.down_img img{height: 415px; margin-bottom: 30px;pointer-events:inherit;}
#success{background-image: url("../img/question/success_bg.png")}
#wrong{background-image: url("../img/question/wrong_bg.png")}

#result{border:5px solid #0e97d0;}
#result .popup_box,#download_page .popup_box{padding-top:0;}
#download_page .popup_box{padding-bottom: 30px}
.r_title{position: relative; background:url("../img/question/result_title.png") no-repeat center center; background-size:915px auto; width: 100%; height: 200px; margin-top: 35px; color: #ff4b00; font-size:75px}
.r_title span{position: absolute; left:300px; top:113px}
.r_title font{position: absolute; left:472px; top:113px}
.r_memo{display: flex; justify-content: center; margin-top:30px}
.r_memo dl,.r_memo dt, .r_memo dd{margin: 0; display: flex; justify-content: center; align-items: center}
.r_memo dt{width:175px}
.r_memo dt img{width: 135px}
.r_memo dd{flex-direction: column; align-items: flex-start}
.r_memo dd p{margin-top:15px; line-height: 1.5; font-size:26px;color:#5f3401;}
.r_memo dd p:first-child{margin-top: 0}
.r_btn_area{display: flex; justify-content: center; margin-top:35px}
.r_btn_area a:first-child{margin-right: 15px}

#over_layer{position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: none; background-color:rgba(255,255,255,.5)}
#over_layer.p_active{display: block}

#download{position: relative; background: url("../img/down/download_bg.png") no-repeat center center; background-size: auto 580px; height: 580px;}
#download .crt{position: absolute; left:280px; bottom:95px; height: 205px}
#download .certification{position: absolute; right:300px; bottom:145px; width: 200px}
#download p{position: absolute; left:235px; top:150px; color: #333; font-size: 29px; line-height: 1.6; text-align: center}
#download .btn{width: 230px; height: 65px; font-size: 27px}
#download div{display: flex; align-items: center; position: absolute; left:265px; bottom:16px; font-size: 21px;color: #fff;}
#download div input{width: 235px; height: 40px; border: 0; font-size: 21px; margin-left: 15px; margin-right: 40px; color: #000; padding: 0 10px}
.down_btn_area{display: flex; justify-content: space-between; padding: 0 100px; margin-top:17px}
.down_btn{position: relative}
.down_btn .btn{width:395px}


.down_btn i,.down_btn i:after,.down_btn i:before {position: absolute;background:#5CFF26; border-radius: 4px; height: 8px;}
.down_btn i:after,.down_btn i:before {content: "";display: block;}
.down_btn i:before {bottom: 45px;}
.down_btn i:after {top: 45px;}
.down_btn i.l { right:410px; top:41px;}
.down_btn i.l:before, .down_btn i.l:after {left: 15px;}
.down_btn.active i.l {-webkit-animation: move-left 0.38s ease-out, width-to-zero 0.38s ease-out;animation: move-left 0.38s ease-out, width-to-zero 0.38s ease-out;}
.down_btn.active i.l:before {-webkit-animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out; animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;}
.down_btn.active i.l:after {-webkit-animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;}
.down_btn i.r {left:410px;top:41px;}
.down_btn.active i.r {-webkit-animation: move-right 0.38s ease-out, width-to-zero 0.38s ease-out;animation: move-right 0.38s ease-out, width-to-zero 0.38s ease-out;}
.down_btn i.r:before, .down_btn i.r:after {right: 15px;}
.down_btn.active i.r:before {-webkit-animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;}
.down_btn.active i.r:after {-webkit-animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;}
.down_btn i.l:before,.down_btn i.r:after {transform: rotate(34deg);}
.down_btn i.l:after,.down_btn i.r:before {transform: rotate(-34deg);}


#footer{position: relative; font-size: 14px;width:1260px; height: 50px; display: flex; align-items: center; justify-content: center}
#success_result{display: none}
.preload{display: none;}

#board .swiper{height: 100%;}
.swiper-slide{opacity: 0}
.swiper-slide.swiper-slide-active{opacity: 1}
.board_contents{height: 100%; background-color: #fff}

#next_btn{width: 292px; height: 90px;  background-image: url("../img/icon/btn.png"); background-repeat: no-repeat; background-size: 292px 90px;}
#next_btn.result{background-image: url("../img/icon/btn_result.png")}