@font-face {
    font-family: 'SBAggroL';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SBAggroM';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SBAggroB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#skip_nav a{position: absolute; left:-3000%; font-size: 1.4rem;}
#skip_nav a:focus{display: block; position: absolute; top:0; left:0; width:100%; font-size:18px; padding: 0; line-height: 52px; color:#fff; text-align: center; background-color: rgba(0, 0, 0, 0.6); z-index: 9999;}

#wrap { overflow:hidden; font-family:"Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif; font-weight:400; font-size:16px; word-break: keep-all;}
#wrap, p{word-break:keep-all;}
#wrap h2{font-weight: normal;}

.inner { width: 90%; max-width:1200px; margin:0 auto; position:relative; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.clearfix:after {content:""; display:block; clear:both;}
.blue{color: #3342a3;}
.red{color: #df363d;}
.text-center{text-align: center;}

.bg_gray{background: #f8f8f8;}
.bg_blue{background: #f2fbff;}
.mh_auto{min-height: auto !important;}

/*** Header ***/
#header { width:100%; background:#fff; z-index:222;}
#header h1 { position:relative; padding: 25px 0; text-align: center;}
#header .nav_all { display:none; }

/* gnb */
#wrap #gnb { position:relative; width:100%; background: linear-gradient(90deg, #333fa3, #008562);}
#wrap #gnb:after { content:''; display:block; clear:both; }
#wrap #gnb > ul {width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: center;}
#wrap #gnb > ul:after { display:block; clear:both; content:''; }
#wrap #gnb > ul > li { position:relative; z-index:120; }
#wrap #gnb > ul > li.on > a {}
#wrap #gnb > ul > li.on > a:after { width:100%; margin-left:-50%; background:#3342a3; }
#wrap #gnb > ul > li > a { display:block; position:relative; padding:17px 55px 14px; line-height: 100%; font-size:19px; color: #fff; font-family: 'SBAggroL'; }
#wrap #gnb > ul > li > a:after { display:block; position:absolute; left:50%; bottom:-2px; width:0; height:2px; content:''; transition:all 0.2s ease-out; }
#wrap #gnb > ul > li > ul { display:none; position:absolute; z-index:120; top:70px; left:0; width:100%; height:250px; }
#wrap #gnb > ul > li:first-child > ul {}
#wrap #gnb.open > ul > li > ul { display:block; }
#wrap #gnb span.bg { display:none; position:absolute; z-index:110; top:50px; left:0; width:100%; height:190px; background:rgba(255,255,255,0.98); box-shadow: 0px 10px 20px 0px rgba(107, 107, 176, 0.4);}
#wrap #gnb.open span.bg { display:block; }
#wrap #gnb.open > ul > li:first-child:before { display:block; }
#wrap #gnb > ul > li > ul > li > a { display:block; position:relative; padding:5px; font-size:16px; text-align:center; line-height:130%; color:#444;}
#wrap #gnb > ul > li > ul > li > a:hover { color:#3342a3; font-weight:500; }
.gnb_bar { width:100%; height:50px;}

/*** Footer ***/
footer {position:relative; letter-spacing: 0; padding: 35px 0 40px;}
footer #footer .inner{display: flex;}
footer #footer .address{padding:0 210px 0 50px;}
footer #footer .address strong{display: block; color: #444; font-size: 0.92em; font-weight: 500; margin-bottom: 5px;}
footer #footer .address p{ color: #666; font-size: 0.86em;}
footer #footer .address p span{margin-left: 20px;}
footer #footer .address p.copy{font-size: 0.76em; margin: 5px 0 0;}
footer #footer .address p.copy a{font-size: 0.64em; padding: 2px 4px; border: 1px solid #ccc; margin-left: 5px;}
footer #footer .sns_link{position: absolute; right: 0; top:0; display: flex;}
footer #footer .sns_link li{margin-left: 8px;}
footer #footer .wa_mark {position: absolute; right: 120px; top:0;}
footer #footer .wa_mark a{display: block; width: 85px;}
footer #footer .wa_mark a img{width: 100%;}

/*** Main Visual ***/
#mainVisual {position:relative; height: 485px;}
#mainVisual .swiper-container{width: 100%; height: 100%; overflow:inherit;}
#mainVisual .swiper-container .swiper-slide.slide01{background: #f5f5f5 url("/img/main/bg_visual01.png") no-repeat center 0;}

#mainVisual .visual_title{padding-top: 10%;}
#mainVisual .visual_title .tit{margin-bottom: 20px; font-size: 2.6em; font-family: 'SBAggroL'; line-height: 130%;}
#mainVisual .visual_title .tit strong{display: block; font-family: 'SBAggroM'; }
#mainVisual .visual_title .txt{color: #666; font-size: 1.06em;}

/*** Main Contents ***/
#mainContents .m_content{padding: 70px 0;}
.m_board{position: relative; margin-bottom: 70px;}
.m_board .title{margin-bottom: 30px; display: inline-block; border-bottom: 4px solid; border-image:linear-gradient(90deg, #3340a3, #008562); border-image-slice: 1;}
.m_board .title h2{font-size: 1.7em; font-family: 'SBAggroM'; line-height: 150%; }
.m_board .board_sec ul.m_notice{display: flex;}
.m_board .board_sec ul.m_notice li{width: 31.33%; border-radius: 20px; background: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); }
.m_board .board_sec ul.m_notice li:nth-child(2){margin: 0 3%;}
.m_board .board_sec ul.m_notice li a{display: block; width: 100%; padding: 30px; }
.m_board .board_sec ul.m_notice li .tit,
.m_board .board_sec ul.m_notice li .txt{word-wrap:break-word; display:block; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
.m_board .board_sec ul.m_notice li .tit{font-size: 1.4em; line-height: 130%;}
.m_board .board_sec ul.m_notice li .txt{margin: 20px 0 20px; color: #888;}
.m_board .board_sec ul.m_notice li .date{font-size: 0.84em;}
.m_board .btn_more{position:absolute; right: 0; top:-10px; font-size: 2em; color: #bbb;}

.m_bottom{display: flex; justify-content: space-between;}
.m_bottom .m_gallery{width: 66%; position: relative; padding: 45px; background: #effaff; border-radius: 20px;}
.m_bottom .m_gallery h2{width: 140px; float: left; font-size: 1.7em; font-family: 'SBAggroM'; line-height: 140%;}
.m_bottom .m_gallery h2 span{display: block;}
.m_bottom .m_gallery .photo_area {width: calc(100% - 140px); float: right;}
.m_bottom .m_gallery .photo_area ul li{width: 48%; float: left;}
.m_bottom .m_gallery .photo_area ul li:first-child{margin-right: 4%;}
.m_bottom .m_gallery .photo_area ul li .img{height: 178px;}
.m_bottom .m_gallery .photo_area ul li .img img{object-fit: cover; width: 100%; height: 100%;}
.m_bottom .m_gallery .photo_area ul li .tit{margin-top: 10px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis;}
.m_bottom .m_gallery .basic_btn{position: absolute; left: 45px; bottom: 45px;}

.m_bottom .m_reserv {width: 31.33%; padding: 45px; background: #333fa3 url(/img/main/bg_reserv.png) no-repeat right bottom; border-radius: 20px; color: #fff;}
.m_bottom .m_reserv h2{ font-size: 1.7em; font-family: 'SBAggroM'; line-height: 140%;}
.m_bottom .m_reserv p{font-size: 0.92em; margin-top: 10px;}

.m_banner{display: flex; justify-content:space-around; padding: 25px 0;}


/*** Sub Contents ***/
#subContents {position: relative;}
#subContents .sub_visual {position: relative; width: 100%; height: 259px; display: block; text-align: center; overflow: hidden; }
#subContents .sub_visual h2{font-size: 2.4em; font-family: 'SBAggroM'; color: #fff; line-height: 259px;}
#subContents .sub_visual.bg01{background:url(/img/sub/top_img01.jpg) no-repeat center 0; background-size: cover;}
#subContents .sub_visual.bg02{background:url(/img/sub/top_img02.jpg) no-repeat center 0; background-size: cover;}
#subContents .sub_visual.bg03{background:url(/img/sub/top_img03.jpg) no-repeat center 0; background-size: cover;}
#subContents .sub_visual.bg04{background:url(/img/sub/top_img04.jpg) no-repeat center 0; background-size: cover;}
#subContents .sub_visual.bg05{background:url(/img/sub/top_img05.jpg) no-repeat center 0; background-size: cover;}
#subContents .sub_visual.bg06{background:url(/img/sub/top_img06.jpg) no-repeat center 0; background-size: cover;}
#subContents .sub_visual.bg07{background:url(/img/sub/top_img07.jpg) no-repeat center 0; background-size: cover;}
#subContents .sub_visual.bg08{background:url(/img/sub/top_img08.jpg) no-repeat center 0; background-size: cover;}

#subContents .sub_content{position: relative; padding: 90px 0; min-height: 650px; overflow: hidden; border-bottom: 1px solid #e4e4e4;}
#subContents .sub_content.pb0{padding-bottom: 0;}
#subContents .sub_content .sub_title{display: flex; align-items: center; justify-content: space-between; margin: 0 0 30px;}
#subContents .sub_content .sub_title.mb0{margin-bottom: 0;}
#subContents .sub_content .sub_title h3{ font-size: 2.6em; font-family: 'SBAggroM';}
#subContents .sub_content h2{font-size: 2.5em; font-family: 'SBAggroM'; margin-bottom: 30px;}
#subContents .sub_content h2 small{font-size: 0.38em; font-family: 'SBAggroL'; font-weight: 300; display: block; text-transform: uppercase; color: #3342a3; letter-spacing: 0;}

.location{width: 60%; padding: 8px 0; overflow: hidden;}
.location ul{display: flex; justify-content:flex-end;}
.location ul li{font-size: 13px; padding-left: 10px; color: #90919e;}
.location ul li:before{content: '・'; padding-right: 10px;}
.location ul li:last-child{color: #333;}
.location ul li:first-child{ padding: 0;}
.location ul li:first-child:before{display: none;}

/*** Tab ***/
.sub_tab{position: relative; width: 100%; height: 80px; background:#f6f7f8;}
.sub_tab .depth{display: flex; justify-content: center;}
.sub_tab .depth li{line-height: 80px; width: 25%; text-align: center;}
.sub_tab .depth.w1 li{width: 100%;}
.sub_tab .depth.w2 li{width: 50%;}
.sub_tab .depth.w3 li{width: 33.33%;}
.sub_tab .depth li a{position: relative; display: block; width: 100%; height: 100%; font-size: 1.1em;}
.sub_tab .depth li.on{background: #fff; font-weight: 500;}
.sub_tab .depth li a:hover{background: #f1f1f1;}
.sub_tab .depth li.on a:hover{background: #fff;}

/*** About ***/
.section{padding: 80px 0;}
.mt80{margin-top: 80px;}
.about{display: flex; justify-content: space-between;}
.about .img{width: 60%;}
.about .img img{width: 100%; max-width: 679px;}
.about .text_area{width: 37%; font-size: 1.8em; line-height: 180%;}
.about .text_area span{font-size: 2em; font-weight: 500;}
.about .text_area strong{display: block;}
.about .text_area p{margin-bottom: 30px;}

.history{background: #f2fbff;}
.history .inner{display: flex; flex-wrap: wrap; }
.history dl{width: 50%; margin-bottom: 60px; display: flex;}
.history dl:last-child{margin-bottom: 0;}
.history dl dt{width: 150px; font-size: 2.4em; font-family: 'SBAggroM'; }
.history dl dd{padding-top: 10px;}
.history dl dd ul li{margin-bottom: 5px;}

.btn_sns {padding-top: 90px;}
.btn_sns .inner{display: flex; justify-content: center;}
.btn_sns a{display: inline-block; line-height: 95px; padding: 0 55px 0 110px; margin: 0 20px; border-radius: 20px !important; font-size: 1.7em; color: #fff; font-weight: 500;}
.btn_sns a.ico_cafe{background: #008126 url(/img/sub/ico_cafe.gif) no-repeat 35px center;}
.btn_sns a.ico_blog{background: #008126 url(/img/sub/ico_blog.gif) no-repeat 35px center;}

.mission,
.vision{ text-align: center;}
.mission p,
.vision p{font-size: 1.3em; margin-bottom: 50px;}
.vision ul li{margin-top: 20px; background: #fff; padding: 20px; box-shadow: 0px 0 15px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; font-size: 1.3em; font-weight: 500;}

.value{text-align: center;}
.value ul {display: flex; justify-content: space-between; margin-top: 50px;}
.value ul li{width: 23%; margin-bottom: 35px; background: #fff; padding: 60px 40px; font-size: 1.2em; font-weight: 500; border: 2px solid #008562; border-radius: 20px; }
.value ul li strong{font-size: 1.4em; font-family: 'SBAggroM';}
.value ul li p{margin: 10px 0 5px; font-size: 1.1em;}
.value ul li small{color: #888; font-weight: 400;}

.business{display: flex; justify-content: space-between; }
.business dl{width: 31.33%; margin-bottom: 35px; background: #fff; padding: 60px 40px; box-shadow: 0px 0 15px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; font-size: 1.2em; font-weight: 500;}
.business dl dt{text-align: center; padding-bottom: 30px; margin-bottom: 20px; border-bottom: 1px dashed #ddd;}
.business dl dt span{display: inline-block; width: 80px; line-height: 80px; border-radius: 50%; background: #3342a3; color: #fff; font-size: 1.6em;}
.business dl dt strong{display: block; font-size: 1.5em; font-family: 'SBAggroM'; margin: 10px 0 0;}
.business dl dd ul li{margin-top: 8px; padding-left: 15px; font-size: 0.92em;}
.business dl dd ul li:before{content: '-'; margin:0 8px 0 -15px;}
.business dl dd ul li p{font-size: 0.84em; font-weight: 400; margin-top: 3px;}

.reservation{ padding: 80px 40px; background: #247497 url(/img/sub/bg_reserv.png) no-repeat center bottom; border-radius: 20px; color: #fff; text-align: center;}
.reservation .tit{font-size: 1.6em;}
.reservation .tit strong{font-weight: 600;}
.reservation .tit2{display: inline-block; font-size: 1.3em; margin: 30px 0 30px; border-bottom: 1px solid #dee7ec; font-weight: 500;}
.reservation .ico{width: 95px; line-height: 95px; border-radius: 50%; margin: 0 auto; background: #1c6382; color: #fff; font-size: 2.5em;}
.reservation .tell{font-size: 3em; color: #fff; font-weight: 700;}

.experience{padding: 90px; border-radius: 20px; color: #fff;}
.experience.bg01{background: url(/img/sub/bg_experience01.jpg) no-repeat center 0; background-size: cover;}
.experience.bg02{background: url(/img/sub/bg_experience02.jpg) no-repeat center 0; background-size: cover;}
.experience.bg03{background: url(/img/sub/bg_experience03.jpg) no-repeat center 0; background-size: cover;}
.experience .text_box p{font-size: 1.3em; margin-bottom: 40px}
.experience ul li{margin-top: 10px; padding-left: 15px; font-size: 1.16em;}
.experience ul li:before{content: '♥'; margin:0 8px 0 -15px; font-size: 0.92em;}
.experience ul li p{padding:2px 0 0 12px; font-size: 0.84em; font-weight: 300;}
.experience ul li p:before{content: '-'; margin-right:5px;}
.experience ul li a{display: inline-block; padding: 2px 8px; margin-left: 10px; font-size: 0.76em; border: 1px solid #e4e4e4;}
.experience ul li a:hover{background: #fff; color: #000; font-weight: 500;}

.tool_list ul{display: flex; flex-wrap: wrap;}
.tool_list ul li{width: 23%; margin-right: 2.66%; margin-bottom: 35px; background: #fff; padding: 30px; box-shadow: 0px 0 15px 0px rgba(0, 0, 0, 0.15); border-radius: 20px;}
.tool_list ul li:nth-child(4n){margin-right: 0;}
.tool_list ul li .img{display: flex; align-items: center; justify-content: center; height: 220px; }
.tool_list ul li .img img{max-width: 100%; max-height: 220px;}
.tool_list ul li .title{margin-top: 20px; text-align: center; line-height: 130%;}

.map .root_daum_roughmap{width: 100%;}
.map .root_daum_roughmap .wrap_map{width: 100%; height: 450px;}
.map .root_daum_roughmap .wrap_controllers{display: none;}
.map_info{font-size: 1.3em; margin: 30px 0 50px; color: #222;}
.map_info a{display: inline-block; margin:10px 40px 0 0;}

.btn_wrap{text-align: center; margin-top: 40px;}
.btn_wrap a{width: 400px; display: inline-block; padding: 15px 0; text-align: center; border-radius: 20px !important; font-size: 1.3em; color: #fff; font-weight: 500; background: #333fa3;}
.btn_wrap a:hover{background: #4b5bde; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);}