@charset "UTF-8";

@media(max-width:1380px){

	.wrapper {width: 96%; max-width:inherit;}
	.hd_gnb .wrap {width: 100%; max-width:inherit;}
}

@media(max-width:1200px){

}

/* 모바일 */
@media(max-width:1024px){
	
	/* header */
  .logo {} 
  .logo a {display: flex; align-items: center; justify-content: center; height: 100%;}
  .logo img{object-fit: contain; object-position: center; vertical-align: middle;} 
	.header_wrap {position: relative;}
	#m_gnb { position: absolute; left: 2%; top: 50%; display: inline-block; width: 40px; height: 32px; z-index: 99; transform: translateY(-50%); }
	#m_gnb > div { display: block; margin-top: -2px; top: 2px; }
	#m_gnb > div, #m_gnb > div:after, #m_gnb > div:before { position: absolute; width: 40px; height: 4px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 4px; background: var(--keycolor); }
	#m_gnb > div:before { top: 15px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform,opacity; }
	#m_gnb > div:after { top:30px; }
	#m_gnb > div:after, #m_gnb > div:before { display: block; content:''; }
	.is-active #m_gnb > div { transform: translate3d(0,15px,0) rotate(45deg); }
	.is-active #m_gnb > div:before { transform: rotate(-45deg) translate3d(-5.71429px,-11px,0); opacity: 0; }
	.is-active #m_gnb > div:after { transform: translate3d(0,-30px,0) rotate(-90deg); }

	.hd_gnb {background: #fff; position: fixed; left: -50%; top: 100px; width: 50%; height: calc(100% - 100px); overflow-y: scroll; z-index: 100; border-top: 1px solid #d7d7d7; transition:left 0.2s linear;}
	.is-active .hd_gnb {left: 0%; transition:left 0.2s linear;}
	.gnb {width: 100%; background: #fff;}
	.gnb > li {float: none; width: 100%; position: relative;}
	.gnb li a {color: inherit;}
	.gnb > li ul {position: inherit; top:auto; background: #f8f8f8; box-shadow:none; visibility:hidden;transition:height 0.2s linear;}
	.gnb > li:hover ul {padding: 0; height: 0;}
	.gnb > li.active ul {height: auto;transition:height 0.2s linear;}
	.gnb > li.active > a {background: #072769; color: #fff;}
	.gnb > li ul li a {color: inherit; border-bottom: 1px dashed #ccc; font-size: 1rem; padding: 0.5rem 0;}
	.gnb > li ul li:last-child a {border-bottom:1px solid #ccc}
	.gnb > li ul li > a:hover, .gnb > li ul li.active > a {background: #878faa; border-bottom:1px solid #ccc; color: #fff;}
	.gnb > li ul li .ulDepth3 {display: block;height: 0; visibility:hidden; background: #fff; padding:0; transition:height 0.2s linear;}
	.gnb > li ul li:hover .ulDepth3 {height: auto; visibility:visible;  padding: 0.5rem 0;  transition:all 0.2s linear; box-shadow:0 0 2px rgb(0 0 0 / 20%); }
	.gnb > li ul li .ulDepth3 li a {color: #888; font-size: 15px; border-bottom: none; padding: 0.25rem 0;}
	.gnb > li ul li .ulDepth3 li a:before {content:''; width: 0.5rem; height: 1px; background: #888; display: inline-block; vertical-align: middle; margin-right: 0.5rem; margin-top: -2px;}
	.gnb > li ul li .ulDepth3 li a:hover {background: #fff; color: #072769; }
	.gnb > li ul li .ulDepth3 li a:hover:before {background: #072769;}

	/* footer */
	#footer {padding: 2.5rem 0;}
	.footer_logo, .footer_info {float: none; width: 100%; text-align: center;}
	.footer_info {padding-top: 0; margin-top: 2rem;}
	.btn_top {display: none;}


	/* main */
	#mainVisual .visual_tit {font-size: 2.5rem; width: 90%;}
	.prdList li .prd_tit {font-size: 1.25rem;}
	.prdList li img {height: 200px;}
	.cscenter .board, .cs {float: none; width: 100%; margin-top: 3.75rem;}
	.cs .conTop {-webkit-background-size: cover; background-size: cover; }
	.sub01 > div { height: 345px;}
	.conBot > div .f_left {width: calc(100% - 345px); padding: 0.5rem 2.5rem;}
	.sub01 > div.caseList {width: 345px;}
	.caseList p img {margin-top: 0;}
  .cs .conBot .sub01 .caseList img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
	.conBot > div .f_left .main_tit {font-size: 2rem; margin-bottom: 1.5rem; margin-top: 1rem;}
	.conBot > div .f_left .main_desc {font-size: 1.125rem; line-height: 1.6;
    letter-spacing: 0;}
	.conBot > div .f_left .arrow {right: 2.5rem; bottom: 1.5rem;}
	.arrow a {padding: 0.75rem 0.5rem;}

}

@media(max-width:960px){

	/*main */
	#mainVisual, #mainVisual li {height: 360px;}
  #mainVisual .visual_tit .st1 {font-size: 2.5vw; line-height: 1.35;}
  #mainVisual .visual_tit .st2 {font-size: 3.5vw; line-height: 1.35;}
	#mainVisual .visual_tit:before, #mainVisual .visual_tit:after {width:190px; height: 40px;}
	#mainVisual .visual_tit:before {top: -60px;}
	#mainVisual .visual_tit:after {bottom: -65px;}
	.prdList li img {height: 160px;}
	.cs dl + dl {margin-top: 2.5rem;}
	.arrow a {margin: 0 0.25rem;}

}

@media(max-width:768px){

	body {font-size: 15px;}

	/* header */
	.wrapper {width: 94%;}
	.hd_top {text-align: center;}
	.logo {height: 85px; line-height: 56px; display: inline-block;}
	#m_gnb {left: 3%;}
	.hd_gnb {top: 85px; height: calc(100% - 85px);}

	/* footer */
	.footer_info p:last-child > .bar.m_br { display: block; height: 0;}
	.footer_info p, .footer_info b, .footer_info span {line-height: 1.5;}

	/* main */
	#mainContents {margin-top: 0;}
	#mainVisual .visual_tit {}
  #mainVisual .visual_tit .st1 {font-size: 2.5vw; line-height: 1.35;}
  #mainVisual .visual_tit .st2 {font-size: 3.5vw; line-height: 1.35;}
	#mainVisual .visual_tit .m_br {display: block;}
	#mainVisual, #mainVisual li {height:320px;}
	#mainVisual .visual_tit:before, #mainVisual .visual_tit:after {width: 200px; height: 30px; border-width:6px;}
	#mainVisual .visual_tit:before {top: -45px;}
	#mainVisual .visual_tit:after {bottom: -50px;}
	
  /* 서비스소개 */
  .prdList {display: flex; flex-wrap: wrap;}
	.prdList li {float: none; width: 50%; display: inline-block; background:transparent;}
  .prdList li:nth-child(1),
  .prdList li:nth-child(4),
  .prdList li:nth-child(5),
  .prdList li:nth-child(8) {background: #205c9b;}
  .prdList li:nth-child(1) a,
  .prdList li:nth-child(4) a,
  .prdList li:nth-child(5) a,
  .prdList li:nth-child(7) a{color: #fff;}
  .prdList li:nth-child(2),
  .prdList li:nth-child(3),
  .prdList li:nth-child(6),
  .prdList li:nth-child(7) {background: #f0f0f0;}
  .prdList li:nth-child(2) a,
  .prdList li:nth-child(3) a,
  .prdList li:nth-child(6) a,
  .prdList li:nth-child(7) a {color: var(--text-color);}

  /* 게시판 */
	.bdtabs {text-align: center; margin-bottom: 2rem;}
	.board_con .more {top: -4.375rem;}
	.board_con li a {font-size: 1rem;}
	.cscenter .board {padding: 3rem; height: 420px;}
  /*  */
  .cs .conBot .sub01 .f_left {}
  .cs .conBot .sub01 .caseList  {height:260px;}

  
	
}


@media(max-width:640px){
	
	/* main */
	#mainVisual, #mainVisual li {height: 280px;}


  /* 게시판 */
	.cscenter .board {padding: 3rem 2rem;}
	.conBot > div .f_left, .sub01 > div.caseList {width: 50%; height: 300px;}
	.conBot > div .f_left {padding: 1.5rem;}
  .conBot > div .f_left .main_tit {font-size: 1.625rem; margin-bottom: 1rem; margin-top: 0;}
	.conBot > div .f_left .main_desc {font-size: 1rem; line-height: 1.4; letter-spacing: -0.5px;}
	.conBot > div .f_left .arrow {right: 1rem; bottom: 1rem;}
	.cs dl dt {font-size: 1.5rem; width: 160px;}
	.cs dl dd {font-size: 1.5rem; width: calc(100% - 160px);}
	.cs dl dd img {width: 30px;  margin-top: 0px;}
	.cs .btn_more a {font-size: 1rem;}

  /*  */
  .cs .conTop {}
  .cs .conTop .con-wrap {width: 100%;}
  .cs dl {width: 100%; align-items:center; flex-wrap: wrap; gap:10px; justify-content: center; text-align: center;}
  .cs dl dd {width: 100%;}
}


@media(max-width:480px){

	body {font-size: 14px;}
	.wrapper {width: 90%;}

	/* header */
	.logo {height: 80px; width: 170px;}
	.hd_gnb {top: 80px; left: -100%; width: 100%; height: calc(100% - 80px); }
	#m_gnb {left: 5%;}

	/* footer */
	#footer {padding: 2rem 0;}
	.footer_logo {width: 160px; margin: auto;}
	.footer_info {font-size: 13px; margin-top: 1.5rem;}
	.footer_info .bar {margin: 0 0.75rem; font-size: 13px;}
	.footer_info p, .footer_info b, .footer_info span {line-height: 1.6; letter-spacing:-0.5px;}
	.footer_info b {font-weight: 400;}
	.copyright {font-size: 13px; margin-top: 1rem;}

	/* mainVisual */
	#mainVisual .visual_tit {}
  #mainVisual .visual_tit .st1 {font-size: 3vw; line-height: 1.35;}
  #mainVisual .visual_tit .st2 {font-size: 4vw; line-height: 1.35;}
	#mainVisual, #mainVisual li {height: 250px;}
	#mainVisual .visual_tit:before, #mainVisual .visual_tit:after {width: 160px; height: 25px; border-width: 4px;}
	#mainVisual .visual_tit:before {top: -35px;}
	#mainVisual .visual_tit:after {bottom: -40px;}
  #mainVisual .slideArrow .slide_prev,
  #mainVisual .slideArrow .slide_next {width: 11px;}
	
  /* 서비스소개 */
	.prdList li img {height: 150px;}

  /*  */
	.cscenter .wrapper > div.board {height: 356px;}
	.board_con li {padding: 0.75rem 0;}
	.board_con li a, .board_con li .date {font-size: inherit;}
	.bdtabs {margin-bottom: 1.25rem;}
	.bdtabs li a {font-size: 1.25rem; padding-bottom: 0.125rem;}
	.bdtabs li + li {margin-left: 1.5rem; padding-left: 1.5rem;}
	.cscenter .board {padding: 2rem; height: 360px;}
	.board_con .more {top: -3.375rem;}
	.board_con li a {float: none; width: 100%;}
	.board_con li .date {float: none; display: none;}
	/*  */

	.cs dl dt, .cs dl dd {float: none; width: 100%; text-align: center;}
	.cs dl dt {font-size: 1.75rem; margin-bottom: 0.625rem;}
	.cs dl dd {}
	.cs .btn_more a {width: 200px; text-align: left; display: inline-block; margin-top: 0.5rem;}
	.conBot > div .f_left, .sub01 > div.caseList {float: none; width: 100%;}
	.conBot > div .f_left .arrow {bottom: auto; top: 1.5rem;}
	.sub01 > div.caseList {margin-top: 0; height: auto; }
	.caseList p img {width: 100%; border: 1px solid #ddd; border-top: none;}
	.conBot > div .f_left .main_desc {word-break:keep-all;} 
	.conBot > div .f_left .main_desc .p_br {display: inline-block; width: 5px;} 

  /*  */
  .cs .conBot .sub01 .f_left {width: 100%; height: auto;;}
  .cs .conBot .sub01 .caseList {width: 100%; height: auto;}
  .cs .conBot .sub01 .caseList img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
  .arrow a {padding: 0.25rem;}

  /*  */
  .partner .partnerList {gap:5px;}
  .partner .partnerList .item {height: 50px; width: auto;;}

}