/* common */
#c2_wrap .c_inner {width: 100%; max-width: 1400px; padding: 0 20px; margin: 0 auto; }
#c2_wrap .c_title span {font-size:16px; color:#1091d0; font-weight: 700; font-family: 'Play', sans-serif; margin: 0 0 10px; display: block; }

/* font */
#c2_wrap .fs_50 {font-size:30px; font-weight: 700; color:#111; line-height: 1.36; font-family: 'Spoqa Han Sans Neo', 'sans-serif';}
#c2_wrap .fs_18 {font-size: 14px; font-weight: 400; color:#1d1d1f; line-height: 1.65; }
/* btn */
#c2_wrap .c_btn a {display: flex;align-items: center; justify-content: center; width: 100%; height:40px; background-color: transparent;
font-size: 13px; font-weight: 500; color:#fff;  transition: all .3s; text-transform: uppercase;  border:1px solid #f7f7f7; margin-top: 20px;}
#c2_wrap .c_btn a i {margin-left: 10px; position: relative; transition: all .3s; left: 0; top:-1px;}
#c2_wrap .c_btn a:hover {background-color: #1091d0; border-color: #1091d0; }
#c2_wrap .c_btn a:hover i {left: 5px;}

/*Content CSS*/
#c2_wrap {background:url("../img/c2_bg.jpg") 20% 0%/cover no-repeat; overflow: hidden; padding:50px 0; text-align: center;}
#c2_wrap .c_title h2,
#c2_wrap .c_title span {color:#fff;}
#c2_wrap .top {display: block; }


#c2_wrap .list {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 30px; }
#c2_wrap .list li {width:100%; position: relative; z-index: 1; transition: width .5s;}
#c2_wrap .list li + li {margin-top: 15px;}
#c2_wrap .list .wrap {display: block; width: 100%; background:url("../img/c2_ptn.jpg") 50% repeat #fff; border-radius: 5px; height: 100%;position: relative;
transition: width .4s; cursor: pointer; height:150px;   box-shadow: 5.1px 6.1px 38px 0 rgba(0, 0, 0, 0.33);}
#c2_wrap .list .img {display: flex; align-items:center; justify-content: center; height:100%;  width: 100%; overflow: hidden; border-radius: 5px; position: relative;}
#c2_wrap .list .img img {width: 100%; height: 100%; max-width: inherit; opacity:1; transition: all .4s;object-fit: cover;}
#c2_wrap .list .img::before {content: ''; display: block; height: 100%; width: 100%; left: 0; top:0;  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,.5) 100%);
position: absolute;}
#c2_wrap .list .txt {padding:15px; text-align: left; width: 100%; overflow: hidden; position: absolute; left: 0; bottom: 0; display: flex;
flex-direction: column; align-items: flex-start;}
#c2_wrap .list .txt h4 {font-size: 16px; font-weight: 500; color:#fff; line-height: 1.3; text-transform: uppercase;  transition: color .3s;}
/* #c2_wrap .list .txt h4 span {writing-mode: lr; line-height: .9;  text-align: center;} */
#c2_wrap .list .txt br {display: none;}
#c2_wrap .list .txt p {color:#fff; line-height: 1.55; display: block; margin-top:5px; font-size: 12px; letter-spacing: -.5px;}
#c2_wrap .list .arrow {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; position: absolute;
background:#1091d0; right: 15px; top: 15px; opacity:1; transition: all .3s; }
#c2_wrap .list .arrow:hover {background-color: #193D9A; }
#c2_wrap .list .arrow img {width: 7px;}
#c2_wrap .list i {font-size: 30px; font-weight:500; color:rgba(17, 17, 17, 0.4); position: absolute; top:30px; text-align: center; left: 0; width: 100%;
transition: opacity .3s; opacity: 1; font-style: normal; font-family: 'EsaManru';}
@font-face {
    font-family: 'EsaManru';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/gonggames/EsaManruMedium.ttf') format("truetype");
    font-display: swap;
}

/* active */
/* #c2_wrap .list li.active {width: 720px; margin-right: 25px; }
#c2_wrap .list li.active:last-child {margin:0;}
#c2_wrap .list li.active {z-index: 2;}
#c2_wrap .list li.active .img img {opacity: 1;}
#c2_wrap .list li.active .txt {text-align: left; padding: 0 45px 35px; display: block; }
#c2_wrap .list li.active .txt h4 {writing-mode:lr; font-size: 22px; color:#fff; font-weight: 700; letter-spacing: 0;}
#c2_wrap .list li.active .txt h4 span br {display: none; }
#c2_wrap .list li.active .txt p {display: block; }
#c2_wrap .list li.active .arrow {opacity: 1; right: -29px; pointer-events: auto;}
#c2_wrap .list li.active i {opacity: 0;} */

#c2_wrap .contr {display: flex; align-items: center; margin-top: 35px; }
/* paging number */
#c2_wrap .num_wr {display: flex; align-items: center; position: relative; margin-left: 35px; line-height: 1; }
#c2_wrap .num_wr span { font-size: 22px; font-weight:700; color:#fff; display: block; font-family: 'Play', sans-serif;}
#c2_wrap .num_wr i.slash { margin: 0 1px; position: relative; top:-0; font-style: normal;font-size: 22px; font-weight:700; color:#fff; font-family: 'Play', sans-serif;}
#c2_wrap .num_wr span.current_num {font-weight: 700;   text-align: right; }

/* progress */
#c2_wrap .bar_wr {width:100%; max-width:100%; height: 4px; background:rgba(255,255,255,.2); position: relative; }
#c2_wrap .redbar { width:20%; height:4px; opacity: 1; position:absolute; left:0; top:-0; z-index:10; transition-property: width; transition-duration:.3s; transition-timing-function: linear; background-color: #fff;}




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

}