/* common */
#c1_wrap {height:100vh; min-height:720px; display: flex; align-items: center; }
#c1_wrap .c_inner { max-width: 1520px; width: 100%; margin:0 auto; position: relative; padding:0 60px;}
#c1_wrap .c_p {font-size: 17px; font-weight: 300; color:#333; line-height: 30px; word-break: keep-all; }
#c1_wrap .c_title {display: flex; }
#c1_wrap .c_title > div {flex-shrink: 0; margin-right: 50px;}
#c1_wrap .c_title h3 {font-size: 18px; font-weight: 700; color:#0070c0; line-height: 1; margin-bottom: 25px;}
#c1_wrap .c_title h2 {font-size: 65px; font-weight: 700; color:#000; line-height: 1; text-transform: uppercase; }
#c1_wrap .c_title .c_p {padding-top: 45px;}

/* right_line */
#c1_wrap .right_line {width:1px; height: 100%; background: rgba(170,170,170,.3); position: absolute; right: 99px;bottom:0;}

/* c_btn */
#c1_wrap .c_btn a {display: inline-flex; align-items: center; font-size: 18px; font-weight: 500;  color:#000; letter-spacing: -.45px; height: 55px; position: relative; z-index: 1;
padding-right: 34px;}
#c1_wrap .c_btn a::after {content: ''; display: block; width: 55px; height: 100%; border-radius: 50%; background-color: #eef3f5; transition: background-color .3s;
position: absolute; z-index: -1; right:0; top:0;}
#c1_wrap .c_btn a i {display: block; width: 27px; height: 17px; background:url("../img/c_btn_arrow.png") 50%/contain no-repeat; margin-left: 12px; transition: all .4s;}
#c1_wrap .c_btn a:hover i {transform: translateX(15px); background-image:url("../img/c_btn_arrow_w.png");}
#c1_wrap .c_btn a:hover::after {background-color: #0070c0;}

/*Content CSS*/
#c1_wrap {background-color: #fff; position: relative; z-index: 1; overflow: hidden;}
#c1_wrap::after {content: 'P&P'; position: absolute; font-size: 645px; left: 50%; transform: translateX(-10%); bottom: 0; z-index: -1; color:#f2f5f6;
font-weight: 700; line-height: .5;}
#c1_wrap .list {display: flex; justify-content: space-between; margin:45px 0 65px; text-align: center; }
#c1_wrap .list li {flex:1; border-radius: 15px; border:1px solid #ddd; overflow: hidden; padding: 55px 0 100px; margin-right: 40px; background-color: rgba(255,255,255,.5);
position: relative; z-index: 1; transition: border-color .3s;}
#c1_wrap .list li:last-child {margin-right: 0; }
#c1_wrap .list .cover {display: block; width: 100%; height: 100%; position: absolute; left:0; top:0; background-image: linear-gradient(-45deg, #002878, #0092ee);
z-index: -1; transition: opacity .3s; opacity: 0;}
#c1_wrap .list .cover::before {content: ''; display: block; width: 26px; height: 101px; background:url("../img/c1_ptn1.png") 50%/contain no-repeat; position: absolute;
left:33px; top:28px; }
#c1_wrap .list .cover::after {content: ''; display: block; width: 101px; height: 26px; background:url("../img/c1_ptn2.png") 50%/contain no-repeat; position: absolute;
right:34px; bottom:32px; }
#c1_wrap .list i {display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #f7f9fa; position: relative; width: 110px; height: 110px;
margin:0 auto; transition: background-color .3s;}
#c1_wrap .list i img {transition: opacity .3s;}
#c1_wrap .list i img + img {opacity: 0; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); }
#c1_wrap .list h5 {font-size: 20px; font-weight: 400; color:#000; line-height: 1; margin:30px 0 10px; transition: color .3s; }
#c1_wrap .list h4 {font-size: 20px; font-weight: 700; color:#002060; line-height: 1.4; transition: color .3s; text-transform: uppercase;}

