@charset "utf-8";


/* 기존 css 중복 */
.top_main{background:none; border-bottom:none}
.footer_warp{ padding-top: 5px;}

/* 슬라이드 배너 버튼 */
.area_1 .slide_btn{position: absolute;bottom:8px;margin-left:10px;}
.area_1 .slide_btn li{float:left;height: 10px;margin: 0 5px;width: 9px;}
.area_1 .slide_btn li a{background-color:#a2a2a2;display: block;width: 9px;height: 9px;font-size: 0;border-radius: 50px;}
.area_1 .slide_btn li a:hover{background-color: #f58232;}
.area_1 .btn_group{position: absolute;z-index:10;bottom:8.5px;right:30px;width:100px;height:33px;right:0px;}
.area_1 .btn_group a{float:left;}
.area_1 .btn_group .play{background:url(../img/temp/controls.png) no-repeat -86px -11px;position: absolute; bottom: 0;width: 33px;height: 11px;display: block;font-size:0px;right:40px;}
.area_1 .btn_group .stop{background:url(../img/temp/controls.png) no-repeat -86px -44px;position: absolute; bottom: 0;width: 33px;height:11px;display: block;font-size:0px;right:26px;}
.area_1 .btn_group .left{background:url(../img/temp/controls.png) no-repeat 0px 15.5px;position: absolute;bottom: -3px;width: 20px;height: 31px;height: 32px;display: block;font-size:0px;right:25px;background-size: 50px;}
.area_1 .btn_group .right{background:url(../img/temp/controls.png) no-repeat  -22px 15.5px;position: absolute;bottom: -3px;width: 20px;height: 31px;height: 32px;display: block;font-size:0px;right:5px; background-size: 50px;}

/* main */
.area_wrap{width:980px;margin-top: 25px;}/*margin-top:30px;*/
.area_wrap:after{display:block;clear:both;content:''}

.area_1{float:left;width: 321px;margin-right: 8px;}
.area_1 .bx-wrapper{border-radius: 10px;overflow:hidden;}
.area_2{float:left;width: 322px;margin-right: 8px;}

.area_center{overflow:hidden;}
.area_center div{float:left;margin-bottom:4px;}

.area_center1 [class*='area_2_m']{margin-bottom: 8px;height: 197px;background: #fff url(/img/main/main_area01.png);border-radius: 10px 0 0 10px;padding: 20px 30px;width: calc(50% - 1px);}
.area_center1 [class*='area_2_m'] > a{color: #fff;}
.area_center1 [class*='area_2_m'] > a p.tit{font-family:"GmarketSans";font-size: 1.6em;font-weight: bold;}
.area_center1 .area_2_m_01 {border-radius: 0 10px 10px 0;background-image: url(/img/main/main_area02.png);}

.area_center2{background:#d9e4f3;border-radius: 10px;height: 198px;}
.area_center2 a{color: #253a91;font-size: 1.1em;font-weight: 700;display: block;}
.area_center2 > div{width:50%;border-right:1px solid #fff;height:100%;text-align: center;}
.area_center2 > div a{padding-top:144px;background: url(/img/main/nmain_area2_4_1.png) no-repeat left center;}
.area_center2 > ul{width: 50%;height: 100%;float: left;}
.area_center2 > ul li{display: table;width: 100%;height: 50%;padding-left: 32px;}
.area_center2 > ul li:first-child{border-bottom:1px solid #fff;}
.area_center2 > ul li a{display:table-cell;vertical-align:middle;padding-left: 45px;background: no-repeat left center;}
.area_center2 > ul li:first-child a{background-image:url(/img/main/nmain_area2_2_1.png)}
.area_center2 > ul li:last-child a{background-image:url(/img/main/nmain_area2_2_2.png)}

.main_area2{overflow:hidden;height: 100%;}
.main_area2 li{float:left;/* margin-right:4px; */margin-left: 0;}
.main_area2 li a img{width:160px;height:160px;}

.area_center3{overflow:hidden;margin-top: 9px;background: #1ab4a0;height: 157px;border-radius: 10px;text-align: center;}
.area_center3 li{float:left;/* margin-right:4px; */width: 50%;height: 100%;padding: 20px 0; transition:0.3s;}
.area_center3 li a{display:block;color: #fff;font-size: 17px;font-weight: 600;padding: 89px 0 10px 0;background: no-repeat center bottom 36px;}
.area_center3 li:first-child a{border-right:1px solid #5fcbbd;background-image: url(/img/main/nmain_area1_2.png);}
.area_center3 li:last-child a{background-image: url(/img/main/nmain_area2_3.png);}

.area_right{float:right;width: 321px;}
.area_right .area_3{height:196px;}
.main_audiobook{float:left;width: 157px;height: 100%;background: #5eb5ff;border-radius: 10px;text-align: center;margin-right: 8px;}
.main_audiobook a{color:#fff;font-size: 1.1em;font-weight: 700;padding-top: 150px;display: block;background: url(/img/main/nmain_area3_1.png) no-repeat center;}

.main_area{overflow:hidden;margin-top: 9px;background: #1ab4a0;height: 157px;border-radius: 10px;text-align: center;}
.main_area li{float:left;/* margin-right:4px; */width: 50%;height: 100%;padding: 20px 0;}
.main_area li a{display:block;color: #fff;font-size: 17px;font-weight: 600;padding: 89px 0 10px 0;background: no-repeat center bottom 36px;}
.main_area li:first-child a{border-right:1px solid #5fcbbd;background-image: url(/img/main/nmain_area1_1.png);}
.main_area li:last-child a{background-image: url(/img/main/nmain_area3_2.png);}
.main_area3{overflow:hidden;float:left;width: 156px;height: 100%;background: #ecf1f9;border-radius: 10px;padding: 0 15px;}
.main_area3 li{margin:0 0 4px 4px;height: 50%;display: table;width: 100%;}/*float:left; */
.main_area3 li a{display:table-cell;vertical-align:middle;color: #634f4f;font-size: 1.1em;font-weight: 700;padding-left: 54px;background: no-repeat left center;}
.main_area3 li:first-child{ border-bottom:1px solid #fff;}
.main_area3 li:first-child a{background-image:url(/img/main/nmain_area2_3_1.png);}
.main_area3 li:last-child a{background-image:url(/img/main/nmain_area2_3_2.png);}
.main_area3 li.main_audiobook{margin-right:4px;}

.main_notice{position:relative;height: 198px;padding: 20px;border:1px solid #d5d5d5;clear: both;margin-top: 9px;border-radius: 10px;}
.main_notice h2{font-size: 1.2em;color: #253a91;margin-bottom: 14px;}
.main_notice li{overflow:hidden;padding: 7px 0;font-size: 0.9em;}
.main_notice li a{display:block;float:left;color: #636363;width: 70%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.main_notice li span{display:block;float:right;color: #636363;font-size: 0.85em;width: 65px;text-align: right;}
.main_notice .more{position:absolute;right: 20px;top: 26px;}

.main_faq{position:relative;height: 157px;/*IE9적용*/border:1px solid #d5d5d5;border-radius: 10px;margin-top: 9px;padding: 15px 20px;}
.main_faq h2{font-size: 1.2em;color: #253a91;margin-bottom: 14px;}
.main_faq li{padding: 3px 0 11px 36px;background: url(/img/main/nfaq_q.png) no-repeat;line-height: 15px;}
.main_faq li a{color: #636363;font-size: 0.9em;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block;}
.main_faq .more{position:absolute; right:19px; top:20px;}


/* tab */
.book_tab{overflow:hidden; padding:0px 0 0px 0;margin-top:25px;}
.book_tab li{width:369px;float:left; height:61px; padding:0 0;  text-align:center;}
.book_tab li a{display:block; height:25px; padding-top:17px; text-align:center;line-height:7px;font-size:16px; color:#fff; background:#bebebe;}
.book_tab li.on{ background:url(../img/tab_arrow01.png) no-repeat center 40px;}
.book_tab li.on a{background-color:#2288da !important;}

.book_tab ul li:first-child{border-left: 1px solid #b2b2b2;width:368px;}
.book_tab ul li:first-child+li{border-right: 1px solid #b2b2b2;width: 370px;-moz-width:370px;width:370px;;width: -moz-calc(370px);}

.book_tab_list{width:738px;padding:15px 0 30px 0;border: 1px solid #b2b2b2;border-top: none;margin-bottom: 20px;}
.book_tab_list ul{overflow:hidden;padding:0 31px;}
.book_tab_list li{float:left; width:115px; margin-left:25px;}
.book_tab_list li:first-child{ margin-left:0;}
.book_tab_list dl{position:relative; }
.book_tab_list dt{display:block; padding-top:161px; line-height:1.4; font-size:12px;letter-spacing: -1px;}
.book_tab_list dd{position:absolute; top:0;}
.book_tab_list dd img{border:1px solid #bfbeba;width:115px !important;height:156px !important;}
.book_tab_list p{display:none;}
.book_tab_list p span{color:#000;}


/* main - slider */
.area_1 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{margin-left: 0; padding-left: 28px; bottom: 28px;}
.area_1 .bx-wrapper .bx-pager.bx-default-pager a{background: #fff;width: 12px;height: 12px;border-radius: 50%;}
.area_1 .bx-wrapper .bx-pager.bx-default-pager a:hover, .area_1 .bx-wrapper .bx-pager.bx-default-pager a.active{background: #ffe982;}



/************************* 반응형 *************************/
/* tablet */
@media screen and (max-width: 1024px){
    .area_wrap{width: 768px; margin:0 auto;}
}



/* moblie */
@media screen and (max-width: 768px){
    /* wrap : 360px */
}