﻿#contents.info .inner01.readers .sub_inner br {display:block;}
#contents.info .inner01.readers .sub_inner br.br320 {display:none}

#contents.info .sub_top.readers {background-image: url(https://static.hodooenglish.com/static/imgs/front/about/bg_readers_top.jpg);}

#contents.info .inner02.readers{background: #fff; clear:both;}
#contents.info .inner02.readers ul li .txt_area strong {font-size: 20px;}
#contents.info .inner02.readers ul li .txt_area span{font-size: 14px; font-weight:bold; display:block; padding:5px 0 5px 0;}
#contents.info .inner02.readers ul li .txt_area p{font-size: 14px;}
#contents.info .inner02.readers ul li .txt_area .txt_inner a{color:#ccc; display:block; width:250px; text-align:center; border:1px solid #ccc; padding:5px 0 3px 0; margin:10px auto 10px auto; font-size:16px; border-radius:15px; cursor:pointer; }
#contents.info .inner02.readers ul li .txt_area .txt_inner a:hover{background:#ccc; color:#fff;}

#contents.info .inner02.readers ul li:nth-child(1) .txt_area .txt_inner strong{color:#5EC0BF;}
#contents.info .inner02.readers ul li:nth-child(1) .txt_area .txt_inner a{color:#5EC0BF; border:1px solid #5EC0BF;}
#contents.info .inner02.readers ul li:nth-child(1) .txt_area .txt_inner a:hover{background:#5EC0BF; color:#fff;}

#contents.info .inner02.readers ul li:nth-child(2) .txt_area .txt_inner strong{color:#B1C331;}
#contents.info .inner02.readers ul li:nth-child(2) .txt_area .txt_inner a{color:#B1C331; border:1px solid #B1C331;}
#contents.info .inner02.readers ul li:nth-child(2) .txt_area .txt_inner a:hover{background:#B1C331; color:#fff;}

#contents.info .inner02.readers ul li:nth-child(3) .txt_area .txt_inner strong{color:#F5731B;}
#contents.info .inner02.readers ul li:nth-child(3) .txt_area .txt_inner a{color:#F5731B; border:1px solid #F5731B;}
#contents.info .inner02.readers ul li:nth-child(3) .txt_area .txt_inner a:hover{background:#F5731B; color:#fff;}

