@charset "utf-8";

body{background:#1E2022}
/*********************************** Header ***********************************/
header{width:100vw; height:8vh; background:#fff;}
header .inner{height:100%;display:flex; align-items: center; justify-content: space-between;}
.logo{width:8vw; height:auto;}
.headerBtn{padding:0.7vmin 1.5vmin 0.5vmin; background:#2E79D1;border-radius:10vmin}
/*********************************** //Header ***********************************/

/*********************************** mainBanner ***********************************/
.mainBanner{width:100vw; height:60vh; background: linear-gradient(to bottom, #1E2022 50%, #fff 50%);}
.mainBanner .inner{display:flex;height:100%;align-items: center; justify-content: center;}
.mainBannerBox{width:100%; height:80%; position:relative; padding:5vmin; background:#1B5EAC;border-radius:2vmin;}
.mainIcon{width:15vw; position:absolute; bottom:-5vmin; right:5vmin}
/*********************************** //mainBanner ***********************************/

/*********************************** intro ***********************************/
.intro{padding:10vh 0 5vh;background:#fff}
.introBox{width:100%;margin-bottom:20vh;display:flex; align-items: flex-start; justify-content: space-between;}
.intro_title{margin-bottom: 2vmin;}
.introImg{width:20vw; padding:2vmin; background:#f4f4f4; border-radius:2vmin}
.introImg img {width:100%}
/*********************************** //intro ***********************************/

/*********************************** benefit1 ***********************************/
.benefit1{padding:15vh 0}
.benefit1 .inner{display:flex; align-items: baseline; justify-content: space-between;  flex-wrap: wrap;}
.benefitBox{width:45%;}
.introBox{width:100%;}
.benefitBox.relative{position:relative; top:50vmin;}
.benefitBox.margin{margin-top:30vmin;}

.benefitBox > p.margin{margin:2vh 0}
.benefitImg{width:100%; background:#262A2F; border-radius:1vmin; padding:2vmin 3vmin;}
.benefitImg p{margin-bottom:5vh; width:70%}

.benefitImgSection .benefitImg{height:45vh; padding:0; overflow:hidden; position:relative}
.benefitImgSection .benefitImg img{width:100%; line-height: 0; margin:0; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
/*********************************** //benefit1 ***********************************/

/*********************************** slider ***********************************/
.slider .inner{margin-bottom:7vh}
.benefitSlider{width:100vw;}
.benefitSlider .swiper-wrapper{width:100%;}
.benefitSlider .swiper-wrapper .swiper-slide{height:45vh;overflow:hidden; border-radius:2vmin;position:relative; padding:4vmin;display:flex; align-items: flex-end; background:#333; background-size: cover !important;}
.benefitSlider .swiper-wrapper .swiper-slide p{width:100%; padding:3vmin 3vmin;position:absolute; bottom:0; left:0;background:linear-gradient(to top, #222222,  rgba(0, 0, 0, 0) );}
.shopImg1{background:url('/theme/basic/img/storeImg1.jpg') !important; }
.shopImg2{background:url('/theme/basic/img/storeImg2.jpg') !important; }
.shopImg3{background:url('/theme/basic/img/storeImg3.jpg') !important; }
.shopImg4{background:url('/theme/basic/img/storeImg4.jpg') !important; }
.shopImg10{background:url('/theme/basic/img/storeImg5.jpg') !important; }
.shopImg5{background:url('/theme/basic/img/storeImg0.jpg') !important; }
.shopImg6{background:url('/theme/basic/img/storeImg0.jpg') !important; }
.shopImg7{background:url('/theme/basic/img/storeImg0.jpg') !important; }
.shopImg8{background:url('/theme/basic/img/storeImg0.jpg') !important; }
.shopImg9{background:url('/theme/basic/img/storeImg0.jpg') !important; }
/*********************************** //slider ***********************************/

/*********************************** benefitBanner1 ***********************************/
.chatBox{width:35vw; margin:10vh auto 0;}
/* 불투명도 조절(역순) */
.chatBox p:nth-last-child(1){opacity: 0.1; background: #434343;}
.chatBox p:nth-last-child(2){opacity: 0.2; background: #434343;}
.chatBox p:nth-last-child(3){opacity: 0.4; background: #434343;}
.chatBox p:nth-last-child(4){opacity: 0.4;}
.chatBox p:nth-last-child(5){opacity: 0.8;}

.chat{padding:1.8vmin 3vmin 1.5vmin; background:#2E79D1; display:block; border-radius:5vmin; width:-webkit-fit-content; margin-bottom:4vmin}
.chat.right{margin-left:50%}
/*********************************** //benefitBanner1 ***********************************/

/*********************************** benefitBanner2 ***********************************/
.benefitBanner2{background:#262A2F;}
.benefitBanner2 .inner{display:flex; align-items: center; justify-content: space-between;}
.benefitBanner2 .inner > img{width:20vw}
.benefitBanner2P{margin-left:10vw; display:flex; flex-direction: column; justify-content: flex-start;}
.subBannerBtn{width:90%; height:5vh;background:#2E79D1; display:flex; align-items: center; padding:4vmin 0; justify-content: center;border-radius:0.5vmin; margin-top:2vmin}
.subBannerBtn span{width:3vmin; height:3vmin; margin-right:3vmin}
.subBannerBtn span img{width:100%;}
/*********************************** //benefitBanner2 ***********************************/

/*********************************** process ***********************************/
.processBox{width:100%; margin:2vmin 0; display:flex; flex-wrap:wrap; align-items: center;justify-content: flex-start;}
.processCnt{width:calc(33.33% - 20px); margin:0 20px 20px 0;  padding:2vmin; border-radius:1vmin; background:#262A2F;}
.processCntImg{width:7vmin; height:7vmin; display: flex; align-items: center; justify-content: center; overflow: hidden; background:#35393F; border-radius:10vmin;}
.processCntImg img{width: 60%;}
.processCntPBox p:nth-child(1){margin:1vmin 0}
.processCntPBox p:nth-child(2){margin-bottom:5vmin}

/* process modal */
.processModalImg{margin:2vmin auto; display:block; width:50%;}
#processModal .modalCnt{padding:5vmin; height:70vh}
.processSlider{padding-bottom:3vmin !important; height:100%;}
.processSlider .swiper-pagination{top:initial !important; bottom:0 !important}
.processSlider .swiper-pagination-bullet-active{background:#2E79D1 !important}
.processSlider .swiper-slide{height:100%; display:flex; flex-direction: column; align-items: center; justify-content: center;}
.processModalCnt{margin:0 auto; display:block; width:-webkit-fit-content}
.processModalCnt p{position:relative; display:flex; align-items: center; margin-bottom:1vmin}
.processModalCnt p:before{content:''; display:block; width:1.6vmin; height:1.6vmin;margin-right:2vmin; background:url('/theme/basic/img/chkOn.svg') center center;background-size:100% 100%}
.processModalCntEtc{margin:0 auto 1vmin}

.processBtn{width:22vw; position:fixed; left:50%; top:50%; transform: translate(-50%, -50%); z-index:999; display:flex; align-items: center; justify-content: space-between;}
.processBtn a{position:relative; display:flex; flex-direction:column; align-items: center; justify-content: center; cursor: pointer;}
.nextBtn{color:#2E79D1}
.processBtn a:before{content:''; width:2vmin; height:2vmin; display:block; background-size:100% 100%; margin-bottom:1vmin}
.prevBtn:before{background:url('/theme/basic/img/processPrev.svg') center center no-repeat}
.nextBtn:before{background:url('/theme/basic/img/processNext.svg') center center no-repeat}

/*********************************** //process ***********************************/

/*********************************** consultant ***********************************/
.consultant .inner{display:flex; align-items: flex-start; justify-content: space-between;}
.consultP{width:50%;}
.consultantingForm{width:50%;}
.contactBox{width:100%;}
.contactBox input[type="text"]{width:100%; margin:1vmin 0 2vmin; padding: 3vmin 1.5vmin; border-radius: 0.5vmin;}

.consultChk input[type="checkbox"]{position:absolute; left:-999px;}
.consultChk input[type="checkbox"] + label{width:100%; margin:2vmin 0 5vmin; position:relative; padding-left:3vmin}
.consultChk input[type="checkbox"] + label:before{width:1.5vmin; height:1.5vmin;top:50%;  transform:translateY(-50%); content:''; position:absolute;display:block; background:url('/theme/basic/img/chkOff.svg') center center; background-size:cover}
.consultChk input[type="checkbox"]:checked + label:before{background:url('/theme/basic/img/chkOn.svg') center center;background-size:cover}
.consultBtn{width:100%; height:5.5vh; display:flex; align-items: center;justify-content: center; cursor: pointer; background:#2E79D1; margin-top:3vmin; padding: 3vmin 0; border-radius: 0.5vmin;}
/*********************************** //consultant ***********************************/

/*********************************** 개인정보처리방침 ***********************************/
.policyTitle{width: 100%; padding: 2.5vmin 3vmin; border-radius: 1vmin; background: #2E79D1; color: #fff;}
/*********************************** //개인정보처리방침 ***********************************/

/*********************************** modal ***********************************/
/* 모달 켜지고 꺼지기 */
.modal{display:none;width:100vw; height:100vh; position:fixed; left:0; top:0; justify-content: center; align-items: center; background:rgba(0, 0, 0, 0.6); z-index: 99;}
.modal.active{display:flex;}

/* 모달 콘텐츠 기본 속성 */
.modalCnt{width:25vw; background:#fff; border-radius:2vmin; position:relative; padding:2vmin 3vmin; overflow:hidden}
.modalHeader{width:100%; height:5vh; display:flex; position:relative; align-items: center; padding:0;}
.modalClose{position:absolute; top:1.2vmin; right:1.5vmin; width:2vmin; height:2vmin; cursor: pointer;}
.modalClose img{width:100%;}

/* 개인정보처리방침 체크박스 */
.modalBody{margin-bottom:5vmin}
.modalBody input[type="checkbox"]{position:absolute; left:-999px;}
.policyBtn1{width:100%; height:4vh; border-radius:1vmin; display:flex; align-items: center; padding:1.5vmin 0 1vmin 4vmin;margin:3vmin 0 2vmin; background:#eee; position:relative;}
.policyBtn1:before{width:1.8vmin; height:1.7vmin;position:absolute; left:1vmin; top:50%; transform:translateY(-50%); content:''; display:block; background:url('/theme/basic/img/policyChkOff.svg') center center; background-size:100% 100%;}
#policyAll:checked + label{background:#2E79D1; color:#fff; font-weight:700;}
#policyAll:checked + label:before{background:url('/theme/basic/img/policyChkOn.svg') center center; background-size:100% 100%;}

.policyBtn2{width:100%; height:3vh; display:flex; align-items:center; padding:0.5vmin 0 0 2.5vmin; margin-bottom:0.5vmin;  position:relative}
.policyBtn2:before{width:1.6vmin; height:1.6vmin; content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); display:block; background:url('/theme/basic/img/chkOff.svg')center center no-repeat; background-size:100% 100%;}
#policy1:checked + label:before, #policy2:checked + label:before{background:url('/theme/basic/img/chkOn.svg')center center no-repeat; background-size:100% 100%;}

/* 개인정보처리방침 텍스트 area */
.policyBox{width:100%; height:10vh; padding: 0 1vmin; border-radius:1vmin; overflow-x:hidden; overflow-y:scroll; background:#eee; margin-bottom:3vmin}

/* 개인정보처리방침 모달 확인 버튼 */
.modalFooter{width:100%; height:5vh; display:flex; align-items: center; justify-content: center; position:absolute; left:0; bottom:0; background:#eee; color:#999; transition:all 0.2s}
.modalFooter.active{color:#fff; background:#2E79D1; cursor: pointer; font-weight:700}

/* 상담신청 완료 모달 */
#cunsultingSubmit img{width:30%; margin:3vmin auto; display:block}
.modalSubmit{margin:2vmin 0 4vmin; background:#2E79D1; display:flex; align-items: center; justify-content: center; width:100%; height:5vh; border:0; padding:1vmin 0 0.7vmin; cursor: pointer;}
/*********************************** //modal ***********************************/

/*********************************** footer ***********************************/
footer{background:#333; padding:8vmin 0}
.footBtn{display:flex; align-items: center; margin-bottom:2vmin}
.footerBtn{margin-right:2vmin; padding:0.8vmin 2vmin 0.5vmin; border:1px solid #fff; border-radius:0.5vmin}
/*********************************** //footer ***********************************/

/****************************************** 게시판 ******************************************/
.list_section_1, .qaWrite, .board_view{margin:20vmin 0; padding: 0;}

/*** 리스트 페이지 ***/
.list_section_1 > .inner{min-width: 768px;}
.page_title{display:flex; justify-content:space-between; align-items:center; width:100%; margin-bottom:3vmin}

.qawrite_link{padding:1vmin 2vmin 0.8vmin; border-radius:0.8vmin; background:#222; color:#fff;}

.board_search select{width:20vmin; height:5vmin; padding:1vmin 1vmin; border-radius:0.8vmin; border:1px solid #999; font-size:2vmin;background: url(/theme/basic/img/select_arrow_icon.svg) no-repeat 95% 50%;background-size: 1.5vmin auto; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.search_wrap{position:relative;}
.search_wrap button{position:absolute; right:2vmin; top:50%; transform:translateY(-50%)}
.search_wrap input{width:40vmin; height:5vmin; padding:1vmin 1vmin; border-radius:0.8vmin; border:1px solid #999; font-size:2vmin; margin-left:2vmin}


.board_list{width:100%;}
.board_table{width:100%;}
.board_table thead{border-top:2px solid #222; border-bottom:1px solid #999;}
.th-num{width:15%;}
.th-title{width:40%}
.th-tel{width:15%;}
.th-area{width:15%;}
.th-date{width:15%;}

.board_table td, .board_table th{padding:2vmin 0;}
.board_table tbody tr{border-bottom:1px solid #999; }
.board_table tbody td, .board_table tbody th{padding:3vmin 0; background: #fff;}
.board_table thead th{background: #1B5EAC; color: #fff; border: #1B5EAC;}

.noticeWriteBtn{display:flex; justify-content:flex-end; align-items:center; margin:5vmin 0}
.noticeWriteBtn a{margin-left:2vmin; padding:1.3vmin 2vmin 1vmin; display:block; background:#222; color:#fff; text-align:center; border-radius:0.8vmin}

/*** 뷰페이지 ***/
.board_view{margin-bottom: 0; padding-bottom: 0;}
.board_view > .inner{padding-bottom:5vmin; min-width: 768px; border-bottom:1px solid #d5d5d5; }
.boardView_title{width:100%;display:flex; align-items:center; justify-content:space-between;}

.board_content{padding: 3vmin 0 20vmin 0;}
.board_content > .inner{min-width: 768px;}
.board_content table{width: 100%;}
.board_content table tr > td{padding: 2vmin;}
.board_content table tr > td:nth-child(1){width:20%; text-align:center; background:#1B5EAC; color:#fff; border:1px solid #1B5EAC; border-bottom:1px solid #fff;}
.board_content table tr > td:nth-child(2){width:80%; border:1px solid #d5d5d5;}

.qaBoard td{width:100%; border:1px solid #999; padding:2vmin 5vmin; word-break: break-all;}
.qaBoard tr > td:nth-child(1){width:30%; text-align:center; background:#1B5EAC; color:#fff; border-bottom:1px solid #fff;}
.qaBoard tr > td:nth-child(2){width:70%}
.qaBoard tr:nth-last-child(1) > td:nth-child(1){border-bottom:1px solid #999}

.view_image{width:100%; display:block}
.view_image img{width:100%;}

.payBoardBox{width:100%; overflow:auto}
.payBoard tr > td{width:10vw !important;}
.view_btn{display:flex; align-items:center; justify-content: flex-end; margin:3vmin 0;}
.qaview_btn{width:100%;}
.view_btn > a{margin-right:1vmin; padding:1vmin 2vmin 0.8vmin;  color:#fff; text-align:center;display:block;}
.viewDeleteBtn{background:#999;border-radius: 1vmin;}
.viewListBtn{background:#1B5EAC;border-radius: 1vmin;}


/*** 게시판 작성 페이지 ***/
.boardWriteTitle{padding-bottom:2vmin; border-bottom:1px solid #222; margin-bottom:2vmin; line-height:1;}

.writeBox{display:flex; align-items:flex-start; justify-content:flex-start; margin-bottom:2vmin}
.writeBox > p{width:20%; }
.writeBox > input{width:80%; padding:1.5vmin 2vmin 1.2vmin; border:1px solid #d5d5d5; border-radius:0.5vmin; line-height:1; margin:0 !important;}
.writeBox > select{width:80%; border:1px solid #d5d5d5; padding: 1.5vmin 2vmin 1.2vmin; border-radius:0.5vmin; line-height:1; background:#fff;}
.areaBox > p{padding-top:2vmin;}
.areaBox > .wr_content{width:80%;}
.writeBox > textarea{width:80% !important; height:30vh !important; padding:2vmin; border-radius:0.6vmin; border:1px solid #d5d5d5}
.writeBox button{display:none !important}
.writeBtn{padding:5vmin 0 8vmin; display:flex; align-items:center; justify-content:center;}
.writeBtn > a, .writeBtn > button{display:block; width:12vw; padding:1.8vmin 2vmin 1.5vmin; border-radius:0.6vmin; color:#fff; line-height:1; text-align:center; margin:0 2vmin}
.writeBtn > a{background:#999;}
.writeBtn > button{background:#222;}