@charset "utf-8";

header{width:100%; height:var(--banner-margin); position: fixed; z-index: 1000; top:0; background: var(--bg-card)}
.header_wrap{max-width: 1120px; margin: 0 auto; position: relative; display: flex; align-items: center; padding: 20px 0; gap: var(--box-gap)}
main, footer{max-width: 1120px; margin: 0 auto}
#banner{width: 100%; margin-top:var(--banner-margin)}
header h1.logo{width: 105px; height: 38px; margin: 0; flex-shrink: 0}
header h1.logo a{display: block; width: 100%; height: 100%; background: url(../images/logo.png) no-repeat center/contain; text-indent: -9999px; overflow: hidden}

nav.gnb{display: flex; align-items: center; flex-shrink: 0; padding: 10px}
nav.gnb .menu_set{display: flex; align-items: center}
nav.gnb .menu_set > li{position: relative}
nav.gnb .menu_set > li > a{font-weight: 800; text-decoration: none; padding: 10px}
nav.gnb .menu_set > li > a:hover{color: var(--itgo)}
/*nav.gnb .menu_set > li:first-child > a{background: url(../images/ico_selec.png) 85% 50% no-repeat; padding: 10px 25px 10px 10px; display: flex; flex-shrink: 1; flex-direction: column}*/
nav.gnb .sub_menu_wrap{display: none; position: absolute; top: 39px; left: 0; border-radius: var(--box-radius); border: var(--border); box-sizing: border-box; box-shadow: var(--box-shadow); background: var(--bg-card); z-index: 200}
nav.gnb .sub_menu_wrap.on,
nav.gnb .menu_set > li:first-child.on .sub_menu_wrap{display: flex}
nav.gnb .sub_menu_wrap .sub_menu_step1_padd{padding: 10px 0}
nav.gnb .sub_menu_step1{border-top-left-radius: var(--box-radius); border-bottom-left-radius: var(--box-radius); overflow: auto; scrollbar-width: none; max-height: calc(100vh - 150px)}
nav.gnb .sub_menu_step1 dl{border-bottom: var(--border); margin: 0 0 15px 0; padding: 0 10px 5px 10px}
nav.gnb .sub_menu_step1 dl:nth-last-of-type(1){border: 0}
nav.gnb .sub_menu_step1 dl > dt{font-size: 0.85rem; padding: 5px 10px}
nav.gnb .sub_menu_step1 dl > dd{font-weight: 700}
nav.gnb .sub_menu_step1 dl > dd > a{background: url(../images/ico_menu.png) 93% 50% no-repeat; padding: 10px 20px 10px 10px; display: block; border-radius: var(--button-radius); white-space: nowrap}
nav.gnb .sub_menu_step1 dl > dd > a:hover,
nav.gnb .sub_menu_step1 dl > dd > a.on{background: url(../images/ico_menu.png) 93% 50% var(--bg-blue) no-repeat; color: var(--itgo)}
nav.gnb .sub_menu_step2{border-top-right-radius: var(--box-radius); border-bottom-right-radius: var(--botton-radius); border-left: var(--border)}
nav.gnb .sub_menu_step2 .sub_menu_step2_st{border-bottom: var(--border); display: block; padding: 10px 20px; font-weight: 900}
nav.gnb .sub_menu_step2 .sub_menu_step2_list_padd{padding: 10px 0}
nav.gnb .sub_menu_step2 ul.sub_menu_step2_list{padding: 0 10px; overflow: auto; scrollbar-width: none; max-height: calc(100vh - 190px)}
nav.gnb .sub_menu_step2 ul.sub_menu_step2_list li{font-weight: 700}
nav.gnb .sub_menu_step2 ul.sub_menu_step2_list li > a{padding: 10px; display: block; border-radius: var(--box-radius); white-space: nowrap}
nav.gnb .sub_menu_step2 ul.sub_menu_step2_list li > a:hover{background: var(--bg-blue); color: var(--itgo)}

nav.gnb ul.sub_menu_wrap2{
	display: block; position: absolute; top: 39px; left: 50%; transform: translateX(-50%); border-radius: var(--box-radius); border: var(--border); box-sizing: border-box; box-shadow: var(--box-shadow); background: var(--bg-card); z-index: 200; padding: 10px 0
}
nav.gnb ul.sub_menu_wrap2 li{padding:0 10px; font-weight: 700}
nav.gnb ul.sub_menu_wrap2 li > a{padding:10px; border-radius: var(--button-radius); white-space: nowrap; display: block}
nav.gnb ul.sub_menu_wrap2 li > a:hover{background: var(--bg-blue); color: var(--itgo)}

header .search_set{flex: 1; position: relative; height: 46px; display: flex; align-items: center}
header .search_set .search_wrapbox{width: 100%; position: absolute; top: -6px; left: 0; z-index: 10}
header .search_set .search_wrapbox.on{background: var(--bg-card); border: var(--border); box-sizing: border-box; border-radius: var(--box-radius); box-shadow: var(--box-shadow); z-index: 100}
header .search_set .search_wrapbox.on .search_history{display: block}
header .search_set .search_input_padd{padding: 6px 6px 0 6px}
header .search_set .search_input{height: 44px; border: var(--border); box-sizing: border-box; border-radius: var(--button-radius); display: flex; align-items: center; background: var(--bg-card)}
header .search_set .search_wrapbox.on .search_input{border: var(--border-itgo); box-sizing: border-box; transition: border 5s}
header .search_set .search_st{width: 95px; position: relative; flex-shrink: 0; height: 100%}
header .search_set .search_st > .search_st_tt{height: 100%; display: flex; align-items: center; padding: 0 13px 0 20px; background: url(../images/ico_selec.png) 90% 50% no-repeat; cursor: pointer; font-weight: 700; font-size: 1rem}
header .search_set .search_st > ul.search_st_box{display: none; position: absolute; top: 35px; left: -1px; width: 100%; border-radius: var(--box-radius); line-height: 28px; padding: 5px; border: var(--border); box-sizing: border-box; background: var(--bg-card); box-shadow: var(--box-shadow); z-index: 110}
header .search_set .search_st > ul.search_st_box.on{display: block}
header .search_set .search_st > ul.search_st_box > li{padding: 2px 15px; cursor: pointer}
header .search_set .search_st > ul.search_st_box > li:hover{font-weight: 800; background: rgba(216, 229, 243, 0.8); border-radius: var(--box-radius);}
header .search_set .inp_search{flex: 1; width:100%; height: 100%; border: 0; outline: none; background: transparent; padding: 0 10px}
header .search_set .btn_search_ser{width: 44px; height: 100%; background: url(../images/ico_ser.png) center no-repeat; text-indent: -9999px; overflow: hidden; flex-shrink: 0}
header .search_set .search_history{display: none}
header .search_set ul.search_history_list{padding: 10px 0}
header .search_set ul.search_history_list li{padding: 0 40px 0 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; line-height: 28px}
header .search_set ul.search_history_list li:hover{background: var(--bg-blue)}
header .search_set ul.search_history_list li .btn_serarch_del{width: 9px; height: 9px; background: url(../images/ser_del.png) center no-repeat; text-indent: -9999px; overflow: hidden; transition: transform 0.3s ease; position: absolute; top: 10px; right: 15px}
header .search_set ul.search_history_list li .btn_serarch_del:hover{transform: rotate(180deg)}
header .search_set .search_history_option{height: 40px; background: var(--bg-gray); border-bottom-left-radius: var(--box-radius); border-bottom-right-radius: var(--box-radius); padding: 0 20px; display: flex; align-items: center; justify-content: space-between}
header .search_set .search_history_option button.btn_serarch_savechk{font-weight: 800; background: var(--bg-card); text-align: center; border-radius: var(--box-radius); color: var(--bg-card); display: inline-block; vertical-align: middle; margin-left: 8px; padding:3px 5px; cursor: pointer; font-size: 8px}
header .search_set .search_history_option button.btn_serarch_savechk::after{content: "OFF"}
header .search_set .search_history_option button.btn_serarch_savechk.on{background: var(--itgo)}
header .search_set .search_history_option button.btn_serarch_savechk.on::after{content: "ON"}
header .search_set .search_history_option .search_alldel{cursor: pointer}

