@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

#fp-nav{position: fixed; z-index: 100; margin-top: 0 !important; transform:translateY(-50%); top: 50%; left:40px; margin-right:13px; opacity: 0; transition: all 0.5s; font-size:14px; color:#fff; font-weight:700; text-align:center; }
body.active #fp-nav {left:100px; opacity:1;}
body.active #fp-nav.hide {top:0; margin-top:0; transition: all 0.5s ease;}
.fp-viewing-3 #fp-nav{display:none;}

#fp-nav ul {position:relative;}
#fp-nav ul li {position:relative; width:1px; height:28px !important; margin:0 auto;}
#fp-nav ul li:last-child {display:none;}
#fp-nav ul li a {display:block; position:relative; width:100%; height:28px; box-sizing:border-box; }
#fp-nav ul li a:before {content:""; width:100%; height:0; background-color:#fff; position:absolute; left:0; top:0; transition: height 0.4s;}
#fp-nav ul li a span{display:block; position:relative; width:1px !important; top:0; left:0; margin:0 !important; height:100% !important; background-color:#fff; opacity:0.2; border-radius:0; transition: all 0.4s; }
#fp-nav ul li a.active:before {height:100%;}
#fp-nav .home{display:inline-block; width:17px; height:14px; background:url(../images/main/icon_home.svg)no-repeat center; background-size:contain;}
#fp-nav .cur { display:block;margin:10px 0 15px; font-size:15px; font-weight:600;}
#fp-nav .total {display:block;  margin-top:15px; font-size:15px; opacity:0.4; font-weight:700;}
#fp-nav.black ul li a:not(.active):before,
#fp-nav.black ul li a.active:before {background-color:#000;}
#fp-nav.black ul li a:not(.active) span {background-color:#000; }
#fp-nav.black {color:#000; }
#fp-nav.black .home{background:url(../images/main/icon_home_bk.svg)no-repeat center; background-size:contain;}

.fp-viewing-1 #fp-nav ul li:nth-child(1) a:before {height:100%;}
.fp-viewing-2 #fp-nav ul li:nth-child(1) a:before ,
.fp-viewing-2 #fp-nav ul li:nth-child(2) a:before {height:100%;}
.fp-viewing-3 #fp-nav ul li:nth-child(1) a:before ,
.fp-viewing-3 #fp-nav ul li:nth-child(2) a:before ,
.fp-viewing-3 #fp-nav ul li:nth-child(3) a:before {height:100%;}




/* section00 */
#mainVisual{position:relative; width:100%; height:100vh; overflow:hidden;}
#section00 .main_txt{position:absolute; top:50%; left:50%; margin-left:-680px; transform:translateY(-50%); z-index:3;}
#section00 .main_txt > *{animation:text-animation 1.5s cubic-bezier(0.2, 0, 0.2, 1) both;}
#section00 .main_txt h3{font-size:75px; font-weight:bold; line-height:0.8em; color:#fff; }
#section00 .main_txt > span{display:block; margin:30px 0; font-size:20px; font-weight:300; color:#fff; line-height:1.6em; word-break:keep-all; animation-delay:0.2s !important;}
#section00 .btnwrap{ animation-delay:0.4s !important;}
#scrolldown{position:absolute; bottom:72px; display:flex; align-items: center; justify-content: center;  z-index:3; text-transform:uppercase; cursor:pointer;}
#scrolldown span{display:inline-block; font-size:12px; font-weight:400; color:#fff; transform:rotate(90deg);}
#scrolldown span:after{content:''; position:relative; margin:0 0 0 6px; top:3px; display:inline-block; width:22px; height:16px; background:url(../images/main/icon_scroll.svg)no-repeat center; background-size:contain;  transform:rotate(-90deg);}

#section00{background: #111; z-index: 1; position:relative;}
#section00 .main_slider,
#section00 .slick-list,
#section00 .slick-track{width: 100%;height: 100%;outline:0; overflow:hidden;}
#section00 .main_slider .item{outline:0;}
#section00 .main_slider .item,
#section00 .main_slider .img{width: 100%;height: 100%;}
#section00 .main_slider .img{position:absolute;top: 0;left: 0;}

