body {width:100%;}

/** 다크모드 */
.dark #header_wi100 {color:#fff; background-color:#191a1f;}
.dark #header_wi100 .subject01_str {background-color:#212121; border-bottom:1px solid #323232;}
.dark #header_wi100 .subject02 {max-width:1200px;}
.dark #header_wi100 .subject01detail2 a:hover {color:#fff;}
.dark #header_wi100 .dropmenu {display:none;}

/** 상단 베너 */
#header_wi100 {width:100%; font-family:'SCoreDream'; font-weight:500;}
#header_wi100 .topbanner_str{width:100%; height:85px; background-color:#000; no-repeat center center; background-size:cover; cursor:pointer;}
#header_wi100 .topbanner_str ul {width:100%; height:85px; margin:0 auto; cursor:pointer;}
#header_wi100 .topbanner_str ul li {width:100%; height:85px; float:left; cursor:pointer;}
#header_wi100 .topbanner_str .closeX {position:absolute; left:calc(50% + 470px); top:8px; width:14px; height:14px; background:url("/edutube_img/footer/menu_x.png") no-repeat center center; background-size:cover;}
#header_wi100 .topbanner_str .closeX:hover {background-size:30px;}

/** 로고 */
#header_wi100 .subject {width:100%; height:auto;}
#header_wi100 .subject01_str {width:100%; height:36px; background-color:#f2f2f2; border-bottom:1px solid #cfcfcf;}
#header_wi100 .subject01 {position:relative; width:100%; height:36px; max-width: 1000px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; font-size:12px; line-height:36px;}
#header_wi100 .subject01detail1 {float:left;}
#header_wi100 .subject01detail2 {float:right; font-family: 'Malgun Gothic','맑은 고딕',sans-serif; font-size:12px;}

#header_wi100 .subject01detail2 a {color:#767676; font-weight:400;}
#header_wi100 .subject01detail2 a:hover {color:#000; font-weight:400;}

#header_wi100 .subject01detailred {color:red; font-weight:bold;}

#header_wi100 .subject02 {box-sizing: border-box; position:relative; margin:0 auto; padding:0; width:100%; max-width:1000px; height:80px; text-align:center; font-size:0;}
#header_wi100 .subject02 img {display: inline-block; max-width: 100%;}

@media screen and (min-width: 340px; max-width: 420px) {
	#header_wi100 .subject02 img {
		max-width: 250px; padding-top:24px;
	}
}

#header_wi100 .subject02 .logo {box-sizing:border-box; display:inline-block; position:relative; margin:0 auto; padding:14px 0; height:80px; font-size:34px; font-weight:bold; vertical-align:middle;}
#header_wi100 .subject02 .logo .logo_txt {position:absolute; left:80px; bottom:-26px; width:240px; color:#767676; font-family:'Noto Sans KR',sans-serif; font-size:16px; letter-spacing:0.33em; text-align:center;}
#header_wi100 .subject02 .rightBox {box-sizing:border-box; display:inline-block; position:absolute; top:5px; right:0; height:70px; cursor:pointer;}
#header_wi100 .subject02 .rightBox .img {display:inline-block; width:56px; height:56px; vertical-align:middle;}
#header_wi100 .subject02 .rightBox .txt {display:inline-block; margin-left:4px; padding:15px 0; font-size:28px; font-weight:bold; color:rgb(23, 24, 96); vertical-align:middle;}

@media screen and (max-width:1000px) {
	#header_wi100 .subject02 {padding:0 10px; text-align:left;}
	#header_wi100 .subject02 .logo {padding:18px 0; font-size:26px;}
	#header_wi100 .subject02 .rightBox {right:4px;}
	#header_wi100 .subject02 .rightBox .img {padding:7px 0;}
	#header_wi100 .subject02 .rightBox .txt {display:none;}
}

