/* ////////// 홈페이지제작 홈페이지 제작안내/////////// */
/* ////////// 홈페이지제작 홈페이지 제작안내 ////////// */
/* ////////// 홈페이지제작 홈페이지 제작안내 ////////// */
/* ////////// 홈페이지제작 홈페이지 제작안내 ////////// */
/* ////////// 홈페이지제작 홈페이지 제작안내 ////////// */

.homepage-tit {position: relative; display: block; width: 100%; height: 64px; line-height: 1;  text-align: center; font-size: 40px; color: rgb(0, 0, 0);}
.homepage-sub-txt {position: relative; display: block; width: 100%; height: 64px; line-height: 1;  text-align: center; font-size: 15px;  color: rgb(102, 102, 102); line-height: 1.533;}

/* 홈페이지 제작안내 서비스 */
.homepage-service {padding-bottom: 100px;}
.homepage-service--top {height: 219px; padding-top: 100px;}
.homepage-service--con {position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; width: 1200px; margin: 0 auto; border: 1px solid rgb(238, 238, 238); border-radius: 10px;}
.homepage-service--con--box {position: relative; display: block; width: 16.666666%; height: 170px; border-right: 1px solid rgb(238, 238, 238);}
.homepage-service--con--box:nth-child(6n) {border-right: 0 !important;}
.homepage-service--con--box:nth-child(n+7) {border-top: 1px solid rgb(238, 238, 238);}
.homepage-service--con--box--icon {position: relative; width: 100%; height: 116px; text-align: center; display: flex; justify-content: center; align-items: center;}
.homepage-service--con--box--icon img {display: block;}
.homepage-service--con--box--tit {position: relative; display: block; text-align: center; font-size: 15px; color: rgb(34, 34, 34); line-height: 1.267;}

