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

/* 서브 sub-visual 배경이미지 영역 */
.sub-visual {position: relative; width: 100%; margin-top: 10rem; z-index: 1;}
.sub-visual .inner {margin: 0 auto; width: 100%; max-width: var(--max-width-top);}
.sub-topvisual {width: 100%; height: 55rem; background-repeat: no-repeat; background-position: center center; background-size: cover;}

/* 서브 하위메뉴 리스트 영역 */
.sub-gnb {position: relative; top: 0; left: 0; width: 100%; background-color: #20c4e9; z-index: 2;}
.sub-gnb ul {display: flex; justify-content: center; margin: 0 auto; width: 100%; max-width: var(--max-width); text-align: center;}
.sub-gnb ul li {display: inline-flex; padding: 0 2.6rem;}
.sub-gnb ul li a {position: relative; display: flex; align-items: center; flex-wrap: wrap; width: auto; height: 7rem; font-size: 1.8rem; color: #c0eff9; font-weight: 600; letter-spacing: 0.010rem;}
.sub-gnb ul li a:hover {color: #fff;}
.sub-gnb ul li.active a {color: #fff;}
.sub-gnb ul li.active a:after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background-color: #bff2fd;}

/* 서브 대메뉴 타이틀 및 페이지명 영역 */
.page-title {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -18%); width: 100%; overflow: hidden;}
.page-title .inner {margin: 0 auto; width: 100%; max-width: 120rem;}
.page-title .tit-kor {display: inline-block; width: 100%; text-align: center;}
.page-title .tit-kor h2 {font-weight: normal; vertical-align: top;}
.page-title .tit-kor h2 span {display: inline-block; font-size: 2.2rem; color: #fff; font-weight: 700; line-height: 1; letter-spacing: -0.010rem;}
.page-title .tit-txt {display: inline-block; width: 100%; text-align: center; margin-top: 2.5rem; text-shadow: 3px 3px 10px rgba(0,0,0,0.2);}
.page-title .tit-txt p {font-family: "Saira", sans-serif; transform: rotate(-0.03deg); font-size: 8rem; color: #fff; font-weight: 600; line-height: 1; letter-spacing: -0.020rem;}
.page-title-menunone {transform: translate(-50%, -25%);} /*타이틀 높이 예외처리*/

/* 서브 하위메뉴 네비게이션 영역 */
.sub-navi {width: 100%; margin-top: 3.5rem;}
.sub-navi .navi-txt {display: flex; justify-content: center; align-items: center; height: 2.5rem;vertical-align: top;}
.sub-navi .navi-txt a {display: block;}
.sub-navi .navi-txt a i.home {display: inline-block; width: 2rem; height: 2rem;}
.sub-navi .navi-txt a i.home img {width: 100%; vertical-align: top;}
.sub-navi .navi-txt span {display: inline-block; font-size: 1.6rem; color: #fff; font-weight: 400; line-height: 1; letter-spacing: -0.010rem;}
.sub-navi .navi-txt span:before {content: ""; display: inline-block; width: 1.5rem; height: 2px; margin: 0 1.2rem; background-color: #fff; vertical-align: middle;}
.sub-navi .navi-txt span.active {font-weight: 700;}

/* 서브 레이아웃 공통 */
.sec-sub {position: relative; width: 100%; margin-top: 13rem;}
.sec-sub .inner {margin: 0 auto; width: 100%; max-width: var(--max-width);}
.subpage-common {position: relative; width: 100%;}
.subpage-common .pagecontent-wrap {width: 100%;}

.page-prepare {width: 100%; text-align: center;}
.page-prepare img {max-width: 100%;}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* 서브페이지 컨텐츠 영역 01 - COMPANY */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* s01 OVERVIEW - 내용 */
.page-overviewdiagram {background-color: #f9f9f9;}
.overviewdiagram-box {width: 100%; padding: 13rem 0; text-align: center;}
.overviewdiagram-box .overview-logo {display: inline-block; width: 27.7rem; margin-bottom: 8rem;}
.overviewdiagram-box .overview-logo img {width: 100%;}
.overviewdiagram-box ul {display: flex; flex-wrap: wrap; margin: 0 auto; width: 100%; max-width: 117rem;}
.overviewdiagram-box ul li {position: relative; width: 33.3334%;}
.overviewdiagram-box ul li img {width: 100%;}
.overviewdiagram-box ul li:nth-of-type(1):before {content: ""; position: absolute; top: 50%; right: -0.8rem; transform: translateY(-50%); width: 1.6rem; height: 1.2rem; background-image: url("../company/images/about_diagram_arrow01.png"); background-repeat: no-repeat; background-size: 100%;}
.overviewdiagram-box ul li:nth-of-type(2):before {content: ""; position: absolute; top: 50%; right: -0.8rem; transform: translateY(-50%); width: 1.6rem; height: 1.2rem; background-image: url("../company/images/about_diagram_arrow02.png"); background-repeat: no-repeat; background-size: 100%;}

.page-overviewarea {width: 100%; margin-top: 13rem;}
.overviewarea-list {width: 100%;}
.overviewarea-list .areaitem {width: 100%; margin-bottom: 10rem;}
.overviewarea-list .areaitem:last-child {margin-bottom: 0;}
.overviewarea-list .areaitem .box {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
.overviewarea-list .areaitem .box .area-thumb {width: 44.4445%;}
.overviewarea-list .areaitem .box .area-thumb figure img {width: 100%;}
.overviewarea-list .areaitem .box .area-info {width: 50%;}
.overviewarea-list .areaitem .box .area-info .txtbox {width: 100%; height: 100%; display: flex; align-content: center; flex-wrap: wrap; word-break: keep-all;}
.overviewarea-list .areaitem .box .area-info .txtbox p.kortxt {font-size: 2.4rem; color: #000; font-weight: 600; line-height: 1.5; letter-spacing: -0.010rem; margin-bottom: 3rem;}
.overviewarea-list .areaitem .box .area-info .txtbox p.engtxt {font-size: 2rem; color: #464646; font-weight: 500; line-height: 1.5; letter-spacing: 0.010rem; word-break: keep-all;}

/* s02 HISTORY - 내용 */
.page-history {margin-top: 6rem;}
.history-box {width: 100%;}
.history-box .history-wrap {position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
.history-box .history-wrap .left-title {width: 24.305556%;}
.history-box .history-wrap .left-title .tit-box {position: -webkit-sticky; position: sticky; top: 150px; width: 100%; text-align: center; padding: 4.5rem 4rem; background-color: var(--default-mint-color);}
.history-box .history-wrap .left-title .tit-box .h-logo {display: inline-block; width: 21.7rem;}
.history-box .history-wrap .left-title .tit-box .h-logo img {width: 100%;}
.history-box .history-wrap .left-title .tit-box .h-since {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; padding-top: 3rem; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,0.5);}
.history-box .history-wrap .left-title .tit-box .h-since p {font-size: 6rem; color: #fff; font-weight: 600; line-height: 1; letter-spacing: -0.010rem;}
.history-box .history-wrap .left-title .tit-box .h-since span {font-size: 3.4rem; color: #b1ecf9; font-weight: 600; letter-spacing: -0.010rem; margin-top: 1.5rem; margin-right: 1rem;}

.history-box .history-wrap .right-historylist {width: 65.27778%;}
.history-box .history-wrap .right-historylist .box {width: 100%;}
.history-box .history-wrap .right-historylist .box .list-item {display: flex; flex-wrap: wrap; width: 100%; padding-bottom: 5.5rem;}
.history-box .history-wrap .right-historylist .box .list-item .years {width: 13.82978723404255%;}
.history-box .history-wrap .right-historylist .box .list-item .years .txt {position: relative; width: auto; text-align: center;}
.history-box .history-wrap .right-historylist .box .list-item .years .txt span {position: relative; z-index: 2; transform: rotate(-0.03deg); font-size: 4.5rem; color: #111; font-weight: 800; letter-spacing: -0.035rem;}
.history-box .history-wrap .right-historylist .box .list-item .years .txt:after {position: absolute; bottom: 0.2rem; left: 0; content: ""; width: 100%; height: 2.5rem; background-color: #def7fc; z-index: 1;}

.history-box .history-wrap .right-historylist .box .list-item .details {width: 86.17021276595745%; padding-left: 4.680851063829787%;}
.history-box .history-wrap .right-historylist .box .list-item .details ul {position: relative; width: 100%;}
.history-box .history-wrap .right-historylist .box .list-item .details ul:after {position: absolute; top: 1rem; left: 0.48rem; content: ""; display: block; width: 1px; height: calc(100% + 8.5rem); background-color: #e2e2e2; z-index: 1;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li {position: relative; z-index: 2; display: flex; flex-wrap: wrap; margin-top: 2.2rem;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li span {position: relative; width: 10.4rem; font-family: "SCoreDream", sans-serif; transform: rotate(-0.03deg); font-size: 2rem; color: var(--default-mint-color); font-weight: 600; line-height: 1; letter-spacing: -0.02rem; padding-left: 5.4rem; margin-top: 0.12rem;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li:first-child span:after {position: absolute; top: 0.5rem; left: 0; content: ""; display: block; width: 1rem; height: 1rem; background-color: #20c4e9; border-radius: 50%; -webkit-box-shadow: 0px 0px 0px 3px #c8f1fa; box-shadow: 0px 0px 0px 3px #c8f1fa;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li .h-contxt {width: 85%;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li .h-contxt p {font-size: 1.9rem; color: #111; font-weight: 400; letter-spacing: -0.005rem; word-break: keep-all; margin-bottom: 0.5rem;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li .h-contxt p.h-eng {font-size: 1.75rem;}

.history-box .history-wrap .right-historylist .box .list-item:last-child {padding-bottom: 0;} /*마지막년도 여백 없애기*/
.history-box .history-wrap .right-historylist .box .list-item:last-child .details ul:after {display: none;} /*마지막년도 라인 없애기*/


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* 서브페이지 컨텐츠 영역 02 - NOTICE, 서브페이지 컨텐츠 영역 03 - PR - 게시판 위주 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.page-boardarea {margin-top: 6rem;}

/* 일반 리스트 게시판 그누보드 연동 css 변경 */
#bo_list .tbl_head01 thead th {font-size: 1.75rem !important; font-weight: 700 !important; height: 7rem !important; background-color: #f8f8f8 !important; border-top: 1px solid #000 !important;}
#bo_list .tbl_head01 tbody td {font-size: 1.6rem !important; font-weight: 400 !important; letter-spacing: -0.5px !important; padding: 16px 10px !important; background-color: transparent !important;}
#bo_list .tbl_head01 tbody tr:hover {background-color: #f9f9f9 !important;}
#bo_list .tbl_head01 a {font-size: 1.75rem !important; color: #111 !important; font-weight: 500 !important;}
#bo_list .tbl_head01 a span {display: block; font-size: 1.65rem !important; color: #525151 !important;}
#bo_list .tbl_head01 a:hover {color: var(--default-mint-color) !important;}
#bo_list .tbl_head01 a:hover span {color: var(--default-mint-color) !important;}
.tbl_head01 td {border-top: none !important;}
.td_subject img {display: inline-block; margin-left: 10px !important;}
label, input, button, select, img {vertical-align: top !important;}
#bo_v_title {text-align: center;}

/* 더미페이지 스타일 적용 - 그누보드 스타일 변경 */
.paging-wrap {width: 100%; text-align: center; padding-top: 5rem; margin-top: 8rem; border-top: 1px solid #ddd;}
.pg_wrap {clear: both; margin: 5rem 0 2rem; padding: 0;}
.pg_wrap span.pg {font-size: 0;}
.msg_sound_only, .sound_only {display: inline-block !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;}

.pg_page {background: #fff; border: 1px solid #dddddd; margin-left: -1px;}
.pg_page:hover {background: #f6f6f6;}
.pg_current {display: inline-block !important; color: var(--default-mint-color) !important; font-weight: normal; margin-left: -1px !important; background: #f8f8f8 !important; border: 1px solid #dddddd !important; border-bottom: 4px solid var(--default-mint-color) !important;} /* 선택시 스타일 적용 */
.pg_page, .pg_current {display: inline-block; width: 44px; height: 44px; transform: rotate(-0.03deg); font-size: 1.6rem; color: #767676; letter-spacing: 0; line-height: 44px; vertical-align: middle;} /* 선택시 설정 */
.pg a.pg_start {width: 44px; text-indent: -9999px; margin-right: 10px; background: url("../images/paging_arrow_first.png") no-repeat center center !important;} /* 맨처음 버튼 */
.pg a.pg_start:hover {border: 1px solid var(--default-mint-color);}
.pg a.pg_end {width: 44px; text-indent: -9999px; margin-left: 10px; background: url("../images/paging_arrow_last.png") no-repeat center center !important;} /* 맨끝 버튼 */
.pg a.pg_end:hover {border: 1px solid var(--default-mint-color);}
.pg_prev, .pg_next {width: 44px; text-indent: -9999px; margin: 0 5px;}
.pg_prev:hover, .pg_next:hover {background: none; border: 1px solid var(--default-mint-color);}
.pg_prev {background: url("../images/paging_arrow_prev.png") no-repeat center center !important;} /* 이전 버튼 */
.pg_next {background: url("../images/paging_arrow_next.png") no-repeat center center !important;} /* 다음 버튼 */

/* 게시물 검색 스타일 적용 - 그누보드 스타일 변경 */
.search-wrap {width: 100%; padding: 3rem 0; margin-top: 3rem; background-color: #f6f6f6; border-top: 1px solid #e9e9e9;}
#bo_sch {margin-bottom: 0 !important; padding-top: 0 !important; text-align: center;}
#bo_sch legend {position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden;}
select#sfl {font-family: "Pretendard", sans-serif !important; font-size: 15px !important; color: #666565 !important; font-weight: 400 !important; width: 20rem !important; height: 55px !important; line-height: 55px; padding: 0 0 0 15px; margin-right: 1.3rem; border: 1px solid #ccc !important; background: #fff url("../images/search_arrow.jpg") 90% 52% no-repeat !important; background-size: 13px 9px !important; -webkit-appearance: none; outline: none;}
input#stx.frm_input {width: 34rem !important; height: 55px !important; font-size: 15px; color: #666565; font-weight: 400; padding: 0 15px 0 15px; margin-right: 10px; background: #fff !important; border: 1px solid #ccc; outline: none;}
input.btn_submit {width: auto !important; height: 55px !important; padding: 8px 30px 7px; font-size: 15px; color: #fff; font-weight: 600; letter-spacing: 0em; background: #111; border: 1px solid #111 !important; cursor: pointer; transition: all .25s ease;}
input.btn_submit:hover {color: #fff; background: var(--default-mint-color); border: 1px solid var(--default-mint-color) !important;}

/* 게시물 검색 스타일 적용 - 그누보드 스타일 변경 - 마우스 포커싱 효과 적용 */
select#sfl:focus {background-color: #fff; border: 1px solid var(--default-mint-color) !important; box-shadow: 1px 1px 10px rgba(211,25,32,0.10) !important; transition: all 0.6s ease; outline: none;}
input#stx.frm_input:focus {background-color: #fff; border: 1px solid var(--default-mint-color); box-shadow: 1px 1px 10px rgba(211,25,32,0.10); transition: all 0.6s ease; outline: none;}

/* 갤러리게시판 리스트 게시판 그누보드 연동 css 변경 */
#bo_gall .gall_con {border: none !important;}
#bo_gall #gall_ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 5rem 3rem;}
#bo_gall .gall_li {float: initial; width: 100% !important; margin: 0 !important;}
#bo_gall .gall_con li {margin: 0 !important;}
#bo_gall .gall_text_href {padding: 20px 0 0 0 !important;}
#bo_gall .gall_text_href a {display: block; width: 100%; min-height: 5.6rem; font-family: "Pretendard", sans-serif !important; font-size: 2rem !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -0.02rem; word-break: keep-all; /*display: -webkit-box; white-space: break-spaces; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;*/}
#bo_gall .gall_text_href a:hover {color: var(--default-mint-color);}
#bo_gall .gall_text_href a span {font-size: 1.8rem !important;}
.gall_con li:nth-child(2) {height: auto !important;}
#bo_gall .gall_text_href .date {font-size: 15px; color: #252525; font-weight: 400; margin-top: 2rem;}
#bo_gall .gall_con li.datetime {font-size: 1.5rem; color: #252525; font-weight: 400; margin-top: 2rem !important;}

/* 그누보드 미니 달력 스타일 변경 적용 */
.ui-datepicker {width: 25rem !important; border-radius: 5px !important; padding: 1rem !important; border: 1px solid #e1e1e1 !important;}
.ui-widget-header {padding: 0.5rem 0 !important; background: #f9f9f9 !important; border: 1px solid #e6e5e5 !important;}
.ui-datepicker .ui-datepicker-title {margin: 0 3rem !important;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {height: 2.2rem !important; font-size: 1.3rem !important; border: 1px solid #c1c1c1 !important;} /*상단년도 셀렉트박스 스타일*/
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {top: 18.5% !important; width: 2rem !important; height: 2rem !important;}
.ui-datepicker .ui-datepicker-prev {left: 0.5rem !important; border: 0 !important;}
.ui-datepicker .ui-datepicker-next {right: 0.5rem !important; border: 0 !important;}
.ui-icon {width: 2rem !important; height: 2rem !important;} /*상단년도 좌우 넘기기 화살표 아이콘 스타일*/
.ui-icon-circle-triangle-w {background: url("../reservation/images/year_prev.svg") no-repeat left top !important;}
.ui-icon-circle-triangle-e {background: url("../reservation/images/year_right.svg") no-repeat right top !important;}
.ui-datepicker th {font-size: 1.4rem !important;}
.ui-datepicker td span, .ui-datepicker td a {font-size: 1.3rem !important; text-align: center !important; padding: 0.2rem !important;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {background: #f9f9f9 !important; border: 1px solid #f9f9f9 !important;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {color: #00c3f1 !important; border: 1px solid #00c3f1 !important;}
.ui-state-focus {border: 0 !important;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {color: #fff !important; background: #00c3f1 !important; border: 1px solid #00c3f1 !important;}
.ui-datepicker .ui-datepicker-buttonpane button {font-family: "Noto Sans KR", sans-serif !important; transform: rotate(-0.03deg); font-size: 1.3rem !important; padding: 0.5rem 1rem !important; background: #f9f9f9 !important; border: 1px solid #ebebeb !important;}
.ui-widget-header .ui-datepicker-prev-hover, .ui-widget-header .ui-datepicker-next-hover {border: 0 !important;}
.ui-widget-header .ui-state-hover {background: none !important; border: 0 !important;}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* 서브페이지 컨텐츠 영역 04 - CONTACT */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.page-contact {width: 100%;}

/* s01 CONTACT - 사무실 위치 영역 */
.office-info {width: 100%;}
.office-info #location {width: 100%;}
.office-info #location .office-box {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
.office-info #location .office-box .office-list {width: 45.83334%}
.office-info #location .office-box .office-list ul {width: 100%;}
.office-info #location .office-box .office-list ul li {position: relative; width: 100%; padding: 2rem 3rem; border-bottom: 1px solid #000; cursor: pointer;}
.office-info #location .office-box .office-list ul li:first-child {border-top: 1px solid #000;}
.office-info #location .office-box .office-list ul li:last-child {margin-bottom: 0;}
.office-info #location .office-box .office-list ul li .box {width: 100%;}
.office-info #location .office-box .office-list ul li .box h3 {position: relative; font-size: 2.6rem; color: #111; font-weight: 700; line-height: 1.1;}
.office-info #location .office-box .office-list ul li .box h3:after {position: absolute; top: 0.2rem; right: 0; content: ""; display: block; width: 3rem; height: 3rem; background-image: url("../contact/images/active_arrow.png"); background-repeat: no-repeat; background-size: 100%; opacity: 0; transition: all 0.3s ease;}
.office-info #location .office-box .office-list ul li .box .address {display: flex; align-items: center; flex-wrap: wrap; width: 100%; margin-top: 2rem;}
.office-info #location .office-box .office-list ul li .box .address .ico {width: 5.2rem; height: 5.2rem;}
.office-info #location .office-box .office-list ul li .box .address .ico img {width: 100%;}
.office-info #location .office-box .office-list ul li .box .address .ico img.off {display: inline;}
.office-info #location .office-box .office-list ul li .box .address .ico img.on {display: none;}
.office-info #location .office-box .office-list ul li .box .address .infotxt {padding-left: 1.6rem;}
.office-info #location .office-box .office-list ul li .box .address .infotxt p.kor {font-size: 1.9rem; color: #000; font-weight: 600; line-height: 1.1; margin-bottom: 0.4rem;}
.office-info #location .office-box .office-list ul li .box .address .infotxt p.eng {font-size: 1.8rem; color: #4f4f4f; font-weight: 500; line-height: 1.1;}
.office-info #location .office-box .office-list ul li .box .callemail {display: flex; flex-wrap: wrap;width: 100%; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px dashed #ccc;}
.office-info #location .office-box .office-list ul li .box .callemail .left-call {display: flex; align-items: center; flex-wrap: wrap; width: 50%; padding-left: 0.5rem;}
.office-info #location .office-box .office-list ul li .box .callemail .right-email {display: flex; align-items: center; flex-wrap: wrap; width: 50%;}
.office-info #location .office-box .office-list ul li .box .callemail i {width: 4rem; height: 4rem;}
.office-info #location .office-box .office-list ul li .box .callemail i img {width: 100%;}
.office-info #location .office-box .office-list ul li .box .callemail i img.off {display: inline;}
.office-info #location .office-box .office-list ul li .box .callemail i img.on {display: none;}
.office-info #location .office-box .office-list ul li .box .callemail span {font-size: 1.8rem; color: #000; font-weight: 600; line-height: 1.1; margin-left: 2rem;}

/* s01 CONTACT - 사무실 위치 영역 - 구글지도 노출 영역 */
.office-info #location .office-box .office-map {width: 50%;}
.office-info #location .office-box .office-map iframe {width: 100%; height: 100%; transition: all 0.5s;}

/* s01 CONTACT - 사무실 위치 영역 - Active 선택된 사무실 효과 적용 */
.office-info #location .office-box .office-list ul li.active {background-color: #f9f9f9; border-bottom: 1px solid #20c4e9; transition: all 0.3s ease;}
.office-info #location .office-box .office-list ul li.active .box h3 {color: #20c4e9;}
.office-info #location .office-box .office-list ul li.active .box h3:after {opacity: 1;}
.office-info #location .office-box .office-list ul li.active .box .address .ico img.off {display: none; transition: all 0.5s ease-in-out;}
.office-info #location .office-box .office-list ul li.active .box .address .ico img.on {display: inline; transition: all 0.5s ease-in-out;}
.office-info #location .office-box .office-list ul li.active .box .callemail i img.off {display: none; transition: all 0.5s ease-in-out;}
.office-info #location .office-box .office-list ul li.active .box .callemail i img.on {display: inline; transition: all 0.5s ease-in-out;}

/* s01 CONTACT - 자매 브랜드 사이트 바로가기 영역 */
.our-brandsite {width: 100%; padding: 13rem 0; margin-top: 13rem; background-color: #f9f9f9;}
.brandsite-box {width: 100%;}
.brandsite-box h3 {font-family: "Saira", sans-serif; transform: rotate(-0.03deg); font-size: 5rem; color: #000; font-weight: 700; line-height: 1; text-align: center;}
.brandsite-box .site-list {width: 100%; margin-top: 8rem;}
.brandsite-box .site-list ul {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
.brandsite-box .site-list ul li {width: 31.38889%; background: #fff; border: 1px solid #eae9e9; box-shadow: 0 10px 24px rgba(0,0,0,0.055);}
.brandsite-box .site-list ul li .box {width: 100%;}
.brandsite-box .site-list ul li .box a {display: block; width: 100%; height: 100%;}

.brandsite-box .site-list ul li .box .thumbnail {position: relative; width: 100%; height: 26rem; overflow: hidden;}
.brandsite-box .site-list ul li .box .thumbnail .loadimg {position: relative; width: 100%; height: 100%; transition: background-position 6s ease; background-position: 0 0 !important; background-size: 100% auto !important; z-index: 1;}
.brandsite-box .site-list ul li .box .site-info {width: 100%; padding: 4rem; border-top: 1px solid #eae9e9;}
.brandsite-box .site-list ul li .box .site-info .site-name {width: 100%;}
.brandsite-box .site-list ul li .box .site-info .site-name p.kor {font-size: 3rem; color: #111; font-weight: 700; line-height: 1.1; letter-spacing: -0.025rem;}
.brandsite-box .site-list ul li .box .site-info .site-name p.eng {font-size: 2.2rem; color: #545353; font-weight: 700; line-height: 1.1; letter-spacing: -0.025rem; margin-top: 1rem;}

.brandsite-box .site-list ul li .box .site-info .sitemore-btn {width: 100%; margin-top: 3rem;}
.brandsite-box .site-list ul li .box .site-info .sitemore-btn .btns {display: flex; justify-content: flex-end; flex-wrap: wrap; width: 100%;}
.brandsite-box .site-list ul li .box .site-info .sitemore-btn .btns .btnbox {display: flex; align-items: center; flex-wrap: wrap; width: auto; height: 100%;}
.brandsite-box .site-list ul li .box .site-info .sitemore-btn .btns .btnbox i.mark {width: 3.3rem; height: 3.1rem; margin-top: 0.2rem; margin-right: 0.9rem;}
.brandsite-box .site-list ul li .box .site-info .sitemore-btn .btns .btnbox i.mark img {width: 100%;}
.brandsite-box .site-list ul li .box .site-info .sitemore-btn .btns .btnbox span {font-size: 1.85rem; color: #000; font-weight: 600; letter-spacing: 0.010rem; margin-top: 0.2rem;}
.brandsite-box .site-list ul li .box .site-info .sitemore-btn .btns .btnbox .arrow {width: 3.7rem; height: 3.7rem; margin-left: 2rem;}
.brandsite-box .site-list ul li .box .site-info .sitemore-btn .btns .btnbox .arrow img {width: 100%; transition: all 300ms ease-in-out;}
.brandsite-box .site-list ul li .box .site-info .sitemore-btn .btns .btnbox .arrow img.arrow-off {display: inline;}
.brandsite-box .site-list ul li .box .site-info .sitemore-btn .btns .btnbox .arrow img.arrow-on {display: none;}

/* s01 CONTACT - 자매 브랜드 사이트 바로가기 영역 - 마우스 롤오버 효과 적용 */
.brandsite-box .site-list ul li:hover .box .thumbnail .loadimg {background-position: 0 100% !important;} /* 이미지 위아래 롤링 */
.brandsite-box .site-list ul li:hover .box .site-info .sitemore-btn .btns .btnbox .arrow img.arrow-off {display: none;} /*마우스롤오버시 효과*/
.brandsite-box .site-list ul li:hover .box .site-info .sitemore-btn .btns .btnbox .arrow img.arrow-on {display: inline;} /*마우스롤오버시 효과*/


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 359 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width:359px) {

/* 서브 sub-visual 배경이미지 영역 */
.sub-visual {margin-top: 70px;}
.sub-topvisual {height: 28rem;}

/* 서브 하위메뉴 리스트 영역 */
.sub-gnb ul li {padding: 0 2rem;}
.sub-gnb ul li a {height: 5rem; font-size: 1.6rem;}
.sub-gnb ul li.active a:after {height: 4px;}

/* 서브 대메뉴 타이틀 및 페이지명 영역 */
.page-title .tit-txt {margin-top: 1rem;}
.page-title .tit-kor h2 span {font-size: 1.75rem;}
.page-title .tit-txt p {font-size: 5rem;}

/* 서브 레이아웃 공통 */
.sec-sub {margin-top: 8rem;} /* 높이마진값 재변경 */

/* COMPANY - s01 OVERVIEW - 내용 */
.overviewdiagram-box {padding: 8rem 0;}
.overviewdiagram-box .overview-logo {width: 22rem; margin-bottom: 5rem;}
.overviewdiagram-box ul {padding: 0 3rem;}
.overviewdiagram-box ul.pc {display: none;} /* PC용 삭제 */
.overviewdiagram-box ul li {width: 100%;}
.overviewdiagram-box ul li:nth-of-type(1):before {top: initial; right: initial; bottom: -0.8rem; left: 50%; width: 1.4rem; height: 1rem;}
.overviewdiagram-box ul li:nth-of-type(2):before {top: initial; right: initial; bottom: -0.8rem; left: 50%; width: 1.4rem; height: 1rem; transform: rotate(180deg);} /* 화살표 회전 */
.page-overviewarea {padding: 0 2rem; margin-top: 8rem;}
.overviewarea-list .areaitem {margin-bottom: 8rem;}
.overviewarea-list .areaitem .box .area-thumb {width: 100%;}
.overviewarea-list .areaitem .box .area-info {width: 100%;}
.overviewarea-list .areaitem .box .area-info .txtbox {align-content: initial; height: auto; margin-top: 3rem;}
.overviewarea-list .areaitem .box .area-info .txtbox p.kortxt {font-size: 2.1rem; line-height: 1.45;}
.overviewarea-list .areaitem .box .area-info .txtbox p.kortxt br {display: none;}
.overviewarea-list .areaitem .box .area-info .txtbox p.engtxt {font-size: 1.8rem; line-height: 1.4;}
.overviewarea-list .areaitem:nth-of-type(2) .box .area-info {order: 2;} /* 이미지 및 내용순서 변경 */
.overviewarea-list .areaitem:nth-of-type(2) .box .area-thumb {order: 1;} /* 이미지 및 내용순서 변경 */

/* COMPANY - s02 HISTORY - 내용 */
.page-history {margin-top: 4rem;}
.history-box {padding: 0 2rem;}
.history-box .history-wrap {justify-content: initial;}
.history-box .history-wrap .left-title {width: 100%;}
.history-box .history-wrap .left-title .tit-box {padding: 3rem 4rem;}
.history-box .history-wrap .left-title .tit-box .h-logo {width: 18rem;}
.history-box .history-wrap .left-title .tit-box .h-since p {font-size: 5rem;}
.history-box .history-wrap .left-title .tit-box .h-since span {font-size: 2.4rem;}
.history-box .history-wrap .right-historylist {width: 100%; margin-top: 4rem;}
.history-box .history-wrap .right-historylist .box .list-item .years {width: 100%;}
.history-box .history-wrap .right-historylist .box .list-item .years .txt {text-align: left; padding-left: 3rem;}
.history-box .history-wrap .right-historylist .box .list-item .details {width: 100%; padding-left: 0;}
.history-box .history-wrap .right-historylist .box .list-item .details ul:after {height: calc(100%);} /*라인 높이 줄이기*/
.history-box .history-wrap .right-historylist .box .list-item .details ul li {justify-content: space-between;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li span {width: 8.4rem; font-size: 1.8rem; padding-left: 3.4rem;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li .h-contxt {width: 76%;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li:first-child span:after {top: 0.4rem; transform: translateY(0);}
.history-box .history-wrap .right-historylist .box .list-item .details ul li .h-contxt p {width: 100%; font-size: 1.6rem; word-break: keep-all;}
.history-box .history-wrap .right-historylist .box .list-item:last-child .details ul:after {display: block;} /*마지막년도 라인 모바일에서 다시 살리기*/

/* 서브페이지 컨텐츠 영역 02 - NOTICE, 서브페이지 컨텐츠 영역 03 - PR - 게시판 위주 */
.page-boardarea {padding: 0 2rem;}

/* 일반 리스트 게시판 그누보드 연동 css 변경 */
#bo_list .tbl_head01 thead th {font-size: 1.8rem !important; padding: 0 5px !important;}
#bo_list .tbl_head01 thead a {font-size: 1.8rem !important;}
#bo_list .tbl_head01 tbody td {font-size: 1.5rem !important; letter-spacing: -0.7px !important; padding: 8px 5px !important;}
#bo_list .tbl_head01 td {font-size: 1.75rem !important; line-height: 1.3 !important; padding: 8px 5px !important;}
#bo_list .td_datetime {width: 26% !important; font-size: 1.5rem !important; letter-spacing: -0.7px !important;}
#bo_list .tbl_head01 a.bo_cate_link {width: 100% !important;}

/* 더미페이지 스타일 적용 - 그누보드 스타일 변경 */
.pg_page, .pg_current {width: 32px; height: 32px; font-size: 1.4rem; line-height: 32px;}

/* 게시물 검색 스타일 적용 - 그누보드 스타일 변경 */
select#sfl {width: 100% !important; height: 44px !important; font-size: 15px; line-height: 1; margin-right: 0; margin-bottom: 1rem; background: #fff url("../images/search_arrow.jpg") 94% 52% no-repeat !important;}
input#stx.frm_input {width: 100% !important; height: 44px !important; font-size: 15px; margin-bottom: 1rem;}
input.btn_submit {width: 100% !important; height: 44px !important; font-size: 16px;}

/* 갤러리게시판 리스트 게시판 그누보드 연동 css 변경 */
#bo_gall .gall_li {margin-bottom: 4rem !important;}
#bo_gall .gall_text_href a {min-height: auto;}

/* 서브페이지 컨텐츠 영역 04 - CONTACT */
.office-info {padding: 0 2rem;}
.office-info #location .office-box .office-list {width: 100%; order: 2;} /* 사무실위치 정보 및 구글맵 위치 순서변경 */
.office-info #location .office-box .office-list ul li {padding: 2rem 2rem;}
.office-info #location .office-box .office-list ul li .box h3 {font-size: 2.2rem; word-break: keep-all;}
.office-info #location .office-box .office-list ul li .box h3:after {top: 0; width: 2.3rem; height: 2.3rem;}
.office-info #location .office-box .office-list ul li .box .address .ico {width: 2.6rem; height: 2.6rem;}
.office-info #location .office-box .office-list ul li .box .address .infotxt {width: 86%;}
.office-info #location .office-box .office-list ul li .box .address .infotxt p.kor {font-size: 1.45rem; letter-spacing: -0.08rem;}
.office-info #location .office-box .office-list ul li .box .address .infotxt p.eng {font-size: 1.3rem; letter-spacing: -0.06rem;}
.office-info #location .office-box .office-list ul li .box .callemail .left-call {padding-left: 0.2rem;}
.office-info #location .office-box .office-list ul li .box .callemail i {width: 2rem; height: 2rem;}
.office-info #location .office-box .office-list ul li .box .callemail span {font-size: 1.35rem; letter-spacing: -0.04rem; margin-left: 0.5rem;}
.office-info #location .office-box .office-map {width: 100%; height: 40rem; margin-bottom: 2rem; order: 1;} /* 사무실위치 정보 및 구글맵 위치 순서변경 */

.our-brandsite {padding: 8rem 0; margin-top: 8rem;}
.brandsite-box {padding: 0 2rem;}
.brandsite-box h3 {font-size: 3.5rem;}
.brandsite-box .site-list {margin-top: 5rem;}
.brandsite-box .site-list ul li {width: 100%; margin-bottom: 2rem;}
.brandsite-box .site-list ul li:last-child {margin-bottom: 0;}
.brandsite-box .site-list ul li .box .site-info {padding: 3rem;}
.brandsite-box .site-list ul li .box .site-info .site-name p.kor {font-size: 2.5rem;}
.brandsite-box .site-list ul li .box .site-info .site-name p.eng {font-size: 1.8rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 360,719 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:360px) and (max-width:719px) {

/* 서브 sub-visual 배경이미지 영역 */
.sub-visual {margin-top: 70px;}
.sub-topvisual {height: 30rem;}
.sub-visual01 {background-position: right -100px center; background-size: 220% 100%;} /* 배경이미지 위치 예외처리 */
.sub-visual02 {background-position: right -50px center; background-size: 180% 100%;} /* 배경이미지 위치 예외처리 */

/* 서브 하위메뉴 리스트 영역 */
.sub-gnb ul li {padding: 0 2rem;}
.sub-gnb ul li a {height: 5rem; font-size: 1.6rem;}
.sub-gnb ul li.active a:after {height: 4px;}

/* 서브 대메뉴 타이틀 및 페이지명 영역 */
.page-title .tit-txt {margin-top: 1rem;}
.page-title .tit-kor h2 span {font-size: 1.75rem;}
.page-title .tit-txt p {font-size: 5rem;}

/* 서브 레이아웃 공통 */
.sec-sub {margin-top: 8rem;} /* 높이마진값 재변경 */

/* COMPANY - s01 OVERVIEW - 내용 */
.overviewdiagram-box {padding: 8rem 0;}
.overviewdiagram-box .overview-logo {width: 22rem; margin-bottom: 5rem;}
.overviewdiagram-box ul {padding: 0 3rem;}
.overviewdiagram-box ul.pc {display: none;} /* PC용 삭제 */
.overviewdiagram-box ul li {width: 100%;}
.overviewdiagram-box ul li:nth-of-type(1):before {top: initial; right: initial; bottom: -0.8rem; left: 50%; width: 1.4rem; height: 1rem;}
.overviewdiagram-box ul li:nth-of-type(2):before {top: initial; right: initial; bottom: -0.8rem; left: 50%; width: 1.4rem; height: 1rem; transform: rotate(180deg);} /* 화살표 회전 */
.page-overviewarea {padding: 0 2rem; margin-top: 8rem;}
.overviewarea-list .areaitem {margin-bottom: 8rem;}
.overviewarea-list .areaitem .box .area-thumb {width: 100%;}
.overviewarea-list .areaitem .box .area-info {width: 100%;}
.overviewarea-list .areaitem .box .area-info .txtbox {align-content: initial; height: auto; margin-top: 3rem;}
.overviewarea-list .areaitem .box .area-info .txtbox p.kortxt {font-size: 2.1rem; line-height: 1.45;}
.overviewarea-list .areaitem .box .area-info .txtbox p.kortxt br {display: none;}
.overviewarea-list .areaitem .box .area-info .txtbox p.engtxt {font-size: 1.8rem; line-height: 1.4;}
.overviewarea-list .areaitem:nth-of-type(2) .box .area-info {order: 2;} /* 이미지 및 내용순서 변경 */
.overviewarea-list .areaitem:nth-of-type(2) .box .area-thumb {order: 1;} /* 이미지 및 내용순서 변경 */

/* COMPANY - s02 HISTORY - 내용 */
.page-history {margin-top: 4rem;}
.history-box {padding: 0 2rem;}
.history-box .history-wrap {justify-content: initial;}
.history-box .history-wrap .left-title {width: 100%;}
.history-box .history-wrap .left-title .tit-box {padding: 3rem 4rem;}
.history-box .history-wrap .left-title .tit-box .h-logo {width: 18rem;}
.history-box .history-wrap .left-title .tit-box .h-since p {font-size: 5rem;}
.history-box .history-wrap .left-title .tit-box .h-since span {font-size: 2.4rem;}
.history-box .history-wrap .right-historylist {width: 100%; margin-top: 4rem;}
.history-box .history-wrap .right-historylist .box .list-item .years {width: 100%;}
.history-box .history-wrap .right-historylist .box .list-item .years .txt {text-align: left; padding-left: 3rem;}
.history-box .history-wrap .right-historylist .box .list-item .details {width: 100%; padding-left: 0;}
.history-box .history-wrap .right-historylist .box .list-item .details ul:after {height: calc(100%);} /*라인 높이 줄이기*/
.history-box .history-wrap .right-historylist .box .list-item .details ul li {justify-content: space-between;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li span {width: 8.4rem; font-size: 1.8rem; padding-left: 3.4rem;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li .h-contxt {width: 76%;}
.history-box .history-wrap .right-historylist .box .list-item .details ul li:first-child span:after {top: 0.4rem; transform: translateY(0);}
.history-box .history-wrap .right-historylist .box .list-item .details ul li .h-contxt p {width: 100%; font-size: 1.6rem; word-break: keep-all;}
.history-box .history-wrap .right-historylist .box .list-item:last-child .details ul:after {display: block;} /*마지막년도 라인 모바일에서 다시 살리기*/

/* 서브페이지 컨텐츠 영역 02 - NOTICE, 서브페이지 컨텐츠 영역 03 - PR - 게시판 위주 */
.page-boardarea {padding: 0 2rem;}

/* 일반 리스트 게시판 그누보드 연동 css 변경 */
#bo_list .tbl_head01 thead th {font-size: 1.8rem !important; padding: 0 5px !important;}
#bo_list .tbl_head01 thead a {font-size: 1.8rem !important;}
#bo_list .tbl_head01 tbody td {font-size: 1.5rem !important; letter-spacing: -0.7px !important; padding: 8px 5px !important;}
#bo_list .tbl_head01 td {font-size: 1.75rem !important; line-height: 1.3 !important; padding: 8px 5px !important;}
#bo_list .td_datetime {width: 26% !important; font-size: 1.5rem !important; letter-spacing: -0.7px !important;}
#bo_list .tbl_head01 a {font-size: 1.65rem !important;}
#bo_list .tbl_head01 a.bo_cate_link {width: 100% !important;}

/* 더미페이지 스타일 적용 - 그누보드 스타일 변경 */
.pg_page, .pg_current {width: 32px; height: 32px; font-size: 1.4rem; line-height: 32px;}

/* 게시물 검색 스타일 적용 - 그누보드 스타일 변경 */
select#sfl {width: 100% !important; height: 44px !important; font-size: 15px; line-height: 1; margin-right: 0; margin-bottom: 1rem; background: #fff url("../images/search_arrow.jpg") 94% 52% no-repeat !important;}
input#stx.frm_input {width: 100% !important; height: 44px !important; font-size: 15px; margin-bottom: 1rem;}
input.btn_submit {width: 100% !important; height: 44px !important; font-size: 16px;}

/* 갤러리게시판 리스트 게시판 그누보드 연동 css 변경 */
#bo_gall .gall_li {margin-bottom: 4rem !important;}
#bo_gall .gall_text_href a {min-height: auto;}

/* 서브페이지 컨텐츠 영역 04 - CONTACT */
.office-info {padding: 0 2rem;}
.office-info #location .office-box .office-list {width: 100%; order: 2;} /* 사무실위치 정보 및 구글맵 위치 순서변경 */
.office-info #location .office-box .office-list ul li {padding: 2rem 2rem;}
.office-info #location .office-box .office-list ul li .box h3 {font-size: 2.2rem; word-break: keep-all;}
.office-info #location .office-box .office-list ul li .box h3:after {top: 0; width: 2.3rem; height: 2.3rem;}
.office-info #location .office-box .office-list ul li .box .address .ico {width: 3.2rem; height: 3.2rem;}
.office-info #location .office-box .office-list ul li .box .address .infotxt {width: 86%;}
.office-info #location .office-box .office-list ul li .box .address .infotxt p.kor {font-size: 1.6rem; letter-spacing: -0.08rem;}
.office-info #location .office-box .office-list ul li .box .address .infotxt p.eng {font-size: 1.45rem; letter-spacing: -0.06rem;}
.office-info #location .office-box .office-list ul li .box .callemail .left-call {padding-left: 0.2rem;}
.office-info #location .office-box .office-list ul li .box .callemail i {width: 2.6rem; height: 2.6rem;}
.office-info #location .office-box .office-list ul li .box .callemail span {font-size: 1.5rem; letter-spacing: -0.04rem; margin-left: 0.5rem;}
.office-info #location .office-box .office-map {width: 100%; height: 40rem; margin-bottom: 2rem; order: 1;} /* 사무실위치 정보 및 구글맵 위치 순서변경 */

.our-brandsite {padding: 8rem 0; margin-top: 8rem;}
.brandsite-box {padding: 0 2rem;}
.brandsite-box h3 {font-size: 3.5rem;}
.brandsite-box .site-list {margin-top: 5rem;}
.brandsite-box .site-list ul li {width: 100%; margin-bottom: 2rem;}
.brandsite-box .site-list ul li:last-child {margin-bottom: 0;}
.brandsite-box .site-list ul li .box .site-info {padding: 3rem;}
.brandsite-box .site-list ul li .box .site-info .site-name p.kor {font-size: 2.5rem;}
.brandsite-box .site-list ul li .box .site-info .site-name p.eng {font-size: 1.8rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 360,413 예외처리 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:360px) and (max-width:413px) {

/* 서브페이지 컨텐츠 영역 04 - CONTACT */
.office-info #location .office-box .office-list ul li {padding: 2rem 1rem;}
.office-info #location .office-box .office-list ul li .box .address .ico {width: 2.8rem; height: 2.8rem;}
.office-info #location .office-box .office-list ul li .box .address .infotxt p.kor {font-size: 1.5rem;}
.office-info #location .office-box .office-list ul li .box .address .infotxt p.eng {font-size: 1.35rem;}
.office-info #location .office-box .office-list ul li .box .callemail i {width: 2rem; height: 2rem;}
.office-info #location .office-box .office-list ul li .box .callemail span {font-size: 1.3rem; letter-spacing: -0.04rem; margin-left: 0.5rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 414,719 예외처리 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:414px) and (max-width:719px) {

.office-info #location .office-box .office-list ul li .box .callemail span {font-size: 1.6rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 480,559 예외처리 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:480px) and (max-width:559px) {

/* 서브 sub-visual 배경이미지 영역 */
.sub-topvisual {height: 35rem;}
.sub-visual01 {background-position: right -140px center; background-size: 220% 100%;}
.sub-visual02 {background-position: right -100px center; background-size: 180% 100%;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 560,719 예외처리 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:560px) and (max-width:719px) {

/* 서브 sub-visual 배경이미지 영역 */
.sub-topvisual {height: 35rem;}
.sub-visual01 {background-position: right -140px center; background-size: 190% 100%;}
.sub-visual02 {background-position: right -50px center; background-size: 140% 100%;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Tablet 720,767 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:720px) and (max-width:767px) {

/* 서브 sub-visual 배경이미지 영역 */
.sub-visual {margin-top: 70px;}
.sub-topvisual {height: 35rem;}

/* 서브 하위메뉴 리스트 영역 */
.sub-gnb ul li a {height: 6rem;}

/* 서브 레이아웃 공통 */
.sec-sub {margin-top: 8rem;} /* 높이마진값 재변경 */

/* 서브 대메뉴 타이틀 및 페이지명 영역 */
.page-title .tit-txt {margin-top: 1rem;}
.page-title .tit-kor h2 span {font-size: 1.85rem;}
.page-title .tit-txt p {font-size: 5.5rem;}

/* COMPANY - s01 OVERVIEW - 내용 */
.overviewdiagram-box {padding: 8rem 0;}
.overviewdiagram-box ul {padding: 0 2rem;}
.overviewdiagram-box ul.mobile {display: none;} /* Mobile용 삭제 */
.page-overviewarea {padding: 0 3rem; margin-top: 8rem;}
.overviewarea-list .areaitem {margin-bottom: 8rem;}
.overviewarea-list .areaitem .box .area-thumb {width: 100%;}
.overviewarea-list .areaitem .box .area-info {width: 100%;}
.overviewarea-list .areaitem .box .area-info .txtbox {align-content: initial; height: auto; margin-top: 3rem;}
.overviewarea-list .areaitem .box .area-info .txtbox p.kortxt br {display: none;}
.overviewarea-list .areaitem:nth-of-type(2) .box .area-info {order: 2;} /* 이미지 및 내용순서 변경 */
.overviewarea-list .areaitem:nth-of-type(2) .box .area-thumb {order: 1;} /* 이미지 및 내용순서 변경 */

/* COMPANY - s02 HISTORY - 내용 */
.page-history {margin-top: 0;}
.history-box {padding: 0 3rem;}
.history-box .history-wrap .left-title {width: 100%;}
.history-box .history-wrap .right-historylist {width: 100%; margin-top: 4rem;}
.history-box .history-wrap .right-historylist .box .list-item .years {width: 100%;}
.history-box .history-wrap .right-historylist .box .list-item .years .txt {text-align: left; padding-left: 3rem;}
.history-box .history-wrap .right-historylist .box .list-item .details {width: 100%;}
.history-box .history-wrap .right-historylist .box .list-item .details ul:after {height: calc(100%);}

/* 서브페이지 컨텐츠 영역 02 - NOTICE, 서브페이지 컨텐츠 영역 03 - PR - 게시판 위주 */
.page-boardarea {padding: 0 3rem;}
#bo_gall #gall_ul {grid-template-columns: repeat(3, 1fr); gap: 5rem 1rem;}

/* 서브페이지 컨텐츠 영역 04 - CONTACT */
.office-info {padding: 0 3rem;}
.office-info #location .office-box .office-list {width: 100%; order: 2;}
.office-info #location .office-box .office-map {width: 100%; height: 50rem; margin-bottom: 2rem; order: 1;}
.our-brandsite {padding: 8rem 0; margin-top: 8rem;}
.brandsite-box {padding: 0 3rem;}
.brandsite-box .site-list {margin-top: 5rem;}
.brandsite-box .site-list ul li {width: 100%; margin-bottom: 3rem;}
.brandsite-box .site-list ul li:last-child {margin-bottom: 0;}
.brandsite-box .site-list ul li .box .thumbnail {height: 40rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Tablet 768,1023 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:768px) and (max-width:1023px) {

/* 서브 sub-visual 배경이미지 영역 */
.sub-visual {margin-top: 70px;}
.sub-topvisual {height: 35rem;}

/* 서브 하위메뉴 리스트 영역 */
.sub-gnb ul li a {height: 6rem;}

/* 서브 레이아웃 공통 */
.sec-sub {margin-top: 8rem;} /* 높이마진값 재변경 */

/* 서브 대메뉴 타이틀 및 페이지명 영역 */
.page-title .tit-txt {margin-top: 1rem;}
.page-title .tit-kor h2 span {font-size: 1.85rem;}
.page-title .tit-txt p {font-size: 5.5rem;}

/* COMPANY - s01 OVERVIEW - 내용 */
.overviewdiagram-box {padding: 8rem 0;}
.overviewdiagram-box ul {padding: 0 2rem;}
.overviewdiagram-box ul.mobile {display: none;} /* Mobile용 삭제 */
.page-overviewarea {padding: 0 3rem; margin-top: 8rem;}
.overviewarea-list .areaitem {margin-bottom: 8rem;}
.overviewarea-list .areaitem .box .area-thumb {width: 100%;}
.overviewarea-list .areaitem .box .area-info {width: 100%;}
.overviewarea-list .areaitem .box .area-info .txtbox {align-content: initial; height: auto; margin-top: 3rem;}
.overviewarea-list .areaitem .box .area-info .txtbox p.kortxt br {display: none;}
.overviewarea-list .areaitem:nth-of-type(2) .box .area-info {order: 2;} /* 이미지 및 내용순서 변경 */
.overviewarea-list .areaitem:nth-of-type(2) .box .area-thumb {order: 1;} /* 이미지 및 내용순서 변경 */

/* COMPANY - s02 HISTORY - 내용 */
.page-history {margin-top: 0;}
.history-box {padding: 0 3rem;}
.history-box .history-wrap .left-title {width: 100%;}
.history-box .history-wrap .right-historylist {width: 100%; margin-top: 4rem;}
.history-box .history-wrap .right-historylist .box .list-item .years {width: 100%;}
.history-box .history-wrap .right-historylist .box .list-item .years .txt {text-align: left; padding-left: 3rem;}
.history-box .history-wrap .right-historylist .box .list-item .details {width: 100%;}
.history-box .history-wrap .right-historylist .box .list-item .details ul:after {height: calc(100%);}

/* 서브페이지 컨텐츠 영역 02 - NOTICE, 서브페이지 컨텐츠 영역 03 - PR - 게시판 위주 */
.page-boardarea {padding: 0 3rem;}
#bo_gall #gall_ul {grid-template-columns: repeat(3, 1fr); gap: 5rem 1rem;}

/* 서브페이지 컨텐츠 영역 04 - CONTACT */
.office-info {padding: 0 3rem;}
.office-info #location .office-box .office-list {width: 100%; order: 2;}
.office-info #location .office-box .office-map {width: 100%; height: 50rem; margin-bottom: 2rem; order: 1;}
.our-brandsite {padding: 8rem 0; margin-top: 8rem;}
.brandsite-box {padding: 0 3rem;}
.brandsite-box .site-list {margin-top: 5rem;}
.brandsite-box .site-list ul li {width: 100%; margin-bottom: 3rem;}
.brandsite-box .site-list ul li:last-child {margin-bottom: 0;}
.brandsite-box .site-list ul li .box .thumbnail {height: 40rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 PC 1024,1279 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

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

/* COMPANY - s01 OVERVIEW - 내용 */
.page-overviewarea {padding: 0 2rem;}
.overviewdiagram-box ul.mobile {display: none;} /* PC용 삭제 */

/* COMPANY - s02 HISTORY - 내용 */
.page-history {padding: 0 2rem;}
.history-box .history-wrap .right-historylist {width: 70%;}

/* 서브페이지 컨텐츠 영역 02 - NOTICE, 서브페이지 컨텐츠 영역 03 - PR - 게시판 위주 */
.page-boardarea {padding: 0 2rem;}

/* 서브페이지 컨텐츠 영역 04 - CONTACT */
.page-contact {padding: 0 2rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 PC 1280,1440 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

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

/* COMPANY - s01 OVERVIEW - 내용 */
.page-overviewarea {padding: 0 2rem;}
.overviewdiagram-box ul.mobile {display: none;} /* PC용 삭제 */

/* COMPANY - s02 HISTORY - 내용 */
.page-history {padding: 0 2rem;}

/* 서브페이지 컨텐츠 영역 02 - NOTICE, 서브페이지 컨텐츠 영역 03 - PR - 게시판 위주 */
.page-boardarea {padding: 0 2rem;}

/* 서브페이지 컨텐츠 영역 04 - CONTACT */
.page-contact {padding: 0 2rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 PC 1441,1919 예외처리 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1441px) and (max-width:1919px) {

/* COMPANY - s01 OVERVIEW - 내용 */
.overviewdiagram-box ul.mobile {display: none;} /* PC용 삭제 */

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 PC 1920 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1920px) {

/* COMPANY - s01 OVERVIEW - 내용 */
.overviewdiagram-box ul.mobile {display: none;} /* PC용 삭제 */

}