@charset "utf-8";
.desc p:not(:last-child) {margin-bottom: 1.5em;}
.introduct {display: flex; width: 100%; max-width: calc(50% + 630px); padding: 0 var(--container-space);}
.introduct-photo {flex: 1; padding-right: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); margin-left: calc(var(--container-space) * -1); text-align: right;}
.introduct-photo .img img {width: 100%; border-radius: 0 clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px) 0; }
.introduct-photo .photo-deco {padding-right: 30px; margin-top: -22px;}
.introduct-photo .photo-deco img {max-width: 69%;}
.introduct-txt {width: 600px;}
.introduct .desc {margin: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) 0 clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.introduct .sign {text-align: right;}
.history .full-img {margin-bottom: clamp(40px, calc( 75 / var(--inner) * 100vw ), 75px);}
.history-items {position: relative;}
.history-items:before {position: absolute; content: ''; top: 10px; bottom: 0; left: calc(25% + var(--history-indent)); margin-left: -1px; width: 1px; background: #ddd;}
.history-item {display: flex;}
.history-item:not(:last-child) {padding-bottom: clamp(20px, calc( 55 / var(--inner) * 100vw ), 55px);}
.history-year {position: relative; width: 25%; margin-right: var(--history-indent); height: fit-content; font-size: clamp(24px, calc( 58 / var(--inner) * 100vw ), 58px); font-weight: 700; color: var(--secondary-color); text-align: center;}
.history-year:before {position: absolute; content: ''; top: 50%; right: calc(var(--history-indent) * -1); transform: translate(50%, -50%); width: 13px; height: 13px; border: 4px solid var(--secondary-color); background: #fff; border-radius: 100%;}
.history-cnt {flex: 1; padding-left: var(--history-indent); font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.5556em;}
.history-cnt>ul>li:not(:last-child) {margin-bottom: 8px;}
.history-cnt li {display: flex;}
.history-month {min-width: 43px; color: var(--dark-color); font-weight: 600;}
.directions .sec:not(:last-child) {margin-bottom: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.direction-info-box {padding: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); background: #f8f8f8;}
.direction-info {gap: 8px; padding-right: 10px;}
.direction-info span {display: block; margin-top: clamp(5px, calc( 12 / var(--inner) * 100vw ), 12px);}
.direction-info .txt {flex: 1;}
.direction-gallery {display: flex; gap:clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.direction-photo {flex: 1;}
.direction-map {position: relative; padding-bottom: 68.3765%;}
.root_daum_roughmap {position: absolute !important;}
.root_daum_roughmap .wrap_map, .root_daum_roughmap {width: 100% !important; height: 100% !important;}
.root_daum_roughmap .wrap_controllers {display: none;}
.direction-tit {padding: 11px 15px;background: var(--secondary-color); color: #fff; text-align: center;}
.direction-tit span {position: relative; display: inline-block; padding: 0 13px; font-weight: 700; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);}
.direction-tit span:before,
.direction-tit span:after {position: absolute; top: 50%; left: 0; margin-top: -2px;display: inline-block; content: ''; width: 5px; height: 5px; background: rgba(255,255,255,.3); border-radius: 100%;}
.direction-tit span:after {left: auto; right: 0;}
.img.ready {position: relative; background: #f8f8f8; overflow: hidden; padding-bottom: 72.5388%;}
.img.ready span {position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;}
.product {display: flex;}
.mo-product-nav {display: none;}
.mo-product-nav .depth1 ul {display:flex;}
.mo-product-nav .depth1 ul li {flex:1; text-align:center; border:1px solid #ddd; border-left:0;}
.mo-product-nav .depth1 ul li:last-child {border-right:0;}
.mo-product-nav .depth1 ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:50px; padding:0 15px; color:#242424; font-size:16px; font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
.mo-product-nav .depth1 ul li.active {background:var(--secondary-color); border-color:var(--secondary-color);}
.mo-product-nav .depth1 ul li.active a {color:#fff;}
.mo-product-nav .depth2 {padding:15px 5px; background:#fafafa; border-bottom:1px solid #ddd;}
.mo-product-nav .depth2 ul {display:flex;}
.mo-product-nav .depth2 ul li {width:auto; padding:0 15px;}
.mo-product-nav .depth2 ul li a {position:relative; display:block; padding:0 0 0 12px; color:#505050; font-size:14px; line-height:1.33em;}
.mo-product-nav .depth2 ul li a:before {content:""; position:absolute; top:6px; left:0; width:4px; height:4px; background:#ccc;}
.mo-product-nav .depth2 ul li.active a {color:var(--secondary-color);}
.product-nav {width: 23.3335%;}
.product-nav>ul {border-top:1px solid #ddd;}
.product-nav>ul>li {border-bottom:1px solid #ddd;}
.product-nav>ul>li>a {position:relative; padding:20px 48px 20px 20px; background: #f5f9fc; display:block; color:#454545; font-size:17px; font-weight:500; line-height:1.5em;}
.product-nav>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050;}
.product-nav>ul>li.active>a {color:#fff; background:var(--primary-color)}
.product-nav>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.product-nav .submenu {display:none; color:#454545; font-size:16px; font-weight:400; line-height:1.5em;}
.product-nav>ul>li.active .submenu {display: block;}
.product-nav .submenu ul li {border-top:1px solid #e5e5e5;}
.product-nav .submenu ul li a {display:block; padding:13px 20px;}
.product-nav .submenu ul li a:hover {color:var(--secondary-color);}
.product-cnt {flex: 1; padding-left: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}