body {max-width:1920px; margin:0 auto;}
html {scroll-behavior: smooth;}
*{letter-spacing:-0.02em;}

#header {width:100%;max-width:1920px; margin:0 auto;box-sizing:Border-box;position:fixed;  left: 50%;transform:translate(-50%,0); z-index:2000;background-color: #272723;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
}
#header_content {width:auto; margin:0 auto; position:relative; height:100px;}
#header_content .logo {position:absolute; top:20px; left:60px;z-index:2000;}
#header_content .logo a {display:block; }

/* gnb */

#gnb {width:100%;position:absolute;z-index:1000;top: 0;left:0;height:100px;}
#gnb  > ul {width:auto;margin:0 auto;text-align:center;display: flex; justify-content: flex-end;padding-right:100px;}
#gnb  > ul > li {width:195px; text-align:center; display:inline-block; z-index:900;}
#gnb > ul > li > a {font-family: 'pop',sans-serif; display:block;font-size:21px;height:100px; line-height:100px;font-weight:500; color:#fff;box-sizing:border-box;} 
#gnb > ul > li > a:hover, #gnb > ul > li > a:focus, #gnb > ul > li.active > a {color:#eee;}



#gnb div.submenu {display:none;position:absolute;width:195px;padding:15px 0;background-color:#fff;margin-top:0px;margin-left:0;animation:menuDown 0.3s linear;border-radius:10px;}

#gnb div.submenu a {display:block;height:auto;padding:5px 0; color:#555;font-size:17px;line-height:35px; letter-spacing:-0.03em; font-weight:600;text-align:center; }
#gnb div.submenu a:hover, #gnb div.submenu a:focus {color:#b6ab00;}


#gnb > ul > li:hover div.submenu {display:block;}

@keyframes menuDown{
	0% {
		opacity:0; 
		margin-top:-20px;
	}

	100% {
		opacity:1; 
		margin-top:0;
	}
}


/* mobile gnb */
.mobile_top {display:none;}
#nav {display:none;}
.m_right_box{display:none;}


#mainvisual {height:1008px; position:relative;width:100%;overflow:hidden;background:url('../images/main_j/mainvisual.png') center 0 no-repeat;
}
#mainvisual .main_txt {position:relative;width:auto; padding:230px 190px 0; margin:0 auto;z-index:999;}
#mainvisual .main_txt h2 {font-family: 'pop',sans-serif;font-size: 70px;line-height:1.1;font-weight: 900;color:#272723;}
#mainvisual .main_txt > p {font-size:21px;color:rgba(62,60,76,0.5);margin:30px 0 70px;}

#mainvisual .main_txt ul{display: flex;justify-content:flex-start;gap:0 30px;;}
#mainvisual .main_txt ul li{width:240px;height:240px; border-radius:240px; border:1px solid #ffffff76; background-color:#ffffff47;display: flex;flex-direction: column;justify-content: center;align-items: center;}
#mainvisual .main_txt ul li img{padding:0 0 10px 0;}
#mainvisual .main_txt ul li h4{font-family: 'pop', sans-serif; font-size:23px; font-weight: 600;color: #272723;;}
#mainvisual .main_txt ul li p{font-size:18px;color: #878787;;}




