@charset "utf-8";

#wrap{width:100%; min-width:480px; /*background:#fce;*/}

/*헤더영역*/
#header{width:100%; height:50px; /*background:#0ad;*/
            margin:0 4%;}
.logo{/*padding-left:20px;*/}
.logo a{display:block; height:50px; width:120px; 
         /*background-color:#cce;*/ text-indent:-9999px;
         background-image:url(../img/logo.png);
         background-repeat:no-repeat;
         background-position:center;
         background-size:auto 25px;}

/*삼선버튼 & 돋보기 공통값*/
#header>a{display:block; text-indent:-9999px;
               /*background-color:#ff9;*/
               position:absolute;}

/*삼선버튼*/
.btnMenu{display:block; width:30px; height:22px;
             padding:14px 20px; top:0; right:0;}
.btnMenu span{display:block; 
                    width:30px; height:2px; background:#444;
                    margin:8px 0;}
.btnMenu:before,
.btnMenu:after{content:""; display:block;
                    width:30px; height:2px; background:#444;}
/*돋보기*/
.btnSearch{display:block; width:50px; height:50px;
              top:0; right:51px;
              background-image:url(../img/ico_search.png);
              background-repeat:no-repeat;
              background-position:center;
              background-size:auto;}

/*메인슬라이더 영역*/
#mainSlider{position:relative;}
#mainSlider li{}
#mainSlider li a{display:block; width:100%; height:246px;
                      background-repeat:no-repeat;
                      background-position:center 0;
                      background-size:cover;}

#mainSlider .s1 a{background-image:url(../img/mainslider_01.jpg);}
#mainSlider .s2 a{background-image:url(../img/mainslider_02.jpg);}
#mainSlider .s3 a{background-image:url(../img/mainslider_03.jpg);}

#mainSlider .text{font-size:4vw; line-height:1.3em; 
                       color:#fff; font-weight:bold;
                       position:absolute; top:30%; left:50%;
                       transform:translate(-50%,-50%);
                       text-shadow:0 0 5px rgba(0,0,0,0.5);}
/*폰트 20px (20/500) x100 =4vw*/

#mainSlider .pager{}
#mainSlider .bx-pager{position:absolute; bottom:6.4%; left:50%; 
         transform:translate(-50%,-50%);}
/*아래 32px (32/500) x100 = 6.4%*/
#mainSlider .bx-pager div{float:left; margin: 0 7px;}
#mainSlider .bx-pager div .active{display:block; width:15px; height:15px; text-indent:-9999px;
                   background:url(../img/pager_on.png) no-repeat;
                   transition:all 0.3s;}
#mainSlider .bx-pager div .active:hover{background:url(../img/pager_on_hover.png) no-repeat;}

#mainSlider .bx-pager div a{display:block; width:15px; height:15px; text-indent:-9999px;
                background-repeat: no-repeat; transition:all 0.3s;
                background-image:url(../img/pager_off.png);}
#mainSlider .bx-pager div:hover a{background:url(../img/pager_off_hover.png) no-repeat;}

/*컨테이너 본문영역*/
#container{margin:4%; /*background:#ff9;*/}

/*컨테이너 공통값*/
#container h3{font-size:5.2vw; line-height:1.3em;}
#container .text{font-size:2.4vw; line-height:1.3em; color:#666;}
/*폰트 26px (26/500) x100 = 5.2vw
         12px (12/500) x100 = 2.4vw*/

/*본문1*/
.cont1{display:-webkit-flex; display:flex;
        /*margin-bottom:67px;*/ margin-bottom:13.4%;}
        /*아래여백 67px (67/500) x100 = 13.4%*/