/* hover */
#c1_wrap .list li:hover {border-color: transparent;}
#c1_wrap .list li:hover .cover {opacity: 1;}
#c1_wrap .list li:hover i {background-color: rgba(255,255,255,.07);}
#c1_wrap .list li:hover i img {opacity: 0;}
#c1_wrap .list li:hover i img + img {opacity: 1;}
#c1_wrap .list li:hover h5 {color:rgba(255, 255, 255, 0.6);}
#c1_wrap .list li:hover h4 {color:#fff;}


@media screen and (max-width:1620px) {
    #c1_wrap .c_inner {padding: 0 130px 0 60px; }
}

@media screen and (max-width:1520px) {
    /* common */
    #c1_wrap .c_inner {padding: 0 130px 0 50px; }
    @media screen and (min-width:1280px) {
        #c1_wrap .c_title .c_p br {display: none; }
    }

    /* content */
    #c1_wrap::after {font-size: 35vw;}

    #c1_wrap .list li {margin-right: 20px; }

}

@media screen and (max-width:1279px) {
    /* common */
    #c1_wrap {min-height: auto; height: auto; padding: 100px 0;}
    #c1_wrap .c_inner {padding: 0 50px; }
    #c1_wrap .c_title {display: block ; }
    #c1_wrap .c_title > div {margin:0 0 20px;}
    #c1_wrap .c_title .c_p {padding: 0;}
    #c1_wrap .right_line {display: none; }


    /* content */
    #c1_wrap .list li {margin-right:10px; padding: 40px 20px 60px; }

}

@media screen and (max-width: 1024px) {
    /* common */
    #c1_wrap  {padding: 60px 0 ;}
    #c1_wrap .c_inner {padding: 0 30px;}
    #c1_wrap .c_p {font-size: 15px; line-height: 1.6; }
    #c1_wrap .c_title .c_p br {display: none; }
    #c1_wrap .c_title h3 {font-size: 16px; margin-bottom: 20px;}
    #c1_wrap .c_title h2 {font-size: 45px;}


    /* content */
    #c1_wrap {text-align: center;}
    #c1_wrap::after {display: none;}
    #c1_wrap .list {flex-wrap:wrap; margin: 40px 0 50px;}
    #c1_wrap .list li {margin:0; width: calc(50% - 10px); flex:inherit ;}
    #c1_wrap .list li:nth-child(n+3) {margin-top: 20px;}
    #c1_wrap .list h5,
    #c1_wrap .list h4 {font-size: 18px;}
    #c1_wrap .list h5 {margin:20px 0 8px;}



}
@media screen and (max-width: 640px) {
    /* common */
    #c1_wrap  {padding:50px 0 ;}
    #c1_wrap .c_inner {padding: 0 20px;}
    #c1_wrap .c_p {font-size: 13px; }
    #c1_wrap .c_title h3 {font-size: 15px; margin-bottom: 15px;}
    #c1_wrap .c_title h2 {font-size: 35px;}
    #c1_wrap .c_btn a {height: 45px; font-size: 15px; padding-right: 25px;}
    #c1_wrap .c_btn a::after {width: 45px;}


    /* content */
    #c1_wrap .list {flex-wrap:wrap; margin: 40px 0;}
    #c1_wrap .list li {width: calc(50% - 5px);  border-radius: 10px; padding: 30px 15px;}
    #c1_wrap .list li:nth-child(n+3) {margin-top: 10px;}
    #c1_wrap .list i {width: 80px; height: 80px; padding: 5px }
    #c1_wrap .list h5,
    #c1_wrap .list h4 {font-size: 16px;}

    #c1_wrap .list .cover::before {height: 80px;left:15px; top:15px; }
    #c1_wrap .list .cover::after {width:80px; right:15px; bottom:15px; }
}
@media screen and (max-width:480px) {
    #c1_wrap .list li {padding: 20px 15px;}
}