html,body{height:100%;}
body.action{overflow:hidden;height: 100%;}
*{line-height: 1.3;}
#wrap{overflow:hidden;position:relative;min-height:100%;background: #fff;}


.con-area{width:100%;max-width:1678px;margin:0 auto;}
.con-area:after{content:"";display:block;clear:both;}

#container {display: block; min-height:60vh;}

body::-webkit-scrollbar {width: 7px; box-sizing: content-box;}
body::-webkit-scrollbar-thumb {height: 30%; border-radius: 3px; background: rgba(0, 0, 0, 0.5);}
body::-webkit-scrollbar-track {padding: 0 5px; border-radius: 3px; background: #ffffff;}

/* 어도비폰트 */
.transat-300 {font-family: "transat-text",'Roboto','Noto Sans KR','Pretendard', sans-serif !important; font-weight: 300 !important; font-style: normal;}
.transat-400 {font-family: "transat-text",'Roboto','Noto Sans KR','Pretendard', sans-serif !important; font-weight: 400 !important; font-style: normal;}
.transat-500 {font-family: "transat-text",'Roboto','Noto Sans KR','Pretendard', sans-serif !important; font-weight: 500 !important; font-style: normal;}
.transat-700 {font-family: "transat-text",'Roboto','Noto Sans KR','Pretendard', sans-serif ; font-weight: 700 !important; font-style: normal;}

/*-------------------------------------------------------------------
	분류그룹 : 메인 팝업
	속성순서 : ''
	퍼블리싱 전달 후 팝업 관련 css 누락으로 인한 custom
-------------------------------------------------------------------*/
.popupwrap {display:inline-block;position:absolute;top:100px;left:300px;z-index:9999999;background:#003863;}
.main-popup{background:#ffffff;}
.popuphead{padding: 10px; background:#003863;}
.popuphead .tit{line-height: 22px; font-weight: 700; font-size: 1rem; color: #fff;}
/* .popupcontent{display: block;border-top:2px solid #ddd; border-left:2px solid #ddd; border-right:2px solid #ddd;} */
.popupcontent > img{display: block;}
.popupfoot{margin-bottom:-3px;padding:5px 0;background:#ddd;}
.popupfoot:after{display:block;content:"";clear:both;}
.popupfoot .popfleft{float:left;margin-left:20px; color: #777; line-height: 25px; font-size: 1rem;}
.popupfoot .popfleft .today{}
.popupfoot .popfleft > label{padding-left: 5px;}
.popupfoot .popfright{float:right;margin-right:20px;}
.popupfoot .popfright .btn-close{display: block; height: 25px; padding: 0 10px; border-radius: 3px; background-color: #777;}
.popupfoot .popfright .btn-close > span{ color: #fff;}
@media screen and (max-width: 1400px) {
    .popupwrap {left: 0px !important;}
}
@media screen and (max-width: 1024px) {
    .popupwrap {top: 137px !important;}
    .popupcontent {width: 100% !important; height: auto !important;}
}
@media screen and (max-width: 800px) {
    .popupwrap {top: 127px !important;}
}
@media screen and (max-width: 600px) {
    .popupwrap {top: 97px !important;}
}

/*-------------------------------------------------------------------
	분류그룹 : 공통 > 가상키보드
-------------------------------------------------------------------*/
.keyboardModal {display: block; position: absolute; top: 100%; left: 0; z-index: 15; width: 100%; padding: 45px 10px 10px; border-radius: 0 0 8px 8px; background-color: #ffffff; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.3);}
.keyboardModal .btn-close {position: absolute; top: 10px; right: 10px; width: 25px; height: 25px; background-color: transparent;}
.keyboardModal .btn-close::before,
.keyboardModal .btn-close::after {content:''; position: absolute; top: calc(50% - 1.5px); left: 0; width: 100%; height: 3px; border-radius: 3px; background-color: #000000;}
.keyboardModal .btn-close::before {transform: rotate(45deg);}
.keyboardModal .btn-close::after {transform: rotate(-45deg);}
.keyboardModal .keyboardzone {display: block; position: relative; width: 100%; height: 250px; border-radius: 8px;}
.keyboardModal .keyboardzone .keyboardzoneDiv {display: block; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 3px; border: 1px solid #e9e9e9; border-radius: 3px; font-size: 25px; background-color: #d9d9d9;}
.keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable {width : 100%; height: 20%; border: 0;}
.keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td {padding: 3px; vertical-align:middle; white-space:pre; font-family: 'Pretendard','Noto Sans KR', sans-serif;}
.keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td .keyBtn {display: block; width: 100%; height: 100%; border: 0; border-radius: 3px; background-color: #ffffff; font-weight: 500; font-size: 14px; transition: background 0.2s, color 0.2s; cursor: pointer;}
.keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td .keyBtn:focus,
.keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td .keyBtn:hover {background-color: #3D55A5; color: #ffffff;}
.keyboardModal.action .keyboardzone .keyboardzoneDiv {visibility: hidden !important;}

/*-------------------------------------------------------------------
	@interaction
	가상 키보드 안 보일 떄도 클릭되는 오류로 인한 custom
-------------------------------------------------------------------*/
.keyboardModal {opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; display: none;}
.keyboardModal.on {opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s 0s; display: block;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 425px) {
    .keyboardModal {padding: 30px 0 0;}
    .keyboardModal .btn-close {top: 5px; right: 5px; width: 20px; height: 20px;}
    .keyboardModal .keyboardzone {height: 180px; border-radius: 0 0 3px 3px;}
    .keyboardModal .keyboardzone .keyboardzoneDiv {padding: 1px;}
    .keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td {padding: 1px;}
    .keyboardModal .keyboardzone .keyboardzoneDiv .keylineTable > td .keyBtn {font-size: 12px;}
}


/*-------------------------------------------------------------------
	분류그룹 : header
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#header {position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 80px;}
#header .header-wrap {display:flex; width: 100%; height: 100%; padding: 0 50px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
/* #header .header-wrap::after {content:''; display: block; visibility: hidden; position:absolute; top:100%; left:0; z-index: 98; width:100%; height:0; border-top:1px solid #707 070; background-color:#ffffff;} */
#header .header-wrap .logo {display: block; flex-shrink: 0;}
#header .header-wrap .logo > .img-box {display: block;  overflow: hidden; height:30px;}
#header .header-wrap .logo > .img-box > img {display: block; max-width:none; height:60px; transform: translateY(0);}
#header .header-wrap .menu-lists {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width:100%; height:100%; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; flex-grow:1; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}

/*-------------------------------------------------------------------
	@interaction 
-------------------------------------------------------------------*/
#header.on {background-color:#ffffff;}
#header .header-wrap::after {transition:height 0.3s;}
#header.active .header-wrap::after {visibility: visible; height:60px;}
#header .header-wrap .logo .img-box > img {transition:transform 0.3s;}
#header.on .header-wrap .logo .img-box > img,
#header:hover .header-wrap .logo .img-box > img,
#header:focus .header-wrap .logo .img-box > img {transform: translateY(-50%);}

#header:hover,
#header:focus {background-color:#ffffff;}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1024px) {
	#header .header-wrap {padding:0 20px;}
}
@media screen and (max-width:800px) {
	#header {height:60px;}
	#header .header-wrap {padding:0 20px;}
	#header .header-wrap .logo > .img-box {height:24px;}
	#header .header-wrap .logo > .img-box > img {height:40px;}
	#header .header-wrap .menu-lists {flex-grow:0;}
}

/*-------------------------------------------------------------------
	분류그룹 : header > gnb
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#header .header-wrap .menu-lists .gnb {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height:100%; margin-right:40px; flex-grow:1; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
#header .header-wrap .menu-lists .gnb .list-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position:relative; height:100%; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
#header .header-wrap .menu-lists .gnb .list-wrap > li {z-index: 99; width:20%; height:100%; margin-right: 10px;}
html:lang(en) #header .header-wrap .menu-lists .gnb .list-wrap > li {width:25%;}
#header .header-wrap .menu-lists .gnb .list-wrap > li:last-child {margin-right: 0;}
#header .header-wrap .menu-lists .gnb .list-wrap > li .menu-01 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;  position:relative; height:100%; padding:0 15px; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;  -moz-box-justify-content: center;-ms-flex-pack: center;justify-content: center; justify-content: center;}
#header .header-wrap .menu-lists .gnb .list-wrap > li .menu-01 .txt {font-weight:500; font-size:1.125rem; color:#ffffff;}

/* #header .header-wrap .menu-lists .gnb .list-wrap > li .menu-02 {display: flex; visibility: hidden; position:absolute; top:80%; left:50%; z-index: 999; height:100%; align-items: center; white-space: nowrap; transform: translateX(-50%);} */
/* #header .header-wrap .menu-lists .gnb .list-wrap > li:nth-child(1) .menu-02 {left:0;} */
/* #header .header-wrap .menu-lists .gnb .list-wrap > li:nth-child(4) .menu-02, */
/* #header .header-wrap .menu-lists .gnb .list-wrap > li:nth-child(5) .menu-02 {left:auto; right:0; transform: translateX(0);} */
/* #header .header-wrap .menu-lists .gnb .list-wrap > li .menu-02 > li {display: block; position:relative; height:100%;} */
/* #header .header-wrap .menu-lists .gnb .list-wrap > li .menu-02 > li > a {display: block; height:100%; font-weight:500; font-size:1.125rem; color:#6A6A6A;} */

/* #header .header-wrap .menu-lists .gnb .list-wrap > li .menu-02 > li > a {display: block; height:100%; padding:20px 10px;} */

/*-------------------------------------------------------------------
	@interaction 
-------------------------------------------------------------------*/


#header.on .header-wrap .menu-lists .gnb .list-wrap > li .menu-01 .txt, 
#header:hover .header-wrap .menu-lists .gnb .list-wrap > li .menu-01 .txt,
#header:focus .header-wrap .menu-lists .gnb .list-wrap > li .menu-01 .txt {color:#707070;}

#header .header-wrap .menu-lists .gnb .list-wrap > li .menu-01 .txt {transition: color 0.3s;}
/* #header .header-wrap .menu-lists .gnb .list-wrap > li .menu-01:focus .txt, */
#header .header-wrap .menu-lists .gnb .list-wrap > li .menu-01:hover .txt {color:#000000;}  

/* #header .header-wrap .menu-lists .gnb .list-wrap > li .menu-02 {transition: top 0.4s;} */
/* #header .header-wrap .menu-lists .gnb .list-wrap > li.active .menu-02 {visibility: visible; top:100%;} */
/* #header .header-wrap .menu-lists .gnb .list-wrap > li.active .menu-01::before {content:''; position:absolute; bottom:-1px; left:50%; z-index: 80;  border-top:10px solid transparent;  border-left:10px solid transparent; border-right:10px solid transparent;border-bottom:12px solid #707070;transform: translateX(-50%);} */
/* #header .header-wrap .menu-lists .gnb .list-wrap > li.active .menu-01::after {content:''; position:absolute; bottom:-1px; left:50%; z-index: 80;  border-top:8px solid transparent;  border-left:8px solid transparent; border-right:8px solid transparent;border-bottom:10px solid #ffffff;transform: translateX(-50%);} */
/* #header .header-wrap .menu-lists .gnb .list-wrap > li .menu-02 > li > a:focus, */
/* #header .header-wrap .menu-lists .gnb .list-wrap > li .menu-02 > li > a:hover {font-weight:600; color:#000000;} */
/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
	#header .header-wrap .menu-lists .gnb {display: none;}
}

/*-------------------------------------------------------------------
	분류그룹 : header > sitemap     
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/

#header .header-wrap .menu-lists .site-map {display: block; flex-shrink: 0;}
#header .header-wrap .menu-lists .site-map .btn-site-map {display: block; width:24px; height:24px; background-color:transparent;}
#header .header-wrap .menu-lists .site-map .btn-site-map .ln {display: block; width:100%; height:2px; background-color:#ffffff;}
#header .header-wrap .menu-lists .site-map .btn-site-map .ln.l1 {margin-bottom:5px;}


#menu-modal {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100%; transition: visibility 0s 0.3s;}
#menu-modal.active {visibility: visible; transition: visibility 0s 0s;}
#menu-modal .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); transition: background 0.3s;}
#menu-modal.active .bg {background-color: rgba(0,0,0,0.5);}

#menu-modal #sitemap {overflow-y: auto; position:absolute; top:0; right:-100%; z-index: 300; width:580px; height:100%; background-color:#ffffff;}
#menu-modal #sitemap .content-box {padding:36px 75px;}
#menu-modal #sitemap .content-box .con-head {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-bottom:20px; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#menu-modal #sitemap .content-box .con-head .lang {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-right:20px; border:1px solid #707070; text-align: center;}
#menu-modal #sitemap .content-box .con-head .btn-lang {display: block; min-width:50px; padding:5px 10px; background-color:#ffffff;}
#menu-modal #sitemap .content-box .con-head .btn-lang.lang-ko {border-right:1px solid #707070;}
#menu-modal #sitemap .content-box .con-head .btn-lang.on {background-color:#707070; color:#ffffff;}
#menu-modal #sitemap .content-box .con-head .btn-close {display: block; width:20px; height:20px; background-color: transparent;}
#menu-modal #sitemap .content-box .con-head .btn-close .ln {display: block; position:relative; width:20px; height:20px;} 
#menu-modal #sitemap .content-box .con-head .btn-close .ln::before {content:''; display: block; position:absolute; top:50%; left:50%; width:100%; height:2px; background-color:#707070; transform: translate(-50%,-50%) rotate(45deg) ;}
#menu-modal #sitemap .content-box .con-head .btn-close .ln::after {content:''; display: block; position:absolute; top:50%; left:50%; width:100%; height:2px; background-color:#707070; transform: translate(-50%,-50%) rotate(-45deg);}

#menu-modal #sitemap .content-box .con-body {display: block;}
#menu-modal #sitemap .content-box .con-body .sitemap-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li {width:50%; padding:0 10px 40px;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li:first-child {width:100%;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-01 {display: block; margin-bottom:13px; font-weight:600; font-size:1.125rem; color:#6A6A6A;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-02 {display: block; color:#6A6A6A;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-02 > li {margin-bottom:10px;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-02 > li > .menu-item {display: block; margin-bottom:5px;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-02 > li > .menu-item > span {display: block; position:relative;word-break: break-all;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-02 > li:last-child {margin-bottom:0;}

#menu-modal #sitemap .content-box .con-body .search-area {display: -webkit-box; display: -moz-box; display: -ms-flexbox;display: flex; margin-top:30px; border:1px solid #707070;}
#menu-modal #sitemap .content-box .con-body .search-area .search-box {padding:5px 10px; border:1px solid transparent; outline: none; flex-grow:1;}
#menu-modal #sitemap .content-box .con-body .search-area .btn-srch {display: block; width:50px; height:50px; background-color:transparent; background-image:url('../images/common/i_search.svg'); background-repeat: no-repeat; background-position:center; background-size:20px; flex-shrink: 0;}

#menu-modal #sitemap .content-box .con-body .sitemap-footer {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding-top:60px; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
#menu-modal #sitemap .content-box .con-body .sitemap-footer .info {display: block; flex-grow:1;}
#menu-modal #sitemap .content-box .con-body .sitemap-footer .info-txt {display: block; margin-bottom:2px; font-weight:500; font-size:0.875rem; color:#4A4A4A; font-style: normal;}
#menu-modal #sitemap .content-box .con-body .sitemap-footer .info-txt.email {margin-bottom:0;}
#menu-modal #sitemap .content-box .con-body .sitemap-footer .sns {display: block; width:30px; height:30px; background-image:url('../images/main/Insta.svg'); background-repeat: no-repeat; background-size:cover; background-position:center;}
/*-------------------------------------------------------------------
	@interaction  
-------------------------------------------------------------------*/
#header.on .header-wrap .menu-lists .site-map .btn-site-map .ln,
#header:hover .header-wrap .menu-lists .site-map .btn-site-map .ln,
#header:focus .header-wrap .menu-lists .site-map .btn-site-map .ln {background-color:#707070;}

#menu-modal #sitemap {transition: background 0.3s, right 0.3s;}
#menu-modal.active #sitemap {right:0;}

#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-01 {transition:color 0.3s;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-01:focus,
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-01:hover {color:#000000;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-02 > li > .menu-item > span {transition:color 0.3s;}
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-02 > li > .menu-item:focus > span,
#menu-modal #sitemap .content-box .con-body .sitemap-list > li .menu-02 > li > .menu-item:hover > span {font-weight:600; color:#000000;}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:600px) {
	#menu-modal #sitemap {width:100%;}
	#menu-modal #sitemap .content-box {padding:30px 40px;}
	#menu-modal #sitemap .content-box .con-body .search-area {margin-top:10px;}
	#menu-modal #sitemap .content-box .con-body .sitemap-footer {padding-top:30px;}
	#menu-modal #sitemap .content-box .con-body .sitemap-list > li {padding:0 10px 25px;}
}
@media screen and (max-width:375px) {
	#menu-modal #sitemap .content-box {padding:30px 15px;}
	#menu-modal #sitemap .content-box .con-body .sitemap-list > li {padding:0 15px 25px;}
	#menu-modal #sitemap .content-box .con-body .search-area .btn-srch {width:40px; height:40px; background-size:16px;}
	#menu-modal #sitemap .content-box .con-body .search-area .search-box {padding:5px;}
}

/*-------------------------------------------------------------------
	분류그룹 : footer
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#footer {display: block; width: 100%; min-height: 210px; border-top:1px solid #ccc; background-color: #ffffff;}
#footer .main-con {width:100%; max-width:100%; height:210px; padding:0 50px; text-align: center;}
#footer .footer-wrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; position:relative; height:100%; justify-content: space-between; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#footer .footer-wrap .foot-logo {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;}
#footer .footer-wrap .foot-logo.kaist {margin-right:10px;}
#footer .footer-wrap .foot-logo .logo {display: inline-block; width:100%;}
#footer .footer-wrap .copyright {position:absolute; top:50%; left:50%; color:#707070; transform: translate(-50%,-50%);}
#footer .footer-wrap .foot-info {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}
#footer .footer-wrap .foot-info .info {display: block; padding-right:20px; text-align: right;}
#footer .footer-wrap .foot-info .info .info-txt {display: block; font-style:normal;font-weight:400;color:#4a4a4a;}
#footer .footer-wrap .foot-info .info .info-box {display: -webkit-box; display: -moz-box; display: -ms-flexbox;display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; color:#4a4a4a;}
#footer .footer-wrap .foot-info .info .info-box .info-txt {padding:0 10px; color:#4a4a4a;}
#footer .footer-wrap .foot-info .info .info-box .tel {position:relative; padding-left:0;}
#footer .footer-wrap .foot-info .info .info-box .tel::after {content:''; position:absolute; top:50%; right:0; width:2px; height:13px; background-color:#707070; transform: translateY(-50%);}
#footer .footer-wrap .foot-info .info .info-box .email {padding-right:0;}
#footer .footer-wrap .foot-info .sns {display: block; width:30px; height:30px; background-image:url('../images/common/Instagram.svg'); background-repeat: no-repeat; background-size:cover; background-position:center;}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1670px) {
	#footer .main-con {padding:0 50px;}
}
@media screen and (max-width:1300px) {
	#footer .footer-wrap .copyright {position:static; margin-top:5px; transform: translate(0,0);}
}
@media screen and (max-width:1024px) {
	#footer .main-con {padding:0 20px;}
	#container #footer .main-con {padding:0 20px;}
}
@media screen and (max-width: 750px){
	#footer .footer-wrap {display: block; padding:25px 0;}
	#footer .footer-wrap .foot-info {padding-left:15px;  -webkit-box-pack: start; -moz-box-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;}
	#footer .footer-wrap .foot-info .info {text-align: left;}
	#footer .footer-wrap .foot-info .sns {position:absolute; top:50%; right:0; transform: translateY(-50%);}
	#footer .footer-wrap .copyright {margin-top:10px;}
}
@media screen and (max-width: 475px){
	#footer .footer-wrap .foot-logo > a {display:block; text-align:left; max-width:76px;}
	#footer .footer-wrap .foot-info {padding-left:0;}
	#footer .footer-wrap .foot-info .info .info-box {display: block;}
	#footer .footer-wrap .foot-info .info .info-box .tel::after {display: none;}
	#footer .footer-wrap .foot-info .info .info-box .info-txt {padding:0;}
	#footer .footer-wrap .foot-info .sns {top:50px;}
}


/*-------------------------------------------------------------------
	분류그룹 : load more button
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/

#container .btn-load {display: block; overflow: hidden; position:relative; z-index: 2; margin:0 auto; width:200px; height:50px; border:1px solid #707070; background-color:#ffffff; }
#container .btn-load::before {content:''; position:absolute; top:0; left:0; z-index: 1; width:0%; height:100%; background-color:#000000;}
#container .btn-load > span {position:relative; z-index: 100; color:#4A4A4A; letter-spacing:2px;}

/*-------------------------------------------------------------------
	@interaction 
-------------------------------------------------------------------*/
#container .btn-load::before {transition: width 0.3s;}
#container .btn-load > span {transition: color 0.3s;}
#container .btn-load:hover::before,
#container .btn-load:focus::before {width:100%;}
#container .btn-load:hover > span,
#container .btn-load:focus > span {color:#ffffff;}


/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/

@media screen and (max-width:375px) {
	#container .btn-load {width:100%;}
	#container .sc-04 .con-body .highlight-list > li {padding:0 0 60px;}
}


/*-------------------------------------------------------------------
	분류그룹 : header > 통합검색 view     
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container .search-box {display: block; margin-bottom:70px;}
#container .search-box .con-area {overflow-x: unset; max-width:1500px;}
#container .search-box .srch-bar {display: block;  margin:0 auto; margin-bottom:100px; max-width:700px; -moz-box-justify-content: center;-ms-flex-pack: center;justify-content: center; justify-content: center;}
#container .search-box .srch-bar .cell {display: block; position:relative;}
#container .search-box .srch-bar .cell .srch-txt {width:100%; min-width:600px; padding:10px 35px 15px 10px; border:0; border-bottom:4px solid #333333; outline: none; font-size:1rem;}
#container .search-box .srch-bar .cell .btn-submit {position:absolute; top:50%; right:5px; width:24px; height:24px; background-color:transparent; background-image:url('../images/common/i_search.svg'); background-repeat: no-repeat; background-size:cover; color:#333; transform: translateY(-50%);}
#container .search-box .srch-tit {display:block; padding-right:15px; background-color:#ffffff; font-weight:600; font-size: 1.5rem; color:#333333;}

#container .search-box .total-srch {display: block; margin-top:10px;}
#container .search-box .total-srch .srch-list {display: block;}
#container .search-box .total-srch .srch-list > li {padding:30px; border-top:1px solid #dfdfdf;}
#container .search-box .total-srch .srch-list > li:last-child {border-bottom:1px solid #dfdfdf;}
#container .search-box .total-srch .srch-list > li .tit {display: block; margin-bottom:5px; font-weight:600; font-size:1.625rem; color:#4A4A4A;}
#container .search-box .total-srch .srch-list > li .snb-wrap {display: block; margin-bottom:15px; font-weight:400; font-size:0.875rem; color:#707070;}
#container .search-box .total-srch .srch-list > li p { word-break:break-all;}
#container .search-box .total-srch .srch-list > li .snb-wrap > .snb {display: inline-block;  position:relative; padding-right:10px;}
#container .search-box .total-srch .srch-list > li .snb-wrap > .snb::before {content:''; position:absolute; top:50%; right:0; width:5px; height:5px; border-top:1px solid #707070;  border-right:1px solid #707070; transform: translateY(-50%) rotate(45deg);}
#container .search-box .total-srch .srch-list > li .snb-wrap > .snb:last-child {padding-right:0;}
#container .search-box .total-srch .srch-list > li .snb-wrap > .snb:last-child::before {display: none;}
#container .search-box .total-srch .srch-list > li .txt {display: block; font-weight:500; font-size:1rem; color:#707070;}
#container .search-box .total-srch .srch-list > li .txt .highlight {font-weight:700; color:#333;}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:800px) {
	#container .search-box .srch-bar {min-width:100%;}
	#container .search-box .srch-bar .cell .srch-txt {min-width:100%;}
}
@media screen and (max-width:600px) {
	#container .search-box .srch-bar {margin-bottom:70px;}
	#container .search-box .total-srch .srch-list > li {padding:20px 15px;}
	#container .search-box .total-srch .srch-list > li .tit {font-size:1.5rem;}
}
@media screen and (max-width:475px) {
	#container .search-box .total-srch .srch-list > li {padding:20px 5px;}	
}