/* BASIC css start */
/* support */
/* 사용관리법 */
#supportClass {margin-bottom: 100px;}
#supportClass .support-tit { font-size: 34px; font-weight: bold; margin: 100px 0 30px 0;}
#supportClass .supportListWrap { display: flex; justify-content: space-between;}
#supportClass .supportListWrap .support-itemBox { height: 475px; min-width: 475px; position: relative; margin-right: 32px;}
#supportClass .supportListWrap .support-itemBox:last-child { margin-right:0;}
#supportClass .supportListWrap .support-itemBox > div { position: absolute;}
#supportClass .supportListWrap .support-itemBox .listThumb { width: 100%; height: 100%;}
#supportClass .supportListWrap .support-itemBox .listThumb img { width: 100%; height: 100%;}
#supportClass .supportListWrap .support-itemBox .itemTit { font-size: 18px; color: #fff; top: 30px; right: 30px;}
#supportClass .supportListWrap .support-itemBox .listMask { width: 100%; height: 100%; top: 0; left: 0; background: rgba(255,255,255,0.5); opacity: 0;
    visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; text-align: center;}
#supportClass .supportListWrap .support-itemBox:hover .listMask { opacity: 1; visibility: visible;}
#supportClass .supportListWrap .support-itemBox .listMask .link { width: 160px; height: 38px; font-size: 16px; color: #fff; line-height: 38px; border-radius: 25px; background: #363942;
    display: inline-block; position: relative; top: 50%; transform: translateY(50px); transform: translateY(50%); transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
#supportClass .supportListWrap .support-itemBox:hover .listMask .link {
    transform: translateY(0);
}

/* 각인 & 선물 포장 서비스 */
#supportClass .supportServiceWrap { width: 100%;}
#supportClass .supportServiceWrap p > span { font-weight: bold;}
#supportClass .supportServiceWrap .top-cont { position: relative;background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 5px 5px 0 0;
    display: flex; align-items: center; justify-content: center; padding: 40px 0;}
#supportClass .supportServiceWrap p { font-size: 16px}
#supportClass .supportServiceWrap .top-cont > img { position: absolute; right: 75px; bottom: 0px;}
#supportClass .supportServiceWrap .bot-cont { display: flex; justify-content: start; align-items: center;}
#supportClass .supportServiceWrap .bot-cont > div { width: 50%; background-color: #f5f5f5; border: 1px solid #ccc; margin-top: -1px; display: flex; align-items: center; padding: 40px 90px 40px 90px;}
#supportClass .supportServiceWrap .bot-cont > div.left { border-radius: 0 0 0 5px;}
#supportClass .supportServiceWrap .bot-cont > div.right { border-radius: 0 0 5px 0; border-left: 0;}
#supportClass .supportServiceWrap .bot-cont > div > img { margin-right: 30px;}
#supportClass .supportServiceWrap .bot-cont > div p { font-size: 14px;}
#supportClass .supportServiceWrap .bot-cont > div p > span { font-size: 16px; margin-bottom: 10px; display: inline-block;}

#supportClass .supportLinkWrap { width: 100%; display: flex; justify-content: space-between; margin-top: 100px;}
#supportClass .supportLinkWrap > li { width: 350px; height: 140px; box-sizing: border-box; border: 1px solid #b99341; border-radius: 5px; margin-right: 30px;}
#supportClass .supportLinkWrap > li:last-child { margin-right: 0;}
#supportClass .supportLinkWrap > li > a { display: flex; justify-content: space-between; align-items: center; color: #b99341; height: 100%; padding: 0 40px; font-size: 20px; font-weight: bold;} 
/* BASIC css end */