#scrolldown{opacity:0; position:absolute; left:50%; bottom:-200px; display:flex; flex-direction: column; align-items: center; justify-content: center;  z-index:3; text-transform:uppercase; cursor:pointer; transform:translateX(-50%); transition:bottom 0.6s, opacity 0.6s;}
#scrolldown em{display:inline-block; font-size:15px; font-weight:500; color:#fff; line-height:1em; margin: 0 0 10px;}
#scrolldown span{display:inline-block; font-size:12px; font-weight:400; color:#fff; transform:rotate(90deg);}
#scrolldown span:after{content:''; position:relative; margin:0 0 0 6px; top:3px; display:inline-block; width:22px; height:16px; background:url(../images/main/icon_scroll.svg)no-repeat center; background-size:contain;  transform:rotate(-90deg);}
#scrolldown i{display:block; overflow:hidden; position:relative; width:1px; height:60px; margin:0 auto; background:rgba(210,212,201,0.3);}
#scrolldown i:before{content:''; display:block; position:absolute; top:0px; left:0px; width:100%; height:30px; background:#fff; animation:scroll 2s cubic-bezier(0.48, 0.13, 0.09, 0.99) infinite;}
body.active #scrolldown{opacity:1; bottom:0;}

@keyframes scroll{
	0%{transform:translateY(-20px);}
	100%{transform:translateY(200%);}
}

