@charset "utf-8";

* {margin: 0; padding: 0;}
li {list-style: none;}
a {text-decoration: none; color: inherit;}

body {font-family: 'Noto Sans KR', sans-serif; color: #555;}
div {box-sizing: border-box;}
.Montserrat {font-family: 'Montserrat', sans-serif;}
.Poppins {font-family: 'Poppins', sans-serif;}
/* 
font-family: 'Montserrat', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Poppins', sans-serif;
 */

/* 전체내용 */
.wrap {width: 100%; overflow: hidden; max-width: 2000px; margin: 0 auto;}

/* 메인 */
main {width: 100%;}
    /* 인트로 */
    .main_intro {padding: 0 15rem; height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: no-repeat center center / cover; background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)), url(../img/integration_intro_bg1.jpg); color: #fff;}
    .main_intro h2 {font-size: 50px;}
    /* 서브메뉴 */
    .sub_menu {padding: 0 15rem; background-color: #fff;}
    .sub_menu ul {display: flex; width: 100%;}
    .sub_menu ul li {width: calc(100% / 4); height: 60px; text-align: center; line-height: 60px; border-bottom: 2px solid #ddd; color: #ddd; cursor: pointer;}
    .sub_menu ul li.on {color: #2D91FF; border-bottom: 2px solid #2D91FF; font-weight: bold;}
    .sub_menu ul li a {display: block; width: 100%; height: 100%;}
    /* SI 사업부 */
    .system .txt {padding: 9rem 15rem 16rem; text-align: center;}
    .system .txt p.small {font-size: 12px; width: 200px; border-bottom: 5px solid #11397C; margin: 0 auto; padding-bottom: 10px;
    }
    .system .txt h3 {font-size: 40px; color: #999; margin-top: 5px; margin-bottom: 60px;}
    .system .explane_wrap {height: 550px; background: url(../img/bussiness_explane_bg.jpg) no-repeat center center / cover; padding: 0 15rem;}
    .system .explane_wrap .explane {transform: translate(0, -30%);}
    .system .explane_wrap .explane .content {display: flex; height: 450px; }
    .system .explane_wrap .explane .content .prev {width: 12%; display: flex; align-items: center; cursor: pointer;}
    .system .explane_wrap .explane .content .prev .circle {width: 60px; height: 60px; border-radius: 50%; background-color:  rgba(255, 255, 255, .5); transition: all .5s;}
    .system .explane_wrap .explane .content .prev:hover .circle {background-color: #11397C;}
    .system .explane_wrap .explane .content .prev .arrow_left {transform: translate(-35px, 0); transition: all .5s;}
    .system .explane_wrap .explane .content .prev:hover .arrow_left {transform: translate(-85px, 0);}

    .system .explane_wrap .explane .content .cont {width: 76%; background-color: #ddd; display: flex; box-shadow: 0 0 10px #999; display: none;}
    .system .explane_wrap .explane .content .cont.show {display: flex;}
    .system .explane_wrap .explane .content .cont .img {background: no-repeat center center / cover; width: 50%; height: 100%;}
    .system .explane_wrap .explane .content .cont1 .img {background-image: url(../img/mainten.jpg);}
    .system .explane_wrap .explane .content .cont2 .img {background-image: url(../img/build.jpg);}
    .system .explane_wrap .explane .content .cont3 .img {background-image: url(../img/it.jpg);}
    .system .explane_wrap .explane .content .cont .cont_txt {width: 50%; height: 100%; background-color: #fff; padding-left: 5rem; display: flex; flex-direction: column; justify-content: center;}
    .system .explane_wrap .explane .content .cont .cont_txt p.Montserrat {color: #11397C}
    .system .explane_wrap .explane .content .cont .cont_txt h3 {font-size: 40px; margin: 10px 0 30px;}
    .system .explane_wrap .explane .content .cont .cont_txt .button {width: 230px; height: 60px; background-color: #11397C; margin-top: 40px; cursor: pointer; transition: all .5s;}
    .system .explane_wrap .explane .content .cont .cont_txt .button a {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
    .system .explane_wrap .explane .content .cont .cont_txt .button p.Montserrat {color: #fff; margin-right: 15px;}
    .system .explane_wrap .explane .content .cont .cont_txt .button img {width: 40px;}
    .system .explane_wrap .explane .content .cont .cont_txt .button:hover {background-color: #2D91FF;}

    .system .explane_wrap .explane .content .next {width: 12%; display: flex; align-items: center; justify-content: flex-end; cursor: pointer;}
    .system .explane_wrap .explane .content .next .circle {width: 60px; height: 60px; border-radius: 50%; background-color:  rgba(255, 255, 255, .5); transition: all .5s;}
    .system .explane_wrap .explane .content .next:hover .circle {background-color: #11397C;}
    .system .explane_wrap .explane .content .next .arrow_right {transform: translate(35px, 0); transition: all .5s;}
    .system .explane_wrap .explane .content .next:hover .arrow_right {transform: translate(85px, 0);}

    .system .explane_wrap .explane .pager {display: flex; justify-content: center; color: #fff; margin-top: 20px;}
    .system .explane_wrap .explane .pager .slash {margin: 0 15px;}

    @media screen and (max-width: 1600px) {
        .main_intro {padding:  0 11rem;}

        .sub_menu {padding: 0 11rem;}
        
        .system .txt {padding: 9rem 11rem 16rem;}
        .system .explane_wrap {padding:  0 11rem;}
        .system .explane_wrap .explane .content .cont {width: 70%;}
        .system .explane_wrap .explane .content .prev {width: 15%;}
        .system .explane_wrap .explane .content .next {width: 15%;}
        .system .explane_wrap .explane .content .cont .cont_txt {padding-left: 3rem;}
        .system .explane_wrap .explane .content .cont .cont_txt h3 {font-size: 36px;}
    }
    
    @media screen and (max-width: 1400px) {
        .system .txt h3 {font-size: 32px;}
        .system .explane_wrap .explane .content .cont .cont_txt h3 {font-size: 32px;}
    
        body {font-size: .9rem;}
    }
    
    @media screen and (max-width: 1250px) {
        .main_intro {padding: 0 8rem; height: 400px;}
        
        .sub_menu {padding: 0 8rem;}
        
        .system .txt {padding: 4rem 8rem;}
        .system .explane_wrap {padding: 0 8rem; height: auto; background: none;}
        .system .explane_wrap .explane {transform: translate(0,0);}
        .system .explane_wrap .explane .content {height: auto; display: block;}
        .system .explane_wrap .explane .content .cont {width: 100%; display: block; height: 300px; margin-bottom: 4rem;}
        .system .explane_wrap .explane .content .cont.show {display: block;}
        .system .explane_wrap .explane .content .cont1 .img {float: left;}
        .system .explane_wrap .explane .content .cont2 .img {float: right;}
        .system .explane_wrap .explane .content .cont3 .img {float: left;}
        .system .explane_wrap .explane .content .cont4 .img {float: right;}
        .system .explane_wrap .explane .content .prev {display: none;}
        .system .explane_wrap .explane .content .next {display: none;}
        .system .explane_wrap .explane .pager {display: none;}
        .system .explane_wrap .explane .content .cont .cont_txt {padding-left: 2rem;}
        .system .explane_wrap .explane .content .cont .cont_txt h3 {font-size: 30px;}
        .system .explane_wrap .explane .content .cont .cont_txt .button {width: 180px; height: 50px;margin-top: 30px;}
    }
    
    @media screen and (max-width: 1000px) {
    
        .main_intro {padding: 0 3rem; height: 300px;}
        .main_intro h2 {font-size: 40px;}
    
        .sub_menu {padding: 0 3rem;}
        .sub_menu ul li {height: 50px; line-height: 50px;}
    
        .system .txt {padding: 3rem;}
        .system .txt h3{font-size: 25px; margin-bottom: 30px;}
        .system .explane_wrap {padding: 0 3rem;}
        .system .explane_wrap .explane .content .cont {margin-bottom: 3rem; height: 250px;}
        .system .explane_wrap .explane .content .cont .cont_txt h3 {font-size: 22px;}
    
        body {font-size: .8rem;}
    }
    
    @media screen and (max-width: 640px) {
        .main_intro {height: 200px; padding: 1rem;}
        .main_intro h2 {font-size: 30px;}
    
        .introduce .img {height: 150px; }
        .introduce .txt {padding-left: 3rem;}
    
        .system .explane_wrap .explane .content .cont {height: auto;}
        .system .explane_wrap .explane .content .cont .img {height: 200px;}
        .system .explane_wrap .explane .content .cont1 .img {float: none; width: 100%;}
        .system .explane_wrap .explane .content .cont2 .img {float: none; width: 100%;}
        .system .explane_wrap .explane .content .cont3 .img {float: none; width: 100%;}
        .system .explane_wrap .explane .content .cont4 .img {float: none; width: 100%;}
        .system .explane_wrap .explane .content .cont .cont_txt {width: 100%; padding: 1rem;}
        .system .explane_wrap .explane .content .cont .cont_txt .button {display: none;}
    }
    
    @media screen and (max-width: 440px) {
        .main_intro {height: 150px;}
        .main_intro h2 {font-size: 25px;}
    
        .sub_menu {padding: 0;}
        .sub_menu ul li {height: 40px; line-height: 40px;}
    
        .system .txt {padding: 2rem 1rem;}
        .system .txt h3 {font-size: 20px; margin-bottom: 20px;}
        .system .txt p.small {font-size: 10px; border-bottom: 2px solid #11397C;}
    
        .system .explane_wrap {padding: 0 1rem;}
        .system .explane_wrap .explane {width: 90%; margin: 0 auto;}
        .system .explane_wrap .explane .content .cont .img {height: 150px;}
        .system .explane_wrap .explane .content .cont .cont_txt h3 {font-size: 20px; margin: 10px 0;}
    
        body {font-size: .7rem;}
    }