/* section01 */
.section01 {width:auto; padding:0 190px 100px; }
.section01 > h3 a{font-family: 'pop',sans-serif;color: #272723;font-size:63px;font-weight: 900;line-height: 1;}
.section01 > h3 a img{padding:0 0 3px 40px;transition: all 0.2s;}
.section01 > h3 a:hover img{padding:0 0 10px 48px;}
.section01 > h4{font-size: 25px;color:#272723;font-weight: 900;margin:5px 0 30px;}
.section01 > p{font-size: 20px;color:#888888;margin:0 0 70px 0;}
.section01 .port {display:flex; justify-content: space-between;}
.section01 .port .box{width:32.5%;}
.section01 .port .box a{display: block;width:100%;height: 100%;;}
.section01 .port .box a .img{width: 100%;height: 325px;overflow: hidden;margin:0 0 25px 0;}
.section01 .port .box a .img img{width: 100%;height: 100%;;transition: all 1.5s;object-fit: cover;}
.section01 .port .box a .title{font-size:20px;font-weight: 600;color: #111111; white-space:nowrap;text-overflow: ellipsis;overflow: hidden;}
.section01 .port .box a .title span{display:inline-block;color:#2b8561;padding-right: 10px;font-weight: 900;;}
.section01 .port .box a:hover .img img{transform: scale(1.1);}
.section01 .port .box a:hover .title{color:#b6ab00;transition: all 0.4s;}


/* section02 */
.section02 {width:auto; padding:100px 190px 20px; background:url('../images/main_j/sec02_bg.png') center 0 no-repeat;}

.section02  > h3 a{font-family: 'pop',sans-serif;color: #fff;font-size:63px;font-weight: 700;line-height: 1;}
.section02 > h3 a img{padding:0 0 3px 40px;transition: all 0.2s;}
.section02 > h3 a:hover img{padding:0 0 10px 48px;}
.section02 > p{font-size: 22px;color:#ffffff;margin:15px 0 70px 0;}
.section02  ul{display:flex;justify-content: space-between;}
.section02  ul li{width: 32.5%;height: 475px;position: relative;overflow: hidden;}
.section02  ul li img{ position: absolute;top:0;left: 0;z-index: 0;;transition: all 1.5s;}
.section02  ul li h4{ position: absolute;bottom:40px; left:35px;z-index: 1;font-size: 35px;line-height:1;font-weight: 900;color: #ffffff;;}
.section02  ul li h4 span{font-size:22px;font-weight: 600;color: #c0cfc7;;line-height:1;}
.section02  ul li:hover img{transform: scale(1.08);}



/* footer */
footer {padding:25px 190px 50px;}

footer .footer{width:auto;margin:0 auto; color:#ffffff; font-size:16px; line-height:30px;position: relative;}
footer .footer .foot_menu{position: absolute;right:0;top:0;;}
footer .footer .foot_menu  a{margin-left:10px;}
footer .footer .f_logo{position: absolute;left:0;top:0;}
footer .footer .address {padding-left:250px;font-size: 16px; color:#666666; line-height: 25px;;}
footer .footer .address a{color: #343434; font-weight: 600;display: inline-block;padding:0 0 7px 0;;}



/* 사이드바*/
.sidebar{position:fixed;right:20px;bottom:60px;width:170px; height:auto; padding:25px 20px; box-sizing: border-box;border:5px solid #8f0109; border-radius: 10px;background-color: #fff;z-index: 500; }
.sidebar dl{padding:0 0 25px 0; margin:0 0 25px 0; border-bottom: 1px solid #ddd;text-align: center;}
.sidebar dl.last{ border:none;margin:0;}
.sidebar dl dt{font-size: 16px;color: #000000;letter-spacing: -0.03em;margin:0 0 10px 0;line-height: 1;font-weight: 600;;}
.sidebar dl dd{font-size: 18px;color: #b22139;font-weight: 900;line-height: 22px;letter-spacing: -0.05em;;}
.sidebar dl dd span{font-size:13px; color:#666;font-weight: 400;;letter-spacing: -0.08em;;}
.sidebar .topBtn{display: block;height:38px;line-height: 38px;color: #fff; font-weight: 600;font-size:18px;text-align: center;background-color: #8f0109;}


.about .boxing02 p.blue{font-size: 30px;color: #292f5c; line-height: 40px; text-align: center;margin:0 0 30px 0;font-weight: 600;}
.about .boxing02 p.blue2{font-size: 27px;color:#424fb2; line-height: 40px; text-align: center;margin:0 0 30px 0;font-weight: 600;}


/* 서브레이아웃 */
#subvisual {width:100%; height:470px;background:url('../images/sub/subvisual.jpg') center center no-repeat; background-size:cover;}
#subvisual .sub_txt{max-width:1200px; margin:0 auto; text-align:center;}
#subvisual .sub_txt h3{font-family:"rabbit", sans-serif;font-size:80px;color:#fff; font-weight:400;padding:220px 0 15px 0;line-height:1;}
#subvisual .sub_txt p{font-size:20px;color:rgba(255,255,255,0.9);}


.container{width:100%; }
.con_area{padding:0 0 100px 0;}
.con_area h3.st{font-size:32px; color:#111111; font-weight:900; padding-left:22px; background:url('../images/sub/st.jpg') 0 1px no-repeat;margin:0 0 25px 0;}
.sub_title {padding:75px 0; text-align:center;}
.sub_title h3{font-family:'arita', serif; font-size:40px; color:#8f0109; font-weight:400; letter-spacing:-0.04em; }




/**** mobile layout *************************************************************************************************************/




@media screen and (max-width:1440px) {
	#mainvisual .main_txt{padding:230px 100px;}
	.section01{padding:0 100px 100px;}
	.section02{padding:100px 100px 20px;}
	footer{padding:25px 100px 50px;}

}



@media screen and (max-width:1280px) {

	#mainvisual {height: 868px;background-size: cover;;}
	#mainvisual .main_txt{padding:200px 50px 100px;}
	#mainvisual .main_txt h2{font-size: 57px;;}
	#mainvisual .main_txt ul li{width:200px;height: 200px;;}
	#mainvisual .main_txt ul li h4{font-size: 20px;;}
	.section01{padding:0 50px 100px;}
	.section01 > h3 a{font-size: 45px;;}
	.section01 > h3 a img{width:27px;}
	.section01 .port .box a .img{height:270px;}
	.section02{padding:100px 50px 20px;background-size: 120%;}
	.section02 > h3 a{font-size: 45px;;}
	.section02 > h3 a img{width:27px;}
	.section02 ul li{height:270px;}
	.section02 ul li img{width:100%;height:300px;object-fit: cover;}
	.section02 ul li h4{font-size:22px;left:25px;bottom:30px;}
	.section02 ul li h4 span{font-size:19px;}

	footer{padding:25px 50px 50px;}
	footer .footer .address{padding-left:180px;}


    
  	#gnb {display:none;}
  	.top_menu {display:none;}
    .mob_none {display:none;}
   #header_content { height: 80px;  }
  #header_content .logo{left:25px;top:13px;}
     .sidebar {display: none;}
	/* nav */
	#top_right {position:fixed; top:30px; right:20px;z-index:2001;}
	.allmenu { position:relative;}
	#menu-icon2{
	  position: relative;
	  width: 30px;
	  height: 20px;
	  transform: rotate(0deg);
	  transition: 0.5s ease-in-out;
	  cursor: pointer;
	}
	#menu-icon2 span{
	  display: block;
	  position: absolute;
	  height: 3px;
	  width: 100%;
	  background: #fff;
	  opacity: 1;
      left: 0;
      border-radius:3px;
	  transform: rotate(0deg);
	  transition: 0.25s ease-in-out;
	}
	#menu-icon2 span.short {
		width:20px;
		left:10px;
	}
	#menu-icon2 span:nth-child(1){top: 0px;}
	#menu-icon2 span:nth-child(2){top: 8px;}
	#menu-icon2 span:nth-child(3){top: 17px;}
	#menu-icon2.open span:nth-child(1) {
	  top: 6px;
	  transform: rotate(-45deg);
	}
	#menu-icon2.open span:nth-child(2) {
	  opacity: 0;    /*클릭하면 중간선이 사라집니다.*/
	}
	#menu-icon2.open span:nth-child(3) {
	  top: 6px;
	  transform: rotate(-135deg);
	  width:30px;
	  left:0;
	}
	#nav {position:fixed; top:80px; left:0; width:100%; height:90vh;background-color:#fff; text-align:left; z-index:1100;}
	#nav li { border-top:1px solid #eee; }
	#nav li a {color:#000; font-size:17px; font-weight:600; display:block;  padding:25px 30px;;}
	#nav > li > ul {padding:15px 0;background:#f4f4f4;}
	#nav > li > ul > li {border-bottom:none; border:none;background:none;}
	#nav > li > ul > li:first-child {border-top:none;}
	#nav > li > ul > li a {color:#111; font-size:16px;  font-weight:600; padding:15px 50px;}
}


@media screen and (max-width:980px) {
	.about .boxing01 h3{font-size: 35px;;}
	.about .boxing02{padding:80px 20px;}
	.about .boxing02 h4 img{padding:0 0 40px 0;}
	.about .boxing02 h4{font-size: 26px;;}
	.about .boxing02 p.normal{font-size:18px;}
	.about .boxing02 p.red{font-size: 26px;;}
	.about .boxing02 p.blue{font-size: 24px;;}
	.about .boxing02 p.blue2{font-size: 22px;;}

}

@media screen and (max-width:768px) {

    body {min-width:320PX;}
    #header_content  {height:80px;}
    #header_content .logo {left:25px;top:22px;}
    #header_content .logo a img { width: 95px;}
    #top_right{top:30px;right:25px;}
  	#mainvisual{height:670px; background-position: 75% 0;}
	#mainvisual .main_txt{padding:170px 50px 100px;}
	#mainvisual .main_txt h2{font-size: 40px;;}
	#mainvisual .main_txt > p{font-size: 18px;line-height: 26px;;margin:20px 0 40px;}
	#mainvisual .main_txt ul{gap:0 10px;}
	#mainvisual .main_txt ul li{height:120px;width:120px;}
	#mainvisual .main_txt ul li img{width:30px;}
	#mainvisual .main_txt ul li h4{font-size:16px;}
	#mainvisual .main_txt ul li p{font-size:13px;}
	
	.section01{padding:0 25px 100px;}
	.section01 > h3 a{font-size:38px;}
	.section01 > h3 a img{width:22px;padding:0 0 3px 25px;}
	.section01 > h4{font-size:20px;}
	.section01 > p{font-size:17px;line-height: 25px;margin:0 0 45px 0;}
	.section01 .port .box a .img{height:180px;margin:0 0 15px 0;}
	.section01 .port .box a .title{font-size:16px;}
	.section01 .port .box a .title span{padding-right:4px;}

	.section02{padding:80px 25px 10px;}
	.section02 > h3 a{font-size:38px;}
	.section02 > h3 a img{width:22px;padding:0 0 3px 25px;}
	.section02 > p{font-size:17px; line-height: 25px;margin: 15px 0 45px 0;}
	.section02 ul li{height:200px}
	.section02 ul li img{height:100%;}
	.section02 ul li h4{font-size:19px;left:15px;}
	.section02 ul li h4 span{font-size:16px;}
	footer{padding:25px 25px 40px;}
	footer .footer .f_logo{position:static;}
	footer .footer .address{padding:20px 0 ;font-size:14px;line-height: 22px;;}

    /* 서브레이아웃 */
    #subvisual {width:100%; height:350px;background:url('../images/sub/subvisual.jpg') center center no-repeat; background-size:cover;}
    #subvisual .sub_txt{padding:0 20px;}
    #subvisual .sub_txt h3{font-size:50px;padding:180px 0 15px 0;line-height:1;}
    #subvisual .sub_txt p{font-size:15px;}


	.container{width:100%; }
	.con_area{padding:0 0 100px 0;}
    .con_area h3.st{font-size:22px;word-break: keep-all;}
	.sub_title {padding:50px 0; text-align:center;}
	.sub_title h3{font-size:35px;}



}

@media screen and (max-width:480px) {
	#mainvisual .main_txt{padding:160px 20px 100px;}
	#mainvisual .main_txt h2{font-size:30px;}
	#mainvisual .main_txt > p{line-height: 29px;margin:12px 0 30px;;}
	#mainvisual .main_txt ul{gap:0 5px;}
	#mainvisual .main_txt ul li h4{font-size: 15px;;}
	.about .boxing02 p.blue{font-size: 19px;line-height: 27px;word-break: keep-all;}
	.about .boxing02 p.blue2{font-size: 18px;line-height: 27px;word-break: keep-all;;}

	.section01 .port{flex-wrap: wrap;gap:30px 0;}
	.section01 > p{font-size: 15px;line-height: 23px;;}
	.section01 .port .box{width:100%;}

	.section02{background-size: 580%;}
	.section02 > p{font-size:15px;line-height: 23px;;}
	.section02 ul{flex-wrap: wrap;gap:20px 0;l}
	.section02 ul li{width:100%;}
}