@charset "utf-8";


body {
    
}

/* header-S */
#header {width: 1200px; height: 200px; margin: 0 auto;padding-top: 20px;
    position: relative; z-index: 50;
    box-sizing: border-box;
}
#header>h1 {float: left;margin: 40px 0;}
#header>h1>a{}
#header>h1>a>img{width:180px}

.top-menu{height: 20px;float: right}
.top-menu>li{float: left; padding-left: 20px;margin-top: 25px}

#gnb {width: 1200px; float: left;}
#gnb a {color: #333}
#gnb>ul>li {float: left; width: 25%;height: 50px;
    text-align: center;
    font: 14px/40px 'Noto Sans KR', Dotum, AppleGothic, sans-serif;
    position: relative;
}
#gnb>ul>li>a { display: block; width: 100%; height: 40px;}
#gnb>ul>li>ul { width: 100%; display: none;
    position: absolute;left: 0px;top: 40px;
}
#gnb>ul>li>ul>li {width: 33.3333%; height: 40px; float: left;
    background-color: #fff;
}
#gnb li:hover ul {display: block}

.gnb-m{display: none}

/* header-E */

/* visual-S */
#visual {max-width: 1200px;margin: 0 auto 100px auto;min-width: 480px;
    overflow: hidden;
    position: relative; z-index: 30;
    background-color: #f00
}
#visual>ul{display: block;width: 100%;
    position: relative;
}
#visual li {width: 100%; height: auto;float: left;}
#visual li>img {display: block;width: 100%;height: auto;}

#visual>.arrow > a{display: block; width: 35px;height: 64px;
    position: absolute; top: 50%; margin-top: -35px;
    text-indent: -9999px;
}
.prev {background-image: url(../images/btn_direction.png); left: 0;}
.next {background-image: url(../images/btn_direction.png); right: 0;
    transform: rotate(180deg)
}

.indicator{position: absolute; left: 50%; margin-left: -20px;bottom: 10px}
.indicator li {display: inline-block; width: 12px;height: 12px;
    text-indent: -9999px;
    background-color: #6d6d6d;
    border-radius: 50%;
}
/* visual-E */

/* content-S */
#content{width: 1200px;margin: 0 auto 60px auto;}
#content:after {content:""; display: block; clear: both}

#content>.left {float: left;width: 265px;}
#banner>li{width: 90%;height: 75px}
#banner>li ~ li{margin-top: 10px}
#banner a{display: block;width: 100%;
    background-color: #7F0019;
    transition: all 0.3s
}
#banner li:hover a{background-color: #efefef}
#banner li:hover p{color: #000}
#banner>li p{
    font-size: 12px;font-weight: 600;color: #fff;line-height: 75px;text-align: center;letter-spacing: 4px;
}

#content>.center {position: relative;float:left; width:550px}
.center>h1{margin: 0 auto 20px 50px;
    font-size: 20px;font-weight: 600;color: #222;line-height: 20px
}
.center>h1:after{content: "";display: block;width: 20px;height: 3px;margin-top: 5px;
    background-color: #666
}
#list1 {margin-bottom: 20px;}

.center>article:after {content:""; display: block; clear: both}
.con-view{width: 450px;height: 130px;margin: 0 auto}
.con-view>img{width: 180px; height: 130px;float: left;margin-right: 20px}

.list p{letter-spacing: -1}