header .topmenu_set{display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; gap: 10px}

header .bell_set{position: relative; display: flex; align-items: center}
header .bell_set .btn_bell{width: 36px; height: 36px; position: relative; border-radius: 50%; cursor: pointer; transition: background 0.3s}
header .bell_set .btn_bell:hover{background: var(--bg-gray)}
header .bell_set .btn_bell .bell_chek{width: 5px; height: 5px; background: var(--color-red); border-radius: 50%; position: absolute; top: 6px; right: 6px}
header .bell_set .btn_bell .bell{width: 100%; height: 100%; display: block; background: url(../images/bell.png) center no-repeat; text-indent: -9999px; overflow: hidden}
header .bell_set .bell_pop{display: none; position: absolute; top: 48px; right: 0; left: auto; transform: none; width: 250px; height: 400px; background: var(--bg-card); border: var(--border); box-sizing: border-box; border-radius: var(--box-radius); box-shadow: var(--box-shadow); z-index: 150; overflow: hidden}
header .bell_set .bell_pop.on{display: block}
header .bell_set .bell_pop .bell_header{display: flex; justify-content: space-between; align-items: center; font-weight: 800; padding: 20px 15px 10px 15px}
header .bell_set .bell_pop .bell_header button.btn_alldel{cursor: pointer; font-size: 0.85rem}
header .bell_set .bell_pop .bell_header h2.bell_title{font-size: 1rem}
header .bell_set .bell_pop ul{max-height: 350px; overflow-y: auto}
header .bell_set .bell_pop ul::-webkit-scrollbar{width: 4px}
header .bell_set .bell_pop ul::-webkit-scrollbar-thumb{background-color: var(--thumb); border-radius: var(--box-radius)}
header .bell_set .bell_pop ul::-webkit-scrollbar-track{background-color: transparent}
header .bell_set .bell_pop ul li.not_reading{background: var(--bg-blue)}
header .bell_set .bell_pop ul li:nth-last-child(1){border-bottom-left-radius: var(--box-radius); border-bottom-right-radius: var(--box-radius)}
header .bell_set .bell_pop ul li a{display: flex; justify-content: space-between; align-items: center; padding: 10px 30px 10px 15px; position: relative; font-size: 0.92rem}
header .bell_set .bell_pop ul li a em{display: block; color: var(--text-gray); margin: 3px 0 0 0; font-size: 0.85rem}
header .bell_set .bell_pop ul li a .del{width: 9px; height: 9px; background: url(../images/ser_del.png) center no-repeat; text-indent: -9999px; overflow: hidden; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); transition: transform 0.3s ease}
header .bell_set .bell_pop ul li a .del:hover{transform: translateY(-50%) rotate(180deg)}

header .login_set{position: relative; display: flex; align-items: center}
header .login_set button.btn_login{font-weight: 800; padding: 10px 16px; border-radius: var(--button-radius); cursor: pointer; border: var(--border); box-sizxing: border-box; background: var(--bg-card); transition: background 0.3s}
header .login_set button.btn_login:hover{background-color:var(--itgo); color:var(--bg-card)}
header .login_set .mem_info{position: absolute; width: 195px; border-radius: var(--box-radius); border: var(--border); box-sizing: border-box; top: 48px; right: 0; background: var(--bg-card); display: none; box-shadow: var(--box-shadow); z-index: 150}
header .login_set .mem_info.on{display: block}
header .login_set .mem_info .info_ico{display: flex; border-bottom: var(--border)}
header .login_set .mem_info .info_ico .info_fav{width: 50%; height: 73px; background: url(../images/ico_fav.png) 50% 15px no-repeat; text-align: center}
header .login_set .mem_info .info_ico .info_fav a{width: 100%; height: 100%; padding-top: 44px; box-sizing: border-box; display: block}
header .login_set .mem_info .info_ico .info_11{width: 50%; height: 73px; background: url(../images/ico_11.png) 50% 15px no-repeat; text-align: center; border-left: var(--border)}
header .login_set .mem_info .info_ico .info_11 a{width: 100%; height: 100%; padding-top: 44px; box-sizing: border-box; display: block}
header .login_set .mem_info .info_pt{display: block; box-sizing: border-box; padding: 10px 0 10px 20px}
header .login_set .mem_info .info_cp{display: block; box-sizing: border-box; padding: 10px 0 10px 20px; border-top: var(--border)}
header .login_set .mem_info .info_fp{display: block; box-sizing: border-box; padding: 10px 0 10px 20px; line-height: 20px; border-top: var(--border)}
header .login_set .mem_info .info_remote{padding: 10px 20px 10px 20px; display: block; border-top: var(--border)}
header .login_set .mem_info .info_remote a{width: 100%; padding: 10px 0; background: var(--itgo); display: block; text-align: center; color: var(--bg-card); border-radius: var(--button-radius)}
header .login_set .mem_info .info_ip{width: 100%; background: var(--bg-card); display: flex; justify-content: space-between; border-bottom-left-radius: var(--box-radius); border-bottom-right-radius: var(--box-radius)}
header .login_set .mem_info .info_ip .info_my a{padding: 15px 15px 15px 20px; background: url(../images/ico_key.png) 100% 50% no-repeat; display: block}
header .login_set .mem_info .info_ip .info_out a{padding: 15px 20px; display: block}
header .login_set .mem_info .cect{color: var(--itgo); font-weight: 700}

#sub_banner{width:100%; height:200px; margin:var(--banner-margin) 0 0 0}
#sub_banner.class_room{background: url(../images/sub_banner01.jpg) no-repeat}
#sub_banner.my_class{background: url(../images/sub_banner05.jpg) no-repeat}
#sub_banner.customer{background: url(../images/sub_banner07.jpg) no-repeat}
#sub_banner.basic{background: url(../images/sub_banner04.jpg) no-repeat}
#sub_banner .subbanner_title{max-width: 1120px; height:100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: var(--bg-card)}
#sub_banner .subbanner_title .subbanner_title_st{font:var(--sub-banner-st)}
#sub_banner .subbanner_title .subbanner_title_em{display: block; font: var(--sub-banner-em)}

main{}
main.sub_wrap{display: flex; justify-content: space-between}

main .sub_menu{width:170px}
main .sub_menu h3.sub_menu_title{font-size: 1.6rem; font-weight: 900;  margin:var(--section-margin); padding:0 0 0 10px}
main .sub_menu dl.sub_menu_list{margin: var(--cont-margin)}
main .sub_menu dl.sub_menu_list dd{font-weight: 700}
main .sub_menu dl.sub_menu_list dd a{padding: 10px 20px 10px 10px; display: block; border-radius: var(--button-radius); white-space: nowrap}
main .sub_menu dl.sub_menu_list dd a:hover,
main .sub_menu dl.sub_menu_list dd a.on{background: var(--bg-blue); color:var(--itgo)}

main .cont{width:calc(100% - 170px - 30px)}