.area_visual{position:relative; width:100%; }
.area_visual > .swiper,
.area_visual .list{height:100vh;}
.area_visual .swiper-container {position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; }
.area_visual .swiper-wrapper{width: 100%; height:100%;}
.area_visual .swiper-slide{width: auto; height: 100%; background-size: cover; background-repeat:no-repeat; background-position: 50% 50%;  }
.area_visual .swiper-slide .img{height: 100vh; transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1), transform 4s cubic-bezier(0.4, 0, 0.2, 1);}
.area_visual .visual01 .img{background:url(../images/main/main01.jpg)no-repeat center; background-size:cover;}
.area_visual .visual02 .img{background:url(../images/main/main02.jpg)no-repeat center; background-size:cover;}
.area_visual .visual03 .img{background:url(../images/main/main03.jpg)no-repeat center; background-size:cover;}
.area_visual .swiper-slide-active .img {animation:imagescale 5s both; }
.area_visual .list li{z-index:1 !important; height:100%; background-repeat:no-repeat; background-position:50% 0; background-size:cover; animation: imagescale 6s ease-in-out infinite alternate; -webkit-animation:imagescale 6s ease-in-out infinite alternate; -moz-animation: imagescale 6s ease-in-out infinite alternate; -o-webkit-animation: imagescale 6s ease-in-out infinite alternate;}
.area_visual .area_txt{z-index:99; position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); text-align:Center;}
.area_visual .area_txt .txt_wrap{opacity:0; transition:all 1s ease; overflow:hidden;}
.area_visual .area_txt .txt_wrap.v2{margin:18px 0 0; }
.area_visual .area_txt .txt_wrap.v3{margin:35px 0 0; }
.area_visual .swiper-slide-active .area_txt .txt_wrap{opacity:1;}
.area_visual .area_txt em{position:relative; opacity:0; display:inline-block; font-size:21px; font-weight:400; color:#fff; line-height:1.3em; word-break:keep-all; text-transform:uppercase; transform:translateY(50px); transition:all 1s ease;}
.area_visual .area_txt h3{font-size:70px; font-weight:700; color:#fff; line-height:1.3em; word-break:keep-all; letter-spacing:-1px;} 
.area_visual .area_txt .btn_more{animation-delay: 0.3s !important;}
.area_visual .swiper-slide-active .area_txt .txt_wrap > *{animation: txtUp 1.0s 0.5s; animation-fill-mode: both;}
.area_visual .swiper-slide-active .area_txt .txt_wrap.v1 h3{animation-delay:0.9s !important;}
.area_visual .swiper-slide-active .area_txt .txt_wrap.v2 h3{animation-delay:1.1s !important;}
.area_visual .swiper-slide-active .area_txt .txt_wrap em{animation-delay: 1.3s !important;}
.area_visual .swiper-slide-active .area_txt em{opacity:1; transform:translateY(0); animation: txtUp 1.0s 0.5s; animation-fill-mode: both;}
.area_visual .swiper-pagination{opacity:0; bottom:unset; top:33%; display: flex;  align-items: center; justify-content: center; animation-delay: 0.8s !important; transition:all 0.2s ease;}
.area_visual .swiper-pagination-bullet{width:9px; height:9px; border:3px solid #fff; background:#fff; opacity:1; transition:0.3s ease; box-sizing:border-box;}
.area_visual .swiper-pagination-bullet-active{width:14px; height:14px; background:transparent;}

.active .area_visual .swiper-pagination{animation:text-animation 1.5s cubic-bezier(0.2, 0, 0.2, 1) both;}


#section01{position:relative;}
.area_product{display:flex; width:100%; height:100%;}
.area_product > div{width:50%;}
.pd_txt{display:flex; flex-direction: column; justify-content: center; padding-left:260px; padding-right:50px; box-sizing:border-box;}
.pd_txt em{display:block;font-size:17px; font-weight:600; color:#00a2e6; line-height:1em; word-break:keep-all; text-transform:uppercase;}
.pd_txt h3{display:block; font-size:47px; font-weight:800; color:#222; line-height:1.5em; word-break:keep-all;}
.txt_wrap{overflow:hidden;}
.pd_txt .txt_wrap span,
.pd_txt .txt_wrap p{opacity:0; position:relative; top:50px; transition:all 0.4s ease-out; }
.txt_wrap.v1 em{position:relative; opacity:0;}
.pd_txt p{display:block; font-size:19px; font-weight:500; color:#999; line-height:1.6em; word-break:keep-all;}
.pd_txt .circle{position:absolute; top:-450px; left:5%; width:570px; height:570px; border-radius:50%; background:#e5f6fc;}
.pd_img{position:relative; height:100%; overflow:hidden;}
.pd_img img{width:100%; height:100%; transform:scale(1); transition:all 1.5s ease;}

#section01 .btn_more{opacity:0;}
.btn_more{ position:relative; top:50px; z-index:2; display:inline-block; width:170px; margin:45px 0 0; padding:18px 3px; border-bottom:2px solid #222; box-sizing:border-box; line-height:1em; transition:all 1s ease; overflow:hidden;}
.btn_more:before{content:''; position:absolute; top:50%; right:0; width:13px; height:11px; background:url(../images/common/icon_arr.svg)no-repeat center; background-size:contain; transform:translateY(-50%); transition:all 0.3s ease;}
.btn_more:after{content:''; position:absolute; bottom:-100%; left:0; right:0; height:100%; background:#111; transition:all 0.3s ease;}
.btn_more span{display:inline-block; font-size:15px; font-weight:600; color:#333; line-height:1em; box-sizing:border-box; word-break:keep-all; transition:all 0.3s ease;}
.btn_more:hover{padding:18px 15px;}
.btn_more:hover:before{right:10px; background:url(../images/common/icon_arr_wt.svg)no-repeat center; background-size:contain; }
.btn_more:hover:after{bottom:0; height:100%; z-index:-1;}
.btn_more:hover span{color:#fff;}

.btn_more.v2{position:absolute; top:unset; right:0; bottom:0; border:none; width:auto; margin:0; overflow:initial;}
.btn_more.v2:after{display:none;}
.btn_more.v2 span{padding-right:40px;}
.btn_more.v2:hover{padding:18px 3px;}
.btn_more.v2:hover:after{display:none;}
.btn_more.v2:hover span{color:#333;;}
.btn_more.v2:hover:before{right:-10px; background:url(../images/common/icon_arr.svg)no-repeat center; background-size:contain; }

.section.active-effect .pd_img img{animation:imagescale 3s both;}

.section.active-effect .pd_txt .txt_wrap.v1{ margin:0 0 45px; }
.section.active-effect .txt_wrap.v1 em{animation: slideUp .7s both; }
.section.active-effect .pd_txt .txt_wrap.v1 em{animation-delay:.3s;}
.section.active-effect .pd_txt h3 .txt_wrap span{animation: slideUp 1s both;}
.section.active-effect .pd_txt h3 .txt_wrap.v2 span{animation-delay:0.6s !important;}
.section.active-effect .pd_txt h3 .txt_wrap.v3 span{animation-delay:0.68s !important;}
.section.active-effect .pd_txt h3 .txt_wrap.v4 span{animation-delay:0.8s !important;}
.section.active-effect .pd_txt .txt_wrap p{animation: slideUp .7s both; }
.section.active-effect .pd_txt .txt_wrap.v5{margin:50px 0 0; }
.section.active-effect .pd_txt .txt_wrap.v5 p{animation-delay:0.9s !important;}
.section.active-effect .pd_txt .txt_wrap.v6 p{animation-delay:1s !important;}
#section01.active-effect .btn_more{animation: slideUp 1s both 1.2s;}


.pd_circle{position:absolute; top:50%; left:50%; width:205px !important; height:205px; transform:translate(-50%, -50%); border-radius:50%; box-shadow: 0px 5px 12.75px 2.25px rgba(56, 125, 154, 0.28); animation:Spin 15s infinite linear;}


.area_title{position:relative; display:block;}
.area_title > div *{transition:all 0.3s ease;}
.area_title em{display:block; font-size:17px; font-weight:600; color:#00a2e6; line-height:1em; word-break:keep-all;}
.area_title h3{opacity:0; position:relative; display:block; margin:18px 0 0; font-size:50px; font-weight:800; color:#222; line-height:1em; word-break:keep-all;}
.area_title .btn_more{opacity:0;}
.non_board_data{text-align:center; width:100% !important; min-height:400px; display: flex; justify-content: center; align-items: center;}
#section02{position:relative; background:#f5f6f6;}
#notice_list{position:relative; margin:50px 0 0; display:flex;}
#notice_list > li{position:relative; opacity:0; margin:0 70px 0 0; background:#fff; width:-webkit-calc((100% / 3) - 48px); width:calc((100% / 3) - 48px);  box-shadow: 0px 5px 16px 4px rgba(0, 0, 0, 0.02); }
#notice_list > li:last-child{margin:0;}
#notice_list > li > a{display:block; width:100%; height:100%;}
#notice_list > li .area_img{width:100%; height:300px; overflow:hidden;}
#notice_list > li .area_img img{width:100%; height:100%; transform:scale(1); transition:all 0.6s ease;}
#notice_list > li .area_txt{padding:35px 40px; box-sizing:border-box;}
#notice_list > li .area_txt .subject{display:block; font-size:21px; font-weight:700; color:#222; line-height:1.4em; word-break:keep-all; overflow:hidden; text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height:59px;}
#notice_list > li .area_txt .data{display:block; margin:20px 0 0; font-size:15px; font-weight:600; color:#aaa; line-height:1em;}
#notice_list > li > a:hover .area_img img{transform:scale(1.05);}
.section.active-effect .area_title .txt_wrap.v2 h3{animation: slideUp 1s both 0.4s;}
.section.active-effect #notice_list{ }
.section.active-effect #notice_list > li{animation: slideUp 1s both .6s;}
.section.active-effect .btn_more.v2{opacity:1; }


#en .area_visual .area_txt em{line-height:1.4em;}

@keyframes slideUp {
  0% {
    top:100px;
    opacity:0;
  }
  100% {
    top:0;
    opacity:1;
  }
}



@-webkit-keyframes txtUp {
  from {
    -webkit-transform:translate3d(0, 250%, 0);
    transform:translate3d(0, 250%, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes txtUp {
  from {
    -webkit-transform:translate3d(0, 250%, 0);
    transform:translate3d(0, 250%, 0);
    visibility:visible;
    opacity:0;
  }
  to {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
    opacity:1;
  }
}





@keyframes Spin{
  0% {
    transform:translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform:translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform:translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes imagescale {
  0% {
    transform: scale(1.15)  rotate(.001deg);;
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -o-transform: scale(1.15);
  }

  100% {
    transform: scale(1)  rotate(.001deg);;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }
}





@keyframes text-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

@media all and (max-width:1800px){
	#en .pd_txt h3{font-size:43px;}
}
@media all and (max-width:1700px){
	.pd_txt{padding-left:12%;}
}
@media all and (max-width:1550px){
	#en .pd_txt h3{font-size:40px;}
	#en .pd_txt p{font-size:18px;}
}
@media all and (max-width:1500px){
	.area_visual .area_txt h3{font-size:65px;}
	#fp-nav{left:0;}
	body.active #fp-nav{left:3%;}
	.pd_txt{padding-left:8%;}

	#notice_list > li{margin:0 50px 0 0; width:-webkit-calc((100% / 3) - 33px); width:calc((100% / 3) - 33px);}
}

@media all and (max-width:1400px){
	.pd_circle{width:180px !important; height:180px;}
	.pd_circle img{width:100%; height:100%;}
	.pd_txt h3{font-size:43px;}
	.pd_txt .circle{left:1%;}
	#notice_list > li .area_img{height:270px;}
	#notice_list > li .area_txt{padding:35px;}

	#en .pd_txt h3{font-size:35px;}
	#en .pd_txt p{font-size:17px;}
}
@media all and (max-width:1300px){
	#notice_list > li{margin:0 40px 0 0; width:-webkit-calc((100% / 3) - 26px); width:calc((100% / 3) - 26px);}
	#notice_list > li .area_img{height:250px;}
	#notice_list > li .area_txt{padding:30px;}
	#notice_list > li .area_txt .subject{font-size:20px; min-height:56px;}
}
@media all and (max-width:1200px){
	.area_visual .area_txt h3{font-size:60px;}
	.section.active-effect .pd_txt .txt_wrap.v1{margin:0 0 30px;}
	.pd_txt h3{font-size:37px;}
	.section.active-effect .pd_txt .txt_wrap.v5{margin:40px 0 0; }
	.pd_txt p{font-size:18px;}
	.pd_circle{width:160px !important; height:160px;}

	.area_title h3{font-size:45px;}
	#notice_list > li .area_img{height:240px;}

	#en .pd_txt h3{font-size:30px;}
}

@media all and (max-width:1080px){
	#section01,
	#section02{display: block; width: 100%; height: auto !important; table-layout: fixed;}

	#section01 .fp-tableCell,
	#section02 .fp-tableCell{display:block; height:auto !important;}


	.area_visual .area_txt h3{font-size:55px;}
	.area_visual .area_txt em{font-size:20px;}
	
	.area_product{height:600px;}
	.pd_txt{padding:100px 8%;}
	.pd_txt .circle{width:400px; height:400px; top:-330px;}
	.pd_txt{padding:0 5%;}
	.pd_circle{width:140px !important; height:140px;}
	
	#section02{padding:100px 0;}
	.area_title h3{font-size:40px;}

	#notice_list > li{margin:0 30px 0 0; width:-webkit-calc((100% / 3) - 20px); width:calc((100% / 3) - 20px);}
	#notice_list > li .area_img{height:230px;}
	#notice_list > li .area_txt{padding:25px;}
	#notice_list > li .area_txt .subject{font-size:18px; min-height:51px;}
	#notice_list > li .area_txt .data{font-size:14px; margin:15px 0 0;}

	#en .pd_txt h3{font-size:27px;}
}

@media all and (max-width:950px){
	.area_product{height:550px;}
	.section.active-effect .pd_txt .txt_wrap.v1{margin:0 0 25px;}
	.pd_txt em{font-size:16px;}
	.pd_txt h3{font-size:32px; line-height:1.4em;}
	.section.active-effect .pd_txt .txt_wrap.v5{margin:30px 0 0; }
	.pd_txt p{ font-size:17px;}
	.btn_more{margin:30px 0 0; width:140px;}

	.area_title em{font-size:16px; }
	.area_title h3{margin:15px 0 0; font-size:37px;}
	#notice_list > li .area_img{height:200px;}

	#en .pd_txt p{font-size:15px;}
}
@media all and (max-width:900px){
	.area_visual .area_txt h3{font-size:50px;}
	.area_visual .area_txt em{font-size:19px;}
}
@media all and (max-width:850px){
	.section.active-effect .pd_txt .txt_wrap.v1{margin:0 0 20px;}
	.pd_txt em{font-size:15px;}
	.pd_txt h3{font-size:27px; line-height:1.4em;}
	.section.active-effect .pd_txt .txt_wrap.v5{margin:20px 0 0; }
	.pd_txt p{font-size:16px;}
	.pd_circle{width:110px !important; height:110px;}
	.btn_more{margin:20px 0 0; padding:15px 3px; width:120px;}
	.btn_more span{font-size:14px;}

	
	.area_title em{font-size:15px; }
	#notice_list > li{margin:0 20px 0 0; width:-webkit-calc((100% / 3) - 16px); width:calc((100% / 3) - 16px);}
	#notice_list > li .area_img{height:180px;}
	#notice_list > li .area_txt{padding:20px;}
	#notice_list > li .area_txt .subject{font-size:17px; min-height:48px;}

	#en .pd_txt h3{font-size:24px;}
	#en .pd_txt p{font-size:14px;}
}
@media all and (max-width:768px){
	.area_visual .swiper-pagination{top:37%;}
	.area_visual .area_txt .txt_wrap.v2{margin:10px 0 0;}
	.area_visual .area_txt .txt_wrap.v3{margin:23px 0 0;}
	.area_visual .area_txt h3{font-size:40px;}
	.area_visual .area_txt em{font-size:18px;}
	#scrolldown em{font-size:14px;}
	#scrolldown i{height:45px;}

	.area_product{flex-direction: column-reverse; height:auto;}
	.area_product > div{width:100%;}
	.pd_txt{padding:50px 5%;}
	.pd_txt h3{font-size:34px;}
	.pd_img{height:600px;}
	.pd_circle{display:none;}
	.pd_txt .circle{display:none;}

	#section02{padding:60px 0;}
	.btn_more.v2{margin:10px 0 0; position:relative; top:0; right:unset; bottom:unset;}
	.btn_more.v2:hover{padding:15px 3px;}
	.area_title h3{margin:10px 0 0; font-size:34px;}
	.section.active-effect .btn_more.v2{animation: slideUp .7s both 0.5s;}
	#notice_list{margin:20px 0 0; flex-wrap: wrap;}
	#notice_list > li{margin:0 20px 0 0; width:-webkit-calc((100% / 2) - 10px); width:calc((100% / 2) - 10px);}
	#notice_list > li:nth-child(2){margin:0;}
	#notice_list > li:last-child{margin:0 20px 0 0; display:none;}
	#notice_list > li .area_img{height:240px;}
	#notice_list > li .area_txt{padding:25px;}
	#notice_list > li .area_txt .subject{font-size:18px; min-height:51px;}
}

@media all and (max-width:650px){
	.area_visual .area_txt h3{font-size:35px;}
	.area_visual .area_txt em{font-size:17px;}

	.pd_img{height:500px;}
	.pd_txt{padding:40px 5% 60px;}

	#notice_list > li .area_img{height:200px;}
	#notice_list > li .area_txt{padding:20px;}
	#notice_list > li .area_txt .subject{font-size:17px; min-height:48px;}
}
@media all and (max-width:550px){
	.area_visual .area_txt .txt_wrap.v2{margin:7px 0 0;}
	.area_visual .area_txt .txt_wrap.v3{margin:15px 0 0;}
	.area_visual .area_txt h3{font-size:30px;}
	.area_visual .area_txt em{font-size:16px;}
	.area_visual .swiper-pagination{top:40%;}
	.area_visual .swiper-pagination-bullet{width:6px; height:6px; border:2px solid #fff;}
	.area_visual .swiper-pagination-bullet-active{width:10px; height:10px; border:2px solid #fff;}

	.pd_img{height:400px;}
	.btn_more{padding:10px 2px;}
	.btn_more:hover{padding:10px;}
	.btn_more span{font-size:13px;}
	#section02{padding:50px 0;}
	.area_title h3{margin:10px 0 0; font-size:30px;}

	#notice_list > li{margin:0 12px 0 0; width:-webkit-calc((100% / 2) - 6px); width:calc((100% / 2) - 6px);}
	#notice_list > li:nth-child(2){margin:0;}
	#notice_list > li .area_txt{padding:15px;}
	#notice_list > li .area_txt .subject{font-size:16px; min-height:44px; line-height:1.3em;}
	#notice_list > li .area_txt .data{font-size:13px; margin:10px 0 0;}
}
@media all and (max-width:500px){
	.area_visual .area_txt h3{font-size:25px;}
	.area_visual .area_txt em{font-size:15px; padding: 0 5%;}

	.pd_txt{padding:30px 5%;}
	.section.active-effect .pd_txt .txt_wrap.v1{margin:0 0 15px;}
	.pd_txt h3{font-size:29px; line-height:1.4em;}
	.pd_txt p{font-size:15px;}

	#section02{padding:40px 0;}
	.area_title h3{font-size:27px;}
	#notice_list > li .area_img{height:180px;}
}
@media all and (max-width:450px){
	.pd_img{height:350px;}
	.area_title em{font-size:14px;}
	.area_title h3{margin:7px 0 0; font-size:24px; line-height:1.2em;}

	.btn_more{margin:10px 0 0;}

	#notice_list > li{margin:0 0 12px; width:100%;}
	#notice_list > li:nth-child(2){margin:0 0 12px;}
	#notice_list > li:nth-child(3){margin:0; display:block;}
	#notice_list > li .area_img{height:250px;}
	#notice_list > li .area_txt .subject{-webkit-line-clamp: 1; min-height:21px;}
	#notice_list > li .area_txt .data{margin:7px 0 0;}
}
@media all and (max-width:400px){
	.area_visual .area_txt h3{font-size:22px;}
	.area_visual .area_txt em{font-size:14px;}
	.pd_txt h3{font-size:26px;}

}