
/* 공통 */
/* .layout { width:1300px; margin:0 auto; }
.se_con { padding:100px 0; } */

.main_title { line-height: 1; }
.main_title .sub { padding:0 0 18px 7px; font-size:17px; color:#006cb7; font-family: 'Montserrat'; text-transform: uppercase; }
.main_title .sub .ico { display: inline-block; position:relative; width:7px; height:7px; margin-right:15px; border-radius: 50%; background:#006cb7; vertical-align: 3px; }
.main_title .sub .ico::before { content:""; position:absolute; left:-4px; top:-4px; width:15px; height:15px; border-radius: 50%;
background:#006cb7; opacity: .4; }
.main_title .txt { font-size:43px; color:#000; font-family: 'NanumSquare'; font-weight: 300; text-transform: uppercase; }

/* .btn_more { display: inline-block; width:135px; padding-bottom: 10px; font-size:15px; color:#006cb7; font-weight: 500;
    transition: all .3s; font-family: 'Montserrat'; background:url('../img/btn_more.png') no-repeat left bottom; }
 .c1_wrap .btn_more { margin-top: 60px; transition: all .5s; }
.c1_wrap .btn_more:hover { transform: translateX(50%); } */
.view_more { font-size:14px; color:#006cb7; font-weight:500; font-family: 'Montserrat';}

.bu_arrow { display: inline-block; position: relative; width: 20px; height: 1px; background: #006cb7; margin:2px 0 0 10px;
    transition: all .3s; }
.bu_arrow:after { content:""; position: absolute; top: -3px; width: 8px; right: 0; height: 1px; background: #006cb7;
    transform: rotate(43deg); transition: all .3s ease; }

#c4_wrap .c_inner { position: relative; width: 1300px; margin:0 auto; }


/*Content CSS*/
#c4_wrap  {position: relative; padding:75px 0 80px; text-align: center; overflow: hidden; background: url('../img/c4_bg.jpg') no-repeat center / cover; }
#c4_wrap .main_title h1 { color:#fff; }

#c4_wrap .list { display: flex; margin-top: 65px; }
#c4_wrap .list > li { display: flex; justify-content: center; }
#c4_wrap .list > li a { display: block; width: 100%; padding:0 80px; border-left: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,0); transition: all .2s ease; line-height: 1; }
#c4_wrap .list > li:last-child a { border-right: 1px solid rgba(255,255,255,.2); }
#c4_wrap .list > li a .icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
width: 100px; height: 100px; margin:0 auto; overflow: hidden; transition: background-color .3s ease; }
#c4_wrap .list > li a .icon  i { color:#fff; font-size:40px; transition: all .5s ease;}

#c4_wrap .list > li:nth-child(1) a { width:325px; }
#c4_wrap .list > li:nth-child(2) a { width:325px; }
#c4_wrap .list > li:nth-child(3) a { width:650px; }

#c4_wrap .list > li a h1 { font-family: 'Montserrat'; font-size:22px; font-weight: 600; color:#fff; margin:0 0 20px;
text-transform: uppercase; }
#c4_wrap .list > li a h2 { margin:6px 8px 0 0; font-size:16px; font-weight:600; color:rgba(255, 255, 255, 0.61);}
#c4_wrap .list > li a p { font-size:16px; font-weight: 300; color:rgba(255, 255, 255, 0.61);  line-height: 28px; word-break: keep-all; }

/*address */
#c4_wrap .list > li a li { display: flex; justify-content: center; }
#c4_wrap .list > li a.adr { padding:0 130px; }
#c4_wrap .list > li a.adr h2 { width:60px; }
#c4_wrap .list > li a li.top { margin-top: 10px; }


/* tel */
#c4_wrap .list > li:first-child a p { width:120px; }


/* hover */
#c4_wrap .list > li a:hover {background-color: rgba(255,255,255,.08); backdrop-filter: blur(4px);}
#c4_wrap .list > li a:hover .icon i {transform: rotateY(180deg); color:#22a4ff; }


@media screen and (max-width: 1350px) {
    #c4_wrap .c_inner { width:100%; padding:0 40px; }

    #c4_wrap .list > li:nth-child(1) a { width:100%; padding:0 40px; }
    #c4_wrap .list > li:nth-child(2) a { width:100%; padding:0 40px; }
    #c4_wrap .list > li:nth-child(3) a { width:100%; padding:0 60px; }

    #c4_wrap .list > li br { display: none; }
}

@media screen and (max-width: 1200px) {
    #c4_wrap .list > li a.adr h2 { width:80px; }
    #c4_wrap .list > li:nth-child(1) a { width:100%; padding:0 30px; }
    #c4_wrap .list > li:nth-child(2) a { width:100%; padding:0 30px; }
    #c4_wrap .list > li:nth-child(3) a { width:100%; padding:0 40px; }
}

@media screen and (max-width: 1024px) {
    #c4_wrap {padding:80px 0 40px; }
    #c4_wrap .c_inner { width:100%; padding:0 30px; }

    #c4_wrap .list { margin-top:20px; flex-direction: column; }
    #c4_wrap .list > li a { border-left:0; border-bottom: 1px solid rgba(255,255,255,.2); }
    #c4_wrap .list > li:last-child a { border-right:0; border-bottom:0; }

    #c4_wrap .list > li a .icon { margin:0; height: auto; justify-content: flex-end; align-items: flex-start;}

    #c4_wrap .list > li:nth-child(1) a { padding:20px 0; }
    #c4_wrap .list > li:nth-child(2) a { padding:20px 0; }
    #c4_wrap .list > li:nth-child(3) a { padding:20px 0; }

    #c4_wrap .list > li a { display: flex; justify-content:center; }
    #c4_wrap .list > li a .icon { width:15%; }
    #c4_wrap .list > li a .m_div { width:85%; padding-left: 30px; display: flex; align-items: flex-start; flex-direction: column; }
    #c4_wrap .list > li a h1 { margin:0 0 10px; }

    #c4_wrap .list > li a.adr { text-align: left; }
    #c4_wrap .list > li a li { justify-content: flex-start; }
    #c4_wrap .list > li a.adr h2 { width:60px; }
}


@media screen and (max-width: 640px) {
    #c4_wrap .c_inner { padding:0 20px; }
    #c4_wrap .main_title .sub { font-size:16px; }
    #c4_wrap .main_title .txt { font-size:33px; }

    #c4_wrap .list > li a .m_div { padding-left: 20px; }
    #c4_wrap .list > li a .icon  i { font-size:30px; }
    #c4_wrap .list > li a.adr h2 { width:110px; }

    #c4_wrap .list > li a h1 { font-size:18px; }
    #c4_wrap .list > li a h2 { font-size:15px; }

    #c4_wrap .list > li a.adr p { letter-spacing: -0.8px; }
}
