@charset "utf-8";  
/* Mobile */ 

/* Visual */ 
#visual , .visual__img { position:relative }
#visual { width:100% ; height:100vh ; min-height:45rem ; margin-bottom:5rem }
.visual__img , .visual__img::before , .visual__img::after , .visual__container { width:100% ; height:100% }
.visual__img::before , .visual__img::after , .visual__container { 
    display:block ;   
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) 
} 
.visual__img::before , .visual__img::after { content:"" }

.visual__img::before { background:url(../img/main_visual.jpg) no-repeat center ; background-size:cover }
.visual__img::after  {
    background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.8) 100%);  
}

.visual__box { 
    width:90% ; text-align:center ;
    position:absolute ; left:50% ; bottom:4rem ; transform:translateX(-50%) ;
}
.visual__title , .visual__txt > b , .visual__link { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; word-break:keep-all }
.visual__title { font-size:3.8rem ; line-height:5rem ; font-family:'Dohyun',sans-serif ; word-break:keep-all ; margin-bottom:2rem }
.visual__title > b {
     font-size:inherit ; line-height:inherit ; font-family:inherit ; word-break:inherit ;
     color:#ffde00 ; letter-spacing:inherit ;
}
.visual__txt { margin-bottom:2rem }
.visual__txt > b { 
    font-size:1.4rem ; line-height:2.6rem ; border-bottom:solid 1px rgba(255,255,255,0.15) ;
    padding-bottom:0.3rem ;
}
.visual__link , .icon__more { display:inline-block ; position:relative }
.visual__link {
    padding:0.4rem 2rem 0.6rem 4.2rem ; 
    font-size:1.4rem ; line-height:2.8rem ; color:rgba(255,255,255,0.8)
}
.visual__link , .visual__link::after , .icon__more { transition:0.3s all } 
.visual__link , .visual__link::after { border-radius:0.4rem }
.visual__link::after { 
    display:block ; content: ""; width:100% ; height:100% ;
    border:solid 1px #ffffff ; box-sizing:border-box ; opacity:0.15 ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.icon__more {
    display:block ; width:2rem ; height:2rem ; opacity:0.5 ; 
    position:absolute ; left:2rem ; top:50% ; transform:translateY(-50%) ;
}
.icon__more::before , .icon__more::after {
    display:block ; content:"" ; width:1rem ; height:0.2rem ;
    background-color:#ffffff ; box-sizing:border-box ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.icon__more::after { transform:translate(-50%,-50%) rotate(90deg) }

.visual__link:hover { color:#ffffff ; background-color:rgba(0,0,0,0.2) }
.visual__link:hover::after { opacity:0.3 }
.visual__link:hover .icon__more { opacity:1 ; transform:translateY(-50%) rotate(90deg) }



/* Main */
#main { width:96% ; max-width:60rem ; margin:0 auto 5rem }
.bnr  { display:none }


/* arc10 */
.arc10 { 
    display:block ; width:100%  ; margin-bottom:4rem ;
    position:relative ; padding:2rem ;
}
.arc10 .arc__img , .arc10 .arc__img::before , .arc10 .arc__img::after {
    display:block ; width:100% ; height:100% ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.arc10 .arc__img { overflow:hidden ; border-radius:0.6rem ; z-index:-1 } 
.arc10 .arc__img::before , .arc10 .arc__img::after { content:""  }
.arc10 .arc__img::before { background:url(../img/main_item10.jpg) no-repeat center ; background-size:cover }
.arc10 .arc__img::after  { background-color:#111111 ; opacity:0.7 }

.arc10__title , .arc10__link { text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
.arc10__title { 
    font-size:2rem ; line-height:2.6rem ; color:#ffde00 ; font-weight:700 ; 
    padding-bottom:0.5rem ; margin-bottom:0.5rem ;
    border-bottom:solid 0.2rem #ffde00 ;
}
.arc10__link , .arc10__link > b , .arc10__link > strong { transition:0.3s all }
.arc10__link { 
    display:block ; padding:0.4rem 0 ; border-bottom:solid 1px rgba(255,255,255,0.15)  }
.arc10__link > b , .arc10__link > strong { text-shadow:inherit ; word-break:keep-all }
.arc10__link > strong {
    margin-right:0.3rem ; display:inline-block ; 
    font-size:1.2rem ; line-height:1.8rem ; color:#111111 ;
    padding:0 0.8rem 0.2rem ; border-radius:2rem ; background-color:#ffde00 ; 
}
.arc10__link > b { font-size:1.4rem ; line-height:2rem ; color:#ffffff }
.arc10__link:hover > b { color:#ebe1cd }
.arc10__link:hover > strong { background-color:#ebe1cd ; color:#111111 ; text-shadow:none }
.arc10__link:hover { border-color:rgba(255,255,255,0.3) }



/* arc20-40 */
.main__list  { display:flex ; justify-content:space-between ; margin-bottom:4rem }
.arc20 .main__list__item , .arc30 .main__list__item , .arc__img , .arc40 .main__list__item , 
.arc__img , .main__list__item::before { border-radius:0.6rem } 
.main__list__item { position:relative } 
.arc20 .main__list__item , .arc30 .main__list__item { width:33% ; height:24rem }
.arc40 .main__list__item { width:49.5% ; height:26rem }
.arc__img , .arc__img::before , .arc__img::after , .main__list__item::before { display:block ; width:100% ; height:100% }
.arc__img::before , .arc__img::after , .main__list__item::before , .arc__tag > span { content:"" ; transition:0.3s all } 
.arc__img { position:relative ; overflow:hidden ; z-index:5 }
.arc__img::before , .arc__img::after , .main__list__item::before { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
.arc__img::before { background:no-repeat center ; background-size:cover }
.arc__img::after  {
    transform:translate(-50%,-50%) scale(1.02) ;
    background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%, 
    rgba(0,0,0,0) 60%, 
    rgba(0,0,0,0.7) 80%,
    rgba(0,0,0,0.8) 100% );   
} 
.main__list__item:hover .arc__img::after { background-color:rgba(0,0,0,0.3) }

.arc21 .arc__img::before { background-image:url(../img/main_item21.jpg) }
.arc22 .arc__img::before { background-image:url(../img/main_item22.jpg) }
.arc23 .arc__img::before { background-image:url(../img/main_item23.jpg) }
.arc31 .arc__img::before { background-image:url(../img/main_item31.jpg) }
.arc32 .arc__img::before { background-image:url(../img/main_item32.jpg) }
.arc33 .arc__img::before { background-image:url(../img/main_item33.jpg) }
.arc41 .arc__img::before { background-image:url(../img/main_item41.jpg) }
.arc42 .arc__img::before { background-image:url(../img/main_item42.jpg) }

.arc__link { 
    display:block ; width:100% ; height:100%  ; text-align:center ; padding:0 0.5rem 1rem ; box-sizing:border-box ;
    position:absolute ; left:0 ; top:0 ; z-index:7 ; 
    display:flex ; flex-direction:column ; justify-content:flex-end 
} 
.arc__tag > span , .arc__title { word-break:keep-all }
.arc__tag { margin-bottom:1rem ; text-align:center }
.arc__tag > span  { 
    font-size:1.2rem ; line-height:1.6rem ; font-weight:500 ;
    display:inline-block ; padding:0.3rem 0.8rem 0.5rem ; border-radius:0.4rem ; 
}
.arc20 .arc__tag > span { background-color:#ffde00 ; color:#111111 }
.arc30 .arc__tag > span { background-color:#ebe1cd ; color:#111111 }
.arc40 .arc__tag > span { background-color:#111111 ; color:#ebe1cd }

.arc20 .arc__link:hover .arc__tag > span { background-color:#111111 ; color:#ffde00 }
.arc30 .arc__link:hover .arc__tag > span { background-color:#111111 ; color:#ebe1cd }
.arc40 .arc__link:hover .arc__tag > span { background-color:#ebe1cd ; color:#111111 }

 
.arc__title { 
    display:block ;   
    font-size:1.4rem ; line-height:2rem ; color:#ffffff ; font-weight:500 }
.arc20 .arc__title { text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }

.main__list__item::before { border:solid 1px rgba(0,0,0,0.1) ; box-sizing:border-box ; z-index:6 }

.main__list__item:hover .arc__img::before { transform:translate(-50%,-50%) scale(1.1) }
.main__list__item:hover::before { border-color:rgba(0,0,0,0.3) }
 



@media screen and (min-width:1024px){ 
 
    /* Visual */ 
    #visual { width:100% }
    #visual , .main__container { height:100vh ; min-height:90rem ; max-height:95rem }
    .visual__container , #main   { width:96% ; max-width:150rem }
    .visual__container { height:100% }
    .visual__box   { 
        width:46% ; left:3rem ; top:55% ; transform:translateY(-50%) ;  
        text-align:left }
    .visual__title { font-size:5.4rem ; line-height:7rem ; margin-bottom:3rem ; letter-spacing:-0.2rem }
    .visual__txt   { margin-bottom:4rem }
    .visual__txt > b { font-size:1.6rem ; line-height:3.4rem }

    .visual__img::after  {
        background:linear-gradient(to bottom,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.8) 100%);  
    }



    /* Main */
    #main { position:absolute ; left:50% ; top:0 ; transform:translateX(-50%) }
    .main__container { 
        position:absolute ; right:0 ; top:0 ;
        width:36.6666% ; max-width:55rem ; 
    } 


 
    /* arc10 */
    .arc10 , .main__article.bnr { 
        height:16rem ; margin:0 ; padding:0 ;
        position:absolute ; bottom:58rem 
    }
    .arc10 { display:block ; width:61.8181% ; left:0 } 
    .arc10__title { line-height:2.4rem } 
    .arc10 .arc__img { display:none }
    .arc10__link > b { 
        display:block ; color:rgba(0,0,0,0.8) ; text-shadow:0 0 0.3rem rgba(255,255,255,0.3) ;
        word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis }
    .arc10__link { position:relative ; padding:0.5rem 0.1rem 0.5rem 6.5rem ; border-color:rgba(0,0,0,0.1) }    
    .arc10__link > strong { position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) } 
    .arc10__link:hover { border-color:rgba(0,0,0,0.3) }
    .arc10__link:hover > strong { background-color:#111111 ; color:#ebe1cd}
    .arc10__link:hover > b { color:#000000 }



    /* banner */
    .main__article.bnr { display:block ; width:30.9090% ; right:0 }
    .bnr__container {
        position:relative ;
        display:block ; overflow:hidden ; width:100% ; height:100% ; border-radius:0.4rem ;
        background:url(../img/main_banner.jpg) no-repeat right bottom ; background-size:cover ;
    }
    .bnr__title , .bnr__title > b {  word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis }
    .bnr__title { 
        padding:1.5rem 0.5rem 0 ;
        font-family:'Dohyun',sans-serif ; color:#162f5d ; font-size:2.6rem ; line-height:2.8rem ; text-align:center ;
        letter-spacing:-0.15rem ; font-weight:600 ;
    }
    .bnr__title > b {
        display:block ; color:inherit ; font-size:inherit ; font-size:2.2rem ; line-height:2.4rem ; font-weight:500 ;
        font-family:inherit ; color:inherit ; padding-top:0.3rem ;
    }
    .bnr__link {  
        position:absolute ; left:1.5rem ; bottom:2rem ;
        display:inline-block ; padding:0.2rem 1rem 0.4rem ; 
        font-size:1.2rem ; line-height:1.6rem ; word-break:keep-all ;
        color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
        background-color:#162f5d ; transition:0.3s all ;
    }
    .bnr__link:hover { background-color:#111111 ; color:#ebe1cd }



    /* arc20-40 */  
    .arc20 , .arc30 , .arc40 { position:absolute ; left:0 ; width:100% ; margin:0 }
    .arc20 { bottom:40rem }
    .arc20 .main__list__item , .arc30 .main__list__item , .arc__img , .arc40 .main__list__item , 
    .arc__img , .main__list__item::before , .bnr__link , .arc30 .arc__title { border-radius:0.4rem } 
    .arc20 .main__list__item , .arc30 .main__list__item { width:32.3636% }
    .arc20 .main__list__item { height:15rem } 

    .arc40 { bottom:23rem }
    .arc40 .main__list__item { 
        transition:0.3s all ;
        width:49.0909% ; height:14rem ; background-color:rgba(0,0,0,0.2) }
    .arc40 .main__list__item:hover { background-color:rgba(0,0,0,0.4) }  

    .arc20 .main__list__item::before ,
    .arc40 .main__list__item::before , .arc40 .arc__img::after { display:none }

    .arc40 .arc__img { width:48.1481% }
 
    .arc40 .arc__link { padding:0 0 0 48.1481% ; justify-content:center }
    .arc40 .arc__tag  { margin-bottom:0.7rem }
    .arc40 .arc__tag , .arc40 .arc__title { padding:0 7% ; text-align:left }

    .arc30 { bottom:2rem }
    .arc30 .main__list__item { height:18rem }
    .arc30 .arc__link { padding:0 }
    .arc30 .arc__tag  { margin-bottom:0 ; position:relative ; bottom:-1.1rem }
    .arc30 .arc__title { padding:2rem 7% 1.5rem ; background-color:rgba(0,0,0,0.2) ; border-radius:0.4rem }

    .main__list__item:hover { box-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
    

/* 
.main__list  { display:flex ; justify-content:space-between ; margin-bottom:4rem }
.arc20 .main__list__item , .arc30 .main__list__item , .arc__img , .arc40 .main__list__item , 
.arc__img , .main__list__item::before { border-radius:0.6rem } 
.main__list__item { position:relative } 
.arc20 .main__list__item , .arc30 .main__list__item { width:33% ; height:24rem }
.arc40 .main__list__item { width:49.5% ; height:26rem }
.arc__img , .arc__img::before , .arc__img::after , .main__list__item::before { display:block ; width:100% ; height:100% }
.arc__img::before , .arc__img::after , .main__list__item::before { content:"" ; transition:0.3s all } 
.arc__img { position:relative ; overflow:hidden ; z-index:5 }
.arc__img::before , .arc__img::after , .main__list__item::before { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
.arc__img::before { background:no-repeat center ; background-size:cover }
.arc__img::after  {
    background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%, 
    rgba(0,0,0,0) 60%, 
    rgba(0,0,0,0.7) 80%,
    rgba(0,0,0,0.8) 100% );   
} 
.main__list__item:hover .arc__img::after { background-color:rgba(0,0,0,0.3) }

.arc21 .arc__img::before { background-image:url(../img/main_item21.jpg) }
.arc22 .arc__img::before { background-image:url(../img/main_item22.jpg) }
.arc23 .arc__img::before { background-image:url(../img/main_item23.jpg) }
.arc31 .arc__img::before { background-image:url(../img/main_item31.jpg) }
.arc32 .arc__img::before { background-image:url(../img/main_item32.jpg) }
.arc33 .arc__img::before { background-image:url(../img/main_item33.jpg) }
.arc41 .arc__img::before { background-image:url(../img/main_item41.jpg) }
.arc42 .arc__img::before { background-image:url(../img/main_item42.jpg) }

.arc__link { 
    display:block ; width:100% ; height:100%  ; text-align:center ; padding:0 0.5rem 1rem ; box-sizing:border-box ;
    position:absolute ; left:0 ; top:0 ; z-index:7 ; 
    display:flex ; flex-direction:column ; justify-content:flex-end 
} 
.arc__tag > span , .arc__title { word-break:keep-all }
.arc__tag { margin-bottom:1rem ; text-align:center }
.arc__tag > span  { 
    font-size:1.2rem ; line-height:1.6rem ; font-weight:500 ;
    display:inline-block ; padding:0.3rem 0.8rem 0.5rem ; border-radius:0.4rem ; 
}
.arc20 .arc__tag > span { background-color:#ffde00 ; color:#111111 }
.arc30 .arc__tag > span { background-color:#ebe1cd ; color:#111111 }
.arc40 .arc__tag > span { background-color:#111111 ; color:#ebe1cd }
 
.arc__title { 
    display:block ;   
    font-size:1.4rem ; line-height:2rem ; color:#ffffff ; font-weight:500 }
.arc20 .arc__title { text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }

.main__list__item::before { border:solid 1px rgba(0,0,0,0.1) ; box-sizing:border-box ; z-index:6 }

.main__list__item:hover .arc__img::before { transform:translate(-50%,-50%) scale(1.1) }
.main__list__item:hover::before { border-color:rgba(0,0,0,0.3) }




*/






} 
    
@media print { }