@charset "utf-8";
/* CSS Document */

@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);


/* section02 */
.a02_content {display: flex;}
.a02_content .area_02_left {width: calc(100% / 2); background-image: url(../img/main/area_02_left.jpg) no-repeat; flex-basis: 50%; flex-shrink: 0;}
.a02_content .area_02_left img {width: 100%;}
.a02_content .area_02_right {width: calc(100% / 2); display: flex;  align-items: center; justify-content: center; background-color: #f9f8fd;}
.a02_content .area_02_right h1 {font-size: 64px; font-weight: 800; color: #222; margin: 10px 0 65px 0;}
.a02_content .area_02_right h5 {font-size: 24px; font-weight: 800; color: #1d86ff;}
.a02_content .area_02_right p {font-size: 20px; color: #666; margin-bottom: 30px; font-weight: 300;}
.a02_content .area_02_right a {background-color: #1d86ff;  padding: 10px 75px; border-radius: 25px;  color: #fff; display: inline-block; margin-top: 15%;}
.a02_content .area_02_right a p{ display: inline; color: #fff; font-weight: 500;}
.a02_content .area_02_right a:hover {background-color: #013b7e; }


/* section03 */
.area_03{position:relative; background-size:cover; overflow:hidden;}

.area_03 .txt h2,
.area_03 .txt p{display:block; opacity:0; transform:translateY(50px); box-sizing:border-box;}
.fp-viewing-yogo .txt h2,
.fp-viewing-yogo .txt p{opacity:1; transform:translateY(0px);}
.fp-viewing-yogo .img{opacity:1; transform:translateX(0px); animation:scrollAni03 2s infinite alternate;}

.area_03_content {width: 100%; height:auto;}
.area_03_bg {position: fixed; top: 0; left: 0; z-index: -10; width: 100%; height: 100%;}
.area_03_bg img{width: 100%; height: 100%;}
.blog { display: flex; justify-content: center; align-items: center; position: fixed; bottom:50px; left: 50%; width: 160px; height: 46px; background-size: 300% 100%; border-radius:23px; font-size: 16px; font-weight: 500; color: #fff; z-index: 100; background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376); transform: translate(-50%,0); text-decoration: none; transition: all .4s ease-in-out; } 
.blog:hover { background-position: 100% 0; box-shadow: 0 2px 8px 0 rgba(45, 54, 65, 0.65); } 

.menu_wrap {position: absolute;top: 12% !important; left: 25%;/*width: 100%;max-width: 700px;*/ transform: translate(-50%,0);}
.menu_wrap .in_Layer {overflow: hidden;}
.menu {margin-top: 100px;}
.menu > li:last-child {padding-right: 0;}
.menu > li {display: flex; align-items: center;}
.menu > li a {display: flex;align-items: center;position: relative;height: 60px; width: 100%; font-size: 20px; font-weight: 500; letter-spacing:-0.025em; color: #555;text-decoration: none;}
.menu > li.active a {color: #fff; font-weight: 600;}

.menu > li .con_img1{background-image: url('img/main/products01.png'); width: 100%; height: 100%;}


.content {   display: flex; align-items: center; height: 1200px; font-size: 24px;  font-weight: 500;  box-sizing: border-box;    margin-left: 40%;}
.content .content_txt {color: #ddd; margin-left: 10%;}
.content .content_txt h2 {font-size: 50px; color: #7a81ff; font-weight: 700;}
.content .content_txt h3 {margin: 5px 0 75px 0;}
.content .content_txt p {font-size: 20px; font-weight: 300; margin:30px 0 8px 0; line-height: 28px;}
.content .content_txt span {font-size: 20px; font-weight: 300; display: block;  margin: 5px;}
.content .content_txt span::before,
.content .content_txt2 span::before{content: ""; display: inline-block; width: 4px; height: 16px; background: url(../img/icon/check.png) no-repeat center / cover; transition: .3s; margin: 0 10px 0 2px;}
.content .content_txt a p {background-color: #7a81ff; color: #fff;  padding: 5px 25px;  border-radius: 25px; display: inline-block;  font-size: 18px; margin-top: 85px;}
.content .content_txt2 {color: #ddd; margin-left: 10%;}
.content .content_txt2 h2 {font-size: 50px; color: #7a81ff; font-weight: 700;}
.content .content_txt2 h3 {margin: 5px 0 75px 0;}
.content .content_txt2 p {font-size: 20px; font-weight: 300; margin:8px 0 30px 0; line-height: 26px;}
.content .content_txt2 span {font-size: 20px; font-weight: 300; display: block;}
.content .content_txt2 a p {background-color: #7a81ff; color: #fff;  padding: 5px 25px;  border-radius: 25px; display: inline-block;  font-size: 18px; margin-top: 60px;}
.content .c_img{}

#con1, #con2, #con3 {}

.menu_wrap h1{font-size: 64px; font-weight: 800;  display: inline-block;  color: #abd2fe;  background: -webkit-gradient(linear, left top, right top, from(#7a81ff), to(#1d86ff)); 
	-webkit-background-clip: text;  -webkit-text-fill-color: transparent;  -webkit-text-size-adjust: none;}


/*scroll_txt*/
.scroll_wrap {overflow: hidden;}
.scroll_on {/*padding:50px 0; font-weight:700;*/ font-size: 24px;opacity: 0;transition: all 1s;}
.scroll_on.active {opacity: 1 !important;transform: translate(0, 0) !important;}
.scroll_on.type_bottom {transform: translate(0, 50px);}

.area_03_C {position: relative;}
.fixedB { display: flex; align-items: flex-start; width: 1200px; margin: 0 auto; } 
.fixed_box2 { width: 900px; height: 100vh;} 
.fixed_box1 { position: relative; width: 300px; height: 100vh;  } 
.fixed_box { position: absolute; width:300px; height: 500px;  display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: 500; } 


/* section04 */
.area_04{ text-align: center; height: 22vh;  background: url(../img/main/sec04_bg.jpg) no-repeat center / cover; color: white; padding-top: 5%;}
.typing {margin-bottom: 30px;}
.typing_txt{ display: inline;vertical-align: middle;   /*border-right: .05em solid #ddd;  animation: cursor 0.2s ease infinite;*/ font-size: 46px;  font-weight: 800;}
.area_04 a p{color: #fff; font-size: 24px; display: inline-block; border-radius: 10px; border: 1px solid #888; padding: 20px 100px; }

/* section05 */
.area_05 {background-color: #f9f8fd; padding: 50px 0;}

.bus01 .bus_list {display:block;}
.bus01 .bus_list  p{display:table; float:left; }
.bus01 .bus_list  a{display:table-cell; vertical-align: middle; width:calc(100% - 100px); padding:0 50px;  overflow:hidden;}
.bus01 .bus_list  p strong{ display:flex;align-items: center; margin-bottom:15px; font-size:27px;}
.bus01 .bus_list  p+p{ border-left:1px solid rgb(0,0,0,0.2)}
.bus01 .bus_list  p strong span{ display:inline-block; background:#edebea; padding:10px 20px; font-size:20px; font-weight:400; margin-left:10px; border-radius:10px; color:#777;}
.bus01 .bus_list  p em{ font-style:normal; font-size:20px; color:#777; }
.bus01 .bus_list  .slick-arrow{position:absolute; top:50%;transform: translateY(-50%);  font-size:0; cursor:pointer; z-index:2; background:none;}
.bus01 .bus_list  .slick-next{right:-60px;  }
.bus01 .bus_list  .slick-prev{ left:-60px;}
.bus01 .bus_list  .slick-next:before, .bus01 .bus_list  .slick-prev:before{font-family:xeicon; font-size:50px; color:#1d86ff;}
.bus01 .bus_list  .slick-next:before{content:"\e93f"}
.bus01 .bus_list  .slick-prev:before{content:"\e93c"}
.bus01 .control a{position:absolute; right:30px; top:2px; display:block; font-size:27px; display:none;}
.bus01 .control a.btn_stop{}
.bus01 .control a.btn_play{display:none; }

/* 슬라이드 공용 */
.slick-slider{transition:all ease-in-out .3s; 	box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;  user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
.slick-slide{ display:none; min-height:1px; vertical-align:middle; }
.slick-list{ overflow:hidden; }
.slick-list.dragging{ cursor:pointer; }
.slick-initialized .slick-slide{ display:inline-block; }
.slick-arrow.slick-hidden { display:none; }
.slick-current { opacity:1; display:block; }
.slick-initialized .slick-slide img {width: 150px; height: auto;}



/* products */
.products{width:100%; height:100%; background:url('/img/products_bg.jpg') no-repeat center/cover; padding: 160px 0; position: relative; overflow: hidden !important; background-attachment:fixed;}
.products h3.mTit{position: relative; z-index: 2; color:#fff; margin-bottom: 15px; font-size:2.5rem;}
.products .wrap-col {position: relative;}
.products .wrap-col.fixed{}
.products .wrap-col .aside {position: absolute; left: 50%; margin-left: -640px; top: 170px; z-index: 1; width: 350px;}
.products .wrap-col .aside.sticky-aside.fixed{position: fixed; top:50%; transform:translateY(-50%);}
.products .wrap-col .aside .lnb-mn {padding: 50px 0 5px 38px; margin: 0 0 0 2px; border-left:1px solid rgba(255,255,255,.2); position: relative; box-sizing:border-box;}
.products .wrap-col .aside .lnb-mn:after{content:''; width: 5px; height:5px; border-radius:100%; background-color: #52cbd9; position: absolute; top:0; left: -3px;} 
.products .wrap-col .aside .lnb-mn li{padding: 10px 0;}
.products .wrap-col .aside .lnb-mn li a{display:inline-block; font-size:13px; font-family: 'Poppins', sans-serif; font-weight: 600; color:rgba(255,255,255,.3); letter-spacing: 0.5pt; transition:all .3s linear;}
.products .wrap-col .aside .lnb-mn li a.active{color:#fff;}

.products-guide{position: relative; padding: 50px 0 50px 0; height: 620px; width: 100%; box-sizing:border-box;}
.products-guide.last{padding: 0 0 0 0; height: 0;}
.products-guide .products-info{opacity: .2; transition:all .3s linear; box-sizing:border-box; max-width:1280px; margin: 0 auto; padding: 130px 0 0;}
.products-guide .products-info:after{content:''; display: block; clear:both;}
.products-guide .products-info div{float: right; width: 350px;}
.products-guide .products-info.active{opacity: 1;}
.products-guide .products-info dd{word-break:keep-all;}
 
.products-guide .products-visual {position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); margin-left: -80px; transition: all .5s linear !important;}
.products-guide .products-visual.fixed{position: fixed; transition: all .5s linear !important;} 
.products-guide .products-visual .object{position: relative; width: 400px; height: 620px; opacity: 0; transition:all .3s linear; }
.products-guide .products-visual .object img{max-width:100%;}
.products-guide .products-visual .object .dot{display: block; width:22px; height: 22px; background:url('/img/dot.png') no-repeat center/100%; position: absolute;}
.products-guide .products-visual .object .dot.dot1{left:-10px ; top:140px; animation:dot1 2s linear infinite;}
.products-guide .products-visual .object .dot.dot2{right: -10px; top:380px; animation:dot2 2s linear infinite;}


@keyframes dot1 {
	from { opacity: 1; top:140px;}
	to { opacity: 0; top:210px;}
}

@keyframes dot2 {
	from { opacity: 1; top:380px;}
	to { opacity: 0; top:430px;}
}

/* 제품소개 설명 */
.products .wrap-col h4{font-size:1.125rem; font-weight: 300; letter-spacing: -0.75pt; color:#fff;}
.products .wrap-col h4 span{display: block; font-size:2.5rem; color:#2888f4; font-weight: 900; letter-spacing: 0.5pt; font-style:italic; margin-top: 12px;} 
.products .wrap-col h4 span.symphony{color:#2888f4;}
.products .wrap-col h4 span.cmp{color:#52cbd9;}
.products .wrap-col h4 span.contrabass{color:#21d094;}
.products .wrap-col dl.check_list{margin: 24px 0 50px;}
.products .wrap-col dl.check_list dd{color:rgba(255,255,255,.5); padding-left: 22px; background:url('/img/check.png') no-repeat left top 8px/13px; margin-bottom: 8px;}
.products .wrap-col dl.check_list dd:last-child{margin-bottom: 0;}
.products .wrap-col .moreBtn{background-image: url('/img/more_arrow_w.png'); color:#ffffff; } 
.products .wrap-col .moreBtn:after{background-color: rgba(255,255,255,.2);} 

.products-visual.active1 .object1{opacity: 1;}
.products-visual.active2 .object2{opacity: 1;}
.products-visual.active3 .object3{opacity: 1;}



/* Visual */
#visual{width:100%; height:100%; min-height:100vh; position: relative; overflow: hidden;}
#visual .visual_in{width: 100%; height: 100%; min-height:100vh;  position: absolute;}
#visual .visual_in video{position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
video[poster]{ /* 포스터 이미지의 크기를 비디오 영상에 꽉차도록 */ height:100%; width:100%;}
#visual .visual_in .v_txt_roll{position: absolute; left: 50%; transform:translateX(-50%); top:45%; max-width:1280px; width: 100%; padding: 0 15px;}
#visual .visual_in .v_txt{text-align:center; width: 100%; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;}
#visual .visual_in .v_txt h2{color:#fff; font-size:3rem; letter-spacing:0.3pt; width:100%; line-height: 145%;}
#visual .visual_in .v_txt p{font-size:1.125rem; color:rgba(255,255,255,.8); letter-spacing:-0.35pt; padding-top: 30px;}
#visual .scroll_down{position: absolute; bottom: -380%; left:50%; transform:translateX(-50%);}
#visual .scroll_down a{display: inline-block;}
#visual .scroll_down a span{display: block; font-size:12px; letter-spacing: 0.3pt; color:#fff; position: relative; padding-top: 60px;}
/*#visual .scroll_down a span:before{content:''; width:20px; height: 32px; background:url('../img/icon/scroll_mouse.png') no-repeat center/100%; position: absolute; top:0; left: 50%; margin-left: -10px;}*/
#visual .scroll_down a span:after{content:''; width: 10px; height: 12px; background:url('../img/icon/scroll_arrow.png') no-repeat center/100%; position: absolute; top:38px; left: 50%; margin-left: -4px; animation:move 1s linear infinite;}


@keyframes move {
	from { top:38px; opacity: 1;}
	to { top:46px; opacity: .4;}
}





@media all and ( max-width: 1920px ){

	.main-visual .visual-slider .swiper-slide .vs-txt{ }
	.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h2{ font-size:30px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .sTit{ font-size:60px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .bTxt{ font-size:23px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .link a{ font-size:20px;}

	#main .main-visual .visual-slider .swiper-slide .vs-txt h2 {font-size: 60px;}
	#main .main-visual .visual-slider .swiper-slide .vs-txt h3 {font-size: 30px;}
	#main .main-visual .visual-slider .swiper-slide .vs-txt p {font-size: 24px;}
	#main .main-visual .visual-slider .swiper-slide .vs-txt p span {font-size: 20px;}


	.main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ width:77px; height:77px; right:50px;}
	.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:77px;}

	.main-visual .visual-slider .swiper-pagination{ width:77px; margin-top:100px; right:50px;}

	#visual .scroll_down {bottom: -250%;}

	.a02_content .area_02_right h1 {font-size: 60px;}
	.a02_content .area_02_right p {	font-size: 18px;}

	.area_03_content{ height: auto; }
	.menu_wrap {left: 21%;}
    .content {height: 850px; }
	.content .c_img { width: 25%;}
	.content .content_txt h2, .content .content_txt2 h2 {font-size: 40px;}
	.content .content_txt p, .content .content_txt span, .content .content_txt2 p, .content .content_txt2 span {font-size: 18px;}
	.content .content_txt a p, .content .content_txt2 a p {padding: 2px 25px; font-size: 16px;}

	.slick-initialized .slick-slide img {width: 110px;}
	.bus01 .bus_list .slick-next:before, .bus01 .bus_list .slick-prev:before {font-size: 36px;}
}

@media all and ( max-width: 1680px ){
	
}
@media all and ( max-width: 1440px ){
	.main-visual {height:650px;}
	.main-visual .visual-slider .swiper-slide .vs-txt{ margin-top:20px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:40px;}
	
	
	.main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ width:57px; height:57px;}
	.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:57px; font-size:25px;}
	.main-visual .visual-slider .swiper-pagination{ width:57px; font-size:15px;}







}
@media all and ( max-width: 1280px ){
	
    .fixedB { display: block; width: 100%; } 
    .fixed_box2, .fixed_box1, .fixed_box { width: 100%; height: 300px; } 



}

@media screen and (max-width: 1180px) {
    .wrap {padding-top: 45px;}
    .menu > li a {height: 45px;font-size: 16px;}
    .content {height: calc(100vh - 45px);}
}

@media all and ( max-width: 1024px ){
	
	#header .header_in .global_wrap {  right: 35%; }
	
	.main-visual {height:550px;}
	.main-visual .visual-slider .swiper-slide .vs-txt{}
	.main-visual .visual-slider .swiper-slide .vs-txt .bTxt{ display:none;}
	.main-visual .visual-slider .swiper-pagination {  margin-top: 40px;}

	.header_banner a span {margin-left: 10px;}


}


@media all and ( max-width: 800px ){
	#header .header_in .global_wrap {  right: 32%; }

	#visual, #visual .visual_in {min-height: 65vh;}

	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:37px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2 span{ padding:0 0 20px 0;}
	.main-visual .visual-slider .swiper-slide .vs-txt .sTit{ font-size:20px;}

	#visual .visual_in .v_txt h2 {font-size: 34px; line-height: 1;}


	#header .header_in .topUtil ul li a {width: 45px;	height: 45px;	margin-left: 5px;}

	
}

@media all and ( max-width: 760px ){
    .header_banner a span { display: none;}

	.header_banner {  padding: 25px 0;  text-align: center;  font-size: 14px;   letter-spacing: -1px; }

	#header .header_in .global_wrap { right: 40%; }
}


@media all and ( max-width: 640px ){
    .main-visual { height: 400px;}
	#visual .visual_in .v_txt_roll {top: 100%;}

	#main .main-visual .visual-slider .swiper-slide .vs-txt h2 { font-size: 32px; }
    #main .main-visual .visual-slider .swiper-slide .vs-txt p { font-size: 18px; }

	.main-visual .visual-slider .swiper-slide .vs-txt{width: 98%;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:30px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .sTit{ font-size:18px;}
	
	.main-visual-btn{ position:absolute; bottom:30px; left:0; width:100%; text-align:center;}
	.main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ position:relative; right:auto; display:inline-block; margin:0 5px;width:37px; height:37px; border:none; background: rgb(0,0,0, 0.7);}
	.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ line-height:37px; font-size:20px;}
	.main-visual .visual-slider .swiper-button-prev{ margin-top:0;}
	.main-visual .visual-slider .swiper-button-prev, .main-visual .visual-slider .swiper-button-next{ right: -80%; }
	
	.main-visual .visual-slider .swiper-pagination{ display:none;}
	#main .main-visual .visual-slider .swiper-slide .vs-txt p a {font-size: 20px;}
	#main .main-visual .visual-slider .swiper-slide .vs-txt p span { font-size: 15px; margin: 0 5px;}

	#visual .visual_in {height: 15%;min-height: 30vh;}
	
}
@media all and ( max-width: 500px ){

#header .header_in .global_wrap {right: 44%;}

}


#main { background:#fdfaf7;}
#main h1{ font-size:50px; font-weight:700; text-align:center;}
#main h2{ font-size:28px; font-weight:400; text-align:center; color:#777; margin:20px 0 50px 0;}
#main h3{ font-size:28px; font-weight:400; text-align:left; color:#4b4b4b}
.blue { color:#1d86ff;}
.orange { color: #ffa613;}



#sec01 {padding:25px 0; background:#00508f;}
.sticky{ position: sticky; top: 90px;  left: 0px;  z-index: 10;}
#sec01 .sec01inner {width: 35%; margin: 0 auto;}
#sec01 .s01{display: flex; justify-content: space-around;align-items: center;}
#sec01 .s01 p{ font-size:28px; color: #fff; font-weight: 600;}
#sec01 .s01 p a{font-size:24px; background: rgba(255, 255, 255, 0.9); color: #00508f;  display: inline-block; padding: 13px 42px; border-radius: 10px;}


#sec02{ padding:160px 0;}
#sec02 .sec02box {margin: 0 auto; text-align: center; border-radius: 14px;}


#sec03 {background:url(../img/main/sec03_bg.jpg) no-repeat 50% 100%; background-size:cover; padding:120px 0;}
#sec03 h1 {display: flex; align-items: center; justify-content: center; color: #fff;}
#sec03 h1 a {background: #00508f; color: #fff; display: inline-block; padding: 15px 30px; border-radius: 10px; font-size: 25px; font-weight: 500; margin-left: 30px;}
#sec03 .s03box{background:rgba(0,0,0, 0.4); margin-top: 100px;}
#sec03 ul{padding: 100px; display: flex;  flex-wrap: wrap; justify-content: space-evenly; align-items: center}
#sec03 ul li{font-size:36px; color: #fff; width:calc((100% / 4) - 54px); text-align:center;}
#sec03 ul li+li{ border-left:1px solid rgb(255,255,255,0.2);padding-left: 30px;}
#sec03 ul li strong{font-size:36px; color: #8ad7ff;}
#sec03 .inner .ul p {font-size:22px; padding: 23px 0 10px 0;}


#sec04{ padding:160px 0;}
#sec04 .sec04box {margin: 0 auto; text-align: center; border-radius: 14px;}
#sec04 .sec04box img{margin-top: 30px;}


#sec05 {padding:100px 0; background:url(../img/main/sec05_bg.jpg) no-repeat 50% 100%; background-size:cover; padding:120px 0;}
#sec05 h1 { color: #fff;}
#sec05 ul{justify-content: space-between; text-align: center;}
#sec05 ul li {background-color:rgba(0, 0, 0, 0.4); width: calc((100% / 4) - 80px); color: #fff; padding: 80px 0; border-radius: 25px;}
#sec05 ul li img{ border-radius:20px; overflow:hidden;}
#sec05 ul li p{ margin-top:36px; font-size: 21px; color: #c0c0c0; font-weight: 300;}
#sec05 ul li span {display: block; font-size: 36px; font-weight: 600;}
#sec05 .s05box{margin-top: 100px;}
#sec05 ul li strong{font-size:36px; color: #8ad7ff; margin-bottom: 50px; display: block;}
#sec05 ul li .f29{font-size: 29px;}
#sec05 ul li:nth-child(1){}

#sec06 { padding: 75px; display: flex; align-items: center; justify-content: center;}
#sec06 p {display: flex; justify-content: center;}
#sec06 p a{color: #fff; font-weight:600;background:#ff6d3d; width: 235px; padding:21px 55px;  border-radius:10px; font-size:26px; text-align: center;}


#sec07 {background: #e4e4e4;; padding: 30px;}
#sec07 h1 {font-size: 40px; color: #00508f; margin: 0;}
#sec07 h2 {color: #00508f; margin: 0; padding-top: 10px;}





@media all and ( max-width: 1920px ){
	
	#main h1{ font-size:40px;}
	#main h2{ font-size:22px;}
	
	#sec01 .s01 p { font-size: 24px;}
	#sec01 .sec01inner {width: 50%;}
	#sec01 .s01 p a {font-size: 20px;}
	.sticky {top: 74px;}

	#sec03 .s03box {margin:100px 10px 20px 10px;}
	#sec03 ul {padding: 100px 60px;}
	#sec03 ul li {width: calc((100% / 4) - 25px);}
	#sec03 ul li strong {font-size: 30px;}
	#sec03 .inner .ul p {font-size: 20px;}

	#sec04 .tab_list_con dl dd .area strong{ font-size:23px;}
	#sec04 .tab_list_con dl dd .area .txtBox{ padding:20px;}
	
	#sec05 ul li strong {	font-size: 32px;}
	#sec05 ul li span {font-size: 30px;}
	#sec05 ul li p {font-size: 18px; margin-top: 23px;}
	#sec05 ul li {padding: 70px 0;}
	#sec05 ul li .f29 {font-size: 24px;}
	
}


@media all and ( max-width: 1400px ){
    .sticky { top: 66px; }
	#sec05 ul li { width: calc((100% / 4) - 15px);}

	.a02_content{display: block; position: relative;}
	.a02_content .area_02_left {width: 100%; display: none;}
	.a02_content .area_02_right {width: 100%; background-image: url(../img/main/area_02_left.jpg); background-repeat: no-repeat; background-size: cover;}
	.a02_content .area_02_right .area_02_right_txt{padding: 10% 0;}
	.a02_content .area_02_right h1{color: #fff;}
	.a02_content .area_02_right p{color: #ddd;}


	.content { height: 750px;}
	

}


@media all and ( max-width: 1280px ){
	#sec01 ul{gap:0; padding:30px 50px;}
	#sec01 ul li{ width:calc(100% / 4);}
	
	#sec02, #sec04{ padding:100px 10px;}

	#sec03 .inner, #sec05 .inner{ width: 1160px;}
	#sec03 .s03box { margin: 50px 0 0 0;}
	#sec03 ul{ padding:40px 10px}
	#sec03 ul li strong { font-size: 25px;}
	#sec03 .inner .ul p {font-size: 16px;  }
	#main h1, #main h2{ padding:0 10px;}

	#sec05 ul li {width: calc((100% / 4) - 10px);}
	#sec05 ul li strong { font-size: 25px;     margin-bottom: 30px;}
    #sec05 ul li .f29 {  font-size: 21px;  }


}




@media all and ( max-width: 1024px ){
    #sec01 .sec01inner { width: 80%; }

	#sec03 .inner, #sec05 .inner{ width: 960px;}

	#sec02 ul{gap:10px;}
	#sec02 ul li{ width:100%;}

	#sec02 .sec02box img, #sec04 .sec04box img{width: 95%;}

	#sec03 {padding: 80px 0;}
	#sec03 ul{gap:30px 10px; padding:0 10px;}
	#sec03 ul li{width: calc((100% / 2) - 40px);}
	#sec03 ul li+li {border-left: none; padding-left: 0;}
	#sec03 h1 a {font-size: 22px;}

	#sec04 dl{ display:block;}
	#sec04 .tab_list_con dl dt{ display:none;}
	#sec04 .tab_list_con dl dd{ margin-left:0; margin-top:10px;}
	
	.tab_list{gap:0;}
	.tab_list li{ width:29%;}

	
	.menu_wrap{display: none ! important;}
	.content {justify-content: center; margin-left: 0;}

	.area_04 {height: 18vh;}
	.typing_txt {font-size: 36px;}
	.area_04 a p {font-size: 20px; padding: 15px 85px;}

}

@media all and ( max-width:800px ){

.a02_content .area_02_right h1 {font-size: 34px;    margin: 10px 0 36px 0;}
.a02_content .area_02_right h5 {font-size: 18px;}
.a02_content .area_02_right p {  font-size: 16px; margin-bottom: 13px;}
.a02_content .area_02_right a {	margin-top: 10%;}

.content .content_txt h2, .content .content_txt2 h2 {font-size: 34px; }
.content .content_txt h3 {margin: 5px 0 55px 0;}
.content .content_txt p, .content .content_txt span, .content .content_txt2 p, .content .content_txt2 span { font-size: 16px;  }
}

@media all and ( max-width: 760px ){

.typing_txt {  font-size: 30px;}

}

@media all and ( max-width: 640px ){
	#main h1 { font-size: 36px; }


    #sec01 .sec01inner { width: 98%; }
	#sec01 .s01 p a {padding: 13px 20px; font-size: 18px;}
	#sec01 .s01 p { font-size: 17px;  }
	#sec01 ul{gap:25px 0;}
	#sec01 ul li{ width:calc(100% / 2);}
	#sec01 ul li p{ font-size:19px;}
	#sec01 ul li a img{ width:45px;}

	.a02_content .area_02_right .area_02_right_txt {   padding: 10% 5%; }

	#sec02 .sec02box img {width: 95%;}


	#sec03 h1 {display: inline-block;}
	#sec03 .inner, #sec05 .inner{ width: 600px;}
	#sec03 .s03box {  margin: 20px 0 0 0;}
	#sec03 ul{display: block; padding: 30px 10px;}
	#sec03 ul li{width:100%;}
	#sec03 h1 a {margin: 10px 0;}
	.tab_list_con{ margin-top:20px;}
	
	#sec04 .sec04box img {width: 100%;}
	#sec04 .tab_list_con dl dd .area a{ display:block; border-radius:10px; overflow:hidden}
	
	#sec05 {padding: 80px 0;}
	#sec05 .s05box {margin-top: 20px;	}
	#sec05 ul {display: block;}
	#sec05 ul li {width: 100%; padding: 20px 0; margin-top: 5px;}
    #sec05 ul li strong { font-size: 23px;  margin-bottom: 18px;}
    #sec05 ul li span {  font-size: 27px;}
    #sec05 ul li p { margin-top: 15px; }

	.content .c_img {  display: none;}

	.slick-initialized .slick-slide img { width: 70px; }
	.bus01 .bus_list .slick-next:before, .bus01 .bus_list .slick-prev:before{  display: none;}

}

@media all and ( max-width: 480px ){
	#sec03 .inner, #sec05 .inner{ width: 450px;}

	
}