/* Header */
  /* > Full Menu */
.header{position: relative; z-index: 500; width: 100%; height: 100px; border-bottom: 1px solid #ddd; background: #fff; text-align: center; transition: 0.3s;}
.hd_logo{position: absolute; top: 50%; left: 90px; z-index: 10; transform: translateY(-50%);}

.gnb{display: inline-block;}
.gnb_ul{margin: 0 -30px;}
.gnb_ul > li{padding: 0 30px;}
.gnb_ul > li > a{display: block; height: 100%; line-height: 100px; font-size: 16px; font-weight: 400; color: #333;}

.tnb{position: absolute; top: 0; right: 175px; z-index: 10;}
.tnb_ul > li > a{display: block; height: 100%; line-height: 100px; font-size: 16px; font-weight: 400; color: #999;}
.tnb_ul{margin: 0 -15px;}
.tnb_ul > li{padding: 0 15px;}
.tnb_ul > li > a img{margin: -4px 8px 0 0;}

/* Footer */
.footer{display: flex; flex-direction: column; justify-content: center; min-height: 150px; background: #000; color: #fff; text-align: center;}

/* Sub */
.sub_visual{position: relative; width: 100%; height: 400px;}
.sub_visual.layouts_vs{background: url('https://picsum.photos/id/1079/2000/400?grayscale') no-repeat center/cover;}
.sub_visual.product_vs{background: url('https://picsum.photos/id/1031/2000/400?grayscale') no-repeat center/cover;}
.sub_vs_txt_box{position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); width: 100%; text-align: center;}
.sub_vs_txt1{font-size: 40px; font-weight: 500; color: #fff;}
.sub_vs_txt2{margin-top: 10px; font-size: 20px; font-weight: 400; color: #fff;}

.sub_location{position: relative; z-index: 10; text-align: center; background: rgba(0,0,0,0.7);}
.sub_location_ul > li > a{display: flex; flex-direction: column; justify-content: center; height: 50px;}
.sub_location_ul > li > a p{font-size: 16px; font-weight: 400; color: #fff;}
.sub_location_ul > li.active > a{background: #fff;}
.sub_location_ul > li.active > a p{color: #333;}

.sub_contents{padding: 70px 0;}

/* Product */
/* > List */
.prod_category{margin: 0 0 25px;}
.prod_category_ul{margin: -2px;}
.prod_category_ul > li{padding: 2px;}
.prod_category_ul > li > a{display: block; width: 100%; height: 40px; line-height: 40px; padding: 0 15px; border-radius: 5px; border: 1px solid #ddd; font-size: 16px; font-weight: 300; color: #666;}
.prod_category_ul > li.active > a{border: 1px solid #000; color: #fff; background: #000;}
.prod_category_ul > li > a:hover{border: 1px solid #000; color: #fff; background: #000;}

.prod_filter{width: 100%; padding: 25px; background-color: #f7f8fa;}
.prod_sort{float: left;}
.prod_sort_ul{margin: -10px;}
.prod_sort_ul > li{position: relative; padding: 10px;}
.prod_sort_ul > li:after{content: ""; display: block; position: absolute; top: 50%; right: 0; z-index: 1; width: 1px; height: 14px; margin-top: -7px; background: #888;}
.prod_sort_ul > li:last-child:after{display: none;}
.prod_sort_ul > li > a{display: block; width: 100%; height: 46px; line-height: 46px; font-size: 14px; font-weight: 350; color: #888; letter-spacing: 0;}
.prod_sort_ul > li > a:hover{color: #0f0f0f;}
.prod_sort_ul > li.active > a{color: #3a8afd;}

.prod_search{float: right;}
.prod_search_ul{overflow: hidden; border: 1px solid #ddd; border-radius: 5px;}
.prod_search_input{display: block; width: 300px; height: 46px; padding: 0 10px; border: 0; font-size: 16px; font-weight: 300; color: #0f0f0f; background: #fff;}
.prod_search_input::placeholder{color: #999;}
.prod_search_submit{display: block; width: 40px; height: 46px; border: 0; font-size: 15px; font-weight: 300; color: #666; background: #fff;}

.prod_box{margin-top: 40px;}
.prod_wrap{margin: -25px -13px;}
.prod_li{padding: 25px 13px; vertical-align: top;}
.prod_li_thumb{display: block; position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: 100%; border: 1px solid #eee; box-shadow: 5px 0 10px rgba(0,0,0,0.15); overflow: hidden;}
.prod_li_thumb img{position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); width: 100%; max-width: 100%; max-height: 100%; object-fit: contain;}
.prod_li_info{margin-top: 20px; padding: 0 5px;}
.prod_li_category{display: inline-block; margin-bottom: 7px; padding: 3px 7px; border: 1px solid #ccc; border-radius: 5px; font-size: 12px; font-weight: 400; color: #666;}
.prod_li_name{display: block; width:100%; font-size: 18px; font-weight: 500; color: #0f0f0f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prod_li_text1{margin-top: 15px; font-size: 15px; font-weight: 400; color: #666;;}

.prod_li_thumb:hover:before{content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: rgba(0,0,0,0.6);}
.prod_li_thumb:hover:after{content: "More +"; display: block; position: absolute; top: 50%; left: 50%; z-index: 5; width: 150px; height: 40px; margin: -20px 0 0 -75px; line-height: 40px; border: 1px solid #fff; font-size: 16px; font-weight: 400; color: #fff; text-align: center;}
.prod_li_name:hover{color: #3a8afd;}

.prod_pg_wrap{margin-top: 70px;}

.product_sch_tit {font-size: 18px; font-weight: 400; padding: 20px;}
.prod_no_result {width: 100%; display: block; text-align: center; padding: 40px 0;}

/* > View */
.prod_v_ct{padding: 40px 20px; border-top: 2px solid #000; border-bottom: 1px solid #000;}

.prod_v_thumb{float: left; width: 450px; max-width: 100%;}
.prod_v_thumb_item{}
.prod_v_thumb_item_img{overflow: hidden; position: relative; height: 0; padding-bottom: 100%; background-color: #f9f9f9;}
.prod_v_thumb_item_img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;  max-width: 100%; max-height: 100%; object-fit: contain;}
.prod_v_thumb_sl .slick-dots{margin: 10px -2px 0; font-size: 0;}
.prod_v_thumb_sl .slick-dots > li{display: inline-block; position: relative; width: 20%; padding: 0 2px; font-size: 16px; vertical-align: top; cursor: pointer;}
.prod_v_thumb_small_img{overflow: hidden; position: relative; width: 100%; height: 0; padding-bottom: 100%; border: 1px solid #ddd;}
.prod_v_thumb_small_img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; object-fit: contain;}
.prod_v_thumb_sl .slick-dots > li.slick-active .prod_v_thumb_small_img{border: 1px solid #3a8afd;}

.prod_v_info{float: left; width: calc(100% - 450px); padding-left: 50px;}
.prod_v_category{display: inline-block; margin-bottom: 10px; padding: 5px 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; font-weight: 400; color: #666;}
.prod_v_name{padding-bottom: 15px; font-size: 30px; font-weight: 500; color: #0f0f0f; border-bottom: 1px solid #ddd}
.prod_v_expl{margin-top: 20px; font-size: 16px; font-weight: 300; color: #333; line-height: 1.7;}
.prod_v_text1{margin-top: 20px;}
.prod_v_text1 > li{position: relative; margin-top: 7px; padding-left: 10px; font-size: 16px; font-weight: 300; color: #666;}
.prod_v_text1 > li:first-child{margin-top: 0;}
.prod_v_text1 > li:before{content: ""; display: block; position: absolute; top: 9px; left: 0; z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: #3a8afd;}

.prod_v_btn_wrap{margin-top: 40px;}
.prod_v_btn_ul{margin: -5px;}
.prod_v_btn_ul > li{padding: 5px;}
.prod_v_btn{display: flex; flex-direction: column; justify-content: center; width: auto; min-width: 150px; height: 40px; border-radius: 5px; text-align: center; font-size: 14px; font-weight: 300; color: #fff; background: #666; letter-spacing: 0;}
.prod_v_btn i{margin: -4px 10px 0 0; font-size: 16px; font-weight: 300; vertical-align: middle;}
.prod_v_btn.color1{background: #3a8afd;}

.prod_v_bot{margin-top: 20px; text-align: center;}
.prod_v_bot_ul{display: inline-block;}
.prod_v_list_btn{display: block; width: 130px; height: 50px; line-height: 50px; padding: 0 15px; border-radius: 5px; font-size: 14px; font-weight: 400; color: #fff; background: #000; letter-spacing: 0; text-align: center;}

:root {
  --main-color : #f95800;
}

/* 상상이음 영업페이지 */
.main-rolling {position: relative; display: flex; align-items: center; height: 60px; background-color: var(--main-color); overflow: hidden;}
.main-rolling__txt {white-space: nowrap;}
.main-rolling__txt p {position: relative; z-index: 5; text-transform: uppercase; letter-spacing: 1px; -webkit-animation: marquee 10000ms linear infinite; animation: marquee 30000ms linear infinite; align-items: center; display: inline-flex; will-change: transform;}
.main-rolling__txt span {position: relative; padding: 0 16px; font-size: 18px; font-weight: 400; color: #fff; line-height: 1;}
.main-rolling__txt span::after {content: ''; position: absolute; top: calc(50% - 1px); right: -2.5px; width: 3px; height: 3px; border-radius: 50%; background-color: #fff;}
@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.main-sec--1 {padding: 200px 0 0; background: url(/source/img/main1-bg.png) no-repeat bottom right / 533px;}
.main-title__p {font-size: 80px; font-weight: 700; color: #0f0f0f; line-height: 1.1;}
.main-title__p .main-2023 img {margin-bottom: 20px;}
.main-title__p .underline {position: relative; display: inline-block; padding-bottom: 27px;}
.main-title__p .underline::after {content: ''; position: absolute; bottom: 20px; left: 0; width: 100%; height: 3px; background-color: #0f0f0f;}
.main-type {margin-top: 240px;}
.main-type__ul {position: relative; top: -50px; display: flex; margin: 0 -12.5px 0;}
.main-type__li {position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 180px; margin: 0 12.5px; border-radius: 20px; background-color: #fff; box-shadow: 0 0 10px 3px rgba(0,0,0,0.1);}
.main-type__li img {position: relative;}
.main-type__li:nth-child(odd) {top: -56px;}
.main-type__li:nth-child(1) img {width: 130px; top: -40px;}
.main-type__li:nth-child(2) img {width: 67px; top: -37px;}
.main-type__li:nth-child(3) img {width: 79px; top: -32px;}
.main-type__li:nth-child(4) img {width: 75px; top: -38px;}
.main-type__li:nth-child(5) img {width: 97px; top: -28px;}
.main-type__li:nth-child(6) img {width: 88px; top: -39px;}
.main-type__li:nth-child(7) img {width: 89px; top: -31px;}
.main-type__li:nth-child(8) img {width: 86px; top: -38px;}
.main-type__txt {font-size: 18px; font-weight: 400; text-align: center;}
.main-sec--2 {background: /*url('/source/img/main-hand1.png') no-repeat left -90px top 19%,*/ linear-gradient(to bottom, #f8f8f8, #fff, #fff, #fff, #fff);}
.main-sec--2__table_wr {padding: 70px 0 100px;}
.main-title2 {color: #0f0f0f;}
.main-title2__big {font-size: 50px; font-weight: 700; line-height: 1.2;}
.main-title2__small {font-size: 18px; font-weight: 300; padding-top: 25px;}
.main-title2__small span {font-weight: 500;}
.main-table_title {padding-bottom: 10px; font-size: 32px; font-weight: 700; color: var(--main-color);}
.main-table_wr {padding-top: 50px;}
.main-table {width: 100%; background-color: #fbfbfb; border-top: 3px solid #0f0f0f;}
.main-table--2 {text-align: center;}
.main-table th {padding: 20px 0; font-weight: 400; color: #0f0f0f; border-bottom: 1px solid #e8e8e8;}
.main-table td {min-width: 190px; padding: 25px 35px; font-weight: 300; color: #666; border-bottom: 1px solid #e8e8e8;}
.main-table td:first-child {font-weight: 400; color: #0f0f0f; text-align: center;}
.main-table td p {padding: 3px 0;}
.txt-circle {margin-left: 9px; text-indent: -9px;}
.txt-circle::before {content: ''; display: inline-block; width: 2px; height: 2px; background-color: #7a7a7a; margin: 0 5px 3.5px 0;}
.main-period {padding: 45px 0 90px; background: url('/source/img/main-period_bg.jpg') no-repeat center / cover; border-radius: 40px 40px 0 0;}
.main-period__shadow {position: relative; width: 100%;}
.main-period__shadow::before, .main-period__shadow::after {content: ''; position: absolute; bottom: -90px; width: 50%; height: 50px; background-color: #fff;}
.main-period__shadow::before {left: 0; border-radius: 0 100px 0 0; box-shadow: inset -5px 10px 10px rgba(0,0,0,0.1);}
.main-period__shadow::after {left: 50%; border-radius: 100px 0 0 0; box-shadow: inset 5px 10px 10px rgba(0,0,0,0.1);}
.main-period__shadow__white {position: absolute; left: 50%; transform: translateX(-50%); bottom: -113px; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; filter: blur(4px); z-index: 5;}
.main-period__txt1 {font-size: 28px; font-weight: 700; color: #fff; text-align: center;}
.main-period__txt2 {display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 500; color: #fff; text-shadow: 4px 4px 3px rgba(0,0,0,0.5); line-height: 1.25;}
.main-period__txt2 p:first-child::after {content: '-'; display: inline-block; margin: 0 40px 20px; font-size: 40px;}
.main-period__txt2 span {font-size: 66px; font-weight: 400;}
.main-sec--4 {padding: 75px 0 120px; /*background: url('/source/img/main-hand2.png') no-repeat left -90px top 9%;*/}
.main-form-wr {padding: 50px 0 0 0;}
.main-form-ul {border-top: 3px solid #0f0f0f; border-bottom: 3px solid #0f0f0f;}
.main-form-li {padding: 50px 20px; }
.main-form-li:not(:last-child) {border-bottom: 1px solid #ddd;}
.main-form-li__maintit {font-size: 22px; font-weight: 500; color: #0f0f0f;}
.main-form-li__subtxt {color: #0b21ee;}
.main-form-li__tit {padding-bottom: 25px;}
.main-form-li .check-wr {display: flex; flex-wrap: wrap;}
.main-form-li .check-box {width: 20%;}
.main-form-box_wr {display: flex; flex-wrap: wrap; margin: -15px 0;}
.main-form-box {width: 50%; padding-right: 60px; margin: 15px 0;}
.check-wr {margin: -7.5px 0;}
.check-box {padding: 7.5px 0;}
.check-box input[type="checkbox"] {position: absolute; width: 0; height: 0;}
.check-box input[type="checkbox"] + label {position: relative; padding-left: 32px; cursor: pointer;}
.check-box input[type="checkbox"] + label::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 22px; height: 22px; border: 1px solid #bbb; border-radius: 3px; background-color: #fff;}
.check-box input[type="checkbox"]:checked + label::before {border-color: var(--main-color); background: var(--main-color) url('/source/img/icon-check.svg') no-repeat center / 11px;}
.main-form-box__tit {margin-bottom: 5px; font-weight: 400; color: #0f0f0f;}
.req::before {content: '*'; display: inline; font-weight: 400; color: var(--main-color);}
.eum-text {width: 100%; height: 60px; padding: 0 20px; border-radius: 5px; border: 1px solid #eee; background-color: #fbfbfb;}
.eum-memo {width: 100%; height: 200px; padding: 20px; border-radius: 5px; border: 1px solid #eee; background-color: #fbfbfb;}
label[for="privacy"] {color: #0f0f0f;}
.privacy-req {font-weight: 400; color: var(--main-color);}
.main-form-li .eum-memo {margin-top: -10px;}
.privacy-wr {padding: 10px 20px 0;}
.btn-wr {display: flex; justify-content: center; align-items: center;}
/* 버튼 스타일 */
.btn-submit {position: relative; width: 250px; height: 76px; border-radius: 125px; background-color: var(--main-color); font-size: 22px; font-weight: 500; color: #fff; box-shadow: 0 3px 8px 1px rgba(249, 88, 0, .3); border: 0; outline: 0; overflow: hidden;	-webkit-transition: color 0.3s; 	transition: color 0.3s;	z-index: 1;	-webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;}
.btn-submit::before, .btn-submit::after {content: '';	position: absolute;	height: 100%;	width: 100%; bottom: 100%;	left: 0;	z-index: -1;	-webkit-transition: -webkit-transform 0.3s;	transition: transform 0.3s;	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.btn-submit::before {background: #ff9b64;}
.btn-submit::after {background: #ff6a18;}
.btn-submit:hover {color: #fff;}
.btn-submit:hover::before,.btn-submit:hover::after {-webkit-transform: translate3d(0, 100%, 0);	transform: translate3d(0, 100%, 0);}
.btn-submit:hover::after {-webkit-transition-delay: 0.175s;	transition-delay: 0.175s;}

/* footer */
.footer {padding: 33px 0 53px; min-height: 100px; background-color: #333; color: #ddd;}
.ft-wr {display: flex; justify-content: space-between; align-items: flex-start;}
.ft-ul {display: flex; margin: -7px -22px;}
.ft-ul li {position: relative; display: flex; padding: 7px 22px;}
.ft-ul li:not(:last-child)::after {content: ''; position: absolute; right: -0.5px; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background-color: #666;}
.ft-right img {width: 176px;}
.ft-left__info-tit {padding-right: 10px; font-weight: 400; color: #fff;}
.ft-left__copy1 {color: #fff;}

.ft-btn {position: fixed; right: 30px; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 5px 5px 3px rgba(0,0,0,0.07); cursor: pointer;}
.ft-btn--write {bottom: 100px; background-color: #fff; border: 2px solid var(--main-color);}
.ft-btn--top {bottom: 30px; background-color: var(--main-color); border: 2px solid var(--main-color); font-weight: 500; color: #fff;}
.ft-btn--write svg {width: 24px; fill: var(--main-color);}

.footer.on {position: relative;}
.footer.on .ft-btn {position: absolute;}
.footer.on .ft-btn--write {top: -95px;}
.footer.on .ft-btn--top {top: -25px;}