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

#wrapper:before {display: none;}


body{position:relative;font-size:15px;line-height:24px;color:#515151; font-family:'NotoKr','Malgun Gothic','맑은 고딕',Dotum,'돋움',Helvetica,AppleSDGothicNeo,sans-serif; font-weight:400;}
#wrapper{position:relative; min-width:1240px; overflow:hidden;}
.wrap{position:relative;width:1240px;margin:0 auto;}
.skip{overflow:hidden;}

@media screen and (max-width:1240px){
    #wrapper{min-width:auto;}
    .wrap{width:auto;}
}


.visual .visual_list, .visual .slick-list, .visual .slick-track, .visual .slick-slide, .visual .slick-slide > div, .visual .visual_item, .visual .visual_img {height:100%;}
.visual .visual_list .visual_item .visual_img{background-position:center top; background-repeat:no-repeat; height:100%; overflow: hidden;}

.visual{position:relative; height:1080px;}
.visual .visual_title{position:absolute; top:168px; left:calc(50% - 592px); z-index:20; width:800px; text-align:left;}
.visual .visual_title .comment{margin-top:44px; color: rgba(255,255,255,0.8); font-size:20px; line-height:32px; letter-spacing:-0.04em;}
.visual .visual_list{position:absolute; top:0; left:0; width:100%; height:100%; z-index:10;}


.visual .number_list{position:absolute; top:157px; left:0;}
.visual .number_item{font-size:13px; line-height:15px;}

.visual .visual_list .name{position: relative; width: 100%;}
.visual .visual_list .name p{position:absolute; top:990px; right: 10%; width:180px; height: 40px;
    background-color:#fff; color:#000; font-size:16px; line-height:34px; letter-spacing:-0.025em; text-decoration:none; opacity: 0.75; text-align: center;}

.visual .visual_dot{display:inline-block; position:absolute; top:156px; left:calc(50% - 584px); width:42px; height:18px;
    font-size: 13px; line-height: 15px; color: #c9dff2; z-index: 23;}

.visual .visual_dot:before{display: block; position: absolute; bottom:-9px; left: 0; width:98px; height: 1px; background-color: #fff; opacity: 0.45;}

.visual .visual_dot ul{position:relative;}

.visual .visual_dot li{float: left;}
.visual .visual_dot li:nth-child(1) {margin-right: 11px;}
.visual .visual_dot li:nth-child(1).slick-active{position:relative; color: #fff;}
.visual .visual_dot li:nth-child(1).slick-active:before{display: block; position: absolute; top:-3px; left:6px; width:3px; height: 3px; background-color: #fff; }
.visual .visual_dot li:nth-child(2).slick-active{color: #fff;}
.visual .visual_dot li:nth-child(2).slick-active:before{display: block; position: absolute; top:-3px; left:33px; width:3px; height: 3px; background-color: #fff; }
.visual .visual_dot li.slick-active{display:block;}

.visual .visual_control{position:absolute; top:157px; left:calc(50% - 533px); width:60px; height:30px;}
.visual .visual_control button{position:relative; font-size:0; line-height:0; vertical-align:middle; z-index:10;}
.visual .visual_control .visual_prev{float:left; width:19px; height:19px; background: url("/site/dangu/images/intro/main_intro01.png") 0 no-repeat;}
.visual .visual_control .visual_auto{float:left; width:19px; height:19px; background: url("/site/dangu/images/intro/main_intro02.png") 0 no-repeat;}
.visual .visual_control .visual_next{float:left; width:19px; height:19px; background: url("/site/dangu/images/intro/main_intro03.png") 0 no-repeat;}



.visual .txt_box{position:relative; top:180px; width:1240px;margin:0 auto; z-index: 10;}

.visual .txt_box .left_box{display:inline-block; position:relative; width: 55%; margin-left: 32px; padding-top: 40px;}
.visual .txt_box .left_box .title{margin-bottom:31px; line-height:35px; color:#fff; font-weight:100; font-size:28px; letter-spacing:-0.03em;}
.visual .txt_box .left_box .sub_title{line-height:58px; color:#fff; font-weight:100; font-size:48px; letter-spacing:-0.05em;}
.visual .txt_box .left_box .sub_title em{display:inline; font-weight: 600;}
.visual .txt_box .left_box .sub_title em.yel{color:#fdff46;}

.visual .txt_box .left_box .button_box{margin-top: 45px;}
.visual .txt_box .left_box .button_box .button{display:table; position: relative; float: left; width: 300px; height: 65px; margin-right: 10px;
    box-shadow: 5px 8px 27px 0px rgba(0, 0, 0, 0.37);
    text-align: center; vertical-align: middle; border-radius: 5px;}
.visual .txt_box .left_box .button_box .button:before{display: block; position: absolute; top:0; left: 0; width: 300px; height: 65px; background-color:#2fa9b7;
    opacity: 0.68; border-radius: 5px;}
.visual .txt_box .left_box .button_box .button.two{margin-right:0;}
.visual .txt_box .left_box .button_box .button.two:before{background-color:#0b0e7b; opacity: 0.68;}
.visual .txt_box .left_box .button_box .button .btn_box{display:table-cell; position:relative; padding-left:25px; font-size:18px; letter-spacing:-0.05em; color:#fff; line-height:22px; vertical-align:middle; text-shadow: 0 0 4px rgba(0, 0, 0, 0.25); z-index: 1; text-align: left;}
.visual .txt_box .left_box .button_box .button .btn_box:before{display: block; position: absolute; top:23px; right:23px; width:19px; height: 19px;
    background-image: url("/site/dangu/images/intro/main_intro_icon01.png"); background-repeat: no-repeat; }
.visual .txt_box .left_box .button_box .button .btn_box:after{display: block; position: absolute; top:0; right:64px; width: 1px; height: 100%;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAEUlEQVQYV2O4//d3AwOYgAMAZWUGr1WCyU0AAAAASUVORK5CYII=");}
.visual .txt_box .left_box .button_box .button .btn_box em{}
.visual .txt_box .left_box .button_box .button .btn_box span{font-size:15px;}

.visual .txt_box .left_box .button_box .button:hover:before{opacity: 1;}
/*.visual .txt_box .left_box .button_box .button .btn_box:hover em{border-bottom: 1px solid #fff;}*/
.visual .txt_box .left_box .button_box .button .btn_box br{display: none;}




.visual .txt_box .right_box{display:inline-block; position: relative; top: -55px; width: 41%; margin-left:0; text-align: right; }


.visual .txt_box .right_box .op_box a{text-decoration: none;}
.visual .txt_box .right_box .op_box{display:inline-block; position: relative; width:342px; height:520px; margin-right: 83px;
    background-color: #fff; border-radius:35px 0 35px 0; box-shadow: 5px 8px 30px 0px rgba(0, 0, 0, 0.55); }
.visual .txt_box .right_box .op_box .sec{position: relative; width: 342px; height: 260px; text-align: center;}
.visual .txt_box .right_box .op_box .sec:before{display: block; position: absolute; top:66px; left:131px; width:77px; height: 76px;
    background-image: url("/site/dangu/images/intro/main_intro_off_icon01.png"); background-repeat: no-repeat;
    background-size: contain;}
.visual .txt_box .right_box .op_box .sec.two:before{top:18px; left: 139px; width:61px; height:96px; background-image: url("/site/dangu/images/intro/main_intro_off_icon02.png"); }
.visual .txt_box .right_box .op_box .sec p{padding-top:160px; font-size: 26px; line-height: 40px; letter-spacing: -0.05em; color:#000c4a; font-weight: 600; }
.visual .txt_box .right_box .op_box .sec.two p{padding-top:131px;}
.visual .txt_box .right_box .op_box .sec:after{display: block; position: absolute; bottom:20px; left: 147px; width:46px; height:34px;
    background-image: url("/site/dangu/images/intro/main_intro_icon02.png"); background-repeat: no-repeat;
    background-size: contain;}
.visual .txt_box .right_box .op_box .sec.two:after{bottom:50px;}
.visual .txt_box .right_box .op_box:before{display: block; position: absolute; top: -129px; left:50%;
    width: 1px; height:1080px; background-color:#fff; opacity: 0.4; }


.visual .txt_box .right_box .op_box .sec:hover:before{ background-image: url("/site/dangu/images/intro/main_intro_on_icon01.png");}
.visual .txt_box .right_box .op_box .sec.two:hover:before{ background-image: url("/site/dangu/images/intro/main_intro_on_icon02.png");}
.visual .txt_box .right_box .op_box .sec p:hover{color:#00848f;}
.visual .txt_box .right_box .op_box .sec:hover:after{ background-image: url("/site/dangu/images/intro/main_intro_icon03.png");}


@media screen and (max-width:1350px){
    .visual .visual_list .name p{right: 3%;}
}
@media screen and (max-width:1240px){
    .visual .txt_box .left_box{width: 52%;}
    .visual .visual_list .name p{right: 0;}
    .visual .visual_dot{left:2.2%;}
    .visual .visual_control{left: 7%;}


    .visual .txt_box .right_box{text-align: left;}
    .visual .txt_box .right_box .op_box {width: 270px;}
    .visual .txt_box .right_box .op_box  .sec{width: 280px;}
    .visual .txt_box .right_box .op_box  .sec:before{left:95px;}
    .visual .txt_box .right_box .op_box  .sec:after{left:111px;}
    .visual .txt_box .right_box .op_box  .sec.two:before{left:107px;}

    .visual .txt_box .right_box .op_box {margin-right: 52px;}

}

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

    #wrapper{min-width: auto;}
    .visual .visual_list .name p{top:1040px; right: 0;}
    .visual .visual_control{left: 50%; top: 75px;}

    .visual .txt_box{max-width:none; top:145px; width:100%; margin: 0 auto; text-align: center;}
    .visual .txt_box .left_box{width: 100%; margin-left: 0; padding-top: 0;}
    .visual .txt_box .left_box .title{font-size: 18px; line-height: 35px; letter-spacing: -0.03em;}
    .visual .txt_box .left_box .title br{display: none;}

    .visual .txt_box .left_box .sub_title{font-size:38px; line-height: 45px; letter-spacing: -0.05em; }


    .visual .txt_box .left_box .textbox{margin-bottom: 30px; }
    .visual .txt_box .left_box .button_box{margin-bottom: 30px; margin-top:30px;}

    .visual .txt_box .left_box .button_box .button{width:270px;}
    .visual .txt_box .left_box .button_box .button:before{width:270px;}
    .visual .txt_box .left_box .button_box .button .btn_box{padding-left: 19px; font-size: 16px;}


    .visual .txt_box .right_box{top:0; width: 100%; text-align: center;}
    .visual .txt_box .right_box .op_box:before{display: block; position: absolute; top: 0; left: 0; width: 550px; height: 160px; background-color: #fff;
        opacity: 0.7; border-radius: 35px 0 35px 0;}
    .visual .txt_box .right_box .op_box{width:550px; height:160px; margin-right: 0; background-color:transparent;}
    .visual .txt_box .right_box .op_box .sec{width: 275px; height: 160px;}

    .visual .txt_box .right_box .op_box a{float: left;}
    .visual .txt_box .right_box .op_box .sec:before{top:53px; left:49px; width: 62px;}
    .visual .txt_box .right_box .op_box .sec.two:before{top:36px; left:52px; width: 49px;}
    .visual .txt_box .right_box .op_box .sec p{padding-top:60px; padding-left: 129px; font-size: 20px; line-height: 32px;}
    .visual .txt_box .right_box .op_box .sec.two p{padding-top: 58px; padding-left: 116px;}


    .visual .txt_box .right_box .op_box .sec:after{left:129px; bottom:32px; width: 38px;}
    .visual .txt_box .right_box .op_box .sec.two:after{left: 136px; bottom: 32px;}


    .visual .visual_dot{top: 74px; left: calc(50% - 50px);}
}

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

    .visual .txt_box{position: relative; top: 99px;}
    .visual .visual_dot{top: 45px;}
    .visual .visual_control{top: 45px;}

    .visual .txt_box .left_box .title{margin-bottom:22px; font-size: 14px; line-height: 20px;}
    .visual .txt_box .left_box .title br{display: inherit;}
    .visual .txt_box .left_box .sub_title{font-size: 24px; line-height: 30px;}

    .visual .txt_box .left_box .button_box{margin: 20px 0;}
    .visual .txt_box .left_box .button_box a{display:block;}
    .visual .txt_box .left_box .button_box .button{float:none; margin:auto;}
    .visual .txt_box .left_box .button_box .button.two{margin:auto;}
    .visual .txt_box .left_box .button_box .button:before{opacity:1;}
    .visual .txt_box .left_box .button_box .button.two:before{opacity:1;}
    .visual .txt_box .left_box .button_box .button .btn_box{font-size: 15px; line-height: 22px; text-align:left;}
    .visual .txt_box .left_box .button_box .button .btn_box br{display: inherit;}
    .visual .txt_box .left_box .button_box .button .btn_box:after{display: none;}
    .visual .txt_box .left_box .button_box .button .btn_box span{display:block; font-size:13px;}

    .visual .txt_box .right_box .op_box{width: 250px; height: 230px;}
    .visual .txt_box .right_box .op_box:before{width: 250px; height: 230px;}

    .visual .txt_box .right_box .op_box .sec{width: 250px; height: 114px;}
    .visual .txt_box .right_box .op_box .sec:before{top:36px; left:37px; width: 55px;}
    .visual .txt_box .right_box .op_box .sec:after{left: 116px; bottom: 9px; width: 34px;}
    .visual .txt_box .right_box .op_box .sec.two:before{top:20px; left:41px; width: 44px;}
    .visual .txt_box .right_box .op_box .sec.two:after{left: 118px; bottom: 13px;}


    .visual .txt_box .right_box .op_box .sec p{padding-left: 95px; padding-top: 41px; font-size: 18px; line-height: 28.8px;}
    .visual .txt_box .right_box .op_box .sec.two p{padding-top: 39px; padding-left: 90px;}

    .visual .txt_box .right_box .op_box:after{display: block; position:absolute; top:50%; left:21px; width:209px; height: 1px;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAF0lEQVQYV2Ocu3D5fwYGBobk+EhGEA0AMUIEAjAapY0AAAAASUVORK5CYII=");
    }


}