main .count_set{display: flex; justify-content: space-between; margin: var(--section-margin)}
main .count_set dl.count_box{display: flex; flex-wrap: wrap; justify-content: center}
main .count_set .count_title{ width: 100%; text-align: center; padding: 0 0 10px 0; box-sizing: border-box; font-size: 1rem; font-weight: 700}
main .count_set .count_badge{height: 50px; color: var(--bg-card); letter-spacing: -1px; font-size: 1.85rem; font-weight: 800; display: flex; align-items: center; box-sizing: border-box}
main .count_set .count_badge > em{letter-spacing: -1px; font-size: 0.92rem; font-weight: 400; padding: 10px 0 0 3px}
main .count_set .count_badge.left{padding: 0 15px 0 20px; border-radius: var(--box-radius) 0 0 var(--box-radius)}
main .count_set .count_badge.right{padding: 0 20px 0 15px; border-radius: 0 var(--box-radius) var(--box-radius) 0}
main .theme_blue .count_badge.left{background: var(--itgo-dark)}
main .theme_blue .count_badge.right{background: var(--itgo)}
main .theme_green .count_badge.left{background: #035353}
main .theme_green .count_badge.right{background: #00b3b4}
main .theme_purple .count_badge.left{background: #59012a}
main .theme_purple .count_badge.right{background: #b40054}

main .main_notice_set{width:100%; height:50px; background: var(--bg-gray); display: flex; align-items: center; border-radius: var(--box-radius); margin:var(--section-margin)}
main .main_notice_set h2.main_notice_title{width:60px; text-align: center; font-size: 1rem}
main .main_notice_set ul.main_notice_cont{width:calc(100% - 60px - 20px); overflow: hidden; display: inline-flex}
main .main_notice_set ul.main_notice_cont li{white-space: nowrap; display: list-item; margin:0 50px 0 0}

main .class_set{margin: var(--section-margin)}
main .class_set h2.class_title{font:var(--font-title)}
main .class_set .class_imgwrap{display: grid; grid-template-columns: var(--box-grid); gap: var(--box-gap); margin: var(--box-margin)}
main .class_set .class_imgwrap li{border-radius: var(--box-radius); overflow: hidden; position: relative; height: var(--box-height); border:var(--border); transition: border 5s}
main .class_set .class_imgwrap li:hover{border:var(--border-itgo); box-sizing: border-box}
main .class_set .class_imgwrap li a{display: block; width: 100%; height: 100%}
main .class_set .class_imgwrap li .thumb_img img{width: 100%; height: 100%; object-fit: cover; display: block}
main .class_set .class_imgwrap li .card_info{position: absolute; left: 0; bottom: 0; background: var(--bg-card); padding: 15px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 90px; transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1); border-radius: 0 0 var(--box-radius) var(--box-radius)}
main .class_set .class_imgwrap li .card_info h3.card_title{word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font:var(--box-title)}
main .class_set .class_imgwrap li a:hover .card_info{height: 70%}
main .class_set .class_imgwrap li a:hover .card_info h3.card_title{-webkit-line-clamp: unset; overflow: visible}
main .class_set .class_imgwrap li .card_info .card_meta{margin-top: auto; display: flex; gap: 8px; font-size: 0.85rem; font-weight: 700}
main .class_set .class_imgwrap li .card_info .card_meta .card_meta_count{color: var(--itgo)}
main .class_set .class_sub{display: flex; margin:var(--box-margin); flex-wrap: wrap; gap:10px; background: var(--bg-blue); padding:10px; border-radius: var(--box-radius); justify-content: space-between}
main .class_set .class_sub li{position: relative; display: flex; padding:5px 20px 5px 5px; border:solid 1px transparent; box-sizing:border-box; border-radius: var(--box-radius); overflow: hidden; background: var(--bg-card); transition: border 0.3s}
main .class_set .class_sub li:hover{border:var(--border-itgo)}
main .class_set .class_sub li a{display: flex; align-items: center; gap: 8px; width: 100%}
main .class_set .class_sub li .class_sub_img{width:40px; height:40px; border-radius: var(--box-radius); overflow: hidden; display: block; flex-shrink: 0}
main .class_set .class_sub li .class_sub_img img{width: 100%; height: 100%; object-fit: cover; object-position: center; display: block}
main .class_set .class_sub li .class_sub_tt{text-align: left; letter-spacing: -1px; padding:0; display: block; word-break: keep-all}

main .newclass_set{margin:var(--section-margin)}
main .newclass_set h2.newclass_title{font:var(--font-title)}
main .newclass_set .newclass_wrap{display: flex; gap: 0 var(--box-gap); margin: var(--box-margin); overflow: hidden}
main .newclass_set .newclass_wrap li{min-width:208px; border-radius: var(--box-radius); overflow: hidden; position: relative; height: var(--box-height); border:var(--border); transition: border 5s}
main .newclass_set .newclass_wrap li:hover{border:var(--border-itgo); box-sizing: border-box}
main .newclass_set .newclass_wrap li a{display: block; width: 100%; height: 100%}
main .newclass_set .newclass_wrap li .thumb_img img{width: 100%; height: 100%; object-fit: cover; display: block}
main .newclass_set .newclass_wrap li .card_info{position: absolute; left: 0; bottom: 0; background: var(--bg-card); padding: 15px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 90px; transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1); border-radius: 0 0 var(--box-radius) var(--box-radius)}
main .newclass_set .newclass_wrap li .card_info h3.card_title{word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font:var(--box-title)}
main .newclass_set .newclass_wrap li a:hover .card_info{height: 70%}
main .newclass_set .newclass_wrap li a:hover .card_info h3.card_title{-webkit-line-clamp: unset; overflow: visible}
main .newclass_set .newclass_wrap li .card_info .card_meta{margin-top: auto; display: flex; gap: 8px; font-size: 0.85rem; font-weight: 700}
main .newclass_set .newclass_wrap li .card_info .card_meta .card_meta_count{color: var(--itgo)}

main .recseries_set{margin:var(--section-margin); padding:20px; background: var(--bg-blue); border-radius: var(--box-radius)}
main .recseries_set .recseries_title_wrap{display: flex; justify-content: space-between}
main .recseries_set .recseries_title_wrap h2.recseries_title{font:var(--font-title); color: var(--itgo); display: flex; align-items: center}
main .recseries_set .recseries_title_wrap a{padding:5px 10px; color:var(--bg-card); background:var(--itgo); border-radius: var(--button-radius); font-size: 0.85rem}
main .recseries_set ul.recseries_list{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--box-gap); margin: var(--box-margin)}
main .recseries_set ul.recseries_list li{display: flex; flex-direction: column; align-items: flex-start; background: var(--bg-card); border-radius: var(--box-radius); transition: border 0.3s; border:solid 1px transparent}
main .recseries_set ul.recseries_list li:hover{border:var(--border-itgo); box-sizing: border-box}
main .recseries_set ul.recseries_list li a{padding:20px}
main .recseries_set ul.recseries_list li a::before{content: "SERIES"; background: var(--itgo); font-size: 10px;  padding: 0px 5px; border-radius: var(--box-radius); display: block; width: max-content; margin-bottom: 5px; color: var(--bg-card); font-weight: 800}

main .recommended_set{margin: var(--section-margin)}
main .recommended_set h2.recommended_title{font:var(--font-title)}
main .recommended_set ul.recommended_list{display: grid; grid-template-columns: var(--box-grid); gap: var(--box-gap); margin: var(--box-margin)}
main .recommended_set ul.recommended_list li{height:200px; overflow: hidden; border-radius: var(--box-radius); padding:30px 0 0 0; box-sizing: border-box}
main .recommended_set ul.recommended_list li:nth-child(1){background: url(../images/recommended01.png) 50% no-repeat}
main .recommended_set ul.recommended_list li:nth-child(2){background: url(../images/recommended02.png) 50% no-repeat}
main .recommended_set ul.recommended_list li:nth-child(3){background: url(../images/recommended03.png) 50% no-repeat}
main .recommended_set ul.recommended_list li:nth-child(4){background: url(../images/recommended04.png) 50% no-repeat}
main .recommended_set ul.recommended_list li:nth-child(5){background: url(../images/recommended05.png) 50% no-repeat}
main .recommended_set ul.recommended_list li:nth-child(6){background: url(../images/recommended06.png) 50% no-repeat}
main .recommended_set ul.recommended_list li:nth-child(7){background: url(../images/recommended07.png) 50% no-repeat}
main .recommended_set ul.recommended_list li:nth-child(8){background: url(../images/recommended08.png) 50% no-repeat}
main .recommended_set ul.recommended_list li:nth-child(9){background: url(../images/recommended09.png) 50% no-repeat}
main .recommended_set ul.recommended_list li:nth-child(10){background: url(../images/recommended10.png) 50% no-repeat}
main .recommended_set ul.recommended_list li a{width:100%; height:100%; display: block}
main .recommended_set ul.recommended_list li .recom_st_em{display: flex; justify-content: center; color:var(--bg-card); font-size: 0.85rem}
main .recommended_set ul.recommended_list li .recom_st{display: flex; justify-content: center; color:var(--bg-card); font:var(--pop-text); text-align: center; margin:0.3rem 0 0 0}

main .popular_set{margin: var(--section-margin)}
main .popular_set h2.popular_title{font:var(--font-title)}
main .popular_set ul.popular_list{display: grid; grid-template-columns: var(--box-grid); gap: var(--box-gap); margin: var(--box-margin)}
main .popular_set ul.popular_list li{height:210px; overflow: hidden; border-radius: var(--box-radius); padding:30px 0 0 0; box-sizing: border-box}
main .popular_set ul.popular_list li:nth-child(1){background: url(../images/popular01.png) 50% no-repeat}
main .popular_set ul.popular_list li:nth-child(2){background: url(../images/popular02.png) 50% no-repeat}
main .popular_set ul.popular_list li:nth-child(3){background: url(../images/popular03.png) 50% no-repeat}
main .popular_set ul.popular_list li:nth-child(4){background: url(../images/popular04.png) 50% no-repeat}
main .popular_set ul.popular_list li:nth-child(5){background: url(../images/popular05.png) 50% no-repeat}
main .popular_set ul.popular_list li a{width:100%; height:100%; display: block}
main .popular_set ul.popular_list li .popular_st_em{display: flex; justify-content: center; color:var(--bg-card); font-size: 0.85rem}
main .popular_set ul.popular_list li .popular_st{display: flex; justify-content: center; color:var(--bg-card); font:var(--pop-text); letter-spacing: -1px; text-align: center; margin:0.3rem 0 0 0}

main .freepass_set{display: flex; margin: var(--section-margin)}
main .freepass_set .freepass_box{width:151px; height:268px; padding:20px 0 0 20px; box-sizing: border-box; flex-shrink: 0;} /* 카드 너비 고정 */
main .freepass_set .freepass_3m{background: url(../images/freepass_3m.png) no-repeat}
main .freepass_set .freepass_6m{background: url(../images/freepass_6m.png) no-repeat; margin-left:19px}
main .freepass_set .freepass_title_wrap{flex: 1; text-align: center}
main .freepass_set .freepass_12m{background: url(../images/freepass_12m.png) no-repeat}
main .freepass_set .freepass_24m{background: url(../images/freepass_24m.png) no-repeat; margin-left:19px}
main .freepass_set a{width:100%; height:100%; display: block}
main .freepass_set .freepass_st{font:var(--freepass-st); color:var(--bg-card); display: block}
main .freepass_set .freepass_st .freepass_st_text{font-weight: 400; font-size: 1.3rem}
main .freepass_set .freepass_price{color:var(--bg-card); text-decoration: line-through; margin:7px 0 0 0; display:inline-block; letter-spacing: -1px}
main .freepass_set .freepass_sale{background: var(--color-red); border-radius: var(--button-radius); padding:2px 5px; color: var(--bg-card); font-weight: 800; font-size: 0.85rem; letter-spacing: -1px}
main .freepass_set .freepass_pay{font:var(--freepass-st); color:var(--color-yellow); margin:5px 0 0 0; display:inline-block; letter-spacing: -1px}
main .freepass_set .freepass_rest{color: var(--bg-card); display: block; margin:5px 0 0 0; font-size: 0.92rem}
main .freepass_set .freepass_app{width:60px; text-align: center; background:var(--bg-card); display:block; border-radius: var(--button-radius); font-size:0.85rem; padding:3px 0 2px 0; font-weight: 800; margin:7px 0 0 0}
main .freepass_set h3.freepass_title{font:var(--freepass-st); margin:60px 0 0 0}
main .freepass_set .freepass_em{display: block; font-weight: 600}
main .freepass_set .freepass_num{display: block; margin:20px 0 0 0}
main .freepass_set .freepass_num .freepass_br{display: block}

main .class_list_set{}
main .class_list_set h4.class_list_subtitle{margin:var(--section-margin); font:var(--font-title)}
main .class_list_set .veiw_wrap{margin: var(--cont-margin); display: flex; justify-content: space-between}
main .class_list_set .veiw_wrap .class_list_em{display: flex; align-items: center}
main .class_list_set .veiw_wrap .class_list_em .itgo_series{padding:5px 10px; background: var(--itgo); color: var(--bg-card); font-weight: 700; border-radius: 5px; margin:0 10px 0 0}
main .class_list_set .veiw_wrap dl.class_list_view{display: flex; padding:10px 15px; border:var(--border); border-radius: var(--box-radius)}
main .class_list_set .veiw_wrap dl.class_list_view dd{width:18px; height:18px; overflow: hidden; text-indent: -9999px; cursor: pointer}
main .class_list_set .veiw_wrap dl.class_list_view dd.view_box{background: url(../images/view_box.png) no-repeat}
main .class_list_set .veiw_wrap dl.class_list_view dd.view_box_on{background: url(../images/view_box_on.png) no-repeat}
main .class_list_set .veiw_wrap dl.class_list_view dd.view_list{background: url(../images/view_list.png) no-repeat; margin:0 0 0 10px}
main .class_list_set .veiw_wrap dl.class_list_view dd.view_list_on{background: url(../images/view_list_on.png) no-repeat; margin:0 0 0 10px}
main .class_list_set ul.class_list_wrap{display: grid; grid-template-columns: var(--sub-box-grid); gap: var(--box-gap); margin: var(--box-margin)}
main .class_list_set ul.class_list_wrap li{border-radius: var(--box-radius); overflow: hidden; position: relative; height: var(--box-height); border:var(--border); transition: border 5s}
main .class_list_set ul.class_list_wrap li:hover{border:var(--border-itgo); box-sizing: border-box}
main .class_list_set ul.class_list_wrap li a{display: block; width: 100%; height: 100%}
main .class_list_set ul.class_list_wrap li .thumb_img img{width: 100%; height: 100%; object-fit: cover; display: block}
main .class_list_set ul.class_list_wrap li .card_info{position: absolute; left: 0; bottom: 0; background: var(--bg-card); padding: 15px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 90px; transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1); border-radius: 0 0 var(--box-radius) var(--box-radius)}
main .class_list_set ul.class_list_wrap li .card_info h5.card_title{word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font:var(--box-title)}
main .class_list_set ul.class_list_wrap li a:hover .card_info{height: 70%}
main .class_list_set ul.class_list_wrap li a:hover .card_info h5.card_title{-webkit-line-clamp: unset; overflow: visible}
main .class_list_set ul.class_list_wrap li .card_info .card_meta{margin-top: auto; display: flex; gap: 8px; font-size: 0.85rem; font-weight: 700}
main .class_list_set ul.class_list_wrap li .card_info .card_meta .card_meta_count{color: var(--itgo)}

