@charset "utf-8";
body{
	background:#000000;
	overflow:hidden; 
}
#container{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
#wrap {
	width:1920px;
    height:1080px;
    position: absolute;
    overflow: hidden;
    margin: 0 auto;
    position: absolute;
    font-family: "NanumGothic";
    font-weight: 800;

}
#wrap .background_img {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%; /*[20220105] 1080px -> 100% by lee*/
	z-index: -1;
}
#wrap.phonics .background_img{background: url("../images/bg_phonics.png") no-repeat;}
#wrap.course .background_img{background: url("../images/bg_coursebook.png") no-repeat;}
#wrap.literacy .background_img{background: url("../images/bg_literacy.png") no-repeat;}
#wrap.reading .background_img{background: url("../images/bg_reading.png") no-repeat;}
#wrap.listening .background_img{background: url("../images/bg_listening.png") no-repeat;}
#wrap.grammar .background_img{background: url("../images/bg_grammar.png") no-repeat;}

#wrap .header{
	display: flex;
	flex-direction: row;
	justify-content: center;
	font-family: myriad-pro, sans-serif;
	font-style: normal;
	font-size: 75px;
	font-weight: 900;
}
#wrap .header .title div{
	line-height: 150px;
	text-align: center;
}
#wrap .text{color: #000;}
#wrap .outline{
	position: absolute;
	z-index: -1;
	text-stroke: 13px #fff;
	-webkit-text-stroke: 13px #fff;
	user-select: none;
	text-shadow: 0px 10px 15px rgba(0,0,0,0.30);
}
#wrap .series{
	position: relative;
	top: 38px;
	width: 80px;
	height: 80px; 
	background: #fff; 
	border-radius: 40px;	
	text-align: center; 
	font-size: 65px;
	letter-spacing: -8px;
	line-height: 76px;
	margin-left: 25px;
	box-shadow: 0px 10px 15px rgba(0,0,0,0.15);
}
#wrap .series span{margin-right: 9px;}
#container.tab_menu_wrap {
    /* position: absolute; */
    /*display: flex;
    flex-direction: row;
	justify-content: space-between;*/
	width: 100%; /* [20220105] 1580px -> 100% by lee */
  height: 100%; /* [20220105] 600px -> 100% by lee */
	margin: 300px auto 0;
}

#container.tab_menu_wrap .tab_menu {
	width: 100%; /* [20220105] 1580px -> 100% by lee */
  /* [20220105] remove display, flex-direction, justify-content by lee */
  /* display: flex;
    flex-direction: row;
	justify-content: center; */
}
#container.tab_menu_wrap .tab_menu .tab_sub{
	width: 380px;
	margin-right: 20px;
	background: url('../images/shadow.png') no-repeat;
	background-size: contain;
}
#container.tab_menu_wrap .tab_menu .tab_sub:last-child{margin-right: 0px}
#container.tab_menu_wrap .tab_menu .tab_sub .ebook_img {
	width: 346px;
	height: 453px;
	margin: 17px 0 0 17px;
	/*box-shadow: 5px 5px 8px 0 rgba(0, 0, 0, 0.1);*/
}
#container.tab_menu_wrap .tab_menu .tab_sub .sb_img {
	background: url('../images/sb.jpg') no-repeat;
	background-size: 346px 453px;
}
#container.tab_menu_wrap .tab_menu .tab_sub .wb_img {
	background: url('../images/wb.jpg') no-repeat;
	background-size: 346px 453px;
}
#container.tab_menu_wrap .tab_menu .tab_sub .st_img {
	background: url('../images/st.jpg') no-repeat;
	background-size: 346px 453px;
}
#container.tab_menu_wrap .tab_menu .tab_sub .stwb_img {
	background: url('../images/stwb.jpg') no-repeat;
	background-size: 346px 453px;
}
#container.tab_menu_wrap .tab_menu .tab_sub a{
	display: inline-block;
	width: 265px;
	border-radius: 999px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 28px;
	color: #fff;
	box-shadow: 0px 5px 8px 0 rgba(0, 0, 0, 0.25);
	margin: 40px 58px;
}

#container .phonics .tab_menu_wrap .tab_menu .tab_sub a{background: #5c9cf3;}
#container .course .tab_menu_wrap .tab_menu .tab_sub a{background: #88d363;}
#container .literacy .tab_menu_wrap .tab_menu .tab_sub a{background: #9578e8;}
#container .reading .tab_menu_wrap .tab_menu .tab_sub a{background: #f78307;}
#container .listening .tab_menu_wrap .tab_menu .tab_sub a{background: #40c9a2;}
#container .grammar .tab_menu_wrap .tab_menu .tab_sub a{background: #82c75e;}

#container.tab_menu_wrap .tab_menu .tab_sub a.on{
	color: #fff;
	background: #444;
	box-shadow: none;
	transition: 0.2s;
}

.menu_btn{
	width: 400px;
	height: 60px;
	position: absolute;
	right: 63px;
	bottom: 60px;
}
.menu_btn a{
	display: inline-block;
	cursor: pointer;
	width: 185px;
	height: 56px;
	border-radius: 999px;
	box-shadow: 0px 5px 5px 0 rgba(0, 0, 0, 0.1);
}
.help{
	width: 185px;
	height: 56px;
	background: url('../images/help.png') no-repeat center;
	margin-right: 20px;
}
.materials{
	width: 185px;
	height: 56px;
	background: url('../images/materials.png') no-repeat center;
}

.help:hover{background: url('../images/help_h.png') no-repeat center;}
.materials:hover{background: url('../images/materials_h.png') no-repeat center;}