.main_title{text-align: center;}
.main_title .en_title{font-size: 1.8rem; line-height: 1; color: var(--point); font-weight: bold; font-family: var(--mon);} 
.main_title .kr_title{font-size: 4.2rem; line-height: 1; color: #1b1b1b; font-weight: bold; padding: 3rem 0 5rem;}
.main_title .tab_nav{display: flex; flex-wrap: wrap; justify-content: center;}
.main_title .tab_nav li{max-width: 18rem; flex: 1 0 18rem; font-size: 1.8rem; line-height: 1; color: #1b1b1b; font-weight: 500; text-align: center; padding: 2rem; border: 1px solid #ddd; background-color: #fff; transition: all ease 0.3s; cursor: pointer;}
.main_title .tab_nav li + li{border-left: none;}
.main_title .tab_nav li:is(.active, :hover){border-color: var(--point); background-color: var(--point); color: #fff;}

#main_contents{padding: 12rem 0; background-image: url('/images/main/main_step_bg.jpg'); background-size: cover; background-position: center; background-attachment: fixed;}
#main_contents .w1280{display: flex; align-items: center; flex-wrap: wrap; gap: 4rem 2rem;}
#main_contents .textArea{width: calc(100% - 88rem - 2rem);}
#main_contents .textArea h4{font-size: 4.2rem; line-height: 5rem; color: #1b1b1b; font-weight: bold; margin-bottom: 4rem;}
#main_contents .textArea p{font-size: 1.8rem; line-height: 2.8rem; color: #1b1b1b;}
#main_contents .imgArea{width: 88rem; display: flex; flex-wrap: wrap;}
#main_contents .imgArea a{position: relative; display: flex; align-items: flex-end; width: calc((100%)/2); aspect-ratio: 2/3; padding: 6rem; overflow: hidden; }
#main_contents .imgArea a::before{position: absolute; content: ''; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: center; transition: all ease 1s;}
#main_contents .imgArea a:hover::before{transform: scale(1.1);}
#main_contents .imgArea a:nth-of-type(1):before{background-image: url('/images/main/main_step_img_01.jpg');}
#main_contents .imgArea a:nth-of-type(2):before{background-image: url('/images/main/main_step_img_02.jpg');}
#main_contents .imgArea a *{position: relative; z-index: 1; color: #fff;}
#main_contents .imgArea a .textBox h4{font-size: 3rem; line-height: 4rem; font-weight: bold; margin-bottom: 2rem;}
#main_contents .imgArea a .textBox p{font-size: 1.8rem; line-height: 2.8rem; font-weight: bold;}

#main_research{padding: 12rem 0;}
.tab_contents{display: none;}
.tab_contents.active{display: block;}
#main_research .tab_contents{margin-top: 3rem;}
#main_research .tar{ margin-bottom: 3rem;}
#main_research .tar .view_more{font-size: 1.6rem; line-height: 1; color: #999999; transition: all ease 0.3s;}
#main_research .tar .view_more:hover{color: var(--point);}
#main_research .tab_contents > ul{display: flex; gap: 4rem;}
#main_research .tab_contents > ul li{width: calc((100% - 8rem)/3); }
#main_research .tab_contents > ul li .thumbArea{width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
#main_research .tab_contents > ul li .thumbArea img{max-width: none; width: 100%; height: 100%; object-fit: cover;}
#main_research .tab_contents > ul li .textArea{padding: 3rem; }
#main_research .tab_contents > ul li .textArea .title{font-size: 2rem; line-height: 1; color: #1b1b1b; font-weight: bold; margin-bottom: 1rem; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#main_research .tab_contents > ul li .textArea .text{height: 5rem; font-size: 1.8rem; line-height: 2.5rem; color: #333333; margin-bottom: 2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
#main_research .tab_contents > ul li .textArea .date{font-size: 1.6rem; line-height: 1; color: #999999;}

#main_notice{background-color: #f7f7fb;}
#main_notice .w1280{display: flex; align-items: center; justify-content: space-between; gap: 4rem 2rem;}
#main_notice .banner{width: 50rem; height: 50rem; display: flex; align-items: center; justify-content: center; padding: 3rem; background-color: var(--point); background-image: url('/images/main/main_notice_bg.png'); background-repeat: no-repeat; background-position: right bottom; color: #fff; transition: all ease 3s;}
#main_notice .banner:hover{background-position: right 20px bottom 20px;}
#main_notice .banner .textBox .en_title{font-size: 1.8rem; line-height: 1; font-weight: bold; font-family: var(--mon); margin-bottom: 2.5rem;}
#main_notice .banner .textBox .kr_title{font-size: 4.2rem; line-height: 1; font-weight: bold; margin-bottom: 4rem;}
#main_notice .banner .textBox .text{font-size: 1.8rem; line-height: 1.5;}
#main_notice .banner .textBox > a{display: block; font-size: 1.6rem; line-height: 1; color: inherit; margin-top: 3rem;}
#main_notice .list{width: calc(100% - 35rem - 2rem); max-width: 64rem; }
#main_notice .list ul{border-top: 1px solid var(--point);}
#main_notice .list ul li{border-bottom: 1px solid #ddd;}
#main_notice .list ul li *{transition: all ease 0.3s;}
#main_notice .list ul li:hover *{color: var(--point) !important;}
#main_notice .list ul li a{display: flex; flex-wrap: wrap; gap: 6rem; align-items: center; padding: 2rem 4rem; }
#main_notice .list ul li a .date{width: 7rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0; font-size: 1.6rem; line-height: 1; color: #1b1b1b; font-weight: 500; text-align: center; flex-direction: column-reverse;}
#main_notice .list ul li a .date strong{font-size: 2.8rem; line-height: 1; font-weight: bold; width: 100%;}
#main_notice .list ul li a .list_contents{width: calc(100% - 7rem - 6rem);}
#main_notice .list ul li a .list_contents h4{font-size: 2rem; line-height: 1; color: #1b1b1b; font-weight: 550; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1.5rem;}
#main_notice .list ul li a .list_contents p{font-size: 1.7rem; line-height: 1; color: #333333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

#main_cs{display: flex; flex-wrap: wrap;}
#main_cs > a{position: relative; width: 50%; height: 30rem; display: flex; align-items: center; justify-content: center; overflow: hidden;}
#main_cs > a::before{position: absolute; content: ''; top: 0; left: 0; bottom: 0; right: 0;  background-size: cover; background-position: center; transition: all ease 1s;}
#main_cs > a:nth-of-type(1):before{background-image: url('/images/main/main_notice_img_01.jpg');}
#main_cs > a:nth-of-type(2):before{background-image: url('/images/main/main_notice_img_02.jpg');}
#main_cs > a:hover::before{transform: scale(1.1);}
#main_cs > a .textBox{position: relative; z-index: 1; text-align: center; color: #fff;}
#main_cs > a .textBox .kr_title{font-size: 4rem; line-height: 1; font-weight: bold; margin-bottom: 2rem;}
#main_cs > a .textBox .en_title{font-size: 1.6rem; line-height: 1;}




@media only screen and (max-width : 1320px){
    #main_notice .banner{margin-left: -2rem;}

}
@media only screen and (max-width : 1200px){
    .wideVar{display: none;}

    #main_contents .imgArea{width: 77rem;}
    #main_contents .imgArea a{padding: 5rem;}
    #main_contents .textArea{width: calc(100% - 77rem - 2rem);}

    #main_research .tab_contents > ul{gap: 2rem;}
    #main_research .tab_contents > ul li{width: calc((100% - 4rem)/3); }
    #main_research .tab_contents > ul li .textArea{padding: 2rem 0; }

}
@media only screen and (max-width : 1024px){
    #main_contents .imgArea{max-width: 88rem;;}
    #main_contents .textArea{width: 100%;}

    #main_notice .list ul li a{padding: 2rem; gap: 3rem;}
    #main_notice .list ul li a .list_contents{width: calc(100% - 7rem - 3rem);}

}
@media only screen and (max-width : 840px){

}
@media only screen and (max-width : 768px){

}
@media only screen and (max-width : 640px){
    #main_research .tab_contents > ul{padding-bottom: 3rem; overflow-x: auto; overflow-y: hidden;}
    #main_research .tab_contents > ul::-webkit-scrollbar{width: 100%; height: 5px;}/* 스크롤바의 너비 */
    #main_research .tab_contents > ul::-webkit-scrollbar-thumb{height: 100%; background-color:var(--point); border-radius: 1rem;}  /* 스크롤바의 길이 & 색상 */
    #main_research .tab_contents > ul::-webkit-scrollbar-track{background-color: rgba(0,0,0,0.1);}/*스크롤바 뒷 배경 색상*/
    #main_research .tab_contents > ul li{min-width: 40rem;}

    #main_notice{padding: 0 0 12rem;}
    #main_notice .w1280{flex-wrap: wrap;}
    #main_notice .banner{position: relative; width: 100vw; left:50%; margin-left:-50vw; height: auto; aspect-ratio: 5/3;}
    #main_notice .banner .textBox{text-align: center;}
    #main_notice .list{max-width: none; width: 100%;}

    #main_cs > a{width: 100%;}


}
@media only screen and (max-width : 480px){
    #main_contents .imgArea a{width: 100%; padding: 3rem; aspect-ratio: 3/2;}

}