@charset "utf-8";
/* (주)한신정보기술 오은영 - 2020.06.03 */

body{position:relative;font-size:15px;line-height:24px;color:#515151; font-family:'NotoKr','Malgun Gothic','맑은 고딕',Dotum,'돋움',Helvetica,AppleSDGothicNeo,sans-serif; font-weight:400;}

body{background-color:#fff; background-repeat:no-repeat; background-position:center top;}

#wrapper{position:relative; min-width:1240px; overflow:hidden;}
.wrap{position:relative;width:1240px;margin:0 auto;}
.skip{overflow:hidden;}

#header{margin-bottom:0;}
#header .wrap{padding-top:34px;}
#header .logo h1{margin-left:48px; text-align:left;}
#header .logo h1 a{display:inline-block; line-height:0; text-align:center;}
#sub_container\ one{background:linear-gradient(#fff 73%, rgba(0, 146, 185, 0.08 )); }
#sub_container\ one .wrap{padding-bottom:190px;}
.contentbox{display:inline-block; position:relative; width: 100%; margin-top: -37px; text-align: center;}
.contentbox .logo{position: relative;}
.contentbox .logo img{position:relative; top:32px;  z-index:1;}

.contentbox .top_box{position: relative; height:357px; padding-top:109px; text-align: center;  }
.contentbox .top_box:before{ display: block;position: absolute; left:50%; top: 0; width: 100vw; height: 357px;
    background-image: url("/site/dangu/images/intro/sub_intro_bg01.png"); background-position: center;
    background-repeat: no-repeat; background-size: cover; transform: translateX(-50%);
}

.contentbox .top_box .title{position: relative;}
.contentbox .top_box .title span{position:relative; width: 380px; font-size:50px; line-height: 45px; letter-spacing: -0.05em; color: #fff;}
.contentbox .top_box .title a:nth-child(2) span{font-size:30px;}

.contentbox .top_box .title span:before{display: block; position: absolute; bottom:-23px; left: 0;
    width: 100%; height: 4px; background-color: #fff;}
.contentbox .top_box .title a:nth-child(2) span:before{bottom:-15px; left:-6px; width: 100%; height: 1px; background-color: #80c9dc;}

.contentbox .top_box .text_box{position: relative; margin-top: 49px;  font-size:20px; line-height: 30px; letter-spacing: -0.06em; color: #fff;}
.contentbox .top_box .text_box em{color: #fff952;}


.contentbox.two .mid_box{position: relative;  margin-top: 80px;}
.contentbox.two .mid_box:before{display: block; position: absolute; bottom: 0; left: 0; width: 100%; height:5px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAAJklEQVQYV2Ocu3D5/+T4SEYGAgCsgBjFcJMIKUaxEp9iDLfhUgwAt3wUBpDJEkIAAAAASUVORK5CYII=");}

.contentbox.two .mid_box .square_box{float:left; position: relative; width:calc((100% - 60px)/2); margin-right: 30px; text-align: center;}
.contentbox.two .mid_box .square_box.two{margin-right: 0; margin-left: 30px;}
.contentbox.two .mid_box .square_box .title{display:inline-block; position: relative; width: 530px; height:125px; padding-top: 54px;
    text-align: center; background-color: #31529d; border-radius:30px 0; z-index: 1;}
.contentbox.two .mid_box .square_box.two .title{background-color: #629f34;}

.contentbox.two .mid_box .square_box .title:before{display: block; position: absolute; top:31px; left:163px; width: 68px; height: 68px;
    background-image: url("/site/dangu/images/intro/sub_intro_icon01.png"); background-repeat: no-repeat;
    background-size: contain;}
.contentbox.two .mid_box .square_box.two .title:before{background-image: url("/site/dangu/images/intro/sub_intro_icon02.png");}

.contentbox.two .mid_box .square_box .title img{padding-left: 90px;}
.contentbox.two .mid_box .square_box .inner{position: relative; top:-75px; width: 590px; height:190px; padding-top:120px;
    border-radius: 30px; background-color: #f1f5fa;  }
.contentbox.two .mid_box .square_box .inner span{position:relative; font-size:22px; line-height: 28px; letter-spacing: -0.05em; color:#343639;  }
.contentbox.two .mid_box .square_box .inner .icon{position:relative; top:-21px; font-size: 0; line-height: 0;
    width:25px; height: 25px; background-image: url("/site/dangu/images/intro/sub_intro_icon04.png");
    background-repeat: no-repeat; background-size: contain;}

.contentbox.two .mid_box .square_box .inner span:nth-child(1){margin-right: 18px;}
.contentbox.two .mid_box .square_box .inner span:nth-child(3){margin-left: 19px;}
.contentbox.two .mid_box .square_box.two .inner span:nth-child(1){margin-right:0;}

.contentbox.third{margin-top: 95px; text-align: center;}
.contentbox.third .text_box{text-align: center;}
.contentbox.third .text_box p{font-size: 24px; line-height: 40px; letter-spacing: -0.05em; color:#3b4a5d;}
.contentbox.third .text_box p em{font-weight: 600; color: #010101;}
.contentbox.third .text_box p em.point{position: relative; color:#1b60bd; }
.contentbox.third .text_box p em.point:before{display: block; position: absolute; bottom: 0; left:0; width:283px; height:11px;
    background-color:#1b60bd; border-radius: 50px; opacity: 0.2; }

.contentbox.third .dot_box{display:inline-block; position:relative; margin-top:30px; position: relative; width:801px; height: 73px; border: 1px dashed #7f7f7f;  }
.contentbox.third .dot_box p{font-size:20px; line-height: 40px; letter-spacing: -0.02em; color:#000000; line-height: 73px;  }
.contentbox.third .dot_box:before{display: block; position: absolute; top: 27px; left:222px; width:17px; height: 21px;
    background-image: url("/site/dangu/images/intro/sub_intro_icon03.png"); background-repeat: no-repeat;
    background-size: contain;}
.contentbox.third .list_box{position: relative; margin-top:80px;}
.contentbox.third .list_box > ul > li{float:left; position: relative; width: calc(100% / 3); height: 180px; padding-left: 175px; text-align: left;}
.contentbox.third .list_box > ul > li:before{display: block; position: absolute; top:35px; left:61px; width: 56px; height: 62px;
    background-image: url("/site/dangu/images/intro/sub_intro_list01.png"); background-repeat: no-repeat;
    background-size: contain; z-index: 1}
.contentbox.third .list_box > ul > li:nth-child(2):before{left:63px; background-image: url("/site/dangu/images/intro/sub_intro_list02.png");}
.contentbox.third .list_box > ul > li:nth-child(3):before{top:48px; background-image: url("/site/dangu/images/intro/sub_intro_list03.png");}
.contentbox.third .list_box > ul > li:nth-child(4):before{top:46px; left:57px; background-image: url("/site/dangu/images/intro/sub_intro_list04.png");}
.contentbox.third .list_box > ul > li:nth-child(5):before{top:55px; left:60px; background-image: url("/site/dangu/images/intro/sub_intro_list05.png");}
.contentbox.third .list_box > ul > li:nth-child(6):before{top:46px; background-image: url("/site/dangu/images/intro/sub_intro_list06.png");}




.contentbox.third .list_box > ul > li:after{display: block; position: absolute; top:5px; left: 20px; width:132px; height:132px;
    border-radius: 100%; background-color: #eaf2fb;}



.contentbox.third .list_box > ul > li .nu{position:relative; left:-157px; width: 40px; height: 40px; background-color:#0092b9;
    font-size: 20px; line-height: 40px; color: #fff; border-radius: 100%; z-index: 1; text-align: center;}
.contentbox.third .list_box > ul > li img{position: relative;}
/*.contentbox.third .list_box > ul > li img{position: relative; top:-5px; left: 54px;}
.contentbox.third .list_box > ul > li:nth-child(1) img{left:40px;}
.contentbox.third .list_box > ul > li:nth-child(3) img{left:63px;}
.contentbox.third .list_box > ul > li:nth-child(4) img{left:65px; top:-4px;}
.contentbox.third .list_box > ul > li:nth-child(5) img{left:36px;}*/

.contentbox.third .list_box > ul > li .txt{font-size: 16px; letter-spacing: -0.05em; color:#62676d;}



.gradation_box{background:linear-gradient(#fff, rgba(0, 146, 185, 0.08 )) fixed; }
#footer .h_logo{position:absolute; bottom:41px; left:calc(50% - 63px);}

/* web */
@media screen and (max-width:1240px){
    #wrapper{min-width: auto;}
    #sub_container\ one .wrap{padding-bottom: 156px;}
    .wrap{max-width:none; width:100%; margin: 0 auto; text-align: center;}
    .contentbox .top_box .text_box{padding: 0 50px;}

    .contentbox.two .mid_box .square_box{width: 50%;}
    .contentbox.two .mid_box .square_box .title{width: 395px;}
    .contentbox.two .mid_box .square_box .inner{display: inline-block; width: 490px;}
    .contentbox.two .mid_box .square_box{margin-right: 0;}
    .contentbox.two .mid_box .square_box.two{margin-left: 0;}

    .contentbox.two .mid_box .square_box .title:before{left: 82px;}

    .contentbox.third .list_box > ul > li{padding-left: 148px;}
    .contentbox.third .list_box > ul > li .nu{left: -133px;}
    .contentbox.third .list_box > ul > li:after{width: 110px; height: 110px;}
    .contentbox.third .list_box > ul > li:before{width: 39px;}
    .contentbox.third .list_box > ul > li:nth-child(2):before{left: 58px;}
    .contentbox.third .list_box > ul > li:nth-child(3):before{left: 58px;}
    .contentbox.third .list_box > ul > li:nth-child(5):before{width: 50px; left: 53px; top: 47px;}
    .contentbox.third .list_box > ul > li:nth-child(6):before{width: 50px; left: 53px; top:39px;}
}

/* tablet */
@media screen and (max-width:1000px){

    #wrapper{min-width: auto;}
    #sub_container\ one .wrap{padding-bottom: 156px;}
    .wrap{max-width:none; width:100%; margin: 0 auto; text-align: center;}

    .contentbox .top_box{padding-top: 83px;}
    .contentbox .top_box .title span{width:277px; font-size: 40px;}
    .contentbox .top_box .title a:nth-child(2) span:before{bottom: -19px; left: -6px;}


    .contentbox.two .mid_box .square_box .title:before{left: 33px; width: 55px;}
    .contentbox.two .mid_box .square_box .title{width: 270px; height: 110px; padding-top:45px }
    .contentbox.two .mid_box .square_box .title img{width: 118px; padding-left: 60px;}

    .contentbox.two .mid_box .square_box .inner{width:90%; height: 215px; padding-top: 90px;}
    .contentbox.two .mid_box .square_box.two .inner{padding-top: 122px;}


    .contentbox.two .mid_box .square_box .inner span{width: 100%;}
    .contentbox.two .mid_box .square_box .inner span:nth-child(1){margin-right: 0;}
    .contentbox.two .mid_box .square_box .inner span:nth-child(3){margin-left: 0;}
    .contentbox.two .mid_box .square_box .inner .icon{top:-11px;}

    .contentbox.third{margin-top: 53px;}
    .contentbox.third .text_box p{font-size: 22px; line-height: 33px;}
    .contentbox.third .list_box > ul > li{width: calc(100% / 2); padding-left: 147px;}
    .contentbox.third .dot_box{width: 700px;}
    .contentbox.third .dot_box:before{left: 169px;}



}
@media screen and (max-width:800px){
    .contentbox .top_box .text_box{line-height: 27px; font-size: 19px;}
}

/* mobile */
@media screen and (max-width:700px){
    .contentbox .top_box .title span{width:181px; font-size:25px}
    .contentbox .top_box .title span:before{bottom: -9px;}
    .contentbox .top_box .title a:nth-child(2) span{font-size: 20px;}
    .contentbox .top_box .title a:nth-child(2) span:before{bottom: -7px;}

    .contentbox .top_box .text_box{font-size: 16px; line-height: 22px;}


    .contentbox.two .mid_box .square_box{width: 100%;}

    .contentbox.two .mid_box .square_box .title{width: 246px; height: 95px; padding-top: 35px;}
    .contentbox.two .mid_box .square_box .title:before{top:24px; width: 46px; }

    .contentbox.two .mid_box .square_box .inner{top:-39px; width: 68%; height: 168px; padding-top: 57px;}
    .contentbox.two .mid_box .square_box.two .inner{padding-top:87px; }

    .contentbox.two .mid_box .square_box .inner span{font-size: 20px;}

    .contentbox.third{margin-top: 40px;}
    .contentbox.third .text_box{padding: 0 40px;}
    .contentbox.third .text_box p{font-size: 20px; line-height: 29px;}
    .contentbox.third .text_box p em.point:before{width:235px; }

    .contentbox.third .dot_box{width:425px;}
    .contentbox.third .dot_box p{font-size: 18px;}
    .contentbox.third .dot_box:before{left: 44px;}

    .contentbox.third .list_box{padding: 0 40px;}
    .contentbox.third .list_box > ul > li{padding-left: 123px;}
    .contentbox.third .list_box > ul > li .nu{left:-109px; width: 35px; height: 35px; font-size: 16px; line-height: 35px;}
    .contentbox.third .list_box > ul > li:after{width: 90px; height: 90px;}
    .contentbox.third .list_box > ul > li:before{left: 50px; width: 34px;}


    .contentbox.third .list_box > ul > li:nth-child(1) img{width: 110px;}
    .contentbox.third .list_box > ul > li:nth-child(2) img{width: 144px;}
    .contentbox.third .list_box > ul > li:nth-child(2):before{left: 49px; top: 30px;}
    .contentbox.third .list_box > ul > li:nth-child(3) img{width: 155px;}
    .contentbox.third .list_box > ul > li:nth-child(3):before{left: 48px; top: 36px;}
    .contentbox.third .list_box > ul > li:nth-child(4) img{width: 165px;}
    .contentbox.third .list_box > ul > li:nth-child(4):before{top: 34px; left: 51px;}
    .contentbox.third .list_box > ul > li:nth-child(4) .txt{margin-left: 35px;}
    .contentbox.third .list_box > ul > li:nth-child(5) img{width: 110px;}
    .contentbox.third .list_box > ul > li:nth-child(5):before{left:43px; top:41px; width: 46px;}
    .contentbox.third .list_box > ul > li:nth-child(6) img{width:140px; }
    .contentbox.third .list_box > ul > li:nth-child(6):before{left:48px; top:33px; width: 43px;}
}

@media screen and (max-width:640px) {
    #sub_container\ one .wrap{padding-bottom: 22px;}
    .contentbox .logo{height: 67px;}
    .contentbox .logo img{top: 21px;}

    .contentbox .top_box:before{display: none;}
    .contentbox .top_box{height:auto; padding:30px 0 45px 0; background-color: #0092b9;}
    .contentbox .top_box .text_box{margin-top: 28px;}

    .contentbox.third .list_box > ul > li .nu{left:-125px;}
    .contentbox.third .list_box > ul > li{width: 100%; height: 120px; padding-left: 134px; text-align: left;}
    .contentbox.third .list_box > ul > li:nth-child(4) .txt{margin-left: 0;}

}

@media screen and (max-width:480px) {
    .contentbox .logo img {width: 300px;}

    .contentbox .top_box .text_box{padding: 0 30px;}
    .contentbox .top_box .text_box em{margin-bottom: 20px;}
    .contentbox .top_box .title span{width:137px; font-size:18px;}
    .contentbox .top_box .title a:nth-child(2) span{font-size: 15px}

    .contentbox.two .mid_box .square_box .title{height: 75px; padding-top: 24px;}
    .contentbox.two .mid_box .square_box .title:before{top:15px; left: 50px; width: 38px;}
    .contentbox.two .mid_box .square_box .title img{width:85px; padding-left: 38px; }

    .contentbox.two .mid_box .square_box .inner{height: 149px; padding-top: 53px;}
    .contentbox.two .mid_box .square_box .inner span{font-size:16px; line-height: 18px;}
    .contentbox.two .mid_box .square_box .inner .icon{top:-10px; width: 18px; height: 18px;}
    .contentbox.two .mid_box .square_box.two .inner{padding-top: 79px;}


    .contentbox.third .text_box p{font-size: 18px; line-height:28px; }
    .contentbox.third .dot_box{height: 60px; width: 350px; margin-top: 15px;}
    .contentbox.third .dot_box p{font-size:16px; line-height: 60px;}
    .contentbox.third .dot_box:before{top:21px; left: 23px;}

    .contentbox.third .list_box{padding-left: 20px;}
    .contentbox.third .list_box > ul > li{height: 116px;}
    .contentbox.third .list_box > ul > li .nu{width: 30px; height: 30px; line-height: 30px;}

    .contentbox.third .list_box > ul > li:nth-child(1) img {width: 100px;}
    .contentbox.third .list_box > ul > li .txt{font-size: 14px;}
    .contentbox.third .list_box > ul > li:nth-child(4) .txt{margin-left: 0;}

    .contentbox.third .list_box > ul > li:before{width: 29px;}
    .contentbox.third .list_box > ul > li:nth-child(1):before{left: 52px;}
    .contentbox.third .list_box > ul > li:nth-child(2):before{left: 51px;}
    .contentbox.third .list_box > ul > li:nth-child(3):before{left: 51px; top: 37px;}
    .contentbox.third .list_box > ul > li:nth-child(4):before{top:36px;}
    .contentbox.third .list_box > ul > li:nth-child(5):before{top:38px; left:47px; width: 38px;}
    .contentbox.third .list_box > ul > li:nth-child(6):before{width: 35px;}


    .contentbox.third .list_box > ul > li:nth-child(2) img {width:126px;}
    .contentbox.third .list_box > ul > li:nth-child(3) img {width: 138px;}
    .contentbox.third .list_box > ul > li:nth-child(4) img {width:147px;}
    .contentbox.third .list_box > ul > li:nth-child(5) img {width:99px;}
    .contentbox.third .list_box > ul > li:nth-child(6) img {width: 126px;}

}




/*sub_container two*/

#sub_container\ two{background:linear-gradient(#fff 83%, rgba(0, 146, 185, 0.08 )); margin-top: -40px; }
#sub_container\ two .wrap{padding-bottom: 150px;}
.sub_introbox{display:inline-block; position:relative; width: 100%; text-align: center;}
.sub_introbox.two{margin-top: 66px}
.sub_introbox .logo{position: relative;}
.sub_introbox .logo img{position:relative; top:32px;  z-index:1;}

.sub_introbox .top_box{position: relative; height:357px; padding-top:109px; text-align: center;  }
.sub_introbox .top_box:before{ display: block;position: absolute; left:50%; top: 0; width: 100vw; height: 357px;
    background-image: url("/site/dangu/images/intro/sub_intro_bg01.png"); background-position: center;
    background-repeat: no-repeat; background-size: cover; transform: translateX(-50%);
}

.sub_introbox .top_box .title{position: relative;}
.sub_introbox .top_box .title span{position:relative; width: 380px; font-size:50px; line-height: 45px; letter-spacing: -0.05em; color: #fff;}
.sub_introbox .top_box .title a:nth-child(1) span{font-size:30px;}

.sub_introbox .top_box .title span:before{display: block; position: absolute; bottom:-23px; left: 0;
    width: 100%; height: 4px; background-color: #fff;}
.sub_introbox .top_box .title a:nth-child(1) span:before{bottom:-15px; left:5px; width: 100%; height: 1px; background-color: #80c9dc;}

.sub_introbox .top_box .text_box{position: relative; margin-top: 49px;  font-size:20px; line-height: 30px; letter-spacing: -0.058em; color: #fff;}
.sub_introbox .top_box .text_box em{color: #fff952;}
.sub_introbox.two{padding: 0 40px;}

@media all and (max-width: 1240px) {
    .sub_introbox .top_box .text_box{padding: 0 50px;}
}
@media all and (max-width: 1000px) {
    .sub_introbox .top_box .title span{width:277px; font-size: 40px;}
    .sub_introbox .top_box .title a:nth-child(1) span:before{bottom: -19px; left:5px;}

}
@media screen and (max-width:800px){
    .sub_introbox .top_box .text_box{line-height: 27px; font-size: 19px;}
}

@media screen and (max-width:640px){
    #sub_container\ two .wrap{padding-bottom: 22px;}
    .sub_introbox .logo{height: 67px;}
    .sub_introbox .logo img{top: 21px;}

    .sub_introbox .top_box:before{display: none;}
    .sub_introbox .top_box{height:auto; padding:30px 0 45px 0; background-color: #0092b9;}
    .sub_introbox .top_box .text_box{margin-top: 28px;}

    .sub_introbox .top_box .title span{width:181px; font-size:25px}
    .sub_introbox .top_box .title span:before{bottom: -9px;}
    .sub_introbox .top_box .title a:nth-child(1) span{font-size: 20px;}
    .sub_introbox .top_box .title a:nth-child(1) span:before{bottom: -7px;}

    .sub_introbox .top_box .text_box{font-size: 16px; line-height: 22px;}

    .sub_introbox.two{margin-top: 30px; padding: 0 20px;}
}

@media screen and (max-width:480px) {
    .sub_introbox .logo img{width: 300px;}
    .sub_introbox .top_box .text_box{padding: 0 30px;}
    .sub_introbox .top_box .text_box em{margin-bottom: 20px;}
    .sub_introbox .top_box .title span{width:137px; font-size:18px;}
    .sub_introbox .top_box .title a:nth-child(1) span{font-size: 15px}
}