@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:360px !important;}
.root_daum_roughmap .wrap_map {height:360px !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"HSY PLAN"; font-size:12px; line-height:15px;}


.doc-tit {position:relative; width: fit-content; margin: 0 auto var(--margin-50); font-weight:700; font-size: var(--font-size-40); letter-spacing: -0.02em; color: #242424; text-align:center;} 
.doc-tit::after {content: ""; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; background-color: rgba(237, 28, 36, 0.8);} 

.doc-cnt {padding:var(--padding-80) 0;} 
.doc-cnt:last-child {padding-bottom:0;} 
.doc-cnt.bg-grey {background-color: #f4f4f4;} 

.bullet-item .bullet-list {position:relative; padding-left:14px; margin-top:clamp(5px, 0.1563rem + 0.3906vw, 10px); line-height:1.5;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:#b4b4b4;}

/* 회사소개 */
.greeting-area .flxWrap {margin-top:clamp(30px, 0.5938rem + 3.2031vw, 71px); justify-content:space-between;}
.greeting-area .tit-box {flex:1 0 640px; max-width:640px;}
.greeting-area .tit-box .tit {font-family:var(--font-pop); font-size:var(--font-size-60-28); color:rgba(208, 184, 138, 0.5); font-weight:600; line-height:1.1; letter-spacing:-1px;}
.greeting-area .text-box {flex:1 0 auto; width:1%;}
.greeting-area .dec-tit {font-size:var(--font-size-28-20); color:#242424; font-weight:500; letter-spacing: -1px;} 
.greeting-area .dec-box {margin-top:clamp(15px, 0.5rem + 1.0938vw, 29px); line-height:1.8;}
.greeting-area .dec {padding-top:clamp(15px, 0.5313rem + 1.0156vw, 28px);}
.greeting-area .dec:first-child {padding-top:0;}

.ref-item {display:flex; flex-wrap:wrap; margin:-15px;}
.ref-list {flex:1 0 33.33%; max-width:33.33%; padding:15px;}
.ref-list .inner {padding:clamp(25px, 0.3438rem + 2.2656vw, 49px) clamp(20px, 0.625rem + 1.5625vw, 40px); height:375px; border-radius:10px; border:1px solid #ddd;}
.ref-list .name {padding-top:clamp(15px, 0.6563rem + 0.7031vw, 24px); font-size:var(--font-size-18-15); font-weight:600; color:#242424;}
.ref-list .day {display:block; padding-top:4px; font-weight:500;}
.ref-list .bullet-item {margin-top:clamp(15px, 0.4063rem + 1.3281vw, 32px);}
.ref-list .day + .name {padding-top:8px;}

.map-area .flxWrap {justify-content:space-between; margin-bottom:clamp(20px, 0.3125rem + 2.3438vw, 50px);}
.map-area .title-box {flex:1 0 700px; max-width:700px;}
.map-area .addr-box {flex:1 0 auto; width:1%;}
.map-area .tit {font-size:var(--font-size-50-24); font-weight:bold; color:#242424; line-height:1.2;}
.map-area .addr-list {margin-top:clamp(15px, 0.5rem + 1.0938vw, 29px);}
.map-area .addr-list:first-child {margin-top:0;}
.map-area .name {display:block; font-size:var(--font-size-18-15); font-weight:500; color:#878787;}
.map-area .text {padding-top:clamp(5px, 0.1563rem + 0.3906vw, 10px); font-size:var(--font-size-24-18); font-weight:600; color:#242424; line-height:1.3;}
.map-area .map-info {border:1px solid #ddd; border-top:0; padding:clamp(20px, 0.3125rem + 2.3438vw, 50px) clamp(20px, 0.625rem + 1.5625vw, 40px) clamp(30px, 0.9375rem + 2.3438vw, 60px);}
.map-area .info-list {display:flex; align-items:center; flex-wrap:wrap; margin-top:clamp(10px, 0.3125rem + 0.7813vw, 20px);}
.map-area .info-list:first-child {margin-top:0;}
.map-area .info-list .title {display:flex; align-items:center; justify-content:center; flex:1 0 110px; max-width:110px; height:32px; border-radius:5px; font-weight:600; color:#fff;}
.map-area .info-list .title.num1 {background:var(--color-1);}
.map-area .info-list .title.num2 {background:#393939;}
.map-area .info-list .title.num3 {background:#fff; color:#454545; border:1px solid #ddd;}
.map-area .info-list .dec {flex:1 0 auto; width:1%; padding-left:clamp(10px, 0.3438rem + 0.7031vw, 19px); font-size:var(--font-size-18-15);}

/* 홈쇼핑 */
.shopping-area .logo-box {margin-bottom:clamp(20px, 0.625rem + 1.5625vw, 40px); text-align:center;}
.shopping-area .sh-item {display:flex; flex-wrap:wrap; margin:-15px;}
.shopping-area .sh-item.col-2 + .sh-item.col-3 {margin-top:15px;}
.shopping-area .sh-list {padding:15px} 
.shopping-area .sh-item.col-2 .sh-list {flex:1 0 50%; max-width:50%;}
.shopping-area .sh-item.col-3 .sh-list {flex:1 0 33.33%; max-width:33.33%;}
.shopping-area .sh-rowitem.row-2 {margin:0 -15px -30px;}
.shopping-area .sh-rowitem.row-2 .sh-rowlist {flex:1 0 50%; max-width:50%; padding:30px 15px;}
.shopping-area .sh-rowitem.row-2 .img {margin-top:30px;}
.shopping-area .sh-rowitem.row-2 .img:first-child {margin-top:0;}
.shopping-area .sh-rowitem.row-2 + .sh-item.col-2 {margin-top:15px;}

.woody-box {height:clamp(200px, 6.875rem + 14.0625vw, 380px); border:1px solid #ddd; border-radius:10px;}
.woody-box  .inner {display:flex; align-items:center; justify-content:center; height:100%; text-align:center; font-weight:500; font-size:var(--font-size-20-16);} 

/* 고객센터 */
.req-item {border-top:2px solid #868686;}
.req-list {  border-bottom:1px solid #ddd; }
.req-list .req-title {font-weight:600; color:#333333; font-size:var(--font-size-16-15);}
.req-list .req-question {padding:18px; padding-left:65px; padding-right:40px; position:relative; background:url(../images/sub/req-down.png) no-repeat right 17px center; cursor:pointer;}
.req-list .req-question::after {position:absolute; left:12px; top:12px; content: 'Q'; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--color-1); color:#fff; font-size:var(--font-size-18-15); font-weight:600;}
.req-list.active .req-question {background:#f4f4f4 url(../images/sub/req-up.png) no-repeat right 17px center;;}

.req-list .req-answer {display:none; padding:20px; padding-left:65px; color:#505050;}
.req-list.active .req-answer {display:block;}
.req-list .btn-box {display:flex; justify-content:flex-end; margin-top:25px}
.req-list .btn-box .btn {display:flex; align-items:center; justify-content:center; margin-left:4px; width:56px; height:30px; border:1px solid #ddd; background:#fafafa; font-size:13px; color:#2c2c2c;}