@charset "UTF-8";

/* centerBoxCourse
--------------------------------------------------------*/

.centerBoxCourse {
    padding-bottom:40px;
    border:1px solid #dedede;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    line-height:1.5;
    }

/* searchInput
--------------------------------------------------------*/

.searchInput {
    width: 520px;
    padding: 20px 29px 46px 29px;
    }

.searchInput dl {
    margin: 25px 14px 20px 14px;
    }

.searchInput dt {
    float:left;
    width:126px;
    color:#000;
    padding-top:8px;
    }

.searchInput dd {
    float:left;
    width:348px;
    color:#000;
    }

.searchInput input.sample,.searchInput input.difficulty {
    margin-top: 10px;
    }

#searchCategory .sBox,
#searchProvider .sBox,
#searchFee .sBox,
#searchLocale .sBox {
    width:175px;
    }

#searchPrice .sBox ,#searchPeriodPrice .sBox,
#searchMonthlyPeriodPrice .sBox{
    width:100px;
    text-align: right;
    }

#searchPrice span ,#searchPeriodPrice span,
#searchMonthlyPeriodPrice span{
    padding:0 1em;
    }

.searchInput .submitBtn  {
    margin-top:35px;
    }

.hide{
display:none;
}

/* searchResult
--------------------------------------------------------*/

.searchResult {
    width: 520px;
    margin: 0 29px 0 29px;
    border-top: 1px #a7a7a7 solid;
    }

.searchResult.provider {
    border-top: none;
    }

.searchResult .result {
    margin-top: 30px;
    color: #000;
    float: left;
    /*width: 278px*/
    width: 120px
    }
/********************/

.searchResult table.listTable {
    width: 100%;
    margin-top: 22px;
    }

.searchResult td {
    color: #232323;
    }

.searchResult td.courseName {
    width: 518px;
    }

.searchResult td span.nikoValue {
    margin-left: 6px;
    }

.searchResult td img {
    margin-top: -2px;
    vertical-align: middle;
    }

.searchResult td img.niko {
    margin-right: -3px;
    }

.searchResult td a.noUnderLine {
    text-decoration: none;
    }

.searchResult td p.courseName {
    font-size: 14px;
    font-weight: bold;
    width: 484px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    }

.searchResult td p.outline {
    margin: 5px 5px 5px 10px;
    width: 475px;
    width: 468px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    }

.searchResult td p.providerName {
    width: 323px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    }

.searchResult td div p {
    color: #000;
    }

.searchResult td div.thumbnail {
    float: left;
    width: 136px;
    padding: 5px 0;
    }

.searchResult td div.thumbnail a {
    display: inline-block;
    }

.searchResult td div.courseInfo {
    padding: 5px 0;
    margin-left: 150px;
    }

.searchResult td div.courseDetail {
    float: left;
    width: 120px;
    padding-right: 5px;
    display:inline-block;
    }
.searchResult td div.courseDetailprice{
    float: left;
    padding-right: 5px;
    width:220px;
    }
.searchResult td div.courseValue {
    float: left;
    width: 100px;
    }
.searchResult td div.courseValueReview{
    background:red;
    float: left;
    width: 150px;
    }
.searchResult td div.providerName {
    float: left;
    margin-bottom:5px;
    padding-top: 5px;
    }

.searchResult .thumbnail img {
    width: 136px;
    height: 68px
    }
/********************/

 /*Start Course List Show */
.courseListShow {
    width: 520px;
    margin: 22px 29px 0 29px;
    float: left;
}

.courseListShow dl {
    width: 100%;
    border-bottom: 1px #dedede solid;
    margin: 10px 0px 15px 0px;
    padding-bottom: 10px;
    }

.courseListShow dt.index {
    width: 12px;
    float: left;
    color: #232323;
    padding: 20px 5px 0px 0px;
    }

.courseListShow dt.middle {
    width: 150px;
    float: left;
    height: 100px;
    }