/** 드랍메뉴 */
#header_wi100 .dropmenu{width:100%; height:53px; background-color:#35c5a5; z-index:1; 
	overflow-y:hidden; overflow-x:scroll; -ms-overflow-style:none; scrollbar-width:none;
}
#header_wi100 .dropmenu::-webkit-scrollbar {display:none;}
#header_wi100 .dropmenu ul {position:relative; margin:0 auto; padding:4px 0; width:100%; max-width:1000px; min-width:820px; height:53px;}
#header_wi100 .dropmenu ul:after {display:block; clear:both; content:"";}
#header_wi100 .dropmenu ul li {position:relative; float:left; line-height:45px; text-align:center; color:#fff; cursor:pointer;}
#header_wi100 .dropmenu ul li#menuMypage {float:right;}
#header_wi100 .dropmenu ul li#menuLogin {float:right; margin-right:6px;}
#header_wi100 .dropmenu ul li#menuLogin a {position:relative; margin-top:3px; padding:0 12px; height:40px; line-height:40px; font-weight:bold; background-color:#c92020; border-radius:20px; cursor:pointer;}
#header_wi100 .dropmenu ul li#menuLicense {float:right; margin-right:6px;}
#header_wi100 .dropmenu ul li#menuLicense a {position:relative; margin-top:2px; padding:0 12px; height:38px; line-height:38px; font-weight:bold; color:#138bee; background-color:#fff; border:2px solid #138bee; border-radius:22px; cursor:pointer;}
#header_wi100 .dropmenu ul li#menuLicense a:hover {background-color:rgba(255,255,255,0.8);}
#header_wi100 .dropmenu li a {display:block; padding:0 16px; font-size:15px; font-weight:500; font-family:Noto Sans KR,Roboto,sans-serif;}
#header_wi100 .dropcontent{display:none; position:absolute; top:45px; left:calc(50% - 500px); width:1000px; height:400px; background-color:tomato; z-index:200;}
#header_wi100 .dropmenu ul li:hover {}
#header_wi100 .dropmenu ul li:hover a {background-color:#2DA68A; border-radius:20px;}
#header_wi100 .dropmenu ul li.on {color:#fff;}
#header_wi100 .dropmenu ul li.on a {margin-top:5px; height:35px; line-height:35px; background-color:#2DA68A; border-radius:6px;}
#header_wi100 .dropmenu ul li .mypage {position:relative; margin-top:3px; padding:0 12px; height:40px; line-height:40px; font-weight:bold; background-color:#0580c0; border-radius:20px; cursor:pointer;}
#header_wi100 .dropmenu ul li:hover .mypage {background-color:#272e40; color:#fff;}
#header_wi100 .dropmenu ul li.on .mypage {background-color:#272e40; color:#fff;}

#header_wi100 .dropmenu ul .menu_bar {float:left; line-height:45px; color:#fff;}

@media screen and (max-width: 1000px) {
	#header_wi100 .dropmenu ul li a {padding:0 8px;}
}


/*-------------------------------------- POPUP  ----------------------------*/
#popupBox {display:none; position:fixed; width:100%; height:100%; z-index:999;}
#popupBox.active {display:block;}
#popupBox .popupBg {width:100%; height:100%; background-color:rgba(0,0,0,0.6);}
#popupBox .contentsBox {display:table; position:absolute; top:0px; left:0px; width:100%; height:100%;}

@media screen and (max-width:880px) {
	#popupBox .contentsBox .centerBox {box-sizing:border-box; position:relative; margin:0 auto; padding:10px; width:448px; border-radius:10px; color:#000; background-color:#fff; box-shadow:4px 4px 20px 0 rgba(0,0,0,0.4);}
}
@media screen and (min-width:881px) {
	#popupBox .contentsBox .centerBox {box-sizing:border-box; position:relative; margin:0 auto; padding:24px; width:448px; border-radius:10px; color:#000; background-color:#fff; box-shadow:4px 4px 20px 0 rgba(0,0,0,0.4);}
}
#popupBox .contentsBox .centerBox .titleBox {box-sizing:border-box; position:relative; width:100%; height:60px; text-align:center; font-size:24px;}
#popupBox .contentsBox .centerBox .titleBox .title {padding:10px; font-weight:bold;}
#popupBox .contentsBox .centerBox .titleBox .closeX {position:absolute; top:0; right:0; cursor:pointer;}
#popupBox .contentsBox .centerBox .info_box {width:100%;}
#popupBox .contentsBox .editInfoBox {box-sizing:border-box; display:table-cell; width:600px; height:100%; vertical-align:middle;}
#popupBox .contentsBox .editInfoBox .centerBox {width:100%; max-width:600px;}

