@charset "utf-8";
body{overflow-x:hidden;}
.layout{width:100%;max-width:1280px;margin:0 auto;}
.layout2{width:100%;max-width:1700px;margin:0 auto;}
.layout3{width:100%;max-width:2000px;margin:0 auto;}
.flex{display:flex;position:relative;}
.flex.between{justify-content:space-between;}
.flex.flex_left{justify-content:flex-start;}
.flex .wid_2n{width:48%;}
.flex .wid_3n{width:32%;}
.flex .wid_4n{width:24%;}

/* 헤더 */
#header{width:100%;z-index:98;margin:0 auto;background:#fff;}
#header .headerWrap{padding:30px 0;width:100%;display:flex;align-items:center;justify-content: space-between;}
#header .logo a{display:block;width:366px;height:51px;background:url('../images/common/logo.png') no-repeat center center/100%;font-size:0;}

/* 메뉴 */
#topMenu{position:relative;padding:0 50px;width:100%;}
.lnbWrap{position:relative;z-index:110;display:flex;align-items:center;justify-content:flex-end;}
.lnbWrap .menuTop{display:none;}
.mainMenu .depth1-ul{display:flex;justify-content:flex-end;}
.mainMenu .depth1-li{position:relative;margin:0 20px;}
.mainMenu .depth1-li > a{position:relative;color:#333;font-size:20px;font-weight:400;display:inline-block;padding:20px 10px;}
.mainMenu .depth1-li:hover > a::before{content:'';position:absolute;width:100%;height:14px;bottom:18px;left:0;border-radius:20px;background:#ffe966;z-index:-1}
.mainMenu .depth2-ul{display:none;padding:10px 0;position:absolute;left:50%;transform:translateX(-50%);min-width:160px;background:#ffe966;}
.mainMenu .depth1-li.on .depth2-ul{display:block;}
.mainMenu .depth2-li{text-align:center;}
.mainMenu .depth2-li > a{display:block;font-size:16px;font-weight:400;padding:5px;position:relative;color:#333;}
.mainMenu .depth2-li > a:hover{font-weight:600;}
.mainMenu .depth3-ul{display:none;}
.gnb_wrap{margin-left:20px;position:relative;}
.gnb_wrap .icon{display:block;padding:10px;}
.gnb_wrap > li:hover > .gnb{display:block;}
.gnb_wrap .gnb{display:none;position:absolute;transform:translateX(-50%);left:50%;font-size:13px;top:100%;background:#eee;border-radius:5px;padding:10px 5px;}
.gnb_wrap .gnb a{display:block;padding:2px 10px;}

.list_select{text-align:center;width: 100px;padding:2px;border: 1px solid #d7d7d7;border-radius:30px;display:flex;margin-right:30px;}
.list_select a{display:block;padding:2px 10px;text-align:center;font-size:14px;color:#333;border-radius:30px;}
.list_select .active a{color:#555;background:#fff;}

.btn-open-all{position:relative;width:22px;height:22px;right:0;display:block;border:0;background:none;outline:none;z-index:105;flex:1 0 auto}
.btn-open-all span{position:absolute;top:50%;left:0;width:20px;height:3px;background:#333;text-indent:-9999px;}
.btn-open-all span:before{content:"";display:block;position:absolute;top:-7px;width:20px;height:3px;background:#333;}
.btn-open-all span:after{content:"";display:block;position:absolute;top:7px;width:20px;height:3px;background:#333;}
.allMenu{position:absolute;left:100%;top:0;bottom:0;width:100%;z-index:9999;transition:all .5s;background:#1985ea;display:none;height:900px;border-radius:0 0 100px 100px;}
.allMenu.on{transform:translateX(calc( -50% - 950px));}
.allMenu h3{font-size:94px;color:#fff;font-weight:900;padding-right:5%;line-height:1;letter-spacing:0}
.allMenu h3 span{opacity:.2;letter-spacing:-.2rem}
.allMenu .btn-close-all{position:absolute;top:5%;right:5%;width:81px;height:81px;border:0;background:url('../images/common/all_menu_close.png') no-repeat;text-indent:-9999px;z-index:2}
.allMenu > .flex{display:flex;display:flex;justify-content:center;padding-top:12%;}
.allMenu .menuBox .depth1-li{width:100%;color:#fff;position:relative;margin:0 50px;}
.allMenu .menuBox .depth1-li > a{display:block;font-size:24px;font-weight:500;flex: 0 0 200px;padding:20px}
.allMenu .menuBox .depth1-li > a::before{content:'';position:absolute;margin-left:-20px;bottom:28px;width:15px;height:15px;border-radius:50%;transition:all .2s ease;}
.allMenu .menuBox .depth1-li:hover > a::before{background:#fff100;}
.allMenu .menuBox .depth2-ul{flex:1 0 auto;display:flex;border-bottom:1px solid rgba(256,256,256,.3);}
.allMenu .menuBox .depth2-li{margin-right:30px;}
.allMenu .menuBox .depth2-li > a{display:block;padding:20px 10px;font-size:17px;transition:all .3s;position:relative;border-radius:5px;position:relative;}
.allMenu .menuBox .depth2-li:first-child > a{padding-left:0;}
.allMenu .menuBox .depth3-ul{display:none;}
.allMenu .gnb{position:absolute;right:100px;top:200px;z-index:1}
.allMenu .gnb li a{color:#fff;display:block;padding:10px;}

/*  서브상단 */
#contentWrap{position:relative;}
.subSpot{width:100%;position:relative;height:380px;padding-top:140px;color:#fff;border-radius:100px;background:url('../images/sub/spot_01.jpg') no-repeat center/cover;}
.subSpot.spot01{background-image:url(../images/sub/spot_01.jpg)}
.subSpot.spot02{background-image:url(../images/sub/spot_02.jpg)}
.subSpot.spot03{background-image:url(../images/sub/spot_03.jpg)}
.subSpot.spot04{background-image:url(../images/sub/spot_04.jpg)}
.subSpot.spot05{background-image:url(../images/sub/spot_05.jpg)}
.subSpot.spot06{background-image:url(../images/sub/spot_06.jpg)}
.subSpot.spot07{background-image:url(../images/sub/spot_03.jpg)}
.subSpot.spot08{background-image:url(../images/sub/spot_07.jpg)}
@keyframes animate_background{
	0% {background-position:50% 0;}
	50% {background-position:50% 100%;}
	100% {background-position:50% 0.1%;}
}
.snb .pc_snb {display:flex;flex:1 0 auto;border-bottom:1px solid #ddd;}
.snb .pc_snb li + li{margin-left:30px;}
.snb .pc_snb li a{display:block;padding:30px 0;font-size:18px;color:#555;position:relative;}
.snb .pc_snb li a:hover,
.snb .pc_snb li.on a{color:#000;font-weight:600;}
.snb .pc_snb li.on a::before{content:'';position:absolute;width:100%;height:4%;bottom:0;left:0;background:#009cff;}
.mobile_snb{display:none;}
.menuDepth3{max-width:1280px;margin:0 auto;}
.menuDepth3 .nav{display:flex;align-items:center;border-bottom:1px solid #aaa;}
.menuDepth3 .nav li{flex:1 0 auto;text-align:center;line-height:90px;font-size:30px;font-weight:600;color:#aaa;position:relative;}
.menuDepth3 .nav li a{display:block;}
.menuDepth3 .nav li.on{color:#333;}
.menuDepth3 .nav li.on::before{content:'';position:absolute;width:100%;height:3px;background:#e6001f;left:0;bottom:-2px;}

#footer{color:#fff;font-size:14px;margin-top:5%;}
#footer .layout2{padding:5% 10%;display:flex;background:#009cff;border-radius:100px 100px 0 0;}
#footer .site_info{margin-left:5%;font-weight:300;display:flex;}
#footer .site_info .wrap{display:flex;}
#footer .site_info .wrap + .wrap{margin-left:20px;}
#footer .site_info .wrap dd{margin-left:10px;}
#footer .link{margin-left:auto;}
#footer .link ul{display:flex;}
#footer .link li{font-size:16px;font-weight:500;}
#footer .link li + li{margin-left:20px;}
#footer .copy{margin-top:10px;}

/* 메인 */
/* 메인공통 */
section + section{margin-top:10%;}
section .title h3{font-size:44px;font-weight:700;}

/* 비주얼 */
.bx-wrapper{margin-bottom:0;}
#visual{position:relative;margin-bottom:7%;}
#visual .bgWrap{height:670px;background-size:cover !important;border-radius:100px;overflow:hidden;}
#visual .text_box{padding-top:12%;color:#009cff;}
#visual .text_box h2{font-size:55px;font-weight:700;line-height:1.4}
#visual .text_box p{font-size:22px;margin-top:20px;}
#visual .slider_ctrl{position:absolute;bottom:10%;right:20%;display:flex;}
#visual .slider_ctrl a{display:block;width:120px;height:120px;border-radius:100%;border:1px solid rgba(256,256,256,.4);font-size:0;}
#visual .slider_ctrl a:hover{border:2px solid #fff;}
#visual .bx-prev{background:url('../images/main/visual_pre.png') center no-repeat;}
#visual .bx-next{background:url('../images/main/visual_next.png') center no-repeat;margin-left:-20px;}

/* section_01 */
.section_01 .icon_wrap{display:flex;justify-content:space-around;padding:0 3%;}
.section_01 .icon_wrap > li{flex:0 0 23%;margin:0 1%;position:relative;}
.section_01 .icon_wrap > li > p{background:#ffe966;font-size:24px;font-weight:600;border-radius:30px;padding:15px;text-align:center;position:relative;}
.section_01 .icon_wrap > li > p::before{content:'';position:absolute;bottom:50px;left:50%;transform:translateX(-50%);background:center/cover no-repeat;}
.section_01 .icon_wrap > li.icon_01 > p::before{width:39px;height:69px;background-image:url('../images/main/icon_01.png')}
.section_01 .icon_wrap > li.icon_02 > p::before{width:55px;height:67px;background-image:url('../images/main/icon_02.png')}
.section_01 .icon_wrap > li.icon_03 > p::before{width:48px;height:54px;background-image:url('../images/main/icon_03.png')}
.section_01 .icon_wrap > li.icon_04 > p::before{width:36px;height:59px;background-image:url('../images/main/icon_04.png')}
.section_01 .board_wrap{position:absolute;bottom:-100%;width:100%;background:#fff;border-radius:30px;box-shadow:0 0 10px rgba(0,0,0,.2);min-height:360px;padding:30px;transition:all .3s;opacity:0}
.section_01 .board_wrap .more{position:absolute;right:30px;top:30px;width:30px;height:30px;background:url('../images/main/more.png') #ffe966 center no-repeat;font-size:0;border-radius:100%;}
.section_01 .board_wrap .cat{font-size:24px;font-weight:600;}
.section_01 .icon_wrap > li:hover > .board_wrap{opacity:1;bottom:0;}
.section_01 .boardList1{margin-top:20px;border-top:1px solid #333;}
.section_01 .boardList1 li{border-bottom:1px solid #ddd;}
.section_01 .boardList1 a{display:flex;justify-content:space-between;align-items:center;padding:13px 0;}
.section_01 .boardList1 li:last-child{border-bottom:0;}
.section_01 .boardList1 a .title{font-size:16px;font-weight:300;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin-right:30px;}
.section_01 .boardList1 a .title:hover{color:#009fe3;font-weight:500;}
.section_01 .boardList1 a .date{font-size:13px;color:#7b7b7b;font-weight:300;}
.section_01 .noData{margin-top:30px;}

@media (max-width: 1600px) {
	/* 공통 */
	.layout2{padding:0 3%;}
	.section .in{max-width:1200px;width:calc(100vw - 150px);}
	.title_box h2{font-size:30px;margin-bottom:50px;}

	#header .headerWrap{padding:30px 0}
	.mainMenu .depth1-li{margin:0 30px;}
	.subSpot{width:95%;}

	#footer .layout2{padding:5%;}
}



/* 넓이가 1280px 이하일 때*/
@media all and (max-width:1280px) {
	.layout{padding:0 3%;}
	.mainContainer .layout{padding:0 3%;}
	.list_select{margin-left:auto;}

	/* 메뉴 */
    #header{padding:3%;background:none;}
	#header .headerWrap{padding:0;}
    #header .logo a{width:200px;padding-top:0;}
    #topMenu{width:auto;padding:0;}
	#wrap > .sns{z-index:99;top:30px;right:70px;}
	.btn-open-all{display:none;}
    .lnbWrap{overflow-x:hidden;overflow-y:scroll;position:fixed;right:-100%;top:0;width:100%;height:100%;margin-left:0;background:#3256bf;z-index:1000;transition:right 0.5s ease;display:block;}
    .lnbWrap.mn-open{right:0;overflow-y:auto;}
    .lnbWrap .menuTop{display:block;position:relative;width:100%;padding:30px 0 0 20px;}
    .lnbWrap .menuTop img{margin-left:3%;max-width:200px}
    .lnbWrap .menuTop .btn-close-mn{position:absolute;top:30px;right:20px;width:30px;height:30px;border:0;background:transparent;text-indent:-9999px;}
    .lnbWrap .menuTop .btn-close-mn:before,
    .lnbWrap .menuTop .btn-close-mn:after{content:'';display:block;position:absolute;top:50%;left:10px;width:20px;height:2px;background:#fff;}
    .lnbWrap .menuTop .btn-close-mn:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
    .lnbWrap .menuTop .btn-close-mn:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
    .mainMenu .depth1-ul{flex-direction:column;padding:10% 3%;width:100%;}
    .mainMenu .depth1-li{width:100%;border-bottom:1px solid rgba(265,265,265,.2);height:auto;margin:0;}
    .mainMenu .depth1-li > a{position:relative;padding:20px 15px;font-size:18px;color:#fff;line-height:1;text-align:left;}
	.mainMenu .depth1-li:hover > a::before{content:none}
	.mainMenu .depth1-li.is-open > a{font-weight:600;}
    .mainMenu .depth1-li > a:after{display:none;}
	.mainMenu .depth2-ul{position:relative;padding:10px 3%;top:0;background:#eee;width:100%;border-radius:0;}
	.mainMenu .depth2-li > a{color:#333;padding:5px;background:none;}
	.mainMenu .depth2-li:first-child > a{padding-left:5px;}
	.mainMenu .btn-more{display:block;position:absolute;top:17px;right:10px;width:25px;height:25px;background:url(../images/common/tn-icon-sm.png) -75px -25px no-repeat;transition:all .4s;font-size:0;z-index:1;cursor:pointer;}
	.mainMenu .depth1-li.on > .btn-more,
	.mainMenu .depth1-li.is-open > .btn-more{transform:rotate(180deg);}
    .mainMenu .depth2-li > a:before{content:none;}
	.m_gnb{display:flex;color:#fff;margin:5% 0;justify-content:flex-end;padding:0 3%;}
	.m_gnb a{padding:10px;}

	.searchBox{float:right;}
    /* 전체메뉴버튼 */
	.m_menu_open{position:absolute;right:30px;top:30px;z-index:100;}
    .btn-open-mn{position:relative;width:23px;height:20px;right:0;display:block;border:0;background:none;outline:none;z-index:105;}
    .btn-open-mn span{position:absolute;top:50%;left:0;width:23px;height:3px;background:#000;text-indent:-9999px;transition:all .3s ease;}
    .btn-open-mn span:before{content:"";display:block;position:absolute;top:-7px;width:23px;height:3px;background:#000;transition:all .3s ease;}
    .btn-open-mn span:after{content:"";display:block;position:absolute;top:7px;width:23px;height:3px;background:#000;transition:all .3s ease;}
    /* //메뉴 */

	/*  서브상단 */
	.subSpot{height:300px;border-radius:50px;}


	/* footer */
	#footer{margin-top:5vh;}
	#footer .layout2{flex-direction:column;}
	#footer .site_info{margin:30px 0 0;}
	#footer .site_info .wrap{justify-content:center;}
	#footer .link{margin-left:0;margin-top:30px;}
	#footer .link li{font-size:14px;}

	/* 메인 */
	/* visual */
	#visual .bgWrap{height:500px;}
	#visual .text_box h2{font-size:40px}

	.section_01 .icon_wrap{flex-wrap:wrap;padding:0;}
	.section_01 .icon_wrap > li{flex:0 0 48%;margin-top:50px;}
	.section_01 .board_wrap{opacity:1;bottom:auto;position:relative;margin-top: 10px;}
	.section_01 .boardList1 a .title{max-width:200px;}



}

/* 넓이가 810px 이하일 때*/
@media all and (max-width:810px) {
	.mainContainer .layout{padding:0 5%;}
	section + section{margin-top:15%;}

	/* 메뉴 */
	#header .logo a{width:180px;}

	/*  서브상단 */
	.subSpot{height:160px;padding-top:50px;}
	.subSpot .page_title{font-size:24px;}
	.snb{background:#f1efe9;position:static;transform:translateX(0);height:auto;display:block;}
	.snb .pc_snb{display:none;}
    .mobile_snb{display:block;}
    .mobile_snb .currentMenu{background:none;border:0;display:block;width:100%;}
    .mobile_snb .currentMenu span{font-size:16px;text-align:left;display:block;width:100%;line-height:40px;padding:0 25px 0 16px;color:#666;position:relative;}
    .mobile_snb .currentMenu span::before{content:'';position:absolute;right:16px;top:50%;width:6px;height:6px;margin-top:-4px;border:solid #666;border-width:1px 1px 0 0;transform:rotate(135deg);transition: transform .4s ease, margin-top .3s ease, -webkit-transform .4s ease;}
    .mobile_snb .pathDepth2.on span::before{margin-top:-3px; transform: rotate(-45deg);}
    .mobile_snb .pathDepth2 > ul{display:none;padding:15px 0;border-top:1px solid rgba(0,0,0,.2);}
    .mobile_snb .pathDepth2 > ul li a{color:#666;display:block;padding:5px 16px;font-size:14px;}
    .mobile_snb .pathDepth2 > ul li.on a{color:#000;}
    .mobile_snb .pathDepth3{display:none;}
	.menuDepth3 .nav li{font-size:16px;line-height:50px;}

	#footer .logo a{display:block;width:150px;margin:0 auto;}
	#footer .logo a img{width:100%;}
	#footer .layout2{border-radius:50px 50px 0 0}
	#footer .site_info{display:block;}
	#footer .site_info .wrap + .wrap{margin-left:0}
	#footer .link ul{justify-content:center;}
	#footer .link{text-align:center;}


	/* 메인공통 */
	section .title h3{font-size:26px;}
	section .title p{display:none;}

	/* visual */
	#visual .bgWrap{height:300px;border-radius:30px;}
	#visual .text_box h2{font-size:30px;}

	.section_01 .icon_wrap > li > p{font-size:18px;padding:10px;}
	.section_01 .icon_wrap > li > p::before{background-size:50%;bottom:25px;}
	.section_01 .board_wrap{padding:15px;min-height: 280px;}
	.section_01 .board_wrap .more{right:15px;top:15px;}
	.section_01 .board_wrap .cat{font-size:18px;}
	.section_01 .boardList1 a{padding:10px 0}
	.section_01 .boardList1 a .title{font-size:14px;max-width:100px;margin-right:0;}
	.section_01 .boardList1 a .date{display:none;}


}

/* 넓이가 768px 이하일 때*/
@media all and (max-width:768px) {

}


/* 넓이가 450px 이하일 때*/
@media all and (max-width:450px) {

	#visual .text_box{padding-top:30%;}
	#visual .text_box h2{font-size:20px;}


}