@charset "utf-8";

/* 공통 */
.sub-visual {width: 100%; height: 50rem; background: url('/static/img/sub/sub_visual_bg.jpg') center no-repeat; background-size: cover; color: #fff;}
.sub-visual .title {font-size: 4.7rem; line-height: 5.609rem;padding-top: 15rem; font-weight: bold ;word-break: keep-all;}
.sub-visual .text {font-size: 3.5rem; font-weight: 400;line-height: 4.77rem;margin-top: 1.5rem;margin-bottom: 5.4rem;}
.sub-visual .btn {display: inline-block; padding: 0 3rem 0 3rem; box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.04); background: #222; border: 1px solid #222; height: 5.6rem; line-height: 5.6rem;}
.sub-visual .btn span {font-size: 2.5rem; position: relative; padding-right: 1.6rem;}
.sub-visual .btn span::before,
.sub-visual .btn span::after {content:''; display: block; width: 0.2rem; height:0.5em ; position: absolute; right: 0; background:#fff; border-radius: 0.2rem; }
.sub-visual .btn span::before {transform: rotate(135deg);top: 4px;}
.sub-visual .btn span::after {transform: rotate(45deg); top: 12px;}

.sub-visual.company {height: 36.3rem; text-align: center; }

.lnb-wrap { width: 100%; height: 8rem; border-bottom: 1px solid #dadada; position: relative;}
.lnb-wrap .lnb-area {}
.lnb-wrap .lnb-area ul {display: flex; justify-content: center; align-items: center;}
.lnb-wrap .lnb-area ul li {line-height: 8rem; }
.lnb-wrap .lnb-area ul li + li {margin-left: 5.5rem;}
.lnb-wrap .lnb-area ul li a {display: block;padding: 0 3rem; font-size: 2.8rem; font-weight: 400; color: #222; position: relative; transition: all 0.2s;}
.lnb-wrap .lnb-area ul li.active a {font-weight: 700;}
.lnb-wrap .lnb-area ul li.active a::after {content:''; display: block; position: absolute; bottom: 0; left: 0; width: 100%;height: 5px; background: #000;}
.lnb-wrap .lnb-area ul li a:hover {font-weight: 700;}
.lnb-wrap .lnb-area ul li a:hover::after {content:''; display: block; position: absolute; bottom: 0; left: 0; width: 100%;height: 5px; background: #000;}

.lnb-wrap .mo-lnb-area {position: absolute; width: 100%; z-index: 99; display: none;}
.lnb-wrap .mo-lnb-area ul {overflow: hidden; /*height:0; visibility: hidden; transition: all 0.5s; */border-top: 1px solid #e9e9e9; display: none;}
.lnb-wrap .mo-lnb-area ul li {background: #fff; border-bottom: 1px solid #e9e9e9;}
.lnb-wrap .mo-lnb-area a {display: block; font-size: 1.6rem;font-weight: 400;color: #000; height: 6rem; line-height: 6rem; padding: 0 2rem; position: relative; }
.lnb-wrap .mo-lnb-area ul li.active a {font-weight: 700;}
.lnb-wrap .mo-lnb-area .mo-lnb-head {height: 6rem; border-bottom: 1px solid #e9e9e9; background: #fff;}
.lnb-wrap .mo-lnb-area .mo-lnb-head a {height: 6rem;line-height: 6rem; font-weight: 700; }
.lnb-wrap .mo-lnb-area .mo-lnb-head a::after { content: ''; display: block; position: absolute; width: 3rem; height: 1.8rem; right: 3.5rem; top: 50%; transform: translateY(-50%); background: url(/static/img/common/nav_arrw.png) center no-repeat; background-size: contain; }

.lnb-wrap .mo-lnb-area.active .mo-lnb-head {border-bottom: none;}
.lnb-wrap .mo-lnb-area.active .mo-lnb-head a::after {transform: translateY(-50%) rotate(-180deg);} 

.sub-title-wrap {}
.sub-title-wrap .title {position: relative; color: #222; font-size: 4.7rem; line-height: 5.609rem; font-weight: 700;padding-top: 3.5rem;word-break: keep-all;}
.sub-title-wrap .title::before {content:''; display: block; position: absolute; top: 0; left: 0; width: 7rem; height: 3px; background-color:#222;z-index: 1;}
.sub-title-wrap .text {margin-top: 3.5rem; font-size: 2.2rem; line-height: 3.5rem; font-weight: 400; color: #222; word-break: keep-all;}

.sub-img-wrap .text {font-size: 2.2rem;font-weight: 600;line-height: 3.5rem;text-align: center;color: #4423E0; margin-top: 2.55rem;}

/* 보드 - 일반타입 */
.board-list {border-top: 1px solid #dadada;}
.board-list li {border-bottom: 1px solid #dadada;}
.board-list-cont {display: flex;padding: 3.7rem 2rem; position: relative;transition: 0.2s; }
.board-list-cont > * {font-size: 2.2rem; font-weight: 400; line-height: 2.625rem;}
.board-list-cont .num {min-width: 8.5rem;text-align: center; color: #9C9C9C;}
.board-list-cont .cont {margin-left: 2rem; width: calc(100% - 8.5rem - 16rem); color: #222;overflow: hidden; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
.board-list-cont .date {min-width:16rem; color: #9C9C9C; margin: auto; text-align: center;}
.board-list-cont:hover {background: #f0f0f0; padding-left: 6.8rem;}
.board-list-cont:hover .cont {font-weight: 700; text-decoration: underline;}
.board-list-cont:hover::before {content:''; display: block; width: 4.8rem; height: 4.8rem; background: url('/static/img/common/noti_on.png') center no-repeat; background-size: 100%; position: absolute; left: 2rem; top: 50%; transform: translateY(-50%);}

.board-view-wrap {margin-top: 3.2rem; }
.board-view-wrap .board-view-title {padding: 2.2rem 2rem;border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; display: flex; justify-content: space-between; align-items: center;font-size: 2.2rem; line-height: 2.6rem;font-weight: 400; }
.board-view-wrap .board-view-title .title {color: #222; padding-left: 2rem;}
.board-view-wrap .board-view-title .date {color: #9c9c9c;}
.board-view-wrap .board-view-content {margin: 5rem 4rem; height: 50rem; overflow-y: auto;}
.board-view-wrap .list-btn-wrap {border-top: 1px solid #dadada;}
.board-view-wrap .list-btn-wrap .list-area {font-size: 2.2rem; font-weight: 400; line-height: 2.6rem;padding: 1.7rem 2rem;border-bottom: 1px solid #dadada;display: flex;justify-content: flex-start; align-items: center;}
.board-view-wrap .list-btn-wrap .list-area span { width: 17.5rem; text-align: center; color: #9c9c9c;}
.board-view-wrap .list-btn-wrap .list-area a { width: calc(100% - 20rem);color: #222;overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical;}

/* 보드 - 갤러리타입 */
.gall-board-list {display: flex; justify-content: flex-start; align-items: flex-start;flex-wrap: wrap;}
.gall-board-list li {width: calc(33.333% - 1.8rem);margin-right: 2.6rem; margin-top: 4rem;}
.gall-board-list li:nth-child(3n) {margin-right: 0;}
.gall-board-list li:nth-child(-n+3) {margin-top: 0;}
.gall-list-cont {display: block;}

.gall-list-cont .img-wrap {position: relative;height: 16rem;}
.gall-list-cont .img-wrap .img-box {  position: absolute; width: 100%; height: 100%;}
.gall-list-cont .img-wrap .img-box img { position: absolute; top: 0;width: 100%;height: 100%; -o-object-fit: cover;object-fit: cover;}
.gall-list-cont .cont-wrap {margin-top: 1.5rem;}
.gall-list-cont .cont-wrap .text {font-size: 2.2rem; line-height: 2.6rem; font-weight: 400;overflow: hidden; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
.gall-list-cont .cont-wrap .date {margin-top: 1.5rem;font-size: 1.5rem; line-height: 1.8rem; text-align: right; color: #9c9c9c;font-weight: 400;} 


/* 페이지네이션 */
.pagination {margin-top: 9rem;}
.pagination_wrap {width: 40rem;height: 2.6rem; margin: 0 auto; display: flex; justify-content: center; align-items: center; text-align: center;} 
.pagination_wrap .page-wrap {display: flex; align-items: center;}
.pagination_wrap .page-wrap button {width: 2.4rem;height: 2.4rem;}
.pagination_wrap .page-wrap button.next {background: url('/static/img/common/btn_pgn1.png') center no-repeat;background-size: 100%;}
.pagination_wrap .page-wrap button.next-last {background: url('/static/img/common/btn_pgn2.png') center no-repeat;background-size: 100%;}
.pagination_wrap .page-wrap button.prev {background: url('/static/img/common/btn_pgn1.png') center no-repeat;background-size: 100%; transform: rotate(180deg);}
.pagination_wrap .page-wrap button.prev-first {background: url('/static/img/common/btn_pgn2.png') center no-repeat;background-size: 100%;transform: rotate(180deg);}
.pagination_wrap .page-wrap button:disabled {opacity: 0.4;}

.pagination_wrap .page-num {display: flex;align-items: center; min-width: 20.6rem; justify-content: center;}
.pagination_wrap .page-num a {display: block; color: #9c9c9c; position: relative;}
.pagination_wrap .page-num a + a {margin-left: 2rem;}
.pagination_wrap .page-num a.on { font-weight: 700; color: #222;}
.pagination_wrap .page-num a.on::after {content: ''; display: block; width: 100%;height: 2px; background: #222; position: absolute; left: 0; bottom: -2px;}


.sub-cont-wrap.sshot .title::before{background: #FE6A01;}
.sub-cont-wrap.twinkorea .title::before{background: #4423E0;}
.sub-cont-wrap.history {padding:9rem 0 6.7rem;}
.sub-cont-wrap.notice {padding:9rem 0 7.2rem;}
.sub-cont-wrap.notice-view {padding:9rem 0 9.2rem;}
.sub-cont-wrap.news {padding:9rem 0 5.6rem;}
.sub-cont-wrap.recruit{padding:9rem 0 18.4rem;}
.sub-cont-wrap.contact {padding:9rem 0 9rem;}


/* 한국전자식권 */
.sub-cont-wrap.sshot .sub-sec1 {padding: 7.6rem 0 9.7rem;}
.sub-cont-wrap.sshot .sub-sec2 {padding: 5rem 0 5.6rem;}
.sub-cont-wrap.sshot .sub-sec3 {padding: 6.5rem 0 8.2rem;}
.sub-cont-wrap.sshot .sub-sec4 {padding: 7.5rem 0 8.6rem;}
.sub-cont-wrap.sshot .sub-sec5 {padding: 5.6rem 0 8rem;}
.sub-cont-wrap.sshot .sub-sec1 .sshot-intro {margin-bottom: 10rem;}
.sub-cont-wrap.sshot .sub-sec1 .sshot-intro-list {display: flex; align-items: center; justify-content: space-between;}
.sub-cont-wrap.sshot .sub-sec1 .sshot-intro-cont {width: 20rem; height: 20rem; border-radius: 50%; border: 1px solid #FE6A01; box-shadow: 0px 4.32px 64.87px 0px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column;} 
.sub-cont-wrap.sshot .sub-sec1 .sshot-intro-cont .ico-box {width: 5.4rem; height: 5.5rem;}
.sub-cont-wrap.sshot .sub-sec1 .sshot-intro-cont .text-box {margin-top: 1.2rem; color: #222;}
.sub-cont-wrap.sshot .sub-sec1 .sshot-intro-cont .text-box .stxt {font-size: 1.5rem;font-weight: 400; line-height: 1.79rem;}
.sub-cont-wrap.sshot .sub-sec1 .sshot-intro-cont .text-box .title { font-size: 3rem;font-weight: 700;line-height: 3.58rem;}
.sub-cont-wrap.sshot .sub-sec1 .customer {width: 64rem;height: 12rem;}
.sub-cont-wrap.sshot .sub-sec1 .customer ul {display: flex;height: 100%; padding: 2rem; align-items: stretch;}
.sub-cont-wrap.sshot .sub-sec1 .customer ul li {width: 50%;display: flex; justify-content: center; align-items: center; flex-direction: column; justify-content: center;}
.sub-cont-wrap.sshot .sub-sec1 .customer ul li:first-child {border-right: 1px solid #FE6A01;}
.sub-cont-wrap.sshot .sub-sec1 .customer .btext {color: #222; font-size: 2.5rem;font-weight: 700; line-height: 2.983rem;}
.sub-cont-wrap.sshot .sub-sec1 .customer .text { font-size: 2.2rem;font-weight: 400;line-height: 2.625rem;margin-top: 2rem;}
.sub-cont-wrap.sshot .sub-sec2 .sub-cont-area .sub-img-wrap {width: 50%;}
.sub-cont-wrap.sshot .sub-sec2 .chk-point {text-align: left; padding: 4rem 2rem; margin-top: 3.5rem; max-width: 46rem;}
.sub-cont-wrap.sshot .sub-sec2 .chk-point ul li {padding-left: 3.5rem;position: relative;}
.sub-cont-wrap.sshot .sub-sec2 .chk-point ul li + li {margin-top: 2rem;}
.sub-cont-wrap.sshot .sub-sec2 .chk-point ul li::before {content:''; display: block; width: 2rem; height: 2rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: url('/static/img/sub/sshot_check.png') center no-repeat; background-size: 100%;}
.sub-cont-wrap.sshot .sub-sec2 .chk-point .text {margin-top: 0;}
.sub-cont-wrap.sshot .sub-sec2 .chk-point ul li.on .text {color: #FE6A01; font-weight: 600;}
.sub-cont-wrap.sshot .sub-sec3 .sub-cont-area > div {width: 50%;}
.sub-cont-wrap.sshot .sub-sec4 .sub-cont-area > div {width: 50%;}

.ss-guide-wrap {margin-top: 6.6rem;}
.ss-guide-box {display: flex; justify-content: space-between; align-items: flex-start;}
.ss-guide-box + .ss-guide-box  {margin-top: 4rem;}
.ss-guide-box .title-wrap {width:calc(100% - 92rem);}
.ss-guide-box .title-wrap .num {font-size: 7rem; font-weight: 200;color: 
  #FD7422;}
.ss-guide-box .title-wrap .btext {font-size: 2.7rem; font-weight: 700; line-height: 3.54rem; letter-spacing: -0.03em;color: #222; margin-top: 1.1rem; letter-spacing: -0.03px;}
.ss-guide-box .guide-box {width: 92rem;}
.ss-guide-box .guide-box ul {display: flex; justify-content: space-between; align-items: center; }
.ss-guide-box .guide-box .guide-cont {display: flex; justify-content: center; align-items: center; width: 22rem; height: 20rem;background:rgba(217,217,217,0.2); border-radius: 2rem;flex-direction: column; text-align: center;}
.ss-guide-box .guide-box .guide-cont .img-box {margin:0 auto;}
.ss-guide-box .guide-box .guide-cont .img-box.star3 {width: 10.672rem; height: 3.2rem;background: url('/static/img/sub/sshot_star.png') left center  no-repeat; background-size: 10.672rem auto;}
.ss-guide-box .guide-box .guide-cont .img-box.star2 {width: 6.977rem; height: 3.2rem;background: url('/static/img/sub/sshot_star.png') left center no-repeat; background-size: 10.672rem auto;}
.ss-guide-box .guide-box .guide-cont .img-box.star1 {width: 3.284rem; height: 3.2rem;background: url('/static/img/sub/sshot_star.png') left center no-repeat; background-size: 10.672rem auto;}
.ss-guide-box .guide-box .guide-cont .img-box.table {width: 4.789rem; height:  3.2rem;background: url('/static/img/sub/sshot_thetable.png') left center no-repeat; background-size: 4.789rem auto;}
.ss-guide-box .guide-box .guide-cont .title { color:#222;font-size: 2rem;font-weight: 700; line-height: 2.4rem; margin-top: 1.8rem;}
.ss-guide-box .guide-box .guide-cont .text { color:#222;font-size: 1.5rem;font-weight: 400; line-height: 1.8rem; letter-spacing: -0.03px; margin-top: 1.5rem;}
.ss-guide-box .guide-box .img-wrap {text-align: center;}
.ss-guide-box .guide-box .img-wrap img {margin: auto;}
.ss-guide-box .guide-box ul.step-list {position: relative; }
.ss-guide-box .guide-box ul.step-list::before,
.ss-guide-box .guide-box ul.step-list::after {
  content:''; display: block; background:#FE6A01;position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%); min-width: 20rem;}
.ss-guide-box .guide-box ul.step-list::before {width: 56%;height: 1px;}
.ss-guide-box .guide-box ul.step-list::after {width: 56%;height: 1px;transform:translate(-50%,-50%) rotate(90deg) ;}
.ss-guide-box .guide-box ul.step-list li {margin: 0;}
.ss-guide-box .guide-box ul.step-list .guide-cont {background: transparent; border-radius: 0; }
.ss-guide-box .guide-box ul.step-list .guide-cont .ico-box {width: 4rem;height: 4rem;}
.ss-guide-box .guide-box ul.step-list .guide-cont .title {color: #FE6A01;font-size: 1.688rem;font-weight: 700;line-height: 2.015rem;margin: 0.596rem 0;}
.ss-guide-box .guide-box ul.step-list .guide-cont .text{font-size: 1.391rem;font-weight: 400;line-height: 1.659rem; color: #222;}



/* 트윈코리아 */
.sub-cont-wrap.twinkorea .sub-cont-area {display: flex; justify-content: space-between; align-items: center;}
.sub-cont-wrap.twinkorea .sub-sec1 {padding: 9.3rem 0 10rem;}
.sub-cont-wrap.twinkorea .sub-sec1 .sub-img-wrap {width: 50rem;}
.sub-cont-wrap.twinkorea .sub-sec2 {padding: 10rem 0 12.8rem;}
.sub-cont-wrap.twinkorea .sub-sec2 .sub-img-wrap {width: 65.3rem;}
.sub-cont-wrap.twinkorea .sub-sec3 {padding: 9rem 0 6rem;}
.sub-cont-wrap.twinkorea .sub-sec3 .sub-img-wrap {width: 59rem;}
.sub-cont-wrap.twinkorea .sub-sec3 .sub-title-wrap {width: calc(100% - 59rem);}
.sub-cont-wrap.twinkorea .sub-sec3 dl {display: flex; flex-wrap: wrap;}
.sub-cont-wrap.twinkorea .sub-sec3 dt {width: 12.2rem; height: 3.5rem; background: #4423E0; color: #fff; text-align: center; margin-top: 2rem;}
.sub-cont-wrap.twinkorea .sub-sec3 dd{margin-left: 2.288rem; margin-top: 2rem;width: calc(100% - 2.288rem - 12.2rem);}


/* 연혁 */
.history-cont-wrap {width: 68.6rem; margin:2.5rem auto 0;}
.history-cont + .history-cont {margin-top: 5rem;} 
.history-cont .btitle {font-size: 6rem; line-height: 7rem ; color: #222; font-weight: 700;margin-bottom: 5.427rem;}
.history-cont .cont-area {position: relative;}
.history-cont .cont-box {display: flex;}
.history-cont .cont-box + .cont-box {margin-top: 4.3rem;}
.history-cont .cont-box .year {color: #222; font-weight: 400; font-size: 4.8rem; margin-right: 7.4rem; position: relative;width: 11.5rem; flex-shrink: 0;}
.history-cont .cont-box .year::before {content:''; display: block; position: absolute;width:1px; height: calc(100% + 4.3rem); background: #FDE7C0; top:1.5rem; right:-3.3rem;}
.history-cont .cont-box .year.last::before {height: 0;}
.history-cont .cont-box .year::after {content:''; display: block; position: absolute; right: -4rem;top: 1.5rem;width:1.5rem; height: 1.5rem; background: #fff;border: 3px solid #F7AE2D; border-radius: 50%;}
.history-cont .cont-box .list {}
.history-cont .cont-box .list li {position: relative; padding-left: 2rem; margin-top: 1rem; font-size: 2.2rem; line-height: 2.6rem; font-weight: 400;color: #222;}
.history-cont .cont-box .list li:first-child {margin-top: 0;}
.history-cont .cont-box .list li::before {content:''; display: block; position: absolute; left: 0.4rem; top: 1rem; width: 0.3rem; height: 0.3rem; background: #222; border-radius: 50%;}



/* 공지사항 */
.notice-list-wrap {margin-top: 3.2rem; }


/* 보도자료 */
.news-list-wrap {margin-top: 3.2rem; }


/* 채용 */
.recruit-cont-wrap {}
.recruit-cont-wrap .btitle {font-size: 3.2rem;font-weight: 700;line-height: 3.819rem;}
.recruit-cont-wrap .cont-area {padding: 3rem 0; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; margin-top: 2rem;}
.recruit-cont-wrap .cont-list {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; width: 83.8rem; margin: auto;}

.recruit-cont {margin-top: 3.2rem;}
.recruit-cont .cont-list {align-items: flex-start;}
.recruit-cont .cont-list li {position: relative;}
.recruit-cont .cont-list li::after { content: ''; display: block; position: absolute; right: -15%; top: 7rem; transform: translateX(50%);width: 0; height: 0;border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-left: 14px solid #222; border-right: 10px solid transparent;}
.recruit-cont .cont-list li:last-child::after {display: none;}
.recruit-cont .cont-list .cont {width: 18rem;text-align: center;}
.recruit-cont .cont-list .ico-wrap {width: 15rem; height: 15rem; border: 1px solid #dadada; box-shadow: 0px 4.32px 64.87px 0px rgba(0,0,0,0.08); border-radius: 50%; background: #Fff; margin: auto;} 
.recruit-cont .cont-list .ico-wrap .num{font-size: 1.8rem; font-weight: 400; line-height: 2rem; color: #222; padding-top: 3rem; padding-bottom: 1.6rem;}
.recruit-cont .cont-list .ico-wrap .img-box {width: 6rem;height: 6rem;margin: auto;}
.recruit-cont .cont-list .text {font-size: 2.2rem;font-weight: 400;line-height: 2.625rem; color: #222; margin-top: 2.8rem;}

.benefit-cont {margin-top: 8.8rem;}
.benefit-cont .cont-list li {margin-right: 3.8rem;margin-top: 2.5rem;}
.benefit-cont .cont-list li:nth-child(4n) {margin-right: 0;}
.benefit-cont .cont-list li:nth-child(-n+5) {margin-top: 0;}
.benefit-cont .cont-list li:nth-child(n+13):nth-child(-n+16) {margin-top: 5rem;}
.benefit-cont .cont-list .cont {width: 18rem;}
.benefit-cont .cont-list .cont .ico-wrap {}
.benefit-cont .cont-list .cont .img-box {width: 11rem; height: 11rem; margin:0 auto 1.8rem;}
.benefit-cont .cont-list .cont .text {font-size: 2.2rem ;font-weight: 400; line-height: 2.6rem; text-align: center; color: #222; min-height: 5.6rem;display: flex; justify-content: center; align-items: center;}

.apply-cont  {margin-top: 8.8rem;}
.apply-content {text-align: center;}
.apply-content .btext {color: #222;font-size: 2.5rem;font-weight: 700; line-height: 3rem;}
.apply-content .text {color: #222; font-size: 2.2rem;font-weight: 400;line-height: 2.625rem; margin-top: 2rem;}

/* CONTACT US */
.contact-cont-wrap {margin-top: 3.2rem;}
.map-area {width: 100%; height: 50rem; background: #dadada;}
.contact-list {margin-top: 5rem;}
.contact-list dl {display: flex; font-size: 2.4rem; color: #222; font-weight: 400;}
.contact-list dl + dl { margin-top: 3rem ;}
.contact-list dl dt {width: 10.2rem; min-height: 2.8rem; margin-right: 2rem; line-height: 2.8rem;}
.contact-list dl dt img {width: auto; height: 2.8rem; margin-right: 0.8rem;}
.contact-list dl dd {width: calc(100% - 12.2rem );line-height: 2.8rem}


@media (max-width: 1180px){
  .ss-guide-box {display: block;}
  .ss-guide-box .title-wrap {width: 100%;}
  .ss-guide-box .guide-box {margin-top: 4rem;}
}
@media (max-width: 1080px){
  .sub-cont-wrap.sshot .sub-sec1 .sshot-intro-list {justify-content: center; flex-wrap: wrap;}
  .sub-cont-wrap.sshot .sub-sec1 .sshot-intro-list li {width: 33.333%;}
  .sub-cont-wrap.sshot .sub-sec1 .sshot-intro-cont {margin: auto; margin-bottom: 4rem;}
  .lnb-wrap .lnb-area ul li + li {margin-left: 2rem;}
  .sub-cont-wrap.twinkorea .sub-sec1 .sub-img-wrap {width: 43%;}
  .sub-cont-wrap.twinkorea .sub-sec2 .sub-img-wrap {width: 43%;}
  .sub-cont-wrap.twinkorea .sub-sec3 .sub-img-wrap {width: 43%;}
  .sub-cont-wrap.twinkorea .sub-sec1 .sub-title-wrap {width:55%;}
  .sub-cont-wrap.twinkorea .sub-sec2 .sub-title-wrap {width:55%;}
  .sub-cont-wrap.twinkorea .sub-sec3 .sub-title-wrap {width:55%;}
}

@media (max-width: 980px){
  .sub-visual {text-align: center;height: 40rem;}
  .sub-visual .title {font-size: 2.8rem;line-height: 3.341rem; }
  .sub-visual .text { font-size: 2rem;line-height: 2.387rem; margin-bottom: 2.4rem;}
  .sub-visual .btn {width: 22rem; height: 4rem; line-height: 4rem; padding:0 2rem;}
  .sub-visual .btn span { font-size: 1.8rem;}
  .sub-visual .btn span::before {top: 3px;}
  .sub-visual .btn span::after {top: 9px;}
  .sub-visual.twinkorea .btn {width: 22rem;}
  .lnb-wrap {height: auto;}
  .lnb-wrap .lnb-area {display: none;}
  .lnb-wrap .mo-lnb-area {display: block;}

  .sub-cont-wrap .sub-title-wrap {text-align: center; margin-bottom: 5rem;}
  .sub-cont-wrap .sub-title-wrap .title {text-align: center;}
  .sub-cont-wrap .sub-title-wrap .title::before {right: 0; margin: auto;}

  .sub-cont-wrap.sshot .sub-sec1 {padding: 6rem 0 3.2rem;}
  .sub-cont-wrap.sshot .sub-sec2 {padding: 5rem 0 5.6rem;}
  .sub-cont-wrap.sshot .sub-sec3 {padding: 5rem 0 2.2rem;}
  .sub-cont-wrap.sshot .sub-sec4 {padding: 5rem 0 7rem;}
  .sub-cont-wrap.sshot .sub-sec5 {padding: 5rem 0 12rem;}
  .sub-cont-wrap.sshot .sub-sec1 .sshot-intro {text-align: center; margin-bottom: 0;}
  .sub-cont-wrap.sshot .sub-sec1 .customer {width: 100%;}
  .sub-cont-wrap.sshot .sub-sec1 .customer .btext {font-size: 2.2rem;}
  .sub-cont-wrap.sshot .sub-sec1 .customer .text {font-size: 1.4rem; margin-top: 1.5rem;}
  .sub-cont-wrap.sshot .sub-sec2 .sub-cont-area .sub-title-wrap {width:100%; margin-bottom: 0;}
  .sub-cont-wrap.sshot .sub-sec2 .sub-cont-area .sub-img-wrap {display: none;}
  .sub-cont-wrap.sshot .sub-sec2 .chk-point {width: 100%; max-width: 100%;}
  .sub-cont-wrap.sshot .sub-sec2 .chk-point ul li + li {margin-top: 2.6rem;}
  .sub-cont-wrap.sshot .sub-sec3 .sub-cont-area > div {width:100%; text-align: center;}
  .sub-cont-wrap.sshot .sub-sec4 .sub-cont-area > div {width:100%; text-align: center;}
  .ss-guide-box .title-wrap {text-align: center;}
  .ss-guide-box .guide-box {width: 46rem; text-align: center; margin: auto;}
  .ss-guide-box .guide-box ul {justify-content: center; flex-wrap: wrap; margin: 4.5rem auto 0;}
  .ss-guide-box .guide-box ul li {width: calc(50% - 1rem); margin-top: 1rem;}
  .ss-guide-box .guide-box ul li:nth-child(even) {margin-left: 1rem;}
  .ss-guide-box .guide-box ul.step-list li {width:50%; margin-top: 0;}
  .ss-guide-box .guide-box ul.step-list li:nth-child(even) {margin-left: 0;}
  .ss-guide-box .guide-box .guide-cont {margin:0 auto;}

  .sub-cont-wrap.twinkorea .sub-sec1 {padding: 5rem 0 3.4rem;}
  .sub-cont-wrap.twinkorea .sub-sec2 {padding: 5rem 0 3.7rem;}
  .sub-cont-wrap.twinkorea .sub-sec3 {padding: 5rem 0 6rem;}
  .sub-cont-wrap.twinkorea .sub-sec1 .sub-img-wrap {width: 100%;text-align: center;}
  .sub-cont-wrap.twinkorea .sub-sec2 .sub-img-wrap {width: 100%;text-align: center;}
  .sub-cont-wrap.twinkorea .sub-sec3 .sub-img-wrap {width: 100%;text-align: center;}
  .sub-cont-wrap.twinkorea .sub-sec1 .sub-title-wrap {width:100%;}
  .sub-cont-wrap.twinkorea .sub-sec2 .sub-title-wrap {width:100%;}
  .sub-cont-wrap.twinkorea .sub-sec3 .sub-title-wrap {width:100%;}
  .sub-cont-wrap.twinkorea .sub-sec3 dl {flex-direction: column; margin-top: 5rem;}
  .sub-cont-wrap.twinkorea .sub-sec3 dt {margin: auto; width: 8rem;height: 2.4rem; line-height: 2.4rem;}
  .sub-cont-wrap.twinkorea .sub-sec3 dd {text-align: center; width: 100%; margin: 2rem auto;}
  .sub-cont-wrap.notice {padding:10rem 0 7.2rem;}
  .sub-cont-wrap.contact {padding:10rem 0 7.4rem;}
  .history-cont-wrap {width: 100%;}
  .history-cont + .history-cont {margin-top: 3.6rem;}
  .history-cont .btitle {font-size: 4rem; line-height: 4.8rem;margin-bottom: 3.8rem;}
  .history-cont .cont-box .year {font-size: 2.4rem; width: 8rem; margin-right: 5.4rem;}
  .history-cont .cont-box .year::before {right: -1.74rem;}
  .history-cont .cont-box .year::after {width: 1rem; height: 1rem; right: -2.2rem; top: 0.6rem; border: 2px solid #F7AE2D;}
  .history-cont .cont-box .list li {font-size: 1.4rem; line-height: 1.7rem; padding-left: 1.2rem;}
  .history-cont .cont-box .list li::before {left: 0.2rem; top: 0.6rem;}
  .recruit-cont-wrap .cont-list {width: 100%;}
  .recruit-cont .cont-list li::after {display: none;}
  .recruit-cont .cont-list .cont {width: 15rem;}
  .recruit-cont .cont-list .ico-wrap {width: 13rem; height: 13rem;}
  .recruit-cont .cont-list .ico-wrap .img-box {width: 5rem;height: 5rem;}
  .recruit-cont .cont-list .ico-wrap .num {padding-top: 1.5rem; font-size: 1.5rem;line-height: 1.8rem;}
  .recruit-cont .cont-list .text {font-size: 1.5rem;line-height: 1.8rem; margin-top: 1.6rem;}
  .benefit-cont .cont-list .cont {width: 15rem;}
  .benefit-cont .cont-list .cont .text{font-size: 1.5rem;line-height: 1.8rem; margin-top: 1.8rem;}
  .gall-board-list {justify-content: space-between;}
  .gall-board-list li {width: calc(50% - 2rem);}
  .gall-board-list li:nth-child(3n) {margin-right: 2.6rem;}
  .gall-board-list li:nth-child(2n) {margin-right: 0;}
  .gall-board-list li:nth-child(3) {margin-top: 4rem;}
  .gall-list-cont .cont-wrap .text {font-size: 1.6rem; line-height: 1.9rem;}
  .gall-list-cont .cont-wrap .date {font-size: 1.4rem; line-height: 1.6rem;}
}
@media (max-width: 768px){
  .sub-visual {background:url(/static/img/sub/sub_visual_bg_mo.png) no-repeat center;background-size: cover;}
  .sub-visual.company {height: 25rem; background:url(/static/img/sub/sub_visual_bg_mo2.png) no-repeat center;background-size: cover;}
  .sub-visual .title {padding-top: 9.7rem;}
  .sub-title-wrap .title {font-size: 2.7rem; line-height: 3.222rem; text-align: center;}
  .sub-title-wrap .title::before {right: 0;margin: auto;}
  .sub-title-wrap .text {font-size: 1.4rem;line-height: 1.6rem;}
  .sub-cont-wrap.notice .inner {padding: 0;}
  .sub-img-wrap .text {font-size:1.4rem ; line-height: 1.6rem;}
  .board-list-cont {padding: 1.5rem 2rem;flex-wrap: wrap;}
  .board-list-cont > * {font-size: 1.4rem;} 
  .board-list-cont .num {min-width: 2.2rem; transform: translateY(50%);} 
  .board-list-cont .cont { width: calc(100% - 2.2rem - 1.5rem - 2rem);}
  .board-list-cont .date {margin: inherit;}
  .board-list-cont:hover {padding-left: 2rem;}
  .board-list-cont:hover::before {display: none;}
  .pagination {margin-top: 5.1rem;}
  .pagination_wrap {width: 100%;}
  .pagination_wrap .page-num a {font-size: 1.8rem; padding: 0 1.2rem;}
  .pagination_wrap .page-num a + a {margin-left: 0;}
  .pagination_wrap .page-num a.on::after {display: none;}
  .pagination_wrap .page-wrap button {border: 1px solid #dadada; width: 3.6rem; height: 3.6rem;}
  .pagination_wrap .page-wrap button.next {margin-right: 1rem;}
  .ss-guide-box .title-wrap .num {font-size: 4rem; }
  .ss-guide-box .title-wrap .btext {font-size: 1.7rem; line-height: 2.4rem;}
  .ss-guide-box .guide-box {width: 100%;}
  .ss-guide-box .guide-box .guide-cont {width: 100%; height: auto; padding:3rem 0 ;}
  .ss-guide-box .guide-box .guide-cont .img-box.star3 {width: 7.527rem;height: 2.244rem; background-size: 7.527rem auto;}
  .ss-guide-box .guide-box .guide-cont .img-box.star2 {width: 4.921rem;height: 2.244rem; background-size: 7.527rem auto;}
  .ss-guide-box .guide-box .guide-cont .img-box.star1 {width: 2.361rem;height: 2.244rem; background-size: 7.527rem auto;}
  .ss-guide-box .guide-box .guide-cont .img-box.table {width: 3.378rem;height: 2.244rem; background-size: 3.378rem auto;}
  .ss-guide-box .guide-box .guide-cont .title {font-size: 1.7rem; line-height: 2.4rem; margin-top: 1.2rem;}
  .ss-guide-box .guide-box .guide-cont .text{font-size: 1.4rem; line-height: 1.6rem; margin-top: 0.4rem;}
  .sub-cont-wrap.contact .inner {padding: 0;}
  .sub-cont-wrap.notice-view {padding:10.5rem 0 8rem;}
  .sub-cont-wrap.notice-view .inner {padding:0;}
  .sub-cont-wrap.news {padding:10.5rem 0 7rem;}
  .map-area {height: 30rem;}
  .recruit-cont-wrap .btitle {font-size: 2.2rem; line-height: 2.6rem; text-align: center;}
  .recruit-cont-wrap .cont-area.recruit-content {border:none;margin-top: 0; margin-bottom: 4.6rem;}
  .recruit-cont-wrap .cont-area.benefit-content {border:none;margin-top: 4.6rem; margin-bottom: 4.6rem;}
  .recruit-cont-wrap .cont-area.apply-content {border: 1px solid #dadada;}
  .apply-cont {margin-top: 7.8rem;}
  .recruit-cont .cont-list li {width: 50%; margin-top: 4rem; }
  .recruit-cont .cont-list li:nth-child(-n+2) {margin-top: 0;}
  .recruit-cont .cont-list .cont {width: 13rem; margin: auto;}
  .contact-list {width: calc(100% - 4rem); margin:5.2rem auto 0;border: 1px solid #dadada; padding: 2rem; text-align: center;}
  .benefit-cont .cont-list li {width: 50%; margin-top: 2.5rem; margin-right: 0;}
  .benefit-cont .cont-list .cont {margin: auto;}
  .benefit-cont .cont-list .cont .text {margin-top: 0;}
  .apply-content .btext {font-size: 2rem; line-height: 2.4rem;}
  .apply-content .text{font-size: 1.5rem; line-height: 1.8rem;}
  .contact-list dl {display: block;}
  .contact-list dl + dl { margin-top: 3rem ;}
  .contact-list dl dt {font-size: 2rem; font-weight: 700; line-height:2.4rem; margin-right: 0; width: 100%;}
  .contact-list dl dd {font-size: 1.5rem; line-height: 1.8rem; margin-top: 2rem;width: 100%;}
  .board-view-wrap .board-view-title {padding: 1rem 2rem;display: block;}
  .board-view-wrap .board-view-title .title {display: block;padding-left: 0; font-size: 1.8rem; line-height: 2rem;}
  .board-view-wrap .board-view-title .date { font-size: 1.4rem; line-height: 1.7rem;}
  .board-view-wrap .board-view-content {margin: 3rem 2rem; height: 40rem;}
  .board-view-wrap .list-btn-wrap .list-area {font-size: 1.6rem; line-height: 1.9rem;}
  .board-view-wrap .list-btn-wrap .list-area span {width: 4.4rem;margin-right: 2rem;}
  .board-view-wrap .list-btn-wrap .list-area a {width: calc(100% - 6.4rem);}
  .gall-board-list li {width: 100%; margin-top: 5rem; margin-right: 0; margin-top: 5rem !important;}
  .gall-board-list li:nth-child(3n) {margin-right: 0;}
  .gall-board-list li:nth-child(1) {margin-top: 0 !important; }
  .gall-list-cont .img-wrap { height: 12rem;}
  .news-list-wrap .pagination {margin-top: 5rem;}
}


@media (max-width: 640px){
  .ss-guide-box .guide-box ul.step-list {margin-top: 0;}
}