/* 홈페이지 제작안내 제작유형 */
.homepage-production-type {background-color: #eaf4fa; padding-bottom: 93px;}
.homepage-production-type--top {height: 243px; padding-top: 100px;}
.homepage-production-type--con {position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; width: 986px; margin: 0 auto;}
.homepage-production-type--con--box {border-radius: 10px; background-color: rgb(255, 255, 255); box-shadow: 0px 3px 6px 0px rgba(136, 136, 136, 0.15); width: 480px; height: 174px; display: flex; align-items: flex-start;}
.homepage-production-type--con--box:nth-child(n+3) {margin-top: 26px;}
.homepage-production-type--con--box--icon {position: relative; display: block; width: 126px; height: auto; padding: 43px 0 0 36px;}
.homepage-production-type--con--box--icon img {display: block;}
.homepage-production-type--con--box--info {position: relative; display: block; width: calc(100% - 126px); height: auto; padding-top: 42px;}
.homepage-production-type--con--box--info__tit {display: flex; align-items: center;  font-size: 18px; font-weight: 400; color: rgb(0, 0, 0);}
.homepage-production-type--con--box--info__tit span {font-size: 18px; font-weight: 400; color: rgb(34, 136, 240);}
.homepage-production-type--con--box--info__txt {font-size: 15px; font-weight: 400; color: rgb(34, 34, 34); line-height: 1.533; display: block; margin-top: 5px;}

/*홈페이지 제작안내 제작과정*/
.homepage-production-proces {padding-bottom: 100px;}
.homepage-production-proces--top {height: 224px; padding-top: 100px;}

.homepage-production-proces--con {position: relative; display: flex; align-items: flex-start; justify-content: center; width: 1200px; margin: 0 auto;}
.homepage-production-proces--con--box {position: relative; display: block; width: 280px; height: 420px; background-color: #fff; border-radius: 10px; box-shadow: 0px 3px 6px 0px rgba(136, 136, 136, 0.15); overflow: hidden;}
.homepage-production-proces--con--arrow {margin: 42px 8px 0;}
.homepage-production-proces--con--box--top {position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100px; padding: 0 32px 0 27px;}
.homepage-production-proces--con--box--top h4 {font-size: 22px; font-weight: 400; color: rgb(255, 255, 255);}

.homepage-production-proces--con--box--main {position: relative; display: block; width: 100%; height: calc(100% - 100px); border: 1px solid rgb(238, 238, 238); border-top: 0; padding: 0 27px;}
.homepage-production-proces--con--box--main--text1 {height: 147px; border-bottom: 1px solid rgb(238, 238, 238); padding-top: 20px;}
.homepage-production-proces--con--box--main--text2 {height: calc(100% - 147px); padding-top: 25px;}
.homepage-production-proces--con--box--main p {display: block; font-size: 15px;  color: rgb(34, 34, 34); line-height: 1.533; }
.homepage-production-proces--con--box--main h5 {display: flex; align-items: center; font-size: 15px; color: rgb(240, 32, 86);  margin-bottom: 5px;}
.homepage-production-proces--con--box--main h5 img {display: block; margin-top: -2px;}



/* 홈페이지 제작안내 관리자CMS */
.homepage-admin-cms {background-color: #f4f5f7; height: 540px;}
.homepage-admin-cms--inner {width: 1200px; margin: 0 auto;}
.homepage-admin-cms--inner__tit {position: relative; display: block; height: 166px; font-size: 40px; color: rgb(0, 0, 0); padding-top: 102px;}
.homepage-admin-cms--inner__txt-1 {display: block; font-size: 18px;}
.homepage-admin-cms--inner__txt-2 {display: block; font-size: 15px; color: rgb(102, 102, 102); line-height: 1.533; margin-top: 8px;}
.homepage-admin-cms--inner__cms-img {position: absolute; z-index: 1; right: 38px; top: 47px; display: block;}

.homape-admin-cms-bottom {border: 1px solid rgb(238, 238, 238); border-radius: 20px; background-color: rgb(255, 255, 255); box-shadow: 0px 4px 16px 0px rgba(136, 136, 136, 0.2); width: 1198px; height: 182px; position: absolute; z-index: 1; left: 0; top: 385px; display: flex; align-items: flex-start;}

.homape-admin-cms-bottom__h3 {position: relative; display: flex; width: 190px; height: auto; padding: 47px 0 0 40px; align-items: center; font-size: 22px; color: rgb(0, 111, 224); font-weight: 400; line-height: 1;}
.homape-admin-cms-bottom__h3 img {margin-top: -3 px; display: block;}

.homape-admin-cms-bottom--info {position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; width: calc(100% - 190px); padding-top: 48px;}
.homape-admin-cms-bottom--info li {position: relative; display: block; width: 556px; height: 25px; font-size: 15px; color: rgb(34, 34, 34);}
.homape-admin-cms-bottom--info li:nth-child(2n) {width: calc(100% - 556px);}


/* 홈페이지 제작안내 무상제공 */
.homepage-free {background-color: #0f71c5; padding-bottom: 70px;}
.homepage-free--inner {position: relative; display: flex; width: 1200px; height: auto; align-items: flex-start; margin: 0 auto;}
.homepage-free--inner--left {position: relative; display: block; width: 495px;}
.homepage-free--inner--right {position: relative; display: block; width: calc(100% - 495px);}

.homepage-free--inner--left__h3 {position: relative; display: block; width: 100%; height: 168px; padding-top: 110px; font-size: 40px; color: rgb(255, 255, 255); font-weight: 400;}
.homepage-free--inner--left__txt {position: relative; display: block; width: 100%; height: auto; font-size: 15px; color: rgb(192, 238, 255); line-height: 1.533;}

.homepage-free-service-list {width: 630px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding-top: 82px;}

.homepage-free-service-list>li {position: relative; display: block; border-radius: 5px; background-color: rgb(8, 92, 164); width: 190px; height: 100px;}
.homepage-free-service-list>li:nth-child(n+4) {margin-top: 50px;}
.homepage-free-service-list__number {border-radius: 50%; background-color: rgb(57, 164, 255); position: absolute; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;  color: #fff; font-size: 18px; font-weight: 400; position: absolute; left: 0; right: 0; margin : auto; top: -21px;}

.homepage-free-service-list__txt {display: block; font-size: 18px; color: rgb(255, 255, 255); line-height: 1.333; text-align: center; padding-top: 34px;}
.homepage-free-service-list__txt span {font-size: 18px; line-height: 1.333;}

.homepage-free-service-list__txt2 {position: absolute; display: block; line-height: 1; text-align: center; font-size: 14px; color: rgb(192, 238, 255); font-weight: 200; width: 100%; left: 0; bottom: -21px;}

/* ////////// 포트폴리오 ////////// */
/* ////////// 포트폴리오 ////////// */
/* ////////// 포트폴리오 ////////// */
/* ////////// 포트폴리오 ////////// */
/* ////////// 포트폴리오 ////////// */

.portfolio {padding-bottom: 60px;}
.portfolio-top {min-height: 280px; background-color: rgb(237, 243, 246); padding-bottom: 30px;}

/*포트폴리오 최상단 제목*/
.portfolio-top--tit {display: block; text-align: center; font-size: 34px; color: rgb(6, 28, 52); line-height: 1; padding-top: 72px; font-weight: 400; height: 127px;}

/*포트폴리오 상단 검색*/
.portfolio-top--sch {width: 800px; height: 64px; box-shadow: 0px 3px 10px 0px rgba(136, 136, 136, 0.15); border-radius: 32px; margin: 0 auto; overflow: hidden;}
.portfolio-top--sch input[type=text] {-webkit-appearance: none; -moz-appearance: none;appearance: none; display: block; width: 100%; height: 100%; background-color: #fff; border: 0; font-size: 18px; padding: 0 135px 0 24px;}
.portfolio-top--sch button {border: 0; box-shadow:none; position: absolute; right: 0; top: 0; z-index: 1; display: block; height: 100%; border-radius: 32px 0 0 30px; width: 120px; background-color: rgb(240, 35, 93); overflow: hidden;}

.portfolio-top--sch button>span {position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 400; color: rgb(255, 255, 255); }
.portfolio-top--sch button img {display: block; margin-top: -2px; margin-right: 6px;}
.portfolio-top--sch button:active>span {left: 1px; top: 1px;}

/*포트폴리오 상단 키워드*/
.portfolio-top--keyword {position: relative; display: flex; width: 100%; height: auto; justify-content: center;  align-items: flex-start; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; margin-top: 21px;}
.portfolio-top--keyword__h3 {height: 29px; width: 100px; min-width: 100px; display: flex; align-items: center;  font-size: 18px; color: rgb(6, 28, 52);}
.portfolio-top--keyword--list {position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; height: auto;}
.portfolio-top--keyword--list .keyword {display: flex; height: 29px; border:1px solid rgb(229, 229, 229); background-color: rgb(255, 255, 255); padding: 0 10px; align-items: center; justify-content: center;  font-size: 14px; color: rgb(34, 34, 34); margin-right: 5px; cursor: pointer;}
.portfolio-top--keyword--list .keyword:hover {color: rgb(34, 160, 240); border-color: rgb(34, 160, 240);}
.portfolio-top--keyword--list .keyword.keyword-active {color: rgb(34, 160, 240); border-color: rgb(34, 160, 240);}

/*포트폴리오 분류/탭*/
.portfolio-Classification {padding: 40px 0;}
.portfolio-tab {position: relative; display: flex; align-items: center; justify-content: center; padding: 0 12px; background-color: #fff; border: 1px solid rgb(229, 229, 229); border-radius: 3px; width: fit-content; margin: 0 auto; /* max-width: 1200px; */}
.portfolio-tab li {position: relative; display: flex; align-items: center; justify-content: center;  padding: 0 25px; height: 52px;}
.portfolio-tab li a {position: relative; display: flex; height: 100%;  align-items: center; justify-content: center; font-size: 15px; color: rgb(34, 34, 34);}
.portfolio-tab li a:hover {font-weight: 400; color: rgb(34, 160, 240);}
.portfolio-tab li a:hover:after {position: absolute; content: ""; z-index: 1; left: 0; bottom: -1px; display: block; width: 100%; height: 2px; background-color: rgb(34, 160, 240);}
.portfolio-tab li a.portfolio-tab-active {font-weight: 400; color: rgb(34, 160, 240);}
.portfolio-tab li a.portfolio-tab-active:after {position: absolute; content: ""; z-index: 1; left: 0; bottom: -1px; display: block; width: 100%; height: 2px; background-color: rgb(34, 160, 240);}


/*포트폴리오 목록*/
.portfolio-box {flex-wrap: wrap; display: flex; align-items: flex-start; width: 1344px; margin: 0 auto; padding-top: 40px;}
.portfolio-box--list {position: relative; display: block; width: 212px; height: 315px; margin: 0 6px 40px; background-color: #fff; border: 1px solid rgb(221, 221, 221);}

.portfolio-box--list--thumb {position: relative; display: block; width: 100%; height: 228px; background-color: #fff; overflow: hidden;}
.portfolio-box--list--thumb a {display: block; width: 100%; height: 100%;}
.portfolio-thumb-img {display: block; width: 210px; height: auto;}

.portfolio-box--list--info {position: relative; display: block; width: 100%; height: 85px; border-top: 1px solid rgb(221, 221, 221); background-color: #fff;}
.portfolio-title {position: relative; display: block; width: 100%; height: 46px; padding-top: 16px; padding-left: 12px; font-size: 0; padding-right: 3px;}
.portfolio-title a {font-size: 15px; color: rgb(0, 0, 0); display: inline-block; max-width:  100%; overflow: hidden; line-height: 1.2; height: 18px;}
.portfolio-type {position: relative; display: flex; align-items: flex-start; padding-left: 12px; font-size: 0;}
.portfolio-type span {margin-bottom: 3px; display: inline-block; font-size: 11px; padding: 0 8px; display: flex; height: 23px; align-items: center; justify-content: center; text-align: center; background-color: #f6f6f6; color: #666; padding-top: 1px;}
.portfolio-type span+span {margin-left: 3px;}



/* ////////// 견적문의 ////////// */
/* ////////// 견적문의 ////////// */
/* ////////// 견적문의 ////////// */
/* ////////// 견적문의 ////////// */
/* ////////// 견적문의 ////////// */
.inquiry {position: relative; display: block; width: 1200px; height: auto; margin: 0 auto; padding-bottom: 100px;}

/*견적문의 최상단 제목*/
.inquiry-top {height: 170px; text-align: center; padding-top: 98px;}
.inquiry-top h2 {font-size: 34px; color: rgb(6, 28, 52); }

/*견적문의 문의 종류 선택 탭*/
.inquiry-production-type {position: relative; width: 100%; height: 110px; display: flex; align-items: flex-start; justify-content: center;}
.inquiry-production-type li+li {margin-left: 6px;}
.inquiry-production-type li button {box-shadow: none; cursor: pointer; border-radius: 3px; background-color: rgb(241, 245, 248); width: 160px; height: 50px; display: flex; align-items: center; justify-content: center;  border: 2px solid rgb(241, 245, 248); font-size: 0; color: rgb(102, 102, 102); cursor: pointer;}
.inquiry-production-type li button p {font-size: 15px;}
.inquiry-production-type li button:active {border-color: rgb(34, 160, 240) !important;}
.inquiry-production-type li button:focus {border-color: rgb(34, 160, 240) !important;}
.inquiry-production-type li button img {display: none; margin-right: 4px;}

.inquiry-production-type li button.inquiry-selected-production-type {border-color: rgb(34, 160, 240); background-color: #fff;}
.inquiry-production-type li button.inquiry-selected-production-type p {color: rgb(34, 160, 240); font-weight: 400;}
.inquiry-production-type li button.inquiry-selected-production-type img {display: block;}

/*견적문의 입력*/
.inquiry-write {position: relative; display: block; width: 100%; height: auto; border-top: 1px solid rgb(34, 34, 34);}

/*견적문의 입력 행 */
.inquiry-write--row {position: relative; display: flex; align-items: center; flex-wrap: wrap; min-height: 69px; border-bottom: 1px solid rgb(204, 204, 204);}
.inquiry-write--row--half {position: relative; display: flex; width: 50%; height: 66px; align-items: center;}

/*견적문의 행 제목*/
.inquiry-write--tit {position: relative; display: flex; align-items: center; height: 100%;  font-size: 15px; color: rgb(0, 0, 0); padding-left: 10px; width: 170px;}
.inquiry-write--tit span {font-size: 15px; color: #ff0000; display: block ; padding-top: 8px;}

.inquiry-write--tit2 {position: relative; display: flex; align-items: center; justify-content: space-between; height: 58px;  font-size: 15px; color: rgb(0, 0, 0); padding-left: 10px; width: 100%; padding-top: 10px;}
.inquiry-write--tit2 p {display: block; font-size: 14px; color: rgb(102, 102, 102);}

/*견적문의 행의 입력칸*/
.inquiry-write--cell {position: relative; display: flex; width: calc(100% - 170px); height: 100%; align-items: center;}
.inquiry-write--cell span.bar {width: 14px; text-align: center; font-size: 15px;}
.inquiry-write--cell span.mail-at {width: 20px; text-align: center; font-size: 15px;}

/*견적문의 label*/
.inquiry-write-label {display: flex; align-items: center;}
.inquiry-write-p {font-size: 15px; letter-spacing: -0.030em; display: block; padding-top: 1px;}

/*견적문의 textarea*/
.inquiry-write--textarea {position: relative; display: block; width: 100%; height: auto;}
.inquiry-write--textarea textarea {border-width: 1px; border-color: rgb(221, 221, 221); border-style: solid; border-radius: 3px; background-color: rgb(247, 247, 247); width: 1198px; height: 300px; position: relative; display: block; padding: 17px 22px; font-size: 15px;}
.inquiry-write--textarea textarea:focus {background-color: #fff;}

/*견적문의 파일첨부*/
.inquiry-write--file-upload {position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: auto;}

.inquiry-write--file-upload--1 {position: relative; display: block;padding: 10px 0;}
.inquiry-write--file-upload--2 { display: block; font-size: 14px; color: rgb(34, 34, 34); line-height: 1.571; text-align: right;}
.inquiry-write--file-upload--2 span {color: #22a0f0;}

.area_filebox {position: relative; display: flex; align-items: center;}
.area_filebox input[type="file"] { position: absolute; left: -99999em; opacity: 0; z-index: -99999; text-indent: -99999px;}
.area_filebox label { position: relative; display: flex; cursor: pointer; border-radius: 3px; background-color: rgb(48, 58, 69); width: 150px; height: 46px; align-items: center; justify-content: center; text-align: center;  font-size: 15px; color: rgb(255, 255, 255);}

/*견적문의 문의하기 버튼*/
.inquiry-btn-box {position: relative; display: flex; justify-content: center; border-top: 1px solid rgb(238, 238, 238);padding-top: 16px; margin-top: 26px;}
.inquiry-btn {-webkit-appearance: none; -moz-appearance: none;appearance: none; box-shadow: none; border-radius: 3px; border: 1px solid rgb(34, 160, 240); width: 200px; height: 60px;  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; color: rgb(255, 255, 255); color: rgb(34, 160, 240); background-color: #fff; background-color: rgb(34, 160, 240); color: #fff;}


/* ////////// 마이페이지 ////////// */
/* ////////// 마이페이지 ////////// */
/* ////////// 마이페이지 ////////// */
/* ////////// 마이페이지 ////////// */
/* ////////// 마이페이지 ////////// */

.mypage {position: relative; display: block; width: 100%;}

/*마이페이지 상단*/
.mypage-info {position: relative; width: 100%; height: 280px; display: flex; justify-content: center; align-items: center; background-color: rgb(232, 238, 242); flex-wrap: wrap;}
.mypage-info {display: block; height: 310px;}
.mypage-info--service {position: relative; width: 160px; height: 210px; background-color: rgb(255, 255, 255); border-radius: 5px; margin-right: 10px; display: block;}
.mypage-info--service>h3 {display: block; width: 100%; height: 111px; padding-top: 55px; font-size: 15px; font-weight: 400; color: rgb(0, 0, 0); line-height: 1.4; text-align: center; position: relative;}
.mypage-info--service>h3:after {content: ""; display: block; width: 16px; height: 1px; background-color: rgb(34, 34, 34); position: absolute; bottom: 0; left: 0; right: 0; margin: auto;}
.mypage-info--service--count {position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 20px; width: 100%;}
.mypage-info--service--count span,
.mypage-info--service--count p {font-size: 22px; font-weight: 400; color: rgb(34, 160, 240);}


.mypage-info--customer-infomation {position: relative; display: block; width: 346px; height: 210px; background-color: rgb(255, 255, 255); border-radius: 5px; margin-left: 11px;}
.customer-info-header {position: relative; width: 100%; height: 50px; border-bottom: 1px solid  rgb(238, 238, 238); display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 28px 0;}
.customer-info-header h3 {font-size: 15px; font-weight: 400; color: rgb(0, 0, 0);}
.customer-info-header a {font-size: 13px; color: rgb(102, 102, 102);}

.customer-info-body {position: relative; display: block; width: 100%; height: auto; padding-top: 32px;}
.customer-info-body--row {position: relative; display: flex; align-items: center; flex-wrap: wrap;}
.customer-info-body--row+.customer-info-body--row {margin-top: 12px;}
.customer-info-body--row--left {display: block; width: 87px; font-size: 14px; padding-left: 28px;}
.customer-info-body--row--right {display: block; width: calc(100% - 87px); font-size: 14px; padding-right: 10px;}

/*이용중인서비스*/
.mypage--service-in-use {position: relative; display: block; width: 1200px; margin: 0 auto; /* padding-bottom: 100px; */}
.count-service-in-use {position: relative; display: flex; align-items: flex-end; height: 102px; font-size: 18px; color: rgb(34, 34, 34); padding-bottom: 20px;}
.count-service-in-use {height: 70px; max-width: 1200px; margin: 0 auto;}
.count-service-in-use span {font-weight: 400; font-size: 20px; color: rgb(34, 160, 240);}

/*이용중인서비스 테이블*/
.service-in-use-table {width: 100%; table-layout: fixed;}
.service-in-use-table thead tr {border-top: 1px solid rgb(229, 229, 229); border-bottom: 1px solid rgb(34, 34, 34); height: 54px;}
.service-in-use-table thead tr th {vertical-align: middle; font-size: 14px; color: rgb(0, 0, 0); text-align: center;}

/*마이페이지 - 작업요청게시판 내역*/
.works {width :1200px; margin: 0 auto; padding-bottom: 100px;}
.works-btn {border-radius: 3px; border: 1px solid rgb(102, 102, 102);  display: flex; align-items: center; justify-content: center; width: 118px; height: 38px; font-size: 14px; color: rgb(34, 34, 34);}
.works-btn img {margin-left: 4px; display: block; position: relative; top: -1px;}



.service-in-use-table thead tr th:first-child {text-align: left; padding-left: 40px;}
.service-in-use-table thead tr th:nth-child(2) {text-align: left;}

.service-in-use-table tbody tr td {text-align: center; border-bottom: 1px solid rgb(229, 229, 229); vertical-align: middle; height: 64px;}
.service-in-use-table tbody tr:nth-child(2n) {background-color: rgb(245, 247, 249);}
.service-in-use-table tbody tr td:first-child {text-align: left; padding-left: 40px;}
.service-in-use-table tbody tr td:nth-child(2) {text-align: left;}
.service-in-use-table tbody tr td p {font-size: 14px; color: rgb(34, 34, 34);}
.service-in-use-table tbody tr td p.service-name {font-weight: 400;}

/*이용중인서비스 테이블 상세보기 링크 버튼*/
.service-in-use-table .view-detail {background-color: rgb(34, 160, 240); width: 80px; height: 34px; display: flex; align-items: center; justify-content: center; padding-top: 3px; border-radius: 17px; margin: 0 auto; font-size: 13px; color: rgb(255, 255, 255);}


/* ////////// 마이페이지 서비스 상세보기 ////////// */
/* ////////// 마이페이지 서비스 상세보기 ////////// */
/* ////////// 마이페이지 서비스 상세보기 ////////// */
/* ////////// 마이페이지 서비스 상세보기 ////////// */
/* ////////// 마이페이지 서비스 상세보기 ////////// */

.mypage-service {position: relative; display: block; width: 1200px; height: auto; margin: 0 auto; padding-bottom: 100px;}
.mypage-service--domain {position: relative; display: block; width: 100%; height: 111px; padding-top: 52px; font-weight: 400; font-size: 24px; color: rgb(6, 28, 52);}
.mypage-service__tit {position: relative; display: block; width: 100%; height: 33px; font-size: 18px; color: rgb(0, 0, 0);}
.mypage-service__tit.mypage-service__tit2 {display: flex; align-items: center; justify-content: space-between; height: 60px;}

/*마이페이지서비스 기본정보*/
.basic-onformation {position: relative; display: block; width: 100%; height: auto; padding: 26px 0 24px; border-top: 1px solid rgb(34, 160, 240); border-bottom: 1px solid rgb(229, 229, 229);}
.basic-onformation--row {position: relative; display: flex; align-items: center;}
.basic-onformation--row+.basic-onformation--row {margin-top: 20px;}
.basic-onformation--row--left {position: relative; display: flex; align-items: center; width: 500px;}
.basic-onformation--row--right {position: relative; display: flex; align-items: center; width: calc(100% - 500px);}
.basic-onformation--row .label {width: 130px; font-size: 14px; color: rgb(102, 102, 102); padding-left: 10px;}
.basic-onformation--row .cell {width: calc(100% - 130px); font-size: 14px; color: rgb(34, 34, 34);}

/*마이페이지 테이블*/
.mypage-service--table {width: 100%; table-layout: fixed; border-top: 1px solid rgb(229, 229, 229);}
.mypage-service--table tbody tr {border-bottom: 1px solid rgb(229, 229, 229); height: 47px;}
.mypage-service--table tbody tr th,
.mypage-service--table tbody tr td {vertical-align: middle; height: 46px;}

.mypage-service--table tbody tr th {background-color: rgb(241, 246, 249); font-size: 14px; color: rgb(0, 0, 0); padding-left: 20px; text-align: left;}
.mypage-service--table tbody tr td {padding-left: 16px;font-size: 14px; color: rgb(34, 34, 34);}

/*마이페이지 테이블 비밀번호 변경 버튼*/
.table-pwd-btn {border-width: 1px; border-color: rgb(221, 221, 221); border-style: solid; border-radius: 3px; background-color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center;  width: 60px; height: 28px; font-size: 13px; color: rgb(34, 160, 240);}
.mypage-service--table tbody tr td {padding-left: 16px;font-size: 14px; color: rgb(34, 34, 34);}

/*phpMyAdmin 접속 버튼*/
.phpmyadmin-btn {border-radius: 3px; background-color: rgb(6, 53, 101); width: 110px; height: 30px; display: flex;  align-items: center; justify-content: center; text-align: center; font-size: 13px; color: rgb(255, 255, 255);}


/*작업이력 테이블*/
.work-history-table {width: 100%; table-layout: fixed;}
.work-history-table thead tr {border-top: 1px solid rgb(229, 229, 229); border-bottom: 1px solid rgb(34, 34, 34); height: 54px;}
.work-history-table thead tr th {vertical-align: middle; font-size: 14px; color: rgb(0, 0, 0); text-align: center; }

.work-history-table thead tr th:first-child {text-align: center;}
.work-history-table thead tr th:nth-child(2) {text-align: left;}

.work-history-table tbody tr td {text-align: center; border-bottom: 1px solid rgb(229, 229, 229); vertical-align: middle; height: 64px; }
.work-history-table tbody tr:nth-child(2n) {background-color: rgb(245, 247, 249);}
.work-history-table tbody tr td:first-child {text-align: center;}
.work-history-table tbody tr td:nth-child(2) {text-align: left;}
.work-history-table tbody tr td p {font-size: 14px; color: rgb(34, 34, 34);}
.work-history-table tbody tr td p b {font-size: 14px; color: rgb(34, 34, 34); font-weight: 400;}
.work-history-table tbody tr td a {font-size: 14px; color: rgb(34, 34, 34);}

/*작업이력 테이블 상세보기 링크 버튼*/
.work-history-table .view-detail {background-color: rgb(34, 160, 240); width: 80px; height: 34px; display: flex; align-items: center; justify-content: center; padding-top: 3px; border-radius: 17px; margin: 0 auto; font-size: 13px; color: rgb(255, 255, 255);}


/*마이페이지 이용중인서비스 비밀번호 변경*/
.mypage-pwd-edit {position: fixed; display: flex; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); align-items: center; justify-content: center; display: none;}
.mypage-pwd-edit.mypage-pwd-edit-open {display: flex;}
.mypage-pwd-edit--pop {position: relative; display: block; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); width: 840px; height: 600px; padding: 0 44px;}
.mypage-pwd-edit--close-btn {position: absolute; z-index: 1; right: 0; top: 0; display: flex; width: 55px; height: 55px; align-items: center; justify-content: center; background-color: transparent !important; border: 0 !important; font-size: 0;}
.mypage-pwd-edit__tit {position: relative; display: block; width: 100%; height: 89px; border-bottom: 1px solid rgb(34, 34, 34); padding-top: 48px; font-size: 24px; font-weight: 400; color: rgb(6, 28, 52);}
.mypage-pwd-edit__sub-txt {position: relative; display: block; width: 100%; height: 88px; font-size: 14px; color: rgb(102, 102, 102); line-height: 1.714; padding-top: 17px;}
.mypage-pwd-edit--tab {position: relative; display: flex; align-items: center;}
.mypage-pwd-edit--tab::before {content: ""; position: absolute; display: block; width: 100%; height: 1px; background-color: rgb(153, 153, 153); left: 0; bottom: 0;}
.mypage-pwd-edit--tab a {z-index: 1; position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 45px; background-color: rgb(246, 246, 246);  font-size: 14px; color: rgb(170, 170, 170);  border: 1px solid rgb(221, 221, 221); letter-spacing: -0; border-bottom: 1px solid rgb(153, 153, 153);}
.mypage-pwd-edit--tab a:last-child { border-left: 0;}

.mypage-pwd-edit--tab a.tab-current { border: 1px solid rgb(153, 153, 153); color: rgb(34, 160, 240); border-bottom: 0;}
.mypage-pwd-edit--tab a.tab-current:last-child { border-left: 1px solid rgb(153, 153, 153);}

.mypage-pwd-edit--tab-wrap {position: relative; display: none;}
.mypage-pwd-edit--tab-wrap.tab-wrap-current {display: block;}
.mypage-pwd-edit-table {width: 100%; table-layout: fixed; border-top: 1px solid rgb(229, 229, 229);}
.mypage-pwd-edit-table tbody tr {border-bottom: 1px solid rgb(229, 229, 229);}
.mypage-pwd-edit-table tbody th {height: 46px; background-color: rgb(241, 246, 249); padding-left: 20px; text-align: left; font-size: 14px; color: rgb(0, 0, 0); vertical-align: middle;}
.mypage-pwd-edit-table tbody td {height: 46px; font-size: 14px; color: rgb(34, 34, 34); padding-left: 17px; vertical-align: middle;}

.mypage-pwd-edit-idpwd-enter {position: relative; display: block; width: 100%; height: 163px; padding-top: 36px; padding-bottom: 20px; border-bottom: 1px solid rgb(238, 238, 238);}
.mypage-pwd-edit-idpwd-enter li {position: relative; display: flex; align-items: center; width: 100%;}
.mypage-pwd-edit-idpwd-enter li+li {margin-top: 14px;}
.mypage-pwd-edit-idpwd-enter li label {position: relative; display: block; width: 155px; font-size: 15px; color: rgb(0, 0, 0); letter-spacing: -0.025em;}
.mypage-pwd-edit-idpwd-enter li>div {position: relative; display: block; width: calc(100% - 155px);}

.mypage-pwd-edit-idpwd-btn {display: flex; align-items: center; justify-content: center;}
.mypage-pwd-edit-idpwd-btn button {cursor: pointer; box-shadow: none; border: 0; -webkit-appearance: none; -moz-appearance: none;appearance: none; width: 120px; height: 50px;  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; color: rgb(255, 255, 255); border-radius: 3px;}
.mypage-pwd-edit-cancel-btn {background-color: rgb(100, 108, 118);}
.mypage-pwd-edit-ok-btn {background-color: rgb(34, 160, 240); margin-left: 4px;}



/* ////////// 회원정보 수정(내정보) /////////// */
/* ////////// 회원정보 수정(내정보) /////////// */
/* ////////// 회원정보 수정(내정보) /////////// */
/* ////////// 회원정보 수정(내정보) /////////// */
/* ////////// 회원정보 수정(내정보) /////////// */
.my-info {position: relative; display: block; width: 1200px; margin: 0 auto; padding-bottom: 100px;}
.my-info-header {position: relative; display: block; height: 125px; padding-top: 50px;}
.my-info-name {display: flex; align-items: flex-end; font-size: 34px; color: rgb(6, 28, 52); font-weight: 400;}
.my-info-name span {font-size: 17px; color: rgb(6, 28, 52); position: relative; top: -4px;}

.my-info-body {position: relative; display: block; width: 100%; height: auto;}
.my-info-body .field {font-size: 15px;}
.my-info-edit-btn {border: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none;appearance: none; display: flex; align-items: center; justify-content: center;  text-align: center; font-size: 18px; color: rgb(255, 255, 255); margin: 0 auto; border-radius: 3px; background-color: rgb(34, 160, 240); width: 180px; height: 60px;}


/*회원정보 수정(내정보) 비번변경창*/
.my-info-pop {position: fixed; display: flex; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); align-items: center; justify-content: center; display: none;}
.my-info-pop.my-info-pop-open {display: flex;}

.my-info-pop-edit {position: relative; display: block; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); width: 590px; height: 400px; padding: 0 45px;}
.my-info-pop-edit__tit {display: block; height: 89px; font-size: 24px; color: rgb(6, 28, 52); border-bottom: 1px solid #000; padding-top: 48px; font-weight: 400;}

.my-info-pop-edit-ul {position: relative; display: block; width: 100%; height: auto; border-bottom: 1px solid rgb(238, 238, 238); padding: 20px 0;}
.my-info-pop-edit-ul li {position: relative; display: flex; align-items: center; width: 100%;}
.my-info-pop-edit-ul li+li {margin-top: 14px;}
.my-info-pop-edit-ul li>label {position: relative; display: block; width: 178px; font-size: 15px; color: rgb(0, 0, 0);}
.my-info-pop-edit-ul li>div {position: relative; display: block; width: calc(100% - 178px);}
.my-info-pop-edit--close-btn {position: absolute; z-index: 1; right: 0; top: 0; display: flex; width: 55px; height: 55px; align-items: center; justify-content: center; background-color: transparent !important; border: 0 !important; font-size: 0;}

.my-info-pwd-edit {-webkit-appearance: none; -moz-appearance: none;appearance: none; cursor: pointer; box-shadow: none; border: 1px solid rgb(221, 221, 221); border-radius: 3px; width: 104px; height: 32px; background-color: #fff;  display: flex; align-items: center; justify-content: center; font-size: 14px; color: rgb(102, 102, 102);}


/* ////////// 작업요청게시판 /////////// */
/* ////////// 작업요청게시판 /////////// */
/* ////////// 작업요청게시판 /////////// */
/* ////////// 작업요청게시판 /////////// */
/* ////////// 작업요청게시판 /////////// */
/* ////////// 작업요청게시판 /////////// */

/*작업요청게시판 상단 제목*/
.request-work-tit {position: relative; display: block; width: 100%; height: 110px; font-size: 24px; color: rgb(6, 28, 52); font-weight: 400; padding-top: 59px;}

/*작업요청게시판 리스트 글쓰기 버튼 */
.request-work-write-btn {border: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none;appearance: none; display: flex; align-items: center; justify-content: center;  text-align: center; font-size: 18px; color: rgb(255, 255, 255); margin: 0 auto; border-radius: 3px; background-color: rgb(34, 160, 240); width: 180px; height: 60px;}

/*작업요청 쓰기*/


/* ////////// 작업요청 ////////// */
/* ////////// 작업요청 ////////// */
/* ////////// 작업요청 ////////// */
/* ////////// 작업요청 ////////// */
/* ////////// 작업요청 ////////// */
.request-work {position: relative; display: block; width: 1200px; height: auto; margin: 0 auto;}

/*작업요청 최상단 제목*/
.request-work-top {height: 170px; text-align: center; padding-top: 98px;}
.request-work-top h2 {font-size: 34px; color: rgb(6, 28, 52); }

/*작업요청 문의 종류 선택 탭*/
.request-work-production-type {position: relative; width: 100%; height: 110px; display: flex; align-items: flex-start; justify-content: center;}
.request-work-production-type li+li {margin-left: 6px;}
.request-work-production-type li button {box-shadow: none; cursor: pointer; border-radius: 3px; background-color: rgb(241, 245, 248); width: 160px; height: 50px; display: flex; align-items: center; justify-content: center;  border: 2px solid rgb(241, 245, 248); font-size: 0; color: rgb(102, 102, 102); cursor: pointer;}
.request-work-production-type li button p {font-size: 15px;}
.request-work-production-type li button:active {border-color: rgb(34, 160, 240) !important;}
.request-work-production-type li button:focus {border-color: rgb(34, 160, 240) !important;}
.request-work-production-type li button img {display: none; margin-right: 4px;}

.request-work-production-type li button.request-work-selected-production-type {border-color: rgb(34, 160, 240); background-color: #fff;}
.request-work-production-type li button.request-work-selected-production-type p {color: rgb(34, 160, 240); font-weight: 400;}
.request-work-production-type li button.request-work-selected-production-type img {display: block;}

/*작업요청 입력*/
.request-work-write {position: relative; display: block; width: 100%; height: auto; border-top: 1px solid rgb(34, 34, 34);}

/*작업요청 입력 행 */
.request-work-write--row {position: relative; display: flex; align-items: center; flex-wrap: wrap; min-height: 69px; border-bottom: 1px solid rgb(204, 204, 204);}
.request-work-write--row--half {position: relative; display: flex; width: 50%; height: 66px; align-items: center;}

/*작업요청 행 제목*/
.request-work-write--tit {position: relative; display: flex; align-items: center; height: 100%;  font-size: 15px; color: rgb(0, 0, 0); padding-left: 10px; width: 170px;}
.request-work-write--tit span {font-size: 15px; color: #ff0000; display: block ; padding-top: 8px;}
.request-work-write--tit2.request-work-write--tit3 {justify-content: flex-start;}

.request-work-write--tit2 {position: relative; display: flex; align-items: center; justify-content: space-between; height: 58px;  font-size: 15px; color: rgb(0, 0, 0); padding-left: 10px; width: 100%; padding-top: 10px;}
.request-work-write--tit2 p {display: block; font-size: 14px; color: rgb(102, 102, 102);}

/*작업요청 행의 입력칸*/
.request-work-write--cell {position: relative; display: flex; width: calc(100% - 170px); height: 100%; align-items: center;}
.request-work-write--cell span.bar {width: 14px; text-align: center; font-size: 15px;}
.request-work-write--cell span.mail-at {width: 20px; text-align: center; font-size: 15px;}

/*작업요청 label*/
.request-work-write-label {display: flex; align-items: center;}
.request-work-write-p {font-size: 15px; letter-spacing: -0.030em; display: block; padding-top: 1px;}

/*작업요청 textarea*/
.request-work-write--textarea {position: relative; display: block; width: 100%; height: auto;}
.request-work-write--textarea textarea {border-width: 1px; border-color: rgb(221, 221, 221); border-style: solid; border-radius: 3px; background-color: rgb(247, 247, 247); width: 1198px; height: 158px; position: relative; display: block; padding: 17px 22px; font-size: 15px;}
.request-work-write--textarea textarea:focus {background-color: #fff;}

/*작업요청 파일첨부*/
.request-work-write--file-upload {position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: auto;}

.request-work-write--file-upload--1 {position: relative; display: block;padding: 10px 0;}
.request-work-write--file-upload--2 { display: block; font-size: 14px; color: rgb(34, 34, 34); line-height: 1.571; text-align: right;}
.request-work-write--file-upload--2 span {color: #22a0f0;}

.area_filebox {position: relative; display: flex; align-items: center;}
.area_filebox input[type="file"] { position: absolute; left: -99999em; opacity: 0; z-index: -99999; text-indent: -99999px;}
.area_filebox label { position: relative; display: flex; cursor: pointer; border-radius: 3px; background-color: rgb(48, 58, 69); width: 150px; height: 34px; align-items: center; justify-content: center; text-align: center;  font-size: 15px; color: rgb(255, 255, 255);}

/*작업요청 문의하기 버튼*/
.request-work-btn-box {position: relative; display: flex; justify-content: center; margin-top: 26px;}
.request-work-btn1 {-webkit-appearance: none; -moz-appearance: none;appearance: none; box-shadow: none; border-radius: 3px; border: 1px solid rgb(89, 95, 102); width: 200px; height: 60px;  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; color: rgb(255, 255, 255); background-color: #fff; background-color: rgb(89, 95, 102); color: #fff;}

.request-work-btn2 {-webkit-appearance: none; -moz-appearance: none;appearance: none; box-shadow: none; border-radius: 3px; border: 1px solid rgb(34, 160, 240); width: 200px; height: 60px;  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; color: rgb(255, 255, 255); background-color: #fff; background-color: rgb(34, 160, 240); color: #fff; margin-left: 4px;}




/* ////////// 유지보수서비스란? /////////// */
/* ////////// 유지보수서비스란? /////////// */
/* ////////// 유지보수서비스란? /////////// */
/* ////////// 유지보수서비스란? /////////// */
/* ////////// 유지보수서비스란? /////////// */
.maintenance {position: relative; display: block; width: 100%; height: auto; padding-bottom: 100px;}

/*유지보수서비스란? 상단소개*/
.maintenance-top {position: relative; display: block; width: 100%; height: auto; background-color: rgb(33, 77, 159);}
.maintenance-top--inner {position: relative; display: block; width: 1200px; height: 350px; margin: 0 auto;}
.maintenance-top--img {position: absolute; right: 30px; bottom: 0; display: block;}
.maintenance-top--h2 {position: relative; display: block; height: 168px; padding-top: 95px; font-size: 34px; color: rgb(255, 255, 255); font-weight: 400;}
.maintenance-top--h2:after {content: ""; position: absolute; display: block; width: 30px; height: 3px; background-color: rgb(255, 255, 255); left: 0; bottom: 12px;}
.maintenance-top--txt-1 {display: block; font-size: 18px; color: rgb(255, 255, 255); line-height: 1.611;}
.maintenance-top--txt-2 {display: block; font-size: 15px; color: rgb(169, 222, 255); line-height: 1.667; margin-top: 9px;}

/*유지보수서비스란? 세션 제목과 소개 텍스트*/
.maintenance-section-top {position: relative; display: block; width: 100%; height: 220px; padding-top: 102px;}
.maintenance-section-top h3 {display: block; text-align: center; font-size: 40px; color: rgb(0, 0, 0);}
.maintenance-section-top  p {display: block; text-align: center;font-size: 15px; color: rgb(102, 102, 102); margin-top: 25px;}
.maintenance-section-top  p span {font-size: 15px; color: #22a0f0; font-weight: 400;}

/*유지보수서비스란? 정기유지관리*/
.maintenance-section-1 {position: relative; display: block; width: 1200px; margin: 0 auto; padding-bottom: 81px; border-bottom: 1px solid rgb(238, 238, 238);}

.maintenance-apply {position: relative; display: flex; align-items: flex-start; justify-content: center;}
.maintenance-apply--box {position: relative; display: block; width: 318px; height: 548px; border: 1px solid rgb(238, 238, 238); border-radius: 10px; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 16px 0px rgba(136, 136, 136, 0.2); overflow: hidden;}
.maintenance-apply--box:hover {border-color: rgb(34, 160, 240);}
.maintenance-apply--box+.maintenance-apply--box {margin-left: 50px;}
.maintenance-apply--header {position: relative; display: block; width: 100%; background-color: rgb(246, 251, 255); height: 176px;}
.maintenance-apply--header h4 {display: block; text-align: center; width: 100%; height: 77px; padding-top: 46px; font-size: 20px; color: rgb(0, 0, 0);}
.maintenance-apply--header--price {position: relative; display: flex; align-items: flex-end; justify-content: center;}
.maintenance-apply--header--price>span {font-size: 34px; font-family: 'Inter', sans-serif; color: rgb(0, 0, 0); font-weight: 500; position: relative; top: 3px; letter-spacing: -0.055em;}
.maintenance-apply--header--price__p1 {font-size: 15px; color: rgb(102, 102, 102);}
.maintenance-apply--header--price__p2 {font-size: 15px; color: rgb(0, 0, 0);}
.maintenance-apply--header--txt {position: relative; display: flex; width: 108px; height: 20px; border: 1px solid rgb(246, 51, 110); align-items: center; justify-content: center; font-size: 14px; color: rgb(246, 51, 110); font-weight: 400; font-family: 'Noto Sans KR', sans-serif; margin: 0 auto; margin-top: 14px;}
.maintenance-apply--body {position: relative; display: block; width: 100%; height: 320px; padding: 22px 49px 0;}
.maintenance-apply--body ul li {position: relative; display: flex; width: 100%; height: 40px; border-bottom: 1px solid rgb(238, 238, 238); align-items: center; justify-content: space-between;}
.maintenance-apply--body ul li .tit {position: relative; font-size: 14px; color: rgb(102, 102, 102); padding-top: 1px;}
.maintenance-apply--body ul li .txt {font-size: 14px; color: rgb(0, 0, 0); padding-top: 1px;}
.maintenance-apply--btn {position: relative; display: flex; align-items: center; justify-content: center;  width: 100%; height: 54px; background-color: rgb(34, 160, 240); font-size: 18px; color: rgb(255, 255, 255); font-weight: 400;}



/*유지보수서비스란? 건별유지보수*/
.maintenance-section-2 {position: relative; display: block; width: 1200px; margin: 0 auto;}
.maintenance-table-box {position: relative; display: block; width: 100%; height: auto;}
.maintenance-table {width: 100%; table-layout: fixed;}
.maintenance-table thead tr {border-top: 1px solid rgb(34, 34, 34); border-bottom: rgb(229, 229, 229); background-color: rgb(247, 249, 251);}
.maintenance-table thead tr th {height: 66px; font-size: 15px; color: rgb(0, 0, 0); font-weight: 400; vertical-align: middle; text-align: left;}
.maintenance-table thead tr th:first-child {padding-left: 30px;}


.maintenance-table tbody tr {border-bottom: 1px solid rgb(229, 229, 229);}
.maintenance-table tbody tr th,
.maintenance-table tbody tr td {min-height: 62px; vertical-align: middle; font-size: 15px; color: rgb(34, 34, 34); line-height: 2.267;}
.maintenance-table tbody tr th:first-child {padding-left: 30px; text-align: left;}
.maintenance-table tbody tr td {padding: 15px 0;}



/* ////////// 약관 ////////// */
/* ////////// 약관 ////////// */
/* ////////// 약관 ////////// */
/* ////////// 약관 ////////// */
/* ////////// 약관 ////////// */

.terms-wrap {position: relative; display: block; height: auto; width: 1200px; margin: 0 auto;}
.terms-wrap-tit {display: block; text-align: center; height: 170px; padding-top: 98px; font-size: 34px; color: rgb(6, 28, 52); font-weight: 400;}

.terms-wrap-main {padding: 50px 0 100px;}
.terms-wrap-main>.txt {font-size: 17px; font-weight: 400; letter-spacing: -0.040em; line-height: 1.7; white-space: pre-line;}





/* ////////// 디자인템플릿 리스트 ////////// */
/* ////////// 디자인템플릿 리스트 ////////// */
/* ////////// 디자인템플릿 리스트 ////////// */
/* ////////// 디자인템플릿 리스트 ////////// */
/* ////////// 디자인템플릿 리스트 ////////// */
/* ////////// 디자인템플릿 리스트 ////////// */

.template {padding-bottom: 60px;}
.template-top {min-height: 255px; background-color: rgb(237, 243, 246); padding-bottom: 30px;}

/*템플릿 최상단 제목*/
.template-top--tit {display: block; text-align: center; font-size: 34px; color: rgb(6, 28, 52); line-height: 1; padding-top: 72px; font-weight: 400; height: 127px;}

/*템플릿 상단 검색*/
.template-top--sch {width: 800px; height: 64px; box-shadow: 0px 3px 10px 0px rgba(136, 136, 136, 0.15); border-radius: 32px; margin: 0 auto; overflow: hidden;}
.template-top--sch input[type=text] {-webkit-appearance: none; -moz-appearance: none;appearance: none; display: block; width: 100%; height: 100%; background-color: #fff; border: 0; font-size: 18px; padding: 0 135px 0 24px;}
.template-top--sch button {border: 0; box-shadow:none; position: absolute; right: 0; top: 0; z-index: 1; display: block; height: 100%; border-radius: 32px 0 0 30px; width: 120px; background-color: rgb(240, 35, 93); overflow: hidden;}

.template-top--sch button>span {position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 400; color: rgb(255, 255, 255); }
.template-top--sch button img {display: block; margin-top: -2px; margin-right: 6px;}
.template-top--sch button:active>span {left: 1px; top: 1px;}

/*템플릿 상단 키워드*/
.template-top--keyword {position: relative; display: flex; width: 100%; height: auto; justify-content: center;  align-items: flex-start; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; margin-top: 21px;}
.template-top--keyword__h3 {height: 29px; width: 100px; min-width: 100px; display: flex; align-items: center;  font-size: 18px; color: rgb(6, 28, 52);}
.template-top--keyword--list {position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; height: auto;}
.template-top--keyword--list .keyword {display: flex; height: 29px; border:1px solid rgb(229, 229, 229); background-color: rgb(255, 255, 255); padding: 0 10px; align-items: center; justify-content: center;  font-size: 14px; color: rgb(34, 34, 34); margin-right: 5px; cursor: pointer;}
.template-top--keyword--list .keyword:hover {color: rgb(34, 160, 240); border-color: rgb(34, 160, 240);}
.template-top--keyword--list .keyword.keyword-active {color: rgb(34, 160, 240); border-color: rgb(34, 160, 240);}

/*템플릿 분류/탭*/
.template-Classification {padding: 40px 0;}
.template-tab {position: relative; display: flex; align-items: center; justify-content: center; padding: 0 12px; background-color: #fff; border: 1px solid rgb(229, 229, 229); border-radius: 3px; width: fit-content; margin: 0 auto; /* max-width: 1200px; */}
.template-tab li {position: relative; display: flex; align-items: center; justify-content: center;  padding: 0 25px; height: 52px;}
.template-tab li a {position: relative; display: flex; height: 100%;  align-items: center; justify-content: center; font-size: 15px; color: rgb(34, 34, 34);}
.template-tab li a:hover {font-weight: 400; color: rgb(34, 160, 240);}
.template-tab li a:hover:after {position: absolute; content: ""; z-index: 1; left: 0; bottom: -1px; display: block; width: 100%; height: 2px; background-color: rgb(34, 160, 240);}
.template-tab li a.template-tab-active {font-weight: 400; color: rgb(34, 160, 240);}
.template-tab li a.template-tab-active:after {position: absolute; content: ""; z-index: 1; left: 0; bottom: -1px; display: block; width: 100%; height: 2px; background-color: rgb(34, 160, 240);}


/*템플릿 목록*/
.template-box {flex-wrap: wrap; display: flex; align-items: flex-start; width: 1345px; margin: 0 auto; padding-top: 40px;}
.template-box--list {position: relative; display: block; width: 254px; height: 385PX; margin: 0 7px 40px; background-color: #fff; border: 1px solid rgb(221, 221, 221);}

.template-box--list--thumb {position: relative; display: block; width: 100%; height: 298px; background-color: #fff; overflow: hidden;}
/* .template-box--list--thumb a {display: block; width: 100%; height: 100%;} */
.template-thumb-img {display: block; width: 252px; height: auto;}

.template-box--list--thumb .template-info-btns {position: absolute; left: 0; top: 0; display: flex; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6);  align-items: center; justify-content: center; transition: opacity 0.2s; visibility: hidden; opacity: 0;}
.template-box--list--thumb:hover .template-info-btns {visibility: visible; opacity: 1;}

.template-info-btns--inner {position: relative; display: block; width: 100%; height: auto;}
.pcview-btn {-webkit-appearance: none; -moz-appearance: none;appearance: none; position: relative; display: flex; text-align: center; border: 1px solid rgba(255, 255, 255,0.5); width: 158px; height: 38px;  border-radius: 20px; align-items: center; justify-content: center; margin: 0 auto; font-size: 13px; font-weight: 400; color: rgb(255, 255, 255); letter-spacing: 0; background-color: transparent;}
.mobileview-btn {-webkit-appearance: none; -moz-appearance: none;appearance: none; position: relative; display: flex; text-align: center; border: 1px solid rgba(255, 255, 255,0.5); width: 158px; height: 38px;  border-radius: 20px; align-items: center; justify-content: center; margin: 0 auto; font-size: 13px; font-weight: 400; color: rgb(255, 255, 255); letter-spacing: 0; margin: 10px auto; background-color: transparent;}

/*템플릿 목록 한줄에 4개*/
.template-box--list {width: 322px; height: 467px}
.template-box--list--thumb {height: 380px;}
.template-thumb-img {width: 320px; height: 380px; height: auto;}



/*
색깔있는 버전의 템플릿 자세히 보기 버튼
.template-application {-webkit-appearance: none; -moz-appearance: none;appearance: none; position: relative; display: flex; text-align: center; border: 1px solid #7c90c1; background-color: #7c90c1; width: 158px; height: 38px;  border-radius: 20px; align-items: center; justify-content: center; margin: 0 auto; font-size: 13px; font-weight: 400; color: rgb(255, 255, 255); letter-spacing: 0;} */
.template-application {-webkit-appearance: none; -moz-appearance: none;appearance: none; position: relative; display: flex; text-align: center; border: 1px solid rgba(255, 255, 255,0.5); width: 158px; height: 38px;  border-radius: 20px; align-items: center; justify-content: center; margin: 0 auto; font-size: 13px; font-weight: 400; color: rgb(255, 255, 255); letter-spacing: 0; background-color: transparent;}


.template-box--list--info {position: relative; display: block; width: 100%; height: 85px; border-top: 1px solid rgb(221, 221, 221); background-color: #fff;}
.template-title {position: relative; display: block; width: 100%; height: 46px; padding-top: 16px; padding-left: 12px; font-size: 0; padding-right: 3px;}
.template-title a {font-size: 15px; color: rgb(0, 0, 0); display: inline-block; max-width:  100%; overflow: hidden; line-height: 1.2; height: 18px;}
.template-type {position: relative; display: flex; align-items: flex-start; padding-left: 12px; font-size: 0;}
.template-type span {margin-bottom: 3px; display: inline-block; font-size: 11px; padding: 0 8px; display: flex; height: 23px; align-items: center; justify-content: center; text-align: center; background-color: #f6f6f6; color: #666; padding-top: 1px;}
.template-type span+span {margin-left: 3px;}


/* ////////// 디자인템플릿 VIEW ////////// */
/* ////////// 디자인템플릿 VIEW ////////// */
/* ////////// 디자인템플릿 VIEW ////////// */
/* ////////// 디자인템플릿 VIEW ////////// */
/* ////////// 디자인템플릿 VIEW ////////// */

.template-view {padding-bottom: 100px;}
.template-view-h3 {display: block; width: 100%; height: 53px;  font-size: 24px; color: rgb(0, 0, 0); font-weight: 400;}

/*디자인템플릿 상단 제목*/
.template-view--tit {position: relative; display: flex; align-items: center; justify-content: center;  background-color: rgb(234, 244, 250); height: 170px; width: 100%; font-size: 34px; color: rgb(6, 28, 52);}

/*템플릿 상세 상단 정보 (header)*/
.template-view--header {position: relative; display: flex; align-items: flex-start; justify-content: space-between; width: 1200px; height: auto; padding: 40px 0; margin: 0 auto;}

.template-view--header--info {position: relative; display: flex; align-items: flex-start; border: 0px solid rgb(221, 221, 221); background-color: rgb(255, 255, 255); width: 929px; height: 471px;}
.template-header-thumb {position: relative; display: block; width: 399px; height: 100%; overflow: hidden; border-right: 1px solid rgb(221, 221, 221);}
.template-header-thumb__img {display: block; width: 398px; height: auto;}/*이미지크기*/

.template-header-main {position: relative; display: block; width: 528px; height: 100%; padding: 0 40px;}
.template-header-main--top {position: relative; display: block; width: 100%; height: 128px; padding-top: 45px;}
.template-header-main--top__tit {display: block; min-height: 47px; border-bottom: 1px solid rgb(238, 238, 238); font-size: 24px; font-weight: 400; color: rgb(0, 0, 0); padding-right: 123px; padding-right: 0;}
.template-header-main--top__btn {position: absolute; right: 0; top: 34px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 3px; background-color: rgb(247, 41, 99); width: 120px; height: 42px; font-size: 15px; font-weight: 400; color: rgb(254, 254, 254); border: 0;}
.template-header-main--top__btn img {display: block; position: relative; top: -2px; margin-left: 6px;}

.template-header-view-btn {position: relative; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 3px; background-color: rgb(247, 41, 99); width: 148px; height: 44px; font-size: 15px; font-weight: 400; color: rgb(254, 254, 254); border: 0; margin-left: 6px;}
.template-header-view-btn img {display: block; position: relative; top: -2px; margin-left: 6px;}

.template-header-explanation {position: relative; display: block; width: 100%; height: 237px; overflow: auto;}
.template-header-explanation dl {display: block;}
.template-header-explanation dl+dl {margin-top: 23px;}
.template-header-explanation .explanation-tit {display: block; font-size: 15px; color: rgb(0, 0, 0); height: 25px;}
.template-header-explanation .explanation-txt {display: block; font-size: 14px; color: rgb(102, 102, 102); line-height: 1.857;}

.template-header-view-sample {position: relative; display: flex; align-items: center; margin-top: 18px;}
.template-header-view-sample_btn {border: 1px solid rgb(34, 160, 240); border-radius: 3px; background-color: rgb(255, 255, 255); width: 148px; height: 44px; text-align: center; display: flex; align-items: center; justify-content: center;  font-size: 15px; color: rgb(34, 160, 240);}
.template-header-view-sample_btn.mo {color: rgb(34, 34, 34); border-color: rgb(102, 102, 102); margin-left: 6px;}

/*메뉴구조*/
.menu-structure {position: relative; display: block; width: 100%; height: auto; background-color: rgb(247, 247, 247); padding: 89px 0 82px;}
.menu-structure--inner {position: relative; display: block; width: 1200px; margin: 0 auto;}
.menu-structure--con {position: relative; display: flex; /* align-items: flex-start; */ width: 100%; height: auto;}
.menu-structure-menu-box {position: relative; background-color: rgb(255, 255, 255); box-shadow: 1.414px 1.414px 8px 0px rgba(0, 0, 0, 0.1); width: 200px; height: auto; display: block; border-radius: 5px; margin-right: 20px; overflow: hidden;}
.menu-structure-menu-box:last-child {margin-right: 0;}
.menu-structure-menu-box__h3 {position: relative; display: flex; width: 100%; height: 44px;  background-color: rgb(45, 72, 102); align-items: center; justify-content: center; font-size: 15px; color: rgb(255, 255, 255);}

.menu-structure-menu-box--ul {position: relative; display: block; width: 100%; height: auto; /* min-height: 132px; */ padding: 6px 15px;}
.menu-structure-menu-box--ul li {position: relative; display: flex; align-items: center; justify-content: center; text-align: center; height: 40px; border-bottom: 1px solid rgb(238, 238, 238);}

.menu-structure-menu-box--ul li:last-child {border-color: #fff;}
.menu-structure-menu-box--ul li:first-child {border-color: rgb(238, 238, 238);}

/*템플릿 상세 본문(body)*/
.template-view--body {position: relative; display: block; width: 1200px; margin: 0 auto; height: auto; padding: 0px 0 0 0;}
.template-manual {position: relative; display: block; width: 100%; height: auto; padding-bottom: 79px; border-bottom: 1px solid rgb(238, 238, 238); margin-top: 80px;}
.template-manual:first-child {margin-top: 0;}
.template-manual:last-child {padding-bottom: 0; border-bottom: 0;}

.template-manual--con {display: flex; align-items: flex-start;}
.template-manual--con--left {position: relative; width: 590px;}
.template-main-img {display: block; width: 520px;}
.template-manual--con--right {position: relative; width: 610px; padding-top: 30px;}

.template-manual-text {position: relative; display: block; width: 100%; height: auto;}
.template-manual-text .tit {position: relative; display: flex; align-items: center; width: 100%; height: 22px; padding-left: 30px; padding-top: 1px; font-size: 15px; color: rgb(0, 0, 0); font-weight: 400;}
.template-manual-text .tit span {border-radius: 50%; background-color: rgb(20, 164, 255); width: 22px; height: 22px; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 1px; font-size: 11px; font-weight: 400; color: #fff;}

.template-manual-text .txt {position: relative; display: block; width: 100%; height: auto; padding-left: 30px; font-size: 15px; color: #666666; line-height: 1.4; font-weight: 400; margin-top: 4px; padding-bottom: 33px;}