@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo');

*{  /* 전체선택자 */
        margin:0;
        padding:0;      
}
html,body{
        width:100%; 
        height:100%;
}
html{
        /* ************************************************************
                종류:overflow(가로,세로)/overflow-x(가로)/overflow-y(세로)
                표현방식:auto/scroll/hidden 
            ************************************************************ */
        overflow-y:scroll; /* 문서전체에 세로 스크롤바자국 항상 표시 */
        overflow-x:hidden; /* 문서전체에 가로 스크롤바자국 항상 숨김 */
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{ 
        display:block; 
        /*시맨틱태그를 지원하지 않은 브라우저 
        -> 인식하지 못하는 태그를 인라인으로 인식하기때문에 강제로 블럭으로 설정함*/
}

li{list-style:none;}   /*목록에 점 없애기 */
a{text-decoration:none;}  /* 하이퍼링크 밑줄없앰 */

body,input,textarea{
        font-size:12px;
        font-weight:100; /* IE8 이하버전 대응 */
        font-family:'Nanum Gothic', sans-serif;
}
img{
        vertical-align:top;
        font-size:0;
        border:0; /* 이미지 링크시 기본적으로 나타나는 테두리 제거 */
}
table{border-collapse:collapse;} /* 칸사이의 기본 여백 제거 및 중첩 테두리 상쇄 효과 */
input,select{vertical-align:middle;} /*세로정렬 가운데 */


.clear:after{    /* 자식이 모두 float 을 사용할때 부모가 높이를 갖게하기 위함 */
        content:"";
        display:block;
        clear:both;
        *zoom:1;  /* IE8 이하버전 대응 */
}
.indent{     /* 글자 안보이게 밀어놓기 */
        display:block;
        text-indent:-9999px;
}
.hidden{display:none;}

/*===============여기서 부터 홈페이지 css====================*/
body{background:#fff;}

#top_btn{ /*위치설정*/
        width:35px;
        height:45px;
        background:#ff0000;
        position:fixed;
        right:0;
        bottom:0;
        z-index:9999; /*항상 맨위에 올라게 (position과 같이사용해야함)*/
}
#top_btn .active{ /*top 버튼*/
        height:45px;
        display:block;
        font-size:15px;
        color:#fff;
        font-weight:bold;
        text-align:center; /*수평정렬*/
        line-height:45px; /*수직정렬*/
}
#top_btn .active:hover{
        font-weight:bold;
        background:#1b65b3;
        color:#fff;
}

header{
        width:100%;
        height:85px;
        /*text-align:center;*/
        position:relative;
        z-index:100; /*메뉴가 맨위에 오게 함*/
}

input{
        font-size:14px;
        width:225px;
        height:5px;
        padding:10px;
        border:0px;
        outline:none;
        float:left;
}

.gnb{
        width:1250px;
        height:77px;
        margin:0 auto;
        margin-top:10px;
     /* background:pink;*/
}

.gnb a img{ /*로고*/
        float:left;
}


/*///// 주메뉴(자손걸기) ////*/
.gnb .gnbMenu{
        float:right;
}

.gnbMenu{}
.gnbMenu>li{
        float:left;
        width:150px;
        margin-top:15px;
        position:relative;
       /* background:red;*/
}
.gnbMenu>li>a{
        display:block;
        color:#333;
        font-size:18px;
        font-weight:600;
        line-height:50px;
        text-align:center;
}

