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

/* BG Image */
#bgImg , #bgImg::after { 
    display:block ; width:100% ; height:100% ; 
    left:0 ; top:0 
} 
#bgImg { 
    position:fixed ;  z-index:-1 ;
    background:url(../img/main_bg.jpg) no-repeat center ; background-size:cover ; background-attachment:fixed ;
}
#bgImg::after {
    content:"" ; position:absolute ;
    background-color:#111111 ; opacity:0.7 ;
} 
 


/* Main */
#main { width:100% ; max-width:128rem ; margin:auto ; padding-top:6rem }
#theme_title {
    padding:3rem 0 ;
    font-size:2.6rem ; line-height:4rem ; font-family:'Dohyun',sans-serif ; color:#ffffff ; 
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; word-break:keep-all ; text-align:center ;
}
.main__container { font-size:0 ; text-align:center ; margin-bottom:8rem }



/* Card + List */
.item__card { 
    display:inline-block ; width:46.9696% ; max-width:18rem ; height:24rem ;
    position:relative ; margin:0 1.5151% 1.5rem ;
    text-align:left 
}
.item__card , .card__img , .card13 .card__link , .item__card::before { border-radius:0.4rem }
.card__link , .card__img , .card__tag , .item__card::after { display:block }
.card__link { position:absolute ; left:0 ; z-index:7 }
.card__img , .card__img::before , .card__img::after , .item__card::before {
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    width:100% ; height:100%  
}
.card__img { z-index:3 }
.item__card::before { 
    box-sizing:border-box ; opacity:0 ;
    border:solid 1px #00c6ff ; z-index:5 ;
}
.item__card:hover::before  { opacity:1 }
.item__card.card20::before { border-color:#94e850 }
.card__img  { overflow:hidden } 

.card__img::before , .card__img::after , .item__card::before { content:"" ; transition:0.3s all }
.card__img::after  { background-color:#000000 ; opacity:0.5 }
.card__img::before { background:no-repeat center ; background-size:cover }
.item__card:hover .card__img::after  { opacity:0.6  }
.item__card:hover .card__img::before { transform:translate(-50%,-50%) scale(1.1) }
 
.card11 , .card12 , .list41 , .list42 , .item__list { width:96.9696% ; max-width:39rem } 
.card11 { height:40rem }
.card30 { height:9rem }

.card11 .card__img::before { background-image:url(../img/preview_11.jpg) }
.card12 .card__img::before { background-image:url(../img/preview_12.jpg) }
.card13 .card__img::before { background-image:url(../img/preview_13.jpg) }
.card21 .card__img::before { background-image:url(../img/preview_21.jpg) }
.card22 .card__img::before { background-image:url(../img/preview_22.jpg) }
.card23 .card__img::before { background-image:url(../img/preview_23.jpg) }
.card31 .card__img::before { background-image:url(../img/preview_31.jpg) }
.card32 .card__img::before { background-image:url(../img/preview_32.jpg) }

.card11 .card__link , .card12 .card__link { bottom:0 ; padding:2rem 2.5rem }
.card__tag , .card__title , .card__name { text-shadow:0 0 0.3rem rgba(0,0,0,0.1) ; word-break:keep-all }
.card__tag { 
    display:block ;
    font-size:1.2rem ; line-height:2rem ; font-weight:bold }
.card11 .card__tag , .card12 .card__tag { color:#00c6ff ; margin-bottom:0.5rem }
.card__title , .card__name { color:#ffffff ; transition:0.3s all ; word-break:keep-all } 
.card__title br { display:none }
.card11 .card__title , .card12 .card__title {
    font-size:2.4rem ; line-height:3.2rem ; font-weight:300 ; letter-spacing:-0.05rem ;
    margin-bottom:1.5rem ;
}  
.card11 .card__title:last-child , .card12 .card__title:last-child { margin-bottom:0 } 
.card11 .card__title > b , .card12 .card__title > b {
    font-size:inherit ; line-height:inherit ; color:inherit ; 
    font-weight:600 ; text-shadow:inherit ; letter-spacing:inherit ;
    font-family:inherit ; word-break:inherit ;
}
.card__name { display:block ; font-size:1.4rem ; line-height:2rem ; opacity:0.7 } 
 
.card__link:hover .card__title ,
.card__link:hover .card__name  { text-decoration:underline ; opacity:1 }

.card13 .card__img { height:17rem ; position:absolute ; left:0 ; top:0 ; transform:none } 
.card13 .card__link { 
    display:block ; width:100% ;  bottom:0 ; background:#eee }
.card13 .card__tag {
    position:absolute ; left:50% ; top:0 ; transform:translate(-50%,-50%) ;
    background-color:#00c6ff ; color:#ffffff ; text-align:center ;
    padding:0.2rem 0.2rem ; border-radius:3rem ; width:8rem ;
    box-sizing:border-box ;
}
.card13 .card__title { 
    display:block ; padding:2rem 0.5rem 1rem ;
    font-size:1.6rem ; line-height:2rem ; color:#444444 ; text-align:center ; font-weight:500 ;
    word-break:keep-all ;
}
.card13:hover .card__title { color:#111111 ; text-decoration:underline }

.card20 .card__link { 
    display:block ; width:100% ; height:100% ; 
    position:relative ; padding:1.5rem ;
} 
.card20 .card__tag , .card20 .card__title { padding:0 1.5rem }
.card20 .card__tag   { color:#94e850 ; position:absolute ; left:0 ; top:1.5rem }
.card20 .card__title { 
    font-size:1.8rem ; line-height:2.6rem ; font-weight:500 ;
    position:absolute ; left:0 ; bottom:1.5rem ; 
}

.card30 .card__link {
    display:block ; width:100% ; height:100% ;
    position:relative 
}
.card30 .card__tag   { 
    display:block ; width:100% ;
    color:#ffffff ; font-size:1.6rem ; line-height:2rem ; text-align:center ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.card30 .card__title { display:none }

.item__list  { margin:4rem auto 0 ; display:block ; text-align:left }
.item__list:last-child { margin-bottom:0 }
.list__title {
    display:block ; border-bottom:solid 0.2rem #94e850 ;
    font-size:1.2rem ; line-height:2rem ; color:#94e850 ; font-weight:500 ; 
    padding-bottom:0.5rem ; 
}
.list__link , li .list__link::before { transition:0.3s all }
.list__link { 
    font-size:1.8rem ; line-height:2.8rem ; color:#ffffff ; word-break:keep-all ;
    border-bottom:solid 1px rgba(255,255,255,0.15) ;
    position:relative ; display:block ;
    padding:1rem 0rem ;
}
li .list__link { padding-left:1.2rem }
li .list__link::before {
    display:block ; content:"" ; width:0.4rem ; height:0.4rem ;
    background-color:#ffffff ; opacity:0.3 ;
    position:absolute ; left:0 ; top:2.3rem
} 
.list__link:hover { border-color:rgba(255,255,255,0.5) }
li .list__link:hover::before { opacity:0.5 }






@media screen and (min-width:1024px){ 
  
    /* Main */
    #theme_title { display:none }
    #main        { padding-top:12rem ; width:96% }
    .main__container { position:relative ; width:100% ; height:65rem ; margin-bottom:10rem }

    .item__card , .item__list { display:block ; margin:0 ; position:absolute }
    .item__card { width:14.0625% ; max-width:18rem }

    .card11 , .card12 , .card13 { top:0 }
    .card11 { width:53.9062% ; max-width:69rem ; height:51rem }
    .card12 , .card13 { height:25rem }
    .card12 , .card21 { left:56.25% }
    .card12 { width:28.9062% ; max-width:37rem } 
    .card13 , .card23 , .list42 { right:0 }
    .card13 .card__img { height:18rem } 
    .card21 , .card22 , .card23 { top:27rem }
    .card22 { left:71.0937% } 
    .card31 , .card32 , .list41 , .list42 { bottom:0 }
    .card31 { left:0 }
    .card32 { left:16.4062% }

    .card30 { width:15.625% ; max-width:20rem }

    .list41 , .list42 { 
        width:31.6406% ; max-width:40.5rem ; height:9rem ;
        box-sizing:border-box ; padding-left:7rem ;
        border-top:solid 0.2rem #94e850 ; border-bottom:solid 1px rgba(255,255,255,0.15) ;
    } 
    .list41 { left:34.375% }
    .list__title { 
        padding:0 ; padding-left:0.1rem ;
        border:0 ; margin:0 ; width:6.5rem ;
        position:absolute ; left:0 ; top:2rem
    }

    .card11 .card__img::after , .card11:hover .card__img::after {
        opacity:0.8 ;
        background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 60%,rgba(0,0,0,0.7) 100%);
    } 
    .card11:hover .card__img::after { opacity:1 }

    .list__link { line-height:3rem ; padding:0 ; margin:0 ; border:0 }
    .list__link:hover   { text-decoration:underline }
    .list41 .list__link , .list42 ul { 
        padding-left:7rem ; width:100% ; box-sizing:border-box ;
        position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
    } 

    li .list__link , .card11 br { display:block }
    li .list__link { word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis }
    li .list__link::before { top:1.4rem } 
     
    .card11 .card__tag   { font-size:2rem ; line-height:120% ; margin-bottom:1.5rem }
    .card11 .card__title { font-size:3.4rem ; line-height:4.4rem ; margin-bottom:2rem ; letter-spacing:-0.1rem }
    .card11 .card__link  { padding:2rem 3rem }

    .card12 .card__title { font-size:2rem ; line-height:2.8rem } 
    .card12 .card__link  { padding:1.5rem }
 


} 
    
@media print { }