@charset "UTF-8";
@import "global.css";
@import "common.css";

/* 박상일에 의해 100128에 작성됨. */

/* 배너 */
#banner {width: 100%; height: 400px; margin: 0 auto; overflow: hidden;}
#banner #banner-img {position: relative; width: 1920px; height: 400px; margin: 0 auto;}
#banner #banner-img li {position: absolute; top: 0; left: 0;}
#banner #banner-img li a {display: block;}
#banner #banner-img li.active {z-index: 2;}
#banner #banner-img li:nth-child(2) {z-index: 1;}
#banner #banner-num {position: relative; top: -25px; z-index: 2; overflow: hidden; width: 80px; margin: 0 auto;}
#banner #banner-num li {float: left; width: 20px; font-size: 16px; text-align: center;}


/* 전체과정 */
#course {box-sizing: border-box; width: 1024px; margin: 0 auto; padding: 45px 20px 0;}
#course h2 {font-size: 18px; font-weight: 900; padding: 0 10px 10px;}
#course ul {width: 100%; overflow: hidden;}
#course ul li {float: left; box-sizing: border-box; width: calc(20% - 8px); border: 1px solid #aaa; margin-right: 10px;}
#course ul li:last-child {margin-right: 0px;}
#course ul li:hover {background-color: #f6f6f6; border: 1px solid #aaa;}
#course ul li img {width: 100%;}
#course ul li h3 {font-size: 20px; font-weight: bold; padding: 15px 0 10px; line-height: 23px; letter-spacing: -1px; text-align: center;}
#course ul li p {height: 90px; padding: 0 10px 10px; font-size: 12px; line-height: 17px; text-align: justify}
#course ul li button {width: 100%; height: 33px; color: #fff; background-color: #17318e; font-size: 16px; letter-spacing: .5px; cursor: pointer;}
#course ul li:hover button {font-weight: 700;}


/* 공지사항게시판 */
#container-bottom {box-sizing: border-box; width: 1024px; margin: 45px auto 0; padding: 0 20px; overflow: hidden;}
/* 게시판 */
#board {float: left; width: 480px; margin-right: 12px; background: #f6f6f6;}
#board h3 {margin-bottom: 10px; font-size: 16px; font-weight: 900;}
#board ul{ min-height:50px; width: 100%;}
#board ul li {margin: 0; padding:0;}
#board ul li a {display: block; width: 100%; padding: 0; text-decoration: none; font-family: "돋움", Dotum, sans-serif; font-size: 1.2em; line-height: 25px; color: #666; white-space: nowrap; text-overflow: ellipsis;}
#board ul li a:hover {color: #111; text-decoration:underline; }
#board ul li a span {float: right;}

#board .notice, #board .qa, #board .faq{padding: 15px; position: relative; overflow: hidden; clear: both;}
#board .qa, #board .faq{ border-top: 1px solid #e5e5e5;}


/* 서브배너 */
#subBan {float: left; width: 492px;}
#subBan ul {width: 100%; overflow: hidden;}
#subBan ul li {position: relative; float: left; box-sizing: border-box; width: 240px; height: 208px; padding: 0 2%; background: #e5f7fc url(../images/main/subBan_02.png) center 10px no-repeat;}
#subBan ul li:first-child {margin-right: 12px; background: #e5f7fc url(../images/main/subBan_01.png) center 15px no-repeat;}
#subBan ul li a {display: block; box-sizing: border-box; width: 100%; height: 208px; padding: 145px 0 7px 10px; color: #263e53; font-size: 22px; font-weight: 700; line-height: 27px; letter-spacing: -1px;}
#subBan ul li a span {font-size: 18px; font-weight: normal;}
#subBan ul li a span.btn {position: relative; top: -3px; display: inline; margin-left: 10px; padding: 4px 7px; color: #fff; font-size: 14px; font-weight: 700; background-color: #263e53; border-radius: 5px; }
#subBan ul li:hover a span.btn {color: yellow;}


#popup { height: 241px;}
#popup_control { position: absolute; top: 215px; right: 20px; }
#popup_control li { float: left; margin-left: 4px; background: transparent; text-indent: -9999px; }
#popup_control li.current { background: transparent; }
#popup_control li.current a {  border: 2px solid #ff7800; background:#ff7800; }
#popup_control li a { display: block; width: 8px;  height: 8px;  border-radius: 50%;   border: 2px solid #d5d5d5; background:#fff; }


/* TabbedPanels */
.TabbedPanels { overflow: hidden; margin: 0px; padding: 0px; clear: none; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/ }
.TabbedPanelsTabGroup { padding: 0px; }
.TabbedPanelsTab { float: left; width: 72px; height: 28px; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; text-indent: -9999px; }