main .class_list_set table.class_list_tab{width:100%; margin: var(--box-margin)}
main .class_list_set table.class_list_tab thead th{background: var(--bg-gray); height:40px; vertical-align: middle; font-size: 0.85rem; word-break: keep-all}
main .class_list_set table.class_list_tab thead th:first-of-type{border-radius: var(--box-radius) 0 0 var(--box-radius)}
main .class_list_set table.class_list_tab thead th:last-of-type{border-radius: 0 var(--box-radius) var(--box-radius) 0}
main .class_list_set table.class_list_tab tbody tr:hover{background: var(--bg-blue)}
main .class_list_set table.class_list_tab tbody td{padding:10px 0; text-align: center; border-bottom: var(--tab-border); font-size: 0.9231rem; word-break: break-all; white-space: normal; vertical-align: middle}
main .class_list_set table.class_list_tab tbody td:first-of-type{text-align: left; padding:10px 0 10px 10px}

main .class_list_set .reins_tip{margin: var(--box-margin); display: block}
main .class_list_set .reins_tip li{padding-left: 8px; text-indent: -8px; font-size: 0.95rem}
main .class_list_set .reins_tip li::before{content: "- "}
main .class_list_set .reins_box{border-radius: var(--box-radius); background: var(--bg-gray); margin: var(--section-margin); padding:20px}
main .class_list_set .reins_box .reins_box_st{width:100%; text-align: center; display: block; font-weight: 800}
main .class_list_set .reins_box .reins_box_tab_wrap{background: var(--bg-card); border-radius: var(--box-radius); margin: var(--box-margin); padding:20px}
main .class_list_set .reins_box .reins_box_tab_wrap button{margin:0 auto}
main .class_list_set .reins_box table.reins_box_tab{width:100%}
main .class_list_set .reins_box table.reins_box_tab thead th{background: var(--bg-gray); height:40px; vertical-align: middle; font-size: 0.85rem; word-break: keep-all}
main .class_list_set .reins_box table.reins_box_tab thead th:first-of-type{border-radius: var(--box-radius) 0 0 var(--box-radius)}
main .class_list_set .reins_box table.reins_box_tab thead th:last-of-type{border-radius: 0 var(--box-radius) var(--box-radius) 0}
main .class_list_set .reins_box table.reins_box_tab tbody tr:hover{background: var(--bg-blue)}
main .class_list_set .reins_box table.reins_box_tab tbody td{padding:10px 0; text-align: center; border-bottom: var(--tab-border); font-size: 0.9231rem; word-break: break-all; white-space: normal; vertical-align: middle}
main .class_list_set .reins_box .btn_set_wrap{width:100%; display: block; text-align: center; margin: var(--box-margin)}

