@charset "UTF-8";

.tutor {padding-top: 140px; padding-bottom: 200px;}

.btn_area {width: 100%; text-align: right; margin-bottom: 20px;}
.btn_area button {width: 80px; height: 34px; border-radius: 0; text-align: center; border-right: var(--border-solid); background: transparent; font-size: 1.125em;}
.btn_area button.on {border-radius: 4px; border-color: transparent; background: var(--highlight); color: var(--white);}
.btn_area button:last-child {border-color: transparent;}
#nationalForm {display: -webkit-flex; display: flex; justify-content: end; align-items: center; margin-left: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content;}


/* .tutor_wrap .ul-tutor {
    width: 100%; 
    display: grid; 
    grid-auto-rows: 50px; 
    grid-template-columns: repeat(3, 1fr); 
    column-gap: 50px;
    row-gap: 50px;
    justify-content: start; align-items: start;
} */
.masonry-container {width: 100%; display: grid; column-gap: 50px; grid-auto-rows: 1px; grid-template-columns: repeat(3, 1fr);}
.tutor_wrap .ul-tutor .item {width: 100%;}
.tutor_wrap .ul-tutor .item .tutor_info {width: 100%; border: var(--border-solid);}
.tutor_wrap .ul-tutor .item .tutor_info .img_area {border-bottom: var(--border-solid); position: relative;}
.tutor_wrap .ul-tutor .item .tutor_info .img_area .img_tutor {display: block; width: 100%;}
.tutor_wrap .ul-tutor .item .tutor_info .img_area .flag {position: absolute; top: 0; left: 0; width: 80px;}
.tutor_wrap .ul-tutor .item .tutor_info .img_area .name {width: 100%; height: 40px; background: #191919; line-height: 40px; font-weight: 700; font-size: 1.250em; color: var(--white); padding: 0 30px;}
.tutor_wrap .ul-tutor .item .tutor_info .txt_area {padding: 22px 30px;}
.tutor_wrap .ul-tutor .item .tutor_info .txt_area .dl-info dt {font-weight: 800; font-size: 1.063em; color: rgba(81,81,81,1); margin-bottom: 10px;}
.tutor_wrap .ul-tutor .item .tutor_info .txt_area .dl-info dd {font-weight: 300; font-size: 1.063em; color: rgba(81,81,81,1); margin-bottom: 30px;}
.tutor_wrap .ul-tutor .item .tutor_info .txt_area .dl-info dd:last-child {margin-bottom: 0;}





@media screen and (max-width:1200px){
    .tutor {padding: 0 50px; padding-top: 140px; padding-bottom: 200px;}
}

@media screen and (min-width:993px){
}

@media screen and (max-width:992px){
    .tutor {padding: 0 50px; padding-top: 80px; padding-bottom: 150px;}
}

@media screen and (max-width:768px){
    .masonry-container {column-gap: 40px; grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width:480px){
    .tutor {padding: 0 16px; padding-top: 50px; padding-bottom: 100px;}
    .masonry-container {display: block;}
    .tutor_wrap .ul-tutor .item {margin-bottom: 30px;}
    .tutor_wrap .ul-tutor .item:last-child {margin-bottom: 0;}
}