/* 기본 레이아웃 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");

body *
{ font-family: 'Pretendard', 'Noto Sans KR', 'malgun Gothic', '맑은고딕', sans-serif; }
h1, h2, h3, h4, h5, h6
{ font-family: 'Pretendard', 'Noto Sans KR', 'malgun Gothic', '맑은고딕', sans-serif; }
h3 {margin-top: 0;}

img
{ vertical-align: top; }

ul
{ list-style: none; padding: 0; }
.flex
{ display: flex; justify-content: space-between; align-items: center; }

a
{ text-decoration: underline }
a:hover
{ text-decoration: none }

.clear
{ clear: both; }
.clear-10
{ clear: both; padding-top: 10px; }
.clear-20
{ clear: both; padding-top: 20px; }
.clear-30
{ clear: both; padding-top: 30px; }
.clear-40
{ clear: both; padding-top: 40px; }
.clear-50
{ clear: both; padding-top: 50px; }


.text-red
{ color: #FF1100; }


.noclass
{ margin: 0 auto; width: 100%; height: auto; color: #999999; font-size: 16px; text-align: center; padding: 40px 10px; line-height: 30px; border-radius: 4px; background-color: #F9F9F9; border: 1px solid #DDDDDD; }


.dfb-header
{ font-size: 22px; text-align: center; }
.dfb-header > span
{ 
	padding: 0 30px;
	display: inline-block;
	vertical-align: middle;
	font-weight: 700;
	font-size: 26px;
	vertical-align: -4px;
}
.dfb-header .month-mark > div:first-child > span {color: #00aaf0; font-weight: 700;}
.dfb-header .month-mark > div:nth-child(2) {color: #0066ff; font-weight: 700;}
.dfb-header .btn-me-prev,
.dfb-header .btn-me-next {border: 1px solid #dbdbdb;}


.table-dfb > tbody > tr > td
{ border-bottom: 1px solid #DDDDDD; }
.table-dfb > tbody > tr > td
{ padding: 5px; font-size: 32px; }
.table-dfb > tbody > tr > td > div
{ margin: 0 auto; width: 70px; height: 70px; color: #AAAAAA; font-size: 32px; text-align: center; line-height: 65px; border-radius: 70px; }
.table-dfb > tbody > tr > td > div.att-day
{ color: #333333; }
.table-dfb > tbody > tr > td.sun-day > div,
.table-dfb > tbody > tr > td > div.sun-day
{ color: #FF1100; }
.table-dfb > tbody > tr > td > div.sat-day
{ color: #0000FF; }
.table-dfb > tbody > tr > td > div.old-day
{ color: #DDDDDD; }
/*
.table-dfb > tbody > tr > td > div.to-day
{ color: #FFFFFF; background-color: #005BAC; }*/