.cont1 .ct1_1{width:50%;}
.cont1 .ct1_1 h3{text-align:left; margin-bottom:5.6%;}
/*아래여백 28px (28/500) x100 =5.6%*/
.cont1 .ct1_1 .text{margin-bottom:15%;}
/*아래여백 75px (75/500) x100 = 15%*/
.cont1 .ct1_1 .go{}
.cont1 .ct1_1 .go a{display:block; /*width:100px; height:30px;*/ 
                        width:50%; height:6%;
                        /*width:16.4%; height:4.4%;*/
                        transition:all 0.4s; /*padding:1% 5%;*/
                        font-size:3.2vw; margin-top:15%; line-height:2em;
                        font-weight:bold; background:#fff;
                        border:2px solid #3472c5; text-align:center;}
                        /*w: 82px (82/500) x100 = 16.4%
                           h: 22px (22/500) x100 = 4.4%*/
                        /*위여백 75px (75/500) x100 =15%*/

.cont1 .ct1_1 .go:hover a{background:#3472c5; color:#fff;}

.cont1 .ct1_2{width:50%;}
.cont1 .ct1_2 .photo{}
.cont1 .ct1_2 img{width:100%; height:auto;}


/*본문2*/

.cont2{margin-bottom:13.4%;}
.cont2 h3{text-align:center;}
.cont2 .text{text-align:center;
               margin-bottom:6%;}

.cont2 .bs{}
.cont2 .bs ul{display:-webkit-flex; display:flex;
                flex-wrap:wrap;}
.cont2 .bs ul li{width:48%; margin-bottom:4%;
                   position:relative;}
/*bs 1개 너비 : 220 (220/460) x100 = 47.826086%
  사이여백     : 20   (20/500) x100 = 4%*/
.cont2 .bs ul li:nth-child(1),
.cont2 .bs ul li:nth-child(3){margin-right:4%;}
.cont2 .bs img{width:100%; height:auto;}

.cont2 .bs ul li a{}
.cont2 .bs ul li .photo{position:relative;}
.cont2 .bs ul li .over{width:100%; height:100%;
                          background-color:rgba(0,0,0,0);
                          color:#fff; text-align:center;
                          position:absolute; top:0; left:0;
                          transition:all 0.4s;}
.cont2 .bs ul li .over span{display:none; font-size:2.8vw;}
/*폰트크기 14px (14/500) x 100 = 2.8vw*/
.cont2 .bs ul li:hover .over{opacity:1; 
                                  background-color:rgba(0,0,0,0.6);}
.cont2 .bs ul li:hover .over span{display:block; margin-top:24%;}
/*위여백 65px*/


/*본문3*/
.cont3{margin-bottom:13.4%;}
.cont3 h3{text-align:center;}
.cont3 .text{text-align:center; margin-bottom:6%;}
.cont3 .cn{}
.cont3 .cn ul{display:-webkit-flex; display:flex;
             flex-wrap:wrap; transition:all 0.4s;}
.cont3 .cn ul li{width:28.8%; margin-right:6.8%;
                   position:relative; transition:all 0.4s;}
.cont3 .cn ul li p{transition:all 0.3s; margin-top:5%;}
/*아래여백 25px (25/500) x100 = 2.4%*/
.cont3 .cn ul li:hover p{color:#434188;}
.cont3 .cn ul li:nth-child(3){margin-right:0;}
/*사이여백 34px (34/500) x100 =6.8%*/

/*마우스 하버시*/
.cont3 .cn ul li .on{position:absolute; top:0; left:0; opacity:0;
                        transition:all 0.4s;}
.cont3 .cn ul li:hover .on{opacity:1;}

.cont3 .cn img{width:100%; height:auto;}
.cont3 .cn p{font-weight:bold; color:#444; text-align:center;
                margin-top:1.6%; font-size:2.4vw; line-height:1.3em;}
/*위여백 8px (8/500) x100 = 1.6%*/




/*본문4 뉴스*/
.cont4{border:1px solid #aaa; background:#fff;
         padding:4%; position:relative;}
/*안쪽여백 20px (20/500) x 100 = 4%;*/

.news{}
.news ul{border-top:1px solid #bbb; padding:3% 0;}
.news ul li{border-bottom:1px solid #bbb; transition:all 0.4s;
              /*padding;4.4% 0;*/}
.news ul li a{display:block; font-size:2.8vw; line-height:1.3em;
                /*font-weight:bold;*/ color:#444;
                padding:2% 0;}
/*폰트 14px (14/500) x100 = 2.8vw*/
/*li 한줄 글자위아래 여백: 10px (10/500) x100 = 2%;*/

.news ul li:hover a{text-decoration:underline;}

/*더보기*/
.news .more{}
.news .more a{display:block; text-indent:-9999px;}

.news .more{display:block; /*background:#cce;*/
                 width:14px; height:14px;
                 padding:15px; /*44x44*/
                 position:absolute; top:13px; right:13px;}
.news .more span{display:none;}/*text-indent 하면 공간인식해서 그냥 none;함*/

/*선 공통값*/
.news .more:before,
.news .more:after{content:""; display:block; background:#333;}

/* 가로선 -*/
.news .more:before{width:14px; height:2px; margin-top:6px;}
/* 세로선ㅣ*/
.news .more:after{width:2px; height:14px; margin-top:-8px;
                      margin-left:6px;}

/*푸터영역*/
#footer{border-top:2px solid #555; height:134px; 
          padding:18px 0; color:#444;
          background:#cfcfd1; text-align:center;}

.fmenu{margin-bottom:19px;}
.fmenu li{display:inline-block;}
.fmenu li:after{content:""; display:inline-block; 
                  width:2px; height:2px; background:#444;
                  vertical-align:middle; margin:0 10px;}
.fmenu li:last-child:after{display:none;}
.fmenu li:hover a{text-decoration:underline; color:#555;}

address{margin-bottom:6px;}

.finfo{margin-bottom:14px;}
.finfo p{}
.finfo p span{display:inline-block; border-right:1px solid #444;
                 line-height:12px; padding:0 5px;}
.finfo p span:last-child{border-right:none;}


.copy{font-size:12px; color:#777;}

/*모바일 사이드 메뉴*/
#sideMn{width:480px; height:100%; background:#fff;
            position:fixed; top:0; right:-480px; z-index:500;
            font-size:18px; /*font-weight:bold;*/
            line-height:1.2em;}
#sideMn .logo{display:block; text-indent:-9999px;
                    padding-left:25px;}

#sideMn .btnClose{display:block; 
                        width:30px; height:22px;
                        padding:14px 20px;
                        position:absolute; top:0; right:0;
                        text-indent:-9999px;}
#sideMn .btnClose span{display:block; width:30px; 
    height:2px; background:#444; opacity: 0;}

#sideMn .btnClose:before{content:""; display:block;
        width:30px; height:2px; background:#444;
        transform:rotate(45deg); margin-top:10px;}
#sideMn .btnClose:after{content:""; display:block;
    width:30px; height:2px; background:#444;
    transform:rotate(135deg); margin-top:-4px;}

/*utill*/
#sideMn .utill{width:100%; height:45px;
    line-height:45px; font-size:14px;
    background:#3472c5; padding-left:130px;
    border-bottom:1px solid #aaa;}

#sideMn .utill li{float:left;
    width:60px; height:45px;
    margin:0 5px;
    text-align:center;}
#sideMn .utill li a{display:block; color:#fff;}

#sideMn .searchBar{
    position:relative;
    width:100%; height:100px;
    background:#3472c5; line-height:100px;}

#sideMn .searchBar input{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:300px; height:40px;
    font-size:16px;
    color:#3472c5;
    border:none; border-radius:20px;
    padding:0 50px 0 20px;
    background:#fff url(../img/mainslider_icon.png) no-repeat 330px center;}
.searchBar label{display:none;}

/*mGnb*/
#sideMn .mGnb{}
#sideMn .mGnb ul{}
#sideMn .mGnb .g1{
    position:relative;
    width:100%; 
    font-weight:bold;
    padding-left:20px;
    border-bottom:1px solid #444;}
#sideMn .mGnb .g1 a{display:block;
    padding:15px 0;}


