/*공통css*/
.c_wrap {width: 100%; padding: 100px 0;}
.con1300 { width: 100%; max-width: 1300px; margin: 0 auto;}

/*Content CSS*/
#c2_wrap {position: relative; z-index: 5;display: flex; flex-direction: row;}
#c2_wrap .box {width: 25%; }
#c2_wrap .box a {width: 100%; display: block; position: relative;}
#c2_wrap .box a .img {overflow: hidden;}
#c2_wrap .box a .img img { transition: all 0.3s; transform: scale(1); width: 100%}
#c2_wrap .box a .cover {width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; text-align: center;}
#c2_wrap .box a .cover h2 { font-family: 'NanumSquare',sans-serif; font-size: 17px; color:#ffa800; margin-bottom: 20px; font-weight: 400; }
#c2_wrap .box a .cover h1 { font-family: 'NanumSquare',sans-serif; font-size: 36px; color:#fff; word-wrap: keep-all; font-weight: 600;}
#c2_wrap .box a .cover .more {position: absolute; top: 45px; right: 49px;}
#c2_wrap .box a .cover .more img {transition: all 0.3s; transform: rotate(0);}

#c2_wrap .box a:hover .img img {transform: scale(1.1);}
#c2_wrap .box a:hover .cover {background: rgba(255,168,0,0.83);}
#c2_wrap .box a:hover .cover h2 {color:rgba(255, 255, 255, 0.66)}
#c2_wrap .box a:hover .cover .more img {transform: rotate(90deg);}

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

}

@media screen and (max-width:1300px) {
    #c2_wrap .box a .cover h1 {font-size: 30px;}
}


@media screen and (max-width:1200px) {
    #c2_wrap .box a .cover h2 {font-size: 12px;}
    #c2_wrap .box a .cover h1 {font-size: 26px;}

}

@media screen and (max-width: 960px) {
    #c2_wrap {display: flex; flex-direction: row; flex-wrap: wrap;}
    #c2_wrap .box {width: 50%; }

}

@media screen and (max-width: 640px) {
    #c2_wrap .box a .cover .more {width: 35px; height: 35px; overflow: hidden; position: absolute; top: 25px; right: 29px;}
    #c2_wrap .box a .cover .more img {position: relative; top: -12px; left: -12px;}


}