@charset 'utf-8';

@font-face {font-family: 'Gsans';src: url('font/GmarketSansMedium-dcdb13e415566997f4a392e29ddfdd90.otf') format('truetype')}
@font-face {font-family: 'Gsans';src: url('font/GmarketSansBold-d49f46d24559ebb5f147e61e2082498d.otf') format('truetype');font-weight: 700}
@font-face {font-family: 'Gsans';src: url('font/GmarketSansLight-84cd2c3f2cd25d958fde6d8d7aed89bc.otf') format('truetype');font-weight: 100}


/***** reset *****/
/*html5 미지원 브라우저*/
article, aside, details, figcaption, figire, footer, header, hgroup, menu, nav, section{display: block}
/*여백 제거*/
*{margin: 0;padding: 0;border:0; box-sizing: border-box}
table {border-collapse: collapse; border-spacing: 0}
img{border: 0; vertical-align: middle}
/*리스트 스타일 제거*/
ol, ul, li{list-style: none}
/*앵커 기본값 제거*/
a{text-decoration: none;color: inherit}


body{letter-spacing: -0.5px; font-family: 'Gsans'; color: #666; font-size: 13px}

/*skip메뉴*/
.skip a{position: absolute; background: rgba(0,0,0,.5); width: 100%; height: 40px; text-align: center; color: #fff; z-index: 100; line-height:45px; top: -40px;opacity: 0}


/* 본문공통 ----------------------------------------------------------------------------------------- */


/* 캡션 */
caption{visibility:hidden; position:absolute; top:-9999999px; left:-9999999px; width:1px; height:1px; margin:0; padding:0; background:none; font-size:0; line-height:0; text-indent:-9999999px}


/*페이징*/
.paging_wrap {margin:20px 0 0; text-align:center}
.paging_wrap ul {overflow:hidden; display:inline-block}
.paging_wrap ul li {float:left; margin:0 2px}
.paging_wrap ul li button {width:36px; height:36px; font-family: 'Gsans'; font-size:14px; font-weight:700; line-height:38px; text-align:center; color:#666; border:1px solid #d5d5d5; border-radius:5px}
.paging_wrap ul li.active button {color:#fff; border-color:#5743cb; background: #5743cb}
.paging_wrap ul li.first button {background:url(/resources/toctocmath/userImages/common/paging_icon_first-c3914446744fab6476f20c7b343a4afb.png) no-repeat center center}
.paging_wrap ul li.prev button {background:url(/resources/toctocmath/userImages/common/paging_icon_prev-e25a4029c9b07546ecb973a519ffa499.png) no-repeat center center}
.paging_wrap ul li.next button {background:url(/resources/toctocmath/userImages/common/paging_icon_next-e5a59b0afb501348f9aed23a9dd6f9b2.png) no-repeat center center}
.paging_wrap ul li.last button {background:url(/resources/toctocmath/userImages/common/paging_icon_last-da0fa7f24b301ae866c94761190f760e.png) no-repeat center center}


/*평가결과 없음 이미지*/
.no_result {display: flex; justify-content: center}
.no_result img{width: 250px}




/* 기타 공통항목 ---------------------------------------------------------------------------- */

.hidden{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0)}
.clear::after{content: '';display: block;clear: both}

/* 사이즈 */
.full{width: 100%!important}


/* 폰트 */
.Gsans{font-family: 'Gsans'!important}
.dip_n{display: none!important}
.dip_bl{display: block!important}
.dip_inb{display: inline-block!important}
.dip_f{display: flex!important}
.fw_500{font-weight: 500!important}
.bold{font-weight:bold!important}
.normal{font-weight:normal!important}


/*컬러*/
.blue {color:#004dc4!important}
.orange {color:#ff7200!important}
.black {color:#000!important}
.green {color:#457f00!important}
.red {color:#cf0e0e!important}
.gray {color:#696969!important}


/* 글자 정렬 */
.tal{text-align:left!important}
.tar{text-align:right!important}
.tac{text-align:center!important}


/* 정렬 */
.align_l{display: flex; flex-flow: row wrap}
.align_r{display: flex; flex-flow: row wrap; justify-content:flex-end}
.align_c{display: flex; flex-flow: row wrap; justify-content:center}
.align_l_r{display: flex; flex-flow: row wrap; justify-content:space-between}



/* input */
label{display: inline-block; vertical-align: middle; color: #333; margin: 2px 10px 0 5px; font-size: 14px}

.text, select{display: inline-block; vertical-align: middle; height: 40px; line-height: 43px; color: #333; border: 1px solid #ddd; border-radius: 5px; padding: 0 10px; letter-spacing: -0.5px; font-family: 'Gsans'; font-size: 14px}
select, select{ -webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/ appearance:none;/* 화살표 커스텀 */ padding-right: 30px;background: url(/resources/toctocmath/userImages/sub/icon_select_arrow-057526b05298a2e8ef1b67dfff611791.gif) right 10px top 50% no-repeat;background-color: #fff} 
select::-ms-expand{display:none;/*for IE10,11*/}

input[type='text'], input[type='password'], input[type='number'], input[type='tel']{display: inline-block;vertical-align: middle;height: 40px; line-height: 41px;color: #333;border: 1px solid #ddd;border-radius: 5px;padding: 0 10px;letter-spacing: -0.5px;font-family: 'Gsans';font-size: 15px;}
input[type='radio']{display: inline-block;width: 20px;height: 20px;margin: 0;padding: 0;vertical-align: middle}
input[type='radio'] ~ label{display: inline-block;vertical-align: middle}

input[type="date"] {
	height: 40px;
	padding: 0 10px;
    font-size: 14px;
    color: #333;
    border: 1px solid #ddd;
    flex: 1;
    background: #fff;
    border-radius: 5px;
	font-family: 'Gsans'
}

input[type="date"]::-webkit-calendar-picker-indicator {
	width: 30px;
	height: 30px;
	background: url('/resources/toctocmath/userImages/common/calendar-7303200a8434c4b4ba695e1c5ec6c833.png') 50% 50% no-repeat;
	background-size: contain;
	cursor: pointer	
}



/*공통 버튼*/
button{font-family: 'Gsans';  cursor: pointer; vertical-align: middle}

.btn_purple{background: #5743cb; font-size: 17px; padding: 0 15px; border-radius: 7px; height: 40px; line-height: 45px; color: #fff}
.btn_red{background: #cc200e; font-size: 17px; padding: 0 15px; border-radius: 7px; height: 40px; line-height: 45px; color: #fff}
.btn_green{background: #599e00; font-size: 17px; padding: 0 15px; border-radius: 7px; height: 40px; line-height: 45px; color: #fff}
.btn_yellow{background: #E6B800; font-size: 17px; padding: 0 15px; border-radius: 7px; height: 40px; line-height: 45px; color: #fff}
.btn_gray{background: #6a6a6a; font-size: 17px; padding: 0 15px; border-radius: 7px; height: 40px; line-height: 45px; color: #fff}
.btn_blue{background: #0095da; font-size: 17px; padding: 0 15px; border-radius: 7px; height: 40px; line-height: 45px; color: #fff}
.btn_white{background: #fff; font-size: 17px; padding: 0 15px; border-radius: 7px; height: 40px; line-height: 43px; color: #333; border: 1px solid #c8c8c8}

.btn_s_gray{background: #6a6a6a; height: 30px; padding: 0 10px; border-radius: 4px; line-height: 34px; color: #fff; font-size: 16px}
.btn_s_blue{background: #0095da; height: 30px; padding: 0 10px; border-radius: 4px; line-height: 34px; color: #fff; font-size: 16px}
.btn_s_green{background: #599e00; height: 30px; padding: 0 10px; border-radius: 4px; line-height: 34px; color: #fff; font-size: 16px}
.btn_s_red{background: #cc200e; height: 30px; padding: 0 10px; border-radius: 4px; line-height: 34px; color: #fff; font-size: 16px}
.btn_s_purple{background: #5743cb; height: 30px; padding: 0 10px; border-radius: 4px; line-height: 34px; color: #fff; font-size: 16px}
.btn_s_white{background: #fff; height: 30px; padding: 0 10px; border-radius: 4px; line-height: 32px; font-size: 16px; color: #333; border: 1px solid #c8c8c8}

.btn_sort.active{background: #fff; height: 25px; padding: 0px; font-size: 13px; color: #5743cb; border-bottom: 1px solid #5743cb; font-weight: 700; font-style: normal;}
.btn_sort{background: #fff; height: 25px; padding: 0px; font-size: 13px; color: #333; font-style: normal;}
.tac {text-align: center;}

/* 패딩 */
.pd0  {padding:0 !important}
.pd5  {padding:5px !important}
.pd10 {padding:10px !important}
.pd15 {padding:15px !important}
.pd20 {padding:20px !important}
.pd25 {padding:25px !important}
.pd30 {padding:30px !important}

.pdt0  {padding-top:0 !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}

.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}

.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}

.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}


/* 마진 */
.mg5  {margin:5px !important}
.mg10 {margin:10px !important}
.mg15 {margin:15px !important}
.mg20 {margin:20px !important}
.mg25 {margin:25px !important}
.mg30 {margin:30px !important}

.mgt0  {margin-top:0 !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}

.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}

.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}

.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}
















.displayNone {display:none !important}
/**
***	TOAST alert
*/
#toast-root,
#confirm-root {
	position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    user-select: none;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    background-color: #0000008f;
    align-items: center;
    justify-content: center;
}

#toast-root .toast-item-wrap,
#confirm-root .toast-item-wrap {
	width: 100%;
	margin: 0 20px;
	max-width: 680px;
    min-height: 325px;
    background-color: #ECFFD6;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    animation-name: toast-show;
	animation-duration: .5s;
	animation-timing-function: ease-in;
	overflow: hidden;
}


#toast-root .toast-item-wrap.success { background-color: blue; }
#toast-root .toast-item-wrap.info,
#confirm-root .toast-item-wrap { background-color: #fff; }
#toast-root .toast-item-wrap.warning { background-color: orange; }
#toast-root .toast-item-wrap.fail { background-color: red; }

#toast-root .toast-header,
#confirm-root .toast-header {
	width: 100%;
	min-height: 60px;
	background-color: #322192;
	color: #fff;
	font-family: 'Gsans';
	font-size: 28px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

#toast-root .toast-message-wrap,
#confirm-root .toast-message-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #2C2C2C;
	font-size: 26px;
	font-family: 'Gsans';
	padding: 40px;
	text-align: center;
	word-break: keep-all;
	width: 100%;
    max-width: 450px;
}

#confirm-root .toast-message-wrap span {	
	justify-content: center;
	align-items: center;
	color: #2C2C2C;
	font-size: 26px;
	font-family: Gsans;	
	text-align: center;	
}

#toast-root .toast-message-wrap::before {
	content: '';
	display: block;
	width: 91px;
	height: 81px;
	margin-bottom: 30px;
	background-image: url('/resources/assets/img/icon/toast-warning-b002e3aee1d9a7bf57f9ce3bd0c05cd7.svg');
}
#toast-root .toast-message-wrap.no-image::before {
	display: none;
}

#toast-root .download-button {
	padding: 10px 20px;
    margin-top: 10px;
    background-color: #7400ff;
    font-size: 22px;
    color: #fff;
    font-family: Gsans;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#toast-root .download-button img {
	margin-right: 5px;
}

#toast-root .toast-close-button,
#confirm-root .toast-close-button,
#confirm-root .toast-ok-button {
    width: 200px;
    height: 58px;
    margin-bottom: 30px;
    cursor: pointer;
}

#confirm-root .toast-button-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

#confirm-root .button {
	background-color: #b3b3b3;
    border-radius: 40px;
    font-family: Gsans;
    font-size: 20px;
    margin-left: 10px;
    margin-right: 10px;
    color: #fff;
    max-width: 160px;
}
#confirm-root .button.toast-ok-button {
	background-color: #36a8ff;
}

#confirm-root .white-box {
	background-color: #fff;
    border: 3px solid #FFDF3D;
    font-size: 22px;
    font-family: Gsans;
    padding: 15px 0;
    border-radius: 8px;
    width: 92%;
    margin: 20px 0;
}

@keyframes toast-show {
	from {bottom: -100px; opacity: 0;}
	to {bottom: 0; opacity: 1;}
}