/*+ -*/
#sideMn .mGnb .g1 a span{display:inline-block; 
    width:15px; height:2px;  
    background:#444;
    position:absolute; top:25px; right:25px;
    transition:all 0.4s;}
#sideMn .mGnb .g1 .m:before{content:""; display:block;
    position:absolute; top:25px; right:25px;
    width:15px; height:2px; background:#444;
    transform:rotate(90deg);
    transition:all 0.4s;}
#sideMn .mGnb .g1 .m span:after{transition:all 0.4s;}

/*on*/
#sideMn .mGnb .g1 .m.on{color:#3472c5;
    position:relative;
    border-bottom:1px solid #3472c5;
    transition:all 0.4s;}
#sideMn .mGnb .g1 .m.on:before{opacity:0;}
#sideMn .mGnb .g1 .m.on span{background:#3472c5;}
#sideMn .mGnb .g1 .m.on span:after{
    content:""; display:block; 
    width:480px; height:1px;
    border-bottom:1px solid #3472c5;
    position:absolute; top:25px; left:-440px;
}

/*sub*/
#sideMn .mGnb .g1 .sub{display:none;}
#sideMn .mGnb .g1 .sub li{display:block; 
    width:480px; 
    /*border-bottom:1px solid #444;*/}
#sideMn .mGnb .g1 .sub li:last-child{border:none;}
#sideMn .mGnb .g1 .sub li a{display:block;
    width:100%;
    padding:10px 0;
    margin-left:15px;
    font-size:16px;}