/* 공통  */
#c1_wrap .c_inner {width: 100%; margin:0 auto; }
#c1_wrap .c_btn {    width: 300px; height: 60px; display: flex; align-items: center; justify-content: center; background: transparent; color: #333; font-size: 16px;
font-weight: 300; overflow: hidden; z-index: 1; position: relative; border:1px solid #ddd;  transition: all .5s ease; }
/* #c1_wrap .c_btn::before {content: ""; z-index: -1; position: absolute; background: #0053a5; transition: all .5s; left: 0; top: 0; width: 0; height: 100%;} */
/*  btn_arrow */
#c1_wrap .btn_arrow {display: block; width: 24px; height: 1px; position: relative; background: #333; margin-left: 20px; transition: all .5s ease; top:2px; left:0;}
#c1_wrap .btn_arrow::after {content: ''; position: absolute; display: block; width: 8px;height: 1px;background: #333;right: 0;transform: rotate(43deg);top: -3px;
transition: all .5s ease;}
/* c_btn - hover */
#c1_wrap .c_btn:active {border-color: #0053a5; color:#fff; background: #0053a5; }
/* #c1_wrap .c_btn:hover::before {width:100%;} */
#c1_wrap .c_btn:active .btn_arrow, #c1_wrap .c_btn:active .btn_arrow::after {background: #fff; }

/*Content CSS*/
#c1_wrap {background: #fff; padding: 50px 20px 0;}
#c1_wrap .c_inner { }
#c1_wrap .left {width: 100%; text-align: center; margin-bottom: 30px;}
#c1_wrap .right {width: 100%; }
/* left  */
#c1_wrap .left h2 {font-size:14px; font-weight: 600; color:#0053a5; letter-spacing: 5px; font-family: 'Montserrat'; text-transform: uppercase; }
#c1_wrap .left h1 {font-size: 25px ; font-weight: 600; color:#333; line-height: 45px; font-family: 'NanumSquare',sans-serif; margin:10px 0 15px; word-break: keep-all; }
#c1_wrap .left h1 span {font-weight: 800; color:#0053a5; position: relative; z-index: 1;}
#c1_wrap .left h1 span::after {content: ''; display: block; width: 100%; height: 15px; background: rgba(0,83,165,0.07); z-index: -1; position: absolute; left:0; bottom: -3px; }
#c1_wrap .left p {font-size:14px; font-weight: 300; color:#666; line-height: 28px; word-break: keep-all; letter-spacing: -0.5px}
#c1_wrap .left .c_btn {margin: 25px auto 0; width: 100%; max-width: 450px;}
/* right */
#c1_wrap .right ul {width: 100%; }
#c1_wrap .right ul li {width: 100%; border-top: 1px solid #ddd;}
#c1_wrap .right ul li a {display: block; width: 100%; padding: 30px 0; display: flex; position: relative; align-items: center;}
#c1_wrap .right ul li h2 {font-size:24px; font-weight: 700; color:#ddd; font-family: 'Montserrat'; transition: color .4s ease; position: absolute; top: 0; right: 0;}
#c1_wrap .right ul li .icon {width: 100px; height: 100px; background: #fff; border:1px solid #ddd; transition: all .4s ease;  border-radius: 50%; display: flex ;align-items: center; justify-content: center; margin:0; position: relative;}
#c1_wrap .right ul li .icon::after {content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; position: absolute; left:0; top:0; border:4px solid #0053a5; opacity: 0; transition: opacity .4s ease; }
#c1_wrap .right ul li a .icon img {transition: transform 500ms; }
#c1_wrap .right ul li .txt {width: calc(100% - 100px); padding-left: 20px;}
#c1_wrap .right ul li h1 {font-size:18px; font-weight: 800; color:#0053a5; font-family: 'NanumSquare',sans-serif; }
#c1_wrap .right ul li p {font-size:14px; font-weight: 300; color:#666; line-height: 24px; letter-spacing: -.42px; margin:10px 0 0; word-break: keep-all;}
#c1_wrap .right ul li span {display: block ; width: 150px; height: 40px; line-height: 40px; transition: all .4s ease; border-top:1px solid #ddd; border-bottom: 1px solid #ddd;
font-size:12px; font-weight: 400; color:#bcbcbc; font-family: 'Montserrat'; text-align: center;}
/* hover */
#c1_wrap .right ul li a:active h2 {color: #0053a5;}
#c1_wrap .right ul li a:active .icon {border-color: #0053a5; }
#c1_wrap .right ul li a:active .icon img {transform: rotateY(180deg);}
#c1_wrap .right ul li a:active .icon::after {opacity: 1; }
#c1_wrap .right ul li a:active span {background: #0053a5; border-color: #0053a5; color:#fff; }






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

}

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

}

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

}