/*공통*/
.con1600 {width: 1600px; margin: 0 auto;}
.con1300 {width: 1300px; margin: 0 auto;}

.c_title h2 {font-size: 18px; font-family: 'Poppins',sans-serif; font-weight: 600; color:#bcc0cf; letter-spacing: 1.8px;}
.c_title h2 span {color:#3f5aab;}
.c_title h1 {font-size:38px; font-weight: 300; color:#222; line-height: 50px; letter-spacing: -1.9px; margin: 20px 0 30px 0;}
.c_title h1 span {font-weight: 700;}
.c_title p {font-size: 14px; font-weight: 300; color: rgba(34, 34, 34, 0.5); line-height: 26px; word-break: keep-all;}

.c_btn {width: 300px; margin-top: 55px;}
.c_btn a {width: 100%; height: 70px; line-height: 70px; border: 1px solid #dfe3ed; text-align: center; display: block; font-family: 'NanumGothic',sans-serif; font-size: 16px; color:#333; transition: all 0.3s;}
.c_btn a span {padding-left: 15px; transition: all 0.3s;}
.c_btn a:hover {border: 1px solid #3f5aab; color: #fff; background: #3f5aab;}
.c_btn a:hover span { padding-left: 20px; color:#fff;}


/*Content CSS*/
#c1_wrap {display: flex; flex-direction: row; overflow: hidden;}
#c1_wrap .c_title {width: 600px; padding-top: 156px;}
#c1_wrap .article {width: 1000px; display: flex; flex-direction: row; }
#c1_wrap .article .box_wrap {width: 250px;}
#c1_wrap .article .box {width: 100%; transition: all 0.3s; padding: 156px 35px 145px 35px; border-right: 1px solid #dfe3ed;}
#c1_wrap .article .box_wrap:first-child {border-left: 1px solid #dfe3ed;}
#c1_wrap .article .box .icon {margin-bottom: 25px;height: 70px; width: 100%; line-height: 70px; position: relative}
#c1_wrap .article .box .icon::after {width: 3px; height: 70px; background: #3f5aab; display: block; position: absolute; top: 0; left: -35px; content: "";}
#c1_wrap .article .box .icon img {vertical-align:middle; transition:transform 500ms}

#c1_wrap .article .box h1 {font-size: 26px; font-weight: 500; color:#222;}
#c1_wrap .article .box p {font-size: 15px; font-weight: 300; color:#888; word-break: keep-all; line-height: 24px; margin-top: 10px;}

#c1_wrap .more_btn {margin-top: 45px;}
#c1_wrap .more_btn a {width: 62px; height: 62px; border: 1px solid #3f5aab; text-align: center; line-height: 62px; display: block; background: url('../img/c_arrow_b.png')no-repeat 50% 48%; transition: all 0.3s;}
#c1_wrap .more_btn a:hover {background: url('../img/c_arrow_w.png')no-repeat 50% 48% #3f5aab;}


#c1_wrap .box:hover {background: #f4f6fd}
#c1_wrap .box:hover .icon img {transform:rotateY(180deg); transition:transform 500ms}


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

}

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

}

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

}