@charset "UTF-8";

/************ Noto-Sans-KR ************/
@font-face 											{ font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); }
@font-face 											{ font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); }
@font-face 											{ font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); }

/************ common ************/
body 												{ font-family: Noto Sans KR, sans-serif !important; font-size: 14px; font-weight: 400; color: #74767e; text-align: left; background-color: #fff; word-break: keep-all; }
.min-height											{ min-height: 400px; }
.btn-hover-none										{ pointer-events: none; }

/************ circle ************/
.circle 											{ width: 95px; height: 95px; border-radius: 50%; background-color: #282570; }
.circle-number										{ font-size: 65px; color: #ffffff; line-height: 95px; margin: auto; }

/************ modal ************/
.modal-content 										{ text-align: center; background-color: #fefefe; padding: 10px; border: 1px solid #888; border-radius: 30px; height: fit-content; top: 0; bottom: 0; left: 0; right: 0; position: fixed; margin: auto; }
.modal 												{ display: none; position: fixed; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
#modal_comment 										{ text-align: left; line-height: 1.5; }
@media screen and (min-width:560px) 				{ #modal_comment { margin-left: 10%; margin-right:10%; } }
@media screen and (max-width:560px) 				{ #modal_comment { margin-left: 0; margin-right: 0; } }
@media screen and (min-width:560px) 				{ .modal-content { width: 45%; } }
@media screen and (max-width:960px) 				{ .modal-content { width: 60%; } }
@media screen and (max-width:560px) 				{ .modal-content { width: 90%; } }
.border-color										{ border-color: #ffff !important; }

/************ img ************/
.img-modal											{ cursor: pointer; }
@media screen and (min-width:560px) 				{ .img-modal { height: 180px; width: -webkit-fill-available; } }
@media screen and (max-width:560px) 				{ .img-modal { height: 225px; width: -webkit-fill-available; } }

@media screen and (min-width:560px) 				{ #modal_img { height: 70%; width: 70%; } }
@media screen and (max-width:560px) 				{ #modal_img { height: 90%; width: -webkit-fill-available; } }