main .class_list_set .pointdea_wrap{display: flex; margin: var(--box-margin)}
main .class_list_set .pointdea_pointbox{border: var(--border); border-radius: var(--box-radius); position: relative}
main .class_list_set .pointdea_pointbox .pointdea_pointbox_wrap{display: block; text-align: center; padding: 20px 0}
main .class_list_set .pointdea_pointbox .pointdea_pointbox_wrap h5{}
main .class_list_set .pointdea_pointbox .pointdea_pointbox_wrap .pointdea_pointbox_pt{font: var(--pop-text); margin:5px 0 0 0; display: block; color: var(--itgo); letter-spacing: -1px}
main .class_list_set .pointdea_pointbox .pointdea_pointbox_wrap .pointdea_pointbox_pt .ptt{font-size: 0.85rem; font-weight: 800; margin: 0 0 0 3px}
main .class_list_set .pointdea_pointbox .pointdea_pointbox_delpt{
	width:100%; display: block; background: var(--bg-gray); border-radius: 0 0 var(--box-radius) var(--box-radius); text-align: center; padding:10px; box-sizing: border-box
}
main .class_list_set dl.pointdea_tip{margin:10px 0 0 20px}
main .class_list_set dl.pointdea_tip dt{font-weight: 800; margin: 0 0 5px  0}
main .class_list_set dl.pointdea_tip dd{padding-left: 8px; text-indent: -8px; font-size: 0.95rem}
main .class_list_set dl.pointdea_tip dd::before{content: "- "}
main .class_list_set .pointdea_menu{display: flex; margin: var(--section-margin); gap:10px}
main .class_list_set .pointdea_menu button{border-radius: var(--button-radius); background: var(--bg-gray); padding: 10px 20px; cursor: pointer}
main .class_list_set .pointdea_menu buttoni:hover{background: var(--itgo); color: var(--bg-card)}
main .class_list_set .pointdea_menu button.on{background: var(--itgo); color: var(--bg-card)}
main .class_list_set table.pointdea_tab{width:100%; margin: var(--box-margin)}
main .class_list_set table.pointdea_tab thead th{background: var(--bg-gray); height:40px; vertical-align: middle; font-size: 0.85rem; word-break: keep-all}
main .class_list_set table.pointdea_tab thead th:first-of-type{border-radius: var(--box-radius) 0 0 var(--box-radius)}
main .class_list_set table.pointdea_tab thead th:last-of-type{border-radius: 0 var(--box-radius) var(--box-radius) 0}
main .class_list_set table.pointdea_tab tbody tr:hover{background: var(--bg-blue)}
main .class_list_set table.pointdea_tab tbody td{padding:10px 0; text-align: center; border-bottom: var(--tab-border); font-size: 0.9231rem; word-break: break-all; white-space: normal; vertical-align: middle}
main .class_list_set table.pointdea_tab tbody td.pointdea_st{text-align: left; padding:0 10px; box-sizing: border-box}

main ul.courselist_set{margin: var(--box-margin); border-top: var(--border)}
main ul.courselist_set li{border-bottom: var(--tab-border); padding:20px 10px}
main ul.courselist_set li:hover{background: var(--bg-blue)}
main ul.courselist_set li>dl.courselist_box{display: flex; flex-wrap: wrap}
main ul.courselist_set li>dl.courselist_box dt{width:100%; font-weight: 800}
main ul.courselist_set li>dl.courselist_box dd{margin: 5px 10px 0 0; color: var(--text-gray); font-size: 0.85rem; display: flex; align-items: center}
main ul.courselist_set li>dl.courselist_box dd:last-of-type{width:100%; margin: var(--cont-margin)}

main .class_list_set table.coupondea_tab{width:100%; margin: var(--box-margin)}
main .class_list_set table.coupondea_tab thead th{background: var(--bg-gray); height:40px; vertical-align: middle; font-size: 0.85rem; word-break: keep-all}
main .class_list_set table.coupondea_tab thead th:first-of-type{border-radius: var(--box-radius) 0 0 var(--box-radius)}
main .class_list_set table.coupondea_tab thead th:last-of-type{border-radius: 0 var(--box-radius) var(--box-radius) 0}
main .class_list_set table.coupondea_tab tbody tr:hover{background: var(--bg-blue)}
main .class_list_set table.coupondea_tab tbody td{padding:10px 0; text-align: center; border-bottom: var(--tab-border); font-size: 0.9231rem; word-break: break-all; white-space: normal; vertical-align: middle}
main .class_list_set table.coupondea_tab tbody td.pointdea_st{text-align: left; padding:0 10px; box-sizing: border-box}

main .class_list_set table.new_class_tab{width:100%; margin: var(--box-margin)}
main .class_list_set table.new_class_tab thead th{background: var(--bg-gray); height:40px; vertical-align: middle; font-size: 0.85rem; word-break: keep-all}
main .class_list_set table.new_class_tab thead th:first-of-type{border-radius: var(--box-radius) 0 0 var(--box-radius)}
main .class_list_set table.new_class_tab thead th:last-of-type{border-radius: 0 var(--box-radius) var(--box-radius) 0}
main .class_list_set table.new_class_tab tbody tr:hover{background: var(--bg-blue)}
main .class_list_set table.new_class_tab tbody td{padding:10px 0; text-align: center; border-bottom: var(--tab-border); font-size: 0.9231rem; word-break: break-all; white-space: normal; vertical-align: middle}
main .class_list_set table.new_class_tab tbody td:first-of-type{padding:0 10px; box-sizing: border-box; text-align: left}
main .class_list_set table.new_class_tab thead th.wm60{min-width:60px}
main .class_list_set table.new_class_tab thead th.wm80{min-width:80px}
main .class_list_set table.new_class_tab thead th.wm90{min-width:90px}

main .class_list_set .new_class_menu{display: flex; margin: var(--box-margin); gap: 10px; flex-wrap: wrap}
main .class_list_set .new_class_menu button{border-radius: var(--button-radius); background: var(--bg-gray); padding: 10px 20px; cursor: pointer}
main .class_list_set .new_class_menu button.on{background: var(--itgo); color: var(--bg-card)}

main .class_list_set table.class_list_tab thead th.wm60{min-width:60px}
main .class_list_set table.class_list_tab thead th.wm80{min-width:80px}
main .class_list_set table.class_list_tab thead th.wm90{min-width:90px}

main .educoupon_set{margin:var(--section-margin)}
main .educoupon_set h4.educoupon_subtitle{font:var(--font-title)}
main .educoupon_set .educoupon_tip{margin: var(--box-margin); display: block}
main .educoupon_set .educoupon_box{width:100%; justify-content: space-between; margin: var(--coupon-margin); display: flex; align-items: center; flex-wrap: wrap}
main .educoupon_set .educoupon_box .educoupon_img{width: 410px; height: 276px; background: url(../images/online_edu.png) no-repeat}
main .educoupon_set .educoupon_box .coupon_reg_free_img{width: 409px; height: 275px; background: url(../images/freepass_reg_img.png) no-repeat}
main .educoupon_set .educoupon_box .course_reg_img{width: 410px; height: 270px; background: url(../images/course_reg_img.png) no-repeat}
main .educoupon_set .educoupon_box .educoupon_form{width: calc(100% - 410px - 50px)}
main .educoupon_set .educoupon_box .educoupon_form .educoupon_inp_wrap{width:100%; display: block}
main .educoupon_set .educoupon_box .educoupon_form .educoupon_inp{width: calc(100% - 80px); height: 44px; background: var(--bg-gray); border-radius: var(--button-radius) 0 0 var(--button-radius); padding: 0 20px; box-sizing: border-box; outline: none}
main .educoupon_set .educoupon_box .educoupon_form button.btn_reg{width: 80px; height: 44px; background: var(--itgo); color: var(--bg-card); border-radius: 0 var(--button-radius) var(--button-radius) 0; font-size: 0.85rem; box-sizing: border-box}
main .educoupon_set .educoupon_box .educoupon_form ul.educoupon_spon{width:100%; margin: var(--cont-margin)}
main .educoupon_set .educoupon_box .educoupon_form ul.educoupon_spon li{padding-left: 8px; text-indent: -8px; font-size: 0.95rem}
main .educoupon_set .educoupon_box .educoupon_form ul.educoupon_spon li::before{content: "- "}


