/* Pretendard(프리텐다드) 폰트 설정 */ 
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

HTML { 
    width:100%; 
    height: 100%;
}
BODY { 
	height: 100%;
    margin: 0 0 0 0;
    font-size: 1.0rem;
    /* font-family: arial; */

    /* Pretendard(프리텐다드) 폰트 설정 */ 
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
		
a:link { text-decoration: none; color:#2E3034; cursor:pointer; }
a:visited { text-decoration: none; color:#2E3034;  cursor:pointer; }
a:hover { text-decoration: none; color:#BA74B3; cursor:pointer; }

/* loading */
.loader { position: fixed; left: 50%; top: 50%; z-index: 100; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 16px solid #DBDBDB; border-radius: 50%; border-top: 16px solid #9F84F0; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; z-index: 101; } 
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.overlay {
	display: none;
	z-index: 100;
	position: fixed;
	width: 100%; height: 100%;
	left: 0; top: 0;
	background-color: rgba(0,0,0, 0.4);
	overflow-x: hidden;
}

div{
	box-sizing:border-box;  /* div 내부 padding 값을 줄 경우 div 너비가 증가되는 것을 방지 */
}

img {
    vertical-align: bottom; /* div 내 이미지 로드시 아래 공백이 생기는 현상 제거 */
    /*   vertical-align: top; */
}

.clear { clear: both; }

.event_title_image { width:100%; padding:50px 0 50px 0; text-align:center; }
.title_image { max-width:200px; width:auto; height:auto; }
.event_title_text { width:100%; padding:0 0 50px 0; text-align:center; font-size:2.0rem; color:#ffffff; letter-spacing:5px; }
.title_big { font-size:3.0rem; color:#FFFF00; font-style:italic; }
.event_subject_text { width:100%; padding:0 20px 50px 20px; text-align:center; font-size:1.3rem; color:#ffffff; letter-spacing:2px; }
.event_main_image { width:100%; padding:0 0 50px 0; text-align:center; }
.main_image { max-width:200px; width:auto; height:auto; }

.event_fieldset { width:100%; padding:0 20px 50px 20px; }
.fieldset_box {
	display: block;
	margin-bottom: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	border: 2px solid #ffffff;
	line-height:15px;
}
.fieldset_legend {
    background-color: #ffffff;
    font-size:1.1rem; color: #000000;
    padding: 5px 10px 5px 10px;
}
.fieldset_div { padding:2px 0 3px 0; color: #ffffff; }
.fieldset_div1 { padding:10px 0 10px 0; color: #ffffff; text-align:center; }
.referral_div { width:100%; padding:20px 20px 20px 20px; border-radius:10px; background-color:#ffffff; text-align:center; } 

.normal_button1 { font-size:1.0rem; color:#ffffff; background-color: #30A4D6; border:0px solid #0985EA; border-radius:3px; text-align:center; padding:5px 10px 5px 10px; cursor:pointer; }
.normal_button1:hover { background-color: #92ABAF; cursor:pointer; }













/** Mobile ======================================================================================================================================= */
@media screen and (max-width: 767px) {
    
    BODY { 
        /* height: 100%; */
        font-size:0.8rem;
        /* font-family: arial; */
    }

    .event_title_image { width:100%; padding:50px 0 30px 0; text-align:center; }
    .title_image { max-width:150px; width:auto; height:auto; }
    .event_title_text { width:100%; padding:0 0 30px 0; text-align:center; font-size:1.6rem; color:#ffffff; letter-spacing:2px; }
    .title_big { font-size:2.0rem; color:#FFFF00; font-style:italic; }
    .event_subject_text { width:100%; padding:0 20px 50px 20px; text-align:center; font-size:1.0rem; color:#ffffff; letter-spacing:1px; }

    .fieldset_legend {
        background-color: #ffffff;
        font-size:0.9rem; color: #000000;
        padding: 5px 10px 5px 10px;
    }







}
  








/** Tablet  ====================================================================================================================================== */
@media all and (min-width: 768px) and (max-width: 1023px) {
    
    BODY { 
        /* height: 100%; */
        font-size:0.8rem;
        /* font-family: arial; */
    }

    .event_title_image { width:100%; padding:50px 0 30px 0; text-align:center; }
    .title_image { max-width:150px; width:auto; height:auto; }
    .event_title_text { width:100%; padding:0 0 30px 0; text-align:center; font-size:1.6rem; color:#ffffff; letter-spacing:2px; }
    .title_big { font-size:2.0rem; color:#FFFF00; font-style:italic; }
    .event_subject_text { width:100%; padding:0 20px 50px 20px; text-align:center; font-size:1.0rem; color:#ffffff; letter-spacing:1px; }

    .fieldset_legend {
        background-color: #ffffff;
        font-size:0.9rem; color: #000000;
        padding: 5px 10px 5px 10px;
    }







}
  









/** Mobile & Tablet  ============================================================================================================================== */
@media all and (max-width: 1023px) {
    
    BODY { 
        /* height: 100%; */
        font-size:0.8rem;
        /* font-family: arial; */
    }

    .event_title_image { width:100%; padding:50px 0 30px 0; text-align:center; }
    .title_image { max-width:150px; width:auto; height:auto; }
    .event_title_text { width:100%; padding:0 0 30px 0; text-align:center; font-size:1.6rem; color:#ffffff; letter-spacing:2px; }
    .title_big { font-size:2.0rem; color:#FFFF00; font-style:italic; }
    .event_subject_text { width:100%; padding:0 20px 50px 20px; text-align:center; font-size:1.0rem; color:#ffffff; letter-spacing:1px; }

    .fieldset_legend {
        background-color: #ffffff;
        font-size:0.9rem; color: #000000;
        padding: 5px 10px 5px 10px;
    }
    





}