.txt14px-arrow-right{background-image: url(https://static.hodooenglish.com/static/imgs/front/about/readers_img02_txt_arrow_right.png); width:13px; height:14px; margin:0 5px; display:inline-block; position:relative; top:1px;}

#contents.info .inner05.readers{background: #f7f7f7;}

#contents.info .inner03 .info_tab li {float: left; width: 25%; cursor: pointer}

#contents.info .inner03 .info_tab .tab_li01.on a {color: #F5731B}
#contents.info .inner03 .info_tab .tab_li01.on a:after {background: #F5731B; opacity: 1}
#contents.info .inner03 .info_tab .tab_li02.on a {color: #F8B51E}
#contents.info .inner03 .info_tab .tab_li02.on a:after {background: #F8B51E; opacity: 1}
#contents.info .inner03 .info_tab .tab_li03.on a {color: #B1C331}
#contents.info .inner03 .info_tab .tab_li03.on a:after {background: #B1C331; opacity: 1}
#contents.info .inner03 .info_tab .tab_li04.on a {color: #5EC0BF}
#contents.info .inner03 .info_tab .tab_li04.on a:after {background: #5EC0BF; opacity: 1}


#contents.info .inner03.readers .info_tab .cont_area figure{padding-bottom:10px; text-align:center; width:100%;}

#contents.info .inner03.readers .sort-txt{padding:30px 20px 20px 20px; background:#f8f8f8; border:1px solid #eee; border-radius:50px; clear:both; overflow:hidden;}
#contents.info .inner03.readers .sort-txt dt{border-right:1px dotted #ccc; width:50%;}
#contents.info .inner03.readers .sort-txt dd{width:50%;}

#contents.info .inner03.readers .sort-txt dt p{padding:0 10px 0 0;}
#contents.info .inner03.readers .sort-txt dt p span{letter-spacing:1px;}
#contents.info .inner03.readers .sort-txt dd p{padding:0 10px 20px 20px}

#contents.info .inner03.readers .sort-txt dt, #contents.info .inner03.readers .sort-txt dd{float:left;}

#contents.info .inner03.readers .sort-txt p strong{display:block; text-align:left; font-size:14px;}
#contents.info .inner03.readers .sort-txt p span{display:block; text-align:left}
#contents.info .inner03.readers .sort-txt p span em{display:inline-block; margin-right:5px;}

#contents.info .inner05.readers .info_tab .cont_area figure img{width: auto;}


#contents.info .inner04.readers .cont-part-03{clear:both; height:750px}
#contents.info .inner04.readers .cont-part-03 figure{height:124px; padding:10px 0 0 0}
#contents.info .inner04.readers .cont-part-03 figure img{width:auto;}
#contents.info .inner04.readers .cont-part-03 li{position: relative;}
#contents.info .inner04.readers .cont-part-03 li p{display:inline-block;}
#contents.info .inner04.readers .cont-part-03 li div{background:#fff; display:inline-block; width:80%; height:250px; overflow:hidden; border-radius:150px; padding:30px 0}
#contents.info .inner04.readers .cont-part-03 li div strong{display:block; padding:15px 0 10px 0; font-size:16px;}
#contents.info .inner04.readers .cont-part-03 li div span{display:none; padding:0 0 7px 20px; text-align:left; font-size:12px;}
#contents.info .inner04.readers .cont-part-03 li div span.mo-txt{display:block; text-align:center; padding:0 0 7px 0; font-size:14px; color:#aaa}

#contents.info .inner04.readers .cont-part-03 li:nth-child(1){width:100%;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(1) div strong{color:#5EC0BF}
#contents.info .inner04.readers .cont-part-03 li:nth-child(1) p{position: absolute; top:100px; left:0px;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(1) p img{width:80px;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(1) div{ border:1px solid #5EC0BF; float:right}


#contents.info .inner04.readers .cont-part-03 li:nth-child(2){width:100%; float:left; padding:10px 0}
#contents.info .inner04.readers .cont-part-03 li:nth-child(2) div strong{color:#B1C331}
#contents.info .inner04.readers .cont-part-03 li:nth-child(2) p{position: absolute; top:100px; right:0px;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(2) p img{width:100px;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(2) div{border:1px solid #B1C331; float:left;}


#contents.info .inner04.readers .cont-part-03 li:nth-child(3){width:100%; float:right}
#contents.info .inner04.readers .cont-part-03 li:nth-child(3) div strong{color:#F5731B}
#contents.info .inner04.readers .cont-part-03 li:nth-child(3) p{position: absolute; top:100px; left:0px;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(3) p img{width:120px;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(3) div{border:1px solid #F5731B; float:right}


#contents.info .inner05.readers .step_list {overflow: hidden;width: 83.333333%;margin: 0 auto 25px}
#contents.info .inner05.readers .step_list li {float: left;position: relative;width: 33.333333%;height: 55px;border: 1px solid #d8d6d6;font-size: 0;text-align: center}
#contents.info .inner05.readers .step_list li:before {display: inline-block;width: 0;height: 100%;vertical-align: middle;content: ''}
#contents.info .inner05.readers .step_list li:after {display: block;position: absolute;top: -1px;right: -16px;z-index: 1;width: 17px;height: 57px;content: '';background: url(https://static.hodooenglish.com/static/imgs/front/account/bg_step_m.png) 0 0 no-repeat;background-size: 17px auto}
#contents.info .inner05.readers .step_list li:last-child:after {display: none}
#contents.info .inner05.readers .step_list li .txt {display: inline-block;font-size: 11px;color: #b6b6b6;vertical-align: middle;letter-spacing: 0}
#contents.info .inner05.readers .step_list li .tit {display: block;padding-top: 5px;font-weight: normal;font-size: 12px;color: #a6a6a6}
#contents.info .inner05.readers .step_list li.on .tit, #contents.info .inner05.readers .step_list li.on .txt {color: #fff}
#contents.info .inner05.readers .step_list li:nth-child(1) {border-right: 0 none;border-radius: 5px 0 0 5px}
#contents.info .inner05.readers .step_list li:nth-child(1).on {border-color: #ffb420;background: #ffb420}
#contents.info .inner05.readers .step_list li:nth-child(1).on:after {background-image: url(https://static.hodooenglish.com/static/imgs/front/account/bg_step1on_m.png)}
#contents.info .inner05.readers .step_list li:nth-child(2) {padding-left: 17px;border-right: 0 none}
#contents.info .inner05.readers .step_list li:nth-child(2).on {border-color: #b1c42c;background: #b1c42c}
#contents.info .inner05.readers .step_list li:nth-child(2).on:after {background-image: url(https://static.hodooenglish.com/static/imgs/front/account/bg_step2on_m.png)}
#contents.info .inner05.readers .step_list li:nth-child(3) {padding-left: 10px;border-radius: 0 5px 5px 0}
#contents.info .inner05.readers .step_list li:nth-child(3).on {border-color: #64bfc0;background: #64bfc0}


#contents.info .inner05.readers .cover_readers ul{padding:0 0 10px 0;}
#contents.info .inner05.readers .cover_readers ul li{width: 15%; text-align:center; display:inline-block; padding:0 0 0 0;}
#contents.info .inner05.readers .cover_readers ul li img{width:95%}

#contents.info .inner03.readers .cover_readers{padding:0 0 10px 0; border-bottom:none;}
#contents.info .inner03.readers .cover_readers span{width: 16%; text-align:center; display:inline-block; padding:0 0 0 0;}
#contents.info .inner03.readers .cover_readers span img{width:96%; margin:0 2%;}


@media screen and (min-width: 767px) {

#contents.info .inner05.readers .sub_headline{margin: 0 0 20px;}
#contents.info .inner05.readers .sub_explain.stxt{padding: 30px 0 0; font-size: 13px;}
#contents.info .inner05.readers .img_circle{padding: 20px 0 0;}


#contents.info .inner02.readers{background: #fff; clear:both;}
#contents.info .inner02.readers ul li .txt_area strong {font-size: 22px;}
#contents.info .inner02.readers ul li .txt_area span{font-size: 16px; font-weight:bold; display:block; padding:0 0 0 0;}
#contents.info .inner02.readers ul li .txt_area p{font-size: 14px;}
#contents.info .inner02.readers ul li .txt_area .txt_inner a{color:#ccc; display:block; width:250px; text-align:center; border:1px solid #ccc; margin:10px 0 0 0;  border-radius:15px; cursor:pointer; }
#contents.info .inner02.readers ul li .txt_area .txt_inner a:hover{background:#ccc; color:#fff;}

#contents.info .inner02.readers ul li:nth-child(1) .txt_area .txt_inner strong{color:#5EC0BF;}
#contents.info .inner02.readers ul li:nth-child(1) .txt_area .txt_inner a{color:#5EC0BF; border:1px solid #5EC0BF;}
#contents.info .inner02.readers ul li:nth-child(1) .txt_area .txt_inner a:hover{background:#5EC0BF; color:#fff;}

#contents.info .inner02.readers ul li:nth-child(2) .txt_area .txt_inner strong{color:#B1C331;}
#contents.info .inner02.readers ul li:nth-child(2) .txt_area .txt_inner a{color:#B1C331; border:1px solid #B1C331;}
#contents.info .inner02.readers ul li:nth-child(2) .txt_area .txt_inner a:hover{background:#B1C331; color:#fff;}

#contents.info .inner02.readers ul li:nth-child(3) .txt_area .txt_inner strong{color:#F5731B;}
#contents.info .inner02.readers ul li:nth-child(3) .txt_area .txt_inner a{color:#F5731B; border:1px solid #F5731B;}
#contents.info .inner02.readers ul li:nth-child(3) .txt_area .txt_inner a:hover{background:#F5731B; color:#fff;}


#contents.info .inner03.readers .sub_explain {margin: 0 0 20px;}
#contents.info .inner03.readers .info_tab .cont_area figure {float:none; width:auto;}
#contents.info .inner03.readers .info_tab .cont_area .cont .txt {float:none; padding: 12px 0 0; width:100%; clear:both;}
#contents.info .inner03.readers .info_tab .cont_area .cont {position:relative;}
#contents.info .inner03.readers .info_tab .cont_area {position: relative; padding: 45px 0 0; height: auto; text-align: left;}
#contents.info .inner03.readers .info_tab {padding: 38px 0 0 0;}


#contents.info .inner03.readers .sort-txt{padding:30px 20px 20px 20px; background:#f8f8f8; border:1px solid #eee; border-radius:50px; clear:both; overflow:hidden;}
#contents.info .inner03.readers .sort-txt dt{border-right:1px dotted #ccc; width:40%;}
#contents.info .inner03.readers .sort-txt dd{width:60%;}

#contents.info .inner03.readers .sort-txt dt p{padding:0 30px 0 30px;}
#contents.info .inner03.readers .sort-txt dt p span{letter-spacing:1px;}
#contents.info .inner03.readers .sort-txt dd p{padding:0 30px 20px 50px}

#contents.info .inner03.readers .sort-txt dt, #contents.info .inner03.readers .sort-txt dd{float:left;}

#contents.info .inner03.readers .sort-txt p strong{display:block; text-align:left; font-size:14px;}
#contents.info .inner03.readers .sort-txt p span{display:block; text-align:left}
#contents.info .inner03.readers .sort-txt p span em{display:inline-block; margin-right:5px;}



#contents.info .inner05.readers .step_list {margin: 0 auto}
#contents.info .inner05.readers .step_list li {height: 60px}
#contents.info .inner05.readers .step_list li:after {right: -23px;width: 23px;height: 60px;background: url(https://static.hodooenglish.com/static/imgs/front/account/bg_step_pc.png) 0 0 no-repeat;background-size: 23px auto}
#contents.info .inner05.readers .step_list li:nth-child(2) {padding-left: 23px}
#contents.info .inner05.readers .step_list li .txt {font-size: 14px}
#contents.info .inner05.readers .step_list li .tit {display: inline-block;padding: 0 0 0 11px;font-size: 16px}
#contents.info .inner05.readers .step_list li:nth-child(1) {border-right: 0 none}
#contents.info .inner05.readers .step_list li:nth-child(1).on:after {background-image: url(https://static.hodooenglish.com/static/imgs/front/account/bg_step1on_pc.png)}
#contents.info .inner05.readers .step_list li:nth-child(2) {padding-left: 17px;border-right: 0 none}
#contents.info .inner05.readers .step_list li:nth-child(2).on:after {background-image: url(https://static.hodooenglish.com/static/imgs/front/account/bg_step2on_pc.png)}

#contents.info .inner05.readers ul li span{padding:0 0 0 0;}

#contents.info .inner04.readers .cont-part-03{clear:both; height:600px}
#contents.info .inner04.readers .cont-part-03 figure{height:124px; padding:10px 0 0 0}
#contents.info .inner04.readers .cont-part-03 figure img{width:auto;}
#contents.info .inner04.readers .cont-part-03 li p{display:inline-block;}
#contents.info .inner04.readers .cont-part-03 li p img{width:auto;}
#contents.info .inner04.readers .cont-part-03 li div{background:#fff; display:inline-block; width:370px; height:300px; overflow:hidden; border-radius:100px; padding:30px 0}
#contents.info .inner04.readers .cont-part-03 li div strong{display:block; padding:15px 0 10px 0; font-size:18px;}
#contents.info .inner04.readers .cont-part-03 li div span{display:block; padding:0 0 7px 40px; text-align:left; font-size:15px;}
#contents.info .inner04.readers .cont-part-03 li div span.mo-txt{display:none;}

#contents.info .inner04.readers .cont-part-03 li:nth-child(1){width:100%;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(1) div strong{color:#5EC0BF}
#contents.info .inner04.readers .cont-part-03 li:nth-child(1) p{padding:20px; position: absolute; top:100px; left:140px;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(1) div{float:none;}

#contents.info .inner04.readers .cont-part-03 li:nth-child(2){width:50%; float:left; padding:0 0 0 0}
#contents.info .inner04.readers .cont-part-03 li:nth-child(2) p{padding:20px; position: absolute; top:-200px; right:-330px;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(2) div strong{color:#B1C331}

#contents.info .inner04.readers .cont-part-03 li:nth-child(3){width:50%; float:right}
#contents.info .inner04.readers .cont-part-03 li:nth-child(3) p{padding:20px; position: absolute; top:100px; left:-85px;}
#contents.info .inner04.readers .cont-part-03 li:nth-child(3) div strong{color:#F5731B}

#contents.info .inner01 figure img {width: auto;}

#contents.info .inner05.readers .cover_readers ul li{width: 8%;}


#contents.info .inner03.readers .cover_readers{margin-bottom:30px;}
#contents.info .inner03.readers .cover_readers span{width: 8%;}

}

@media screen and (min-width: 768px) {

#contents.info .inner03.readers .info_tab .cont_area figure img{width: auto;}

}

@media screen and (max-width: 320px) {
#contents.info .inner01.readers .sub_inner br.br320 {display:block}
#contents.info .inner01.readers .sub_inner br {display:none;}
}
