*{font-family: 'Nanum Square', sans-serif; word-break:keep-all;box-sizing:border-box;}
html { height: 100% }
body {
    margin: 0; padding: 0; font-weight:400;
    background-color: #fff; color: #000; font-size: 18px;
    padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin: 0px;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0}
i , em {font-style:normal}

a { color: #000; text-decoration: none; }
a:hover {text-decoration: none }
a:active {text-decoration: none }
a:focus {text-decoration: none }
.logo a {
    display: block;
    height: 100%;
}
input,select,button {vertical-align:middle }
form { margin: 0; }
ul, ol, li, p  { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; }
li { list-style-type: none; list-style-image: none; }
img { border: 0px; margin: 0px; }
strong {font-weight:700;}
/*margin-bottom*/
.mgb0{margin-bottom:0px !important}
.mgb5{margin-bottom:5px !important}
.mgb10{margin-bottom:10px !important}
.mgb15{margin-bottom:15px !important}
.mgb20{margin-bottom:20px !important}
.mgb30{margin-bottom:30px !important}
.mgb40{margin-bottom:40px !important}
.mgb45{margin-bottom:45px !important}
.mgb50{margin-bottom:50px !important}
.mgb60{margin-bottom:60px !important}
.mgb70{margin-bottom:70px !important}
.mgb80{margin-bottom:80px !important}
.mgb90{margin-bottom:90px !important}
/*margin-top*/
.mgt0{margin-top:0 !important}
.mgt5{margin-top:5px !important}
.mgt10{margin-top:10px !important}
.mgt20{margin-top:20px !important}
.mgt25{margin-top:25px !important}
.mgt30{margin-top:30px !important}
.mgt40{margin-top:40px !important}
.mgt50{margin-top:50px !important}
.mgt60{margin-top:60px !important}
.mgt70{margin-top:70px !important}
.mgt80{margin-top:80px !important}
.mgt84{margin-top:84px !important}
.mgt90{margin-top:90px !important}

.mgl0{margin-left:0 !important}
.mgl5{margin-left:5px !important}
.mgl10{margin-left:10px !important}
.mgl13{margin-left:13px !important}
.mgl15{margin-left:15px !important}
.mgl20{margin-left:20px !important}
.mgl30{margin-left:30px !important}
.mgl40{margin-left:40px !important}
.mgl70{margin-left:70px !important}
.mgl120{margin-left:120px !important}
.mgl125{margin-left:125px !important}
/*margin-bottom*/
.mgr0{margin-right:0 !important}
.mgr5{margin-right:5px !important}
.mgr10{margin-right:10px !important}
.mgr13{margin-right:13px !important}
.mgr15{margin-right:15px !important}
.mgr20{margin-right:20px !important}
.mgr30{margin-right:30px !important}
.mgr40{margin-right:40px !important}
.mgr50{margin-right:50px !important}
.mgr70{margin-right:70px !important}
.mgr120{margin-right:120px !important}
.mgr125{margin-right:125px !important}
/*paddingtop*/
.pdt0{padding-top:0px !important}
.pdt5{padding-top:5px !important}
.pdt10{padding-top:10px !important}
.pdt15{padding-top:15px !important}
.pdt20{padding-top:20px !important}
.pdt25{padding-top:25px !important}
.pdt30{padding-top:30px !important}
.pdt35{padding-top:35px !important}
.pdt40{padding-top:40 !important}
/*padding-left*/
.pdl0{padding-left:0 !important}
.pdl5{padding-left:5px !important}
.pdl10{padding-left:10px !important}
.pdl15{padding-left:15px !important}
.pdl20{padding-left:20px !important}
.pdl25{padding-left:25px !important}
.pdl30{padding-left:30px !important}
.pdl50{padding-left:50px !important}
.pdl60{padding-left:60px !important}
.pdl70{padding-left:70px !important}
.pdl75{padding-left:75px !important}
.pdl80{padding-left:80px !important}
.pdl135{padding-left:135px !important}
.pdl170{padding-left:170px !important}
/*padding-right*/
.pdr0{padding-right:0px !important}
.pdr5{padding-right:5px !important}
.pdr10{padding-right:10px !important}
.pdr15{padding-right:15px !important}
.pdr20{padding-right:20px !important}
.pdr25{padding-right:25px !important}
.pdr30{padding-right:30px !important}
.pdr50{padding-right:50px !important}
.pdr60{padding-right:60px !important}
.pdr70{padding-right:70px !important}
.pdr75{padding-right:75px !important}
.pdr80{padding-right:80px !important}
.pdr90{padding-right:90px !important}
.pdr100{padding-right:100px !important}
/*padding-bottom*/
.pdb0{padding-bottom:0px !important}
.pdb5{padding-bottom:5px !important}
.pdb10{padding-bottom:10px !important}
.pdb15{padding-bottom:15px !important}
.pdb20{padding-bottom:20px !important}
.pdb25{padding-bottom:25px !important}
.pdb30{padding-bottom:30px !important}
.pdb50{padding-bottom:50px !important}
.pdb60{padding-bottom:60px !important}
.pdb70{padding-bottom:70px !important}
.pdb75{padding-bottom:75px !important}
.pdb80{padding-bottom:80px !important}
.pdb90{padding-bottom:90px !important}
.pdb100{padding-bottom:100px !important}
.audio-bg-darkblue {background: #213053;}
/*text-align*/
.tect-left{text-align:left !important;}
.text-right{text-align:right !important;}
.text-center{text-align:center !important;}

.tc{text-align:center !important;}
.fwb{font-weight: bold !important;}
.fs3{font-size: 30px}
/*div-table*/

.div-table > * {
	display:table-cell;
	vertical-align:middle;
}

.div-table  {
	display:table;
	width:100%;
}

/*font-color*/
.col-red{
	color:#f24f50 !important;
}

/*list-style*/
.list-dot li,
.list-dash li{
	position:relative;
	padding-left:13px;
}

.list-dot li:after{
	position:absolute;
	left:0;
	top:0;
	content:'ㆍ';
	display:block;
}

.list-dash li:after{
	position:absolute;
	left:0;
	top:0;
	content:'-';
	display:block;
}



/*content*/
body,html{
	height:100%;
}
body{
}
#all_wrap {
    width: 100%;
    height: 100%;
    max-width: 750px;
    margin: 0 auto;
    overflow-x: hidden;
}
.cf:after {
	display:block;
	content:'';
	clear:both;
}
.div-inner{
	position:relative;
	padding:2% 4%;
	width:100%;
	box-sizing:border-box;
}

.main_head_wrap{
    border-bottom: 1px solid #b7b7b7;
    box-sizing: border-box;
    max-height: 150px;
    height: 10%;
}
.main_head_wrap .head_wrap{
    height: 100%;
    overflow: hidden;
    font-size: 0;
    padding: 0 4.5%;
    position: relative;
    /* background: linear-gradient(180deg, #007ede, #0083dc); */
}
.main_head_wrap .head_wrap > p{
	display: inline-block;
	*display: inline;
	zoom:1;
	width:50px;
	height:100%;
}
.main_head_wrap .head_wrap .logo{
	width:40%;
	font-size:0;
	background:url(//static-sdedu.akamaized.net/img1/audio_book/sub_logo.png) no-repeat left center;
	background-size: 10rem;
}
.main_head_wrap .head_wrap .logo_new {
	background-size: 6.5rem;
	background:url(//static-sdedu.akamaized.net/img1/audio_book/sub_logo_audio.png) no-repeat left center;
}
.main_head_wrap .head_wrap .logout-btn{
    float: right;
    color: #000;
    border: 1px solid #000;
    width: 145px;
    height: 48px;
    text-align: center;
    font-size: 26px;
    border-radius: 3em;
    line-height: 46px;
    position: absolute;
    right: 4.5%;
    top: 50%;
    transform: translateY(-50%);
}
.main_head_wrap .head_wrap .logout-btn a{
	display: block;
	height:100%;
	color:#000;
}
.content_wrap {
	height:86%;
	color:#fff;
	position:relative;
	width:100%;
	overflow-y: auto;
	background:#fff;
}
.content_wrap.intro{
    height: 85%;
    /* display: table; */
    background: linear-gradient(180deg, #0083dc, #01e5bf);
    width: 100%;
    display: block;
}
.content_wrap .mid_wrap{
    width: 100%;
    height:100%;
    overflow: hidden;
}

/*head*/
.header_top p{
  font-size:1.3rem;
	color:#666666;
	width:100%;
	text-align:center;
	display:inline-block;
	vertical-align: middle;
}

.header_top .close_btn {
	position:absolute;
	right:2%;
	top:calc(50% - 40px);
	font-size:55px;
	transform:rotate(45deg);
	font-family:'spoqa1';
	color:#000;
}

.logo_wrap{
	border-top:1px solid #b7b7b7;
}

.logo_wrap > .logout-btn {
	width:10%;
	text-align: right;
}

.main_head_wrap .head_wrap .exit-btn{
	width:4%;
	float:right;
	position: absolute;
	right: 6%;
	height: auto;
	line-height: 100%;
	top: calc(50% - 20px);
	background:url(//static-sdedu.akamaized.net/img1/omr_mock/close_icon.png) no-repeat center;
	background-size:contain;
	height: 43px;
}

.main_head_wrap .head_wrap .exit-btn a{
	font-size:0;
}

.main_head_wrap .head_wrap .exit-btn a span{
	transform:rotate(45deg);
	display: block;
	height:100%;
}

/*footer*/
.main_footer_wrap{
	background: #00191c;
	height:5%;
}
.footer p {
	font-size:0.887rem;
	color:#7c8283;
	text-align:center;
}
.footer p a {
	color:#7c8283;
}


@media screen and (max-width:750px) {
	.main_head_wrap{

	}
	.main_head_wrap .head_wrap .logo{
		background-size: 5.5rem;
	}
	.main_head_wrap .head_wrap .logout-btn{
		width: auto;
		height: auto;
		line-height: 1;
		padding: 0.4rem 0.65rem;
		font-size: 0.7rem;
	}
	.list-dot li {
		padding-left:4%;
	}
}