@charset"utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
*{-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
html,body{margin:0; padding:0;font-family: 'Noto Sans KR', sans-serif;}
header,section,article,aside,nav,main,footer{display:block;}
header:after,section:after,article:after,aside:after,nav:after,main:after,footer:after{content:"";display:block;clear:both;}
h1,h2,h3,h4,h5,h6{margin:0;font-family: 'Noto Sans KR', sans-serif;font-weight:bold;}
p{margin: 0;}
ul,ol{margin:0; padding:0; list-style:none;}
a{text-decoration:none;}
.clear{clear:both;}

/*  top 영역    */
.scb_sh{position: relative;overflow: hidden;width: 1000px;height: 600px;}
.scb_sh .sh_top{width: 100%;height: 60px;overflow: hidden;}
.scb_sh .sh_top > div{display: inline-block;width: 190px;background:#f5f5f5;}
.scb_sh .sh_top > div > img{display: block;margin:5px auto;vertical-align: middle;height: calc(100% - 10px);}
.scb_sh .sh_top > div:first-child{float: left;height: 100%;line-height: 60px;}
.scb_sh .sh_top .menu_bar{width: 810px;background:rgba(21,61,91,1);overflow: hidden;padding:0 10px;height: 100%;position: relative;}
.scb_sh .sh_top .menu_bar > div{display: inline-block;}
.scb_sh .sh_top .menu_bar > div:first-child{width:400px;height: 60px;overflow: hidden;white-space:nowrap;margin-left:35px;position: absolute;top:0;left:85px}
.scb_sh .sh_top .menu_bar > div > h1{color:#fff;font-size: 25px;text-align: center;}
.scb_sh .sh_top .menu_bar > div > span{font-weight:normal;font-size: 15px;display:block;text-align: center;color:#fff;letter-spacing: -0.8px;}
.scb_sh .sh_top .menu_bar > .ri_txt{height:100%;float: right;width:280px;padding-right: 20px;}
.scb_sh .sh_top .menu_bar > div >  p{color:#fff;text-align:right;font-size: 15px;margin-top:8px;letter-spacing: -0.8px;}
.scb_sh .sh_top .menu_bar > div:last-child >  span{color:#fff;font-size: 15px;letter-spacing: -0.8px;display: block;text-align:right}
.scb_sh .triag{width: 0px;height: 0px;  border-top:none;border-bottom:60px solid #f5f5f5;border-right:none;border-left: 50px solid  transparent;position: absolute;left:190px;transform: rotate( -180deg );z-index: 10;}
.scb_sh .triag:after{content:"";width: 2px;height:86px;background: #ffbd43;display: block;transform:rotate( 40deg );margin-left:-27px;margin-top:-10px;z-index: 5;}
/*  top 영역   end */


/*    scb 메인영역   */
.scb_sh .scb_bg{background-image:url('../images/scb_bg.jpg');width: 1000px;height:480px ;padding-top:152px;z-index: 4;background-size:cover;background-repeat:no-repeat;}
.scb_sh .scb_bg > div{width:800px;height: 175px;background:#fff;box-shadow:3px 5px 15px #555;margin:0 auto;border-radius:10px;}
.scb_sh .scb_bg > div > .motion-1{position: absolute;top: 25px;left: 1500px;opacity:0}
.scb_sh .scb_bg > div  h2{font-size:25px;margin-bottom:10px;}
.scb_sh .scb_bg > div b{width: 720px;height: 2px;background: #888;display: block;}
.scb_sh .scb_bg > div p{font-size:30px;margin-top:10px;}
.scb_sh .next_icon{position: absolute;bottom:7%;left:904px;opacity:0;z-index: 90;}

/*  scb 메인영역 end */

/*  bottom 영역       */
.scb_sh .sh_bottom{height: 60px;}
.scb_sh .sh_bottom > div{width: 810px;height: 60px;background:rgba(21,61,91,1);padding:0 40px;overflow: hidden;float:left}
.scb_sh .sh_bottom > div > h3{color:#fff;float: left;margin-right:50px;line-height:60px;cursor:pointer}
.scb_sh .sh_bottom > div > h3 > img{margin-left:5px;vertical-align:middle;}
.scb_sh .sh_bottom > div > ul{line-height:60px;display: inline-block;margin-left:10px}
.scb_sh .sh_bottom > div > ul > li{float: left;color:#fff}

.scb_sh .sh_bottom .bar-box{width:350px; height: 15px;display: inline-block;margin-bottom:20px;}
.scb_sh .sh_bottom .time_bar{ background:#ffbc3f;height: 15px;}
.scb_sh .sh_bottom .right_box{width: 190px;background: #f5f5f5;padding:0;text-align: center;}
.scb_sh .sh_bottom .right_box > h4{line-height: 60px;text-align: center;}
.scb_sh .sh_bottom .right_box > h4 > a{color:#222;display: block;font-size:30px;font-weight:bold;}
.scb_sh .triag_02{width: 0px;height: 0px;  border-top:none;border-bottom:60px solid #f5f5f5;border-right:none;border-left: 50px solid  transparent;position: absolute;left:760px;top:540px;transform: rotate( 0deg );}
.scb_sh .triag_02:after{content:"";width: 2px;height:86px;background: #ffbd43;display: block;transform:rotate( 40deg );margin-left:-27px;margin-top:-10px;z-index: 5;}

.scb_sh .sh_bottom .right_box > ul > li:first-child > a > img{margin-right:30px}
.scb_sh .sh_bottom .right_box > ul > li:last-child > a > img{margin-left:30px}
/*  bottom 영역   end */

/*  Index 영역       */
.scb_sh .sh_index{width: 100px;height: 420px;background:#153d5b;border:5px solid #f5f5f5;border-radius:0 10px 10px 0;position: absolute;top:15%;left:0;border-left:none;z-index: 6;box-shadow: 2px 5px 5px #555;display: none;}
.scb_sh .sh_index > ul{padding:15px 0;background:url('../images/sh_index.png')no-repeat;height: 410px; overflow: auto;}

.scb_sh .sh_index > ul:after{content:"";width: 0px;height: 0px;  border-top:none;border-bottom:55px solid #153d5b;border-right:none;border-left:90px solid  transparent;position: absolute;left:0;top:415px;transform: rotate( 180deg );}

.scb_sh .sh_index > ul > li:after{content:"";}
.scb_sh .sh_index ul li{display: block;color:#fff;margin:1px 0 6px 5px;font-size:17px;letter-spacing:-0.8px;height: 45px;cursor:pointer}
.scb_sh .sh_index > ul > li:hover{color:#ffbc3f;}

/*  Index 영역   end */

/* 2 Page 영역*/
.scb_sh .scb_bg > .sub_box{width:940px;height:420px;background:rgba(255,255,255,0.9);box-shadow:3px 4px 5px #555;;margin:0 auto;border-radius:10px;padding:30px 30px;opacity:0;}
.scb_sh .scb_bg > .sub_box > ul{overflow-y:scroll;width: 100%;height: 100%;opacity:0}
.scb_sh .scb_bg > .sub_box > ul > li{padding:9px 0;border-bottom:1px solid #ccc;width: 820px;white-space:nowrap;overflow: hidden;font-size: 17px;padding-left:15px}
.scb_sh .scb_bg > .sub_box > ul > li.selected{background: rgba(255,207,118,1);border-radius:10px 10px 0 0}
.scb_sh .scb_bg > .sub_box > ul > li > a > span{margin-right:15px;display: inline-block;font-weight:600;color:#222}
.scb_sh .scb_bg > .sub_box > ul > li > a{color:#222}

	/* 하단 이전,다음 영역    */
.scb_sh .sh_bottom .right_box > ul{overflow: hidden;width: 100%;}
.scb_sh .sh_bottom .right_box > ul > li{float: left; color:#222;font-size: 25px;padding: 0 5px;}
/*
.scb_sh .sh_bottom .right_box > ul > li:first-child > a{color:#e62d4c}
.scb_sh .sh_bottom .right_box > ul > li > a{font-size: 25px;color:#222;font-weight: 600;}
*/
.scb_sh .sh_bottom .right_box > ul > li:last-child a{color:#222!important;font-size:25px !important;line-height:60px!important}
.right_box > ul > li:first-child > a{color:#e62d4c!important;font-weight: 600;}
.scb_sh .sh_bottom .right_box > ul > li > a > img{vertical-align: middle;}
	/* 하단 이전,다음 영역 End*/

/* 2 Page 영역 End*/

/* 3 Page 영역*/
.scb_sh .scb_bg > .sub_box01{margin-right:16px;border:2px solid #153d5b;overflow: hidden;opacity:0;}
.scb_sh .scb_bg > .sub_box02{border:2px solid #ffbc3f;opacity:0;}
.scb_sh .scb_bg > div > h4{display: table;text-align: center;font-size: 25px;color:#153d5b}
.scb_sh .scb_bg > div > h4 > img{display: block;}
.scb_sh .scb_bg > .other > ul{overflow-y:scroll;margin-top:20px;width: 100%;height:295px;opacity:0}
.scb_sh .scb_bg > .other > ul > li{margin-top:10px;font-size: 17px;white-space:nowrap;overflow: hidden;width: 350px;}
/* 3 Page 영역 End*/

/* 4 Page 영역    */
.scb_sh .sub_box > .pg_04{background:#7b7b7b;border-radius:0 0 10px 10px;margin:0 auto;padding:0 20px;height: 50px;width: 640px;}
.scb_sh .sub_box > .pg_04 > ul{overflow: hidden;width: 100%;height: 100%;}
.scb_sh .sub_box > .pg_04 > ul > li{float: left;color:#fff;font-size: 25px;font-weight: 600;height: 100%;line-height: 40px;}
.scb_sh .sub_box > .pg_04 > ul > li:last-child{width:84%;}
.scb_sh .sub_box > .pg_04 > ul > li:first-child{border-right:2px solid #fff;padding-right:20px;text-shadow: 2px 2px 2px #153d5b;}
.scb_sh .sub_box > .pg_04 > ul > li > img{display: block;margin:8px auto}
.scb_sh .sub_box > .txt_bx{width:800px;margin:10px auto;height: 100px;overflow: hidden;padding-left:30px}
.scb_sh .sub_box > .txt_bx > ul{overflow-y:scroll;height:70px;}
.scb_sh .sub_box > .txt_bx > ul > li{line-height: 1.4em;font-size: 17px;width: 740px;overflow: hidden;}


.scb_sh .sub_box > .sh_quiz{width: 100%;text-align: center;}
.scb_sh .sub_box > .sh_quiz > div{cursor:pointer;border:2px dashed #153d5b;border-radius:5px;display: inline-block;padding:20px;box-sizing:border-box;}
.scb_sh .sub_box > .sh_quiz > div:nth-child(2){cursor:pointer;border:2px dashed #ef5765;border-radius:5px;margin-left:120px;}
.scb_sh .sub_box > .sh_quiz > form > input{display: block;background: #153d5b; border: none;color: #fff;padding: 10px 20px;margin:15px auto;border-radius: 10px;font-size: 15px;font-weight: 600;cursor:pointer}

.scb_sh .qu_ok{position: absolute;top:60px;left:0; background:rgba(0,0,0,0.3);width: 1000px;height: 480px;display: none;}
.scb_sh .qu_ok > .popup{width: 760px;height: 210px;background:#153d5b;border-radius:10px;margin:135px auto;padding:20px;overflow: hidden;}
.scb_sh .qu_ok > .popup > div{float: left;height: 170px;}
.scb_sh .qu_ok > .popup > div:first-child{width: 181px;padding:15px 0 0 15px;}

.scb_sh .qu_ok > .popup > .ok_txt{width: 535px;background:#fff;border-radius:10px;padding:15px;overflow: hidden;}
.scb_sh .qu_ok > .popup > .ok_txt > .txt_top{border-bottom:2px solid #153d5b;padding-bottom:10px;overflow: hidden;width: 480px;}
.scb_sh .qu_ok > .popup > .ok_txt > .txt_top > h3{display: inline-block;}
.scb_sh .qu_ok > .popup > .ok_txt > .txt_top .button_bx{float: right;}
.scb_sh .qu_ok > .popup > .ok_txt > .txt_top .button_bx > button{border:none;background:#ffbc3f;font-weight: 600;font-size: 13px;padding:7px 10px;border-radius:5px;cursor:pointer;}
.scb_sh .qu_ok > .popup > .ok_txt > .txt_top .button_bx > button:hover{background:#153d5b;color:#fff}
.scb_sh .qu_ok > .popup > .ok_txt > .txt_bottom{margin-top:10px;height: 95px;overflow: hidden;}
.scb_sh .qu_ok > .popup > .ok_txt > .txt_bottom > p{overflow-y:scroll;height: 95px;}
.scb_sh .qu_ok > img{position: absolute;top:14%;right:11%}

/*wrong*/
.scb_sh .qu_wrong{position: absolute;top:60px;left:0; background:rgba(0,0,0,0.3);width: 1000px;height: 480px;display: none;}
.scb_sh .qu_wrong > .popup{width: 760px;height: 210px;background:#ef5765;border-radius:10px;margin:135px auto;padding:20px;overflow: hidden;}
.scb_sh .qu_wrong > .popup > div{float: left;height: 170px;}
.scb_sh .qu_wrong > .popup > div:first-child{width: 181px;padding:15px 0 0 15px;}

.scb_sh .qu_wrong > .popup > .wr_txt{width: 535px;background:#fff;border-radius:10px;padding:15px;overflow: hidden;}
.scb_sh .qu_wrong > .popup > .wr_txt > .txt_top{border-bottom:2px solid #ef5765;padding-bottom:10px;overflow: hidden;width: 480px;}
.scb_sh .qu_wrong > .popup > .wr_txt > .txt_top > h3{display: inline-block;}
.scb_sh .qu_wrong > .popup > .wr_txt > .txt_top .button_bx{float: right;}
.scb_sh .qu_wrong > .popup > .wr_txt > .txt_top .button_bx > button{border:none;background:#ffbc3f;font-weight: 600;font-size: 13px;padding:7px 10px;border-radius:5px;cursor:pointer;}
.scb_sh .qu_wrong > .popup > .wr_txt > .txt_top .button_bx > button:hover{background:#153d5b;color:#fff}
.scb_sh .qu_wrong > .popup > .wr_txt > .txt_bottom{margin-top:10px;height: 95px;overflow: hidden;}
.scb_sh .qu_wrong > .popup > .wr_txt > .txt_bottom > p{overflow-y:scroll;height: 95px;}
.scb_sh .qu_wrong > img{position: absolute;top:14%;right:11%}
/* 4 Page 영역 End*/


/* 5 Page 영역    */
.scb_sh  .sub_box .txt_bx05{background: #7b7b7b;width: 880px;height: 130px;border-radius:0 0 10px 10px;	}
.scb_sh  .sub_box .txt_bx05 > h2{color:#fff;text-align: center;text-shadow: 2px 2px 2px #153d5b;margin-bottom:5px;}
.scb_sh  .sub_box .txt_bx05 > ul{padding:0 10px 0 20px;overflow-y:scroll;height:77px;margin-right:10px}
.scb_sh  .sub_box .txt_bx05 > ul > li{color:#fff;font-size: 17px;}

.scb_sh  .sub_box > .sh_qu02{}
.scb_sh  .sub_box > .sh_qu02 > ul{margin:40px 0 38px 0}
.scb_sh  .sub_box > .sh_qu02 > ul > li{margin-bottom:10px;cursor:pointer}
.sh_qu02 > ul > li.on{color:red;}

/*정답확인*/
.scb_sh .qu_ok02{position: absolute;top:60px;left:0; background:rgba(0,0,0,0.3);width: 1000px;height: 480px;display: none;}
.scb_sh  form > input{display: block;background: #153d5b;border: none;color: #fff;padding: 10px 20px; margin:15px auto; border-radius: 10px;font-size: 15px;font-weight: 600;cursor: pointer;}
.scb_sh .qu_ok02 > .popup{width: 760px;height: 210px;background:#153d5b;border-radius:10px;margin:135px auto;padding:15px;overflow: hidden;}
.scb_sh .qu_ok02 > .popup > .ok_txt{background:#fff;border-radius:10px;padding:15px;overflow: hidden;}
.scb_sh .qu_ok02 > .popup > .ok_txt > .txt_top{border-bottom:2px solid #153d5b;padding-bottom:10px;overflow: hidden;width:650px;}
.scb_sh .qu_ok02 > .popup > .ok_txt > .txt_top > h3{overflow: hidden;white-space:nowrap;display: inline-block;}
.scb_sh .qu_ok02 > .popup > .ok_txt > .txt_bottom{margin-top:10px;height:85px;overflow-y:scroll;}
.scb_sh .qu_ok02 > .popup > .ok_txt > .txt_bottom > p{height:85px;color:red;margin-left:30px}
.scb_sh .qu_ok02 > .popup > .ok_txt > .txt_bottom > h3{margin-bottom:5px;color:#222}
.scb_sh .qu_ok02 > .popup > .ok_txt > .txt_bottom > h3 > img{vertical-align: middle;margin-right:5px}
.scb_sh .qu_ok02 > img{position: absolute;top:14%;right:13%}
.scb_sh .qu_ok02 > .popup > .ok_txt > .txt_top .button_bx{float: right;}
.scb_sh .qu_ok02 > .popup > .ok_txt > .txt_top .button_bx > button{border:none;background:#153d5b;font-weight: 600;font-size: 13px;padding:7px 10px;border-radius:5px;cursor:pointer;color:#fff}
.scb_sh .qu_ok02 > .popup > .ok_txt > .txt_top .button_bx > button:hover{background:#153d5b;color:#fff}
/*다시풀기*/
.scb_sh .qu_wr02{position: absolute;top:60px;left:0; background:rgba(0,0,0,0.3);width: 1000px;height: 480px;display: none;}
.scb_sh .qu_wr02 > .popup{width: 760px;height: 210px;background:#153d5b;border-radius:10px;margin:135px auto;padding:15px;overflow: hidden;}
.scb_sh .qu_wr02 > .popup > .ok_txt{background:#fff;border-radius:10px;padding:15px;overflow: hidden;}
.scb_sh .qu_wr02 > .popup > .ok_txt > .txt_top{border-bottom:2px solid #153d5b;padding-bottom:10px;overflow: hidden;width:650px;}
.scb_sh .qu_wr02 > .popup > .ok_txt > .txt_top > h3{overflow: hidden;white-space:nowrap;display: inline-block;}
.scb_sh .qu_wr02 > .popup > .ok_txt > .txt_bottom{margin-top:10px;height: 95px;overflow: hidden;}
.scb_sh .qu_wr02 > .popup > .ok_txt > .txt_bottom > p{overflow-y:scroll;height: 95px;color:red;margin-left:30px}
.scb_sh .qu_wr02 > .popup > .ok_txt > .txt_bottom > h3{margin-bottom:5px;color:#222}
.scb_sh .qu_wr02 > .popup > .ok_txt > .txt_bottom > h3 > img{vertical-align: middle;margin-right:5px}
.scb_sh .qu_wr02 > img{position: absolute;top:14%;left:770px}
.scb_sh .qu_wr02 > .popup > .ok_txt > .txt_top .button_bx{float: right;}
.scb_sh .qu_wr02 > .popup > .ok_txt > .txt_top .button_bx > button{border:none;background:#153d5b;font-weight: 600;font-size: 13px;padding:7px 10px;border-radius:5px;cursor:pointer;color:#fff}
.scb_sh .qu_wr02 > .popup > .ok_txt > .txt_top .button_bx > button:hover{background:#153d5b;color:#fff}
/* 5 Page 영역 End*/


/* 6 Page 영역    */
.scb_sh .sub_box > .pg06{background: #7b7b7b;border-radius: 0 0 10px 10px;margin: 0 auto;padding: 0 20px;height: 50px;width: 640px;}
.scb_sh .sub_box > .pg06 > h2{color:#fff; text-align: center;line-height: 50px;}
.scb_sh .sub_box > .pg06_txt{margin-top:30px;width: 880px;height: 300px;}
.scb_sh .sub_box > .pg06_txt > p{overflow-y:scroll;width: 880px;height: 300px;line-height: 1.6em;}
.scb_sh .print_btn{background: #153b5d;color:#fff;position: absolute;top:16.5%;left:850px;border:none;padding:8px 15px;font-weight: 600;font-size: 15px;border-radius:5px;cursor:pointer}
/* 6 Page 영역 End*/

/* 8 Page 영역    */
.scb_sh .sub_box > .pg08{background: #7b7b7b;border-radius: 0 0 10px 10px;margin: 0 auto;padding: 0 20px;height: 50px;width: 640px;position: absolute;top:15%;left:180px;}
.scb_sh .sub_box > .pg08 > h2{color:#fff; text-align: center;line-height: 50px;}

.scb_sh .sub_box > .left_bx{background:rgba(21,61,91,0.8);border-radius:10px 0 0 10px}
.scb_sh .sub_box > .right_bx{background:rgba(245,245,245,0.8);border-radius:0 10px 10px 0;}
.scb_sh .sub_box > .txt_08{float: left;height: 420px;width:50%;padding:7% 30px 20px 30px;}
.scb_sh .sub_box > .left_bx > h2{color:#fff;}
.scb_sh .sub_box > .txt_08 > h2{font-size: 25px;margin-bottom:10px}
.scb_sh .sub_box > .txt_08 > h2 > img{margin-right:10px;vertical-align: middle;}

.scb_sh .sub_box > .txt_08 > div{height: 275px; overflow: hidden;}
.scb_sh .sub_box > .txt_08 > div > ul{overflow-y:scroll;height:275px;}
.scb_sh .sub_box > .left_bx > div > ul{color:#fff; }
.scb_sh .sub_box > .left_bx  div  ul  li{line-height: 1.6em;width:375px;}
.scb_sh .sub_box > .right_bx > div > ul > li{color:#222}
.scb_sh > .last_txt{position: absolute;bottom:45px;left:904px;}
/* 8 Page 영역 End*/


/*4page Video*/
.sub_box .video-area{width: 710px;height:100%;background: #ccc;border-radius:10px;}

.sub_box .control-block {
    position: absolute;
    width:710px;
    height: 50px;
    background-color: #153d5b;
    margin: auto;
    top: 460px;
    left: 145px;
    padding: 0px 20px;
    text-align: left;
	border-radius:0 0 10px 10px
}
.sub_box .control-block > .play-btn {
    width: 36px;
    height: 36px;
    line-height: 35px;
    font-size: 25px;
    color: #000;
    text-align: center;
    background-color:#fff;
    margin: 7px;
    border-radius: 5px;
	border:none;
}
.sub_box .control-block > .pause-btn {
    width: 36px;
    height: 36px;
    line-height: 35px;
    font-size: 25px;
    color: #000;
    text-align: center;
    background-color:#fff;
    margin: 7px;
    border-radius: 5px;
}
.sub_box .control-block .play-slider-area {
    display: inline-block;
    height: 6px;
    width: 330px;
    margin:7px 10px;
	background: #fff;
	border:1px solid #ccc
}
.sub_box .play-slider-area > .ui-slider-handle {
    top: -0.5em;
}

.sub_box .control-block .volume-slider-area {
    display: inline-block;
    height: 6px;
    width: 50px;
    margin: 4px 16px;
}
.sub_box .volume-slider-area > .ui-slider-handle {
    top: -0.5em;
}
.sub_box .full-btn {
    float: right;
    width: 50px;
    height: 27px;
    line-height: 27px;
    font-size: 11px;
    color: #222;
    text-align: center;
    background-color: #fff;
    margin: 12px 0px 0px 10px;
    border-radius: 5px;
    border: 1px solid #fff;
    vertical-align: top;
}
.sub_box .control-block .volume-slider-area {
    display: inline-block;
    height: 6px;
    width: 50px;
    margin:7px 10px;
	background: #fff;
}
.sub_box .control-block .volume-label {
    display: inline-block;
    height: 30px;
    line-height: 13px;
    padding: 0px 0px 10px 10px;
    vertical-align: middle;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
	}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
	}
	button {
    cursor: pointer;
    margin: 0px;
    padding: 0px;
    border: none;
    background: none;
/*4page Video End*/