@charset "utf-8";

/* 공통속성 */
.container{width: 1280px; margin: 0 auto; height: inherit}
.left{float: left}
.right{float: right}
h2{margin: 0 16px 65px 16px; color: #222; font-size: 30px; font-weight: 500; text-align: center; letter-spacing: -1.5px;}
h3{color: #151515; font-size: 26px; font-weight: 900}

/* 레이아웃 */
#wrap{width: 100%}
#header{width: 100%; height: 202px}
#main{width: 100%}
#main_slide{position: relative; width: 100%; height: 580px; background: url('../images/slide_bg.jpg') no-repeat center}
#search_btn{position: relative; width: 100%; height: 120px; margin-top: 80px; z-index: 2;}
#class{width: 100%; height: 560px; margin-top: -60px; padding-top: 160px; background: #f0f0f0}
#apply{width: 100%; height: 120px; margin-top: 100px}
.banner{width: 100%; height: 180px; margin-top: 100px; background: url(../images/banner_bg.jpg) no-repeat center}
#location{width: 100%; height: 536px; margin-top: 100px}
.site_banner{width: 100%; height: 70px; margin-top: 100px}
#footer{width: 100%; margin-top: 126px; color: #fff; background: #555}

/* header */
.gnb{width: 100%; height: 38px; background: #ebebeb}
.gnb ul{margin-left: 974px;}
.gnb ul li{float: left; width: 76px; text-align: center}
.gnb ul li a{display: block; height: 14px; margin: 12px 0; color: #666; font-size: 14px; line-height: 14px; border-right: 1px solid #888}
.gnb ul li:nth-child(3) a{border-right: 0}
.gnb ul li:hover a{font-weight: 600}
.gnb ul li.consulting{background: #888}
.gnb ul li.consulting a{color: #fff; border: 0}

.top{width: 100%; height: 100px; border-bottom: 1px solid #d7d7d7}
h1{float: left; margin-top: 24px}
.search{position: relative; float: left; width: 450px; height: 42px; margin: 29px 0 0 207px}
.search>input{width: 410px; height: 18px; padding: 12px 20px; color: #333; line-height: 18px; border: 0; border-radius: 50px; background: rgba(0, 123, 199, .1)}
.search .search_guide{color: #999;}
.search .search_img{display: inline-block; position: absolute; top: 10px; right: 20px}
.slogan{float: right; margin-top: 30px}

#nav{position: relative; width: 100%; height: 64px}
#nav .nav_bg{display: none; position: absolute; top: 63px; left: 0; width: 100%; height: 320px; border-top: 1px solid #d7d7d7; background: #fff; z-index: 9}
#nav>.container>ul{}
#nav>.container>ul>li{float: left; width: 213px; height: 64px; text-align: center}
#nav>.container>ul>li>a{display: block; height: 64px; font-family: 'NanumSquare', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; line-height: 64px}
#nav>.container>ul>li:hover>a{height: 59px; border-bottom: 5px solid #007bc7}
#nav .sub{display: none; position: relative; padding: 20px 0; z-index: 10}
#nav .sub li{}
#nav .sub li a{display: block; height: 40px; font-size: 18px; line-height: 40px; letter-spacing: -1px;}
#nav>.container>ul>li .sub li:hover a{color: #fff; border-radius: 50px; background: #007bc7}

/* main_slide */
.slide_con a{display: block;}
.slide_con .text{float: left; margin: 155px 0 0 130px; color: #fff; letter-spacing: -1px}
.slide_con .text .tit_txt{font-size: 52px; font-weight: 600}
.slide_con .text .small_txt{margin: 40px 0 0 130px; font-size: 20px; font-weight: 300}

.slide_con .text .small_txt span{font-size: 28px; font-weight: 500}
.slide_con .text .small_txt_left{margin: 40px 0 0; font-size: 22px; font-weight: 300}
.slide_con .text .small_txt_left span{font-size: 28px; font-weight: 500}
.slide_con .text .small_txt_right{margin: 40px 0 0 170px; font-size: 24px; font-weight: 300}
.slide_con .text .small_txt_right span{font-size: 28px; font-weight: 500}
.slide_con .text .exp_txt{margin-top: 80px; font-size: 20px; line-height: 30px}
.slide_con img{display: block; float: right; margin: 100px 160px 0 0}
.slide_con img.slide_img{margin: 100px 120px 0 0}

#notice{position: absolute; bottom: 0; width: 100%; height: 80px; background: rgba(0, 0, 0, .6)}
#notice img{display: block;}
.notice_tit{margin-right: 86px}
.notice_tit, .notice_tit img, .notice_tit h2, .notic_con{float: left;}
.notice_tit .notice_icon{margin: 22px 24px 0 0;}
.notice_tit h2{margin: 0; color: #fff; font-size: 26px; letter-spacing: -1px; line-height: 80px}
.notice_tit .plus_icon{margin: 32px 0 0 22px}
.notice_con{position: relative; height: 80px; color: #fff; overflow: hidden;}
.notice_con li{position: absolute; height: 80px}
.notice_con li:hover a{text-decoration: underline}
.notice_con .notice_1{top: 0}
.notice_con .notice_2, .notice_con .notice_3, .notice_con .notice_4{top: 100%}
.notice_con a{display: inline-block; float: left; width: 630px; color: #fff; font-size: 20px; font-weight: 300; letter-spacing: -1px; line-height: 80px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.notice_con span{display: inline-block; float: right; color: rgba(255, 255, 255, .7); font-size: 18px; font-weight: 300; line-height: 80px}
.notice_arrow{float: right;}
.notice_arrow .up{margin: 24px 0 14px; cursor: pointer}
.notice_arrow .down{cursor: pointer}

/* search_btn */
#search_btn li{position: relative; float: left; width: 232px; height: 120px; margin-left: 30px; background: url('../images/btn_bg.png') no-repeat right #007bc7}
#search_btn li:first-child{margin-left: 0}
#search_btn li:hover{background: url('../images/btn_bg.png') no-repeat right #fc8b12; cursor: pointer;}
#search_btn li a{display: block; width: 100px; margin: 30px 0 0 25px; color: #fff; font-family: 'NanumSquare', sans-serif; font-size: 28px; letter-spacing: -1px; line-height: 28px;}
#search_btn li a span{font-weight: 800}
#search_btn li img{position: absolute; bottom: 35px; right: 25px}

/* class */
#class .h2_wrap{position: relative; height: 30px; margin-bottom: 65px; background: url(../images/h2_bg.jpg) repeat-x 0 12px}
#class h2{display: inline-block; position: absolute; left: 50%; padding: 0 15px; transform: translate(-50%, 0); background: #f0f0f0}
.class_slide{position: relative; padding: 0 49px 0 87px}
.class_slide>ul{width: 1144px; height: 367px; overflow: hidden}
.class_slide>ul>li{float: left; width: 248px; height: 367px; margin: 0 19px; background: #fff}
.class_slide .class_img{width: 248px; height: 287px;}
.class_slide .class_img .category{margin-bottom: 8px; padding-top: 15px; color: #ffc127; text-align: center}
.class_slide .class_img h3{color: #fff; font-size: 24px; font-weight: 500; line-height: 30px; text-align: center}
.class_1{background: url(../images/class_img_1.jpg) no-repeat}
.class_2{background: url(../images/class_img_2.jpg) no-repeat}
.class_3{background: url(../images/class_img_3.jpg) no-repeat}
.class_4{background: url(../images/class_img_4.jpg) no-repeat}
.class_btn{padding: 19px 12px; background: #fff}
.class_btn li{float: left; width: 105px; height: 40px}
.class_btn li a{display: block; width: 105px; height: 40px; line-height: 40px; text-align: center; border: 1px solid #666}
.class_btn li:hover a{font-weight: 500}
.class_btn li.detail_btn a{color: #333}
.class_btn li.apply_btn a{margin-left: 10px; color: #fff; background: #666}
.class_slide .prev{position: absolute; top: 50%; left: 0; transform: translate(0, -50%)}
.class_slide .next{position: absolute; top: 50%; right: 0; transform: translate(0, -50%)}

/* apply */
#apply .rent, #apply .alarm{float: left; width: 626px; height: 120px; background: rgba(0, 123, 199, .15)}
#apply .rent{margin-right: 28px}
.rent .apply_icon{float: left; margin: 24px 25px 0 38px}
.alarm .apply_icon{float: left; margin: 20px 26px 0 43px}
#apply dl{float: right; width: 480px; height: 60px; margin-top: 30px}
#apply dl dt{float: left; height: 26px; padding: 17px 30px 17px 0; font-family: 'NanumSquare', sans-serif; font-size: 26px; font-weight: bold; letter-spacing: -1.5px; line-height: 26px; border-right: 1px solid #aaa}
.rent:hover, .alarm:hover{cursor: pointer}
#apply dl dd{float: left; margin-left: 30px; padding-top: 8px; color: #666; font-size: 18px; letter-spacing: -1px}
#apply dl dd.apply_arrow{float: right; margin: 20px 33px 0 0; padding: 0}
#apply img{display: inline-block;}

/* banner */
.banner .container{height: 180px}
.banner .banner_con{width: 733px; margin: 0 auto; padding-top: 52px}
.banner p{float: left; margin: 24px 45px 0 0; color: #fff; font-size: 26px; letter-spacing: -1px}
.banner p span{color: #ffd401}
.banner h2{float: left; margin: 0;}

/* location */
#location .container{position: relative}
#location .h2_wrap{position: relative; height: 30px; margin-bottom: 65px; background: url(../images/h2_bg.jpg) repeat-x 0 12px}
#location h2{display: inline-block; position: absolute; left: 50%; padding: 0 15px; transform: translate(-50%, 0); background: #fff}
#location .map{width: 100%; height: 374px}
#location .cs{position: absolute; left: 109px; bottom: 0; width: 1062px; height: 136px; background: #fff}
.cs h3{float: left; margin: 37px 0 0 53px; padding-right: 42px; font-family: 'NanumSquare', sans-serif; font-size: 26px; font-weight: bold; letter-spacing: -1.5px; line-height: 30px; border-right: 1px solid #ccc}
.cs h3 span{color: #007bc7; font-size: 20px;}
.cs .call{float: left; margin: 48px 0 0 94px}
.cs .call .call_icon{float: left; margin-right: 20px;}
.cs .call p{float: left; margin-top: 12px; font-family: 'Roboto', sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -1.5px}
.cs .cs_time{float: right; margin: 48px 53px 0 0;}
.cs .cs_time .cs_time_icon{float: left; margin-right: 20px;}
.cs .cs_time ul{float: left; margin-top: -1px}
.cs .cs_time ul li{letter-spacing: -1px;}
.cs .cs_time ul li span{color: #007bc7}

/* site_banner */
.site_banner .container{width: 1310px}
.site_banner ul{width: 1310px; overflow: hidden;}
.site_banner ul li{float: left; margin: 14.5px}

/* footer */
.foot_link{width: 100%; height: 70px; background: #333}
.foot_link ul li{float: left; margin: 23px 161px 0 0;}
.foot_link ul li:last-child{margin-right: 0}
.foot_link ul li a{display: block; color: #ddd; font-size: 24px; letter-spacing: -1px}
.foot_link ul li:hover a{color: #fff}

.foot_con{padding: 46px 0}
.foot_left{float: left;}
.foot_info ul li{float: left;}
.foot_info ul li a{display: block; margin-right: 40px; color: #ddd; font-size: 18px; letter-spacing: -1px}
.foot_info ul li:hover a{color: #fff}
.foot_add{margin-top: 30px; color: #ccc; font-size: 15px; font-weight: 300;}
.foot_copy{margin-top: 16px; color: #ccc; font-size: 13px; font-weight: 300}

.foot_right{float: right;}
.foot_right .site_sel{width: 240px; height: 42px;}
.foot_right .site_sel select{width: 240px; height: 42px; padding: 0 10px; color: #fff; font-size: 18px; line-height: 42px; border: 1px solid #fff; background: #555; cursor: pointer}
.sns ul{margin: 30px 0 0 60px}
.sns ul li{float: left; margin-left: 20px}