.gnbMenu>li:hover>a{color:#1b65b3;}


/*///// 서브메뉴 ////*/

.gnbMenu>li .smenu{ /*모든 서브메뉴*/
        float:left;
        display:none;
        position:absolute;
        top:100%; /*주메뉴가 끝나는 지점에 바로 위치*/
        padding-top:10px;
        width:150px;
        text-align:center;
  /*      background:pink;*/
        /*background:#fff; ->bg_box 서브배경박스에 배경색이 들어가 있으므로 넣지않음*/
}

.gnbMenu>li ul li{
        padding:10px 0px;
/*      margin-top:55px;*/
        transition:all 0.4s;
}
.gnbMenu> li ul li a{
        color:#666;
        font-size:16px;
        text-align:center;

}
.gnbMenu> li ul li a:hover{
        text-decoration:underline;
        font-weight:bold;
        color:#1b65b3;
}


/*.gnbMenu> li ul li:hover{background:#dbe4ea;}*/

.bg_box{/*100%서브배경박스*/
        display:none;
        width:100%;
        height:200px;
        background:#fff;
}


/* ////////////// 스크롤바 내릴때 나오는 탑메뉴 fix */

.logo_fix{
        position:absolute;
        top:50;
        left:322px;
        margin-top:5px;
}

.gnb_fix{
        width:100%;
        height:87px;
        text-align:center;
        position:fixed;  /*스크롤바 내리면 나오는 위치+고정*/
        top:0px;
        right:0px;
        z-index:100000;
        margin-top:-87px;   /*안보이게 위로 올려놓음*/
        background:#fff;
}

/* ///// 주메뉴 ///// */

.gnbMenu_fix{
        float:right;
        width:1080px; /*내려오는메뉴랑 위에메뉴랑 맞춤*/
        margin:0 auto;
}
.gnb_fix>.gnbMenu_fix{
        display:inline-block;
       /* background:pink;*/
}
.gnb_fix>.gnbMenu_fix>li{
        float:left;
        width:150px;
        margin-top:20px;
        position:relative;
}
.gnb_fix>.gnbMenu_fix>li>a{
        display:block;
        color:#333;
        font-size:18px;
        font-weight:600;
        line-height:50px;
        text-align:center;
}
.gnb_fix>.gnbMenu_fix>li:hover>a{color:#1b65b3;}


/* ///// 서브메뉴 ///// */

.gnbMenu_fix>li .smenu_fix{
        width:150px;
        float:left;
        display:none;
        position:absolute;
        top:100%; /*주메뉴가 끝나는 지점에 바로 위치*/
        z-index:1000;
        margin-top:20px;    
       /* box-sizing:border-box;*/
        /*background:pink;*/
}

.gnb_fix>.gnbMenu_fix>li ul li{
        padding:10px 0px;
        text-align:center;
        /* css3 transition */
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -o-transition:all 0.5s;
    -ms-transition:all 0.5s;
    transition: all 0.5s;
}

.gnb_fix>.gnbMenu_fix>li ul li a{
        color:#666;
        font-size:16px;
        text-align:center;
}
.gnb_fix>.gnbMenu_fix>li ul li:hover a{
        text-decoration:underline;
        font-weight:bold;
        color:#1b65b3
}

.bg_box_fix{   /*서브배경박스*/
        display:none;
        position:absolute;
        top:77px; 
        width:100%;
        height:200px; 
        background:#fff;
}

/*메인비주얼*/
.fadeShow{
        position:relative;
        overflow:hidden;
        width:100%;
        height:650px; /*메인이미지사이즈*/
}
.changeimg{
      text-align:center;
}

.changeimg ul li{ /*이미지 모두 동일한 위치, 안보이게 함*/
        display:none;
        position:absolute;
        top:0;
        left:0;
}

.changeimg ul li:first-child{display:block;} /*첫번째 이미지만보임*/

.changeimg ul li img{
    overflow:hidden;
}

 /*하단버튼*/


 .fadeShow .btn{ /*버튼의 위치*/
        position:absolute;
        top:620px;
        left:900px;

 }

 .fadeShow .btn>span{ /*버튼모양*/
        display:inline-block;
        width:10px;
        height:10px;
        border-radius:50%;
        background:#000;
        margin:0 5px;
        cursor:pointer;
 }

 .fadeShow .btn>span.active{background:#fff;} /*현재위치활성화*/



.gradient-border{
        width:850px;
        height:100px;
        margin: 0 auto;
        font-size:30px;
        text-align:center;
        vertical-align:middle;
        font-weight:bold;
        margin-top:35px;
        padding-top:10px;
        margin-bottom:20px;
        background:#1b65b3;
        color: #fff;
}

.gradient-border a{
        padding-bottom:55px;
}

.gradient-border a:hover{
        text-decoration:underline;
}



.gradient-border { --borderWidth: 5px; background: #1b65b3; position: relative; border-radius: var(--borderWidth); } 
.gradient-border:after { content: ''; position: absolute; top: calc(-1 * var(--borderWidth)); left: calc(-1 * var(--borderWidth)); height: calc(100% + var(--borderWidth) * 2); width: calc(100% + var(--borderWidth) * 2); background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); border-radius: calc(1.5 * var(--borderWidth)); z-index: -1; animation: animatedgradient 2s ease alternate infinite; background-size: 300% 300%; } 
@keyframes animatedgradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
}

 
#more{
        width:1200px;
        height:780px;
        margin:0 auto;
        padding-top:55px;
     /*   background:yellow;*/
}

h2{
        font-size:32px;
        font-weight:900;
        text-align:center;
        margin-top:20px;
        margin-bottom:25px;
        color:#000;
}

h3{
        font-size:17px;
        font-weight:600;
        text-align:center;
        margin-bottom:40px; 
}

#more ul{
        width:1200px;
        margin:0 auto;
        background:pink;
}
#more ul li{
        width:520px;
        height:600px;
        margin:0 auto;
        float:left;
        margin-left:65px;
      /*  margin-bottom:50px;*/
        background:#eee;
}

#more ul li  .packge_in{
        float:left;
        width:520px;
        height:400px;
        overflow:hidden;
        margin-bottom:20px;
}

#more  ul li .packge_in img{
        transform:scale(1);
        transition:all 0.5s;
}

#more  ul li .packge_in:hover img{transform:scale(1.2);}