.courseListShow dd {
    width: 340px;
    margin-left: 150px;
    }

.courseListShow span.nikoValue {
    margin-left: 6px;
    }

.courseListShow img {
    margin-top: -2px;
    vertical-align: middle;
    }

.courseListShow img.niko {
    margin-right: -3px;
    }

.courseListShow a.noUnderLine {
    text-decoration: none;
    }

.courseListShow p.courseName {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 500px;
    padding-left: 22px;
    }

/*
.courseListShow p.outline {
    margin: 5px 5px 10px 25px;
    width: 468px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    }
*/
.courseListShow p.providerName {
    width: 323px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    }

.courseListShow p {
    color: #000;
    }

.courseListShow span.thumbnail {
    float: left;
    width: 136px;
    padding: 5px 0;
    }

.courseListShow span.thumbnail a {
    display: inline-block;
    }

.courseListShow span.courseDetail {
    float: left;
    width: 150px;
    padding-right: 5px;
    display:inline-block;
    }
.courseListShow span.courseDetailprice{
    float: left;
    padding-right: 5px;
    width:300px;
    }
.courseListShow span.courseValue {
    float: left;
    padding-left: 5px;
    }
.courseListShow span.courseValueReview{
    background:red;
    float: left;
    width: 200px;
    }
.courseListShow span.providerName {
    float: left;
    margin-bottom:5px;
    padding-top: 5px;
    }

.courseListShow .thumbnail img {
    width: 136px;
    height: 68px
    }

.courseListShow span.courseName{
    font-size: 14px;
    font-weight: bold;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 520px;
    padding-left : 22px;
    }

.courseListShow dd.outline {
    clear: both;
    display: block;
    margin: 5px 0 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 510px;
}

/*End Course List Show */

.searchResult dl {
    padding-top: 20px;
    }

.searchResult dl.providerCourse {
    padding-top: 0px;
    }

.searchResult dt {
    float: left;
    width: 64px;
    color: #000;
    padding-top: 10px;
    }

.searchResult dt.dispNumLbl{
    margin-left: 20px;
    }

.searchResult dd {
    float: left;
    /*width: 458px;*/
    color: #000;
    }

.searchResult .sBox {
    width: 180px;
    }

.searchResult .dispNum {
    width: 70px;
    }

.searchResult .msg {
    margin-top: 20px;
    color: #000;
    }

.pager {
    margin-top: 36px;
    text-align: center;
    color: #000;
    }

.pager .noLink {
    color: #b2b2b2;
    }

.pager .stay {
    font-weight: bold;
    }

.pager .prev,
.pager .next {
    cursor: auto;
    }

.pager .onLink {
    cursor: pointer;
    }

/* coursedetail table
--------------------------------------------------------*/
.coursedetailtable{
    width: 95px;
    height: auto;
}
.coursedetailtable td{
    line-height:2;
}
.courseDetailPeriod{
   width:33px;
   text-align:right;
   }
.courseDetailPaid{
    text-align:right;
}

/* courseContents
--------------------------------------------------------*/

.courseContents {
    width:520px;
    padding:20px 29px 10px 29px;
    }

.courseContents div {
    padding-bottom:30px;
    }

.courseContents .indent{
    margin:0 14px;
    }

.courseContents p.courseName {
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 10px;
    padding-top: 10px;
    text-decoration: underline;
    }

.courseContents .submitBtn {
    margin-top:40px;
    }

.courseContents .outline {
    margin-top: 20px;
    color: #000;
}

.courseContents .announce {
    margin: 5px 0px;
    color: red;
}

.courseContents p.unitCourseTitle {
    padding: 0px;
    background-color:#eaeaea;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.courseContents .unitCourseTitle > a {
    display:block;
    padding: 10px;
}

.courseContents .unitCourseTitle > a:before {
    text-decoration: none;
    content:"▼";
}

/* courseContents .hyouk
--------------------------------------------------------*/
.courseContents .hyouka {
    margin:30px 0;
    }

