@charset "utf-8";

#reader ul {display: flex; align-items: stretch; justify-content: stretch; padding: 1.5rem 0; border-bottom:1px dotted #ccc;}
#reader ul:last-child{border-bottom: 0;}
#reader li {box-sizing: border-box; color: white; text-align: center;}
#reader .item-40 {width: 32%; margin-right: 1rem;}
#reader .item-60 {width: 67%;}

.dataInfoClass {width:100%; background: #fff; overflow: hidden; border: 1px solid #ccc; height: 100%;}

.table-main-flex{display: flex; align-items: center; justify-content: space-between;}
.table-main-title{display: flex; align-items: center;}
.table-title{font-size: 1.5rem; font-weight: 600;}
.table-price{margin-left: 10px;}
.table-price span{color: #BF0000; font-size: 0.9rem;}

.school-number a{display: flex; align-items: center; border: 1px solid #ccc; box-sizing: border-box; border-radius: 30px; overflow: hidden; padding: 0.3rem 0.8rem; transition: .1s;}
.school-number-span{display: flex; align-items: center; font-size: 0.8rem;}
.school-number a:hover{background-color: #094072;}
.school-number a:hover .school-number-span{color: #fff;}
.school-number a:hover .school-number-span svg{fill: #fff;}

.table-all-product{display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; height: 100%;}
.table {width: 100%; border-collapse: collapse; height: 100%;}
.table td {padding: 0.5rem; border-bottom: 1px solid #ccc; text-align: left; box-sizing: border-box; font-size: 0.8rem;}
.table td:first-child {width: 25%; font-weight: bold; background-color: #f5f5f5; color: #333; text-align: center; border-right: 1px solid #ccc;}
.table tr:last-child td {border-bottom: none;}

.readerClass div{font-size: 0.8rem;}

/* omrcard - menu3 */
.sub3-content{margin:1rem 0}
.sub3-content-notice{width: 80%; margin: 0 auto; margin-bottom: 1rem;}
.sub3-content-notice-title{font-size: 1rem; text-align: center; font-weight: 600;}
.sub3-content-notice-title i, .sub3-content-notice-title span{color: #094072;}
.sub3-content-inner{border:1px solid #ccc; box-sizing: border-box; padding: 0.8rem; margin-top: 10px;}
.sub3-content-inner01{margin-bottom: 0.5rem;}
.sub3-content-inner01:last-child{margin-bottom: 0;}
.sub3-content-inner01 span{display: block; font-size: 0.75rem;}
.sub3-content-inner01 span.sub3-content-inner-title{font-size: 0.9rem; font-weight: 600;}

.sub3-content-main{border: 1px solid #ccc; box-sizing: border-box; padding: 0.8rem;}
.sub3-content-main-title{text-align: center; font-weight: 600; margin-bottom: 10px; font-size: 1rem;}
.sub3-content-main-title i,.sub3-content-main-title span{color: #094072;}
.sub3-content-main-img{width: 60%; margin: 0 auto;}
.sub3-content-main-price{text-align: center;}
.sub3-content-main-price span{color: #BF0000; font-size: 0.9rem;}

.custom-omrcard01{display: flex; align-items: center; margin-bottom: 1rem;}
.custom-omrcard01:last-child{margin-bottom: 0;}

.custom-omrcard-icon{overflow: hidden; background-color: #fff; border-radius: 50%; width: 80px; height: 80px; box-sizing: border-box; padding: 0.5rem; text-align: center; display: flex; align-items: center; justify-content: center; margin-right: 10px;}
.custom-omrcard-icon img{width: 90%;}

.custom-omrcard-text{display: flex; align-items: center;}
.custom-omrcard-number span{font-size: 1.5rem; font-weight: 500; color: #fff; margin-right: 10px; border: 1px solid #094072; background-color: #094072; border-radius: 50%; width: 50px; height: 50px; box-sizing: border-box; padding: 0.3rem; display: flex; align-items: center; justify-content: center; text-align: center;}

.custom-omrcard-textbox span{display: block; line-height: 1.2rem;}
.custom-omrcard-textbox span.point-span{background-color: #dbeeff; display: inline;}

.sub3-content-main-imgs{display: flex; align-items: start; justify-content: space-between;}
.sub3-content-main-img01{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 49%;}
.sub3-content-main-img01-title{border: 1px solid #ccc; box-sizing: border-box; padding: 0.3rem; border-radius: 10px; font-size: 0.9rem; background-color: #f5f5f5; margin-bottom: 10px; width: 100%; text-align: center;}
.sub3-content-main-img.img01{width: 90%;}

/* omrºÀÅõ - menu4 */
.envelope-title{display: flex; align-items: center; justify-content: center; font-size: 0.9rem;}
.envelope-price span{color: #BF0000; font-size: 0.8rem; margin-left: 1rem; font-weight: 400;}
.envelope-imgs td img{width: 80%;}

.product-somo{display: flex; align-items: stretch; justify-content: space-between; margin: 1rem 0;}
.product-somo > div{width: calc(100%/3 - 0.5rem); cursor: auto; border: 1px solid #ccc;}
.product-somo > div a img{position: relative;}
.product-somo > div a .name-somo{position: absolute; z-index: 5;}
.product-somo > div a .name-somo p{font-size: 0.8rem; margin-left: 5px; margin-top: 5px;}

/* omrÇÁ·Î±×·¥ - menu4 */
.omr-program01{margin: 1rem 0 2rem 0;}
.omr-program-title{display: flex; flex-direction: column; align-items: start; margin-bottom: 1rem;}
.omr-program-title span{font-size: 1rem; font-weight: 800;}
span.omr-program-title-span{font-size: 0.75rem; font-weight: 400;}

.omr-program-flex{display: flex; align-items: stretch; justify-content: space-between;}
.omr-program-flex01{width: 49%; display: flex; align-items: stretch; justify-content: space-between;}
.omr-program-flexs{margin-left: 1rem;}
.omr-program-flex01 img{width: 185px; height: 185px;}
.omr-program-flex-title{margin: 0.5rem 0;}
.omr-program-flex-title .border{background-color: #094072; width: 50px; height: 2px; margin-bottom: 5px;}
.omr-program-flex-title span{font-size: 1rem; font-weight: 600;}
.omr-program-flex-textbox{line-height: 1rem;}
.omr-program-flex-textbox span{font-size: 0.8rem; word-break: keep-all;}

.omr-program01-one-flex{display: flex; align-items: end; justify-content: space-between;}
.omr-program01-one-flex img{width: 180px;}

.omr-program01-Iimg-one{display: flex; align-items: center; justify-content: space-between;}
.omr-program01-Iimg-one img{width: 300px;}
.omr-program01-Iimg-one-textbox{margin-left: 1rem;}
.omr-program01-Iimg-one-textbox-top{line-height: 1rem; margin-bottom: 1rem;}
.omr-program01-Iimg-one-textbox-top span{font-size: 0.8rem;}
.omr-program-flex-title span b{color: #094072; font-weight: 600;}

.omr-program01-Iimg-one-textbox-bottom{display: flex; align-items: start; justify-content: space-between;}
.omr-program01-Iimg-one-textbox-bottom01{width: 49%;}

.omr-program02,.omr-program03{margin-bottom: 1rem;}
.omr-program02-title{text-align: center; font-size: 1rem; font-weight: 800; word-break: keep-all;}
.omr-program02-title span b{font-weight: 800; color: #094072;}

.omr-program02-inner{display: flex; align-items: start; justify-content: space-around; flex-wrap: wrap; margin-top: 1rem;}
.omr-program02-01{width: calc(100%/4 - 1rem); border: 2px solid #ccc; box-sizing: border-box; padding: 1rem; height: auto; min-height: 250px; margin-bottom: 1rem;}
.omr-program02-01-title{display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;}
.omr-program02-01-title-number{font-weight: 800; font-size: 2rem; border-bottom: 2px solid #ccc;}
.omr-program02-01-title img{width: 60px;}
.omr-program02-01-text{line-height: 1rem;}
.omr-program02-01-text span{font-size: 0.8rem; word-break: keep-all;}

.omr-program02-01:nth-child(1),.omr-program02-01:nth-child(4),.omr-program02-01:nth-child(6){border: 2px solid #C8D932;}
.omr-program02-01:nth-child(2),.omr-program02-01:nth-child(5){border: 2px solid #41C4DF;}
.omr-program02-01:nth-child(3),.omr-program02-01:nth-child(7){border: 2px solid #7E8892;}

.omr-program03-title{box-sizing: border-box; padding: 0.3rem 0; text-align: center; margin: 0 auto; width: 80%; border-top: 1px solid #094072; border-bottom: 1px solid #094072; font-size: 1rem; font-weight: 800;}
.omr-program03-title span b{font-weight: 800; color: #BF0000;}

.omr-program03-inner{display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between;}
.omr-program03-inner01{width: calc(100%/4 - 1rem);}
.omr-program03-inner01 .omr-program03-inner-title{font-weight: 800; font-size: 1.5rem;}
.omr-program03-inner01 .omr-program03-inner-title span{color: #094072;}
.omr-program03-inner-img{margin: 10px 0;}
.omr-program03-inner-text{line-height: 1rem;}
.omr-program03-inner-text span{font-size: 0.8rem;}

.omr-program03-inner01-uniq{width: 100%; margin-top: 1rem;}
.omr-program03-inner01-uniq .omr-program03-inner-title{display: flex; align-items: center;}
.omr-program03-inner01-uniq .omr-program03-inner-title span:first-child{font-weight: 800; color: #094072; font-size: 1.5rem; margin-right: 10px;}
.omr-program03-inner01-uniq-flex{display: flex; align-items: stretch; width: 100%; justify-content: space-between;}
.omr-program03-inner01-uniq01{width: 49%;}

/* menu6 Æǵ¶´ëÇà */
.menu05-1-contents{margin: 1rem 0;}

.menu05-1-content01{margin-bottom: 1rem;}
.menu05-1-content-title{margin-bottom: 0.5rem;}
.menu05-1-content-title span{font-size: 1.3rem; font-weight: 700;}
.menu05-1-content-inner{display: flex; flex-wrap: wrap; align-items: stretch;}
.menu05-1-content-in01{width: calc(100%/5 - 0.5rem); border: 2px solid #ccc; box-sizing: border-box; padding: 0.5rem; margin-right: 10px; margin-bottom: 0.5rem;}
.menu05-1-content-in01:last-child{margin-right: 0;}
.menu05-1-content-in-number span{color: #094072; font-size: 1.5rem; font-weight: 600;}
.menu05-1-content-in-icon{display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;}
.menu05-1-content-in-icon img{width: 130px;}
.menu05-1-content-in-text{line-height: 1rem;}
.menu05-1-content-in-text span{font-size: 0.8rem; word-break: keep-all;}

.menu05-1-content-in02{margin-bottom: 2rem;}
.menu05-1-content-in02-title{background-color: #094072; box-sizing: border-box; padding: 0.3rem 1rem; text-align: center; display: inline-block; border-radius: 50px; margin-bottom: 0.5rem; font-size: 0.8rem;}
.menu05-1-content-in02-title span{color: #fff; font-weight: 600;}
.menu05-1-content-in02s{display: flex; align-items: center;}
.menu05-1-content-in02s-1{border: 2px solid #ccc; box-sizing: border-box; padding: 0.5rem; display: flex; align-items: center;}
.menu05-1-content-in02s-1-icon img{width: 130px; margin-right: 0.5rem;}
.menu05-1-content-in02s-1-number span{font-size: 1.5rem; color: #094072; font-weight: 600;}
.menu05-1-content-in02s-1-text{line-height: 1rem;}
.menu05-1-content-in02s-1-text span{font-size: 0.8rem; word-break: keep-all;}

.arrow{margin: 0 1rem; font-size: 2rem;}
.arrow i:last-child{display: none;}

/* ¹ÝÀÀÇü */
/* ÅÂºí¸´ °¡·Î¸ðµå */
@media only screen and (min-width: 1023px) and (max-width: 1400px){
    .table-title{font-size: 1.3rem;}
    .product>div{width: 320px; height: 320px;}
}

/*ÅÂºí¸´ ¼¼·Î¸ðµå*/
@media only screen and (min-width: 767px) and (max-width: 1023px){
    .product>div{width: 300px; height: 300px;}

    #reader ul{flex-direction: column; padding: 1rem 0;}
    #reader .item-40{margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: center;}
    #reader .item-60{width: 100%;}
    .readerClass div{font-size: 0.8rem;}

    .table-title{font-size: 1.3rem;}
    .table-price span{font-size: 0.9rem;}
    .table-main-flex{flex-direction: column;}
    .school-number-span{font-size: 0.9rem;}
    .table td{font-size: 0.8rem;}

    /* omrÄ«µå - menu3 */
    .sub3-content-main-img{width: 80%;}
    .sub3-content-main-img01-title{font-size: 0.8rem;}

    /* menu5 */
    .omr-program-flex{flex-direction: column;}
    .omr-program-flex01{width: 100%;}
    .omr-program-flex01:first-child{margin-bottom: 10px;}
    .omr-program02-inner{justify-content: space-between;}
    .omr-program02-01{width: calc(100%/3 - 0.5rem); padding: 0.5rem; min-height: 250px;}

    /* menu6 Æǵ¶´ëÇà */
    .menu05-1-content-title span{font-size: 1rem;}
    .menu05-1-content-in-number span{font-size: 1.3rem;}
    .menu05-1-content-in-icon img{width: 110px;}
    .menu05-1-content-in01{width: calc(100%/3 - 0.5rem);}
    .menu05-1-content-in02s{align-items: stretch;}
    .menu05-1-content-in02s-1-icon img{width: 100px;}
    .menu05-1-content-in02s-1-number span{font-size: 1.3rem;}
    .menu05-1-content-in02s.step1 .menu05-1-content-in02s-1,
    .menu05-1-content-in02s.step4 .menu05-1-content-in02s-1{width: calc(100%/1 - 0.5rem);}
    .menu05-1-content-in02s.step2 .menu05-1-content-in02s-1{width: calc(100%/3 - 1rem);}

    .arrow{margin: 2rem 0.5rem;}

    /* °¡°Ý¾È³» */

}

/* ¸ð¹ÙÀÏ */
@media only screen and (max-width: 767px) and (min-width: 300px){
    .product>div{width: 300px; height: 300px;}

    #reader ul{flex-direction: column; padding: 1rem 0;}
    #reader .item-40{margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: center;}
    #reader .item-60{width: 100%;}
    .readerClass div{font-size: 0.8rem;}

    .table-title{font-size: 1.1rem;}
    .table-price span{font-size: 0.8rem;}
    .table-main-flex{flex-direction: column;}
    .school-number-span{font-size: 0.75rem;}
    .table td{font-size: 0.8rem; padding: 0.3rem;}

    /* omrÄ«µå - menu3 */
    .sub3-content-notice{width: 100%;}
    .sub3-content-inner01 span{word-break: keep-all;}
    .sub3-content-inner01 span.sub3-content-inner-title{font-size: 0.8rem;}
    .sub3-content-inner01 span{font-size: 0.7rem;}
    .sub3-content-main-img{width: 100%;}
    .sub3-content-notice-title, .sub3-content-main-title{font-size: 0.9rem; word-break: keep-all;}
    .sub3-content-main-price span{font-size: 0.8rem;}
    .tab{width: 100%;}
    .tab li{padding: 0.2rem; width: calc(100%/5); text-align: center;}
    .custom-omrcard-icon{width: 60px; height: 60px; padding: 0.3rem;}
    .custom-omrcard-icon img{width: 90%;}
    .custom-omrcard-text{width: 85%;}
    .custom-omrcard-number span{font-size: 1.2rem; width: 40px; height: 40px;}

    .sub3-content-main-imgs{flex-direction: column;}
    .sub3-content-main-img01{width: 100%;}
    .sub3-content-main-img01:first-child{margin-bottom: 1rem;}
    .sub3-content-main-img.img01{width: 100%;}
    .sub3-content-main-img01-title{font-size: 0.8rem;}

    /* omrÇÁ·Î±×·¥ - menu5 */
    .omr-program-flex{flex-direction: column;}
    .omr-program-flex01{width: 100%; flex-direction: column; align-items: center;}
    .omr-program-flex01 img{margin-bottom: 10px;}
    .omr-program-flex01:first-child{margin-bottom: 10px;}
    .omr-program01-Iimg-one{flex-direction: column;}
    .omr-program01-Iimg-one img{margin-bottom: 10px;}
    .omr-program01-Iimg-one-textbox{width: 95%;}
    .omr-program-title span{font-size: 0.9rem;}
    .omr-program-flex-title span{font-size: 0.9rem; word-break: keep-all;}
    .omr-program01-one-flex img{width: 150px; margin-bottom: 10px;}
    .omr-program01-Iimg-one-textbox-bottom{flex-direction: column;}
    .omr-program01-Iimg-one-textbox-bottom01{width: 100%;}
    .omr-program01-Iimg-one-textbox-bottom01:first-child{margin-bottom: 0.5rem;}
    .omr-program02-inner{align-items: start; justify-content: space-between;}
    .omr-program02-01-title-number{font-size: 1.5rem;}
    .omr-program02-01{width: calc(100%/2 - 0.3rem); padding: 0.5rem; min-height: 250px;}
    .omr-program03-title{width: 100%; font-size: 0.9rem;}
    .omr-program03-inner01{width: calc(100%/2 - 0.5rem);}
    .omr-program03-inner01-uniq-flex{flex-direction: column;}
    .omr-program03-inner01-uniq01:first-child{margin-bottom: 10px;}
    .omr-program03-inner01-uniq01{width: 80%; margin: 0 auto;}
    .omr-program01-one-flex{flex-direction: column; align-items: center;}

    /* menu6 Æǵ¶´ëÇà */
    .menu05-1-content-title span{font-size: 1rem;}
    .menu05-1-content-in01{width: calc(100%/2 - 0.5rem);}
    .menu05-1-content-in-number span{font-size: 1.2rem;}
    .menu05-1-content-in-icon img{width: 100px;}
    .menu05-1-content-in-text span{font-size: 0.75rem;}

    .menu05-1-content-in02s{flex-direction: column;}
    .menu05-1-content-in02s-1{width: 100%;}
    .menu05-1-content-in02s-1-icon img{width: 100px;}

    .arrow{margin: 1rem 0;}
    .arrow i:first-child{display: none;}
    .arrow i:last-child{display: block; margin-top: -1rem;}

    /* °¡°Ý¾È³» */
    .typeOMRTable th{padding: 0.3rem !important;}
    .typeOMRTable tr td{overflow-wrap: anywhere; font-size: 0.7rem;}
}