.subtit a {font-size: 15px;font-weight: bold;color: #222;line-height: 38px}
.smr {font-size: 13px;line-height: 20px;color: #666;}
.center>a {font-size: 12px;color: #555;
    position: absolute;top: 10px;right: 10px;
}
.center>a:hover{color: #000000}

#content>.right {float: right;width: 350px}
.right_banner>li{width: 100px;height: 100px;float: left;
    margin-bottom: 26px;
    background-color: #e2e2e2;
}
.right_banner>li:nth-of-type(1) {background: url(/images/right1.jpg) no-repeat 0 0}
.right_banner>li:nth-of-type(2) {background: url(/images/right2.jpg) no-repeat 0 0}
.right_banner>li:nth-of-type(3) {background: url(/images/right3.jpg) no-repeat 0 0}
.right_banner>li+li{margin-left: 20px;}
.right_banner>li>a{display: block;width: 100px; height: 100px;
    font-size: 13px;color: #fff;text-align: center;line-height: 156px;letter-spacing: -1px;
    transition: all 0.3s
}

.right h3{width: 350px;margin: 0 auto 10px auto;
    font-size: 20px;font-weight: 600;color: #222;line-height: 20px;
}
.right iframe {width: 350px;margin-bottom: 5px}
.nscreen>a{font-size: 13px;color: #666;line-height: 20px}
/* content-E */

/* footer-S */
#footer {height: 180px;background-color: #f7f7f7}
.foot {width:1200px; margin:0 auto; padding:40px 0;}
.foot>h1{float: left; margin-right: 150px;}
.foot>h1>img {width: 150px}
.foot>div {float:left; 
    font-size: 12px; color:#999;line-height: 18px
}
.foot>p {font-size:12px;font-family: 'Noto Sans KR';}
.copy {padding-top:20px}
.foot>ul {float:right}
.foot>ul img {height: 30px;opacity: 0.3;transition: all 0.3s}
.foot>ul img:hover {opacity: 0.5}
.foot>ul>li {display:inline; padding:0 5px}
/* footer-E */



@media screen and (min-width:768px) and (max-width:1199px) {  
    
    /* header-S */
    #header {width: 95%}
    #gnb {width: 100%}
    /* header-E */
    
    
    /* visual-S */
    #visual {width: 95%}
    #visual li {}
    /* visual-E */
    
    
    /* content-S */
    #content{width: 95%}
    
    
    .con-view{width: 100%;height: 130px;margin: 0 auto}
    
    #content>.left {float: left; width: 40%;}
    #banner>li{width: 100%}

    
    #content>.center {position:relative; float:right;width: 55%}
    
    
    .center>article {}
    .center>article:after {content:""; display: block; clear: both}
    .center>h1{margin: 0 auto 20px 0px}
    .con-view {}
    .con-view>img {width: 30%; height: auto;float: left}
    .con-view>p {width: 60%;float: left; padding-bottom: 10px}
    
    #content>.right {width: 100%; height: auto;
        margin-top: 50px;
        padding: 50px 0;
        border-top: 1px solid #ccc;
    }
    .right>article {float: left}
    .right>article:nth-of-type(1) {width: 40%;padding-top: 50px}
    .right_banner {width: 100%;height: auto}
    .right_banner>li{width: 33.3%;}
    .right_banner>li ~ li {margin-left: 0;}
    .right .mov {float: right;width: 60%;}
    .right iframe {float: left; width: 55%;}
    .right .nscreen {float: right;width: 44%}
    /* content-E */
    
    /* footer-S */
    .foot {width:95%; margin:0 auto; padding:20px 0; }
    /* footer-E */
    
}
 
 
@media screen and (max-width:767px){

    body {background: none}

    /* header-S */
    #header {width: 95%;height: 100px}
    #header>h1{width: 180px;float: none;
        margin: 0 auto 0 auto    
    }
    .top-menu{display: none}
    #gnb{display: none}
    .top-menu{display: none}
    #gnb{display: none}
    
    .gnb-m {display: block; width: 30px;height: 24px}
    .gnb-m p {position: absolute;top: 40px;left: 20px;z-index: 999;}
    .gnb-m span {display: block;width: 35px;height: 3px;
        background-color: #333;margin-bottom: 8px;
        transition: all 0.3s
    }
    .gnb-m a:hover span:nth-child(1) {transform: translateY(11px)}
    .gnb-m a:hover span:nth-child(2) {transform: rotate(90deg)}
    .gnb-m a:hover span:nth-child(3) {transform: translateY(-11px)}
    .gnb-m a.on span:nth-child(1) {transform: translateY(11px)}
    .gnb-m a.on span:nth-child(2) {transform: rotate(90deg)}
    .gnb-m a.on span:nth-child(3) {transform: translateY(-11px)}
    
    
    
    .gnb-m nav {width: 300px;height: 100%;padding: 100px 80px 100px 0;box-sizing: border-box;
        position: fixed;top: 0;left: -300px;
        line-height: 45px;font-size: 18px;text-align: right;
        background-color: #f9f9f9;
            
    }
    .gnb-m nav>ul>li>a {font-weight: bold;color: #000}
    .gnb-m nav>ul>li>ul>li>a {color: #a0a0a0}
    
    
 
    
    /* header-E */
    
    /* visual-S */
    #visual { width: 95%; height: 300px;}
    /* visual-E */
    
    /* content-S */
    #content{width: 95%; }
    #content>section {height: auto}
    #content>.left {float: none; width: 100%;
        margin-bottom:50px;
        text-align: center
    } 
    #banner .banner1{width: 100%;background-size: cover}
    #banner .banner2{width: 100%;background-size: cover}
    #banner .banner3{width: 100%;background-size: cover}
    #banner .banner4{width: 100%;background-size: cover}
    
    #content>.center {width: 100%;
        margin-bottom: 50px;
        position:relative
    }
    .center>h1 {width: 100%;margin: 0 auto 20px 0px}
    .con-view {width: 100%}
    .con-view>img {width: 30%; height: auto;float: left}
    .con-view>p {width: 65%;float: right ; padding-bottom: 20px;}
    .center>a{right: 10px}

    /* content-E */
    #content>.right {width: 100%; height: auto;
        padding: 50px 0;
        border-top: 1px solid #ccc;
    }
    .right>article {width: 100%;height: 180px;
        position: relative
    }
    .right>article {width: 100%;}
    .right_banner{width: 100%;}
    .right_banner>li {width: 33.3%;}
    .right_banner>li ~ li {margin-left: 0;}
    
    
    .right h3{margin-left: 0}
    
    .mov iframe{width: 100%;height: auto;margin-bottom: 20px}
    .mov .nscreen {}
    

    /* footer-S */
    #footer {margin-top: 350px;height: 100%;margin-top: 20px}
    .foot {width:95%; margin:0 auto; padding:20px 0; 
        text-align: center
    }
    .foot>h1{float: none; margin: 0px;text-align: center}
    .foot>div {float:none; 
        font-size: 12px; color:#999;
    }
    .foot>p {font:12px "NGothic",Gulim;}
    .copy {padding-top:20px}
    .foot>ul {display: none}

}