.table-dfb > tbody > tr > td > h5
{ display: block; height: 1px; text-align: center; font-size: 8px; position: relative; text-decoration: none; padding: 0; margin: 0 auto; line-height: 12px; }
.table-dfb > tbody > tr > td > h5 > span
{ width: 20px; height: 12px; font-size: 8px; padding: 0; margin: 0; }
.table-dfb > tbody > tr > td > h5 > span.att0
{ color: #AAAAAA; }
.table-dfb > tbody > tr > td > h5 > span.att1
{ color: #005BAC; }

.table-dfb > tbody > tr > td.to-day > div
{ color: #FFFFFF; background-color: #005BAC; }
.table-dfb > tbody > tr > td.to-day > div > a
{ color: #FFFFFF; }
.table-dfb > tbody > tr > td.st-day > div
{ color: #000000; background-color: #00ff00; }


@media all and (max-width: 769px)
{
	.dfb-header
	{ font-size: 16px; text-align: center; }
	.dfb-header > button
	{ font-size: 10px; padding: 6px 10px; }
	.table-dfb > tbody > tr > td
	{ padding: 5px; font-size: 22px; }
	.table-dfb > tbody > tr > td > div
	{ width: 48px; height: 48px; font-size: 22px; line-height: 48px; border-radius: 48px; }
}







.column
{ margin: 0 auto; max-width: 1200px; padding: 0; position: relative; width: 100%; }
.column:before,
.column:after
{ display: table; content: " "; }
.column:after
{ clear: both; }


header > .column
{ padding: 30px 0; }
header > .column > .row > .col-xs-6 > a > img
{ max-width: 270px; width: 100%; }

header > .column > .row > .col-xs-3:nth-of-type(3)
{ padding-top: 12px; font-size: 40px; color: #0D5DC9; font-weight: 400; text-align: right; }
header > .column > .row > .col-xs-3:nth-of-type(3) > a
{ text-decoration: none; }

header > .column > .row > .col-xs-3:nth-of-type(3) > a:hover > img
{ background-color: #EEEEEE; }
header > .column > .row > .col-xs-3:nth-of-type(3) > a > span
{ border-bottom: 1px solid #0D5DC9; }

@media all and (max-width: 1201px)
{
	.column
	{ max-width: 98%; padding: 0 1%;  }
	.column.pl10
	{ padding: 50px 10px 0; }
	header > .column
	{ padding: 20px 3%;  }
	header > .column > .row > .col-xs-3:nth-of-type(3)
	{ padding-top: 19px; font-size: 42px; }
}

@media all and (max-width: 993px)
{
	header > .column
	{ padding: 10px 2%;  }
	header > .column > .row > .col-xs-3:nth-of-type(3)
	{ padding-top: 0; }
}

@media all and (max-width: 769px)
{
	.column
	{ max-width: 100%;  padding: 0 0; }
	.column.pl10
	{ padding: 20px 10px 0; }
	header > .column
	{ max-width: 99%; padding: 5px 1%;  }
	header > .column > .row > .col-xs-6 > a > img
	{ max-width: 200px; min-width: 160px; }

	header > .column > .row > .col-xs-3:nth-of-type(3) > a
	{ padding-top: 0; width: 54px; height: 54px; }
	header > .column > .row > .col-xs-3:nth-of-type(3) > a > img
	{ padding: 5px; width: 44px; }
}

@media all and (max-width: 526px)
{
	.column.pl10
	{ padding: 20px 10px 0; }
	header > .column
	{ padding: 2px 0; }
	header > .column > .row > .col-xs-3:nth-of-type(3)
	{ padding-top: 6px; font-size: 22px; }
	header > .column > .row > .col-xs-3:nth-of-type(3) > a > img
	{ padding: 7px; width: 40px; }
}




/* 네비게이션 */

/* 풀스크린팝업 */
.nav-screen
{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; background: rgba(0, 0, 0, 0.85); z-index: 200; display: none; }
.nav-screen.on
{ display: block; }
.nav-screen > .btn-close-popup
{ position: absolute; right: 0; top: 10px; font-size: 40px; color: #FFFFFF; z-index: 100; text-decoration: none; }
.nav-screen > .btn-close-popup > i
{ font-size: 60px; color: #FFFFFF; }

.nav-screen > .popup-contents
{ float: right; padding: 20px; max-width: 520px; width: 100%; min-height: 100%; height: auto; text-align: left; color: #FFFFFF; background: #FFFFFF; padding-bottom: 70px;}

.nav-screen > .popup-contents > aside
{ margin: 0; padding: 0 0 15px; position: relative; width: 100%; color: #0756C0; border-bottom: 1px solid #EEEEEE; }

.nav-screen > .popup-contents > aside#member-info
{ display: none; margin: 0; padding: 15px 5px; position: relative; width: 100%; color: #0756C0; border-bottom: 1px solid #EEEEEE; font-size: 16px; }
.nav-screen > .popup-contents > aside#member-info > ul > li
{ padding: 5px 0; }

.nav-screen > .popup-contents > aside:before,
.nav-screen > .popup-contents > aside:after
{ display: table; content: " "; clear: both; }
.nav-screen > .popup-contents > aside  i
{ font-size: 30px; }
.nav-screen > .popup-contents > aside  h3
{ font-size: 30px; font-weight: 300; margin: 0; }
.nav-screen > .popup-contents > aside  img
{ width: 40px; }
.nav-screen > .popup-contents > aside  img:hover
{ background-color: #F9FCFF; }

.nav-screen > .popup-contents > aside > div
{ padding: 0 5px; }

.nav-screen > .popup-contents > aside > .col-xs-8
{ font-weight: 400; }
.nav-screen > .popup-contents > aside > .col-xs-8 > a
{ text-decoration: none;  }
.nav-screen > .popup-contents > aside > .col-xs-8 > a > div
{ float: left; }
.nav-screen > .popup-contents > aside > .col-xs-8 > a > div > span
{ border-bottom: 1px solid #0D5DC9; font-size: 26px; color: #0D5DC9; }
.nav-screen > .popup-contents > aside > .col-xs-8 > a > div > img
{ width: 24px; margin-left: 10px; }
.nav-screen > .popup-contents > aside > .col-xs-8 > a > div > small
{ font-size: 14px; color: #999999; line-height: 26px; }

.nav-screen > .popup-contents > aside > .col-xs-4
{ text-align: right; }
.nav-screen > .popup-contents > aside > .col-xs-4 > a
{ text-decoration: none; }
.nav-screen > .popup-contents > aside > .col-xs-4 > a > img
{ border-radius: 50px; width: 46px; padding: 10px; background-color: #FFFFFF; border: 2px solid #EEEEEE; }
.nav-screen > .popup-contents > aside > .col-xs-4 > a:hover > img
{ background-color: #EEEEEE; }



.nav-screen > .popup-contents > h4
{ margin: 50px 0 6px; font-size: 22px; font-weight: 400; }
.nav-screen > .popup-contents > p
{ margin: 3px 0 3px 5px; font-size: 18px; font-weight: 400; }




.nav-screen > .popup-contents > section > .column
{ margin: 0; padding: 0; position: relative; width: 100%; }
.nav-screen > .popup-contents > section > .column:before,
.nav-screen > .popup-contents > section > .column:after
{ display: table; content: " "; clear: both; }


section > .dashboard > .navgations
{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; text-align: center; padding-bottom: 80px;}


section > .dashboard > .navgations > h3,
section > .dashboard > .navgations > h4
{ width: 100%; font-weight: 700;  text-align: left; padding: 10px 0 0; color: #0d5dc9; }
section > .dashboard > .navgations > h4 {position: relative; padding-left: 20px; font-size: 15px; margin-bottom: 30px;}
section > .dashboard > .navgations > h4:before {position: absolute; content: ''; width: 3px; height: 3px; background: #0d5dc9; left: 10px; top: 57%; transform: translateY(50%);}

section > .dashboard > .navgations > h3
{ color: #005BAB; }

section > .dashboard > .navgations > ul
{ width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; text-align: center; margin-bottom: 20px; }
section > .dashboard > .navgations > ul > li
{ margin: 0 auto; min-height: 1px; padding-right: 8px; padding-left: 8px; height: 200px; }

section > .dashboard > .navgations > ul > li > a
{ display: block; width: 100px; text-align: center; position: relative; }
section > .dashboard > .navgations > ul > li > a > .icons > img
{ text-align: center; width: 100%; border-radius: 30%; margin: 0 auto; }
section > .dashboard > .navgations > ul > li:hover > a > .icons > img
{ border-color: #E0E0E0; background-color: #F9FCFF; }

section > .dashboard > .navgations > ul > li > a,
section > .dashboard > .navgations > ul > li > a > h5
{ font-size: 18px; font-weight: 500; font-family: 'Noto Sans KR', 'malgun Gothic', '맑은고딕', sans-serif; color: #000000; text-decoration: none }
section > .dashboard > .navgations > ul > li:hover > a > h5
{ color: #0756C0; text-decoration: underline }

@media all and (max-width: 993px)
{
	.nav-screen > .popup-contents
	{ max-width: 100%; padding: 0;}
	.nav-screen > .popup-contents > aside
	{ padding: 0 0 12px; }
	.nav-screen > .popup-contents > aside  i
	{ font-size: 26px; }
	.nav-screen > .popup-contents > aside  h3
	{ font-size: 26px; }
	.nav-screen > .popup-contents > aside  img
	{ width: 38px; }
	{ margin: 0 auto; min-height: 1px; padding-right: 5px; padding-left: 5px; height: 140px; }
	section > .dashboard > .navgations > ul > li > a
	{ width: 90px; }
	section > .dashboard > .navgations > ul > li > a,
	section > .dashboard > .navgations > ul > li > a > h5
	{ font-size: 17px; }
}

@media all and (max-width: 769px)
{
	.nav-screen > .popup-contents
	{ background-color: 440px; }
	.nav-screen > .popup-contents > aside
	{ padding: 0 0 12px; }
	.nav-screen > .popup-contents > aside  h3
	{ font-size: 24px; }
	.nav-screen > .popup-contents > aside  img
	{ width: 32px; }

	section > .dashboard > .navgations > ul
	{ width: 100%; grid-gap: 5px; text-align: center; }
	section > .dashboard > .navgations > ul > li
	{ margin: 0 auto; min-height: 1px; padding-right: 5px; padding-left: 5px; height: 140px; }
	section > .dashboard > .navgations > ul > li > a
	{ width: 80px; }
	section > .dashboard > .navgations > ul > li > a,
	section > .dashboard > .navgations > ul > li > a > h5
	{ font-size: 16px; }
}

@media all and (max-width: 526px)
{
	.nav-screen > .popup-contents > aside
	{ padding: 10px 10px 6px; }
	.nav-screen > .popup-contents > aside#member-info
	{ padding: 9px 5px 4px 15px; font-size: 14px; }
	.nav-screen > .popup-contents > aside  h3
	{ font-size: 22px; }
	.nav-screen > .popup-contents > aside  img
	{ width: 28px; }

	.nav-screen > .popup-contents > aside > .col-xs-8 > a > div > span
	{ font-size: 18px; }
	.nav-screen > .popup-contents > aside > .col-xs-8 > a > div > small
	{ font-size: 13px; line-height: 22px; }
	.nav-screen > .popup-contents > aside > .col-xs-8 > a > div > img
	{ width: 18px; margin-left: 7px; }

	.nav-screen > .popup-contents > aside > .col-xs-4 > a > img
	{ border-radius: 50px; width: 36px; padding: 8px; }
	.nav-screen > .popup-contents > aside > .col-xs-4 > a:hover > img
	{ background-color: #EEEEEE; }



	section > .dashboard > .navgations > ul > li
	{ padding-right: 2.5px; padding-left: 2.5px; height: 100px; }
	section > .dashboard > .navgations > ul > li > a
	{ width: 70px; position: relative;}
	section > .dashboard > .navgations > ul > li > a,
	section > .dashboard > .navgations > ul > li > a > h5
	{ font-size: 13px; }
}
/* 네비게이션 */



.label-default {
	background-color: #95A7BA;
}
.label-default[href]:hover,
.label-default[href]:focus {
	background-color: #879BAF;
}

.label-yellow {
	background-color: #FC0;
}
.label-yellow[href]:hover,
.label-yellow[href]:focus {
	background-color: #FA0;
}


.label-primary {
	background-color: #009999;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
	background-color: #008989;
}
.label-success {
	background-color: #99CC00;
}
.label-success[href]:hover,
.label-success[href]:focus {
	background-color: #85B100;
}
.label-success2 {
	background-color: #669900;
}
.label-success2[href]:hover,
.label-success2[href]:focus {
	background-color: #598600;
}

.label-info {
	background-color: #3CA2BB;
}
.label-info[href]:hover,
.label-info[href]:focus {
	background-color: #31b0d5;
}

.label-info2 {
	background-color: #0A7088;
}
.label-info2[href]:hover,
.label-info2[href]:focus {
	background-color: #025B70;
}


.label-support {
	background-color: #A270FF;
}
.label-support[href]:hover,
.label-support[href]:focus {
	background-color: #8957E6;
}

.label-attend {
	background-color: #20CEAF;
}
.label-attend[href]:hover,
.label-attend[href]:focus {
	background-color: #17BA9D;
}
.label-attend2 {
	background-color: #00AAF0;
}
.label-attend2[href]:hover,
.label-attend2[href]:focus {
	background-color: #009FE1;
}



.label-warning {
	background-color: #FF9933;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
	background-color: #EC8A28;
}
.label-warning2 {
	background-color: #FF6600;
}
.label-warning2[href]:hover,
.label-warning2[href]:focus {
	background-color: #F06000;
}
.label-warning3 {
	background-color: #7CACFB;
}
.label-warning3[href]:hover,
.label-warning3[href]:focus {
	background-color: #6898E7;
}

.label-danger {
	background-color: #FF3333;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
	background-color: #EF2525;
}

.label-talk {
	background-color: #00AAF0;
}
.label-talk[href]:hover,
.label-talk[href]:focus {
	background-color: #0098D7;
}

.label-orange {
	background-color: #ff6633;
}
.label-orange[href]:hover,
.label-orange[href]:focus {
	background-color: #EE5522;
}

.label-gray {
	background-color: #AAAAAA;
}
.label-gray[href]:hover,
.label-gray[href]:focus {
	background-color: #999999;
}


/* #################   PAGINATION TYPE   ################# */
.pagination
{ margin: 0; font-size: 0;  }

.pagination > li
{ font-size: 12px; font-weight: 600; }

.pagination > li:first-child > a,
.pagination > li:first-child > span
{ border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.pagination > li:last-child > a,
.pagination > li:last-child > span
{ border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

.pagination > li > a,
.pagination > li > span
{ padding: 5px 10px; color: #000000; border: 1px solid #EEEEEE; }

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus
{ background-color: #005BAC; border-color: #005BAC; color: #FFFFFF; }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus
{ background-color: #005BAC; border-color: #005BAC;}
/* #################   PAGINATION TYPE   ################# */





.today-class-list
{ display: flex; position: relative; border: 1px solid #DBDBDB; border-radius: 4px; text-align: left; background: #FFFFFF; padding: 10px 20px; font-size: 18px; text-decoration: none; }
.today-class-list.active
{ border-color: #0D5DC9; }
.today-class-list > .tutor-imgs
{ margin-right: 10px; text-align: center; width: 104px; height: 104px; }
.today-class-list > .tutor-imgs > img
{ width: 100px; height: 100px; border: 2px solid #FFFFFF; border-radius: 100%; }
.today-class-list > .class-infos
{ margin-left: 30px; color: #000000; font-size: 18px; }
.today-class-list > .class-infos > h5
{ font-weight: 500; font-size: 24px; font-size: 17px; font-weight: 700; }
.today-class-list > .class-infos > h5,
.today-class-list > .class-infos > p
{ margin: 4px 0; }
.today-class-list > .class-infos > p:last-child
{ color: #FFFF00; }
.today-class-list > .tutor-info-name
{ margin-left: 30px; color: #000000; font-size: 18px; }
.today-class-list > .tutor-info-name > h5
{ font-weight: 500; font-size: 24px; margin-top: 25px; }
.today-class-list > .tutor-info-btn
{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

.today-class-list > .checker-icon
{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: #FFFFFF; border: 2px solid #DBDBDB; border-radius: 50%; width: 40px; height: 40px; padding: 4px; }
.today-class-list > .checker-icon > div
{ display: none; background: #0D5DC9; border-radius: 50%; width: 100%; height: 100%; }

.today-class-list.active > .checker-icon
{ border-color: #0D5DC9; }
.today-class-list.active > .checker-icon > div
{ display: block; }



@media all and (max-width: 769px)
{
	.today-class-list
	{ padding: 10px 20px; }
	.today-class-list > .tutor-imgs
	{ margin-right: 5px; width: 94px; height: 94px; }
	.today-class-list > .tutor-imgs > img
	{ width: 90px; height: 90px; }
	.today-class-list > .class-infos
	{ margin-left: 20px; font-size: 16px; }
	.today-class-list > .class-infos > h5
	{ font-size: 20px; }
	.today-class-list > .class-infos > h5,
	.today-class-list > .class-infos > p
	{ margin: 3px 0; }
}
@media all and (max-width: 526px)
{
	.today-class-list
	{ padding: 10px 5px; }
	.today-class-list > .tutor-imgs
	{ margin-right: 3px; width: 84px; height: 84px; }
	.today-class-list > .tutor-imgs > img
	{ width: 80px; height: 80px; }
	.today-class-list > .class-infos
	{ margin-left: 5px; font-size: 14px; }
	.today-class-list > .class-infos > h5
	{ font-size: 18px; }
	.today-class-list > .class-infos > h5,
	.today-class-list > .class-infos > p
	{ margin: 2px 0; }
	.today-class-list > .checker-icon
	{ width: 26px; height: 26px; padding: 3px; text-align: right; }
}











/*
.class-tool-wrap
{ background: #005bac; height: 0; overflow: hidden; transition: all 0.3s;  }
.class-tool-wrap.cancel-schedule
{ background: #FF1100; }
*/

ul.class-tool-wrap
{ display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
ul.class-tool-wrap > li
{ position: relative; margin: 0; padding: 0 30px; line-height: 20px; }
ul.class-tool-wrap > li:first-child
{ padding-left: 0; }

ul.class-tool-wrap > li:first-child:before
{ display: none; }
ul.class-tool-wrap > li > a
{ display: block; text-align: center; color: #0D5DC9; padding: 0; font-size: 18px; height: auto; line-height: 24px; }

ul.class-tool-wrap > li.disabled > a
{ color: #0D5DC9; text-decoration: line-through; cursor: not-allowed; filter: alpha(opacity=65); opacity: .65; -webkit-box-shadow: none; box-shadow: none; }
ul.class-tool-wrap > li.disabled > a:focus
{ color:#AAAAAA; text-decoration: none; background-color: transparent;  pointer-events:none }

@media all and (max-width: 769px)
{
	ul.class-tool-wrap > li
	{ padding: 0 10px; line-height: 18px; }
	ul.class-tool-wrap > li:before
	{ background: #FFFFFF; }
	ul.class-tool-wrap > li > a
	{ font-size: 16px; }
}
@media all and (max-width: 526px)
{
	ul.class-tool-wrap > li
	{ padding: 0; line-height: 16px; }
	ul.class-tool-wrap > li > a
	{ font-size: 14px; }
}




/* 하단 레이어 메뉴 */
.tsclub-bottom-fixed-menu
{ position: fixed; bottom: 0; left: 0; width: 100%; background: #f9f9f9; border-top: 1px solid #DBDBDB; z-index: 99999; }
.tsclub-bottom-fixed-menu > ul
{ display: grid; grid-template-columns: 2fr 2fr 2fr; grid-gap: 10px; margin-bottom: 0; }
/*
{ display: grid; grid-template-columns: 2fr 2fr 2fr 2fr; grid-gap: 10px; margin-bottom: 0; }
*/
.tsclub-bottom-fixed-menu > ul > li > a > .column
{ padding: 10px 10px; }
.tsclub-bottom-fixed-menu > ul > li > a > .column > .m-img
{ display: block; max-width: 46px; margin: 0 auto; }
.tsclub-bottom-fixed-menu > ul > li > a > .column > .m-img > img
{ width: 100%; }
.tsclub-bottom-fixed-menu > ul > li > a > .column > .m-title
{ text-align: center; color: #000000; margin-top: 5px; font-size: 14px; font-weight: 400; }




/* 하단 레이어 메뉴 */
.dbottom-fixed-menu
{ position: fixed; bottom: 0; left: 0; width: 100%; background: #f9f9f9; border-top: 1px solid #DBDBDB; z-index: 99999; }
.dbottom-fixed-menu > ul
{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 4px; margin: 0; padding: 0; }
.dbottom-fixed-menu > ul > li > a
{ padding: 0; text-decoration: none; }
.dbottom-fixed-menu > ul > li > a > .column
{ padding: 10px 3px; }
.dbottom-fixed-menu > ul > li > a > .column > .m-img
{ display: block; max-width: 46px; margin: 0 auto; text-align: center; }
.dbottom-fixed-menu > ul > li > a > .column > .m-img > i
{ font-size: 20px; text-align: center; font-weight: 500; line-height: 24px;  }
.dbottom-fixed-menu > ul > li > a > .column > .m-title
{ text-align: center; color: #000000; margin-top: 3px; font-size: 14px; font-weight: 400;  font-size: 10px; }























.rows
{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px }

section
{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; text-align: center; }
section img
{ max-width: 100%; }

section > .column
{ width: 100%; }
section > .dashboard
{ width: 100%; padding: 0 40px; }
section > .dashboard > h1,
section > .dashboard > h2,
section > .dashboard > h3
{ font-weight: 100; font-family: 'Noto Sans KR', 'malgun Gothic', '맑은고딕', sans-serif; color: #333333; text-align: left; padding: 0; border-top: 1px solid #C6C6C6; }
section > .dashboard > h1
{ margin-top: 15px; margin-bottom: 20px; font-size: 46px; }
section > .dashboard > h2
{ margin-top: 15px; margin-bottom: 20px; font-size: 40px; }
section > .dashboard > h3
{ margin-top: 10px; margin-bottom: 15px; font-size: 32px; }
section > .dashboard > h1 > small,
section > .dashboard > h2 > small,
section > .dashboard > h3 > small
{ font-size: 65%; color: #777777; font-weight: 100; }

section > .dashboard > h1.dotted,
section > .dashboard > h2.dotted,
section > .dashboard > h3.dotted
{ background: url('../images/icons/app-dotted-1.png') no-repeat 0 50%; padding: 0 20px; color: #FA8C00; font-weight: 600; }




section > .dashboard > .navgation
{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; text-align: center; }
section > .dashboard > .navgation > ul
{ width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; grid-auto-rows: minmax(25%, 110px); text-align: center; }
section > .dashboard > .navgation > ul > li
{ margin: 0 auto; min-height:1px; padding-right: 15px; padding-left: 15px; height: 200px; }

section > .dashboard > .navgation > ul > li > a
{ display: block; width: 130px; text-align: center; }
section > .dashboard > .navgation > ul > li > a > .icons > img
{ text-align: center; width: 100%; border: 2px solid #EFEFEF; padding: 10px 10px; border-radius: 30%; }
section > .dashboard > .navgation > ul > li:hover > a > .icons > img
{ border-color: #E0E0E0; background-color: #F9FCFF; }

section > .dashboard > .navgation > ul > li > a,
section > .dashboard > .navgation > ul > li > a > h5
{ font-size: 18px; font-weight: 500; font-family: 'Noto Sans KR', 'malgun Gothic', '맑은고딕', sans-serif; color: #000000; text-decoration: none }
section > .dashboard > .navgation > ul > li:hover > a > h5
{ color: #0756C0; text-decoration: underline }


@media all and (max-width: 1201px)
{
	section > .dashboard
	{ padding: 0 20px; }
	section > .dashboard > h1
	{ margin-top: 10px; margin-bottom: 20px; font-size: 42px; }
	section > .dashboard > h2
	{ font-size: 36px; }
	section > .dashboard > h3
	{ font-size: 30px; }
}
@media all and (max-width: 993px)
{
	section > .dashboard
	{ padding: 0 15px; }
	section > .dashboard > h1
	{ margin-top: 10px; margin-bottom: 20px; font-size: 36px; }
	section > .dashboard > h2
	{ margin-top: 10px; margin-bottom: 20px; font-size: 33px; }
	section > .dashboard > h3
	{ margin-top: 10px; margin-bottom: 15px; font-size: 30px; }



	section > .dashboard > .navgation > ul
	{ grid-gap: 5px; }
	section > .dashboard > .navgation > ul > li
	{ padding-right: 10px; padding-left: 10px; }
	section > .dashboard > .navgation > ul > li > a
	{ width: 120px; }
	section > .dashboard > .navgation > ul > li > a > .icons > img
	{ padding: 10px 10px; border-radius: 30%; }
	section > .dashboard > .navgation > ul > li > a,
	section > .dashboard > .navgation > ul > li > a > h5
	{ font-size: 17px; }
}
@media all and (max-width: 769px)
{
	section > .dashboard
	{ padding: 0 8px; }
	section > .dashboard > h1
	{ margin-top: 10px; margin-bottom:15px; font-size: 32px; }
	section > .dashboard > h2
	{ margin-top: 10px; margin-bottom:15px; font-size: 28px; }
	section > .dashboard > h3
	{ margin-top: 10px; margin-bottom: 15px; font-size: 24px; }


	section > .dashboard > .navgation > ul > li
	{ padding-right: 7px; padding-left: 7px; }
	section > .dashboard > .navgation > ul > li > a
	{ width: 110px; }
	section > .dashboard > .navgation > ul > li > a > .icons > img
	{ padding: 10px 10px; border-radius: 30%; }
	section > .dashboard > .navgation > ul > li > a,
	section > .dashboard > .navgation > ul > li > a > h5
	{ font-size: 16px; }
}
@media all and (max-width: 526px)
{
	section > .dashboard
	{ padding: 0 5px; }
	section > .dashboard > h1
	{ margin-top: 10px; margin-bottom:15px; font-size: 28px; }
	section > .dashboard > h2
	{ margin-top: 10px; margin-bottom:15px; font-size: 24px; }
	section > .dashboard > h3
	{ margin-top: 10px; margin-bottom: 15px; font-size: 20px; }


	section > .dashboard > .navgation > ul > li
	{ padding-right: 5px; padding-left: 5px; height: 160px; }
	section > .dashboard > .navgation > ul > li > a
	{ width: 96px; }
	section > .dashboard > .navgation > ul > li > a > .icons > img
	{ padding: 10px 10px; border-radius: 30%; }
	section > .dashboard > .navgation > ul > li > a,
	section > .dashboard > .navgation > ul > li > a > h5
	{ font-size: 14px; font-weight: 400; }
	section > .dashboard > .navgation > ul > li > a > h5
	{ margin-top: 5px; }
}



















/* 연기/보강관련 */

.subpage-title
{ padding: 10px; text-align: center; }
.subpage-title > h3
{ font-size: 24px; font-weight: 500; }
.subpage-title > .button
{ color: #0D5DC9; font-size: 20px; font-weight: 400; padding: 5px 10px; display: block; }


@media all and (max-width: 769px)
{
	.subpage-title > h3
	{ font-size: 20px; margin: 6px 0; }
}

@media all and (max-width: 526px)
{
	.subpage-title > h3
	{ font-size: 16px; margin: 3px 0; }
}








/* 풀스크린팝업 */
.popup-fullscreen
{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; background: rgba(0,0,0,0.9); z-index: 200; display: none; }
.popup-fullscreen.on
{ display: block; }
.popup-fullscreen > .btn-close-popup
{ position: absolute; right: 20px; top: 10px; font-size: 40px; color: #FFFFFF; z-index: 100; text-decoration: none; }
.popup-fullscreen > .btn-close-popup > i
{ font-size: 60px; color: #FFFFFF; }

.popup-fullscreen > .popup-contents
{ margin: 0 auto; padding: 20px; max-width: 620px; width: 100%; text-align: left; color: #FFFFFF; padding-bottom: 100px; }
.popup-fullscreen > .popup-contents > h2
{ margin: 50px 0 6px; font-weight: 300; }
.popup-fullscreen > .popup-contents > h2 > small
{ padding-top: 10px; display: block; color: #FFFFFF; line-height: 26px; }


.popup-fullscreen > .popup-contents >.class-info3
{ border: 1px solid #555555; font-size: 16px; padding: 15px 30px; }
.popup-fullscreen > .popup-contents >.class-info3 > ul > li
{ margin: 3px 0; color: #FFFFFF; }
.popup-fullscreen > .popup-contents >.class-info3 > ul > li > span
{ font-weight: 500; }

.popup-fullscreen > .popup-contents > h4
{ margin: 50px 0 6px; font-size: 22px; font-weight: 400; }
.popup-fullscreen > .popup-contents > p
{ margin: 3px 0 3px 5px; font-size: 18px; font-weight: 400; }
.popup-fullscreen > .popup-contents > p > span,
.popup-fullscreen > .popup-contents > p.text-hilight
{ color: #FFCC00; }
.popup-fullscreen > .popup-contents > p.lp-30
{ padding-left: 15px; }
.popup-fullscreen > .popup-contents > p.lp-50
{ padding-left: 30px; }

.event-screen > .event-screen-contents
{ width: 100%; position: absolute; top: 50%; height: 240px; margin-top: -120px; text-align: center; color: #FFFFFF; }
.event-screen > .event-screen-contents > h3
{ color: #FFFFFF; font-weight: 300; }



.check-currect-date
{ padding: 10px 0 30px; }
.check-currect-date > div
{ text-align: center; }
.check-currect-date > div > button
{ border: 1px solid #DBDBDB; background: #f3f3f3; color: #696969; font-size: 10px; width: 40px; height: 40px; padding: 0; border-radius: 4px; }
.check-currect-date > div > button:hover
{ border-color: #CCCCCC; background: #f3f3f3; color: #000000; }
.check-currect-date > div > span
{ vertical-align: middle; margin: 0 30px; font-size: 22px; font-weight: 500; color: #000000: }
.check-currect-date > div > span.week-color0
{ color: #FF1100; }
.check-currect-date > div > span.week-color6
{ color: #0000FF; }





.class-list
{ border-top: 1px solid #0D5DC9; }
.class-list > ul > li
{ color: #000000; border-bottom: 1px solid #DBDBDB; font-size: 18px; }


/*
.class-list > ul > li.disabled > a
{ color: #777; cursor: not-allowed; filter: alpha(opacity=65); opacity: .65; -webkit-box-shadow: none; box-shadow: none; }
.class-list > ul > li.disabled > a:focus
{ color:#777; text-decoration: none; background-color: transparent;  pointer-events:none }
*/




.class-info-wrap
{ padding: 12px 20px; display: flex; justify-content: space-between; text-align: left; text-decoration: none; }

.class-info-wrap > div
{ align-self: center;  }
.class-info-wrap > div > h5
{ font-size: 18px; font-weight: 600; margin: 0; }
.class-info-wrap > div > p
{ font-size: 16px; color: #333333; margin: 0; }
.class-info-wrap > div > button
{ font-size: 18px; color: #0D5DC9; min-width: 60px; display: inline-block; border: none; background: none; text-align: center; text-decoration: underline; }
.class-info-wrap:hover > div > button
{ text-decoration: none; }

.class-info-wrap > div > button.btn-cancel-class
{ color: #e30014; min-width: 60px; display: inline-block; border: none; background: none; text-align: center; }




.class-info-wrap.on
{ background: #005bac; color: #FFFFFF; }
.class-info-wrap.on > .btn-default-wrap
{ display: none; }
.class-info-wrap.on > .btn-active-wrap
{ display: block; }
/*
.subclass-time-list.on
{ margin: 0; padding: 0; background: #FAFAFA; }

.class-info-wrap.active
{ background: #005bac; color: #FFFFFF; margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.class-info-wrap.active .btn-default-wrap {display: none;}
.class-info-wrap.active .btn-active-wrap {display: block;}
*/
 .class-list .class-info-wrap.active .class-day,
.class-info-wrap.active .btn-choice-class {color: #FFFFFF;}


@media all and (max-width: 769px)
{
	.class-info-wrap > div > h5,
	.class-info-wrap > div > p,
	.class-info-wrap > div > button
	{ font-size: 16px; }
}
@media all and (max-width: 526px)
{
	.class-info-wrap > div > h5,
	.class-info-wrap > div > p,
	.class-info-wrap > div > button
	{ font-size: 16px; }
}


.btn-choice-class-close
{ color: #FFFFFF; }
.btn-choice-class-close:hover
{ color: #FFFFFF; text-decoration: none }

.btn-choice-class-wrap
{ align-self: center; text-align: center; }



.btn-choice-class-close
{ color: #FFFFFF; }
.btn-choice-class-close:hover
{ color: #FFFFFF; text-decoration: none }

.subclass-tutor-list .btn-total-tutor-wrap > a { text-decoration: underline; }



.subclass-schedule-wrap
{ background: #005bac; height: 0; overflow: hidden; transition: all 0.3s;  }
.subclass-schedule-wrap.cancel-schedule
{ background: #FF1100; }
.subclass-schedule-wrap > ul
{ display: flex; justify-content: space-between; align-items: center;  }
.subclass-schedule-wrap > ul > li
{ width: 25%; position: relative; margin: 0; padding: 0; line-height: 20px; }
.subclass-schedule-wrap > ul > li:before
{ content: ''; position: absolute; left: 0; top: 50%; height: 10px; background: #FFFFFF; width: 1px; transform: translateY(-50%); }
.subclass-schedule-wrap > ul > li:first-child:before
{ display: none; }
.subclass-schedule-wrap > ul > li > a
{ display: block; text-align: center; color: #FFFFFF; padding: 0; font-size: 18px; height: 60px; line-height: 60px; }
.subclass-schedule-wrap > ul > li.disabled > a
{ color: #CCCCCC; text-decoration: line-through; cursor: not-allowed; filter: alpha(opacity=65); opacity: .65; -webkit-box-shadow: none; box-shadow: none; }
.subclass-schedule-wrap > ul > li.disabled > a:focus
{ color:#BBBBBB; text-decoration: none; background-color: transparent;  pointer-events:none }


@media all and (max-width: 769px)
{
	.subclass-schedule-wrap > ul > li
	{ padding: 15px 0 0; }
	.subclass-schedule-wrap > ul > li:before
	{ top: 30px; }
	.subclass-schedule-wrap > ul > li > a
	{ font-size: 14px; height: 30px; line-height: 30px; }
}


/* 연기보강신청페이지 */
.subpage-header-nav
{ max-width: 400px; margin: 0 auto; line-height: 40px; text-align: center; font-size: 18px; font-weight: 500; }
.subpage-header-nav > ul
{ overflow: hidden; width: 100%;  border-radius: 4px; border: 1px solid #0D5DC9; }
.subpage-header-nav > ul > li
{ float: left; color: #0D5DC9; width: 50%; }
.subpage-header-nav > ul > li.active
{ background: #0D5DC9; font-weight: 700; }
.subpage-header-nav > ul > li > a
{ padding: 5px 10px; width: 100%; display: block; color: #0D5DC9;  }
.subpage-header-nav > ul > li.active > a
{ color: #FFFFFF; text-decoration: none; }

@media all and (max-width: 769px)
{
	.subpage-header-nav
	{ max-width: 340px; line-height: 34px; font-size: 16px; }
}




.class-items-list
{ position: relative; padding: 10px 5px; }

.class-items-list > ul > li
{ padding: 5px 0; }

.class-tutor-list
{ display: flex; position: relative; border: 1px solid #DBDBDB; border-radius: 4px; text-align: left; background: #FFFFFF; padding: 10px 20px; margin-bottom: 10px; font-size: 18px; text-decoration: none; }
.class-tutor-list.active
{ border-color: #0D5DC9; }
.tutor
{ display: flex; flex-direction: column; justify-content: space-around; margin-right: 10px; text-align: center; width: 90px; }
.tutor > .tutor-imgs > img
{ width: 70px; height: auto; border: 2px solid #FFFFFF; border-radius: 100%; }
.class-tutor-list > .class-infos
{ margin-left: 30px; color: #000000; font-size: 18px; }
.class-tutor-list > .class-infos > h5
{ font-weight: 500; font-size: 24px; height: auto; }
.class-tutor-list > .class-infos > h5,
.class-tutor-list > .class-infos > p
{ margin: 4px 0; }
.class-tutor-list > .class-infos > p:last-child.available-time
{ color: #FF3366 }
.class-tutor-list > .class-infos > p:last-child
{ color: #fff }
.class-tutor-list > .tutor-info-name
{ margin-left: 30px; color: #000000; font-size: 18px; }
.class-tutor-list > .tutor-info-name > h5
{ font-weight: 500; font-size: 24px; margin-top: 25px; }
.class-tutor-list > .tutor-info-btn
{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

.class-tutor-list > .checker-icon
{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: #FFFFFF; border: 2px solid #DBDBDB; border-radius: 50%; width: 40px; height: 40px; padding: 4px; }
.class-tutor-list > .checker-icon > div
{ display: none; background: #0D5DC9; border-radius: 50%; width: 100%; height: 100%; }

.class-tutor-list.active > .checker-icon
{ border-color: #0D5DC9; }
.class-tutor-list.active > .checker-icon > div
{ display: block; }



@media all and (max-width: 769px)
{
	.class-tutor-list
	{ padding: 10px 20px; }
	.class-tutor-list > .tutor-imgs
	{ margin-right: 5px; width: 94px; height: 94px; }
	.class-tutor-list > .tutor-imgs > img
	{ width: 90px; height: 90px; }
	.class-tutor-list > .class-infos
	{ margin-left: 20px; font-size: 16px; }
	.class-tutor-list > .class-infos > h5
	{ font-size: 16px; }
	.class-tutor-list > .class-infos > h5,
	.class-tutor-list > .class-infos > p
	{ margin: 3px 0; }
}
@media all and (max-width: 526px)
{
	.class-tutor-list
	{ padding: 10px 5px; padding-right: 70px;}



	.class-tutor-list > .tutor-imgs
	{ margin-right: 3px; margin-top: 5px; position:relative; width: 0; height: 0;     padding-bottom: 18%;
    padding-right: 18%;}
	.class-tutor-list > .tutor-imgs > img
	{ width: 100%; height: 100%; position: absolute; top: 0; right: 0;}

	.class-tutor-list > .class-infos
	{ margin-left: 0px; font-size: 14px; }
	.class-tutor-list > .class-infos > h5
	{ font-size: 16px; }
	.class-tutor-list > .class-infos > h5,
	.class-tutor-list > .class-infos > p
	{ margin: 2px 0; }


	.class-tutor-list > .checker-icon
	{ width: 26px; height: 26px; padding: 3px; text-align: right; }

}


























.inner
{ padding-left: 10px; padding-right: 10px; }
.vertical-inner
{ padding-top: 10px; padding-bottom: 10px; }


/* 로그인페이지 */
.content-box
{ position: fixed; left: 50%; top: 45%; transform: translate(-50%,-50%); width: 100%; padding: 0 10px; max-width: 769px; }
h1
{ margin: 0 auto; padding-bottom: 40px; max-width: 260px; }
.login-form
{ padding: 0 10px; margin: 0 auto; }
.login-form .form-row
{ margin-bottom: 20px; }
.login-form label > div:first-child
{ margin-bottom: 5px; }
.login-form label
{ font-size: 14px; font-weight: 700; color: #0D5DC9; display: block; width: 100%; }
.login-form input
{ width: 100%; border: 1px solid #DBDBDB; padding: 10px; border-radius: 4px; background: #FFFFFF; -webkit-appearance: none; }
.btn-login-submit
{ width: 100%; background: #0D5DC9; color: #FFFFFF; font-weight: 900; border: none; height: 50px; line-height: 50px; padding: 0; border-radius: 4px; margin-top: 20px; }


/* 메인페이지 */
header
{ padding: 0 10px; border-bottom: 1px solid #0D5DC9; background: #0d5dc9; position: fixed; left: 0; top: 0; width: 100%; z-index: 100; transition: all 0.3s; }
header h1
{ max-width: 140px; margin: 0; padding: 0; }
header .user-info
{ font-weight: 400; align-self: center; color: #0D5DC9; }





/*
.main-header
{ padding: 0 10px; border-bottom: 1px solid #0D5DC9; background: #f9f9f9; position: fixed; left: 0; top: 0; width: 100%; z-index: 100; transition: all 0.3s; }
.main-header h1
{ max-width: 140px; margin: 0; padding: 0; }
.main-header .user-info
{ font-weight: 400; align-self: center; color: #0D5DC9; }
*/


.main-gnb {min-height: 460px;}
.main-gnb ul {overflow: hidden;}
.main-gnb ul li {float: left; width: 33.3333%; padding: 10px;}
.main-gnb ul li .gnb-title {text-align: center; color: #919191; font-weight: 700; margin-top: 10px;}
.main-gnb a {display: block;}

/* 메인페이지 두번째 시안 */
.main-bg2.main-header {border: none; padding-bottom: 150px; margin-bottom: 30px;}
.main-bg2.main-header .user-info { color: #FFFFFF; }
.main-bg2.main-header > .user-info > a { color: #003DC9; background-color: #FFFFFF; padding: 3px 9px; border-radius: 3px; font-weight: 600; text-decoration: none; }
.main-bg2.main-header > .user-info > a:hover { color: #FFFFFF; background-color: #0D5DC9; }
.main-bg2.main-header h1 {padding-top: 10px;}
.main-button {position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);}
.main-button > div {background: #FFFFFF; padding: 10px; border-radius: 50%; width: 140px; height: 140px; margin: 0 auto; border: 1px solid #DBDBDB;}
.main-button > div > div {background: #F3F3F3; width: 100%; height: 100%; border: 1px solid #DBDBDB; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 18px; text-align: center; }
.main-button > div > div > a {color: #828282; display: block;}


/* 푸터 */
.main-footer
{ background: #f9f9f9; font-size: 14px; text-align: center; color: #777; font-weight: 400; padding: 20px 10px; }
.main-footer > div
{ margin: 5px 0; }
.row .main-footer
{ margin: 0 -10px; }

/* 연기보강신청페이지 */
.subclass-menu-title
{ max-width: 300px; margin: 0 auto 12px; padding-top: 5px; text-align: center; font-size: 14px; font-weight: 600; }
.subclass-menu-title ul
{ overflow: hidden; width: 100%;  border-radius: 4px; overflow: hidden; border: 1px solid #0D5DC9; }
.subclass-menu-title ul li { float: left; color: #0D5DC9; width: 50%; }
.subclass-menu-title ul li.on { background: #0D5DC9; font-weight: 700; }
.subclass-menu-title ul li.on a { color: #FFFFFF; text-decoration: none; }
.subclass-menu-title ul li a { padding: 5px 10px; width: 100%; display: block; color: #0D5DC9;  }

/*
.subclass-tutor-list {border: 1px solid #DBDBDB; border-radius: 4px; margin-top: 10px; text-align: left; background: #FFFFFF;}
.subclass-tutor-list {justify-content: flex-start; padding: 10px; position: relative;}
.class-info {align-self: center;}
.tutor-img {margin-right: 10px; align-self: center;}
.subclass-tutor-list .checker-icon {position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.subclass-tutor-list.on {box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 0px 9px 0 rgba(0,0,0,0.19);}
.subclass-tutor-list.on .checker-icon>div {display: block;}
.subclass-tutor-list .btn-total-tutor-wrap {position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
*/
/* .subclass-tutor-list .btn-total-tutor-wrap .btn-choice-class {width: 80px;} */









/* 연기보강신청목록 */
.subclass-list > ul > li
{ padding: 10px 0; }

.subclass-list > ul > li > div:first-child
{ padding: 0 10px; text-align: left; }

.subclass-list > ul > li > div > p
{ font-size: 14px; margin: 3px; }
.subclass-list > ul > li > div > div.class-day
{ margin-top: 10px; line-height: 20px;  }


@media all and (max-width: 769px)
{
	.subclass-list > ul > li > div > p,
	.subclass-list > ul > li > div > div
	{ font-size: 16px; }
}
@media all and (max-width: 526px)
{
	.subclass-list > ul > li > div > p,
	.subclass-list > ul > li > div > div
	{ font-size: 14px; }
}



span.label-attend1 {
	background-color: #00AAF0; border: 1px solid #0099CC; color: #FFFFFF; position: relative; font-size: 12px; font-weight: 600; padding: 2px 5px; border-radius: 3px; }
span.label-attend2 {
	background-color: #EEFCFE; border: 1px solid #96DFE8; color: #0180BF; position: relative; font-size: 12px; font-weight: 600; padding: 2px 5px; border-radius: 3px; }
span.label-attend3 {
	background-color: #FFF8F8; border: 1px solid #FF9F98; color: #FF1100; position: relative; font-size: 12px; font-weight: 600; padding: 2px 5px; border-radius: 3px; }
span.label-attend4 {
	background-color: #F7F7F7; border: 1px solid #CCCCCC; color: #AAAAAA; position: relative; font-size: 12px; font-weight: 600; padding: 2px 5px; border-radius: 3px; }
span.label-attend5 {
	background-color: #EEFCFE; border: 1px solid #99E5EE; color: #0180BF; position: relative; font-size: 12px; font-weight: 600; padding: 2px 5px; border-radius: 3px; }
span.label-attend6 {
	background-color: #FF6600; border: 1px solid #D35400; color: #FFFFFF; position: relative; font-size: 12px; font-weight: 600; padding: 2px 5px; border-radius: 3px; }

span.label-attend1:hover,
span.label-attend2:hover,
span.label-attend3:hover,
span.label-attend4:hover,
span.label-attend5:hover,
span.label-attend6:hover {
	text-decoration: none; }

.attendance span.label-attend1,
.attendance span.label-attend2,
.attendance span.label-attend3,
.attendance span.label-attend4,
.attendance span.label-attend5,
.attendance span.label-attend6 {
	padding: 2px 4px; }




















/* 보강수업 스케줄 지정 */
.subclass-info-alert {padding: 10px 0;}
.subclass-info-alert>p {margin-bottom: 10px;}
.possible-tutor-list { display: none; padding-bottom: 10px; padding-top: 5px; }
.possible-tutor-list.on {display: block;}
.possible-tutor-list .subclass-tutor-list {margin: 0; border-top: 0;}
.possible-tutor-list ul li:first-child .subclass-tutor-list {border-top: 1px solid #DBDBDB;}

.possible-tutor-list ul li:hover
{ background-color: #DBDBDB; }


.possible-tutor-list ul li.notutor { border-top: 1px solid #DBDBDB; padding: 5px; background-color: #FAFAFA; }
.possible-tutor-list ul li.notutor > h4 { border: 1px solid #DBDBDB; padding: 40px; background-color: #FFFFFF; text-align: center; margin: 0; font-weight: 400; font-size: 18px; }

.subclass-tutor-list
{ border: 1px solid #DBDBDB; border-radius: 4px; margin-top: 10px; text-align: left; background: #fff; }
.subclass-tutor-list
{ justify-content: flex-start; padding: 10px; position: relative;}
.class-info
{ align-self: center; }
.subclass-tutor-list > .tutor-img > img
{ width: 60px; margin-right: 10px; border-radius: 60px; }
.subclass-tutor-list .checker-icon {position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.subclass-tutor-list.on {box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 0px 9px 0 rgba(0,0,0,0.19);}
.subclass-tutor-list.on .checker-icon>div {display: block;}
.subclass-tutor-list .btn-total-tutor-wrap {position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
/* .subclass-tutor-list .btn-total-tutor-wrap .btn-choice-class {width: 80px;} */
/* 보강수업 스케줄 지정 */
.subclass-info-alert {padding: 10px 0;}
.subclass-info-alert>p {margin-bottom: 10px;}


.subclass-tutor-list span
{ text-decoration: underline }
.subclass-tutor-list:hover span
{ text-decoration: none }



/* 강사선택 */
.tutor-list-select > ul > li { padding-bottom: 0; float: left; width: 50%;}
.tutor-list-select > ul > li:nth-child(2n-1) {border-right: 1px solid #DBDBDB;}
.tutor-list-select > ul {overflow: hidden;}
.tutor-list-select > ul > li.on {background: #0D5DC9;}
.tutor-list-select > ul > li.on .class-day {color: #FFFFFF;}
.tutor-list-select .flex {justify-content: center;}
.subclass-tutor-wrap.on .class-info .tutor-name {color: #FFFFFF;}



/* 컴포넌트 */
.main-bg {background: url(../images/app/bg_wave.png) no-repeat 50% 0%; background-size: 100%;}
.main-bg2 {background: url(../images/app/bg_circle.png) no-repeat 50% 100%; background-size: 100%;}

.cb-btn-prev,
.cb-btn-home,
.cb-btn-page
{ font-weight: 600; color: #0D5DC9;  display: inline-block; padding: 10px; font-size: 16px; }
.cb-btn-page
{ font-size: 18px; color: #000000; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-family: 'Noto Serif', serif; }

.inner-border {border-bottom: 1px solid #DBDBDB; margin: 0 10px;}
.fluid-border {border-bottom: 1px solid #0D5DC9; margin: 0 -10px;}
.info-icon {position: absolute; right: 20px; top: 50%; transform: translateY(-50%); border: 1px solid #0D5DC9; color: #0D5DC9; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; font-weight: 700; font-size: 11px;}
.btn-subclass-rule {color: #0D5DC9; font-weight: 700; padding: 5px 10px; display: block;}




.class-state
{  font-size: 14px; line-height: 24px; }
.btn-choice-class
{ min-width: 60px; display: inline-block; border: none; background: none; text-align: center; }
.btn-choice-class.disabled
{ color: #777; cursor: not-allowed; filter: alpha(opacity=65); opacity: .65; -webkit-box-shadow: none; box-shadow: none; }
.btn-choice-class.disabled:focus
{ color:#777; text-decoration: none; background-color: transparent;  pointer-events:none }

.btn-cancel-class
{ color: #e30014; min-width: 60px; display: inline-block; border: none; background: none; text-align: center; }
.btn-cancel-class.disabled
{ color: #777; cursor: not-allowed; filter: alpha(opacity=65); opacity: .65; -webkit-box-shadow: none; box-shadow: none; }
.btn-cancel-class.disabled:focus
{ color:#777; text-decoration: none; background-color: transparent;  pointer-events:none }


@media all and (max-width: 769px)
{
	.btn-choice-class-wrap
	{ min-width: 65px; text-align: right; }

	.class-state
	{  font-size: 14px; line-height: 16px; }
	.btn-choice-class,
	.btn-cancel-class
	{ font-size: 14px; min-width: auto; }
}



.header-btn-wrap {margin-bottom: 5px; padding-top: 0; display: flex; justify-content: space-between; position: relative;}
.header-title {position: absolute; left: 50%; top: 20px; transform: translateX(-50%); font-weight: 700; font-size: 16px;}
.btn-change-tutor {font-size: 14px; color: #0D5DC9; }
.fluid {margin: 0 -10px;}
.highlight {font-weight: 700; color: #1858ae;}
.btn-active-wrap {display: none;}



/* 풀스크린팝업 */
/*
.fullscreen-popup {position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; background: rgba(0,0,0,0.9); z-index: 200; display: none;}
.fullscreen-popup.on {display: block;}
.fullscreen-popup > .popup-contents {position: absolute; left: 0; top: 0; padding: 20px;}
.fullscreen-popup > .btn-close-popup {position: absolute; right: 20px; top: 10px; font-size: 32px; color: #FFFFFF; z-index: 300;}
.fullscreen-popup h4 {margin-top: 25px; color: #FFFFFF;}
.fullscreen-popup p {color: #FFFFFF;}
*/







/* 비로긴상태 */
.mlogin-column
{ width: 100%; padding: 0; margin: 0; background: #FFFFFF;  text-align: center; height: 100%; overflow: hidden; }
.mlogin-column > .row
{ margin: 0 auto; max-width: 800px; padding: 0 10px; position: relative; width: 100%; }
.mlogin-column > .row > h1
{ padding: 30px 0 0;  }

.mlogin-column > .row > .mlogin
{ transition:900ms; -webkit-transition: all 900ms ease; -o-transition: all 900ms ease;  }
.mlogin-column > .row > .mlogin
{ width: 340px; margin: 0 auto;  font-size: 16px; }

.mlogin-column > .row > .mlogin
{ width: 100%; max-width: 320px; margin: 40px auto 0;  padding: 0; font-size: 16px; }

.mlogin-column > .row > .mlogin > form > div > div
{ text-align: left; color: #0D5DC9; }
/* .mlogin-column > .row > .mlogin > form > div > div > label
{ margin-top: 15px; } */
.mlogin-column > .row > .mlogin > form > div > div > input.form-control
{ border-radius: 5px; border: 1px solid #DDDDDD; background-color: #FFFFFF; font-size: 16px; padding: 18px; line-height: 32px; height: 36px; }
.mlogin-column > .row > .mlogin > form > div > div > input.form-control:focus
{ border: 1px solid #4F89E9; }

.mlogin-column > .row > .mlogin > form > div > div > .button
{ transition:500ms; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; }
.mlogin-column > .row > .mlogin > form > div > div > .button
{ width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #0c59c1; border-image: none; color: #FFFFFF; background-color: #0D5DC9; font-size: 16px; font-weight: 600; text-decoration: none; }
.mlogin-column > .row > .mlogin > form > div > div > .button.active,
.mlogin-column > .row > .mlogin > form > div > div > .button:hover
{ color: #FFFFFF; background-color: #000000; border-color: #000000; text-decoration: none; }
.mlogin-column > .row > .mlogin > form > div > div > .button:active,
.mlogin-column > .row > .mlogin > form > div > div > .button:focus
{ color: #FA8C00; background-color: #000000; border-color: #000000; }

.mlogin-column > .row > .mlogin > form > div > div > .button-sign
{ border: 1px solid #fa8c00; border-image: none; color: #FFFFFF; background-color: #fa8c00; }

.mlogin-column > .row > .mlogin > form > div > div > .button-black
{ border: 1px solid #333333; border-image: none; color: #FFFFFF; background-color: #333333; }


.mlogin-column > .row > .mlogin > form .alert-info
{ font-size: 14px; padding: 10px; line-height: 22px; }



/* 톡스클럽 css */
.friends-list-row {margin: 0 -10px; background: #f9f9f9; border-bottom: 1px solid #DBDBDB;}
.all-friends-title {font-weight: 400; color: #000000; display: inline-block; padding: 10px; font-size: 13px;}
.btn-seeall {font-weight: 400; color: #0D5DC9; display: inline-block; padding: 10px; font-size: 13px;}
.friends-info {width: 70px; display: inline-block; text-align: center; padding: 0 5px;}
.friends-info .list-img-wrap {border-radius: 100%; overflow: hidden;}

.friends-info .list-name-wrap
{ font-size: 12px;  font-weight: 700; color: #000000; margin-top: 5px; }


.photo-feed {margin: 0 -10px;}
.photo-feed .photo-box {margin-bottom: 30px; position: relative;}
.photo-box .btn-more-toggle {position: absolute; right: 10px; top: 15px; z-index: 1;}
.photo-box .btn-more-toggle>a {padding: 2px 7px; color: #000000; border-radius: 4px; color: #ff4c4c; background: #fff;}

.photo-uploader-info {padding: 10px; display: block; position: relative; margin-right: 10px;}
.photo-uploader-info:after {content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 10px; background: #999; transform: translateY(-50%);}

.photo-info
{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #DBDBDB; color: #555555; font-weight: 400; font-size: 14px; }
.photo-info > div
{ display: flex;justify-content: center;align-items: center; }




.btn-show-comment-list {color: #000000; color: #666;}

.btn-comment-wrap { padding: 10px; display: flex; }

.sub-title-com-1 {color: #FFFFFF; font-weight: 700; background: #0D5DC9; margin: 0 -10px; padding: 10px 0;}
.friends-list-box-content {border-bottom: 1px solid #DBDBDB; margin: 0 -10px;}

.target-user-info-box {display: flex; padding: 10px 0; font-family: 'Noto Serif', serif;}
.target-user-info-box .target-user-info {display: flex; flex-direction:column; justify-content: center; font-weight: 700; margin-left: 10px;}
.btn-t-chat {border: 1px solid #DBDBDB; color: #000000; padding: 5px 20px; display: inline-block; border-radius: 100px; font-weight: 400; font-size: 12px; font-style: italic;}
.btn-add-friend {border: 1px solid #DBDBDB; color: #000000; padding: 5px 12px; display: inline-block; border-radius: 100px; font-weight: 400; font-size: 12px; margin-left: 5px; padding-right: 10px;}
.target-user-info-box .target-user-info .target-user-btn {display: flex;}
.target-user-img {border-radius: 100%; overflow: hidden;}
.target-user-img .uploader-img {border: 1px solid #DBDBDB;}

.photo-feed-grid {min-height: 470px; margin: 0 -10px;}
.photo-feed-grid>div {display: grid; grid-template-columns: 2fr 2fr 2fr; grid-gap: 5px 1px;}

/* 하단 고정메뉴 */
.bottom-fixed-menu {position: fixed; bottom: 0; left: 0; width: 100%; background: #f9f9f9; border-top: 1px solid #DBDBDB; z-index: 1; }
.bottom-fixed-menu ul {display: grid; grid-template-columns: 2fr 2fr 2fr 2fr; grid-gap: 10px; margin-bottom: 0;}
.bottom-fixed-menu .gnb-box { padding: 10px 10px; }
.bottom-fixed-menu .gnb-box .gnb-img {display: block; max-width: 30px; margin: 0 auto;}
.bottom-fixed-menu .gnb-box .gnb-title {text-align: center; color: #000000; margin-top: 5px; font-size: 14px; font-weight: 600; }


/* 사진업로드 */
.btn-upload-submit {width: 100%; padding: 15px 0; background: #0D5DC9; border: none; color: #FFFFFF; font-weight: 700; margin-top: 10px; margin-bottom: 100px;}
/* textarea, input { -webkit-appearance: none; } */


/* 로그아웃 & 회원가입 */
.login-info {position: relative; cursor: pointer;}
.login-info .btn-logout {position: absolute;left: 0;top: 100%;width: 100%;background: #FFFFFF;text-align: center;padding: 2px 0px;margin-top: 5px; display: none; }
.login-info.on .btn-logout {display: block;}
.member-join-wrap section.mlogin{margin-top: 30px;}


/* 코멘트 웹폰트 */
.comment-font-style
{ font-family: 'Noto Serif', serif; font-style: normal; }
.comment-txt
{ font-size: 20px; margin: 10px 0; font-family: 'Noto Serif', serif; padding-bottom: 10px; }


/* 채팅 */
.chatting-search {text-align: center; margin: 10px 0;}
.chatting-search-box {position: relative; display: inline-block;}
.chatting-search-box > input {border: 1px solid #DBDBDB; border-radius: 5px; background: #e5e5e5; padding: 10px 0px 10px 30px; transition: background 0.5s; font-weight: 700;}
.chatting-search-box > i {position: absolute;left: 10px;top: 50%;transform: translateY(-50%);color: #666;}
.chatting-search-box > input:focus {background: #fafafa;}

.chatting-list-box>a {display: block; position: relative; padding: 8px 0px;}
.chatting-list-box .img-wrap {width: 50px; height: 50px; float: left; border: 1px solid #DBDBDB; border-radius: 100%; overflow: hidden;}
.chatting-last-date {position: absolute; right: 0px; top: 10px; font-size: 12px;}
.chatting-list-box .chatting-info {float: left; padding-left: 10px;}
.chatting-name {font-weight: 700; color: #3897f0;}
.chatting-txt { width: 270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #999; margin-top: 4px;}
.new-msg-icon {position: absolute; right: 0; bottom: 15px; border-radius: 100%; width: 20px; height: 20px; line-height: 20px; padding: 0;}
.chatting-list-title {font-size: 16px; font-weight: 700; padding-left: 5px; padding-bottom: 10px;}
.friends-list-box .chatting-info {margin-top: 15px;}


/* 신고하기버튼 토글 */
/* .more-toggle-wrap {position: fixed; left: 50%; bottom: -0%; z-index: 2;  width: 100%; height: 100%; transform: translateX(-50%); background: rgba(0,0,0,0.6); transition: all 0.3s;} */
.more-toggle-wrap * { font-size: 16px; }
.more-toggle-wrap a { display: block; padding: 10px; color: #FFFFFF; }
.more-toggle-wrap a i {width: 20px;}
.more-toggle-wrap hr {margin-top: 5px; margin-bottom: 5px; border-color: #333;}
.more-toggle-wrap .toggle-bg {position: fixed; left:0; top: 0; z-index: 200; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none;}
.more-toggle-wrap .toggle-menu {position: fixed; bottom: -130px; left: 50%; z-index: 201; max-width: 680px; width: 100%; transform: translateX(-50%); background: #212121; padding-bottom: 35px; transition: all 0.3s;}

.report-reason {position: fixed; bottom: -320px; left: 50%; transform: translateX(-50%); z-index: 202; max-width: 680px; width: 100%; height: auto; transition: all 0.3s;}





.report-reason .report-reason-inner {background: #212121; padding: 10px; color: #FFFFFF;  padding-bottom: 35px; }
.report-reason-inner .report-title {font-size: 22px; font-weight: 700; margin-bottom: 10px;}
.report-reason-inner .checker span {border-radius: 100%; overflow: hidden;}
.report-reason-inner label {padding: 10px 0;}

.report-btn-wrap { display: flex; justify-content: space-around; align-items: center; }
.report-btn-wrap > div { width: 50%; }
.report-btn-wrap > div > a { display: block; text-align: center; }



/* 톡스다이어리 페이지4 (유저개인페이지) CSS */
.club-user-page .comment-btns-wrap > div {display: inline-block;}
.club-user-page .comment-btns-wrap > .comment-icon {margin-left: 5px; display: inline-block;}
.club-user-page .comment-btns-wrap > .comment-icon > a > div {width: 18px; margin-right: 2px; display:inline-block;}
.club-user-page .comment-btns-wrap > .comment-icon > a > span {color: #050708; font-size: 16px; line-height: 16px; vertical-align: top;}



/* 리뉴얼 2020-01-28 START */
.owl-carousel .item {border-radius: 20px; overflow: hidden;}
.navgations h4 > .title-bg-border {position: absolute; right: 10px; top: 21px; width: 90%; height: 1px; background: #cfdff4; z-index: 0;}
.navgations h4 > span {position: relative; background: #fff; padding-right: 10px; z-index: 1;}
.dashboard .class-info-box {
	/* background: url('../images/app/class-info-box-bg.png') repeat-y 0 50%; */
	background:  #0d5dc9;
	background-size: 100%; border-top: 1px solid #0d5dc9; margin: 0 -5px; margin-bottom: 0px; padding: 0 5px; margin-bottom: 15px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;}
.dashboard .class-info-box .class-tutor-list {padding-right: 5px; background:
	transparent; border: none;  border-top: 1px solid rgba(255, 255, 255, .5); color: #fff; border-radius: 0;}
.dashboard .class-info-box .class-tutor-list .class-infos {color: #fff;}
.dashboard .class-info-box ul.class-tool-wrap > li.disabled > a {color: #fff;}
.dashboard .class-info-box .class-tutor-list > .tutor-imgs > img {border: 1px solid #fff;}
.dashboard .class-info-box ul.class-tool-wrap > li > a {color: #fff; border: 1px solid #fff; padding: 2px 10px; border-radius: 50px; font-size: 12px;}
.header-logo {width: 130px; margin: 0 auto;}
.header-logo > a {display: block; padding: 5px 0;}
.header-logo > a > img {width: 100%;}
.nav-top-menu {position: absolute; right: 5px; top: 17px; width: 23px;}
.nav-top-menu > a {display: block;}
.nav-top-menu > a > img {width: 100%;}
.dbottom-fixed-menu > ul > li > a > .column {padding: 6px 3px 4px;}
.dbottom-fixed-menu > ul > li > a > .column > .m-img {max-width: 20px; margin-bottom: 5px;} 
.dbottom-fixed-menu > ul > li > a > .column > .m-img > img {width: 100%; height: auto;}
.dbottom-fixed-menu > ul > li:nth-child(2) > a {display: block; margin: 0 auto; width: 65px; border-radius: 25px;}
.dbottom-fixed-menu > ul > li:nth-child(2) > a > .column > .m-title {/*color: #fff;*/}
.dbottom-fixed-menu {padding: 5px 0;}
.subpage-main-title {font-size: 18px; margin: 20px 0; line-height: 1; font-weight: 900;}

.dashboard .owl-theme .owl-nav.disabled + .owl-dots {margin-top: 5px;}
.dashboard .owl-theme .owl-dots .owl-dot span {width: 5px; height: 5px; margin: 5px;}
.dashboard .owl-theme .owl-dots .owl-dot.active span {background: #0D5DC9;}

/* 리뉴얼 2020-01-28 END */


/* 아이딕잉글리쉬 추가 START */
.btn-idic-english {width: 50px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.btn-idic-english > a {display: block;}
.btn-idic-english > a > img {width: 100%;}
/* 아이딕잉글리쉬 추가 END */



/* 토크스테이션 모바일 프로필 START */
@media all and (max-width: 769px)
{
  .class-info-box {
    color: #fff;
  }

  .class-info-box .go-to-the-class {
    display: none;
  }

  .class-info-box .member-profile-wrap{
    /* display: flex;
    justify-content: space-around;
    align-items: center; */
    padding: 1.2em;

  }

	.class-info-box .memeber-profile img{
    border-radius: 50%;
  }

}

/* 토크스테이션 모바일 프로필 END */

.sprite {
	display: inline-block;
	width: 50px;
	height: 50px;
	background: url(../images/icons/mobile-main.png) no-repeat;
	background-position: 0 0;
	margin: 0 auto;
	background-size: 210px 210px;
	vertical-align: top;
	overflow: hidden;
}

.ssprite{
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../images/icons/mobile-main.png) no-repeat;
	background-position: 0 0;
	background-size: 180px 180px;
	border-radius: 50%;
}

.msprite {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../images/icons/mobile-main.png) no-repeat;
	background-position: 0 0;
	margin: 0 auto;
	background-size: 280px 280px;
}

.nav-screen__util-box {
	display: flex; justify-content: flex-end;
}
.nav-screen__util-box > div:first-child {margin-right: 10px;}
.nav-screen__util-box .nav-screen__util-box__link {
	display: flex; justify-content: center; border: 2px solid #EEEEEE; border-radius: 50%; align-items: center; width: 35px; height: 35px;
}


/* 강의실입장버튼 생성 */
.class-tutor-list a.btn {
	width: 180px;
	border-radius: 50px;
	text-decoration: none;
	margin-top: 5px;
	font-size: 16px;
	font-weight: 700;
    color: #bbb;
	background-color: #eee;
    text-decoration: line-through;

}

.class-tutor-list a.btn.btn-talk {
	width: 180px;
	border-radius: 50px;
	text-decoration: none;
	margin-top: 5px;
    color: #0D5DC9;
	background-color: #fff;
    border-color: #fff;
}

.btn-class-container {
	display: flex;
	align-items: center;
}
.btn-zoom-install {
	font-size: 10px;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: transparent;
	border-radius: 4px;
	overflow: hidden;
	padding: 4px 10px;
	line-height: 1;
	text-decoration: none;
	margin-left: 5px;
	color: #fff;
	border: 1px solid #fff;
}
.btn-zoom-install:hover,
.btn-zoom-install:focus,
.btn-zoom-install:active {
	color: #fff;
}
.zoom-install-popup-header {
	display: flex;
	align-items: center;
	padding: 10px;
	padding-bottom: 20px;
	font-size: 22px;
	font-weight: 700;
	color: #2d8cff;
	position: relative;
}
.zoom-install-popup-header .btn-popup-close {
	position: absolute;
	right: 10px;
	top: 0;
	font-size: 32px;
	color: #1f1f1f;
	text-decoration: none;
}
.zoom-install-popup-header > img {
	width: 120px;
	margin-right: 10px;
}
.zoom-install-popup-txt {
	padding: 20px 30px;
	background: #fdfdfd;
	border-top: 1px solid #dbdbdb;
	border-bottom: 1px solid #dbdbdb;
}
.zoom-install-popup-txt2 {
	padding: 20px 30px;
}
.btn-zoom-down-container {
	display: flex;
	justify-content: center;
	align-items: center;
	/* background: #fdf3f3; */
	margin: 0 10px;
	border-radius: 5px;
	position: relative;
	border: 1px solid #eee;
}
.btn-zoom-down-container.btn-zoom-down-container--pc {
	background: #fff;
}
.btn-zoom-down-container div:nth-child(2) {
	margin: 0 5px;
}
.btn-zoom-down-container a {
	flex-shrink: 1;
}
.btn-zoom-down-container a.btn-zoom-down {
	background: #111;
	color: #fff;
	width: 180px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-weight: 700;
}
.btn-zoom-down-container .btn-zoom-down-title {
	font-weight: 900;
	width: 70px;
	flex-shrink: 1;
	position: absolute;
	left: 17px;
	background: #2d8cff;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 50px;
}
.btn-zoom-down-container.btn-zoom-down-container--mobile .btn-zoom-down-title {
	background: #ff711f;
}
.btn-zoom-down-container a.btn-zoom-down.btn-zoom-down--win {
	background: #01a1ee;
}
.btn-zoom-down-container a.btn-zoom-down.btn-zoom-down--mac {
	background: #111;
}
.btn-zoom-down-container a.btn-zoom-down.btn-zoom-down--mac img,
.btn-zoom-down-container a.btn-zoom-down.btn-zoom-down--win img {
	width: 30px;
	margin-right: 10px;
}
.zoom-install-popup-txt3 {
	padding: 20px 30px;
}
.zoom-install-popup-txt3 div {
	background: #fafafa;
	border: 1px solid #dbdbdb;
	padding: 10px;
	text-align: center;
}

.t_type , .t_class_date{
	display: inline-block;
	margin: 0;
}

.t_type{
	box-sizing: border-box;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0 5px;
    font-size: 12px;
	gap: 10px;
	border: 1px solid #FFFFFF;
	border-radius: 50px;
	color: #FFFFFF;


/* 보강권 추가 */
span.label-attend3.phil,
span.label-attend2.phil,
span.label-attend1.phil {
	background: #5f6bff;
	border-color: #5f6bff;
	color: #fff;
}
span.label-attend3.korea,
span.label-attend2.korea,
span.label-attend1.korea {
	background: #f3c700;
	border-color: #f3c700;
	color: #fff;
}
span.label-attend3.america,
span.label-attend2.america,
span.label-attend1.america {
	background: #208dff;
	border-color: #208dff;
}



.navgations .icons {
	width: 50px;
	height: 50px;
	overflow: hidden;
	margin: 0 auto;
}