main .coupondea_set{margin:var(--section-margin)}
main .coupondea_set h4.coupondea_subtitle{font:var(--font-title)}
main .coupondea_set .coupondea_reg{margin:var(--box-margin)}
main .coupondea_set h5.coupondea_title{font-weight: 800; font-size: 1rem}
main .coupondea_set .coupondea_reg .coupondea_inp_wrap{background: var(--bg-gray); border-radius: var(--box-radius); padding:20px; margin: var(--cont-margin)}
main .coupondea_set .coupondea_reg input.coupondea_inp{width: calc(100% - 80px); height:44px; background: var(--bg-card); border-radius: var(--button-radius) 0 0 var(--button-radius); padding:0 20px; box-sizing: border-box; outline: none}
main .coupondea_set .coupondea_reg button.btn_reg{width:80px; height:44px; background: var(--itgo); color: var(--bg-card); border-radius: 0 var(--button-radius) var(--button-radius) 0; font-size: 0.85rem; box-sizing: border-box}
main .coupondea_set .coupondea_reg .coupondea_tip{margin: var(--cont-margin); display: block}
main .coupondea_set .coupondea_list_wrap{margin: var(--section-margin)}
main .coupondea_set .coupondea_list_wrap table.coupondea_tab{width:100%; margin: var(--cont-margin)}
main .coupondea_set .coupondea_list_wrap table.coupondea_tab thead th{background: var(--bg-gray); height:40px; vertical-align: middle; font-size: 0.85rem; word-break: keep-all}
main .coupondea_set .coupondea_list_wrap table.coupondea_tab thead th:first-of-type{border-radius: var(--box-radius) 0 0 var(--box-radius)}
main .coupondea_set .coupondea_list_wrap table.coupondea_tab thead th:last-of-type{border-radius: 0 var(--box-radius) var(--box-radius) 0}
main .coupondea_set .coupondea_list_wrap table.coupondea_tab tbody tr:hover{background: var(--bg-blue)}
main .coupondea_set .coupondea_list_wrap table.coupondea_tab tbody td{padding:10px 0; text-align: center; border-bottom: var(--tab-border); font-size: 0.9231rem; word-break: break-all; white-space: normal; vertical-align: middle}
main .coupondea_set .coupondea_list_wrap table.coupondea_tab tbody td.coupondea_st{text-align: left; padding: 0 10px; box-sizing: border-box}