#popupBox .contentsBox .centerBox .info_box .input_box {width:100%;}
#popupBox .contentsBox .centerBox .info_box .input_box:after {display:block; clear:both; content:"";}
#popupBox .contentsBox .centerBox .info_box .input_box:last-child {margin:0;}
#popupBox .contentsBox .centerBox .info_box .input_box .editTitle {box-sizing:border-box; float:left; padding:0 10px; width:50%; height:20px; font-size:13px; color:rgba(0,0,0,0.4);}
@media screen and (max-width:880px) {
	#popupBox .contentsBox .centerBox .info_box .input_box .inp {box-sizing:border-box; padding:14px 8px; width:100%; height:52px; border:1px solid #ccc; border-radius:10px;}
	#popupBox .contentsBox .centerBox .info_box .input_box .halfInp {box-sizing:border-box; float:left; margin:2px; padding:10px; width:calc(50% - 4px); height:52px; border:1px solid #ccc; border-radius:10px;}
}
@media screen and (min-width:881px) {
	#popupBox .contentsBox .centerBox .info_box .input_box .inp {box-sizing:border-box; padding:14px; width:100%; height:52px; border:1px solid #ccc; border-radius:10px;}
	#popupBox .contentsBox .centerBox .info_box .input_box .halfInp {box-sizing:border-box; float:left; margin:2px; padding:10px; width:calc(50% - 4px); height:52px; border:1px solid #ccc; border-radius:10px;}
}
#popupBox .contentsBox .centerBox .info_box .input_box .cnfmBox {float:left; width:100%; height:20px; font-size:13px;}
#popupBox .contentsBox .centerBox .info_box .input_box .cnfmBox:after {display:block; clear:both; content:"";}
#popupBox .contentsBox .centerBox .info_box .input_box .cnfmBox div {box-sizing:border-box; float:left; padding:0 10px; width:50%; height:100%;}
#popupBox .contentsBox .centerBox .info_box .input_box .loginBtn {margin:0; text-align:center; color:#fff; background-color:#fd6734; cursor:pointer; transition:all 0.2s;}
#popupBox .contentsBox .centerBox .info_box .input_box .joinBtn {margin:0; text-align:center; color:#fff; background-color:#fd6734; cursor:pointer; transition:all 0.2s;}
#popupBox .contentsBox .centerBox .info_box .input_box .loginBtn:hover,
#popupBox .contentsBox .centerBox .info_box .input_box .joinBtn:hover {background-color:#133281;}
#popupBox .contentsBox .centerBox .info_box .chkInput_box {margin:20px 0;}
#popupBox .contentsBox .centerBox .info_box .caution {font-size:12px; color:rgba(0,0,0,0.6);}

#popupBox .contentsBox .centerBox .chkInput_box .popupTermsBtn {margin-left:10px; padding:4px 8px; border:1px solid #ccc; border-radius:4px; cursor:pointer;}
#popupBox .contentsBox .centerBox .chkInput_box .popupTermsBtn:hover {background-color:#eee;}
#popupBox .contentsBox .joinBox .termPopup {box-sizing:border-box; display:none; position:absolute; padding:10px; left:4px; top:100px; width:calc(100% - 10px); height:400px; background-color:#fff; border:1px solid #ccc; border-radius:4px;}
#popupBox .contentsBox .joinBox .termPopup > div {width:100%; height:320px; overflow-y:scroll;}
#popupBox .contentsBox .joinBox .termPopup .closetermsBtn {position:absolute; bottom:10px; right:10px; padding:4px 8px; background-color:#eee; border:1px solid #ccc; border-radius:4px; cursor:pointer;}

/*-------------------------------------- POPUP  ----------------------------*/