.courseContents .hyouka div {
    border:1px #ddd solid;
    padding-bottom: 0px;
    }

.courseContents .hyouka dl {
    padding:8px;
    }

.courseContents .hyouka dt {
    float:left;
    /*padding-right:45px;*/
    color:#000;
    width:135px;
    }

.courseContents .hyouka dd {
    float:left;
    width:330px;
    }

.courseContents .hyouka span {
    float:right;
    }

.courseContents .hyouka img.niko {
    float: left;
    margin-right: 1px;
    margin-left: 0px;
    }

/* courseContents .data
--------------------------------------------------------*/
.courseContents .data {
    margin: 0;
    }

.courseContents .data dt {
    width:148px;
    }

.courseContents .data dd {
    width:332px;
    }

/* courseIndex
--------------------------------------------------------*/
.courseIndex {
    width:520px;
    padding:20px 29px 0px 29px;
    }

.courseIndex table.listTable {
    width: 492px;
    margin: 10px 14px;
    }

.courseIndex td.contentsName,
.courseIndex td.testName{
    width:315px;
    }

.courseIndex td.problemCount {
    padding-right:1.5em;
    width:60px;
    }

.courseIndex td.material {
    padding-left: 0.5em;
    width:60px;
    }

.courseIndex td.duration,
.courseIndex td.testTime {
    width: 80px;
    }

.courseIndex img {
    vertical-align: middle;
    margin-left: 3px;
    }

.courseIndex img.sample{
    margin-left: 5px;
    }

.courseIndex .materialImg {
    padding-top:2px;
    padding-bottom:2px;
    }

.courseIndex span.legend {
    padding: 0 14px;
    color: #000;
    }

/* providerInfo
--------------------------------------------------------*/
.providerInfo {
    width:520px;
    padding:20px 29px 10px 29px;
    }

/* providerInfo .data
--------------------------------------------------------*/
.providerInfo .data {
    margin: 0 14px;
    }

.providerInfo .data dt {
    width:148px;
    }

.providerInfo .data dd {
    width:332px;
    }

/* providerBack
--------------------------------------------------------*/
.providerBack .submitBtn  {
   margin-top:35px;
   }

/* pageTop
--------------------------------------------------------*/
.pageTop p.thanks {
    margin:20px 14px;
    color:#000;
    font-weight: bold;
    }

.pageTop p.lead {
    margin:20px 14px;
    color:#000;
    }
.pageTop p.thanksLead {
    margin:20px 14px 0 14px;
    color:#000;
    }

.pageTop span.underline {
    width:650px;
    float:left;
    font-size:12px;
    font-weight:bold;
    text-decoration:underline;
    color:#000;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:10px;
    }

.pageTop span.notice {
    color:red;
    }

/* courseApp
--------------------------------------------------------*/

.courseApp {
    width:520px;
    padding:20px 29px 0px 29px;
    }

.courseApp .indent{
    margin:0 14px;
    }

.courseApp .notice {
    margin-top: 20px;
    color: red;
    }

.courseApp h4 {
    padding:8px 14px;
    background:#eaeaea;
    color:#000;
    line-height:1;
    font-weight:bold;
    }

.courseApp p.rno {
    margin:30px 14px;
    color:#000;
    }

.courseApp p.errmsg {
    margin-top: 20px;
    }

.courseApp p.endmsg {
    margin: 20px 14px 0 14px;
    color: red;
    }

.courseApp .submitBtn {
    margin:20px 0 10px 0;
    }

#courseParticipantNum .fBox{
    width:40px;
    text-align:right;
    padding-right:0px;
    }
#peroidDate{
    width: 156px;
    margin-right:36.5px;
    text-align: right;
}

/*
#peroidSelectDate .fBox{
    width:80px;
}
*/
#selectPeriodStartDate {
    width: 80px;
}

