@charset "utf-8";
@import "font/webfonts.css";

html body{position:absolute;width:100%;height:100%;margin:0px;padding:0px;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;font-smoothing:antialiased;word-break:keep-all;overflow:hidden;background-color:#666;}
div, ul, li, p, input, textarea, table, tr, td{margin:0; padding:0;}
dl, dt, dd, ul, ol, li{list-style:none;}
textarea{margin:0px;background:transparent;border:none;outline:none;resize:none;}
button{padding:0px;cursor:pointer;border:none;outline:none;background-color:transparent;}

#container{position:absolute;top:0px;left:0px;width:100%;height:100%;}
#wrap{position:absolute;top:0px;left:0px;width:1280px;height:720px;overflow:hidden;}
.container-pc{display:flex;align-items:center;justify-content:center;}

/*----------------------------------------------------------------------------------
  mediaUI
---------------------------------------------------------------------------------- */
#mediaUI{position:absolute;top:0px;left:0px;width:100%;height:100%;margin:0px;padding:0px;}
#learningVideo{position:absolute;top:0px;left:0px;width:100%;height:100%;margin:0px;padding:0px;}

/*----------------------------------------------------------------------------------
  contentUI
---------------------------------------------------------------------------------- */
#contentUI{position:absolute;top:0px;left:0px;width:100%;height:100%;margin:0px;padding:0px;}
.contents-stage{position:absolute;top:0px;left:0px;width:100%;height:100%;}
.syncObj{display:none;}

/* ÇнÀ¸ñÇ¥ */
#goalBG{background:url(../img/contentUI/goal/goalBG.png) no-repeat;}
#goal{height:calc(100% - 70px);}

.goal-subject{width:100%;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.goal-subject-icon{width:120px;height:120px;margin-bottom:-15px;background:url(../img/contentUI/goal/subject-icon.png) no-repeat;}
.goal-subject-title{color:#fff;font-family:"gmsb";font-size:65px;letter-spacing:-1px;text-shadow:0px 0px 11px rgba(0,0,0,0.5);}

.goal-con-wrap{width:100%;height:calc(100% - 250px);display:flex;flex-wrap:nowrap;flex-direction:row;align-items:center;justify-content:center;}

.goal-con{width:calc(50% - 20px);height:100%;}
.goal-con-tag-wrap{width:100%;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.goal-con-tag{letter-spacing:-1px;text-align:center;}
.goal-con-title{margin-bottom:-5px;color:#fff;font-family:"gmsb";font-size:35px;}
.goal-con-title-sub{color:#666;font-family:"edr";font-size:20px;}

.goal-con-txt-wrap{width:calc(100% - 30px);height:calc(100% - 100px);padding:0px 15px;;display:flex;align-items:flex-start;justify-content:center;}
#goal-con-txt-wrap-content{background:url(../img/contentUI/goal/conBG-content.png) no-repeat;background-position:50% 50%;}
#goal-con-txt-wrap-goal{background:url(../img/contentUI/goal/conBG-goal.png) no-repeat;background-position:50% 50%;}

.learning-goal-wrap{width:auto;height:auto;}
.learning-goal{display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-start;justify-content:flex-start;}
.learning-goal-bullet{width:40px;height:40px;background:url(../img/contentUI/goal/goal-bullet.png) no-repeat;}
.learning-goal-txt{width:auto;max-width:540px;padding:6px 0px 0px 2px;color:#fff;font-family:"edr";font-size:24px;line-height:28px;letter-spacing:-1px;display:inline-block;}


.goal-con-split{width:10px;height:calc(100% - 30px);margin-right:10px;border-right:1px dotted #fff;}

/* Á¤¸®Çϱâ */
#summaryBG{background:url(../img/contentUI/summary/summaryBG.png) no-repeat;}
#summary{width:calc(100% - 247px);}
.summary-subject{position:relative;width:100%;height:200px;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:flex-end;}
.summary-subject-icon{width:100px;height:120px;margin-bottom:-15px;background:url(../img/contentUI/summary/subject-icon.png) no-repeat;}
.summary-subject-title{color:#fff;font-family:"gmsb";font-size:65px;letter-spacing:-1px;text-shadow:0px 0px 11px rgba(0,0,0,0.5);}
.summary-con-wrap{position:relative;width:100%;height:calc(100% - 270px);}
.summary-con{width:calc(100% - 20px);height:calc(100% - 90px);padding:30px 10px 10px 10px;}
.summary-rank{display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-start;justify-content:flex-start;}
.summary-rank-txt{flex:1;}
.summary-rank0{padding-bottom:5px;}
.summary-rank0-bullet{width:40px;height:40px;background:url(../img/contentUI/summary/rank0-bullet.png) no-repeat;}
.summary-rank0-txt{width:auto;padding:7px 0px 0px 2px;color:#fff;font-family:"gmsm";font-size:33px;line-height:35px;letter-spacing:-1px;}
.summary-rank1{padding:5px 0px 0px 30px;}
.summary-rank1-bullet{width:4px;height:4px;margin:15px 7px 0px 0px;background-color:#b0ff43;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}
.summary-rank1-txt{width:auto;color:#fff;font-family:"edr";font-size:28px;line-height:32px;letter-spacing:-1px;}
.summary-rank2{padding:3px 0px 0px 50px;}
.summary-rank2-bullet{width:7px;height:2px;margin:14px 5px 0px 0px;background-color:#b0ff43;}
.summary-rank2-txt{width:auto;color:#fff;font-family:"edr";font-size:24px;line-height:28px;letter-spacing:-1px;}
.summary-rank3{padding:3px 0px 0px 70px;}
.summary-rank3-bullet{width:3px;height:3px;margin:14px 5px 0px 0px;background-color:#b0ff43;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}
.summary-rank3-txt{width:auto;color:#fff;font-family:"edr";font-size:22px;line-height:28px;letter-spacing:-1px;}
.summary-page-wrap{position:absolute;bottom:0px;left:0px;width:100%;height:50px;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center;z-index:1;}
.summary-btn{width:50px;height:50px;}
.summary-prev-btn{background:url(../img/contentUI/summary/prevBG.png) no-repeat;}
.summary-next-btn{background:url(../img/contentUI/summary/nextBG.png) no-repeat;}
#summary-prev{background:url(../img/contentUI/summary/prev.png) no-repeat;}
#summary-next{background:url(../img/contentUI/summary/next.png) no-repeat;}
.summary-circle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;}
.summary-page-circle-btn{width:14px;height:14px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background-color:#fff;}

/*----------------------------------------------------------------------------------
  balloonUI
---------------------------------------------------------------------------------- */
#balloonUI{position:absolute;bottom:65px;right:5px;width:126px;height:136px;display:none;}
.balloon{width:126px;height:136px;background:url(../img/balloonUI/balloon.png) no-repeat;display:flex;align-items:center;justify-content:center;}
.balloon-txt{color:#fff;font-family:"scd4";font-size:16px;line-height:21px;letter-spacing:-1px;text-align:center;}
.balloon-txt-impact{font-family:"scd8";font-size:21px;color:#b2fe54;}

/*----------------------------------------------------------------------------------
  captionUI
---------------------------------------------------------------------------------- */
#captionUI{position:absolute;bottom:70px;left:0px;width:100%;height:150px;margin-bottom:-200px;}
.caption-wrap{width:100%;height:150px;background-color:rgba(0,0,0,0.8);}
.caption-txt-wrap{width:calc(100% - 60px);height:130px;padding:10px 40px 0px 20px;}
.caption-dialouge-wrap{display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-start;justify-content:flex-start;}
.caption-txt{color:#fff;font-family:"scd4";font-size:16px;line-height:20px;}
.caption-txt-impact{color:#b2fe54;font-family:"scd8";}
.caption-dialouge{margin-left:5px;flex:1;}
.caption-close{position:absolute;top:10px;right:10px;width:20px;height:20px;margin:0px;}
.caption-close-icon{width:20px;height:20px;background:url(../img/captionUI/close.png) no-repeat;}

/*----------------------------------------------------------------------------------
  indexUI
---------------------------------------------------------------------------------- */
#indexUI{position:absolute;top:0px;left:-300px;width:300px;height:100%;margin:0px;padding:0px;background-color:#fff;border-right:3px solid #000;display:flex;align-items:center;justify-content:center;}
#index-box{width:100%;height:calc(100% - 70px);padding-bottom:70px;}
#index-tag-wrap{width:100%;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:#b2fe54;}
#index-tag{width:100px;height:100px;background:url(../img/indexUI/index_tag.png) no-repeat;}
#index-tag-txt{width:100%;height:auto;padding:10px 0px 15px 0px;color:#000;font-family:"gmsb";font-size:28px;letter-spacing:-1px;text-align:center;}
#index-close{width:30px;height:30px;margin:10px 10px 0px auto;padding:0px;}
#index-close-icon{width:30px;height:30px;margin:0px;background:url(../img/indexUI/close.png) no-repeat;}
#index-con{width:100%;height:auto;}
.index-btn{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;}
.rank1{margin:15px 0px 5px 0px;}
.rank2{margin-left:25px;padding:3px 0px;}
.index-rank1-icon{width:50px;height:35px;background:url(../img/indexUI/index_bullet.png) no-repeat;}
.index-rank1-txt{padding:6px 0px 0px 2px;color:#000;font-family:"gmsb";font-size:22px;}
.index-rank2-icon{width:6px;height:6px;margin-top:6px;background-color:#000;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}
.index-rank2-txt{max-width:230px;margin-left:5px;color:#999;font-family:"scd4";font-size:17px;line-height:19px;letter-spacing:-1px;text-align:left;}

/*----------------------------------------------------------------------------------
  navigationUI
---------------------------------------------------------------------------------- */
#navigationUI{position:absolute;bottom:-50px;left:0px;width:100%;height:100px;background:url(../img/navigationUI/naviBG.png);}
.navigation-wrap{position:absolute;bottom:0px;left:10px;width:calc(100% - 20px);height:65px;}
.seek{
	width:100%;height:10px;background-color:#fff;
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
	cursor:pointer;border:none;outline:none;overflow:hidden;
}
.seek .ui-slider-range{top:0px;left:0px;height:10px;background-color:#b2fe54;cursor:pointer;border:none;outline:none;}
.seek .ui-slider-handle{width:10px;height:10px;cursor:pointer;border:none;outline:none;}
.navigation-obj-wrap{width:100%;height:50px;padding-top:5px;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:flex-start;}
.rate-wrap{width:75px;height:24px;margin-right:10px;-moz-border-radius:18px;-webkit-border-radius:18px;border-radius:18px;border:2px solid #fff;}
.select-rate{width:auto;height:auto;}
.select-rate-obj-wrap{position:absolute;bottom:35px;left:10px;width:59px;height:auto;display:none;}
.select-rate-btn-wrap{width:auto;height:auto;padding:5px 0px;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;background-color:#000;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
.select-rate-btn{padding:5px 0px;color:#fff;font-family:"scd4";font-size:13px;line-height:13px;letter-spacing:-1px;text-align:center;}
.select-rate-tail{margin-top:-13px;color:#000;font-family:"scd4";font-size:20px;letter-spacing:-1px;text-align:center;}
.cur-rate{width:75px;height:24px;min-height:24px;color:#fff;font-family:"scd4";font-size:15px;letter-spacing:-1px;display:flex;align-items:center;justify-content:center;}
.timer{margin:0px 10px;color:#fff;font-family:"scd4";font-size:15px;line-height:15px;}
.control-btn{position:relative;width:25px;height:25px;padding:0px;margin:0px;}
#play{background:url(../img/navigationUI/play-pause.png) no-repeat;}
#replay{background:url(../img/navigationUI/replay.png) no-repeat;}
#caption{background:url(../img/navigationUI/caption.png) no-repeat;}
#volume{background:url(../img/navigationUI/volume.png) no-repeat;}
.volume-gauge{
	width:70px;height:10px;background-color:#fff;
	border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
	cursor:pointer;border:none;outline:none;overflow:hidden;
}
.volume-gauge .ui-slider-range{height:10px;margin:0px;background-color:#b2fe54;cursor:pointer;border:none;outline:none;}
.volume-gauge .ui-slider-handle{width:10px;height:10px;margin:0px;cursor:pointer;border:none;outline:none;}
.control-blank{width:auto;height:50px;flex:1;}
#index-open{
	width:70px;height:28px;margin-right:5px;-moz-border-radius:18px;-webkit-border-radius:18px;border-radius:18px;border:2px solid #fff;
	color:#fff;font-family:"scd4";font-size:15px;text-align:center;;display:flex;align-items:center;justify-content:center;
}
#fullscreen{width:32px;height:50px;background:url(../img/navigationUI/fullscreen.png) no-repeat;}
#lock{width:32px;height:50px;background:url(../img/navigationUI/lock.png) no-repeat;}
.page-wrap{display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:flex-start;}
#prev{background:url(../img/navigationUI/prev.png) no-repeat;}
#next{background:url(../img/navigationUI/next.png) no-repeat;}
.page-txt{padding-top:3px;color:#fff;font-family:"ibmm";font-size:22px;}
#current-page{color:#b2fe54;}
.page-txt-slash{margin:0px 5px;}

/*----------------------------------------------------------------------------------
  mobileUI
---------------------------------------------------------------------------------- */
#mobileUI{position:absolute;top:0px;left:0px;width:100%;height:100%;display:none;}
#mediaPlay{position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.8);display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center;}
.play-icon{width:204px;height:280px;background:url(../img/mobileUI/play.png) no-repeat;}
.play-txt{color:#fff;font-family:"scd3";font-size:30px;line-height:50px;text-align:center;letter-spacing:-1px;}
.play-txt-guide{font-size:40px;}
.play-txt-guide-impact{font-family:"scd9";font-size:45px;color:#b2fe54;}

/*----------------------------------------------------------------------------------
  loadingUI
---------------------------------------------------------------------------------- */
#loadingUI{position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.7);}
#loading-center{position:relative;width:100%;height:100%;}
#loading-center-absolute{position:absolute;left:50%;top:50%;height:200px;width:200px;margin-top:-100px;margin-left:-100px;	}
.object{
    -moz-border-radius:50% 50% 50% 50%;
	-webkit-border-radius:50% 50% 50% 50%;
	border-radius:50% 50% 50% 50%;
	position:absolute;
	border-left:5px solid #FFF;
	border-right:5px solid #FFF;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	-webkit-animation:animate 2s infinite;
	animation:animate 2s infinite;	
}
#object_one{left:75px;top:75px;width:50px;height:50px;}
#object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}
#object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}
#object_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}

@-webkit-keyframes animate{
	50%{
		-ms-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		transform:rotate(180deg);
	}
	100%{
		-ms-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
}

@keyframes animate{
	50%{
		-ms-transform:rotate(180deg); 
		-webkit-transform:rotate(180deg); 
		transform:rotate(180deg); 
	}
	100%{
		-ms-transform:rotate(0deg); 
		-webkit-transform:rotate(0deg); 
		transform:rotate(0deg); 
	}  
}