#more ul li .text1{
        font-weight:bold;
        font-size:20px;
        text-indent:15px;
        margin-bottom:10px;
        color:#330000;
}
#more ul li .text{
        font-weight:bold;
        font-size:15px;
        color:#333;
        line-height:25px;
        margin-left:15px;
}
#more ul li .text:hover{
        text-decoration:underline;
}
.botton{
        width:110px;
        height:40px;
        background:#1b65b3;
        margin-top:20px;
        margin-left:16px;
}
#more ul li a{
        margin-left:15px;
        margin-top:5px;
        font-size:25px;
        color:#eee;
        line-height:35px;
        border:2px solid #1b65b3;
}

#more ul li a:hover{
         color:#1b65b3;
}
#more ul li:hover a{
        color:#333366;
}

.notice{
        width:100%;
        height:200px;
        background:#1b65b3;
        text-align:center;
        padding-top:55px;
}
.notice .no_01{
        text-align:center;
        font-size:23px;
        font-weight:900;
        line-height:40px;
        color:#fff;
        margin-bottom:20px;
}

.spon_btn{
        width:220px;
        height:40px;
        margin:00 auto;
        margin-top:10px;
        text-align:center;
        background:#fff;
        border:1px solid #cc6666;

}
.spon_btn a{
        color:#6666ff;
        font-size:20px;
        line-height:40px;
        font-weight:900;

}

.spon_btn:hover{
        background:#fff;
        color:#cc6666;
}
.spon_btn:hover a{color:#cc6666;}



 .banner{  /*실적현황  배너전체영역*/
        position:relative;
        width:100%;
        height:500px;
}

.banner .ban{   /*슬라이드영역*/
        width:1250px; /*보여주는 폭을 줄이고자 할때 가로폭을 맞춰서 줄여줌*/
        height:400px;
        overflow:hidden;
        padding-top:35px;
        margin:0 auto;
        margin-top:20px;
        /*background:orange;*/   
}

.banner .ban ul{
        width:2500px;  /* 총길이=230*18+여백포함 */
        position:relative;
        left:-329px;
        /*html의 이미지목록에서 끊기지 않고 이어지는 이미지를 위해서 맨 마지막 이미지를 맨 앞에 두었지만,
        실행화면에 보이는 이미지는 첫번째 이미지어야 하므로, 
        맨 마지막 이미지를 맨앞에 넣어둔것을 다시 왼쪽으로(left:-255px) 밀어둠 */
}
.banner .ban ul li{
        float:left;
        margin-right:25px;
        width:304px;   /*이미지가로크기*/
        height:304px;  /*이미지세로크기*/
}

.banner .ban h1{
        font-size:28px;
        color:#333;
        margin-bottom:30px;
        text-align:center;

}

.banner ul li:hover{border-color:#cc0000;}

/*좌우버튼*/
.ban_left{
        position:absolute;
        top:275px;
        right:1625px;
        cursor:pointer;
}
.ban_right{
        position:absolute;
        top:275px;
        left:1625px;
        cursor:pointer;
}
.ban_btn span{
        display:inline-block;
        width:17px;
        height:27px;    
}
.ban_btn .ban_left{background:url(../img/main-event-left_02.png) no-repeat;}
.ban_btn .ban_right{background:url(../img/main-event-right_02.png) no-repeat;}
.ban_btn .ban_left:hover{background:url(../img/main-event-left_01.png) no-repeat;}
.ban_btn .ban_right:hover{background:url(../img/main-event-right_01.png) no-repeat;}


.ad_head{
        width:1250px;
        height:300px;
        margin:0 auto;
        margin-bottom:20px;
        text-align:center;
        background:#eee;
}
.head_01{
        font-size:33px;
        font-weight:900;
        color:#333;
        padding-top:40px;
}

.head_01:hover{
         color:#1b65b3;
}

.head_02{
        font-size:20px;
        font-weight:600;
        line-height:65px;
        color:#333;
}

.head_02:hover{
         color:#1b65b3;
}





.ad_head img{
        margin-top:35px;
        margin-left:20px;
}
/*----------------------------------foot layout---------------------------------------*/


#footerstyle { 
        clear: both;
        float: center;
        padding-top:30px;  
        padding-bottom:100px; /* 메인만 100 나머진 50*/
        width:100%; 
        color: #666;

}

#footer1 { 
        width:1200px;
        margin-right: auto;
        margin-left: auto;
        font-family: "나눔고딕";
  
}

 .footlogo { 
        width:170px;
        float:left;     
        text-align:center; 
 }
 
 .footadd{
        width:1000px;
        margin-top:10px;
        float:left;
        font-size:15px;
        line-height:30px;
        font-weight:600;
        
}
 .footadd1{ 
        float:left;
        line-height:20px;
        border-left: 2px solid #ededed;  
        padding-left: 20px;
}

 .footadd2{  
        float:right; 
        border-left: 2px solid #ededed;  
        padding-left: 20px;
}

.copy{  
        position:relative;
        color:#666;
        font-size: 14px;
}

.foottext{      
   color: #1b65b3;
   font-weight:600;
}

.foottextline{  
        padding-left:10px;  
        padding-right:10px;  
        margin-bottom: 12px;
        color:#666;
}