#selectPeriodEndDate{
    width: 100px;
    /*border:0px ;*/
}
/*
#addEndDate{
    width:100px;
    height:16px;
    float: right;
    margin:-30px 56px 0 0;
    padding:3px;
}
*/
/* InfoArea
--------------------------------------------------------*/
.InfoArea {
    margin:0;
    padding:20px 14px;
    }

.InfoArea dl {
    padding:14px 0;
    border-bottom:1px #ddd solid;
    }

.InfoArea dl.nopadding{
    padding:7px 0;
    border-bottom:1px #ddd solid;
    }

.InfoArea dl.nopadding dt{
    padding-top:8px;
    }

.InfoArea dt {
    float:left;
    color:#000;
    width:192px;
    }

.InfoArea dd {
    float:left;
    width:250px;
    margin-left:18px;
    }
.bank{
    width:400px;
    margin-left: 21px;
    color:#000;
}
#showcredit_bank{
    display:none;
}

.InfoArea .deactivate {
    background-color: #f5f5f5;
    color: #808080;
    }

/* InfoArea dl.periodPrice
--------------------------------------------------------*/
.InfoArea dl.periodPrice dt.title {
    width: 118px;
    padding-top: 4px;
    }

.InfoArea dl.periodPrice #periodArea {
    width: 342px;
    margin-left:0px;
}

.InfoArea dl.periodPrice #periodArea>dl {
    padding: 0px;
    border-bottom: none;
}

.InfoArea dl.periodPrice #periodArea>dl>dt.item{
    width: 74px;
    padding-top: 8px;
    }

.InfoArea dl.periodPrice #periodArea>dl>dd.periodForm {
    width: 232px;
}

/* InfoArea #creditCardInfo
--------------------------------------------------------*/
.InfoArea #creditCardInfo dt,
.InfoArea #creditCardInfo dd {
    color: #000;
}
.InfoArea #creditCardInfo dt.deactivate,
.InfoArea #creditCardInfo dd.deactivate {
    color: #808080;
    background-color: transparent;
}

/* InfoArea #showBank
--------------------------------------------------------*/
.InfoArea #showBank label.deactivate{
    background-color: transparent;
}

.InfoArea #showCredit>dt,
.InfoArea #showBank>dt {
    float:none;
    width: 100%;
}

.InfoArea #showCredit>dd,
.InfoArea #showBank>dd {
    float:none;
    width: inherit;
}

.InfoArea #showCredit>dd#creditCardInfo>dl {
    border-bottom: none;
}

.InfoArea #showBank>dd#BankTransferInfo>p {
    padding: 14px 0;
    margin-left: 0px;
}

/* InfoArea #BankTransferInfo
--------------------------------------------------------*/
.InfoArea #BankTransferInfo p.deactivate{
    background-color: transparent;
}

/* appEnd
--------------------------------------------------------*/
.appEnd {
    margin: 10px 14px 0 14px;
    }

.appEnd p.submitBtn {
    margin-top: 40px;
    }

/* appEndBank
--------------------------------------------------------*/
.appEndBank {
    margin: 30px 14px 0 14px;
    }

 .appEndBank img {
    vertical-align: middle;
    }

 .appEndBank .rightAlign {
    text-align: right;
    width: 100%;
    }

/* socialBox
--------------------------------------------------------*/
 div.socialBox {
    display: inline-block;
    overflow: hidden;
    margin-top: 10px;
    padding-bottom:0px;
    width: 520px;
    height: 20px;
    }

.socialBox ul {
    display: block;
    }

.socialBox li {
    float: right;
    list-style: none;
    margin-left: 10px;
    }

.socialBox div.fb-like {
    padding-bottom:0px;
    }

/* discount table
--------------------------------------------------------*/
.coursediscounttable{
    width: 300px;
    height: auto;
}
.coursediscounttable td{
    line-height:2;
    text-align:right;
}
.coursediscounttable tr td:last-child {
   width:203px;
   text-align:left !important;
}
.courseDiscountPeriod{
   width:42px;
}