@charset "utf-8";

/* LAYOUT */

/* 모바일메뉴 활성시 스크롤해제 */
body.fixed {height:100%;}

/* 모바일 구분선 */
.mobile_bar{
	width:100%;
	height:7px;
	background-color:#ededed;
	display:none;
}

#wrap {width:100%; min-width:320px; overflow:hidden;}

/* header */
#header {background:#fff;}
.header_top {height:60px; line-height:60px; text-align:center; border-bottom:1px solid rgba(255,255,255,0.4); background:rgba(0,145,182,0.1);
	background:#dff2ff;
}
.header_top .school_name .gnedu_logo {display:inline-block; vertical-align:middle; height:30px;}
.header_top .school_name .icon {display:inline-block; vertical-align:middle; width:30px; height:30px; margin:0 30px; background:url('../images/common/title_icon01.png') no-repeat 50%; background-size:contain;}
.header_top .school_name .name {display:inline-block; vertical-align:middle;}
.header_top .bookmark_btn {position:absolute; top:50%; right:0; transform:translate(0%,-50%); padding:5px 30px 5px 0; background:url('../images/common/bookmark_btn_b.png') no-repeat 100% 50%; font-size:14px;}
.header_area {height:100px; background:#00a7ee; z-index:99;}
.header_area .inner {height:100%;}
.header_area .search_area {top:50%; transform:translate(0%,-50%);}
.header_gnb {position:absolute; top:50%; right:0; transform:translate(0%,-50%);}
.header_gnb ul li {display:inline-block; vertical-align:middle;}
.header_gnb ul li a,
.header_gnb ul li button {display:inline-block; width:60px; padding-top:40px; color:#fff; font-size:13px; text-align:center;}
.header_gnb ul li._admin {background:url('../images/common/btn_admin.png') no-repeat 50% 0%;}
.header_gnb ul li._notice {background:url('../images/common/btn_notice.png') no-repeat 50% 0%;}
.header_gnb ul li._qna {background:url('../images/common/btn_qna.png') no-repeat 50% 0%;}
.header_gnb ul li._alert {background:url('../images/common/btn_alert.png') no-repeat 50% 0%;}
.header_gnb ul li._myinfo {background:url('../images/common/btn_my_info.png') no-repeat 50% 0%;}
.header_gnb ul li._login {background:url('../images/common/btn_login.png') no-repeat 50% 0%;}
.header_gnb ul li._logout {background:url('../images/common/btn_logout.png') no-repeat 50% 0%;}
.header_gnb ul li._alert .num {position:absolute; top:0; right:8px; display:inline-block; width:20px; height:20px; line-height:20px; background:#faa803; border-radius:50px; color:#fff; font-size:12px; font-weight:700;}

/* 스크롤시 상단 고정 */
.header_area.fixed {position:fixed; top:0; width:100%; z-index:90;}

/* 메인메뉴 */
/* #gnb {background:#fff; border-bottom:1px solid #00a7ee;}
#gnb .menu_list li {float:left; width:14.28%; text-align:center;}
#gnb .menu_list li a {display:block; width:100%; height:60px; line-height:60px; font-size:20px; font-weight:700;}
#gnb .menu_list li.on a {border-bottom:6px solid #00a7ee; color:#00a7ee;}
#gnb .menu_list li:hover a {color:#00a7ee;} */

/* 서브메뉴 */
/* #lnb {background:#fff; border-bottom:1px solid #ddd;}
#lnb .menu_list li {float:left; width:20%; text-align:center;}
#lnb .menu_list li a {display:block; width:100%; height:60px; line-height:60px; color:#666; font-size:20px;}
#lnb .menu_list li a span {display:inline-block; vertical-align:middle; margin-left:5px; padding:0 10px; background:#faa803; border-radius:20px; color:#fff; font-size:14px; line-height:22px;}
#lnb .menu_list li.on a {color:#00a7ee; font-weight:700; border-bottom:6px solid #00a7ee;}
#lnb .menu_list li:hover a {color:#00a7ee; font-weight:700;}
#lnb .menu_list li:before {content:''; position:absolute; left:0; top:50%; margin-top:-10px; display:inline-block; width:1px; height:20px; background:#ddd;}
#lnb .menu_list li:first-child:before {display:none;} */

/* 마이페이지 서브메뉴*/
.mypage #lnb {background:#00a7ee; border-bottom:0;}
.mypage #lnb .menu_list li {width:16.66%;}
.mypage #lnb .menu_list li a {color:rgba(255,255,255,0.75);}
.mypage #lnb .menu_list li.on a {border-bottom:6px solid rgba(255,255,255,0.75); color:#fff;}
.mypage #lnb .menu_list li:hover a {color:#fff;}
.mypage #lnb .menu_list li:before {background:rgba(255,255,255,0.5);}

#menu_open_btn {display:none;}
.menu_btn {position:absolute; top:15px; right:15px; width:40px; height:40px; padding:0; z-index:99; overflow:hidden; outline:none; transition:all 0.6s ease-in-out;}
.menu_btn span {display:block; position:absolute; right:15%; width:70%; height:2px; background:#fff; border-radius:5px; transition:all 0.3s ease-in-out;}
.menu_btn span:nth-child(1) {top:9px;}
.menu_btn span:nth-child(2) {top:19px;}
.menu_btn span:nth-child(3) {top:29px;}
.menu_btn._close span:nth-child(1) {transform:translateY(9px) rotate(-45deg);}
.menu_btn._close span:nth-child(2) {opacity:0;}
.menu_btn._close span:nth-child(3) {transform:translateY(-11px)rotate(45deg);}

/* 모바일 메뉴 */
#menu_wrap {position:fixed; top:0; right:-100%; width:100%; height:100%; padding:100px 20px 0; background:#00a7ee; z-index:99; transition:all 0.6s ease-in-out; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
#menu_wrap.on {right:0;}
#menu_wrap .logo {position:absolute; top:20px; left:20px;}
#menu_wrap .logo img {height:50px;}
#menu_wrap .menu_list {margin:20px 0; padding:10px 30px; background:#fff;}
#menu_wrap .menu_list li a {display:block; padding:12px 20px; border-top:1px solid #ddd; font-size:20px; font-weight:700;}
#menu_wrap .menu_list li:first-child a {border-top:0;}

/* 모바일 검색 */
#search_open_btn {display:none; position:absolute; right:60px; top:15px; width:40px; height:40px; background:url('../images/common/search_btn_w.png') no-repeat 50% 50%; background-size:30px;}
#search_close_btn {position:absolute; right:30px; top:20px; width:30px; height:30px; background:#faa803; border-radius:50%;}
#search_close_btn span {display:block; position:absolute; right:15%; width:70%; height:2px; background:#fff; border-radius:5px; transition:all 0.3s ease-in-out;}
#search_close_btn span:nth-child(1) {top:5px; transform:translateY(9px) rotate(-45deg);}
#search_close_btn span:nth-child(2) {top:25px; transform:translateY(-11px)rotate(45deg);}
#search_area_wrap {display:none; position:absolute; top:70px; left:0; right:0; width:100%; padding:50px 30px; background:#fff; border-bottom:1px solid #00a7ee; z-index:99;}
#search_area_wrap.on {display:none;}
#search_area_wrap h3 {padding:0 0 10px; font-size:24px; font-weight:700; text-align:center;}
#search_area_wrap .search_area {display:block; top:auto; max-width:100%; margin:0 auto; background:#00a7ee; transform:none;}
#search_area_wrap .search_area .search_input {color:#fff;}
#search_area_wrap .search_area .search_btn {background:url('../images/common/search_btn_w.png') no-repeat 50% 100%;}
#search_area_wrap .search_area input::-webkit-input-placeholder {color:#fff;}
#search_area_wrap .search_area input:-ms-input-placeholder {color:#fff;}
#search_area_wrap .search_area input:-moz-input-placeholder {color:#fff;}

/* 검색영역 */
.search_area {max-width:480px; height:50px; line-height:50px; margin:0 auto; padding:0 70px 0 30px; background:#fff; border-radius:50px; overflow:hidden;}
.search_area .search_input {width:100%; padding:0; border:0;}
.search_area .search_btn {position:absolute; right:5px; top:0; width:50px; height:50px; background:url('../images/common/search_btn_b.png') no-repeat; background-size:30px 30px; background-position:center;}

/* 롤링 버튼 */
.prev_btn {position:absolute; top:50%; left:0; transform:translate(0%,-50%); width:20px; height:35px; background-size:contain !important; z-index:9;}
.next_btn {position:absolute; top:50%; right:0; transform:translate(0%,-50%); width:20px; height:35px; background-size:contain !important; z-index:9;}
.prev_btn._blue {background:url('../images/common/prev_btn_b.png') no-repeat 50%; background-size:12px !important;}
.prev_btn._black {background:url('../images/common/prev_btn_bk.png') no-repeat 50%;}
.prev_btn._green {background:url('../images/common/prev_btn_g.png') no-repeat 50%;}
.prev_btn._turq {background:url('../images/common/prev_btn_t.png') no-repeat 50%;}
.prev_btn._white {background:url('../images/common/prev_btn_w.png') no-repeat 50%;}
.prev_btn._yellow {background:url('../images/common/prev_btn_y.png') no-repeat 50%;}
.next_btn._blue {background:url('../images/common/next_btn_b.png') no-repeat 50%; background-size:12px !important;}
.next_btn._black {background:url('../images/common/next_btn_bk.png') no-repeat 50%;}
.next_btn._green {background:url('../images/common/next_btn_g.png') no-repeat 50%;}
.next_btn._turq {background:url('../images/common/next_btn_t.png') no-repeat 50%;}
.next_btn._white {background:url('../images/common/next_btn_w.png') no-repeat 50%;}
.next_btn._yellow {background:url('../images/common/next_btn_y.png') no-repeat 50%;}

/* 롤링 페이지네이션 */
.slide_dots {padding:15px 0;}
.slide_dots li {display:inline-block; vertical-align:middle; padding:0 5px;}
.slide_dots li button {display:inline-block; vertical-align:middle; width:100%; height:100%; width:14px; height:14px; border-radius:50%; font-size:0;}
.slide_dots._turq li button {background:rgba(9,173,164,0.3);}
.slide_dots._turq li.slick-active button {background:#09ada4;}
.slide_dots._yellow li button {background:rgba(250,168,3,0.3);}
.slide_dots._yellow li.slick-active button {background:#faa803;}
.slide_dots._blue li button {background:rgba(0,138,174,0.3);}
.slide_dots._blue li.slick-active button {background:#008aae;}

/* 버튼 */
a,button {outline:0;}
.btn {position:relative; display:inline-block; vertical-align:middle; height:50px; line-height:50px; padding:0 30px; border-radius:50px; font-size:18px; text-align:center; box-sizing:border-box; outline:0; overflow:hidden;}
.btn .arrow {display:inline-block; padding-right:20px; background:url('../images/common/next_btn_w.png') no-repeat 100% 50%; background-size:auto 14px;}
.btn .arrow._black {background:url('../images/common/next_btn_bk.png') no-repeat 100% 50%; background-size:auto 14px;}
.btn._xsm .arrow {padding-right:15px; background-size:auto 12px;}
.btn._xsm {height:30px; line-height:30px; padding:0 15px; font-size:14px;}
.btn._sm {height:40px; line-height:40px; padding:0 20px; font-size:16px;}
.btn._lg {height:60px; line-height:60px; padding:0 40px; font-size:22px;}

.btn._border {background:none; border:1px solid #ddd; color:#666;}
.btn._red {background:#e13959; color:#fff;}
.btn._blue {background:#2FAEFF; color:#fff;}
.btn._green {background:#3bb04d; color:#fff;}
.btn._yellow {background:#faa803; color:#fff;}
.btn._light_yellow {background:#ffc107; color:#fff;}
.btn._turq {background:#09ada4; color:#fff;}
.btn._orange {background:#fd7c16; color:#fff;}
.btn._black {background:#444; color:#fff;}
.btn._gray {background:#666; color:#fff;}
.btn._pink {background:rgb(253, 117, 169); color:#fff;}

.btn._white {background:#fff; border:1px solid #dadada; color:#333;}
.btn._disabled {pointer-events:none;}
.btn._disabled:before {content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:rgba(255,255,255,0.5);}

/* 라디오 버튼 */
.input_radio input[type="radio"] {display:none;}
.input_radio input[type="radio"] + label {position:relative; display:inline-block; vertical-align:middle; margin-right:40px; padding-left:35px; font-size:inherit; cursor:pointer;}
.input_radio input[type="radio"] + label:before {content:''; position:absolute; left:0; top:50%; margin-top:-12px; display:block; width:24px; height:24px; border-radius:50%; border:1px solid #ddd; background:#fff url('../images/common/check_ico_g.png') no-repeat 50%; background-size:15px auto;}
.input_radio input[type="radio"]:checked + label:before {border-color:#00a7ee; background:#00a7ee url('../images/common/check_ico_w.png') no-repeat 50%; background-size:15px auto;}

/* 체크박스 버튼 */
.input_check input[type="checkbox"] {display:none;}
.input_check input[type="checkbox"] + label {position:relative; display:inline-block; vertical-align:middle; margin-right:40px; padding-left:30px; font-size:16px; cursor:pointer; text-align:left}
.input_check input[type="checkbox"] + label:before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); display:block; width:20px; height:20px; border-radius:50%; border:1px solid #dbdbdb; background:#fff url('../images/common/check_ico_g.png') no-repeat center / 60%;}
.input_check input[type="checkbox"]:checked + label:before {border-color:#2faeff; background:#2faeff url('../images/common/check_ico_w.png') no-repeat center / 60%;}

/* 첨부파일 */
.attach_file {width:100%; padding-left:120px;}
.attach_file .file_name {width:100%; padding:5px 20px; background:none; border:0 !important; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size:inherit;}
.attach_file .btn_wrap {position:absolute; left:0; bottom:0; width:120px; height:35px;}
.attach_file .btn_wrap .input_file {position:absolute; bottom:0; left:0; opacity:0; width:100%; height:100%; z-index:1;}
.attach_file .btn_wrap .btn {position:absolute; bottom:0; left:0; width:100%; height:35px; line-height:35px; padding:0; border:1px solid #ddd; color:#666;}


/* 책표지 */

/* 책정보 */
.book_info .info span {display:inline-block; vertical-align:middle; font-size:14px; word-break:break-all;}
.book_info .info span + span {margin-left:10px; padding-left:10px;}
.book_info .info span + span:before {content:''; position:absolute; left:0; top:50%; margin-top:-7px; display:block; width:1px; height:14px; background:#ddd;}
.book_info .history .info {padding-right:5px; color:#00a7ee; font-size:16px; font-weight:700;}
.book_info .history span {color:#666; font-size:14px; padding-left:5px;}

/* 어린이 이름,학교 영역 */
.user_info .name {display:inline-block; vertical-align:middle; font-size:18px; font-weight:700;}
.user_info .info {display:inline-block; vertical-align:middle; padding-left:5px; font-size:16px;}
.user_info .info .date {padding-left:5px; font-size:14px;}

/* 스크롤바 */
.scrollbar {scrollbar-base-color:#ddd;scrollbar-face-color:#aaa;scrollbar-arrow-color:#aaa;scrollbar-track-color:#ddd;scrollbar-highlight-color:#ddd;scrollbar-3dlight-color:#ddd;scrollbar-shadow-color:#aaa;scrollbar-darkshadow-color:#aaa;}
.scrollbar::-webkit-scrollbar {width:8px;height:8px;background:#ddd;border-radius:5px;}
.scrollbar::-webkit-scrollbar-thumb {height:50px;width:50px;background:#aaa;border-radius:5px;}

/* footer */
#footer {padding:40px 0; background:#f9f9f9; overflow:hidden;}
#footer .left_area {float:left;}
#footer .f_logo {display:inline-block; vertical-align:middle; margin-right:30px; padding-right:30px; border-right:1px solid #ddd;}
#footer .cs_info {display:inline-block; vertical-align:middle; text-align:left;}
#footer .cs_info .num {font-size:18px;}
#footer .cs_info .num strong {font-size:22px;}
#footer .cs_info .desc {font-size:15px;}
#footer .right_area {float:right; padding-top:20px; text-align:right;}
#footer .right_area br {display:none;}
#footer .btn_link {display:inline-block; vertical-align:middle; margin-left:20px; font-size:16px;}

/* 상단으로이동 버튼 */
#moveToTop {position:absolute; top:-40px; left:50%; margin-left:-40px; width:80px; height:80px; background:#fff; border-radius:50%; text-align:center;}
#moveToTop span {display:inline-block; padding-top:35px; font-weight:700;}


@media screen and (max-width:1480px) {
	.header_top .bookmark_btn {right:20px;}
	.header_area h1 {left:20px;}
	.header_gnb {right:20px;}

	.search_area {max-width:400px;}

}

@media screen and (max-width:1280px) {
	
	.search_area {max-width:320px;}

}

@media screen and (max-width:1024px) {

	.header_top {height:40px; line-height:40px;}
	.header_top .school_name .gnedu_logo {height:25px;}
	.header_top .school_name .icon {width:25px; height:25px; margin:0 10px;}
	.header_top .school_name .name {font-size:14px;}
	.header_top .bookmark_btn {width:20px; height:25px; padding:0; box-sizing:border-box;}
	.header_top .bookmark_btn span {display:none;}
	.header_area {height:70px;}
	.header_area h1 img {height:50px;}
	.header_area .header_gnb {display:none;}
	.header_gnb {position:relative; top:auto; right:auto; transform:none;}
	.header_gnb ul {overflow:hidden;}
	.header_gnb ul li {float:left;}
	.header_gnb ul li a {width:55px;}
	.header_area .search_area {display:none;}

	#gnb {display:none;}
	#menu_open_btn {display:block;}

	#search_open_btn {display:block;}
	#search_area_wrap.on {display:block;}
	.search_area {padding:0 60px 0 30px;}

	#footer .f_logo {margin-right:20px; padding-right:20px;}
	#footer .f_logo img {height:50px;}
	#footer .cs_info .num {font-size:16px;}
	#footer .cs_info .num strong {font-size:20px;}
	#footer .cs_info .desc {font-size:14px;}
	#footer .right_area {padding-top:0;}
	#footer .right_area br {display:inline;}
	#footer .btn_link {margin:5px 0; font-size:14px;}


}

@media screen and (max-width:768px) {
	.mypage #lnb .menu_list li.on a {border-bottom-width:4px;}

	.prev_btn,
	.next_btn {background-size:auto 25px !important;}

	.btn {height:40px; line-height:40px; padding:0 20px; font-size:16px;}
	.btn .arrow {padding-right:15px; background-size:auto 10px;}
	.btn._lg {height:50px; line-height:50px; padding:0 30px; font-size:18px;}

	.slide_dots li button {width:12px; height:12px;}

	.input_radio input[type="radio"] + label {margin-right:30px; padding-left:30px;}
	.input_radio input[type="radio"] + label:before {margin-top:-10px; width:20px; height:20px; background-size:12px auto;}
	.input_radio input[type="radio"]:checked + label:before {background-size:12px auto;}

	.input_check input[type="checkbox"] + label {margin-right:30px; padding-left:30px;}
	.input_check input[type="checkbox"] + label:before {width:20px; height:20px; background-size:12px auto;}
	.input_check input[type="checkbox"]:checked + label:before {background-size:12px auto;}

	.attach_file {padding-left:100px;}
	.attach_file .file_name {padding:5px 10px;}
	.attach_file .btn_wrap {width:100px;}

	#footer {padding-top:50px;}
	#footer .left_area {float:none; text-align:center; padding-bottom:10px;}
	#footer .f_logo {margin-right:10px; padding-right:10px;}
	#footer .right_area {float:none; text-align:center;}
	#footer .right_area br {display:none;}
	#footer .btn_link {margin:0 10px;}
	
	#moveToTop {top:-30px; margin-left:-30px; width:60px; height:60px;}
	#moveToTop span {padding-top:30px;}

}

@media screen and (max-width:480px) {

	#footer .f_logo {display:block; margin:0 0 10px; padding:0; border:0;}
	#footer .f_logo img {height:44px;}
	#footer .cs_info {text-align:center;}

}

@media screen and (max-width:360px) {

	.header_top .school_name .gnedu_logo {height:20px;}

}


/* COMMON */

/* display */
.dp_inline {display:inline !important;}
.dp_inBlock {display:inline-block !important;}
.dp_block {display:block !important;}
.dp_none {display:none !important;}

.hidden,
legend > span,
caption > span {position:absolute;left:-9999em;overflow:hidden;width:1px;height:1px;font-size:0;line-height:0;text-indent:-9999em;}

/* float */
.floatL {float:left !important;}
.floatR {float:right !important;}
.clear:after {content:'';display:block;clear:both;}
.clearL {clear:left;}
.clearR {clear:right;}

/* width */
.w10p {width:10% !important;}
.w20p {width:20% !important;}
.w30p {width:30% !important;}
.w40p {width:40% !important;}
.w50p {width:50% !important;}
.w60p {width:60% !important;}
.w70p {width:70% !important;}
.w80p {width:80% !important;}
.w90p {width:90% !important;}
.w95p {width:95% !important;}
.w100p {width:100% !important;}

/* height */
.h10p {height:10% !important;}
.h20p {height:20% !important;}
.h30p {height:30% !important;}
.h40p {height:40% !important;}
.h50p {height:50% !important;}
.h60p {height:60% !important;}
.h70p {height:70% !important;}
.h80p {height:80% !important;}
.h90p {height:90% !important;}
.h100p {height:100% !important;}

/* input, select, textarea size */
.size80 {width:80px !important;}
.size100 {width:100px !important;}
.size150 {width:150px !important;}
.size200 {width:200px !important;}
.size250 {width:250px !important;}
.size100p {width:100% !important;}

/* overflow */
.overHidden {overflow:hidden;}
.scroll {overflow:auto;}
.scrollX {overflow-x:scroll;}
.scrollY {overflow-y:scroll;}

/* margin */
.mg0{margin:0 !important;}
.mgT0 {margin-top:0px !important;}
.mgT5 {margin-top:5px !important;}
.mgT10 {margin-top:10px !important;}
.mgT15 {margin-top:15px !important;}
.mgT20 {margin-top:20px !important;}
.mgT25 {margin-top:25px !important;}
.mgT30 {margin-top:30px !important;}
.mgT40 {margin-top:40px !important;}
.mgT50 {margin-top:50px !important;}
.mgT80 {margin-top:80px !important;}
.mgT100 {margin-top:100px !important;}

.mgR0 {margin-right:0px !important}
.mgR5 {margin-right:5px !important}
.mgR10 {margin-right:10px !important}
.mgR15 {margin-right:15px !important}
.mgR20 {margin-right:20px !important}
.mgR25 {margin-right:25px !important}
.mgR30 {margin-right:30px !important}
.mgR40 {margin-right:40px !important}
.mgR50 {margin-right:50px !important}
.mgR80 {margin-right:80px !important}
.mgR100 {margin-right:100px !important}

.mgB0 {margin-bottom:0px !important;}
.mgB5 {margin-bottom:5px !important;}
.mgB10 {margin-bottom:10px !important;}
.mgB15 {margin-bottom:15px !important;}
.mgB20 {margin-bottom:20px !important;}
.mgB25 {margin-bottom:25px !important;}
.mgB30 {margin-bottom:30px !important;}
.mgB40 {margin-bottom:40px !important;}
.mgB50 {margin-bottom:50px !important;}
.mgB80 {margin-bottom:80px !important;}
.mgB100 {margin-bottom:100px !important;}

.mgL0 {margin-left:0px !important;}
.mgL5 {margin-left:5px !important;}
.mgL10 {margin-left:10px !important;}
.mgL15 {margin-left:15px !important;}
.mgL20 {margin-left:20px !important;}
.mgL25 {margin-left:25px !important;}
.mgL30 {margin-left:30px !important;}
.mgL40 {margin-left:40px !important;}
.mgL50 {margin-left:50px !important;}
.mgL80 {margin-left:80px !important;}
.mgL100 {margin-left:100px !important;}

/* padding */
.pd0{padding:0 !important;}

.pdT0 {padding-top:0px !important;}
.pdT5 {padding-top:5px !important;}
.pdT10 {padding-top:10px !important;}
.pdT15 {padding-top:15px !important;}
.pdT20 {padding-top:20px !important;}
.pdT25 {padding-top:25px !important;}
.pdT30 {padding-top:30px !important;}
.pdT40 {padding-top:40px !important;}
.pdT50 {padding-top:50px !important;}
.pdT80 {padding-top:80px !important;}
.pdT100 {padding-top:100px !important;}

.pdR0 {padding-right:0px !important;}
.pdR5 {padding-right:5px !important;}
.pdR10 {padding-right:10px !important;}
.pdR15 {padding-right:15px !important;}
.pdR20 {padding-right:20px !important;}
.pdR25 {padding-right:25px !important;}
.pdR30 {padding-right:30px !important;}
.pdR40 {padding-right:40px !important;}
.pdR50 {padding-right:50px !important;}
.pdR80 {padding-right:80px !important;}
.pdR100 {padding-right:100px !important;}

.pdB0 {padding-bottom:0px !important;}
.pdB5 {padding-bottom:5px !important;}
.pdB10 {padding-bottom:10px !important;}
.pdB15 {padding-bottom:15px !important;}
.pdB20 {padding-bottom:20px !important;}
.pdB25 {padding-bottom:25px !important;}
.pdB30 {padding-bottom:30px !important;}
.pdB40 {padding-bottom:40px !important;}
.pdB50 {padding-bottom:50px !important;}
.pdB80 {padding-bottom:80px !important;}
.pdB100 {padding-bottom:100px !important;}

.pdL0 {padding-left:0px !important;}
.pdL5 {padding-left:5px !important;}
.pdL10 {padding-left:10px !important;}
.pdL15 {padding-left:15px !important;}
.pdL20 {padding-left:20px !important;}
.pdL25 {padding-left:25px !important;}
.pdL30 {padding-left:30px !important;}
.pdL40 {padding-left:40px !important;}
.pdL50 {padding-left:50px !important;}
.pdL80 {padding-left:80px !important;}
.pdL100 {padding-left:100px !important;}

/* border style */
.bd0 {border:0 !important;}
.bdT0 {border-top:0 !important;}
.bdR0 {border-right:0 !important;}
.bdB0 {border-bottom:0 !important;}
.bdL0 {border-left:0 !important;}

.bd_solid {border:1px solid #ccc !important;}
.bdT {border-top:1px solid #ccc !important;}
.bdR {border-right:1px solid #ccc !important;}
.bdB {border-bottom:1px solid #ccc !important;}
.bdL {border-left:1px solid #ccc !important;}

.bd_black {border-color:#000 !important;}
.bd_white {border-color:#fff !important;}
.bd_gray {border-color:#eee !important;}

/* color */
.black {color:#000 !important;}
.white {color:#fff !important;}
.gray {color:#888 !important;}
.red {color:#e13959 !important;}
.green {color:#3bb04d !important;}
.blue {color:#00a7ee !important}
.orange {color:#fd7c16 !important;}

/* background color */
.no_bg {background:none !important;}
.bg_black {background-color:#000 !important;}
.bg_white {background-color:#fff !important;}
.bg_gray {background-color:#eee !important;}
.bg_red {background-color:#e13959 !important;}
.bg_green {background-color:#3bb04d !important;}
.bg_blue {background-color:#00a7ee !important}
.bg_orange {background-color:#fd7c16 !important;}

/* align */
.alignL {text-align:left !important;}
.alignC {text-align:center !important;}
.alignR {text-align:right !important;}

.valignT {vertical-align:top !important;}
.valignM {vertical-align:middle !important;}
.valignB {vertical-align:bottom !important;}

/* font Size */
.fs13 {font-size:13px !important;}
.fs14 {font-size:14px !important;}
.fs15 {font-size:15px !important;}
.fs16 {font-size:16px !important;}
.fs20 {font-size:20px !important;}
.fs24 {font-size:24px !important;}
.fs36 {font-size:36px !important;}

/* font-weight */
.fw100 {font-weight:100;}
.fw300 {font-weight:300;}
.fw400 {font-weight:400;}
.fw500 {font-weight:500;}
.fw700 {font-weight:700;}
.fw900 {font-weight:900;}

/* grid */
.row {position:relative;}
.row:after {content:'';clear:both;display:block;}
.row > div {float:left;box-sizing:border-box;}
.row .col1 {width:8.333%;}
.row .col2 {width:16.666%;}
.row .col3 {width:25%;}
.row .col4 {width:33.333%;}
.row .col5 {width:41.666%;}
.row .col6 {width:50%;}
.row .col7 {width:58.333%;}
.row .col8 {width:66.666%;}
.row .col9 {width:75%;}
.row .col10 {width:83.333%;}
.row .col11 {width:91.666%;}
.row .col12 {width:100%;}