@charset "utf-8";

body {background-color: #f9f9f9;}

/*main*/
 body {font-family:  'Noto Sans KR';  letter-spacing:-.5px; box-sizing:border-box; color:#333; font-size:14px; font-weight:300}
#fixedMenu { position: fixed; opacity: 0; left: -180px; top: 50%; transition: left .6s ease-in-out; z-index: 2; top: 50%; transform: translateY(-50%);}
#fixedMenu li {  margin-top: 25px;}
#fixedMenu li:first-child { margin-top:0;}
#fixedMenu li a {padding-left: 22px; position: relative; font-size:15px; color:#fff; opacity: .6; font-weight: 500;}
#fixedMenu li a::before { content:''; left:0; width: 8px; height: 8px; box-sizing: border-box; border: 1px solid #fff; position: absolute; top: 8px; transform: rotate(45deg);}
#fixedMenu li a.on {opacity: 1;}


#fixedMenu.active li a {color:#333;}
#fixedMenu.active li a::before { border: 1px solid #333; }

#fixedMenu.load { left:60px; opacity: 1; }


/*visual*/
.main_vis {overflow: hidden; position: relative;height: 100vh;}
.main_vis::before { content:''; display: block; background: url("/resources/img/main/liner.png")no-repeat center/cover; height: 192px; position: absolute; top: 0; left: 0; width: 100%; z-index: 2;}
.main_vis  .inner {height: 100vh;}
.main_vis .swiper-container { height: 100%;}
.main_vis .vis {width: 100%; height: 100%; overflow: hidden; position: relative; float: left;}
.main_vis .vis .vis_bg {background: url("/resources/img/main/main_vis.jpg?ver=0213")no-repeat center/cover; width: 100%; height: 100vh; position: absolute; transform: scale(1); transition: all .3s ease-in-out;}
.main_vis .vis1 .vis_bg{background: url("/resources/img/main/vis1.jpg")no-repeat center/cover;}
.main_vis .vis2 .vis_bg{background: url("/resources/img/main/vis2.jpg")no-repeat center/cover;}
.main_vis .vis3 .vis_bg{background: url("/resources/img/main/vis3.jpg")no-repeat center/cover;}
.main_vis .vis4 .vis_bg{background: url("/resources/img/main/vis4.jpg")no-repeat center/cover;}
.main_vis .inner {position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; height: calc(100vh - 50px);}

.main_vis .vis_txt { text-align:center; position:absolute; top:50%; transform:translate3d(-50%, -50%, 0); z-index:1; left: 50%; }
.main_vis .vis_txt .txt1 {color:#fff;font-family: 'Noto Serif KR'; font-weight: 200; font-size: 20px;  letter-spacing: 20px; margin-bottom: 27px;}
.main_vis .vis_txt .txt2_box { position: relative;}
.main_vis .vis_txt .txt2 {color:#fff; transition: .3s ease; padding: 38px 120px; font-size: 60px;font-family: 'Noto Serif KR'; position: relative;}
.main_vis .vis_txt .txt2_box::before {content: ''; display: block; width: 100%; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); top: 0;}
.main_vis .vis_txt .txt2_box::after {content: ''; display: block; width: 100%; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); top: 0;}
.main_vis .vis_txt .txt3 {color:#fff; font-size: 16px; margin-top: 27px;}
.main_vis .swiper-container.swiper1 .vis.swiper-slide-active .vis_bg{transform: scale(1); animation-name: zoomIn; animation-duration:4s; animation-fill-mode: forwards;}
.main_vis .swiper-container.swiper1 .vis.swiper-slide .vis_bg{ background-size:cover; background-position: center; width:100%; height:100%; position: absolute; left:0; top:0; transform: scale(1); }
.main_vis .swiper-container.swiper1 .swiper_btn_box {position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 1; text-align: center;}
.main_vis .swiper-container.swiper1 .swiper_btn_box .swiper-button { vertical-align: middle; position: relative; left: 0; right: 0; top:0;bottom: 0; background: none; width: 17px; height: 17px; outline: none; border: 4px solid #fff; display: inline-block; margin: 0; padding: 0; transform: rotate(-45deg); opacity: .6; transition: .3s ease;}
.main_vis .swiper-container.swiper1 .swiper_btn_box .swiper-button:hover{ opacity: 1;}
.main_vis .swiper-container.swiper1 .swiper_btn_box .swiper-button.swiper-button-prev { border-right: 0; border-bottom: 0;}
.main_vis .swiper-container.swiper1 .swiper_btn_box .swiper-button.swiper-button-next { border-left: 0; border-top: 0;}
.main_vis .swiper-container.swiper1 .swiper_btn_box .swiper-pagination { display:inline-block;position: relative; vertical-align: middle; margin: 8px 40px 0; }
.main_vis .swiper-container.swiper1 .swiper-pagination span { transition: .3s ease; display: inline-block; width: 8px; height: 8px; border: 1px solid #fff; box-sizing: border-box; border-radius: 0; background-color: inherit; opacity: 1; text-indent: -99999px; outline:none; transform: rotate(45deg); margin:0 10px;}
.main_vis .swiper-container.swiper1 .swiper-pagination span:last-child {margin-right: 0;}
.main_vis .swiper-container.swiper1 .swiper-pagination .swiper-pagination-bullet-active {background-color: #fff;}


/****** contents ******/
#business_field {padding: 120px 0 90px; background: url("/resources/img/main/sec2_bg.jpg")no-repeat center/cover;}
.tit_box { margin-left: 20px; display: inline-block;}
.tit_box .small_tit { font-size: 12px; font-weight: bold; letter-spacing: 8px; margin-left: 5px; margin-bottom: 15px; }
.tit_box .big_tit { font-size: 60px; font-weight: 200;line-height: 120%;} 
.tit_box .big_tit span {line-height: 120%;} 

.business_slide { text-align: center; font-size: 0; position: relative; outline: none; overflow: hidden; width: 100%; padding:60px 0 30px;}
/* .business_slide::after {content:''; display: block; clear: both;}  */
.business_slide .slick-list { width:100%; }
.business_slide .slide {outline:none; display:inline-block; font-size: 16px; width:18%;  margin:15px 1%; transition: .3s ease; box-shadow: 0px 5px 5px 5px rgba(0,0,0,0.15); text-align: center; background: rgba(255,255,255,.85); height:220px; box-sizing: border-box; position: relative;}
.business_slide .slide a { display: block;display: table; width: 100%; height
:100%}
.business_slide .slide .txt_box { vertical-align: middle; width: calc(100% - 22px); height: calc(100% - 22px); border: 1px solid #4f4c55; transition: .3s ease-in-out; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); display: table;}
.business_slide .slide .txt_box .zindex {display: table-cell; vertical-align: middle;}
    


.business_slide .slide .txt_box .title { z-index: 1; position:relative; font-size: 25px; margin-bottom: 17px; } 
.business_slide .slide .txt_box .ico { z-index: 1; position:relative;  margin-bottom:5px; display: inline-block; width: 45px; height: 45px; background: url("/resources/img/main/sec2_ico1.png")no-repeat center;} 
.business_slide .slide.item2 .txt_box .ico {background: url("/resources/img/main/sec2_ico2.png")no-repeat center;}
.business_slide .slide.item3 .txt_box .ico {background: url("/resources/img/main/sec2_ico3.png")no-repeat center;}
.business_slide .slide.item4 .txt_box .ico {background: url("/resources/img/main/sec2_ico4.png")no-repeat center;}
.business_slide .slide.item5 .txt_box .ico {background: url("/resources/img/main/sec2_ico5.png")no-repeat center;}
.business_slide .slide.item6 .txt_box .ico {background: url("/resources/img/main/sec2_ico6.png")no-repeat center;}
.business_slide .slide.item7 .txt_box .ico {background: url("/resources/img/main/sec2_ico7.png")no-repeat center;}
.business_slide .slide.item8 .txt_box .ico {background: url("/resources/img/main/sec2_ico8.png")no-repeat center;}
.business_slide .slide.item9 .txt_box .ico {background: url("/resources/img/main/sec2_ico9.png")no-repeat center;}
.business_slide .slide.item10 .txt_box .ico {background: url("/resources/img/main/sec2_ico10.png")no-repeat center;}


.business_slide .slide .txt_box .more_btn { z-index: 1; position:relative; display: inline-block; border: 1px solid #4f4c55; font-size: 14px; padding: 5px 37px; color: #4f4c55; border-radius: 50px; transition: .3s ease;} 
.business_slide .slide:hover { background: #4f4c55; transform:translateY(-20px);}
.business_slide .slide:hover .txt_box { background:#fff;}
/* .business_slide .slide:hover .txt_box::before { display: none; background:#fff; z-index:1;} */

.business_slide .slide:hover .txt_box .more_btn { background: #4f4c54; color:
#fff;}

.business_slide .slick-dots { position: absolute; right: 0; top:0; padding:5px 10px;  background: #bb8e00; border-radius: 20px;}
.business_slide .slick-dots li {display: inline-block;  margin: 0; font-size:13px; transition: .3s ease;  border-radius: 3px; width
:26px; height:20px; text-align: center;  text-align: center; }
.business_slide .slick-dots li button {padding:0; outline: none; color:#fff;}
.business_slide .slick-dots li:hover, .business_slide .slick-dots li.slick-active { background: #fff;}
.business_slide .slick-dots li:hover button, .business_slide .slick-dots li.slick-active button { color:#bb8e00;}

.business_slide .slide.slick-active {}


#business_field .slide_btn {outline:none; text-indent: -99999px; position:absolute;transition: .3s ease; position: absolute; left:auto; right: auto; top:50%; transform:translateY(-50%);outline: none; border:none; margin:0; border-radius: 50px; width: 50px; height: 50px;}
 

#business_field .slide_btn_box {text-align: center; position: relative;}
#business_field  .slide_btn_box .bis_txt {font-size: 24px; margin-top: 57px;}
#business_field .slide_btn_box .bis_btn {display: inline-block;  font-size: 17px; margin-top: 20px; padding:10px 49px; border: 1px solid #4f4c55;transition: .3s ease; }
#business_field .slide_btn_box .bis_btn:hover {background: #4f4c54; color:#fff}
#business_field .prev_btn.slide_btn { background:#4f4c55 url("/resources/img/main/sec2_slide_prev.png") no-repeat center; left:0; }
#business_field .next_btn.slide_btn { background:#4f4c55 url("/resources/img/main/sec2_slide_next.png") no-repeat center; right:0}
#business_field .slick-arrow:hover { background-color: #bc8f00;}
#about { font-size: 0; }
#about > div {width: 50%; height: 755px; display: inline-block; font-size: 17px;}
#about > .left { background: url("/resources/img/main/sec3_img.jpg") no-repeat center/cover;}
#about > .right { position: relative; background:#4f4c55 url("/resources/img/main/sec3_bg.png") no-repeat right top; padding:0 85px;  box-sizing: border-box;}
#about .right .txt_box {position: absolute; top:50%; transform:translateY(-50%); color:#fff;}
#about .right .txt_box .tit { font-weight: 200; font-size: 45px; position: relative;}
#about .right .txt_box .tit::after { content: ''; display: block; width:50px; height:1px; background: #fff; margin:35px 0 35px}
#about .right .txt_box .txt1 { font-size: 35px; font-weight:200; margin-bottom: 35px;}
#about .right .txt_box .txt1.mobile {display: none;}
#about .right .txt_box .txt2 { line-height: 160%; font-size: 16px; color:#eee; margin-bottom: 60px;}
#about .right .txt_box .more_btn { display: inline-block; padding: 12px 55px; color:#fff; border:1px solid #fff; transition: .3s ease;}
#about .right .txt_box .more_btn:hover {background:#fff; color:#000}
#ourteam { overflow:hidden; padding-top: 100px; box-sizing: border-box; background: url("/resources/img/main/sec4_bg.jpg") no-repeat center/cover;  text-align: center;}
#ourteam .inner { height:100%}
#ourteam .img {}
#ourteam .img img { max-width: 100%;}
#ourteam .tit_box {margin-bottom: 60px;}
#ourteam .tit_box .tit { font-size: 40px; font-weight: 600;}
#ourteam .tit_box .txt { font-size: 20px;margin:15px 0 25px}
#ourteam .more_btn { display: inline-block; padding: 12px 55px; color:#fff;  background:#4f4c55; transition: .3s ease;}
#ourteam .more_btn:hover {background:#bc8f00;}

#counseling { background: url("/resources/img/main/sec5_bg.jpg")no-repeat center/cover; padding: 75px 0;}
#counseling::after { content: ''; display: block; clear: both;}
#counseling .sec_div { position: relative; box-sizing: border-box; width: 50%; float: left;}
#counseling .sec_div .tit { font-size: 40px;  font-weight: 200; margin-bottom: 37px;}
#counseling .left { padding-right:50px;}
#counseling .left .board_list {min-height: 380px;}
#counseling .left .board_list li { margin-top:20px; font-size: 0; }
#counseling .left .board_list li:first-child { margin-top:20px; }
#counseling .left .board_list li a { height: 80px; font-size: 16px; display: block;}
#counseling .left .board_list li .list_date { margin-right:20px; width: 80px; display: inline-block; text-align: center; border: 1px solid #4f4c55;  height: 100%; padding: 15px 0; box-sizing: border-box; transition: .3s ease;}
#counseling .left .board_list li .list_date span { display: block; }
#counseling .left .board_list li .list_date .day { font-size: 32px; font-weight: 500; line-height: 100%;}
#counseling .left .board_list li .list_date .month { font-size: 14px; line-height: 100%;}
#counseling .left .board_list li .list_title { transition: .3s ease; display: table; width: calc(100% - 100px); height: 100%; padding:0 20px; float: right; border:1px solid #ddd; box-sizing: border-box; position: relative;}
#counseling .left .board_list li .list_title span { max-width: 85%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; vertical-align: middle; display: inline-block; position: absolute; top:50%; transform: translateY(-50%);}
#counseling .left .board_list li:hover .list_date { background:#4f4c55; border:1px solid #4f4c54;  color:#fff;}
#counseling .left .board_list li:hover .list_title {border-color: #4f4c55; background: #eee;}
#counseling .more_btn {width: 37px; height: 37px; right: 50px; position: absolute; top:6px;}
#counseling .more_btn .txt { font-size:0}
#counseling .more_btn i {width: 1px; height: 50%; left: 50%; transform: translateX(-50%); top: 0px; content: ""; position: absolute; background-color: #000; display: inline-block; transition: all .3s ease;}
#counseling .more_btn i.top {transform-origin:right bottom;}
#counseling .right .more_btn { right: 0;}
#counseling .right .more_btn i { background: #fff;}
#counseling .more_btn i.middle {width: 36px; height: 1px; top: 50%; transform: translateY(-50%); left: 0;}
#counseling .more_btn i.bottom {bottom:0px; top: auto; transform-origin:right top;}
#counseling .more_btn:hover i.top, #counseling .more_btn:hover i.bottom {left: 100%;}
#counseling .more_btn:hover i.top {transform: rotate(-45deg);}
#counseling .more_btn:hover i.bottom {transform: rotate(45deg);}

#counseling .right { padding-left:50px;}
#counseling .right .tit { color:#fff;}
#counseling .right .board_list {border-top: 1px solid #ddd;min-height: 277px; margin-bottom: 20px;} 
#counseling .right .board_list li { border:1px solid #ddd; border-top: 0; box-sizing: border-box;}
#counseling .right .board_list li a { color: #ddd; display: block; padding: 16px 25px; box-sizing: border-box; font-size: 0; text-align: right; transition: .3s ease;}
#counseling .right .board_list li:hover a { background: #fff;}
#counseling .right .board_list li .list_title { float:left; display: inline-block; font-size: 16px;max-width: 60%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: middle;}
#counseling .right .board_list li .list_name { display: inline-block; font-size: 16px; width:25%; vertical-align: middle; text-align: center;}
#counseling .right .board_list li .list_date { display: inline-block; font-size: 16px; vertical-align: middle; text-align: center; float: right;}
#counseling .right .board_list li:hover .list_title {color:#333; text-decoration:underline;}
#counseling .right .board_list li:hover span {color:#333}
#counseling .tel_box { color:#fff; border-radius: 100px; background: #bb8e00 url("/resources/img/main/sec3_bg.png") no-repeat 11px top; box-sizing: border-box; padding: 21px 28px; background-size: 125px;}
#counseling .tel_box p {display: inline-block;vertical-align: middle;} 
#counseling .tel_box .tel_tit { margin-top: 5px; font-size: 24px;line-height: 100%;}
#counseling .tel_box .tel_num { float:right; color: #fff; font-weight: bold; background:url("/resources/img/main/tel_ico.png?ver=200914") no-repeat 0 center; font-family: 'Noto Serif KR'; line-height: 100%; font-size: 40px; padding-left: 38px;}


/*sec_map*/
#location {padding-top: 0;height: 750px; position: relative; overflow:hidden}
#location #map {height: 100%; width: 100%;}
#location .inner {position: absolute; z-index: 1; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%);}
#location .map_info { position:absolute; right: 0; box-sizing: border-box; background: rgba(79,76,85, .95); color:#fff; padding: 55px 50px; text-align:center; transform: translateY(-50%);}
#location .map_info::before { content:''; display: inline-block; width: calc(100% - 16px); height: calc(100% - 16px); box-sizing: border-box; border:1px solid rgba(255,255,255,.3); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0);}
#location .map_info .txt_box { position: relative;}
#location .map_info .tit { font-size: 30px; font-weight: 600; padding-top:50px;background: url("/resources/img/common/location_ico.png") no-repeat center top; margin-bottom: 23px; } 
#location .map_info .adrs { font-size: 17px; color:#fff; margin-bottom: 22px;}
#location .map_info .info_num { font-size: 17px; color:#fff; margin-bottom: 7px;}
#location .map_info .info_num .tel { font-weight: 500; margin-right: 15px;}
#location .map_info .info_num .txt a {color:#fff;}
#location .stop { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5;}

.map_box {position: relative; height:100%}
#location #btnMap { background:#de4552; box-shadow:0px 5px 10px 0 rgba(0,0,0,.2); border: 5px solid #fff; color:#fff; font-size: 17px; font-weight: bold;  padding:5px 30px; position: absolute; bottom: 30px; border-radius: 50px; left:50%;transform: translateX(-50%); z-index: 10; cursor: pointer; transition: all .3s ease-in-out; box-sizing: border-box;}
#location #btnMap:hover {background-color: #4f4c54;}
#location #btnMap span { transform: skew(-0.03deg); text-align: center; display: block;line-height: 40px;}

#location #btnMap span.off, #location #btnMap.on span.on {display: none;}
#location #btnMap.on span.off {display: block;}


#location #map.new-map { width: 100%; height: 100%; } 
#location #map.new-map .root_daum_roughmap_landing { width: 100%; height: 100%; }
#location #map.new-map .root_daum_roughmap .wrap_map { height: 100%; }
#location #map.new-map .root_daum_roughmap .wrap_controllers { display: none; }
#location .stop { display: none; }
#location .stop.on { display: block; }


@media screen and (max-width:1200px){
    .main_vis .vis_txt .txt2 { font-size: 40px; padding: 38px 40px;}
    #fixedMenu.load {left:20px;}
    #about > .left {width: 30%;}
    #about > .right {width: 70%;}
    
    #counseling .tel_box { text-align: center;}
    #counseling .tel_box .tel_tit {  display: block; font-size: 20px;}
    #counseling .tel_box .tel_num { font-size: 25px; line-height: 40px; display: inline-block; float: none;}
    .business_slide .slide { width: 23%;}
    .business_slide .slide .txt_box .title { font-size: 20px;}
}

@media screen and (max-width:768px){
    .main_vis {height: 500px;}
    .main_vis .vis_txt { width: 100%;}
    .main_vis .vis_txt .txt1 { font-size:15px; letter-spacing: 2px;} 
    .main_vis .swiper-container.swiper1 .swiper_btn_box { bottom: 30px;}
    #fixedMenu {display: none;}
    .main_vis .vis_txt .txt2_box { width:80%; margin: 0 auto;}
    .main_vis .vis_txt .txt2 { font-size:25px; padding:38px 0;}
    

    .tit_box .big_tit { font-size: 35px;}
    .tit_box .small_tit { letter-spacing: 1px;}
    #business_field { padding: 50px 0 100px;}
    .business_slide { padding: 30px 0 0; text-align: center;}
    .business_slide .slide { height: 169px; margin:10px 1%; width: 48%;}
    .business_slide .slide:hover { transform: none;}
    .business_slide .slide .txt_box {width: calc(100% - 15px); height: calc(100% - 15px);}
    .business_slide .slide .txt_box .title { font-size: 18px;}
    #business_field .slide_btn_box .bis_txt { font-size: 17px; width: 70%; margin:57px auto 0;}
    #business_field .slide_btn { width: 40px; height: 40px;}
    #business_field .slide_btn_box .bis_btn { padding: 10px 20px;}
    .business_slide .slide .txt_box .more_btn { padding:3px 27px}
    .business_slide .slick-dots { display: inline-block; bottom:0; top:0; right: 0; left: 0; position: relative; margin-top: 30px;}

    #about > div { height:auto;}
    #about > .left { display:inline-block;}
    #about > .right { width: 100%; padding:60px 20px; text-align: center; background-position: bottom right;    background-size: 280px;}
    #about .right .txt_box { position: relative; top: auto; left: auto; transform:none;}
    .main_vis .swiper-container.swiper1 .swiper_btn_box { width: 100%;}
    #about .right .txt_box .txt1 { font-size: 22px; margin-bottom: 10px;} 
    #about .right .txt_box .txt1.pc {display: none;} 
    #about .right .txt_box .txt1.mobile {display: block;} 
    #about .right .txt_box .tit { font-size: 35px;}
    #about .right .txt_box .tit::after { margin: 15px auto 15px; font-size: 35px;}
    #about .right .txt_box .txt2 { margin-bottom: 20px; font-size: 14px;}
    #about .right .txt_box .more_btn {padding: 12px 35px;}
    #ourteam { padding-top: 50px;}
    #ourteam .tit_box {margin-left: 0; margin-bottom: 20px;}
    #ourteam .tit_box .tit { font-size: 35px;}
    #ourteam .tit_box .txt { font-size: 15px;}
    #counseling { padding: 0;}
    #counseling .sec_div .tit { font-size: 25px;}
    #counseling .inner {width: 100%;}
    #counseling .sec_div { width: 100%; box-sizing: border-box;}
    #counseling .left { background: #f8f8f8; padding: 50px 20px;}
    #counseling .right { background: url("/resources/img/main/sec5_right_bg.jpg") no-repeat center/cover; padding: 50px 20px;}
    #counseling .left .board_list li a {height: 70px;}
    #counseling .left .board_list li .list_date {padding: 11px 0;}
    #counseling .more_btn, #counseling .right .more_btn {top: 46px;  right: 20px;}
    #counseling .right .board_list li .list_name { padding-right: 15px; width: auto;}
    #counseling .tel_box {padding: 11px 28px;}

    #location {height: auto; margin-bottom: 50px;}
    #location #map {height: 300px;}
    #location .inner { position: relative; transform: none; top: 0; left: 0 ;right: 0; bottom: 0; width: 100%;}
    #location .map_info {padding: 25px 20px; position: relative; transform: none; top: 0; left: 0 ;right: 0; bottom: 0;}
    #location .map_info .tit {padding-top: 0; margin-top: 20px; background: none; font-size: 24px; margin-bottom: 10px;}
    #location .map_info .info_num {display: inline-block; font-size: 15px;  margin: 0 5px 7px;}
    #location .map_info .info_num a {color:#fff;}
    
    #location #btnMap { font-size:14px; padding: 5px 22px; }
    
}

@media screen and (max-width:500px){


}