@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
*/


/* popup */

.mainPopup{position:fixed; top:230px; right:-100%; z-index:1000; width:450px; height:540px; background-color: #fff; border-radius: 3px; transition: all 1.7s ease-out 0s;}

.mainPopup.on{right:150px; transition: all 1s ease-out 0s;}
.mainPopup .pop_bottom{position:relative; overflow:hidden; height: 40px; line-height: 40px; background:#f8f8f8; border-radius: 0 0 3px 3px;}
.mainPopup > div #btn_close{display: block;float:right;background: none;line-height: normal;position: relative; height: 100%;padding:0 15px; border-left: 1px solid #ddd;}
.mainPopup > div #btn_close img{display:block;position:relative;vertical-align:middle;}
.mainPopup > div p{float:left; font-weight:300; font-size:14px; color:#fff;}
.mainPopup img{border-radius: 3px; border:1px solid #ddd;}
.mainPopup .bx-controls{z-index: 99; position: absolute; top:43%; right:0; width:100%; transform:translateY(-50%); transition:all 0.5s ease-out 0s;}
.mainPopup .bx-controls-direction a{display:inline-block; position:absolute; opacity:0.2; width:45px; height:67px; background-size:8px 12px !important; text-indent:-9999px; transition:all 0.2s ease-out 0s;}
.mainPopup .bx-controls-direction a.bx-prev,
.mainPopup .bx-controls-direction a.bx-next{opacity:1; right:0; background:rgba(255,255,255,0.3) url(/img/img_arrow.svg) no-repeat 50% 50%; transition:all 0.5s ease-out 0s;}
.mainPopup .bx-controls-direction a.bx-prev{right:inherit; left:0; transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.mainPopup #bx-pager{background:#fff; border:1px solid #b0b0b0; border-top:0;}
.mainPopup #bx-pager li a{display: table-cell;vertical-align: middle; font-size:12px; letter-spacing:-1px; transition:all 0.2s ease-out 0s;}
.mainPopup #bx-pager li{float:left;width: 33.3%;text-align:center;display: table;height: 69px;padding: 14px 0;}
.mainPopup #bx-pager ul{overflow:hidden;}
#btn_popup{position:fixed;bottom:0px;right:10%;z-index:998;padding: 6px 30px;transition:all 0.4s ease-out 0s;background-image: linear-gradient(-60deg, #37578b, #002758);}
#btn_popup *{line-height:1.5; text-align: center; color:#fff; vertical-align:middle;}
#btn_popup > i{display: block; font-size: 12px; font-weight: 500;}
#btn_popup > p{display: block; font-size: 18px; font-weight: 700;}
#btn_popup img{position:relative; display: block; margin:15px auto 5px; text-align: center; width:12px; height:7px; transform:rotate(-180deg); -webkit-transform:rotate(-180deg);}
.pop_active #btn_popup{bottom:-145px;}
.mainPopup .list li a{display:block;}
.mainPopup .list li a .img{display:block; position:relative; width:100%; padding-top:120%; text-align:center; overflow:hidden;}
.mainPopup .list li a .img i{display:block; position:absolute; top:0; left:50%; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; transform:translateX(-50%);}

@media all and (max-width:468px){
.mainPopup.on{right:60px;transition: all 1s ease-out 0s;height: auto;}
}


.designCheck{padding-left:15px; font-size: 14px; font-weight: 300; color:#222; background-color:transparent;}
.designCheck input[type="checkbox"] + label{}

/* common */
.main{overflow-x:hidden;}
.main div[class^="area_"] .tit{position:relative; overflow:hidden; width:760px; background-position:50% 50%; background-repeat:no-repeat;}
.main div[class^="area_"] .tit > i{display:block; position:absolute; width:100%; height:100%; background-position: 50% 50%;}
.main div[class^="area_"] .tit > div{position:relative; top:50%; width:435px; transform:translateY(-50%);}
.main div[class^="area_"] .tit > div *{color:#fff;}
.main div[class^="area_"] .tit > div > em{font-weight:700; font-size:50px; line-height: 1.2;}
.main div[class^="area_"] .tit > div > em + p{margin-top:24px; font-size:16px;}
.main div[class^="area_"] .tit > div a{margin-top:50px;}
.main div[class^="area_"] .tit.v2{width:1158px;}
.main div[class^="area_"] .inr{width:-webkit-calc(100% - 760px); width:calc(100% - 760px);}
.main div[class^="area_"] .inr.v2{width:-webkit-calc(100% - 1158px); width:calc(100% - 1158px);}
.main div[class^="area_"] .inr > div{position:relative; top:50%; width:491px; transform:translateY(-50%);}
.main div[class^="area_"] .inr > div.v2{top:28%; width:491px; transform:translateY(-30%);}
.main div[class^="area_"] .inr.v3 > div{width:890px;}
h3{margin-bottom:40px; font-weight: 700; font-size: 50px;}
h4{font-weight:700; font-size:30px; color:#222;}
h4 + p{margin-top:9px; font-size:15px; color:#666;}
.scrolldown{bottom:50px;left:50%;pointer-events: none;cursor: default;}

/* fullpage */
.fp-viewing-2Page #header nav .gnb > li > a,
.fp-viewing-3Page #header nav .gnb > li > a{color:#222;}
.fp-viewing-2Page #header .btn_menu div > span,
.fp-viewing-3Page #header .btn_menu div > span,
.fp-viewing-5Page #header .btn_menu div > span{background-color: #222;}
.fp-viewing-2Page .scrolldown em,
.fp-viewing-4Page .scrolldown em{color:#222;}
.fp-viewing-2Page .scrolldown i,
.fp-viewing-4Page .scrolldown i{border-top-color:#dedede;}
.fp-viewing-5Page .scrolldown em,
.fp-viewing-5Page .scrolldown i,
.fp-viewing-3Page .scrolldown em,
.fp-viewing-3Page .scrolldown i,
.fp-viewing-5 .scrolldown em,
.fp-viewing-5 .scrolldown i{display:none;}
.fp-viewing-5 #header{top:-100px;}
.fp-viewing-2Page #header h1 > a,
.fp-viewing-4Page #header h1 > a,
.fp-viewing-5Page #header h1 > a{background-image:url(/images/common/logo02.svg);} 
.fp-viewing-2Page #header .area_util ul li a,
.fp-viewing-4Page #header .area_util ul li a,
.fp-viewing-5Page #header .area_util ul li a{color:rgba(0,0,0,0.5);}
.fp-viewing-2Page #header .area_util ul,
.fp-viewing-4Page #header .area_util ul,
.fp-viewing-5Page #header .area_util ul{background-color: #f7f7f7;}
.fp-viewing-2Page #header .area_util ul li a:after,
.fp-viewing-4Page #header .area_util ul li a:after,
.fp-viewing-5Page #header .area_util ul li a:after{opacity: 1; background: #ddd;}

/* main visual */
.area_visual{position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#000;}
.area_visual .list li,
.area_visual .bx-viewport{height:-webkit-calc(100vh - -0px * 1); height:calc(100vh - -0px * 1);}
.area_visual .list li{background-size:cover; background-position:50% 0; background-repeat:no-repeat;}
.area_visual .video{opacity:1; height:100%;}
.area_visual .videof,
.area_visual .videot{position:absolute; top:0px; left:0; min-width:100%; min-height:100%; width:auto; height:auto;}
.area_visual .txt{position:absolute; top:50%; width:100%; color:#fff; text-align:center; transform:translateY(-50%);}
.area_visual .txt h2{margin:0 auto; font-weight:700; max-width: 1300px; font-size:65px; line-height: 1.2; color: #fff;}
.area_visual .txt h2 > span{display: block; margin-bottom:25px; font-size:19px; font-weight: 400;}
.area_visual .txt h2 > img{display:block;}	
.area_visual .txt i{display:block; margin-bottom:30px; font-size:17px; text-transform:uppercase;}

/* map */
.area_map{position: relative; padding-left:0; top:0px; overflow: hidden; width:100%; transform:translate(0);}
.area_map i{display: block; width: 100%; height: 100vh;}

/* 공지 상단탭 */
.area_tab{position:relative;}
.area_tab > .inr{position:relative; margin:0 auto; text-align:center;}
.tabWrap .tabCont{display: none;}
.tabWrap .tabCont.on{display: block;}
.tabCnt{position:relative; margin:41px 0 0; min-height: 279px;}
.tabBtn{display:block; position: absolute; top:-80px; left:300px;}
.tabBtn > li{display:inline-block;}
.tabBtn > li a{display: inline-block; padding:2px 20px; font-size: 18px; font-weight:500; color:#222; text-align:center; border:3px solid transparent;}
.tabBtn > li.on a{color:#00974a; font-weight: 600; border-color:#00974a; border-radius: 35px;}
.tab_cont{overflow:hidden;}

/* 체육회소식 */
.area_news{position: relative; margin:0 auto; max-width: 1300px;}
.area_notice{position:relative; display:block; transition:all 0.6s ease-out 0s;}
.area_notice:after{content:''; display:block; clear:both;}
.area_notice ul{position:relative; display:block; width:100%; height:100%; margin:0 auto; font-size:15px; font-weight:500; text-align:left; transition:all 0.6s ease-out 0s;}
.area_notice ul li{display:block;}
.area_notice ul li a{display: block; float: left; padding:50px 40px; margin-right:51px; width:calc(100% / 3 - 34.1px); background-color:#f9f9f9; border:1px solid #f9f9f9; transition:all 0.6s ease 0s;}
.area_notice ul li a:hover{border-color:#00974a; box-shadow: 15px 15px 40px rgba(0,151,74,0.07);}
.area_notice ul li:last-child a{margin-right: 0;}
.area_notice ul li a .new{position:absolute; top:20px; font-size:14px; color:#00974a; font-weight:600;}
.area_notice ul li a i{display:block; margin-top:30px; color:#00974a; font-size: 14px; font-weight:700;}
.area_notice ul li a .noti_tit{display:block; margin-bottom:20px; height: 54px; font-size:17px; font-weight: 500; color:#222; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.area_notice ul li a em{display:block; height: 48px; overflow:hidden; font-size: 15px; font-weight:300; color:#818181; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.area_notice ul > div{text-align:center; margin:90px auto; width:100%; font-weight:400; color:#818181;}/*등록된 글이 없을때*/
.btn_more{position: absolute; display: block; top:-110px; right:0px; padding:20px 26px; font-size: 15px; line-height: 1.2; color:#fff !important; font-weight: 500; background-color: #00974a; transition:all 0.3s ease-out 0s;}
.btn_more:hover{background-color: #00a651;}

.area_photo,
.area_box{overflow:hidden;}
.area_photo,
.area_photo > *,
.area_box,
.area_box > *{height:100%;}
.area_photo > *{float:left;}
.area_photo > .tit{text-align:right;}
.area_photo > .tit > div{float:right; text-align:left;}
.area_photo > .inr > div{padding:0px 0px 70px 97px;}

/* 배너 */
.area_banner{position: relative; margin-top:50px;}
.area_banner li{display: block; float:left; margin-right:40px; width:calc(100% / 3 - 27.1px);}
.area_banner li:nth-child(3n){margin-right: 0;}
.area_banner li > a{display: block; position: relative;}
.area_banner li > a > img{display: block; width:100%;}
.area_banner li > span{display: block; margin:8px 0 30px; font-size: 15px; color:#444; text-align: center; letter-spacing: -0.2px; transition:all 0.2s ease 0s;}
.area_banner li:hover > span{color:#00974a; font-weight: 700;}
.area_banner li > a:after{content:''; display:block; top:0px; left:0px; width:100%; height:100%; box-sizing:border-box; position:absolute; border:1px solid #ddd; transition:all 0.2s ease 0s;}
.area_banner li > a:hover:after{border-width: 3px; border-color:#00974a;}



/* 갤러리 */
.area_photo > .inr > div.area_photo{margin-top:160px;}
.main div[class^="area_"] .inr.v3 > div.area_photo{width:100%;}
.area_photo .photoList > li{position:relative; margin-top:0;}
.area_photo .photoList > li .img{height:369px;}
.area_photo .photoList > li a > em{min-height: inherit; line-height: inherit; padding:30px 35px; letter-spacing: 0; border:0;}
.area_photo .photoList > li a .box_tit{opacity:0; text-align: center; transition:all 0.5s ease-out 0s;transform:translateY(0);}
.area_photo .photoList > li a.current .box_tit,
.area_photo .photoList > li a:hover .box_tit,
.area_photo .photoList > li a:focus .box_tit{opacity:1; transform:translateY(-20%);}
.area_photo .photoList > li a:hover img,
.area_photo .photoList > li a:focus img,
.area_photo .photoList > li a:hover .img,
.area_photo .photoList > li a:focus .img{opacity:1;}
.area_photo .photoList > li:nth-child(3n+2){margin:0;}
.area_photo .nodata{width:890px; height:auto !important;}
.area_photo .nodata.bx-clone{display:none;}
.area_photo.photo_slide .bx-wrapper{margin:0 auto;}
.area_photo.photo_slide .bx-wrapper li{position:relative; float:left; margin-right:41px; width:100%;}
.area_photo.photo_slide .bx-wrapper .bx-controls-direction{position:absolute; margin:10px 0 0 -30px; z-index:99; background:#fff;}
.area_photo.photo_slide .bx-wrapper .bx-controls a{position: relative; display:inline-block; position:relative; width:70px; height:70px; text-indent:-9999px;}
.area_photo.photo_slide .bx-wrapper .bx-controls a:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/main/img_arrow.svg) no-repeat 50% 50%; background-size:15px 8px;}
.area_photo.photo_slide .bx-wrapper .bx-controls a:first-child:after{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.area_photo.photo_slide .bx-wrapper .bx-controls a:last-child:before{content:""; position:absolute; opacity:0.6; top:19px; right:100%; width:1px; height:30px; background:#ccc;}

/* 찾아오시는길 */
.area_box > *{float:right;}
.area_box > .tit > div{float:left; padding-left:100px;}
.area_box > .inr > div{float:right; padding-right:97px;}
.area_box .inr > div .form{overflow:hidden;}
.area_box .inr div > div input[type="submit"]{width:156px;height:64px;border:none;font-size:14px;background-image:linear-gradient(-60deg, #f8d362, #d32020);outline:none;color: #fff;}
.area_box .inr div > div input[type="text"]{width:-webkit-calc(100% - 166px); width:calc(100% - 166px); height:64px; margin-right:10px; padding-left:18px; background:#f5f5f5; border:none; font-size:14px; color:#888; outline:none;}
.area_box .form a{display:inline-block; position:relative; padding:20px 20px 20px 70px; border:1px solid #222; font-weight:500; font-size:13px; color:#222;}
.area_box .inr div > div input::placeholder{font-weight:200; color:#bbb;}
.area_box .inr div > div + a span{display:block; position:absolute; top:50%; left:25px; width:16px; height:1px; background:#000;}
.area_box .inr div > div + a span:after{top:-4px;}
.area_box .inr div > div + a span:after,
.area_box .inr div > div + a span:before{content:""; display:block; position:absolute; left:0; width:16px; height:1px; background:#000;}
.area_box .inr div > div + a span:before{top:4px;}
.area_box .inr .form > *{float:left; margin-top:41px;}
.area_box .inr .form > div{width:-webkit-calc(100% - 207px); width:calc(100% - 207px); margin-right:40px;}
.area_box .inr .form > div > *{float:left; margin-top:0;}

.area_box .area_link{overflow:hidden; margin:84px 0 0 -40px;}
.area_box .area_link li{float:left; width:-webkit-calc((100%/3) - 1px); width:calc((100%/3) - 1px); border-right:1px solid #eee; text-align:center;}
.area_box .area_link li a{display:block;}
.area_box .area_link li a > img{width:30px; height:30px;}
.area_box .area_link li:last-child{border:none;}
.area_box .area_link li a i{margin-top:18px; display: block; font-weight:500; font-size:15px; color:#333;}

@media all and (max-width:1580px){
	.main div[class^="area_"] .tit{width:40%;}
	.main div[class^="area_"] .tit > i{background-size:cover; background-repeat:no-repeat;}
	.main div[class^="area_"] .inr{width:60%;}
    .main div[class^="area_"] .inr > div{width:100%;}
    .area_photo > .tit > div{padding-right: 50px;}
    
	.area_news,
	.main div[class^="area_"] .inr > div.v2{margin-top:100px;}
	
	.area_visual .txt h2{max-width: 700px; font-size:55px;}
	.area_visual .txt h2 > img{width:280px;}
	
	.area_photo > .inr > div{padding:0px 65px 220px;}
	
	.fp-viewing-4Page #fp-nav{display:none !important;}

	.area_notice ul li a{padding:40px 30px; margin-right:20px; width:calc(100% / 3 - 14.1px);}
	
	.area_box > .inr .form{padding-right:45px;}
	.area_box > .inr > div{padding-right:40px;}
	.area_box .area_link li a h6{font-size:17px;}
	.area_box .inr .form > div > div{width:-webkit-calc(100% - 182px); width:calc(100% - 182px); margin-right:15px;}

	.main div[class^="area_"] .inr.v3 > div.area_photo,
	.area_news{margin:60px 0;}
	.area_news,
	.main div[class^="area_"] .inr > div.v2,
	.main div[class^="area_"] .inr > div{position:relative; top:0px; padding:0 40px; transform:none;}
	.area_photo .nodata,
    .main div[class^="area_"] .inr.v3 > div{width:100%;}
    .main div[class^="area_"] .inr > div{top:28%;}
    .main div[class^="area_"] .inr > div.v2 + .area_photo{top:0;}

    .area_photo .photoList > li .img{height: 300px;}
    .area_photo.photo_slide .bx-wrapper li{width:260px !important;}

	h3,
    .main div[class^="area_"] .tit > div > em{font-size:40px;}
    h3{margin-bottom:15px;}

	.main div[class^="area_"] .tit > div{width:auto;}
    .main div[class^="area_"] .tit.v2{width:60%;}
    .main div[class^="area_"] .inr.v2{width:40%;}

	.area_visual .txt h2{max-width: 82%; font-size:50px;}
	.area_visual .txt h2 > img{margin:10px 0; width:265px;}
		
	.area_photo > .inr > div{padding:0px 65px 160px;}

	.area_box > .inr > div{float:inherit;}
	.area_box > .inr .form{padding-right:0px;}
	.area_box .inr .form > div{width:100%; margin-right:0;}
	.area_box .inr .form > div + a{display:none;}
	.area_box .area_link{margin-top:30px;}
	
	.fp-viewing-2Page #fp-nav.fp-right{top:40%;}
}

@media all and (max-width:1280px){
	h3,
	.main div[class^="area_"] .tit > div > em{font-size:35px;}
	h4{font-size:25px;}
	.tabBtn > li a{font-size: 15px;}

	.main div[class^="area_"] .inr,
	.main div[class^="area_"] .inr.v2,
	.main div[class^="area_"] .inr.v3 > div,
	.main div[class^="area_"] .tit.v2,
	.main div[class^="area_"] .tit{top:0; width:100%;}
	.main div[class^="area_"] .tit > i{display:block; position:absolute; width:100%; height:100%; background-position:50% 50%;}
	.main div[class^="area_"] .tit > div{float:none; overflow:hidden; top:auto; width:auto; padding:40px 30px; transform:none;}
	.main div[class^="area_"] .tit > div a{float:right; margin-top:0;}
	.main div[class^="area_"] .tit > div *:not(a){float:left;}
	.main div[class^="area_"] .tit > div > em + p{clear:both;}
	.main div[class^="area_"] .inr{width:100%;}
	.area_news,
	.main div[class^="area_"] .inr > div.v2,
	.main div[class^="area_"] .inr > div{padding:0 30px; top:0;}
    .area_photo > .inr > div.area_photo{margin-top: 0;}

	.tabBtn{position: relative; margin-top:20px; top:0px; left:0px;}
    .tabBtn > li a{font-size: 16px;}
    
    .area_photo .photoList > li .img{height: 260px;}
    .area_photo.photo_slide .bx-wrapper .bx-controls-direction{margin:0 0 0 -30px;}
    .area_photo.photo_slide .bx-wrapper li{width:220px !important;}
    .area_photo.photo_slide .bx-wrapper .bx-controls a:last-child:before{top:28px; height: 20px;}
	
	.area_photo,
	.area_photo > *,
	.area_box,
	.area_box > *{height:auto;}

    .main div[class^="area_"] .tit.v2{height:300px;}
    	
	.main div.area_box > .inr .form{width:-webkit-calc(100% - 60px); width:calc(100% - 60px);}
	.main div[class^="area_"] .inr.v3 > div.area_photo,
	.area_news{margin:40px 0;}
	.area_box{margin-top:40px;}
	.area_box > .inr{margin:40px 0;}
	.area_box > .inr > div{float:none;}	
	.area_box .inr h4 + p{margin-top:5px;}
}

@media all and (max-width:767px){
	.tabBtn > li a,
	.area_banner li > span{font-size:14px;}
	h4{font-size:16px;}
	h3{margin-bottom: 20px;}

	.area_news, .main div[class^="area_"] .inr > div.v2{padding:0 20px;}
	.main div[class^="area_"] .inr > div{padding:0 20px; width:100%;}
	.main div[class^="area_"] .inr > div{margin-top:0;}
	.area_news, .main div[class^="area_"] .inr > div.v2{margin-top:20px;}

	.area_box .area_link{margin:0;}

	.tabBtn > li a{padding:2px 10px; border-width: 2px;}
	
	.area_notice ul li a i{margin-top:15px;}
	.area_notice ul li a .noti_tit{font-size: 16px;}
    .area_notice ul li a em{font-size:14px;}
    .btn_more{top:-20px; padding:15px 20px; font-size: 13px;}

	.scrolldown{bottom:30px;}
	.scrolldown em{margin-bottom:15px; font-size:11px;}
	
	.area_visual{background:#000 url(/images/main/m_visual.jpg) no-repeat 50% 50% / cover;}
	.area_visual .video{display:none;}
    .area_visual .txt h2{font-size:38px;}
    .area_visual .txt h2 > span{margin-bottom:20px;}
	.area_visual .txt h2 > img{margin:10px 0; width:190px;}
	
	.main div[class^="area_"] .tit > div a{float:left; margin-top:30px; padding: 17px 25px; min-width:inherit;}
	h3,
	.main div[class^="area_"] .tit > div > em{font-size:30px;}
	.main div[class^="area_"] .tit > div > em + p{margin-top:5px; font-size:13px;}
	.main div[class^="area_"] .tit > div *:not(a){width:100%;}
	.main div[class^="area_"] .tit > div{padding:40px 20px;}
	.main div[class^="area_"] .inr > div{padding:0;}
		
	.main div.area_box > .inr .form{padding:0 20px;}
	.main div.area_box > .inr .form{width:-webkit-calc(100% - 40px); width:calc(100% - 40px); padding:0 20px;}
	.area_box{margin-top:0;}	
	.area_box .inr > div{padding:0 20px !important;}
	.area_box .inr h4{font-size:20px;}
	.area_box .inr h4 + p{font-size:13px;}
	.area_box .inr .form > div{position:relative;}
	.area_box .inr .form input[type="text"]{width:-webkit-calc(100% - 10px); width:calc(100% - 10px); height:54px; padding:0 13px; font-size:13px;}
	.area_box .inr .form input[type="submit"]{position:absolute; top:0; right:0;}
	.area_box .inr .form input[type="submit"]{width:116px; height:54px; font-size:12px;}
	.area_box .area_link{margin-top:35px;}
	.area_box .area_link li{width:-webkit-calc((100%/2) - 1px); width:calc((100%/2) - 1px);}
	.area_box .area_link li:nth-child(2)~*{margin-top:20px; width:100%;}
	.area_box .area_link li a i{font-size:14px;}
	.area_box .area_link li a img{height:45px;}
	.area_box .area_link li:nth-child(2){border:none;}

	.area_notice ul li a{margin:0 0 20px 0; padding:30px 25px; width:100%;}

	.area_banner{margin-top:20px;}
	.area_banner li{margin-right:15px; width:calc(100% / 2 - 8.1px);}
	.area_banner li:nth-child(3n){margin-right:15px;}
	.area_banner li:nth-child(2n){margin-right:0;}
    .area_banner li > span{margin:5px 0 15px 0;}
    
    .area_photo .photoList > li .img{height: 170px;}
    .area_photo.photo_slide .bx-wrapper li{width:140px !important; margin-right: 15px;}
    .main div[class^="area_"] .inr.v3 > div.area_photo{padding:0 20px 50px 20px;}

    /* 1023
    .mainPopup{position:fixed; top:50%; right: auto !important; left:50%; visibility:hidden; transform:translate(-50%, -50%); transition: all 0s ease-out 0s;}
    .mainPopup.on{visibility:visible; transition: all 0s ease-out 0s;}*/
    body:after{display:none;}
    
    .mainPopup{display: none; width:80%;max-width: 415px;}
	.mainPopup > img{width:100%;}
	.mainPopup > div p{font-size:13px;}
	#btn_popup{/* display: none; */right:5%;padding:18px 20px;}
    #btn_popup img{margin-left:27px;}
    .area_notice ul li a .noti_tit{margin-top:10px;}
}

@media all and (max-width:400px){
	.area_banner li > span{font-size:13px;}
	.area_banner li > span{font-size:0; text-indent: 100%;}

	h3{margin-bottom: 10px;}
	h3,
	.main div[class^="area_"] .tit > div > em{font-size: 25px;}
	.area_box .inr h4{font-size: 18px;}

    .area_visual .txt h2{line-height:1.5; font-size:26px;}
    .area_visual .txt h2 > span{margin-bottom:15px; font-size:15px;}
	.area_visual .txt h2 > img{margin:2px 0; width:160px;}
	.main div.area_box > .inr .form{width:100%; padding:0px;}

	.area_notice ul li a .noti_tit{font-size: 15px;}
	.area_box .area_link li a i,
    .area_notice ul li a em{font-size:13px;}
    .btn_more{display: none;}
	
	.area_box .area_link li a i{margin-top:10px;}
}

@keyframes visualScale{
	0%{transform:scale(1.3) rotate(.001deg);}
	100%{transform:scale(1) rotate(.001deg);}
}