@charset "UTF-8";

/*** CSS Style by DesignTONG                                             ***/
/*** URL : http://www.designtong.co.kr                                   ***/
/*** Copyright 2021. DesignTONG all rights reserved.                     ***/
/*** License : 본 저작물의 무단 전제/복제/배포/도용을 금지 합니다.       ***/
/***           단, 스킨을 구매한 사용자에게 1 사이트 사용을 허용합니다.  ***/
/***           디자인통에서 자체 제작한 무단도용 방지 프로그램이 자동    ***/
/***           실행되며, 무단도용 확인시 법적인 책임을 지셔야 합니다.    ***/




/** 웹폰트 **/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');


/** 레이아웃 **/
body { color: #000; letter-spacing: -0.04em; }
#contents { padding-top: 80px; padding-bottom: 0; }
#contents .sub_content { padding:  0; max-width: none !important; }


/** 모바일 레이아웃 **/
.mobile #contents { padding-top: 80px; }
.mobile #contents .sub_content { width: 100% !important; padding: 0 !important; }


/** 헤더 **/
#header_wrap .nav { border-bottom: solid 1px #ededec; }
.headerContents ul li.logo { width: 30%; }
.headerContents ul li.logo img { max-width: 100% !important; }
.headerContents ul li.menu { width: 70%; }
.headerContents ul li.menu .item { padding: 0 0 0 70px; }
.headerContents ul li.menu .item:first-child { padding-left: 0; }
.headerContents ul li.menu .item a { font-family: 'Noto Sans KR'; font-weight: 500; font-size: 18px; }


/** 모바일 헤더 **/
.mobile #header_wrap .nav .gnb { width: 100%; }
.mobile .headerContents ul li { display: block; width: auto; }
.mobile .headerContents ul li.logo { padding: 10px 30px; border-bottom: solid 1px #ededec; }
.mobile .headerContents ul li.logo a:first-child img { max-width: 95px !important; }
.mobile .headerContents ul li.logo a:last-child img { max-height: 15.33px !important; }
.mobile .headerContents ul li.menu { display: flex; justify-content: space-evenly; padding: 0; text-align: center; }
.mobile .headerContents ul li.menu .item { display: inline-block; padding: 0; line-height: 30px; }
.mobile .headerContents ul li.menu .item a { font-size: 12px; }


/** 서비스 소개 **/
#introduction { display: flex; align-items: center; }
#introduction > li.description { width: 33.33%; }
#introduction > li.description h3 { font-family: 'Noto Sans KR'; font-weight: 500; font-size: 36px; }
#introduction > li.description h3::after { content: ''; display: block; width: 230px; height: 1px; background-color: #ccc; margin: 30px 0; }
#introduction > li.description h4 { font-family: 'Noto Sans KR'; font-weight: 400; font-size: 22px; }
#introduction > li.banner { position: relative; width: 66.67%; }
#introduction > li.banner ul.slick-slider li em { display: none; }
#introduction > li.banner ul.slick-dots { bottom: 10px; padding: 0 8px; z-index: 99; /*text-align: left;*/ }
#introduction > li.banner ul.slick-dots li { margin: 0; }
#introduction > li.banner ul.slick-dots li button { width: 10px; height: 10px; padding: 0; margin: 0 8px; background-color: #ccc; border-radius: 50%; transition-duration: 0.5s; }
#introduction > li.banner ul.slick-dots li.slick-active button { background-color: #aaa; }


/** 모바일 서비스 소개 **/
.mobile #introduction { flex-wrap: wrap; }
.mobile #introduction > li { display: block; width: 100%; }
.mobile #introduction > li.description { margin: 30px 0; }
.mobile #introduction > li.description h3 { font-size: 16px; text-align: center; }
.mobile #introduction > li.description h3::after { width: 86px; margin: 18px auto; }
.mobile #introduction > li.description h4 { font-size: 13px; text-align: center; }
.mobile #introduction > li.banner ul.slick-dots { bottom: 6px; padding: 0 10px; }
.mobile #introduction > li.banner ul.slick-dots li button { width: 5px; height: 5px; margin: 0 3px; }


/** 서비스 종류 **/
#type { display: inline-block; width: 100%; margin-top: 45px; }
#type .js-typeMenu { display: flex; border-top: solid 3px #f2f2f2; border-bottom: solid 3px #f2f2f2; }
#type .js-typeMenu li { text-align: center; }
#type .js-typeMenu li a { display: block; position: relative; font-family: 'Noto Sans KR'; font-weight: 500; font-size: 18px; padding: 15px 0; }
#type .js-typeMenu li a::after { content: ''; display: block; position: absolute; left: 50%; bottom: -3px; width: 0; height: 3px; background-color: #84388e; transition-duration: 0.2s; }
#type .js-typeMenu li.on a::after { left: 0; width: 100%; }
#type #typeBanner ul { margin-top: 15px; }
#type #typeBanner ul li { display: none; }
#type #typeBanner ul li em { display: none; }
#type #typeBanner ul li.on { display: block; }
#type .js-boardList { display: flex; flex-wrap: wrap; width: calc(100% + 10px); margin: 10px 0 0 -5px; }
#type .js-boardList li { width: 33.33%; margin-top: 20px; }
#type .js-boardList li .item { padding:  0 5px; }
#type .js-boardList li .item .thumbnail { overflow: hidden; }
#type .js-boardList li .item .thumbnail img { transition-duration: 0.5s; }
#type .js-boardList li .item:hover .thumbnail img { transform: scale(1.05); }
#type .js-boardList li .item .subject { font-family: 'Noto Sans KR'; font-weight: 400; font-size: 22px; text-align: center; margin-top: 10px; }
#type .js-boardList li .item .subject em { display: block; font-size: 16px; }
#type .js-board-navigation a { display: flex; align-items: center; justify-content: center; width: 470px; height: 70px; margin: 60px auto 0 auto; border: solid 1px #ccc; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 20px; }
#type .js-board-navigation a::after { content: ''; display: inline-block; width: 15px; height: 15px; background: url("../../img/main/btn_arrowDown_bold.png") no-repeat center center; background-size: 100%; margin-left: 10px; }
#type .js-board-navigation a:hover { color: #84388e; border-color: #84388e; }


/** 모바일 서비스 종류 **/
.mobile #type .js-typeMenu { overflow-x: auto; overflow-y: hidden; border-top-width: 1.5px; border-bottom-width: 1.5px; }
.mobile #type .js-typeMenu li { width: auto !important; white-space: nowrap; margin: 0 15px; }
.mobile #type .js-typeMenu li a { font-size: 11px; padding: 10px 0; }
.mobile #type .js-typeMenu li a::after { bottom: 0; height: 1.5px; }
.mobile #type .js-typeMenu li.on a::after { left: -15px; width: calc(100% + 30px); }
.mobile #type .js-boardList { width: calc(100% - 10px); margin: 0 5px; }
.mobile #type .js-boardList li { width: 50%; margin-top: 15px; }
.mobile #type .js-boardList li .item .subject { font-size: 12px; }
.mobile #type .js-boardList li .item .subject em { font-size: 9px; }
.mobile #type .js-board-navigation a { width: 160px; height: 30px; margin: 20px auto 0 auto; font-size: 12px; }
.mobile #type .js-board-navigation a::after { width: 6px; height: 6px; margin-left: 5px; }


/** 서비스 종류 레이어 **/
#lyType { left: 50%; top: 50%; width: 780px; height: 620px; transform: translate(-50%, -50%); overflow: visible; }
#lyType .ly_cont { min-height: calc(620px - 74px); padding: 35px; }
#lyType .ly_cont .title { display: flex; align-items: center; }
#lyType .ly_cont .title .logo { border: solid 1px #d1cdd4; }
#lyType .ly_cont .title .subject { font-family: 'Noto Sans KR'; font-weight: 700; font-size: 18.67px; padding-left: 18px; }
#lyType .ly_cont .title .subject em { display: block; font-weight: 400; }
#lyType .ly_cont .contents { position: relative; display: flex; align-items: flex-end; overflow: hidden; margin-top: 20px; }
#lyType .ly_cont .contents #boardViewBanner { width: calc(54% - 25px); padding-right: 25px; cursor: move; }
#lyType .ly_cont .contents #boardViewBanner ul.slick-slider li .item img { width: 100%; }
#lyType .ly_cont .contents #boardViewThumbnailBanner { width: 46%; cursor: move; }
#lyType .ly_cont .contents #boardViewThumbnailBanner ul.slick-slider { width: calc(100% + 25px); margin-left: -12.5px; }
#lyType .ly_cont .contents #boardViewThumbnailBanner ul.slick-slider li .item { margin: 0 12.5px; }
#lyType .ly_cont .contents #boardViewThumbnailBanner ul.slick-slider li .item img { width: 100%; }
#lyType .ly_cont .contents .description { position: absolute; right: 0; top: 20px; width: 325px; height: 212px; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 300; overflow: hidden; }
#lyType .control { display: none; position: absolute; left: 50%; top: 50%; width: 115%; transform: translate(-50%, -50%); pointer-events: none; }
#lyType .control .arrow { display: inline-block; width: 43px; height: 78px; background-repeat: no-repeat; background-position: center; background-size: 60%; pointer-events: auto; cursor: pointer; border-radius: 10px; transition-duration: 0.5s; }
#lyType .control .arrow.prev { float: left; background-image: url("../../img/main/btn_arrowLeft_white.png"); }
#lyType .control .arrow.next { float: right; background-image: url("../../img/main/btn_arrowRight_white.png"); }
#lyType .control .arrow:hover { background-color: rgba(0, 0, 0, 0.5); }


/** 모바일 서비스 종류 레이어 **/
.mobile #lyType { width: calc(100% - 20px); height: 250px; }
.mobile #lyType .ly_cont { min-height: calc(250px - 24px); padding: 10px; }
.mobile #lyType .ly_cont .title .logo { width: 75px; }
.mobile #lyType .ly_cont .title .subject { font-size: 11px; padding-left: 10px; }
.mobile #lyType .ly_cont .title .subject em { font-size: 10px; }
.mobile #lyType .ly_cont .contents { margin-top: 8px; }
.mobile #lyType .ly_cont .contents #boardViewBanner { width: calc(54% - 8px); padding-right: 8px; }
.mobile #lyType .ly_cont .contents #boardViewThumbnailBanner ul.slick-slider { width: calc(100% + 8px); margin-left: -4px; }
.mobile #lyType .ly_cont .contents #boardViewThumbnailBanner ul.slick-slider li .item { margin: 0 4px; }
.mobile #lyType .ly_cont .contents .description { top: 3px; width: 46%; height: 127px; font-size: 10px; }
.mobile #lyType .ly_close { padding: 15px; }
.mobile #lyType .control { width: 118%; }
.mobile #lyType .control .arrow { width: 21.5px; height: 39px; border-radius: 5px; }


/** 함께 한 브랜드 **/
#brand { background-color: #ebdff3; padding: 120px 0; margin-top: 60px; }
#brand .title { font-family: 'Noto Sans KR'; font-size: 36px; font-weight: 500; text-align: center; }
#brand .title em { display: block; font-weight: 400; font-size: 22px; }
#brand .js-brandList { display: flex; flex-wrap: wrap; height: 513px; margin: 50px 0; overflow: hidden; }
#brand .js-brandList li { width: 16.66%; text-align: center; margin: 12px 0; }
#brand .js-brandList li em { display: block; font-family: 'Noto Sans KR'; font-size: 21.33px; text-align: center; margin-top: 15px; }
#brand .js-brandList.active { height: auto; }
#brand .js-brand-navigation a { display: flex; align-items: center; justify-content: center; width: 470px; height: 70px; margin: 0 auto; border: solid 1px #ccc; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 20px; background-color: #fff; }
#brand .js-brand-navigation a::after { content: ''; display: inline-block; width: 15px; height: 15px; background: url("../../img/main/btn_arrowDown_bold.png") no-repeat center center; background-size: 100%; margin-left: 10px; }
#brand .js-brand-navigation a:hover { color: #84388e; border-color: #84388e; }


/** 모바일 함께 한 브랜드 **/
.mobile #brand { padding: 50px 0; margin-top: 20px; }
.mobile #brand .title { font-size: 16px; }
.mobile #brand .title em { font-size: 11px; }
.mobile #brand .js-brandList { height: 222px; margin: 20px 0; }
.mobile #brand .js-brandList li { width: calc(25% - 10px); margin: 5px 5px; }
.mobile #brand .js-brandList li em { font-size: 11px; margin-top: 5px; }
.mobile #brand .js-brandList.active { height: auto; }
.mobile #brand .js-brand-navigation a { width: 160px; height: 30px; margin: 0 auto; font-size: 12px; }
.mobile #brand .js-brand-navigation a::after { width: 6px; height: 6px; margin-left: 5px; }


/** 함께 한 브랜드 레이어 **/
#lyBrand { left: 50%; max-width: 800px; max-height: 700px; top: 50%; transform: translate(-50%, -50%); }
#lyBrand .layer_wrap_cont { height: calc(100% - 4px); }
#lyBrand .ly_cont { height: calc(100% - 74px); padding: 35px; overflow-y: auto; }


/** 모바일 함께 한 브랜드 레이어 **/
.mobile #lyBrand { max-width: 340px; max-height: 300px; }
.mobile #lyBrand .ly_cont { height: calc(100% - 24px); padding: 10px 0 10px 10px; }
.mobile #lyBrand .ly_close { padding: 15px; }


/** 제휴 문의 **/
#partnership { background-color: #fafafa; padding: 110px; }
#partnership .title { font-family: 'Noto Sans KR'; font-size: 36px; font-weight: 400; text-align: center; }
#partnership .contents { max-width: 700px; margin: 40px auto 0 auto; }
#partnership .contents dl { display: flex; flex-wrap: wrap; align-items: center; margin: 10px 0; }
#partnership .contents dl dt { display: inline-block; width: 22%; font-family: 'Noto Sans KR'; font-size: 22px; font-weight: 500; }
#partnership .contents dl dt.important::after { content: '*'; font-size: 21.33px; font-weight: 400; color: #ff0000; margin-left: 5px; }
#partnership .contents dl dd { display: inline-block; width: 78%; }
#partnership .contents dl dd input[type=text] { width: 100%; height: 50px; line-height: 50px; border: 1px solid #ccc; font-family: 'Noto Sans KR'; font-size: 22px; }
#partnership .contents dl dd.js-typeForm { margin: 10px 0; }
#partnership .contents dl dd .form_element { margin-right: 19px; }
#partnership .contents dl dd .form_element:last-child { margin-right: 0; }
#partnership .contents dl dd .form_element label { font-family: 'Noto Sans KR'; font-size: 20px; background-position: 1px 8px; cursor: pointer; }
#partnership .contents dl dd textarea { width: 100%; min-height: 300px; padding: 25px; border: 1px solid #ccc; font-family: 'Noto Sans KR'; font-size: 18.67px; font-weight: 300; color: rgba(0, 0, 0, 0.5); margin-top: 20px; }
#partnership .contents dl.typeForm { margin-top: 20px; }
#partnership .contents dl.full dt, #partnership .contents dl.full dd { display: block; width: 100%; }
#partnership .contents .button { margin: 20px 0 0 0; }
#partnership .contents .button button { width: 100%; height: 85px; line-height: 85px; border: solid 1px #84388e; background-color: #84388e; color: #fff; transition-duration: 0.5s; cursor: pointer; font-family: 'Noto Sans KR'; font-size: 26.67px; font-weight: 500; }
#partnership .contents .button button:hover { background-color: #fff; color: #84388e; }


/** 모바일 제휴 문의 **/
.mobile #partnership { padding: 40px 15px; }
.mobile #partnership .title { font-size: 16px; }
.mobile #partnership .contents { margin: 10px auto 0 auto; }
.mobile #partnership .contents dl { margin: 5px 0; }
.mobile #partnership .contents dl dt { width: 30%; font-size: 13px; }
.mobile #partnership .contents dl dt.important::after { font-size: 12px; margin-left: 2px; }
.mobile #partnership .contents dl dd { width: 70%; }
.mobile #partnership .contents dl dd input[type=text] { height: 27.5px; line-height: 27.5px; font-size: 13px; }
.mobile #partnership .contents dl dd.js-typeForm { margin: 5px 0; }
.mobile #partnership .contents dl dd .form_element { width: 50%; margin: 0; }
.mobile #partnership .contents dl dd .form_element label { font-size: 13px; background-position: 1px 3px; }
.mobile #partnership .contents dl dd textarea { min-height: 130px; padding: 12.5px; font-size: 11px; margin-top: 12.5px; }
.mobile #partnership .contents dl.typeForm { margin-top: 10px; }
.mobile #partnership .contents dl.full dt, .mobile #partnership .contents dl.full dd { display: block; width: 100%; }
.mobile #partnership .contents .button { margin: 12.5px 0 0 0; }
.mobile #partnership .contents .button button { height: 40px; line-height: 40px; font-size: 13px; }