/*

	layout_responsive_shhop.css

*/

:after,:before{display:none;content:'';}



    :root {
      --ink: #111827;
      --muted: #667085;
      --line: #e6eaf0;
      --blue: #0b5cff;
      --deep: #08214a;
      --cyan: #38bdf8;
      --paper: #f7f9fc;
      --white: #ffffff;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "CarmenSansOTF-UltraLight", "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
      color: var(--ink);
      background: var(--white);
      line-height: 1.6;
    }
    a { color: inherit; text-decoration: none; }
    /*img { display: block; width: 100%; height: 100%; object-fit: cover; }*/

    .topbar {
      background: #07162e;
      color: rgba(255,255,255,.82);
      font-size: 13px;
    }
    .topbar-inner,
    .nav,
    .wrap {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }
    .topbar-inner {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 9px 0;
      white-space: nowrap;
      overflow: hidden;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 2900;
      background: rgba(255,255,255,.94);
      border-bottom: 1px solid rgba(230,234,240,.9);
      backdrop-filter: blur(14px);
    }
	
	.header_bend{position:relative; width:100%; height:100%;}
	.mm_menu{position:absolute; right:17px; top:17px;}
	
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 76px;
      gap: 28px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      letter-spacing: 0;
      font-size: 25px;
      color: var(--deep);
      flex: 0 0 auto;
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.42) 0 26%, transparent 26% 38%, rgba(255,255,255,.32) 38% 52%, transparent 52%),
        linear-gradient(135deg, #083f91, #1ba7ff);
      box-shadow: 0 12px 26px rgba(11,92,255,.22);
    }
    .menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 80px;
      padding: 0;
      margin: 0;
      list-style: none;
      color: #263142;
      font-weight: 700;
      font-size: 17px;	  
    }
	.menu > li {position:relative;}
	.menu .sub_menu{position:absolute; width:130px; left:0; top:90px; z-index:9999;font-weight:normal; font-family:'CarmenSansOTF-UltraLight';}
	.menu > li:nth-child(3) .sub_menu{width:130px;}
    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 18px;
      border-radius: 6px;
      color: #fff;
      background: var(--blue);
      font-weight: 800;
      box-shadow: 0 12px 22px rgba(11,92,255,.22);
      white-space: nowrap;
    }

    .hero {
      min-height: calc(100vh - 112px);
      position: relative;
      display: grid;
      align-items: center;
      color: #fff;
      overflow: hidden;
      background:
       linear-gradient(90deg, rgba(3,15,35,.9) 0%, rgba(3,20,48,.72) 43%, rgba(3,20,48,.34) 100%),
        url("/images/sin_03_f.jpg") center / cover no-repeat;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 110px;
      background: linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0));
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
      padding: 80px 0 132px;
    }
	
	.hero-inner a.button{color:#fff;}
	a.nav-cta{color:#fff;}
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      font-weight: 800;
      color: #aee8ff;
    }
    .eyebrow::before {
      content: "";
      width: 34px;
      height: 2px;
      background: var(--cyan);
    }
    .swiper-container h1 {
      margin: 0;
      max-width: 760px;
      font-size: clamp(42px, 6vw, 82px);
      line-height: 1.05;
      letter-spacing: 0;
      font-weight: 900;
    }
    .hero-copy {
      max-width: 640px;
      margin: 24px 0 34px;
      font-size: clamp(17px, 2.1vw, 22px);
      color: rgba(255,255,255,.84);
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0 24px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,.32);
      font-weight: 850;
    }
    .button.primary {
      border-color: var(--blue);
      background: var(--blue);
      color: #fff;
    }
    .hero-stats {
      position: absolute;
      z-index: 2;
      left: 50%;
      bottom: -54px;
      transform: translateX(-50%);
      width: min(1180px, calc(100% - 40px));
      /*display: grid;*/
	  display:none;
      grid-template-columns: repeat(4, 1fr);
      background: #fff;
      box-shadow: 0 18px 48px rgba(16,24,40,.12);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }
    .stat {
      min-height: 108px;
      padding: 22px 24px;
      border-right: 1px solid var(--line);
    }
    .stat:last-child { border-right: 0; }
    .stat strong {
      display: block;
      color: var(--blue);
      font-size: 28px;
      line-height: 1.1;
      font-weight: 900;
    }
    .stat span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    section { padding: 104px 0; }
    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 36px;
    }
    .section-title {
      margin: 0;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.18;
      letter-spacing: 0;
      color: var(--deep);
    }
    .section-desc {
      max-width: 550px;
      margin: 0;
      color: var(--muted);
      font-size: 17px;
    }
	
    .section-head-p {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 36px;
    }
    .section-title-p {
      margin: 0;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.18;
      letter-spacing: 0;
      color: var(--deep);
    }
    .section-desc-p {
      max-width: 500px;
      margin: 0;
      color: var(--muted);
      font-size: 17px;
    }	

    .effects {
      padding-top: 124px;
      background: var(--white);
    }
	

	.top-effect-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }
    .top-effect-grid .effect {
      min-height: 172px;
      padding: 26px 18px;
      text-align: center;
      border-right: 1px solid var(--line);
      background: #fff;
    }
    .top-effect-grid .effect:last-child { border-right: 0; }
    .top-effect-grid .icon {
      width: 54px;
      height: 54px;
      margin: 0 auto 16px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #eef7ff;
      color: var(--blue);
      font-size: 28px;
      font-weight: 900;
    }
    .top-effect-grid .effect h3 {
      margin: 0 0 8px;
      color: var(--deep);
      font-size: 18px;
    }
    .top-effect-grid .effect p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }
	
	
    .effect-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }
    .effect-grid .effect {
      min-height: 172px;
      padding: 26px 18px;
      text-align: center;
      border-right: 1px solid var(--line);
      background: #fff;
    }
    .effect-grid .effect:last-child { border-right: 0; }
    .effect-grid .icon {
      width: 54px;
      height: 54px;
      margin: 0 auto 16px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #eef7ff;
      color: var(--blue);
      font-size: 28px;
      font-weight: 900;
    }
    .effect-grid .effect h3 {
      margin: 0 0 8px;
      color: var(--deep);
      font-size: 18px;
    }
    .effect-grid .effect p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .products {
      background: var(--paper);
    }
    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .product {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }
    .product-img {
      height: 180px;
      background: #dce8f5;
    }
    .product-body { position:relative; /*background:#fff;*/ background-color: rgba(255, 255, 255, 1); padding: 26px; }
    .product-kicker {
      color: var(--blue);
      font-weight: 900;
      font-size: 13px;
    }
    .product h3 {
      margin: 8px 0 10px;
      color: var(--deep);
      font-size: 24px;
      line-height: 1.25;
    }
    .product p {
      margin: 0;
      color: var(--muted);
    }
	
	
	.btn_go{display:inline-block; padding:2px 6px; margin:0 0 2px 15px; vertical-align:middle; border:1px solid #ddd; border-radius:28px; font-size:20px; font-weight:normal;}	

    .cta-band {
      padding: 56px 0;
      background:
        linear-gradient(90deg, rgba(5,30,67,.94), rgba(11,92,255,.82)),
        url("https://xn--jx2bj2ut0cqvp.com/theme/basic/img/sec1_02.jpg") center / cover no-repeat;
      color: #fff;
    }
    .cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .cta-inner h2 {
      margin: 0 0 8px;
      font-size: clamp(26px, 3vw, 40px);
      line-height: 1.2;
    }
    .cta-inner p {
      margin: 0;
      color: rgba(255,255,255,.82);
      font-size: 17px;
    }
    .phone {
      display: inline-flex;
      min-height: 56px;
      align-items: center;
      justify-content: center;
      padding: 0 24px;
      border-radius: 6px;
      background: #fff;
      color: var(--deep);
      font-size: 20px;
      font-weight: 900;
      white-space: nowrap;
    }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .case {
      position: relative;
      min-height: 220px;
      overflow: hidden;
      border-radius: 8px;
      background: #d8e4f2;
    }
    .case::after {
      content: "";
      position: absolute;
      inset: 45% 0 0;
      background: linear-gradient(0deg, rgba(2,13,31,.76), rgba(2,13,31,0));
    }
    .case span {
      position: absolute;
      z-index: 1;
      left: 18px;
      right: 18px;
      bottom: 16px;
      color: #fff;
      font-weight: 850;
    }

    .inquiry {
      background: #f9fbff;
    }
    .inquiry-grid {
      display: grid;
      grid-template-columns: .86fr 1.14fr;
      gap: 34px;
      align-items: stretch;
    }
    .info-panel {
      padding: 36px;
      border-radius: 8px;
      background: var(--deep);
      color: #fff;
    }
    .info-panel h2 {
      margin: 0 0 14px;
      font-size: 34px;
      line-height: 1.25;
    }
    .info-panel p {
      margin: 0 0 24px;
      color: rgba(255,255,255,.76);
    }
    .info-list {
      display: grid;
      gap: 14px;
      margin-top: 28px;
    }
    .info-list div {
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.16);
    }
    .info-list b { display: block; margin-bottom: 4px; }
    #main_form form {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      padding: 30px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
    }
    #main_form label {
      display: grid;
      gap: 7px;
      color: #344054;
      font-weight: 800;
      font-size: 14px;
    }
    #main_form input,
    select,
    textarea {
      width: 100%;
      border: 1px solid #d7deea;
      border-radius: 6px;
      padding: 13px 14px;
      font: inherit;
      color: var(--ink);
      background: #fff;
    }
    #main_form textarea {
      min-height: 126px;
      resize: vertical;
    }
    #main_form .full { grid-column: 1 / -1; }
    #main_form .submit {
      border: 0;
      min-height: 50px;
      border-radius: 6px;
      background: var(--blue);
      color: #fff;
      font: inherit;
      font-weight: 900;
      cursor: pointer;
	  padding: 0 20px;
    }

    footer {
      padding: 38px 0;
      background: #07162e;
      color: rgba(255,255,255,.72);
      font-size: 14px;
    }
    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
    }
    .footer-brand {
      color: #fff;
      font-size: 21px;
      font-weight: 400;
    }

    @media (max-width: 980px) {
	.top_logo{width:135px;}
      .menu { display: none; }
      .hero-stats,
      .effect-grid,
      .product-grid,
      .portfolio-grid,
      .inquiry-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .effect:nth-child(2n) { border-right: 0; }
      .effect { border-bottom: 1px solid var(--line); }
      .section-head,
	  .section-head-p,
      .cta-inner,
      .footer-inner {
        align-items: start;
        flex-direction: column;
		margin-bottom:15px;
      }
	  
	  .mm_menu{display:block;}
	  .nav-cta{display:none;}

    }

    @media (max-width: 640px) {
		.top-effect-grid { grid-template-columns: repeat(2, 1fr);}
      .topbar-inner,
      .nav,
      .wrap,
      .hero-inner,
      .hero-stats {
        width: min(100% - 28px, 1180px);
      }
      .topbar-inner { font-size: 12px; }
      .nav { min-height: 68px; }
      .brand { font-size: 21px; }
      .brand-mark { width: 36px; height: 36px; }
      .nav-cta { display: none; }
      .hero {
        min-height: 690px;
        align-items: start;
      }
      .hero-inner { padding: 76px 0 220px; }
      .hero-stats {
        bottom: -150px;
        grid-template-columns: repeat(2, 1fr);
      }
      .stat {
        min-height: 96px;
        padding: 18px;
      }
      .stat:nth-child(2n) { border-right: 0; }
      .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .effects { padding-top: 30px; }
	  .section-title{font-size:22px; letter-spacing:-1px;}
	  .section-title-p{font-size:22px; letter-spacing:-1px;}
      section { padding: 35px 0; }
      .effect-grid,
      .product-grid,
      .portfolio-grid,
      .inquiry-grid,
      form {
        grid-template-columns: 1fr;
      }
      .effect { border-right: 0; }
      .product-img { height: 200px; }
      .case { min-height: 210px; }
      .info-panel,
      form { /*padding: 24px; */}
    }
	
