@charset "utf-8";


/* 비쥬얼 영역 */
.visual{position: relative; width: 2000px; height: 1000px;
    top: 0; left: 50%; transform: translateX(-50%); background: #000;}
    .gallery img{animation: ani 30s linear infinite; width: 2000px;}
    
    .gallery{position: relative; top: 0; width: 2000px; height: 1000px; overflow: hidden;}
    .gallery li{position: absolute; left: 0; top: 0; width: 2000px; height: 1000px; display: none;}
    
    @keyframes ani {
        from {transform: scale(1);}
        to {transform: scale(1.1);}
    }
    
.gallery li span{
    position: absolute; 
    left: 300px; 
    opacity: 0; 
    font-size: 50px; 
    color: #fff;
    
}

    .gallery .visual_text1{top: 350px; font-weight: bold; color: #fff;}
    .gallery .link2 .visual_text1 {color: #fff;}
    .gallery .visual_text2{top:450px; font-size: 30px; font-family: sans-serif; color: #333;
        font-weight: bold;}


.dock{width: 500px; height: 100px; position: absolute; left: 550px; bottom: 200px; transform: translateX(-50%);}
.dock::before{content: '';
    width: 380px;
    height: 50px;
    display: block;
    background: rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: absolute;
    left: -25px;
    top: -20px;
    backdrop-filter: blur(5px);box-shadow: 0 0 10px 1px rgba(0, 0, 0, .2);
    z-index: -1;}
.dock .mbutton{ margin-right: 15px; cursor: pointer; display: block; float: left; 
    width: 50px; height: 7px; background: rgba(255, 255, 255, 0.61); border-radius: 8px; transition: all .5s;}
.dock .mbutton span{display: block; width: 100px; height: 20px;
    opacity: .9; position: absolute; left: 0;}


.dock .ps{ margin-right:15px; margin-top: -5px; cursor:pointer; 
    display:block; float:left; width:25px; height:25px;transform: translateY(-5px);}
.dock .ps i{font-size: 30px; color: #004E97;}   



/* 본문 영역 */

/* #content {}
#content .intro{width: 1400px; margin: 0 auto; 
    text-align: center; padding: 100px 0;}
#content .intro h3{font-size: 2.5rem; margin-bottom: 50px;}
#content .intro p{font-size: 2rem; margin-bottom: 40px;}

#content .intro .intro_list{ display: flex; justify-content: space-between;}
#content .intro .intro_list li{width: 330px; height: 508px; overflow: hidden; position: relative;}  
#content .intro .intro_list li img{transition: all .5s ease-out;}
#content .intro .intro_list li:hover img{transform: scale(1.1); filter: blur(5px) grayscale(90%);} 
#content .intro .intro_list li div{position: absolute; width: 100%; left:0; top:0}
#content .intro .intro_list li h4{color: #fff; font-size: 2rem; text-align: center; font-weight: 600; margin: 150px 0 30px; transition: all .5s ease-out;}
#content .intro .intro_list li:hover h4{margin-top: 100px;}
#content .intro .intro_list li div>i{font-size: 5rem; color: #fff; margin-bottom: 30px; transition: all .5s ease-out;}
#content .intro .intro_list li:hover div>i{color:#15528e; transform: scale(1.1);}
#content .intro .intro_list li p{color: #fff; font-size: 1.15rem; margin: 0 40px; line-height: 2rem; text-align: justify; opacity: 0; transition: all .5s ease-out; transition-delay: .5s;}
#content .intro .intro_list li:hover p{opacity: 1;}  
#content .intro .intro_list li p a{margin-top: 30px; text-align: center;}
#content .intro .intro_list li p i{font-size: 2rem; color: #fff;} */


/* 섹션 1 */
#content{}
#content .intro{width: 1400px; margin: 0 auto; text-align: center; padding: 100px 0;}
#content .intro h3{font-size: 2.5rem; margin-bottom: 50px;}
#content .intro p{font-size: 2rem; margin-bottom: 40px;}
/*  */
#content .intro .intro_list{display: flex; justify-content: space-between;}
#content .intro .intro_list li{width: 330px; height: 508px; overflow: hidden; position: relative; border-radius: 30px;}
#content .intro .intro_list li img{transition: all .5s ease-out;}
#content .intro .intro_list li:hover img{transform: scale(1.1); filter: blur(5px) grayscale(90%);}

#content .intro .intro_list li div{position: absolute; left: 0; top: 285px; width: 100%;
    transition: all .7s ease-out;}
#content .intro .intro_list li div h4{color: #fff; font-size: 2rem; margin: 150px 0 30px; text-align: center; 
    font-weight: 500; transition: all .5s ease-out;}
#content .intro .intro_list li:hover h4{margin-top: 100px;}
#content .intro .intro_list li div>i{font-size: 5rem; color: #fff; margin-bottom: 30px; transition: all .5s ease-out;}
#content .intro .intro_list li:hover div>i{color: #15528e; transform: scale(1.1);}
#content .intro .intro_list li:hover div{top: 0; }
#content .intro .intro_list li p{color: #fff; font-size: 1.15rem; margin: 0 40px; line-height: 2rem; text-align: justify;  transition: all .5s ease-out;}
#content .intro .intro_list li:hover p{opacity: 1;}

#content .intro .intro_list li p a{margin-top: 30px; text-align: center;}

#content .intro .intro_list li p i{font-size: 2rem; color: #fff;}


/* #content .case .section2_left{color: #fff; width: 400px; position: relative;
    line-height: 2.5rem; margin: 200px 0 0 200px;}
#content .case .section2_left h4{font-size: 2.5rem;}
#content .case .section2_left strong{font-size: 1.5rem; text-align: justify; }
#content .case .section2_left p{font-size: 1.15rem; line-height: 2rem; text-align: justify; position: absolute;
 }  */

/* #content .case .section2_list{display: flex; justify-content: space-between; width: 1200px;
     margin-right: 100px;
} */
/* #content .case .section2_list li{width: 300px; height: 600px; position: relative; overflow: hidden;}
#content .case .section2_list li div{position: absolute; width: 100%; left: 0; top: 0;}
#content .case .section2_list li div h5{color: #fff; font-size: 1.7rem; margin: 100px 0 60px; 
    text-align: center; font-weight: 500px;}
#content .case .section2_list li div p{color: #fff; font-size: 1.15rem; margin: 0 40px 50px;}
#content .case .section2_list li div a{width: 100px; color: #fff; background-color: #15528e;
    border-radius: 20px; text-align: center; margin-left: 100px;} */


/* 섹션 2 */
    
#content .case{background: #f8f8f8;
     width: 2000px; height: 1000px;  top: 0; left: 50%; transform: translateX(-50%);
    position: relative; display: flex; justify-content: space-between;
    /* background: url(../images/다운로드.jpg) no-repeat; */
} 

    #content .case .section2_left{width: 400px; position: relative;
        line-height: 2.5rem; margin: 200px 0 0 200px; padding: 60px 0 0 30px;}
    #content .case .section2_left h3{font-size: 2.5rem; margin-bottom: 70px;}
    #content .case .section2_left strong{font-size: 1.5rem; text-align: justify; font-weight: 400;}
    #content .case .section2_left p{font-size: 1.15rem; line-height: 2rem; text-align: justify; position: absolute;
     margin-top: 60px;} 



    #content .case .eventSlideMenu{width: 1200px;height: 600px; margin: 200px 100px 0 0; position: relative; border: 10px solid #fff ; overflow: hidden;
        border: 10px solid rgba(255, 255, 255, .5);}
    #content .case .eventSlideMenu ul{list-style: none;}    
    #content .case .eventSlideMenu li{width: 900px; height: 600px; position: absolute; top:0; border-left:1px solid #999 ;}
    #content .case .eventSlideMenu li:nth-of-type(1){left:0}
    #content .case .eventSlideMenu li:nth-of-type(2){left:900px}
    #content .case .eventSlideMenu li:nth-of-type(3){left:1000px}
    #content .case .eventSlideMenu li:nth-of-type(4){left:1100px}
    #content .case .eventSlideMenu li img{width: 900px; height: 600px; object-fit: cover; object-position: center; filter: grayscale(80%);
        transition: all .5s ease-out;}
    #content .case .eventSlideMenu .current img{filter: blur(0);}
    #content .case .eventSlideMenu li span{width: 100px; height: 600px; display: block; cursor: pointer; position: absolute;
        left: 0; top: 0; background: #f00; opacity: 0;}

    #content .case .eventSlideMenu li dl{position: absolute; left:25px; top:100px; color: #fff;}
    #content .case .eventSlideMenu .current dl{left:100px;}
    #content .case .eventSlideMenu li dl dt{font-size: 1.5rem; position: absolute; left: 0; top: 50px; transition: all .5s ease;}
        /* margin: 100px 0 30px 0; font-weight: 500;transition: all .5s ease-out;} */
    #content .case .eventSlideMenu .current dl dt{font-size: 2.5rem; top:30px; font-weight: bold; width: auto;}
    #content .case .eventSlideMenu li dl dd{font-size: 1.2rem; line-height: 2.5rem; margin: 100px 100px 50px 0; opacity: 0; transition: all .5s ease-out;}
    #content .case .eventSlideMenu .current dl dd{opacity: 1;}
    #content .case .eventSlideMenu li dl a{color: #fff; width: 130px; text-align: center;
            padding: 7px 0; background: #004E97; border-radius: 15px; opacity: 0; transition: all .5s ease-out;}
    #content .case .eventSlideMenu li dl a:hover{background: #fff; color: #004E97;}
    #content .case .eventSlideMenu .current a{opacity: 1;}
    
  
