@charset "utf-8";
/* 탑티어 서비스 */
#page_description_area .description-container .description:after { width: 540px; height: 330px; background: url(../../../images/sub/service/description.png); top: 45px; }

/* 글자수세기 */
#container .content .content-area .content-content .letter-counter-wrap .letter-counter { border: 1px solid #dcdcdc; border-top: 1px solid #5283e0; position: relative; height: 382px; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .header { height: 60px; border-bottom: 1px solid #dcdcdc; background: #fcfcfc; width: 80%; float: left; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .header>div { float: left; width: 50%; text-align: center; line-height: 60px; font-size: 15px; font-weight: bold; color: #000; height: 100%; letter-spacing: 0; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .header>div:first-child { border-right: 1px solid #dcdcdc; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .header>div .count { color: #5283e0; margin-right: 3px; font-size: 17px; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .header>div .byte { margin-left: 3px; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter textarea { border: none; height: 320px; padding: 20px; font-size: 15px; outline: 0; width: 80%; float: left; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .go-btn-area { float: right; width: 20%; background: #F2F4F7; height: 100%; vertical-align: top; border-left: 2px solid #dee3eb; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .go-btn-area a { height: 50%; display: block; transition: background .25s ease; text-align: center; font-size: 14px; font-weight: bold; vertical-align: top; padding: 45px 0;  transition: color .25s ease;}
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .go-btn-area a:hover { background: #f8f8f8; color: #5283E0; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .go-btn-area a:first-child { border-bottom: 1px solid #dee3eb; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .go-btn-area a img { display: block; margin: 0 auto; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .go-btn-area a:nth-child(1) img { width: 30px; margin-bottom: 20px; }
#container .content .content-area .content-content .letter-counter-wrap .letter-counter .go-btn-area a:nth-child(2) img { width: 45px; margin-bottom: 10px; }

#container .content .content-area .content-content .letter-counter-wrap .btn-wrap { margin-top: 20px; }
#container .content .content-area .content-content .letter-counter-wrap .btn-wrap:after { content: ''; clear: both; display: block; height: 0; }
#container .content .content-area .content-content .letter-counter-wrap .btn-wrap button { float: left; width: 50%; height: 65px; border: none; font-size: 18px; font-weight: bold; color: #fff; cursor: pointer; }
#container .content .content-area .content-content .letter-counter-wrap .btn-wrap button.del-btn { background: #3a404c; }
#container .content .content-area .content-content .letter-counter-wrap .btn-wrap button.del-btn:hover { background: #525762; }
#container .content .content-area .content-content .letter-counter-wrap .btn-wrap button.copy-btn { background: #5283e0; }
#container .content .content-area .content-content .letter-counter-wrap .btn-wrap button.copy-btn:hover { background: #5C8DEB; }
#container .content .content-area .content-content .notice { display: block; margin-top: 20px; font-size: 14px; color: #555; }
#container .content .content-area .content-content .notice img { vertical-align: top; margin-top: 3px; margin-right: 5px; }
#container .content .content-area .content-content .notice .imp { color: #5283E0; }

/* 연봉계산기 */
#container .content .content-area .content-content .annual-income-calc-wrap { border: 1px solid #dcdcdc; background: #fcfcfc; border-top: 1px solid #5283e0; }
#container .content .content-area .content-content .annual-income-calc-wrap:after { content: ''; clear: both; display: block; height: 0; }
#container .content .content-area .content-content .annual-income-calc-wrap .annual-income-calc:after { content: ''; clear: both; display: block; height: 0; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area { width: 50%; float: left; border-right: 1px solid #dcdcdc; }
#container .content .content-area .content-content .annual-income-calc-wrap .result-area { width: 50%; float: right; background: #f8f8f8; }
#container .content .content-area .content-content .annual-income-calc-wrap .header { height: 60px; border-bottom: 1px solid #dcdcdc; text-align: center; line-height: 60px; font-size: 17px; font-weight: bold; color: #2d2d2d; }
#container .content .content-area .content-content .annual-income-calc-wrap .cont-wrap { height: 482px; }
#container .content .content-area .content-content .annual-income-calc-wrap .cont-wrap .row:after { content: ''; clear: both; display: block; height: 0; }
#container .content .content-area .content-content .annual-income-calc-wrap .cont-wrap .row .head { font-size: 15px; font-weight: bold; color: #2d2d2d; line-height: 35px; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap { padding: 20px; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row { margin-bottom: 20px; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row:last-child { margin-bottom: 0; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row ul.select-tab { display: block; width: 220px; height: 35px; float: right; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row ul.select-tab li { float: left; width: 50%; text-align: center; height: 100%; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row ul.select-tab li label { border: 1px solid #dcdcdc; display: block; height: 100%; line-height: 33px; cursor: pointer; font-size: 13px; color: #9d9d9d; background: #fff; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row ul.select-tab li:nth-child(1) label { border-right: none; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row ul.select-tab li:nth-child(2) label { border-left: none; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row ul.select-tab li input[type=radio]:checked + label { border: 1px solid #5283e0; color: #5283e0; font-weight: bold; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row .txt-input { height: 33px; position: relative; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row .txt-input input[type=text] { height: 100%; width: 100%; border: 1px solid #dcdcdc; padding: 0 30px 0 10px; text-align: right; font-size: 15px; color: #333; font-weight: bold; }
#container .content .content-area .content-content .annual-income-calc-wrap .input-area .cont-wrap .row .txt-input .unit { color: #939393; top: 5px; position: absolute; right: 10px; font-size: 13px; }

#container .content .content-area .content-content .annual-income-calc-wrap .result-area .cont-wrap { padding: 50px 20px; }
#container .content .content-area .content-content .annual-income-calc-wrap .result-area .cont-wrap .monthly-amount { padding-bottom: 25px; border-bottom: 1px dashed #c6c6c6; margin-bottom: 25px; }
#container .content .content-area .content-content .annual-income-calc-wrap .result-area .cont-wrap .row { margin-bottom: 10px; }
#container .content .content-area .content-content .annual-income-calc-wrap .result-area .cont-wrap .row .value { float: right; font-size: 15px; font-weight: bold; line-height: 35px; }
#container .content .content-area .content-content .annual-income-calc-wrap .result-area .cont-wrap .row .value .col { color: #5283e0; }
#container .content .content-area .content-content .annual-income-calc-wrap .result-area .cont-wrap .monthly-amount .value { font-size: 17px; }
#container .content .content-area .content-content .calc-btn { width: 100%; height: 65px; background: #5283e0; border: none; font-size: 18px; color: #fff; font-weight: bold; }

/* 학점변환 */
#container .content .content-area .content-content .convert-grade-wrap { border: 1px solid #dcdcdc; background: #fcfcfc; border-top: 1px solid #5283e0; }
#container .content .content-area .content-content .convert-grade-wrap:after { content: ''; clear: both; display: block; height: 0; }
#container .content .content-area .content-content .convert-grade-wrap .convert-grade:after { content: ''; clear: both; display: block; height: 0; }
#container .content .content-area .content-content .convert-grade-wrap .input-area { width: 50%; float: left; border-right: 1px solid #dcdcdc; }
#container .content .content-area .content-content .convert-grade-wrap .result-area { width: 50%; float: right; background: #f8f8f8; }
#container .content .content-area .content-content .convert-grade-wrap .header { height: 60px; border-bottom: 1px solid #dcdcdc; text-align: center; line-height: 60px; font-size: 17px; font-weight: bold; color: #2d2d2d; }
#container .content .content-area .content-content .convert-grade-wrap .cont-wrap { height: 190px; }
#container .content .content-area .content-content .convert-grade-wrap .convert-grade.lang .cont-wrap { height: 240px; }
#container .content .content-area .content-content .convert-grade-wrap .cont-wrap .row:after { content: ''; clear: both; display: block; height: 0; }
#container .content .content-area .content-content .convert-grade-wrap .cont-wrap .row .head { font-size: 15px; font-weight: bold; color: #2d2d2d; line-height: 35px; }
#container .content .content-area .content-content .convert-grade-wrap .input-area .cont-wrap { padding: 20px; }
#container .content .content-area .content-content .convert-grade-wrap .input-area .cont-wrap .row .input-box { float: right; width: 220px; }
#container .content .content-area .content-content .convert-grade-wrap .input-area .cont-wrap .row .input-box:after { content: ''; clear: both; display: block; height: 0; }
#container .content .content-area .content-content .convert-grade-wrap .input-area .cont-wrap .row .input-box input[type=text] { height: 33px; width: 50%; float: left; border: 1px solid #dcdcdc; border-right: none; text-align: center; }
#container .content .content-area .content-content .convert-grade-wrap .input-area .cont-wrap .convert-btn { background: #5283e0; width: 100%; border: none; height: 33px; color: #fff; font-weight: bold; font-size: 16px; margin-top: 70px; }
#container .content .content-area .content-content .convert-grade-wrap .convert-grade.lang .input-area .cont-wrap .convert-btn { margin-top: 123px; }

#container .content .content-area .content-content .convert-grade-wrap .result-area .cont-wrap { padding: 20px; }
#container .content .content-area .content-content .convert-grade-wrap .result-area .cont-wrap:after { content: ''; clear: both; display: block; height: 0; }
#container .content .content-area .content-content .convert-grade-wrap .result-area .cont-wrap .convert-box { float: left; width: 50%; height: 33px; margin-bottom: 20px; }
#container .content .content-area .content-content .convert-grade-wrap .result-area .cont-wrap .convert-box:after { content: ''; clear: both; display: block; height: 0; }
#container .content .content-area .content-content .convert-grade-wrap .result-area .cont-wrap .convert-box input[type=text] { height: 33px; width: 50%; float: left; border: 1px solid #dcdcdc; text-align: center; }
#container .content .content-area .content-content .convert-grade-wrap .convert-grade.lang .result-area .cont-wrap .convert-box input[type=text] { margin-left: 5px; }
#container .content .content-area .content-content .convert-grade-wrap .result-area .cont-wrap .convert-box .unit { line-height: 33px; margin-left: 10px; font-weight: bold; color: #2d2d2d; font-size: 13px; }
#container .content .content-area .content-content .convert-grade-wrap .result-area .cont-wrap .convert-box .lang-test-name { float: left; width: 40%; font-size: 13px; font-weight: bold; color: #2d2d2d; }
#container .content .content-area .content-content .convert-grade-wrap .result-area .cont-wrap .convert-box .lang-test-name.line-01 { line-height: 33px; }
#container .content .content-area .content-content .convert-grade-wrap .result-area .cont-wrap .convert-box .lang-test-name.line-02 { line-height: 14px; padding-top: 3px; }

/* 셀렉트 커스텀 */
.selectbox { position: relative; border-style: none;  z-index: 1; display: inline-block; height: 33px; width: 50%; vertical-align: top; transition: background .25s ease; background: #fff; border: 1px solid #dcdcdc; float: right; }
.selectbox:hover { background: #f8f8f8; }
.selectbox:before { content: "";  position: absolute; top: 50%; margin-top: -10px; right: 8px; background: url(../../../images/sub/common/down_b_ico.svg) no-repeat; width: 20px; height: 20px; opacity: 0.5; }
.selectbox label { position: absolute; top: 0; left: 0; color: #222;  z-index: -1;  /* IE8에서 label이 위치한 곳이 클릭되지 않는 것 해결 */ font-size: 13px; line-height: 31px; text-align: left; width: 85%; padding-left: 10px; cursor: pointer; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selectbox select { width: 100%; line-height: normal;  /* line-height 초기화 */ font-family: inherit; border: 0; opacity: 0;  /* 숨기기 */  filter:alpha(opacity=0);  /* IE8 숨기기 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */  -moz-appearance: none; appearance: none; margin-left: 0; height: 31px; cursor: pointer; padding: 0 5px; }
.selectbox select option {  font-size: 13px; }