/* 상담 */
.inquiry .wrap div.inbox{width:100%; display:flex; flex-wrap: wrap;}
.inquiry .wrap div.inbox > div:first-child{width:145px; font-size:18px;}
.inquiry .wrap div.inbox > div:last-child{flex:1; padding:0 25px 0 0; line-height:180%; color:#888;}
.inquiry .wrap .help{width:100%; font-size:16px; color:#8c8c8c; padding:15px 0 0 0;}
.inquiry .wrap .sangdam_help{width:100%; font-size:16px; color:#8c8c8c; padding:5px 0; white-space:normal;}

.inquiry .wrap div.req_box > div.inbox > div:first-child{width:120px; font-size:18px; padding-top:6px;}
.inquiry .wrap div.req_box > div.inbox > div:last-child{flex:1; padding:0 25px 0 0; line-height:180%;}
.inquiry .wrap div.req_box .tmiddle{margin-bottom:30px; color:#000 !important;}
.inquiry .wrap div.req_box input[type='text']{width:95%; height:42px; padding:8px 12px; border-radius:6px; border:1px solid #ddd; font-size:17px;}
.inquiry .wrap div.req_box textarea{font-size:15px; width:95% !important; height:100px !important; padding:10px !important; border:1px solid #ddd !important; border-radius:6px; !important}
.inquiry .wrap div.req_box .scrollbar-inner{height:100px;}
.inquiry .btn_req{margin-top:15px; cursor: pointer; padding: 10px 65px; text-align: center; display: inline-block; border-radius: 6px; background: linear-gradient(to right, #0177e4 1%, #35aff5); color: #fff; font-size: 20px;letter-spacing: -1px; box-shadow: 0 0 20px rgb(1 119 228 / 25%);}
.inquiry #view_priv{cursor:pointer;}	


@media (max-width: 768px) {	
	.inquiry .wrap div.inbox > div{width:100% !important;}
	.inquiry form{padding:0 !important;}
	.inquiry .wrap div.req_box .tmiddle{margin-top:10px; margin-bottom:10px;}
}