/* 
    #content .case .section2_list li img{filter: blur(3px);}
    #content .case .section2_list li:hover img{filter: blur(0);}
    #content .case .section2_list li div{position: absolute; width: 100%; left: 0; top: 0;}
    #content .case .section2_list li:hover div{text-align: justify;}
    #content .case .section2_list li div h5{color: #fff; font-size: 1.7rem; margin: 100px 0 60px; 
        text-align: center; font-weight: 500px;}
    #content .case .section2_list li div p{color: #fff; font-size: 1.15rem; margin: 0 40px 50px;}
    #content .case .section2_list li div a{width: 100px; color: #fff; background-color: #15528e;
        border-radius: 20px; text-align: center; margin-left: 100px;}
    #content .case .section2_list li:hover div a{margin: 0 auto;} */
    
    
    #content .judical{width: 1400px; height: 700px; margin: 0 auto; text-align: center; display: flex; justify-content: space-between;
        padding: 100px 0;}
    #content .judical_left{position: relative; width: 350px;  margin-top: 60px;}
    #content .judical_left h3{font-size: 2.5rem; color: #333; padding: 0 0 40px 15px; text-align: left;}
    #content .judical_left p{font-size: 1.2rem; text-align: justify; line-height: 2rem;}
    #content .judical .judical_left a{color: #fff; width: 130px; text-align: center; padding: 7px 0 ; 
        background:#004E97; border-radius: 15px;  transition: all .5s ease-out ; margin-top: 50px; border: 1px solid #333;}
    #content .judical .judical_left a:hover{background: #fff; color: #333;}
    
    #content .judical_right{width: 1000px;}
    #content .judical_right ul{ background: red; position: relative; }
    #content .judical_right li{width: 250px;height: 250px; border-radius: 50%; overflow: hidden; position: absolute; transition: all .5s ease-out;
        perspective: 700px;}
    #content .judical_right li img{transform: rotateY(0); transition:  all 1s ease-out;}
  
    #content .judical_right li:hover img {transform: rotateY(180deg); opacity: 0;}
    #content .judical_right li:hover{display: flex; transform: scale(1.2); cursor: pointer; box-shadow: 0 0 15px 2px rgba(0,0,0,.3)}
    #content .judical_right li:hover a{position: absolute; width: 250px; height: 250px;
        background-color: #F5EDED;}
    #content .judical_right li:hover .front_detail{opacity: 0;}

    #content .judical_right li:nth-of-type(1){top:0; left:50%; margin-left: -125px;}
    #content .judical_right li:nth-of-type(2){left:120px; top: 230px;}
    #content .judical_right li:nth-of-type(3){right:120px; top:230px}
    #content .judical_right li:nth-of-type(4){top:460px ;left:50%;  margin-left: -125px;}
    #content .judical_right img{width: 250px; height: 250px; object-fit: cover; object-position: center;}

    #content .judical_right li .back_detail{display: block; position: absolute; left: 0; top: 110px; width: 100%;
         color: #333; text-align: center; opacity: 0;}
    #content .judical_right li:hover .back_detail{opacity: 1;
         transform: scale(2.5); transition: all .5s ease-out; transition-delay: .5s;}
            
          
    
    /* 섹션 5 */
    
    #content .notice {
        background: url(../images/section4/999.jpg) no-repeat; 
        width: 2000px; height: 1000px; text-align: center;
        top: 0; left: 50%; 
        transform: translateX(-50%); 
        position: relative; justify-content: space-between;}
    #content .notice_head{text-align: center; padding-top: 100px;}
    #content .notice_head h3{font-size: 2.5rem; margin-bottom: 50px; color: #333;}
    #content .notice_head p{font-size: 2rem; margin-bottom: 40px; color: #333; display: flex; 
        justify-content: center;}
    #content .notice_head a{font-size: 1.6rem;
        color: #666;border: 3px solid #666;width: 40px;height: 40px;border-radius: 50%;transform: translate(200px, 5px); transition: all .5s;}
    #content .notice_head a:hover{color:#004E97; transform: translate(200px, 5px) rotate(180deg); border-color: #004E97;}
    #content .notice .notice_list{display: flex; justify-content: space-between; width: 1400px; flex-wrap: wrap;
        margin: 35px 0 0 300px;}
    #content .notice .notice_list li {border: 2px solid #fff; width: 650px; height: 250px; 
        border-top-right-radius: 30px; border-bottom-left-radius: 30px; 
        background-color: #fff; color:#333; margin: 20px 0; transition: all .5s ease-out;}
    #content .notice .notice_list li:hover {background-color: #004E97; color: #fff; transform: scale(1.05); }
    #content .notice .notice_list li:hover a{color: #fff;}
    #content .notice .notice_list li div{text-align: justify; padding: 30px;}
    #content .notice .notice_list li div strong{font-size: 1.375rem; font-weight: bold; ;}
    #content .notice .notice_list li div p{margin-top: 40px; font-size: 1.1rem; font-weight: 500;}
    
    #content .guide{width: 1400px; text-align: center; top: 0; left: 50%;  margin-bottom: 200px;
        transform: translateX(-50%); 
        position: relative; justify-content: space-between; ;}
    #content .guide_top{text-align: left; margin-top: 100px; padding-left: 30px;}
    #content .guide_top h3{font-size: 2.5rem; font-weight: bold; font-style: italic;}
    #content .guide_top p{font-size: 1.875rem; font-weight: 400;}
    #content .guide_top div{width: 350px; display: flex; gap:40px; font-size: 28px; padding: 20px 10px;}
    #content .guide_top div i{padding-left: 10px;}
    #content .guide_top div:hover a {background-color: #D9D9D9;  border-radius: 30px;
        /* padding: 10px;  */
        /* font-size: 2rem; */
        transform: scale(1.25);
        transition: all .5s ease-out; }
    /* #content .guide_top div:hover a::after(transition: all .5s ease-out;) */
    
    #content .guide .guide_bottom{display: flex; margin: 60px 0; gap: 230px;}
    
    #content .guide .guide_left img{ width: 540px; height: 460px; box-shadow: 15px 15px 0 0 rgba(0,0,0,.1);object-fit: cover; display: none;}
    
    #content .guide .guide_right{text-align: left; font-size: 1.8rem; padding-top: 50px;}
    #content .guide .guide_right .guide_content{display: none; padding: 20px 0;}
    #content .guide .guide_right_1:hover a{color: #666;}
    #content .guide .guide_right p{font-size: 1.15rem; padding: 30px; text-align: justify; line-height: 1.6rem;
               background: #fff7f7; border-radius: 25px; margin: 15px 0;}
    /* #content .guide .guide_right_2:hover {} */

    #content .guide .guide_right .guide_right_1 .guide_gallery{width: 150px; height: 150px; border-radius: 20px;
            display: inline; gap: 10px; display: none;
        }
    #content .guide .guide_right li a.guide_menu{padding: 5px 0;}
    #content .guide .guide_right li:nth-of-type(2) .guide_content ul{display: flex; gap:15px}
    #content .guide .guide_right li:nth-of-type(3) .guide_content ul{display: flex; gap:15px}


    /* 다크 모드 */
    .dark-mode .wrap #headerArea{background: #666;}
    .dark-mode #content .case, .dark-mode #content .notice{background: #1e1e1e;}
    
    /* .dark-mode #content .case .section2_left h3, 
        .section2_left strong, 
        .section2_left p{color: #fff;} */
    .dark-mode #content .judical_left h3{color: #fff;}
    .dark-mode #content .notice .notice_head h3,
    .dark-mode #content .notice .notice_head p,
    .dark-mode #content .notice .notice_head p a {color: #fff;}
    .dark-mode #content .guide .guide_left img {box-shadow: 15px 15px 0 0 rgba(255, 255, 255, .2);}
    .dark-mode #content .guide .guide_right a{color: #fff;}
    .dark-mode #content .guide .guide_right p{background: #fff; color: #333;}