.flex{display:flex;}
.main_con *{color:#333;}
.main_c{color:var(--main_c)}

.in{max-width:1500px; margin:0 auto;}

.main_con {    }
/* .main_con section{margin:120px 0;} */
.main_con h3{font-size:3.3em; margin-bottom:30px;  font-family: 'GmarketSansMedium'; position:relative;}
.main_con h3 b{color:var(--main_c2); font-family: 'GmarketSansMedium';}
.main_con h4{font-size:2.5em; margin-bottom:30px; font-weight:400; font-family: 'GmarketSansMedium';}
.main_con p{font-size:1.2em;}
.main_con img{width:100%;}

@media screen and (max-width:1600px) {
	.in{padding:0 3%; box-sizing:border-box;}
}
@media screen and (max-width:900px) {
	.main_con h3{font-size:1.8em;}
}



.introduce .flex{justify-content:space-between; gap:60px;}
.introduce .titbox{display:flex; justify-content:space-between; align-items: center; margin-bottom:20px;}
.introduce h3{margin-bottom:10px;}
.arrow1{border:1px solid #555; color:#555; padding:25px; box-sizing:border-box; border-radius:10px; font-size:1.2em; }
.arrow1 i{transform: rotate(316deg);}
.introduce img{border-radius:10px; transition: all 0.3s ease-out;}
.introduce .imgbox{position:relative; overflow:hidden; cursor:pointer;}
.introduce .imgbox::after{width:100%;height:100%; display:inline-block; position:absolute; top: 0;left: 0;z-index:9; content:''; border-radius:10px; transition: all 0.3s ease-out;}
.introduce .imgbox:hover::after { background:rgb(18 101 53 / 70%); }
.introduce .imgbox:hover img{transform: scale(1.1);transition: all 0.3s ease-out;}
.introduce .imgbox:hover a{background:red}


.main_bn{background: url('/common/img/b1.jpg') no-repeat center / cover , rgba(0, 0, 0, 0.6); background-blend-mode:multiply; background-attachment: fixed;  width:100%;height:400px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.main_bn h3{color:#fff; margin-bottom:10px  }
.main_bn p{color:#fff; margin-bottom:30px;}
.main_bn a {border:3px solid #fff; color:#fff; padding:13px 40px;font-size:1.2em;display:flex; justify-content:space-between;align-items:center;transition: all 0.3s ease-out;}
.main_bn a:hover {border:3px solid var(--main_c2);  background:var(--main_c2); transition: all 0.3s ease-out;}
.main_bn span{font-weight:600;letter-spacing:0; color:#fff;}

@media screen and (max-width:900px) {
	.main_bn{background-attachment:scroll}
	.main_bn{ height:250px; }
	.main_bn h3 {margin-bottom:20px}
	.main_bn a {font-size:1em; padding:10px 40px}

}


.box3 .flex{gap:30px;}
.box3 .col2{width:60%;}
.box3 .col1{width:40%;}
.box3 .box{background:#fff; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);  padding:60px; box-sizing:border-box; border-radius:20px; background-blend-mode: multiply; position:relative; cursor:pointer;}
.box3 .box *{color:#fff;}
.box3 .col2 .box:nth-child(2){margin-top:40px;}
.box3 .col2 .box:nth-child(2) *{color:#333;}
.box3 .box span{font-size:1.2em; color:#ccc;}
.box3 .box h4{font-size:2.2em; margin:10px 0 30px 0;}
.box3 .box p{font-size:1.2em; color:#eee; line-height:1.6;}
.box3 .col1{cursor:initial;}
.box3 .col1 ul{margin-top:40px;}
.box3 .box li{font-size:1.5em; margin-bottom:15px;}


.box3 .line {
	position: absolute;
	bottom:40px;
	right:60px;
	width: 43px;
	height:43px;
	z-index:99; 
	background:rgba(255,255,255,.6); 
	border-radius:50%;
	box-sizing:border-box;
	transition: all 0.3s ease-out;
	border:2px solid rgba(255,255,255,0); 
 }
.box3 .box:hover .line{  background:rgba(255,255,255,1); }

/* 화살표 스타일 */
.box3 .line::after {
  content: '';
  position: absolute;
  left:50%;
  top: 50%;
  margin-top:-8px;
  margin-left:-12px;
  width: 13px;
  height: 13px;
  border-top: 3px solid #666;
  border-right: 3px solid #666;
  transform: rotate(45deg);
   transition: all 0.3s ease-out;
  
}

@media screen and (max-width:900px) {
	.box3 .flex{flex-direction:column;}
	.box3 .box{padding:30px; font-size:.8em;}
	.box3 .box h4{margin:10px 0 20px 0;}
	.box3 .line{right:30px;}
}





.main_con h3::after{content:''; position:absolute; top:-7px; left:-5px; width:25px; height:25px; background:var(--main_c2); opacity: .3; z-index: -1;}

.main_con .business {margin-top:130px;}
.main_con .business h3 {font-weight:300;}


.b_wrap{
  height: 600px;
  display: flex;
  overflow: hidden;
}
.b__item {
  --cover: var(--cover-placeholder);
  background: var(--cover);
  background-position: center center;
  background-size: cover;
  background-color: var(--cover-placeholder);
  background-blend-mode: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, #111111 100%);
  position: relative;
  flex-grow: 1;
  height: 100%;
  width: 100px;
  transition: all 0.8s ease-in-out;
}
.b__item:hover, .b__item:focus-within, .b__item:target {
  flex-grow: 2;
  width: 50%;
  background-color: transparent;
}
.b__item:hover .b__title--hover-hide, .b__item:focus-within .b__title--hover-hide, .b__item:target .b__title--hover-hide {
  max-height: 0;
  opacity: 0;
}
.b__item:hover .b__title--hover-show, .b__item:focus-within .b__title--hover-show, .b__item:target .b__title--hover-show {
  opacity: 1;
}
.b__item:hover .b__description, .b__item:focus-within .b__description, .b__item:target .b__description {
  opacity: 1;
}
.b__item:hover {
  cursor: pointer;
}
.b__action {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 15, 15, 0.75);
  background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, #111111 100%);
  text-decoration: none;
 
}
.b__title {
  color: white;
  font-weight:700;
  margin: 0;
  max-height: 100%;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.b__title--hover-show {
  opacity: 0;
  width: 100%;
}
.b__title--hero {
  font-size: 4rem;
  line-height: 100%;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: -145px;
}
.b__aside {
  padding: 1rem;
  position: absolute;
  height: 100%;
  right: 1rem;
  bottom: 0;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  box-sizing: border-box;
}
.b__aside:before {
  content: "+";
  color: #fff;
  margin-bottom: 1rem;
  font-size: 2rem;
  display: inline-block;
	right: -3px;
	position: relative;
}
.b__aside:after {
  content: "";
  flex-grow: 1;
  width: 1px;
  display: block;
  margin-top: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
}
.b__content {
  padding: 24rem 4.5rem 0rem 8rem;
  width: 55%;
  text-align: left;
  line-height: 4px;
  font-size: 16px;
}
.b__description {
  color: #eee;
  font-weight: 500;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  margin-left: -145px;
  width: 85%;
  margin-top:20px;
}


@media screen and (max-width:1300px) {
	.b_wrap{flex-wrap:wrap;}
	.b__aside{writing-mode: initial; justify-content: center; width:100%; right:0; padding:0; white-space: normal;}
	.b__aside:before{display:none;}
	.b__aside:after{display:none;}
	.b__item:hover .b__title--hover-show, .b__item:focus-within .b__title--hover-show, .b__item:target .b__title--hover-show {
	  opacity: 0;
	}
	.b__item:hover .b__description, .b__item:focus-within .b__description, .b__item:target .b__description {
	  opacity: 0;
	}
	.b__item:hover, .b__item:focus-within, .b__item:target {
	  background-color:  initial;
	}
}

@media screen and (max-width:900px) {
	.main_con .business{margin-top:80px;}
	.b_wrap{height:100vw;}
	.b__item{width:50%; height:auto;}
	.b__title{font-size:1.3em; font-weight:500;}
}



a.more_btn{font-size:1.3em;  display: inline-flex; align-items: center; position:relative; font-weight:600; color:#777;}
a.more_btn::after{
    position: absolute;
    content: '';
    width: 35px;
    height: 35px;
    right: 0;
    border-radius: 50%;
    z-index: 9;
	border:2px solid #777;
}
 .arrow { position: relative; width:45px; height:10px;  display:inline-block ; left:0; margin-left:25px; z-index:99}
 .arrow::before {
  content:'';
  width:100%; 
  height:2px;
  position:absolute;
   top:4px;
  background:#777;
	right:17px;
}
 .arrow::after {
	position: absolute;
	top:0;
	content: '';
	width:8px; 
	height:8px; 
	border-top: 2px solid #777; 
	border-right: 2px solid #777;
	transform: rotate(45deg);  
	right:17px;
} 


a.more_btn:hover:after{animation:circleHover 0.7s both;}
@keyframes circleHover {
	0% {
		transform:scale(1); 
	}
	50% {
		transform:scale(1.4); 
	}
	100% {
		transform:scale(1); 
	}
}
.m_gallery{position:relative;}	
.m_gallery::before{background: url('/common/img/bg.png') no-repeat 0 0 / cover , rgba(255, 255, 255, 0.6); background-blend-mode:hue; position:absolute; content:''; width:40%; height:100%;}
.m_gallery .flex{}
.m_gallery .left{width:50%; padding-top:220px; box-sizing:border-box; position:relative;}
.m_gallery .left h3{font-weight:100; color:var(--main_c); margin-bottom:50px;}
.m_gallery .left b{color:var(--main_c); }

.m_gallery .right{gap:40px; width:50%; }
.m_gallery ul{width:100%;}
.m_gallery li{display:flex; gap:20px; overflow:hidden; position: relative; }
.m_gallery li:last-child{margin-top:40px;}
.m_gallery ul:first-child{margin-top:140px;}
.m_gallery .imgbox{width:100%; height:450px;  transition: all 0.2s ease-out}
.m_gallery p{position:absolute; bottom:20px; left:20px; color:#fff; visibility:hidden;transition: all 0.2s ease-out; font-size:1.5em;}  

.m_gallery li:hover .imgbox{transform: scale(1.3); transition: all 0.2s ease-out; background-color:rgba(0, 0, 0, 0.3) !important; background-blend-mode:multiply; }
.m_gallery li:hover p{visibility:visible; transition: all 0.2s ease-out;}

@media screen and (max-width:900px) {
	.m_gallery .in{flex-direction:column;}
	.m_gallery::before{width:80%; height:45%; background-position: right bottom;}
	.m_gallery .left{width:100%; padding-top:80px;}
	.m_gallery .right{width:100%; gap:20px;}
	.m_gallery ul:first-child{margin-top:60px;}
	.m_gallery li:last-child{margin-top:20px;}
	.m_gallery .imgbox{height:66vw;}
	.m_gallery p{font-size:1.2em;}
}


.notice{background:var(--main_c); max-width:100%; padding:100px 0; box-sizing:border-box; margin:0;}
.notice .in{}
.notice .titbox{display:flex; justify-content:space-between;}
.notice h3{margin-bottom:50px; font-weight:500; color:#ddd; font-size:3.2em;}
.notice h3 span{ font-weight:800; color:#fff; font-family: 'GmarketSansMedium';}
.notice .titbox a{letter-spacing:0; font-size:1.2em; color:#ddd; }
.notice .arrow::before{background:#ddd;}
.notice .arrow::after{border-color:#ddd;}
.notice a.more_btn::after{border-color:#ddd;}

.notice .wrap{display:flex; gap:40px; }
.notice .wrap li{width:33.33%; padding:40px; box-sizing:border-box;border-radius:20px 0; border:1px solid #aaa; cursor: pointer;}
.notice .wrap li *{color:#bbb;}
.notice .wrap li:hover{border:1px solid #fff;}
.notice .wrap li:hover *{color:#fff;}
.notice .wrap a{min-height:230px; }
.notice .wrap b{ letter-spacing:0; font-weight:300;}
.notice .wrap p { 
	font-weight:600; 
	text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    overflow: hidden;	
	font-size:1.4em;
	word-break: break-word;
	margin-top:20px;
	line-height:1.5;
	color:#ddd;
 }
.notice .wrap a{position:relative; display: inline-block; height:100%; width:100%;}
.notice .wrap span{display:inline-block; position:absolute; bottom:0; right:0; letter-spacing:0; }

@media (max-width:900px) {
	.notice{padding:80px 0;}
	.notice .in{flex-direction:column; gap:0;}
	.notice h3{width:auto; margin-bottom:20px; line-height:1.5; font-size:1.8em;}
	.notice .titbox{flex-direction:column;}
	.notice .titbox a{justify-content: end;}
	.notice .wrap{font-size:.9em; flex-direction:column; margin-top:30px;}
	.notice .wrap li{width:100%;}
	.notice .wrap p {-webkit-line-clamp:2;}
	.notice .wrap a{gap:10px; min-height:140px;}
	.notice .wrap .date{padding:0 10px;}

}




.quick_wrap > div{flex:1; padding:70px 0; box-sizing:border-box; border-right:1px dashed #ddd; text-align: center; font-size:2em;   
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.quick_wrap > div span {
  position: relative;
  z-index: 1; font-family: 'GmarketSansMedium';
}


.quick_wrap i{color:var(--main_c)}


.quick {
 transition: background 1s ease;
background-blend-mode:hue;

}

.quick:hover{  transition: background 1s ease; background-blend-mode:multiply;}
.quick:hover span{color:#fff;}
.quick:hover i{color:#fff;}


.quick1:hover {background: url('/common/img/company.png') no-repeat center  / cover , rgba(0, 0, 0, 0.2); }
.quick2:hover {background: url('/common/img/subvi4.png') no-repeat center bottom / cover , rgba(0, 0, 0, 0.3); }
.quick3:hover {background: url('/common/img/subvi6.png') no-repeat center / cover , rgba(0, 0, 0, 0.2); }


@media (max-width:900px) {
	.quick_wrap > div{font-size:1.2em; padding:30px 0;}
    .quick_wrap > div span {display: flex; flex-direction: column-reverse; gap:5px;}
}




 .top_link { background-color:#fff; border:6px solid var(--main_c);  position:fixed; right:0; bottom:25%; border-radius:10px 0 0 10px; box-shadow:0px 3px 20px 1px rgba(0, 0, 0, 0.10); z-index:99; width:180px; }
 .top_link a{text-align:Center;  display:flex; flex-direction: column; border-bottom:1px dashed #ddd; box-sizing:border-box; padding:20px 0;}
 .top_link a i{font-size:2em; }

 .top_link .flex{ flex-direction: row; align-items: center; justify-content:center; gap:5px;}
 .top_link span{font-size:1.2em; line-height:1.5; font-weight:600;}
 .top_link b{font-size:1.1em; line-height:1.6; font-weight:400; margin-top:10px;     letter-spacing: 0.5px;}
 .top_link *{color:var(--main_c);}

 .top_link a:nth-child(2){border-bottom:0; margin-bottom:0; } 
 .top_link a:last-child{border-bottom:0; margin-bottom:0; background:var(--main_c); padding:17px 0;} 
 .top_link a:last-child span{color:#fff;  margin-top:0;} 


 .top_link a:first-child i{ animation: blinkAnim 2s ease-in-out infinite;}

    @keyframes blinkAnim {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
    }

@media all and (max-width:900px) {
	  .top_link {font-size:.7em; border:3px solid var(--main_c); width:auto;}
	  .top_link b{display:none;}
	  .top_link span{display:none;}
	  .top_link a{padding:15px;}
	  .top_link a:last-child span{display:inline-block;}
}	

footer{font-size:1em; padding:60px 0;box-sizing: border-box; font-weight:400; background:#f3f3f3; }
footer .in{display:flex; justify-content:space-between; align-items:start; }
footer .titbox{ display:flex; gap:80px; justify-content: space-between; width:100%;}
footer *{color:#777;  letter-spacing:0;}
footer h2 img{width:90px;}
footer .flex{line-height:1.6; justify-content:space-between; width:100%; align-items:start; gap:50px;}
footer .flex img{height:40px;}
footer p{margin-top:10px;}
footer .right{display:flex; gap:20px; align-items: center;}


@media screen and (max-width:1000px) {
	footer{padding:30px 0; font-size:.9em;}
	footer .in{flex-direction:column; gap:10px; padding:0 3%;}
	footer .titbox{flex-direction:column; gap:10px;}
	footer .flex{flex-direction:column; gap:10px;}
	footer .flex img{height:auto; width:130px;}
}