.board { position: relative; float: left; width: 100%; border-top: 1px solid #eee;  }
.board h3 { float: left; width: 72px; height: 29px; margin: 0 0 15px; padding: 0; background: none; text-indent: -9999px; }
.board h3.h3_best_01 { position: absolute; left: 0; }
.board h3.h3_best_02 { position: absolute; left: 80px; }

.board h3 a#tablink1 { background: url(../images/main/tab_re_best.gif) no-repeat; }
.board h3 a#tablink2 { background: url(../images/main/tab_re_best.gif) no-repeat -80px 0; }

.board h3 a#tablink1:hover,
.board h3 a#tablink1.tabactive { background-position: 0 -29px; }
.board h3 a#tablink2:hover,
.board h3 a#tablink2.tabactive { background-position: -80px -29px; }

.board h3 a { display: block; height: 29px;  color: #333; margin-top:-1px; }
.board h3.h3_best_01 a{ width:80px;}
.board h3.h3_best_02 a{ width:66px;}

.board div { float: left; margin-top: 39px; font-size: 1.2em; }
.board ul { position: relative; float: left; width: 370px; }
.board li { display: inline; float: left; line-height: 1.8em; }
.board li a { display: block; width: 370px; color: #666; font-family: "돋움", Dotum, sans-serif; }
.board li a span.title { display: block; float: left; overflow: hidden; width: 260px; padding-left: 12px; background: url(../images/main/bullet_board.gif) no-repeat 0 8px; cursor: pointer; }
.board li a span.date { display: block; float: right; color: #999; font-size: .9em; letter-spacing: normal; text-align: right; white-space: nowrap; }

.board.board_photo ul { padding: 0; }
.board.board_photo li { padding: 0 13px; text-align: center; }
.board.board_photo li.first { padding-left: 0; }
.board.board_photo li.last { padding-right: 0; }
.board.board_photo li a { display: block; width: auto; }

.board div ul { margin-left: -10px; width: 540px; }
.board div ul li { float: left; margin: 0 10px; }
.board div ul li a { display: block; margin-bottom: 20px; width: 160px; text-align: center; font-weight: bold; line-height: 1em; color: #787878; }
.board div ul li a img,
#reco ul li img { margin-bottom: 10px; border: 1px solid #ccc; }

/* Styles for Printing */
@media print {
.TabbedPanels { overflow: visible !important; }
.TabbedPanelsContentGroup { display: block !important; overflow: visible !important; height: auto !important; }
.TabbedPanelsContent { overflow: visible !important; display: block !important; clear: both !important; }
.TabbedPanelsTab { overflow: visible !important; display: block !important; clear: both !important; }
}

/* //TabbedPanels */

#contents { position: relative; float: left;  width: 520px; margin: 0 20px; }
#col_right { float: right; width: 230px; }

#question { padding-bottom: 10px; background: #f9f9f9; }
#question h3 { margin: 10px 10px 5px 10px; padding: 10px 0 5px; border-bottom: 1px solid #e1e1e1; }
#question p { padding-left: 14px; font-family: "돋움", Dotum, sans-serif; font-size: 1.2em; color: #666; }
#question ul li { padding: 3px 20px; font-family: "돋움", Dotum, sans-serif; font-size: 1.2em; color: #666;}

#reco,
#best,
#board div { position: relative; }
a.btn_more {display: block; position: absolute; top: 12px; right: 6px; width: 30px; height: 18px; background: url(../images/common/btnre_more.gif) 50% 50% no-repeat; text-indent: -9999px;}

#reco a.btn_more, #best a.btn_more{ top:7px; right:0;}

/**메인추가 오프라인 테이블 + 책사기 버튼 추가**/
.listTableW table{ border-collapse:collapse; width:100%; border:0; border-bottom:2px solid #f6f6f6;     font-size: 12px;    color: #464646;    letter-spacing: -0.005em;}
.listTableW table tr:nth-child(odd){ background: #f6f6f6;}
.listTableW table tr td{padding: 10px 6px 6px 6px;}
.listTableW table tr td a{ text-decoration:none; color:#464646;}
.listTableW table tr td a:hover{ text-decoration:underline; color:#464646;}


#bookBuy{ float:left; width:100%; clear:both; margin-bottom: 20px;}
#bookBuy li{ display:inline-block; float:left; width:160px; text-align:center;}
#bookBuy li a{ border:0; margin:0 !important; padding:0}
#bookBuy li a img{ border:0; padding:0; margin:0;}

#bannerW2{ float:left; clear:both; margin-top:22px;}
#bannerW2 ul li{ margin-top:5px;}
#bannerW2 ul li:first-child{ margin-top:0;}