main .notice_set{margin:var(--section-margin)}
main .notice_set h4.notice_subtitle{font:var(--font-title)}
main .notice_set .notice_menu{display: flex; flex-wrap: wrap; margin: var(--box-margin); gap:10px}
main .notice_set .notice_menu button{border-radius: var(--button-radius); background: var(--bg-gray); padding: 10px 20px; cursor: pointer}
main .notice_set .notice_menu button:hover{background: var(--itgo); color: var(--bg-card)}
main .notice_set .notice_menu button.on{background: var(--itgo); color: var(--bg-card)}
main .notice_set table.notice_tab{width:100%; margin: var(--box-margin); table-layout:fixed; border-collapse:collapse}
main .notice_set table.notice_tab thead th{background: var(--bg-gray); height:40px; vertical-align: middle; font-size: 0.85rem; word-break: keep-all; position: relative}
main .notice_set table.notice_tab thead th:first-of-type{border-radius: var(--box-radius) 0 0 var(--box-radius)}
main .notice_set table.notice_tab thead th:last-of-type{border-radius: 0 var(--box-radius) var(--box-radius) 0}
main .notice_set table.notice_tab thead th .notice_select{background: url(../images/ico_selec.png) 100% 50% no-repeat; padding:5px 12px 5px 0; cursor: pointer}
main .notice_set table.notice_tab tbody tr:hover{background: var(--bg-blue)}
main .notice_set table.notice_tab tbody tr.announcement td{font-weight: 800}
main .notice_set table.notice_tab tbody td{padding:10px 0; text-align: center; border-bottom: var(--tab-border); font-size: 0.9231rem; vertical-align: middle}
main .notice_set table.notice_tab tbody td.notice_st{text-align: left; padding:0 10px; box-sizing: border-box}
main .notice_set table.notice_tab tbody td.notice_st a{width:100%; display: block; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
main .notice_set table.notice_tab tbody td.ico_notice{background: url(../images/ico_notice.png) 50% no-repeat}
main .notice_set table.notice_tab thead th ul.notice_pop{
	position: absolute; padding:10px 0; top: calc(100% - 7px); right: 0; margin: 0; border-radius: var(--box-radius); border: var(--border); box-sizing: border-box; background: var(--bg-card); box-shadow: var(--box-shadow); z-index: 150
}
main .notice_set table.notice_tab thead th ul.notice_pop li{padding:0 10px}
main .notice_set table.notice_tab thead th ul.notice_pop li a{padding:5px 10px; border-radius: var(--box-radius); display: block}
main .notice_set table.notice_tab thead th ul.notice_pop li a:hover{background: var(--bg-blue)}

main .notice_set dl.notice_view{margin: var(--box-margin)}
main .notice_set dl.notice_view dt{font-weight: 800}
main .notice_set dl.notice_view dt .notice_tag{font-size: 0.69rem; background: var(--itgo-dark); border-radius: var(--button-radius); color: var(--bg-card); padding:3px 5px; vertical-align: middle; margin:0 5px 0 0}
main .notice_set dl.notice_view dd.notice_dea{display: flex; justify-content: space-between; font-size: 0.9231rem; background: var(--bg-gray); border-radius: var(--box-radius); padding: 10px 20px}
main .notice_set dl.notice_view dd{margin:var(--cont-margin)}
main .notice_set dl.notice_view dd.notice_btn{text-align: center; margin:var(--section-margin)}
main .notice_set dl.notice_view dd.notice_btn a.btn_list{word-break: keep-all; border-radius: var(--button-radius); background: var(--itgo); padding: 10px 20px; color: var(--bg-card);}
main .notice_set dl.notice_view dd.notice_btn a.btn_cancel{word-break: keep-all; border-radius: var(--button-radius); background: var(--bg-gray); padding: 10px 20px}
main .notice_set dl.notice_view dd.inquiry_answer{margin: var(--box-margin)}
main .notice_set dl.notice_view dd.inquiry_answer .inquiry_answer_box{padding:20px; background: var(--bg-blue); border-radius: var(--box-radius); margin: var(--cont-margin)}
main .notice_set dl.notice_view dt input.inquiry_write_inp{width:100%; background: var(--bg-gray); border-radius: var(--box-radius); outline: none; padding:10px 15px; box-sizing: border-box; margin: var(--cont-margin)}
main .notice_set dl.notice_view dt input.inquiry_write_inp:focus{background: var(--bg-blue)}
main .notice_set dl.notice_view dd textarea.inquiry_write_box{width: 100%; height:200px; background: var(--bg-gray); border-radius: var(--box-radius); outline: none; padding:10px 15px; box-sizing: border-box; margin: var(--cont-margin)}
main .notice_set dl.notice_view dd textarea.inquiry_write_box:focus{background: var(--bg-blue)}
main .notice_set dl.notice_view dd.inquiry_write_wrap{width:100%; display: block; text-align: center; margin: var(--section-margin)}
main .notice_set dl.notice_view dd.inquiry_write_wrap button.btn_write{word-break: keep-all; border-radius: var(--button-radius); background: var(--itgo); padding: 10px 20px; color: var(--bg-card); margin:0 5px 0 0}
main .notice_set dl.notice_view dd.inquiry_write_wrap a.btn_cancel{word-break: keep-all; border-radius: var(--button-radius); background: var(--bg-gray); padding: 10px 20px; margin:0 0 0 5px}

main .notice_set dl.notice_view .inquiry_answer_tag{font-size: 0.69rem; background: var(--itgo-dark); border-radius: var(--button-radius); color: var(--bg-card); padding:3px 5px; vertical-align: middle; margin:0 5px 0 0}

main .notice_set table.notice_tab thead th.wm60{width:60px}
main .notice_set table.notice_tab thead th.wm90{width:90px}
main .notice_set table.notice_tab thead th.wm100{width:100px}

main .freepass_purch_set{margin:var(--section-margin)}
main .freepass_purch_set h4.freepass_purch_subtitle{font:var(--font-title)}
main .freepass_purch_set .freepass_purch_tip{margin: var(--box-margin); display: block}
main .freepass_purch_set .freepass_purch_total{width:100%; text-align: center; display: block; margin: var(--section-margin); font: var(--fptotal-text); letter-spacing: -1px}
main .freepass_purch_set .freepass_purch_total .freepass_purch_total_pti{color: var(--itgo)}
main .freepass_purch_set .freepass_purch_total .freepass_purch_total_ptr{color: var(--color-red)}

main .freepass_purch_set table.freepass_purch_tab{width:100%; margin: var(--box-margin); table-layout:fixed; border-collapse:collapse}
main .freepass_purch_set table.freepass_purch_tab thead th{background: var(--bg-gray); height:40px; vertical-align: middle; font-size: 0.85rem; word-break: keep-all; position: relative}
main .freepass_purch_set table.freepass_purch_tab thead th:first-of-type{border-radius: var(--box-radius) 0 0 var(--box-radius)}
main .freepass_purch_set table.freepass_purch_tab thead th:last-of-type{border-radius: 0 var(--box-radius) var(--box-radius) 0}
main .freepass_purch_set table.freepass_purch_tab tbody tr:hover{background: var(--bg-blue)}
main .freepass_purch_set table.freepass_purch_tab tbody td{padding:10px 0; text-align: center; border-bottom: var(--tab-border); font-size: 0.9231rem; vertical-align: middle}
main .freepass_purch_set table.freepass_purch_tab tbody td:first-of-type{text-align: left; padding:0 0 0 10px; box-sizing: border-box}
main .freepass_purch_set table.freepass_purch_tab tbody td .freepass_purch_pt{color: var(--color-red); font-weight: 800}
main .freepass_purch_set .freepass_purch_box{margin: var(--section-margin); border: var(--border); padding:30px; border-radius: var(--box-radius)}
main .freepass_purch_set .freepass_purch_box .freepass_purch_box_st{width:100%; display: block; text-align: center; font: var(--fptotal-title)}
main .freepass_purch_set .freepass_purch_box .freepass_purch_box_st .freepass_purch_box_st_pt{font-weight: 900}
main .freepass_purch_set .freepass_purch_box ul.freepass_purch_info{display: block; column-count: 2; column-gap: 20px; margin: var(--fptotal-margin)}
main .freepass_purch_set .freepass_purch_box ul.freepass_purch_info li{min-height:44px; break-inside: avoid; margin-bottom: 20px; height: auto; padding: 0 0 0 55px; box-sizing: border-box; background-repeat: no-repeat; display: flex; flex-wrap: wrap}
main .freepass_purch_set .freepass_purch_box ul.freepass_purch_info li span{width:100%; display: block; font-weight: 900; font-size: 1.1rem}
main .freepass_purch_set .freepass_purch_box ul.freepass_purch_info li em{width:100%; display: block; font-size: 0.95rem; margin:5px 0 0 0}
main .freepass_purch_set .freepass_purch_box ul.freepass_purch_info li:nth-of-type(1){background-image: url(../images/fp_ico001.png)}
main .freepass_purch_set .freepass_purch_box ul.freepass_purch_info li:nth-of-type(2){background-image: url(../images/fp_ico002.png)}
main .freepass_purch_set .freepass_purch_box ul.freepass_purch_info li:nth-of-type(3){background-image: url(../images/fp_ico003.png)}
main .freepass_purch_set .freepass_purch_box ul.freepass_purch_info li:nth-of-type(4){background-image: url(../images/fp_ico004.png)}
main .freepass_purch_set .freepass_purch_box ul.freepass_purch_info li:nth-of-type(5){background-image: url(../images/fp_ico005.png)}

main .notice_set table.faq_tab{width:100%; margin: var(--box-margin); table-layout:fixed; border-collapse:collapse}
main .notice_set table.faq_tab thead th{background: var(--bg-gray); height:40px; vertical-align: middle; font-size: 0.85rem; word-break: keep-all; position: relative}
main .notice_set table.faq_tab thead th:first-of-type{border-radius: var(--box-radius) 0 0 var(--box-radius)}
main .notice_set table.faq_tab thead th:last-of-type{border-radius: 0 var(--box-radius) var(--box-radius) 0}
main .notice_set table.faq_tab thead th .notice_select{background: url(../images/ico_selec.png) 100% 50% no-repeat; padding:5px 12px 5px 0; cursor: pointer}
main .notice_set table.faq_tab tbody tr:hover{background: var(--bg-blue)}
main .notice_set table.faq_tab tbody td{padding:10px 0; text-align: center; border-bottom: var(--tab-border); font-size: 0.9231rem; vertical-align: middle}
main .notice_set table.faq_tab tbody td[colspan="3"]{background: var(--bg-gray); text-align: left; padding:15px 20px; box-sizing: border-box}
main .notice_set table.faq_tab tbody td.faq_st{text-align: left; padding:0 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer}
main .notice_set table.faq_tab thead th.wm60{width:60px}
main .notice_set table.faq_tab thead th.wm90{width:90px}

main .doc_set{margin: var(--box-margin)}
main .doc_set h4.doc_subtitle{margin:var(--section-margin); font:var(--font-title)}
main .doc_set ul{margin: var(--box-margin)}
main .doc_set ul li:not(:first-of-type){margin:var(--section-margin)}
main .doc_set ul li h5{font-size: 1rem; font-weight: 900}
main .doc_set ul li .doc_tt_wrap{margin: var(--cont-margin); display: block; padding-left: 8px; text-indent: -8px; font-size: 0.95rem}
main .doc_set ul li .doc_tt_wrap::before{content: "- "}
main .doc_set ul li .doc_tt_wrap em{font-size:0.6rem}
main .doc_set ul li dl.doc_form{font-size: 0.95rem}
main .doc_set ul li dl.doc_form dt{margin: var(--cont-margin); display: block; padding-left: 8px; text-indent: -8px}
main .doc_set ul li dl.doc_form dt::before{content: "- "}
main .doc_set ul li dl.doc_form dd{padding-left: 9px}

main .ai_pack_set{margin: var(--box-margin)}
main .ai_pack_set h4.ai_pack_subtitle{margin:var(--section-margin); font:var(--font-title)}
main .ai_pack_set ul.ai_pack_list{margin: var(--box-margin); display: grid;  grid-template-columns: repeat(3, 1fr); gap: var(--box-gap)}
main .ai_pack_set ul.ai_pack_list li{padding:20px; border-radius: var(--box-radius); background-position: 100% 50%}
main .ai_pack_set ul.ai_pack_list li:nth-child(4n-3) {background-color: var(--bg-box-yellow); background-repeat: no-repeat}
main .ai_pack_set ul.ai_pack_list li:nth-child(4n+2) {background-color: var(--bg-box-red); background-repeat: no-repeat}
main .ai_pack_set ul.ai_pack_list li:nth-child(4n+3) {background-color: var(--bg-box-sky); background-repeat: no-repeat}
main .ai_pack_set ul.ai_pack_list li:nth-child(4n) {background-color: var(--bg-box-blue); background-repeat: no-repeat}

main .ai_pack_set ul.ai_pack_list li h5.ai_pack_title{font: var(--freepass-st)}
main .ai_pack_set ul.ai_pack_list li:nth-child(4n-3) h5.ai_pack_title{color: var(--color-box-yellow)}
main .ai_pack_set ul.ai_pack_list li:nth-child(4n+2) h5.ai_pack_title{color: var(--color-box-red)}
main .ai_pack_set ul.ai_pack_list li:nth-child(4n+3) h5.ai_pack_title{color: var(--color-box-sky)}
main .ai_pack_set ul.ai_pack_list li:nth-child(4n) h5.ai_pack_title{color: var(--color-box-blue)}

main .ai_pack_set ul.ai_pack_list li:nth-child(1){background-image: url(../images/ai_pack01.png)}
main .ai_pack_set ul.ai_pack_list li:nth-child(2){background-image: url(../images/ai_pack02.png)}
main .ai_pack_set ul.ai_pack_list li:nth-child(3){background-image: url(../images/ai_pack03.png)}
main .ai_pack_set ul.ai_pack_list li:nth-child(4){background-image: url(../images/ai_pack04.png)}
main .ai_pack_set ul.ai_pack_list li:nth-child(5){background-image: url(../images/ai_pack05.png)}
main .ai_pack_set ul.ai_pack_list li:nth-child(6){background-image: url(../images/ai_pack06.png)}
main .ai_pack_set ul.ai_pack_list li:nth-child(7){background-image: url(../images/ai_pack07.png)}

main .ai_pack_set ul.ai_pack_list li .ai_pack_cont{width:100%; margin:10px 0 0 0; display: block}
main .ai_pack_set ul.ai_pack_list li a.btn_ai_pack{padding:10px 20px; background: var(--bg-card); border-radius: var(--button-radius); margin:10px 0 0 0; display: inline-block}

main ul.instructor_set{margin: var(--box-margin); display: grid;  grid-template-columns: repeat(2, 1fr); gap: var(--box-gap)}
main ul.instructor_set li{background: var(--bg-gray); border-radius: var(--box-radius)}
main ul.instructor_set li .instructor_tea{background-repeat: no-repeat; border-radius: var(--box-radius) var(--box-radius) 0 0; box-sizing: border-box; display: flex; padding:50px}
main ul.instructor_set li:nth-of-type(1) .instructor_tea{background-position: -50px 50%; background-color: var(--bg-box-yellow);  justify-content: flex-end}
main ul.instructor_set li:nth-of-type(2) .instructor_tea{background-position: calc(100% + 30px) 50%; background-color: var(--bg-box-red)}
main ul.instructor_set li .instructor_tea em.inst_title{font-size: 0.85rem; padding:5px 10px; border-radius: var(--button-radius); color: var(--bg-card)}
main ul.instructor_set li:nth-of-type(1) .instructor_tea em.inst_title{background: var(--color-box-yellow)}
main ul.instructor_set li:nth-of-type(2) .instructor_tea em.inst_title{background: var(--color-box-red)}

main ul.instructor_set li .instructor_tea h5.inst_name{font: var(--pop-text); margin: var(--cont-margin)}
main ul.instructor_set li:nth-of-type(1) .instructor_tea h5.inst_name{color: var(--color-box-yellow)}
main ul.instructor_set li:nth-of-type(2) .instructor_tea h5.inst_name{color: var(--color-box-red)}
main ul.instructor_set li .instructor_tea dl.inst_class{margin: var(--cont-margin)}
main ul.instructor_set li .instructor_tea dl.inst_class dt{font-weight: 800}
main ul.instructor_set li .instructor_tea dl.inst_class dd{}
main ul.instructor_set li .instructor_tea a.btn_inst{}
main ul.instructor_set li .instructor_info{}
main ul.instructor_set li .instructor_info dl.inst_book{display: flex}
main ul.instructor_set li .instructor_info dl.inst_book dd{width:50%; text-align: center; padding:10px 0; background: var(--bg-darkgray); cursor: pointer}
main ul.instructor_set li .instructor_info dl.inst_book dd.on{background: var(--bg-gray); cursor: default; font-weight: 700}
main ul.instructor_set li .instructor_info dl.inst_history{padding:30px}
main ul.instructor_set li .instructor_info dl.inst_history dd::before{content: "- "}

main ul.instructor_list{margin: var(--section-margin); display: grid;  grid-template-columns: var(--sub-box-grid); gap: var(--box-gap)}
main ul.instructor_list li{background: var(--bg-gray); border-radius: var(--box-radius); padding: var(--box-gap); display: flex}
main ul.instructor_list li .instructor_img{}
main ul.instructor_list li dl.instructor_tt{}
main ul.instructor_list li dl.instructor_tt dt{}
main ul.instructor_list li dl.instructor_tt dd{}


main .btn_wrap{width:100%; position: relative}
main .btn_wrap .btn_write_wrap{position: absolute; top:8px; right:0}
main .btn_wrap .btn_write_wrap a.btn_write{border-radius: var(--button-radius); border: solid 3px var(--itgo); box-sizing: border-box; padding: 7px 15px; color: var(--itgo); font-weight: 800}
main .num_set{display: flex; justify-content: center; margin: var(--section-margin); align-items: center; gap:10px}
main .num_set button.num_pre{border-radius: var(--button-radius); background: var(--itgo); padding:10px 20px; color: var(--bg-card)}
main .num_set input.num_inp{width:50px; border-radius: var(--button-radius); border: var(--border); padding:9px; text-align: center}
main .num_set .num_txt{}
main .num_set button.num_next{border-radius: var(--button-radius); background: var(--itgo); padding:10px 20px; color: var(--bg-card)}
main button.btn_set{word-break:keep-all; border-radius: var(--button-radius); background: var(--itgo); padding:7px 15px; color: var(--bg-card)}

#customer_set{margin: var(--section-margin); background: var(--bg-gray)}
#customer_set .customer_wrap{max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; padding:10px 0}
#customer_set .customer_center{display: flex; align-items: center}
#customer_set .customer_center h2.customer_center_title{font-size: 1rem}
#customer_set .customer_center .customer_center_tel{font:var(--pop-text)}
#customer_set .customer_center ul.customer_center_time{padding:0 0 0 20px}
#customer_set .bank{display: flex; align-items: center; margin:0 0 0 20px; padding:20px; background: var(--bg-card); border-radius: var(--box-radius)}
#customer_set .bank h2.bank_title{font-size: 1rem}
#customer_set .bank .bank_number{font:var(--pop-text)}
#customer_set .bank ul.bank_name{padding:0 0 0 20px}


footer{position: relative}
footer .footer_wrap{margin:50px 0}
footer ul.condition{display: flex; justify-content: center; gap:20px}
footer ul.condition li a{padding:10px}
footer .copyright{margin:20px 0 0 0; text-align: center}
footer .copyright span{display: block}

footer .family_site{position: absolute; right:0; top:-12px}
footer .family_site ul.family_list{position: absolute; margin-top:calc(-42px * 4 - 42px); display: none}
footer .family_site ul.family_list li{width:242px; height:42px; font-size: 0.85rem; border:var(--border)}
footer .family_site ul.family_list li:hover{border:var(--border-itgo)}
footer .family_site ul.family_list li:nth-child(1){background: url(https://itgo.co.kr/images/family_bn001.png) 120px 50% no-repeat var(--bg-card)}
footer .family_site ul.family_list li:nth-child(2){background: url(https://itgo.co.kr/images/family_bn002.png) 120px 50% no-repeat var(--bg-card)}
footer .family_site ul.family_list li:nth-child(3){background: url(https://itgo.co.kr/images/family_bn003.png) 120px 50% no-repeat var(--bg-card)}
footer .family_site ul.family_list li:nth-child(4){background: url(https://itgo.co.kr/images/family_bn005.png) 120px 50% no-repeat var(--bg-card)}
footer .family_site ul.family_list li em{width:121px; height:42px; line-height: 42px; text-align: center; display: block}
footer .family_basic{width:242px; height:42px; background: url(https://itgo.co.kr/images/footer_arrow.png) 200px 50% var(--bg-gray) no-repeat; display: block; line-height: 42px; text-align: center; cursor: pointer}