@font-face {
     font-family: 'S-CoreDream-7ExtraBold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;700;900&display=swap');



/* Visual Fade Effect */
#visual { width:1250px; overflow:hidden; position:relative; margin:0 auto; height:420px; border:0px solid red; }
.visual_wrap { position:relative; width:100%; margin:auto; height:420; text-align:center; }
.visual_box { position:absolute; width:100%; left:0%; }
.visual_box p {  width:100%;  height:420px; border:0px solid red; }

.v_ul {position:absolute; bottom:30px; left:20px;  z-index:111; border:1px solid red;  display:none;}
.v_ul li { z-index:111; cursor:pointer; margin-left:12px; float: left; line-height: 16px;  }
.v_ul li:first-child { margin-left:0; }
.v_btn01 {  position:absolute;  z-index:1;  top:232px;  left:-338px;    cursor:pointer; }
.v_btn02{   position:absolute;  z-index:1;  top:232px;  right:-338px; cursor:pointer; }
.visual_p { position:absolute;  left:0;  height:400px;}

.visual_text{z-index:2;   position:absolute; top:95px;  right:10%;  text-align:center; }
.visual_text .maintext01{font-size:75px; font-weight:800; color:#b05c31;}
.visual_text .maintext02{font-size:40px; color:#fff;}
.visual_text .maintext02 span{font-weight:800; }
.visual_text .maintext03{font-size:22px; color:#000; padding-top:25px; bordeR-top:1px solid #000;}
.visual_text .maintext03 span{font-weight:800; }


.mainbg01{width:100%; background:url('/images/main3/mvisual_01.jpg'); height:420px;}
/*.mainbg02{width:100%; background:url('/images/main3/mvisual_02.jpg'); height:420px;}*/



@media (max-width:1249px) {
#visual{width:100%;}
}


@media (max-width:1289px) {

#visual{ height:400px;}
.visual_wrap {height:400px;}
.visual_box img{ width:100% important; height:1100px;}
.visual_text{width:100%; padding:10px; left:0%; text-align:center; top:10%;}
.visual_text img{width:60%;}

}

@media screen and (max-width:565px) {

#visual{ height:600px;}
.visual_wrap {height:600px;}
.visual_text{top:30%;}
.visual_text img{width:80%;}
.mobilenone{display:none;}
.visual_box p{height:600px;}
.mainbg01{width:100%; background:url('/images/main3/mvisual_01_1.jpg'); height:600px;}
/*.mainbg02{width:100%; background:url('/images/main3/mvisual_02_1.jpg'); height:600px;}*/
}



/* 기존에 있던 mtit2, mtit3 코드를 모두 지우고 아래로 교체하세요 */

.mtit2, .mtit3 {
    position: relative;
    padding: 20px 0px 20px 60px; /* 좌측에 아이콘 들어갈 60px 공간 확보 */
    line-height: 25px;
    /* background: url(...) 제거됨 */
    border-bottom: 2px solid #793415; /* 1. 하단 라인을 CSS border로 구현 */
    font-size: 25px;
    color: #793415;
    font-weight: 500;
}

.mtit2 span, .mtit3 span {
    font-size: 16px;
    color: #333333;
    font-weight: 400;
}

/* 2. Font Awesome 아이콘을 CSS로 삽입 (이미지 대체) */
.mtit2::before, .mtit3::before {
    content: "\f0c5"; /* 문서 겹친 모양(fa-files-o), 리스트 모양을 원하면 "\f022" (fa-list-alt) 사용 */
    font-family: "FontAwesome"; /* Font Awesome 4 지정 */
    position: absolute;
    left: 5px; /* 좌측 위치 조정 */
    top: 25px; /* 위아래 위치 조정 (디자인에 맞게 픽셀 조절 가능) */
    font-size: 35px; /* 아이콘 크기 */
    color: #793415; /* 새로운 테마색(갈색) 적용 */
}

/* --- 더보기(Listmore) 아이콘 스타일 --- */
.listmore {
    position: absolute;
    right: 10px; /* 우측 여백 살짝 확보 */
    bottom: 20px; /* 타이틀 라인에 맞게 높이 조정 */
}

.listmore a {
    display: inline-block;
    color: #793415; /* 갈색 테마 기본색 */
    font-size: 24px; /* 기존 이미지와 비슷한 크기로 설정 */
    text-decoration: none;
    transition: all 0.3s ease; /* 부드러운 애니메이션 효과 */
}

.listmore a:hover {
    color: #b05c31; /* 마우스 오버 시 밝은 갈색으로 변경 */
    transform: scale(1.1); /* 마우스 오버 시 아이콘이 살짝 커지는 효과 */
}


@media screen and (max-width:789px){
.mtit1{font-size:17px;}

}


.mainwrap{width:100%; float:left; position:relative;}
.main{width:100%; position:relative; float:left;}
.maincenter{width:1250px;  position:relative; margin:0 auto; bordeR:0px solid red; overflow:hidden; padding-top:1px;}



@media screen and (max-width:1289px){
.mainleft{width:100%;  float:left;}
.mainright{width:100%;  float:left;}
}

@media screen and (max-width:1249px){
.maincenter{width:100%;}

}



.mleft{width:50%; float:left;position:relative; }
.micon{float:left; position:relative; width:25%; padding:35px 25px; box-sizing:border-box; 
    background:#f6f6f6;}
.micon ul{width:100%; overflow:hidden; }
.micon ul li{width:50%; float:left; display:inline-block; margin-bottom:1em;  text-align:center; }
.micon ul li a{color:#000; font-weight:400; font-size:16px;}
.micon ul li img{width:60%;}
.micon ul li:nth-child(5){margin-bottom:0em;}
.micon ul li:nth-child(6){margin-bottom:0em;}

.micon1{width:100%;  background:#020e28; box-sizing:border-box; padding:35px;}
.micon1 ul{width:100%; overflow:hidden; }
.micon1 ul li{display:inline-block;}
.micon1 ul li:first-child{width:45%; float:left;}
.micon1 ul li:last-child{width:55%;float:left;}



.mright{width:50%; float:left; position:relative; padding:0px 25px 0px 25px;   box-sizing:border-box; }
.mnotice{width:35.5%; margin-right:2%; float:left; position:relative; margin-bottom:2%; }
.mnotice ul {width:100%; floaT:left; margin-bottom:5px;}
.mnotice ul li{display:inline-block; floaT:left; padding:7px 0px; width:100%; 
    border-bottom:0px solid rgba(0,0,0,0.2) !important;}
.mnotice ul li a{color:#000;}
.mnotice ul li:last-child{border-bottom:0px solid rgba(0,0,0,0.1);}

.noticett{width:80%; float:left; color:#000; font-size:15.5px;}
.datett{width:20%; float:right; font-style:italic; font-weight:600; font-size:14px; color:#999;}


@media screen and (max-width:989px){

.mleft{width:100%; float:left;position:relative; }
.micon{width:100%; padding:25px 35px;  }
.wd100per{width:100%;}
.micon1 ul li:last-child{width:55%;float:left; padding-left:15px;}
.mright{width:100%; float:left;position:relative; }

.mnotice{width:96%; margin:2%; float:left; position:relative; }

}




.mbanner{width:100%; float:left; position:relative; overflow:hidden; background:#f9f9f9; padding:15px;}
.mbanner ul li{display:inline-block; floaT:left; width:19.5%;  margin:0.2%; 1%; text-align:center; padding:5px; box-sizing:border-box; 
bordeR:1px solid #efefef; background:#fff;
}
.mbanner ul li img{width:100%;}




@media screen and (max-width:989px){
.noticett{width:70%;}
.datett{width:30%; font-size:13px; text-align:right;}
.mbanner{margin-bottom:15px;}
.mbanner ul li{display:inline-block; floaT:left; width:48%;  margin:1%; text-align:center; padding:5px; box-sizing:border-box; 
bordeR:1px solid #efefef; background:#fff;}
.mbanner ul li img{width:100%;}
.pr35{padding-right:10px;}
}


.bottomdiv1{width:50%; float:left; border-right:1px solid #fff;  position:relative;
background:url(/images/main3/mbg01.jpg);box-sizing:border-box;  padding:25px; }
.bottomdiv1 ul li{display:inline-block; float:left;}
.bottomdiv1 ul li:first-child{width:30%;}
.bottomdiv1 ul li:first-child img{width:100%;}
.bottomdiv1 ul li:last-child{width:70%;padding-left:25px; box-sizing: border-box;}
.bottomdiv1 ul li dl{width:100%; float:left; line-height:20px; margin:1% 0%; }
.bottomdiv1 ul li dl dt{color:#fff; width:20%; float:left; border-right:1px solid rgba(250,250,250,0.6);}
.bottomdiv1 ul li dl dd{color:#fff; width:80%; float:left; padding-left:20px;}

.bottomdiv2{width:25%; float:left;  text-align:center;  border-right:1px solid #fff; 
  position:relative; background:url(/images/main3/mbg02.jpg); box-sizing:border-box;  padding:61px 25px; }
.bottomdiv2 p{color:#fff; font-size:31px; font-weight:500;}

.bottomdiv3{width:25%; float:left;  text-align:center;
  position:relative; background:url(/images/main3/mbg03.jpg); box-sizing:border-box;  padding:61px 25px; }
.bottomdiv3 p{color:#fff; font-size:31px; font-weight:500;}

.bottomdiv3 ul li{display:inline-block;  float:left; width:33.333%; text-align:center;}
.bottomdiv3 ul li a{ font-weight:500; color:#036d9d; }


.bottomtt{display:block; width:100%; font-size:25px; border-bottom:1px solid rgba(250,250,250,0.6);
 font-weight:600; color:#fff; padding:9px 0px;}
.bottomtt1{font-size:25px; font-weight:600; color:#990000; margin-top:15px;}



@media screen and (max-width:989px){

  .bottomdiv1 {width:96%; margin:2%; float:left; position:relative; padding:20px 15px; }




 .bottomdiv2 {width:96%; margin:2%; float:left; position:relative;  padding:20px 15px;}
  .bottomdiv3 {width:96%; margin:2%; float:left; position:relative; padding:20px 15px; }
.bottomtt{font-size:20px;}
.bottomtt1{font-size:20px;}
}


.myButton2 {
    
    border-radius:0px;
    background:url(/images/main3/arrow1.png)no-repeat left;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    border:1px solid rgba(250,250,250,0.3);
    font-size:15px;
    padding:8px 25px 8px 55px;   
    text-decoration:none;
    margin-top:7px;
    float:right;
    
}
.myButton2:hover {
    background-color:#b05c31;
    border:1px solid #b05c31;
}
.myButton2:active {
    position:relative;
    top:1px;
}


.myButton1 {
    
    border-radius:35px;
    background:url(/images/main3/arrow.png)no-repeat;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    border:1px solid #fff;
    font-size:15px;
    padding:8px 25px 8px 35px;
    
    text-decoration:none;
    margin-top:7px;
    
}
.myButton1:hover {
    background-color:#793415;
    border:1px solid #793415;
}
.myButton1:active {
    position:relative;
    top:1px;
}


@media screen and (max-width:989px){
.myButton1{ background:#5c2710 url(/images/main3/arrow.png)no-repeat left; }
.myButton2{ background:#5c2710 url(/images/main3/arrow.png) no-repeat left;}
.bottomdiv1 ul li:last-child{padding-left:55px;}
.bottomdiv2 ul li:last-child{padding-left:55px;}
.bottomdiv3 ul li img {width:80%;}

}


@media screen and (max-width:589px){
.myButton1{ background:#5c2710 url(/images/main3/arrow.png)no-repeat left;}
.myButton2{ background:#5c2710 url(/images/main3/arrow.png)no-repeat left; }

.bottomdiv1 ul li{display:inline-block; float:left;}
.bottomdiv1 ul li:first-child{width:100%;}
.bottomdiv1 ul li:first-child img{width:100%;}
.bottomdiv1 ul li:last-child{width:100%;padding-left:25px; box-sizing: border-box;}
.bottomdiv1 ul li dl{width:100%; float:left; line-height:20px; margin:1% 0%; }
.bottomdiv1 ul li dl dt{color:#fff; width:20%; float:left; border-right:1px solid rgba(250,250,250,0.6);}
.bottomdiv1 ul li dl dd{color:#fff; width:80%; float:left; padding-left:20px;}

.bottomdiv1 ul li:last-child{padding-left:17px;}
.bottomdiv2 ul li:last-child{padding-left:17px;}


}





.bottombanner{width:100%;  margin:0 auto; padding-bottom:0px; overflow:hidden;  padding:50px; background:#fff; bordeR:0px  solid red;}
.bannerarea{width:100%; float:left;  padding:0px; background:#fff;}


/* 부모 컨테이너 */
.flow_banner {
    overflow: hidden;
    display: flex;
    background: #fff;
    padding: 20px 30px;
}

/* 💡 핵심 수정 1: ul의 기본 여백(padding)을 완전히 제거해야 복제 시 간격이 어긋나지 않습니다. */
.flow_banner .list {
    display: flex;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 💡 핵심 수정 2: flex-shrink: 0 으로 브라우저가 강제로 이미지를 찌그러뜨리지 않게 막습니다. */
.flow_banner .list > li {
    width: 200px !important;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box; /* 너비 계산 오차 방지 */
    white-space: nowrap;
    font-size: 18px;
    color: #fff;
}

/* 애니메이션 */
@keyframes flowRolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* --- 기존 반응형 스타일 유지 --- */
@media (max-width: 1280px) {
    .flow_banner .list > li {font-size: 16px; padding: 10px;}
}

@media (max-width: 1024px) {
    #m_board .tab_container { margin-top: 0px; padding: 15px 0 0 0px; }
    .bottombanner { padding: 20px 10px; }
    .flow_banner { margin: 10px auto; background: #f5f5f5; }
    .flow_banner .list > li { width: 130px !important; font-size: 14px; padding: 5px; }
    .flow_banner .list > li > img { width: 90% !important; }
}


/* --- 신규 바로가기 (가로 한 줄) 스타일 --- */
/* --- 바로가기 영역 개선 스타일 --- */
.quick_wrap {
    background: #f6f6f6;
    margin: 30px auto;
    padding: 25px 0;
    border-radius: 10px;
}

.quick_list {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
}

.quick_list > li {
    flex: 1;
    text-align: center;
}

.quick_list > li a {
    display: block;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

/* 아이콘/이미지가 담기는 영역 */
.quick_list .icon_area {
    height: 60px; /* 높이 고정으로 정렬 유지 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* 폰트어썸 기본 스타일에도 전환 효과 추가 (이미 있다면 통과) */
.quick_list .icon_area i.fa {
    font-size: 45px;
    color: #793415;
    transition: all 0.3s ease;
}

/* 이미지 기본 스타일에 부드러운 전환 효과(transition) 추가 */
.quick_list .icon_area img {
    max-height: 100%;
    width: auto;
    transition: all 0.3s ease; /* 이 줄이 있어야 뚝뚝 끊기지 않고 부드럽게 커집니다 */
}
.quick_list span {
    display: block;
    font-size: 16px;
    font-weight: 500;
}

/* 마우스 호버 효과 (폰트어썸과 이미지 모두 적용되도록 수정) */
.quick_list a:hover {
    color: #793415;
}

/* 1. 폰트어썸 호버 효과: 색상 변경 + 크기 10% 확대 */
.quick_list a:hover .icon_area i.fa {
    color: #b05c31;
    transform: scale(1.1);
}

/* 2. 이미지 호버 효과: 크기 10% 확대 (이미지는 색상 변경이 안되므로 크기만) */
.quick_list a:hover .icon_area img {
    transform: scale(1.1);
}

/* 반응형 처리 */
@media screen and (max-width: 768px) {
    .quick_list { flex-wrap: wrap; }
    .quick_list > li { flex: 0 0 50%; margin-bottom: 25px; }
    .quick_list .icon_area i.fa { font-size: 38px; }
}



/* --- 신규 게시판 Grid (2x2 ~ 2x3 유동적) 스타일 --- */
.board_grid_wrapper {
    display: grid;
    /* PC: 기본 2열 배치, 간격은 30px */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.grid_item {
    background: #fff; /* 필요시 배경색 지정 */
    border-radius: 8px; /* 부드러운 모서리 (선택) */
    /* 기존 mnotice에 있던 불필요한 float, width, margin 제거됨 */
}

/* 게시판 내부 리스트 스타일 (기존 mnotice ul li 스타일 개선) */
.board_list_ul {
    width: 100%;
    margin-top: 15px;
    padding: 0;
    list-style: none;
}

.board_list_ul li {
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea; /* 선명한 구분선 */
    display: flex; /* 제목과 날짜를 양쪽으로 정렬 */
    justify-content: space-between;
    align-items: center;
}

.board_list_ul li:last-child {
    border-bottom: none;
}

.board_list_ul li a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: #333;
    text-decoration: none;
}

.board_list_ul li a:hover .noticett {
    text-decoration: underline; /* 접근성 향상 */
    color: #793415;
}

.board_list_ul .noticett {
    width: auto;
    max-width: 75%; /* 1. 날짜가 들어갈 공간(약 25%)을 미리 확보 */
    white-space: nowrap; /* 2. 제목이 길어도 다음 줄로 넘어가지 않게 한 줄로 고정 */
    overflow: hidden; /* 3. 지정된 너비(75%)를 넘어가는 텍스트는 화면에서 숨김 */
    text-overflow: ellipsis; /* 4. 숨겨진 텍스트 끝에 말줄임표(...)를 자동으로 생성 */
    font-size: 15px;
    color: #333;
}

.board_list_ul .datett {
    width: auto;
    font-size: 14px;
    color: #999;
}

.board_list_ul .no_data {
    text-align: center;
    color: #888;
    padding: 20px 0;
}

/* 📱 모바일 반응형 (화면이 좁아지면 1열로 변경) */
@media screen and (max-width: 989px) {
    .board_grid_wrapper {
        grid-template-columns: 1fr; /* 모바일에서는 1줄로 나열 */
        gap: 20px;
    }
}

/* --- 신규 하단 정보 영역 스타일 (Flexbox) --- */
.bottom_info_wrapper {
    display: flex;
    gap: 0; /* 기존에 선을 맞대고 있었으므로 간격 0 (border-right로 구분) */
    width: 100%;
    margin-bottom: 20px;
}

.bottom_box {
    box-sizing: border-box;
    position: relative;
}

/* 학술지 영역 (50%) */
.journal_box {
    flex: 0 0 50%;
    background: url(/images/main3/mbg01.jpg) center/cover no-repeat;
    padding: 25px;
    display: flex; /* 내부 이미지와 텍스트를 나란히 배치 */
    gap: 25px;
    border-right: 1px solid #fff;
}

.journal_img {
    flex: 0 0 30%; /* 기존 30% 비율 유지 */
}

.journal_img img {
    width: 100%;
    height: auto;
}

.journal_text {
    flex: 1; /* 나머지 영역 모두 차지 */
    display: flex;
    flex-direction: column;
}

.journal_text dl {
    display: flex;
    margin: 1% 0;
    line-height: 20px;
}

.journal_text dt {
    color: #fff;
    width: 80px; /* 기존 20% 대신 고정 너비가 더 깔끔함 */
    border-right: 1px solid rgba(250, 250, 250, 0.6);
    flex-shrink: 0;
}

.journal_text dd {
    color: #fff;
    padding-left: 20px;
    margin: 0;
}

.journal_text .btn_wrap {
    margin-top: auto; /* 버튼을 영역 맨 아래로 밀어냄 */
    display: flex;
    justify-content: flex-end; /* 오른쪽 정렬 */
}

/* 논문투고 & 학술대회 공통 영역 (각 25%) */
.action_box {
    flex: 0 0 25%;
    text-align: center;
    padding: 61px 25px;
    border-right: 1px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.action_box:last-child {
    border-right: none;
}

.submit_box {
    background: url(/images/main3/mbg02.jpg) center/cover no-repeat;
}

.conf_box {
    background: url(/images/main3/mbg03.jpg) center/cover no-repeat;
}

.action_box p {
    color: #fff;
    font-size: 31px;
    font-weight: 500;
    margin: 15px 0;
}

/* 📱 모바일 반응형 (1024px 이하부터는 세로로 쌓임) */
@media screen and (max-width: 1024px) {
    .bottom_info_wrapper {
        flex-direction: column;
        gap: 15px; /* 세로로 쌓일 때 간격 추가 */
    }

    .journal_box, .action_box {
        flex: 1 1 100%; /* 모바일에서는 모두 100% 너비 */
        border-right: none; /* 우측 선 제거 */
        padding: 20px;
    }
}

@media screen and (max-width: 589px) {
    .journal_box {
        flex-direction: column; /* 학술지 내부의 이미지와 텍스트도 세로로 쌓임 */
    }
    .journal_text .btn_wrap {
        justify-content: flex-start; /* 모바일에서는 버튼 좌측 정렬 */
        margin-top: 15px;
    }
}