/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* 서브 컨텐츠 공통영역 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* 레이아웃 공통 */
.sec-sub {position: relative; float: left; width: 100%;}
.sec-sub .inner {margin: 0 auto; width: 100%; min-width: 1200px; max-width: 1280px;}
.sec-sub .inner-product {margin: 0 auto; width: 100%; max-width: 1312px;}

/* 서브페이지 타이틀 공통 */
.titlesub-common {float: left; width: 100%; text-align: center; margin: 80px 0;}
.titlesub-common2 {margin: 40px 0;}
.titlesub-inner {position: relative; margin: 0 auto; width: 100%; min-width: 1200px; max-width: 1220px;}
.titbar-txt {display: inline-block; font-family: "Pretendard", sans-serif; transform: rotate(-0.04deg);}
.titbar-txt span {font-size: 34px; color: #111; font-weight: 700; line-height: 1; letter-spacing: -0.08px;}

/* 서브페이지 하위메뉴 공통 */
.menu-category {float: left; width: 100%; margin: 20px 0 10px;}
.menu-category ul {float: left; width: 100%;}
.menu-category ul li {display: inline-block; width: auto; margin-left: -4px; box-shadow: 4px 4px 10px 0px rgba(31,31,31,0.08);}
.menu-category ul li a {display: block; width: 100%; height: 38px; font-family: "Noto Sans KR", sans-serif; transform: rotate(-0.04deg); font-size: 15px; color: #706e6e; font-weight: 400; line-height: 37px; text-align: center; padding: 0 20px; background-color: #fff; border: 1px solid #e1e1e1; transition: all 0.3s ease;}
.menu-category ul li a:hover {color: #111; background: #f6f6f6;}                           /* 마우스롤오버시 스타일적용 */
.menu-category ul li.on a {color: #fff; background: #1362a5; border: 1px solid #1362a5;}   /* 메뉴선택시 스타일적용 */

/* 서브페이지 컨텐츠 영역 */
.subpage-contents {float: left; width: 100%;}
.subpage-contents .pageprepare {float: left; width: 100%; text-align: center;}
.subpage-contents .pageprepare img {max-width: 100%;}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* section별 컨텐츠영역 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* 서브페이지 상단 비주얼이미지 */
.sub-visual {position: relative; display: block; width: 100%; height: 0; padding-bottom: 21.35416667%;  background: url("../images/sub_visual01_240725.jpg") no-repeat; background-position: center top; background-size: cover;}
.visual-area {float: left; width: 100%;}

/* 상품 전체수 및 타입선택 필터 영역 */
.number-filter {float: left; width: 100%; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #f2f1f1;}
.number-filter2 {margin-top: 40px;}
.number-filter .left-number {float: left; width: 80%; transform: rotate(-0.04deg); margin-top: 4px;}
.number-filter .left-number span {font-size: 16px; color: #5d5d5d; font-weight: 400; letter-spacing: -0.6px;}
.number-filter .left-number span strong {color: #ef4128; font-weight: 700;}
.number-filter .right-filter {float: right;}
.number-filter .right-filter select {transform: rotate(-0.04deg); -webkit-appearance: none; -moz-appearance: none; appearance: none;} /* 셀렉트박스 화살표 없애기 */
.number-filter .right-filter select.select-type {height: 32px; font-family: "Noto Sans KR", sans-serif; font-size: 16px; color: #5d5d5d; line-height: 32px; padding-left: 10px; padding-right: 45px; border: none; background: url("../product/images/ico-select-arrow.png") no-repeat right 50%; vertical-align: middle;}

/* 상품 리스트 판매순 최신순 카테고리 영역 */
#sct_sort {float: left; margin: 0 0 30px; width: 100%; zoom: 1;}
#sct_sort h2 {position: absolute; font-size: 0; line-height: 0; overflow: hidden;}
#sct_sort ul {float: right; margin: 0; padding: 0 0 0 1px; list-style: none; zoom: 1;}
#sct_sort li {float: left; position: relative; margin-left: -1px;}
#sct_sort li a {font-family: "Noto Sans KR", sans-serif; font-size: 14px; color: #757575; font-weight: 300; padding: 5px 9px; border: 1px solid #dfdddd; background: #fff;}

/* 상품 리스트 공통 영역 */
.product-list {float: left; width: 100%;}
.product-list ul {display: flex; flex-wrap: wrap;}
.product-list ul li {width: 25%; padding: 16px; margin-bottom: 10px;}
.product-list ul li a {position: relative; display: block; width: 100%; height: 100%;}
.product-list ul li a .product-thumb {position: relative; display: block; width: 100%;}
.product-list ul li a .product-thumb figure {position: relative; width: 100%; height: 100%; margin: 0; padding: 0; border: 1px solid #f2f1f1; overflow: hidden;}
.product-list ul li a .product-thumb figure .prothumbimg {position: relative; width: 100%; height: 0; padding-bottom: 100%;} /* 썸네일이미지비율 높이값설정 */
.product-list ul li a .product-thumb figure .prothumbimg img {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /*이미지 스케일링 크기변경시 최적화 */}
.product-list ul li a .product-thumb figure .prothumbimg:after {position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0); z-index: 0; transition: all 0.6s ease; overflow: hidden;}
.product-list ul li a .product-info {display: block; width: 100%; margin-top: 20px;}
.product-list ul li a .product-info .model-name {display: inline-block; width: 100%; transform: rotate(-0.04deg); font-size: 22px; color: #111; font-weight: 700; line-height: 1.1; letter-spacing: -0.8px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 10px;}
.product-list ul li a .product-info p.model-stxt {transform: rotate(-0.04deg); font-size: 17px; color: #464646; font-weight: 400; line-height: 1.1; letter-spacing: -0.8px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.product-list ul li a .product-info .model-price {display: inline-block; width: 100%; transform: rotate(-0.04deg); font-size: 18px; color: #fba011; font-weight: 500; line-height: 1.1; letter-spacing: -0.8px; margin-top: 10px;}
.product-list ul li a .product-info .model-price span.won {font-size: 16px;}
.product-list ul li a .product-info .model-price span.discount {font-size: 15px; color: #b1b0b0; font-weight: 400; line-height: 1; text-decoration: line-through; margin-left: 5px; vertical-align: -0.1px;}

/* badge 스타일 적용 */
.product-list ul li a .badge {position: absolute; top: 0; left: 0; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 13px; color: #fff; font-weight: 700; line-height: 1.1; z-index: 10;}
.product-list ul li a .box-best {background-color: #0072bc;}
.product-list ul li a .box-hot {background-color: #ed070f;}


/* 상품 리스트 공통 영역 마우스 롤오버시 스타일 적용 */
.product-list ul li a:hover figure .prothumbimg img, .product-list ul li a:focus figure .prothumbimg img {-webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15);}
.product-list ul li a:hover .product-thumb figure .prothumbimg:after {background: rgba(0,0,0,0.05);}
.product-list ul li a:hover .product-info .model-name {color: #fba011; /*text-decoration: underline;*/}

/* 상품 리스트 영역 - 더미페이지 스타일 */
.paging-number {float: left; width: 100%; margin-top: 40px;}
#paging-all {float: left; width: 100%; text-align: center; font-size: 0; color: #fff;}
#paging-all a {display: inline-block; width: 36px; height: 36px; transform: rotate(-0.04deg); font-size: 13px; color: #111; font-weight: 400; line-height: 36px; margin:0 1px; background-color: #fff; border: 1px solid #d7d5d5; vertical-align: top; transition: all 0.5s ease;}
#paging-all .current {display: inline-block; width: 36px; height: 36px; transform: rotate(-0.04deg); font-size: 13px; color: #fff; font-weight: 500; line-height: 36px; margin:0 1px; background-color: #2f6aa6; border: 1px solid #2f6aa6; vertical-align: top;}
#paging-all a:hover {color: #000; font-weight: 500; border: 1px solid #000;}
#paging-all a.prev {width: 44px; text-indent: -9999px; background: #fff url("../product/images/paging_arrow_prev.png") no-repeat center center;}
#paging-all a.next {width: 44px; text-indent: -9999px; background: #fff url("../product/images/paging_arrow_next.png") no-repeat center center;}

/* 회사소개 - 인사말 */
.greeing-box {float: left; width: 100%;}
.greeing-box .left-img {float: left; width: 34.375%;}
.greeing-box .left-img .greeing-img {position: relative; width: 100%;}
.greeing-box .left-img .greeing-img:after {position: absolute; bottom: -69px; right: -69px; display: block; content: ""; width: 138px; height: 138px; border: 16px solid #efeeee; z-index: 1;}
.greeing-box .left-img .greeing-img img {position: relative; width: 100%; z-index: 2;}

.greeing-box .right-contents {float: left; width: 65.625%; padding-left: 8.59375%;}
.greeing-box .right-contents .greeing-tit {font-family: "s-core-dream-medium", sans-serif; transform: rotate(-0.04deg); font-size: 35px; color: #111; line-height: 1.35; letter-spacing: -0.8px; margin-bottom: 30px;}
.greeing-box .right-contents .greeing-tit strong {font-family: "s-core-dream-heavy", sans-serif;}
.greeing-box .right-contents .greeing-stxt {font-family: "Noto Sans KR", sans-serif; transform: rotate(-0.04deg); font-size: 19px; color: #555454; font-weight: 400; line-height: 1.45; letter-spacing: -0.6px; word-break: keep-all;}
.greeing-box .right-contents .sign {text-align: right; transform: rotate(-0.04deg); font-size: 22px; color: #0a0a0a; font-weight: 500; line-height: 1.1; margin-top: 40px;}

/* 회사소개 - 비전 */
.vision-box {float: left; width: 100%;}
.vision-box .diagram {float: left; width: 100%;}
.vision-box .diagram img {width: 100%;}

/* 회사소개 - 경영이념 */
.ideology-box {float: left; width: 100%;}
.ideology-title {position: relative; float: left; width: 100%;}
.ideology-title:before {position: absolute; content: ""; top: 0; left: 62px; width: 1px; height: 122px; background: #4394d8;}
.ideology-title ul {float: left; width: 50%; height: 370px; padding: 140px 0 0 62px; background-color: #1362a5;}
.ideology-title ul li.engtxt {font-family: "Gmarket Sans", sans-serif; transform: rotate(-0.04deg); font-size: 22px; color: #8ec9fa; font-weight: 300; line-height: 1.1; margin-bottom: 10px;}
.ideology-title ul li.kortxt {font-family: "s-core-dream-bold", sans-serif; transform: rotate(-0.04deg); font-size: 37px; color: #fff; line-height: 1.25; letter-spacing: -0.8px;}
.ideology-title ul li.kortxt span {font-family: "s-core-dream-light", sans-serif;}

.ideology-title .rightimg {float: left; width: 50%;}
.ideology-title .rightimg img {width: 100%;}

.ideology-area {float: left; width: 100%; height: 674px; background: url("../about/images/ideology_bgimg.jpg") no-repeat;}
.ideology-area .txtbox {float: left; width: 100%; text-align: center; padding-top: 120px;}
.ideology-area .txtbox .point-txt {font-family: "s-core-dream-bold", sans-serif; transform: rotate(-0.04deg); font-size: 40px; color: #fff; line-height: 1.35; letter-spacing: -0.4px;}
.ideology-area .txtbox .point-txt span {font-family: "s-core-dream-medium", sans-serif; font-size: 30px;}
.ideology-area .txtbox .txt-bullet {display: inline-block; width: 1px; height: 60px; margin: 20px 0; background-color: #fff;}
.ideology-area .txtbox p {font-family: "s-core-dream-light", sans-serif; transform: rotate(-0.04deg); font-size: 24px; color: #fff; line-height: 1.45; letter-spacing: -0.4px;}

/* 회사소개 - 연혁 */
.history-box {float: left; width: 100%;}
.history-box .left-img {float: left; width: 40.625%;}
.history-box .left-img div.box {position: relative; float: left; width: 100%;}
.history-box .left-img div.box2 {margin-bottom: 100px;}
.history-box .left-img div.box:after {position: absolute; bottom: 0; right: -40px; display: block; content: ""; width: 225px; height: 225px; background-color: #eeeeee; z-index: 1;}
.history-box .left-img div.box img {position: relative; width: 100%; z-index: 2;}
.history-box .left-img div.box span {display: block; width: 100%; height: 40px; transform: rotate(-0.04deg); font-size: 17px; color: #868484; font-weight: 300; line-height: 40px;}
.history-box .left-img div.box span:after {display: inline-block; content: ""; width: 100px; height: 1px; margin-left: 15px; background-color: #e2e6ec; vertical-align: 5px;}

.history-box ul.list-item {position: relative; float: right; width: 50.3125%;}
.history-box ul.list-item:before {display: block; content: ""; position: absolute; top: 0; left: 6px; width: 4px; height: 97%; background: #ededed;}
.history-box ul.list-item li {position: relative; padding-bottom: 30px; background: none; overflow: hidden;}
.history-box ul.list-item li:last-child {padding-bottom: 0;}
.history-box ul.list-item li span.year {display: inline-block; font-family: "s-core-dream-bold", sans-serif; transform: rotate(-0.04deg); font-size: 30px; color: #3c66bb; line-height: 1; letter-spacing: -0.4px;}
.history-box ul.list-item li span.year:before {display: inline-block; content: ""; margin-right: 20px; width: 16px; height: 16px; background-color: #1362a5; border-radius: 50%; border: 4px solid #fff; vertical-align: 3px;}
.history-box ul.list-item li span.infotxt {display: inline-block; width: 100%; font-size: 18px; color: #252525; font-weight: 400; line-height: 30px; margin-top: 10px; padding-left: 38px;}
.history-box ul.list-item li span.infotxt ul li {font-family: "Noto Sans KR", sans-serif; transform: rotate(-0.04deg); word-break: keep-all; line-height: 1.1; letter-spacing: -0.6px; padding-bottom: 10px;}
.history-box ul.list-item li span.infotxt ul li span {float: left; width: 15px;}
.history-box ul.list-item li span.infotxt ul li p {float: left; width: 90%;}

/* 회사소개 - 조직도 */
.organization-box {float: left; width: 100%;}
.organization-box .diagram {float: left; width: 100%;}
.organization-box .diagram img {width: 100%;}

/* 회사소개 - 브랜드 */
.brand-box {float: left; width: 100%;}
.brand-box .brand-type {float: left; width: 100%;}
.brand-box .brand-type-last {padding-top: 80px; margin-top: 80px; border-top: 1px solid #e2e0e0;}
.brand-box .brand-type .tittle {float: left; width: 100%; height: 50px; font-size: 30px; color: #2a2a2a; font-weight: 500; line-height: 1;}

.brand-box .brand-type .logo-type {float: left; width: 100%;}
.brand-box .brand-type .logo-type .logo-img {float: left; width: 44.53125%;}
.brand-box .brand-type .logo-type .logo-img img {width: 100%;}
.brand-box .brand-type .logo-type .logo-infoarea {float: left; width: 55.46875%; padding-left: 5.46875%;}
.brand-box .brand-type .logo-type .logo-infoarea h3 {font-family: "s-core-dream-bold", sans-serif; transform: rotate(-0.04deg); font-size: 42px; color: #000; line-height: 1; letter-spacing: -0.4px;}
.brand-box .brand-type .logo-type .logo-infoarea span.logo-stxt {display: inline-block; width: 100%; margin: 30px 0 20px; font-family: "s-core-dream-medium", sans-serif; transform: rotate(-0.04deg); font-size: 20px; color: #000; line-height: 1; letter-spacing: -0.4px;}
.brand-box .brand-type .logo-type .logo-infoarea p {font-family: "Noto Sans KR", sans-serif; transform: rotate(-0.04deg); font-size: 18px; color: #4a4949; font-weight: 400; line-height: 1.4; letter-spacing: -0.4px;}

.brand-box .brand-type .logo-type .logo-infoarea .logo-color {float: left; width: 100%; margin-top: 35px;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li {float: left; width: 50%;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li .colorbg {float: left; width: 73px; height: 70px; background-color: #2064a3;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li .colorbg2 {background-color: #f6a01a;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li .colorbg3 {background-color: #276fb9;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li .colorbg4 {background-color: #8fa9d9;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li .colorcord {float: left; display: table; height: 70px;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li .colorcord div.colorbox {display: table-cell; vertical-align: middle;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li .colorcord div.colorbox .cordvalue {transform: rotate(-0.04deg); font-size: 17px; color: #686766; font-weight: 400; line-height: 1.1; letter-spacing: -0.4px; padding-left: 18px; margin: 5px 0;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li .colorcord div.colorbox .cordvalue span:after {display: inline-block; content: ""; width: 1px; height: 15px; margin: 0 8px; background-color: #d6d6d6; vertical-align: -1px;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li .colorcord div.colorbox .cordvalue span:last-child:after {display: none;}
.brand-box .brand-type .logo-type .logo-infoarea .logo-color ul li .colorcord div.colorbox .cordvalue span strong {color: #000;}

/* 회사소개 - 오시는길 */
.location-box {float: left; width: 100%;}
.location-box .location-info {float: left; width: 100%; padding: 30px 0; border-top: 1px solid #ececec;}
.location-box .location-info ul li {float: left; height: 54px; margin-right: 60px;}
.location-box .location-info ul li .mapico {float: left; width: 54px; height: 54px; margin-right: 15px;}
.location-box .location-info ul li .mapico img {vertical-align: top;}
.location-box .location-info ul li .mapinfotxt {display: table; height: 54px;}
.location-box .location-info ul li .mapinfotxt .box {display: table-cell; vertical-align: middle;}
.location-box .location-info ul li .mapinfotxt .box span {font-size: 18px; color: #161616; font-weight: 700; line-height: 1.1;}
.location-box .location-info ul li .mapinfotxt .box p {font-size: 18px; color: #676464; font-weight: 400; line-height: 1.1; letter-spacing: -0.4px; margin-top: 5px;}
.location-box .map-canvas {float: left; width: 100%; height: 700px; border: 1px solid #ececec; overflow: hidden;}

.location-box .traffic-guide {float: left; width: 100%; margin-top: 40px;}
.location-box .traffic-guide ul {float: left; width: auto; display: table; height: 78px;}
.location-box .traffic-guide ul:first-child {margin-right: 150px;}
.location-box .traffic-guide ul li {display: table-cell; vertical-align: middle; height: 100%;}
.location-box .traffic-guide ul li.traffic-ico {display: inline-block; margin-right: 20px;}
.location-box .traffic-guide ul li.traffic-list .list {transform: rotate(-0.03deg);}
.location-box .traffic-guide ul li.traffic-list .list span {display: inline-block; width: 100%; font-family: "s-core-dream-bold", sans-serif; font-size: 20px; color: #1362a5; line-height: 1.4; margin-bottom: 5px;}
.location-box .traffic-guide ul li.traffic-list .list p {display: block; font-size: 16px; color: #2a2a2a; font-weight: 400; line-height: 1.4; padding-left: 3px;}
.location-box .traffic-guide ul li.traffic-list .list p:before {content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background-color: #1362a5; vertical-align: 3px;}

.location-box .traffic-guide ul.car-guide {float: left; width: 100%; margin-top: 30px;}
.location-box .traffic-guide ul.car-guide li.traffic-ico {float: left; width: 78px;}
.location-box .traffic-guide ul.car-guide li {display: inline-block; width: 92%;}
.location-box .traffic-guide ul.car-guide li.traffic-list .list .cartxt {display: inline-block; font-size: 16px; color: #2a2a2a; font-weight: 400; line-height: 1.4; letter-spacing: -0.8px; padding-left: 3px;}
.location-box .traffic-guide ul.car-guide li.traffic-list .list .cartxt:before {content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background-color: #1362a5; vertical-align: 3px;}
.location-box .traffic-guide ul.car-guide li.traffic-list .list .cartxt .arrow {display: inline-block; width: auto; margin: 0 10px; font-family: "Gmarket Sans", sans-serif; font-size: 16px; color: #2a2a2a; font-weight: 300;}
.location-box .traffic-guide ul.car-guide li.traffic-list .list .cartxt strong {padding-left: 15px;}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* 전자카드제 페이지 추가 250820 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.cardsystem-wrap {width: 100%;}

/* 전자카드제 - 건설근로자 전자카드제란? 배너 영역 */
.sub-cardsystem {width: 100%; padding: 140px 0; background-image: url("../img/electroniccard_img.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 18px;}
.cardsystem-box {width: 100%;}
.cardsystem-box .content-title {width: 100%; text-align: center;}
.cardsystem-box .content-title h3 {transform: rotate(-0.03deg); font-family: "Noto Sans KR", sans-serif; transform: rotate(-0.03deg); font-size: 48px; color: #fff; font-weight: 800; line-height: 1; letter-spacing: -0.8px; margin-bottom: 35px;}
.cardsystem-box .content-title p {transform: rotate(-0.03deg); font-size: 18px; color: #fff; font-weight: 400; line-height: 1.45; letter-spacing: -0.8px;}

/* 전자카드제 - 키포인트 영역 */
.sub-keypoint {width: 100%; margin-top: 80px;}
.sub-keypoint .keypoint-workplace {display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 20px;}
.sub-keypoint .keypoint-workplace .tablebox {width: 59.027778%; border: 2px solid #2764a3; border-radius: 17px; overflow: hidden;}
.sub-keypoint .keypoint-workplace .tablebox .table-layout {width: 100%; background: #317ecc;}
.sub-keypoint .keypoint-workplace .tablebox .table-layout th {height: 96px; font-size: 20px; color: #fff; font-weight: 700; line-height: 1; background: #317ecc;}
.sub-keypoint .keypoint-workplace .tablebox .table-layout th.gubun {background: #2764a3;}
.sub-keypoint .keypoint-workplace .tablebox .table-layout td {height: 97px; text-align: center; font-size: 18px; color: #4b4e53; font-weight: 600; line-height: 1; background: #fff; border: 1px solid #d9dde7; border-top: 0;}
.sub-keypoint .keypoint-workplace .tablebox .table-layout td.tit {background: #e8eefc;}
.sub-keypoint .keypoint-workplace .tablebox .table-layout td.last {line-height: 1.3; border: 0;}

.sub-keypoint .keypoint-workplace .keypoint-title {padding-top: 10px; padding-left: 5.5556%;}
.keypoint-title .point-tit {display: flex; align-items: center; flex-wrap: wrap; transform: rotate(-0.03deg); font-size: 30px; color: #111; font-weight: 600; line-height: 1;}
.keypoint-title .point-tit span {position: relative; color: #317ecc; font-weight: 800;}
.keypoint-title .point-tit span:before {position: absolute; top: -13px; left: 50%; transform: translateX(-50%); content: ""; width: 8px; height: 8px; background-color: #317ecc; border-radius: 58px;}
.keypoint-title .point-tit .number {display: inline-flex; justify-content: center; align-items: center; width: 52px; height: 52px; font-size: 26px; color: #fff; font-weight: 700; margin-left: 18px; background-color: #317ecc; border-radius: 58px;}
.keypoint-title p {transform: rotate(-0.03deg); font-size: 35px; color: #111; font-weight: 700; line-height: 1; margin-top: 15px;}
.keypoint-title p strong {color: #f7a01b; font-weight: 900;}
.keypoint-title div.ico {width: 100%; margin-top: 38px;}
.keypoint-title div.ico i {display: inline-block; width: auto;}
.keypoint-title div.ico i img {width: 100%;}

/* 전자카드제 - 사용안내 및 메뉴얼 영역 */
.guidemanual-list {width: 100%; margin-top: 80px;}
.guidemanual-list ul {display: flex; justify-content: space-between; flex-wrap: wrap;}
.guidemanual-list ul li {width: 24.16667%;}
.guidemanual-list ul li a {display: block; width: 100%; height: 100%;}
.guidemanual-list ul li a .item-box {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 40px; background-color: #fff; border: 1px solid #eae7e7; border-radius: 1.7rem; box-shadow: 5px 5px 16px rgba(0,0,0,0.05); overflow: hidden; transition: all 0.3s ease-in-out;}
.guidemanual-list ul li a .item-box .ico {display: block; width: auto; margin-bottom: 2.8rem;}
.guidemanual-list ul li a .item-box .ico img {width: 100%;}
.guidemanual-list ul li a .item-box .ico img.ico-off {transition: all 0.3s ease-in-out;}
.guidemanual-list ul li a .item-box .ico img.ico-on {display: none; transition: all 0.3s ease-in-out;}
.guidemanual-list ul li a .item-box p {display: block; width: 100%; text-align: center; font-size: 20px; color: #252525; font-weight: 500; line-height: 1.3; letter-spacing: -0.8px;}
.guidemanual-list ul li a .item-box p span {display: block;}

/* 전자카드제 - 사용안내 및 메뉴얼 영역 - 마우스 롤오버 효과 영역 */
.guidemanual-list ul li a:hover .item-box {background-color: #317ecc; border: 1px solid #317ecc;}
.guidemanual-list ul li a:hover .item-box .ico img.ico-off {display: none;}
.guidemanual-list ul li a:hover .item-box .ico img.ico-on {display: block;}
.guidemanual-list ul li a:hover .item-box p {color: #fff;}


/* 이벤트 메뉴 카테고리 리스트 */
.eventmenu-wrap {margin: 80px auto; width: 100%; max-width: 128rem;}
.eventmenu-list {display: flex; width: 100%;}
.eventmenu-list ul {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%;}
.eventmenu-list ul li {display: inline-flex;}
.eventmenu-list ul li a {font-family: "Noto Sans KR", sans-serif !important; font-size: 20px; color: #363636; font-weight: 500 !important; letter-spacing: -0.8px;}
.eventmenu-list ul li.line {display: inline-flex; margin: 0 30px; font-size: 20px; color: #989999; font-weight: 300 !important;}
.eventmenu-list ul li a:hover {color: #0e7de4;}
.eventmenu-list ul li.on a {color: #2986dc;}


/* 이용약관 및 개인정보처리방침 스타일 적용 */
.ctt_provision {float: left; width: 100% !important; font-family: "Noto Sans KR", sans-serif !important; transform: rotate(-0.02deg); color: #9e9e9e !important; font-weight: 300 !important; letter-spacing: -0.8px; margin-top: 5px; padding: 9px 10px; border: 1px solid #dbdbdb; border-top: 1px solid #444; background-color: #f3f3f3;}
.ctt_provision #ctt_con {padding-top: 18px; padding-right: 18px; padding-bottom: 30px; padding-left: 18px; border: 1px solid #dbdbdb; background-color: #fff; line-height: 24px; color: #666;}
.ctt_provision #ctt_con p {font-size: 15px !important;}
.ctt_provision #ctt_con p strong span {font-size: 17px !important;}

.ctt_privacy {float: left; width: 100% !important; font-family: "Noto Sans KR", sans-serif !important; transform: rotate(-0.02deg); color: #9e9e9e !important; font-weight: 300 !important; letter-spacing: -0.8px; margin-top: 5px; padding: 9px 10px; border: 1px solid #dbdbdb; border-top: 1px solid #444; background-color: #f3f3f3;}
.ctt_privacy #ctt_con {padding-top: 18px; padding-right: 18px; padding-bottom: 30px; padding-left: 18px; border: 1px solid #dbdbdb; background-color: #fff; line-height: 24px; color: #666;}
.ctt_privacy #ctt_con p {font-size: 15px !important;}
.ctt_privacy #ctt_con p strong span {font-size: 17px !important;}

#ctt_con img {width: 100% !important;}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** jny pc 1024,1199 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1024px) and (max-width:1199px) {

.titlesub-inner {min-width: 1024px;}
.sec-sub .inner {min-width: 1024px;}

.location-box .traffic-guide ul.car-guide li.traffic-list .list .cartxt br {display: none;}
.location-box .traffic-guide ul.car-guide li.traffic-list .list .cartxt strong {padding-left: 0;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** jny pc 1200,1279 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1200px) and (max-width:1280px) {

}