@charset "utf-8";
@import url('//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');
@import url('//fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@100;200;400;500;600;700&display=swap');
@import url('//cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');
@import url('aos.css');
@import url('swiper.min.css');
@import url('fullpage.css');

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 400;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype');
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 700;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 300;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.ttf') format('truetype');
}

@font-face{
 font-family:'Godo';
 font-style:normal;
 font-weight:400;
 src:url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff2') format('woff2'),
     url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff') format('woff');
}
@font-face{
 font-family:'Godo';
 font-style:normal;
 font-weight:700;
 src:url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff2') format('woff2'),
     url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff') format('woff');
}
/**************************************************************************************************************
	공통
**************************************************************************************************************/
.m0 { margin:0  !important }
.mb0 { margin-bottom:0 !important }
.mb2 { margin-bottom:2px !important }
.mb4 { margin-bottom:4px !important }
.mb5 { margin-bottom:5px !important }
.mb6 { margin-bottom:6px !important }
.mb10 { margin-bottom:10px !important }
.mb15 { margin-bottom:15px !important }
.mb20 { margin-bottom:20px !important }
.mb25 { margin-bottom:25px !important }
.mb30 { margin-bottom:30px !important }
.mb35 { margin-bottom:35px !important }
.mb40 { margin-bottom:40px !important }
.mb45 { margin-bottom:45px !important }
.mb50 { margin-bottom:50px !important }
.mb55 { margin-bottom:55px !important }
.mb60 { margin-bottom:60px !important }
.mb70 { margin-bottom:70px !important }
.mb80 { margin-bottom:80px !important }
.mb90 { margin-bottom:90px !important }
.mb100 { margin-bottom:100px !important }
.mb110 { margin-bottom:110px !important }
.pd0 { padding:0 !important }
.mbr10 { margin-right:10px }
.pdl50 { padding-left:50px !important }
.pdtop90 { padding-top:90px }
.none-bor { border:0 !important }
.text-center { text-align:center !important }
.text-left { text-align:left !important }
.text-right { text-align:right !important }
.f12 { font-size:12px !important; line-height: 1.4em; }
.f16 { font-size:16px !important; line-height: 1.4em; }
.f17 { font-size:17px !important; line-height: 1.4em; }
.f18 { font-size:18px !important; line-height: 1.4em; }
.f19 { font-size:19px !important; line-height: 1.4em; }
.f20 { font-size:20px !important; line-height: 1.4em; }
.f24 { font-size:24px !important; line-height: 1.4em; }
.f25 { font-size:25px !important; line-height: 1.4em; }
.f29 { font-size:29px !important; line-height: 1.4em; }
.f31 { font-size:31px !important; line-height: 1.4em; }
.f34 { font-size:34px !important; line-height: 1.4em; }

.lh34 { line-height: 34px !important; }
.lh44 { line-height: 44px !important; }
.clear:after { display: block; content: ''; clear: both; }
.fl { float:left; }
.fr { float:right; }
/*hr{display:none;}*/

/***********************************************************************************
	Common
************************************************************************************/

html,body,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,em,font,img,ins,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,ul,ol,li,dl,dt,dd,table,caption,tbody,tfoot,thead,tr,th,td,fieldset,fo7m,label,legend,input,button,textarea,select{margin:0;padding:0}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;margin:0;padding:0}
legend{display:block;overflow:hidden;position:absolute;width:1px;height:1px;font-size:1px;line-height:0;text-indent:-999em;white-space:nowrap; }
fieldset,img,table,caption,tbody,tfoot,thead,tr,th,td,button{border:0 none}
img{vertical-align:middle}
body li{*vertical-align:top}
ul li{list-style:none; padding:0; margin:0;}
table{border-collapse:collapse}
caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
button{overflow:visible;border:0 none;cursor:pointer}
button::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner {padding: 0;border: 0 none}
a { text-decoration:none; color:#222;  }
address,
em { font-style:normal }
body,input,select,textarea,button,h1,h2,h3,h4,h5,h6 { font-family:'Noto Sans KR', sans-serif; font-size:13px; color: #000;}
body,textarea,input,select { font-family:'Noto Sans KR', sans-serif; font-size:13px; color: #222; text-decoration: none; } 
textarea,.inp,select { border:0; outline:none; border-radius:0; resize:none; box-shadow:none; -webkit-appearance:none; appearance:none; font-weight: normal;}
a:hover { text-decoration: none;}
body { -webkit-text-size-adjust: none; background:none; }
form { padding: 0; margin: 0; }
* {box-sizing: border-box; -webkit-box-sizing:border-box;}
ul:after { display: block; content: ''; clear: both; }
::-ms-clear { display: none;}
select::-ms-expand { display:none; }
button{outline:none;background:none;}
/* Form */
.select { height: 39px; border: 1px solid #e2e2e2; padding:0 30px 0 10px; font-size:17px; color: #222; background: #fff url(../img/common/bu_select.png) no-repeat 90% 50%;}

/* Button */
.btn { display: inline-block; vertical-align: middle; padding:0 50px; height: 50px; line-height: 48px; text-align: center; border: 1px solid #000; font-size:20px; color: #000; border-radius:3px; }
.btn.btn-blue { background: #000; color: #fff; }

.select { vertical-align:middle; padding:0 35px 0 15px; height:48px; background:#f8f8f8 url(../img/common/bu_select.png) no-repeat 100% 50%; border:1px solid #ddd; font-size:17px; color:#444; }
.inp { vertical-align:middle; padding:0 0 0 15px; height:48px; background:#f8f8f8; border:1px solid #ddd; font-size:17px; color:#444; }
#wr_content { padding:15px 10px; height:300px; background:#f8f8f8; border:1px solid #ddd; font-size:17px; line-height:1.6; color:#444; border-radius:0;box-shadow:none; }
.w100 { width:100%; }
.btn-type0 { display:inline-block; vertical-align:middle; border:0; width:211px; height:60px; line-height:59px; background:#10514b url(../img/common/bg_ico_button.png) no-repeat 0 50%; background-size:auto 60px;  font-size:20px; color:#fff; }
.btn-type2 { display:inline-block; vertical-align:middle; border:0; width:211px; height:60px; line-height:59px; background:#aaaaaa; font-size:20px; color:#fff; }
.btn-type1 { display:inline-block; vertical-align:middle; border:0; padding:0 40px; height:48px; line-height:48px; background:#10514b;  font-size:17px; color:#fff; }

::-webkit-input-placeholder { color: #aaa;}
:-moz-placeholder { color: #aaa;}
:-ms-input-placeholder {  color: #aaa;}
:-moz-placeholder {  color: #aaa;}

a,a:active,a:visited { text-decoration:none ; }
p,div { word-break:keep-all; }
img { max-width:100%; height:auto;}



/*********************************************************************************************************************************************************************
	Common
******************************************************************************************** *************************************************************************/
.inner  {max-width:1330px; padding:0 15px; margin: 0 auto;}
#header .right .m-menu{display:none;}
.m-menu i{font-size:25px;color:#a1a3a6;}
/*
#container{max-width:1330px;margin:0 auto;}
*/
#header { height: 95px; position:relative;z-index:10;background:#fff}
#header.fixed{position:fixed;left:0;top:0;z-index:100;width:100%;background:#fff;box-shadow:0 5px 10px rgba(0,0,0,.1);animation:down .3s}
@keyframes down{
	from{transform:translateY(-100px)}
	to{transform:translateY(0)}
}
#header .inner { position: relative;}
#header h1 { float:left;height:100%;padding-top:42px;padding-left:7px;}
#header h1 a{position:relative;width:100%:}
#header h1 img{height:30px;}
#header h1 img:nth-child(2){position:absolute;left:-7px;top:-30px;height:35px;animation:rise 2s;}
@keyframes rise{
	from{opacity:0;transform:translate(0 ,20px)}
	to{opacity:1;transform:translate(0 ,0)}
}
#header nav { float:left; padding: 30px 0 0 120px; }
#header nav a { margin-right:62px; position: relative;font-size:21px;font-weight:700;display:inline-block;}
/*#header nav a:last-child{color:#fea724;display:none;}*/
#header nav a:before { content: ''; position: absolute;left:50%; right:0; bottom:-4px; height: 3px; background: #fab838; opacity:0; transition: all 0.3s ease;width:0;transform:translateX(-50%)}
#header nav a:hover:before{ opacity:1;width:100%; }
#header .right{ float:right; padding-top:24px; display:flex;align-items:center;position:relative;}
#header .right > div { display: inline-block; vertical-align: middle; }
#header .right .srch{position:relative;}
#header .right .srch a{position:absolute;right:0;top:5px}
#header .right .srch form{display:flex;align-items:center;}
#header .right .srch .input-srch { width:180px; height: 44px; border: 0; background: none; outline: none;font-size:16px;border-bottom:1px solid #ddd;padding-right:35px}
#header .right .srch .btn-srch { display: inline-block; vertical-align: middle; font-size:25px; color: #a1a3a6;  transition: all 0.5s ease; background: none; outline: none; }
#header .right .srch .btn-srch:hover { color: #222; }
#header .right .sns { margin-left: 5px; }
#header .right .sns a { display: inline-block; vertical-align: middle; font-size:25px;  margin-left:15px; background-repeat: no-repeat; color: #a1a3a6; transition: all 0.5s ease; }
#header .right .sns a:hover { color: #222; }

/*
#header .right .sns a.s1 { background-image:url(../img/common/ico_sns1.png);}
#header .right .sns a.s2 { background-image:url(../img/common/ico_sns2.png);}
#header .right .sns a.s3 { background-image:url(../img/common/ico_sns3.png);}
*/

.section3 .inner, .section4 .inner , .section5 .inner{position:relative;}

.section3 .swiper-button-prev , .section4 .swiper-button-prev , .section5 .swiper-button-prev{background:url('../img/common/move_btn.png') no-repeat;width:90px;height:14px;transform:rotate(180deg);}
.section3 .swiper-button-next , .section4 .swiper-button-next , .section5 .swiper-button-next{background:url('../img/common/move_btn.png') no-repeat;width:90px;height:14px;}

.section3 .swiper-button-prev{top:50px;left:15px;}
.section3 .swiper-button-next{top:50px;right:15px}


.section4 .swiper-button-prev{bottom:30px;top:unset;left:0;}
.section4 .swiper-button-next{bottom:30px;top:unset;right:unset;left:115px}

.section5 .swiper-button-prev{top:-20px;left:calc(100% - 215px)}
.section5 .swiper-button-next{top:-20px;right:15px}


/*********************************************************************************************************************************************************************
	Main
*********************************************************************************************************************************************************************/
body { overflow-x: hidden; }
.hidden { overflow: hidden; } /* 애니메이션 하단 잘리는 효과 적용 */
.main-visual .swiper-container  { height: 570px; }
.main-visual { height: 570px; margin-bottom: 75px; }

.main-visual .swiper-slide { height: 570px; background: url(../img/main/visual1.jpg) no-repeat  50% 50%; background-size:cover; }
.main-visual .inner { position: relative; max-width:1300px; height: 570px; }
.main-visual .txt-wrap { position: absolute; right:0; top:0; width:540px; height: 570px; background: rgba(0,0,0,0.7); padding:0 90px 0 70px; display: flex; align-items: center; }
.main-visual .txt-box { color: #fff;  }
.main-visual .txt-box .t1 { font-family:'Noto Serif KR'; font-size:13px; font-weight: 700;letter-spacing: 1px; }
.main-visual .txt-box .t2  {font-size:40px; font-weight: 500; margin: 15px 0; line-height: 1.3; max-height:110px;overflow:hidden;}
.main-visual .txt-box .t3 { font-size:16px; line-height: 1.5; font-weight: 200; margin-bottom: 55px;max-height:120px;overflow:hidden;}
.main-visual .txt-box .more a { display: inline-block; vertical-align: middle; font-size:16px; color: #fff; padding-bottom: 4px; position: relative; }
.main-visual .txt-box .more a:before { content: ''; position: absolute; left: 0; right:0; bottom:0; height: 1px; background: #fff; }
	
.main-h2 { font-size:35px; color: #222222; font-weight: 700; margin-bottom: 5px; }
.main-desc2 { font-size:14px; color: #a1a3a6; margin-bottom: 30px; }
.head .btn-more { display: none; }
[data-line-cut="2"]{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;word-break: break-all;text-overflow: ellipsis;-webkit-line-clamp: 2;}
[data-line-cut="3"]{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;word-break: break-all;text-overflow: ellipsis;-webkit-line-clamp: 3;}
[data-line-cut="5"]{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;word-break: break-all;text-overflow: ellipsis;-webkit-line-clamp: 5;}
.main-book { padding-bottom: 80px; }
.main-book .head { position: relative;}
.main-book .body { overflow: hidden; }
.main-book .body a:hover h3:before , .main-life ul li a:hover .t2:before{content:'';background:#ffd369;width:100%;height:10px;display:inline-block;position:absolute;left:0;top:24px;}

.main-book .body .left { float:left; width:760px;}
.main-book .body .right { float:right; width:500px;}
.main-book .body .h3  {font-size:25px; line-height: 1.4; color: #222; font-weight: 500;position:relative;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.main-book .body .h3 span{position:relative;}
.main-book .body dl dt { font-size:18px; font-weight: 200; color: #222; line-height: 1.3; margin:10px 0 10px; }
.main-book .body dl dd { font-size:15px; line-height: 1.4; color: #a1a3a6;max-height:40px;overflow:hidden;}
.main-book .body .left a,
.main-book .body .right .article { display: flex; align-items: center; }
.main-book .body .right dl dd{overflow:hidden;max-height:42px;}
.main-book .body .left a{flex-direction:column;}
.main-book .body .left .info{margin-top:20px;width:100%;}
.main-book .body .right .article + .article { margin-top:21px;}
.main-book .body .thum { flex: 0 0 auto; overflow: hidden; width:100%;height:410px;}
.main-book .body .right .thum{width:110px;height:170px;background:#ddd}
.main-book .body .right .info{margin-left:30px;width:calc(100% - 155px)}
.main-book .body .thum img { transition: all 0.3s ease;}
.main-book .body a:hover .thum img { transform: scale(1.1); }
.main-book .swiper-pagination{bottom:150px}
.main-book .swiper-pagination-bullet{opacity:1;}

.main-life { padding: 70px 0 30px; background: #f4f4f4; }
.main-life .head { position: relative;}
.main-life ul:after { display: none; content: ''; clear: both; }
.main-life ul {display:flex;flex-wrap:wrap;}
.main-life ul li {width:410px; padding:0 0 50px;margin-right:35px;}
.main-life ul li:last-child{margin-right:0;}
.main-life ul li:nth-child(3n) { margin-right: 0; }

.main-life ul li a { display: block; }
.main-life ul li a .t1 { font-size:18px; margin:20px 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-life ul li a .t2 { font-size:24px; line-height: 35px; max-height: 70px; overflow: hidden; font-weight: 500; margin-bottom: 15px; letter-spacing: -1px; position:relative;display:inline-block;}
.main-life ul li a .t2 span{position:relative;display:inline-block;max-width:410px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.main-life ul li a .t2 small { font-size:15px; font-weight: 300; }
.main-life ul li a .t3 { font-size:15px; line-height: 25px; height: 75px; overflow: hidden; color: #8d9096; }
.main-life ul li a .img { overflow: hidden; height:270px;display:flex;align-items:center;justify-content:center;background:#666}
.main-life ul li a .img img {  transition: all 0.3s ease;width:100%;}
.main-life ul li a:hover .img img { transform: scale(1.1); }

.main-culture { padding:70px 0; }
.main-culture .head { position: relative;}
.main-culture ul:after {display: none; content: ''; clear: both; }
.main-culture ul {display:flex;justify-content:space-between;}
.main-culture ul li {width:420px;height:420px;overflow:hidden;}
.main-culture ul li a { display: block; position: relative; color: #fff;height:100%;width:100%;overflow:hidden; }
.main-culture ul li a .img {  position: relative;height:420px;overflow:hidden;text-align:center;}
.main-culture ul li a .img img {width:100%;}
.main-culture ul li a .img:before { content: ''; position: absolute;left: 0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.4);}
.main-culture ul li a .img .txt-box { text-align:left;position: absolute;left: 0; bottom:35px; font-size:25px; line-height: 1.5; font-weight: 200; transition: all 0.5s ease;padding:0 40px}
.main-culture ul li a .img .txt-box strong { font-weight: 600; }
.main-culture ul li a .over { opacity:0; position: absolute;left: 0; right:0; top:0; bottom:0; background:rgba(254,167,36,0.85); padding: 48px 25px;display:flex;align-items:center;  transition: all 0.5s ease;}
/*
.main-culture ul li a .over p { font-size:18px; line-height: 1.45; max-height:130px;overflow:hidden;}
*/

.main-culture ul li a .over dl dt { font-size:25px; line-height: 1.5; font-weight: 500; margin-bottom: 35px;display:none; }
.main-culture ul li a .over dl dd { font-size:18px; line-height: 1.45; max-height:130px;overflow:hidden;}

.main-culture ul li a:hover .img .txt-box { opacity:0; }
.main-culture ul li a:hover .over { opacity:1; }

.main-brand { background: #f4f4f4; padding:75px 0 150px; }
.main-brand .head { margin-bottom: 35px;  position: relative;}
.main-brand .body a { display: flex; align-items: center; }
.main-brand .body .logo { flex: 0 0 auto; margin-right:100px; }
.main-brand .body .info dl dt { font-size:35px; line-height: 1.3; }
.main-brand .body .info dl dt p span  {display: inline-block;vertical-align: middle; font-size:18px; font-weight: 400; padding-bottom: 3px; line-height: 1.3; position: relative;}
.main-brand .body .info dl dt p span:before { content: ''; position: absolute;left: 0; right:0; bottom:0; height: 1px; background: #222;  }
.main-brand .body .info dl dd { font-size:18px; line-height: 1.5; font-weight: 300; padding-top:30px;}

.main-brand .body .logo { overflow: hidden;background:#fff;padding:0 100px; }
.main-brand .body .logo img {  transition: all 0.3s ease;}
.main-brand .body a:hover .logo img { transform: scale(1.1); }
.main-brand .body .col2 { display:flex; justify-content: space-between; } 
.main-brand .body .col2 a  { display:block; width:calc(50% - 30px);  }
.main-brand .body .col2 a .img { position:relative; overflow:hidden; height:340px; display:flex; align-items:center;  }
.main-brand .body .col2 a .img img { transition:all 0.3s ease;width:100%;}
/*.main-brand .body .col2 a .img:before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.15); z-index:10; }*/
.main-brand .body .col2 a .img span { z-index:20; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center;  font-size:32px; color:#fff; font-weight:600; }
.main-brand .body .col2 a .info { }
.main-brand .body .col2 a .info .t1 { font-size:15px; line-height:1.5; padding:14px 0 8px; color:#a2a3a7; }
.main-brand .body .col2 a .info .t2 { font-size:24px; font-weight:600; color:#242424; line-height:1.4; }
.main-brand .body .col2 a:hover .img img { transform:scale(1.1); }



.main-bottom { display: flex; align-items: center; height: 315px; background: url(../img/main/bg_bottom.jpg)no-repeat 50% 50%; background-size:auto 100% !important; text-align: center; }
.main-bottom a{display:flex;width:100%;height:100%;justify-content:center;align-items:center;}

.tag{position:absolute;z-index:1;line-height:40px;bottom:0;}
.tag a{font-size:16px;color:#000;opacity:.53;padding:0 2px;}
.tag a:hover{opacity:1;}

.tag button{font-size:16px;color:#000;opacity:.53;padding:0 2px;}
.tag button:hover{opacity:1;}

#footer { padding: 22px 0; background: #232221; }
#footer .inner { position: relative; padding-right:140px; }
#footer .sns { position:absolute; right:15px; top:-7px; }
#footer .sns a {display: inline-block; vertical-align: middle;color:#a1a3a6;font-size:25px;margin-left: 12px; }
#footer .sns a:hover { opacity:1; }
#footer .etc .notice { position: absolute; right:140px; top:0;  }
#footer .etc { font-size:16px; color: #a1a3a6 ;font-weight: 600; }
#footer .etc a { font-size:16px; color: #a1a3a6 ;font-weight: 600; transition: all 0.5s ease; }
#footer .etc a:hover { color: #fff; }

.h2-sub { text-align: center; font-size:40px; font-weight: 200; padding-bottom: 20px; margin:95px 0; position: relative;}
.h2-sub:before { content: ''; position: absolute;left: 50%; bottom:0; width:50px; height: 2px; background: #fab838; margin-left: -25px; }
.sort { margin-bottom: 50px; margin-top:95px}
.sort a { display: inline-block; vertical-align: middle; font-size:18px; font-weight: 200; margin-right:20px;  }
.sort a.active { font-weight: 600; }

.project-list  ul{margin-top:95px;}
.project-list  ul li { margin-bottom: 40px; }
.project-list  ul li a { display: block; position: relative;}
.project-list ul li a .img{height:450px;overflow:hidden;position:relative;display:flex;align-items:center;}
.project-list ul li a .img:before{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.4);content:'';display:block;}

.project-list  ul li a .img img { width:100%; }
.project-list  ul li a .txt-box { z-index:2;position: absolute; left: 0; right:0; top:50%; transform: translateY(-50%); text-align: center; font-size:20px; font-weight: 300; color: #fff; }
.project-list  ul li a .txt-box dl dt { font-size:40px; line-height: 1.2; margin:0 auto 24px;font-weight:700;overflow:hidden;text-overflow:ellipsis;max-width:90%;white-space:nowrap;display:block;}
.project-list  ul li a:before { content: ''; position: absolute;left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,0.8); opacity:0; transition: all 0.3s ease;}
.project-list  ul li a:after { content: ''; position: absolute; right:30px; bottom:30px; background: url(../img/project/ico_list_more.png) no-repeat 0 0; width:40px; height: 40px; transition: all 0.3s ease;}

.project-list  ul li a:hover:before{ opacity:1; z-index:1}
.project-list  ul li a:hover:after { transform: rotate(180deg);z-index:1}
.project-list  ul li a .end { position: absolute;left: 0; top:0; padding: 24px 15px; background: #222222; font-size:18px; line-height: 1.45; color: #fff; font-weight: 300; }
.project-list  ul li a .end  strong { display: block; }
.project-list  ul li.close a:before { opacity:1; background: rgba(255,255,255,0.7); }
.project-list  ul li.close a:after  { background-image:url(../img/project/ico_list_more_white.png); }
.project-list .list-more { text-align: center; margin:80px 0; }
.project-list .list-more a{display:flex;width:60px;height:60px;border-radius:100%;border:1px solid #000;justify-content:center;align-items:center;margin:0 auto;font-size:25px}
.project-list .list-more a:hover{background:#fab838;border-color:#fab838;transition:background .5s }

.story-list{min-height:calc(100vh - 283px)}
.story-list .h2-sub { margin-bottom: 50px;}
.story-list ul:after { display: none; content: ''; clear: both; }
.story-list ul {display:flex;flex-wrap:wrap;justify-content:flex-start;}
.story-list ul li {width:380px; padding:0 0 75px;margin-right:80px;}
.story-list ul li:nth-child(3n){margin-right:0;}
.story-list ul li a { display: block; }
.story-list ul li a .img { position: relative;height:250px;overflow:hidden;background:#f0f0f0;display:flex;align-items:center;}
.story-list ul li a .img img { width:100%; }
/*
.story-list ul li a .img p { position: absolute; right:0; top:0; width:105px; height: 35px; line-height: 34px; text-align: center; font-size:16px; color: #fff; font-weight: 300; background: #222; }
*/
.story-list ul li a .s1 {width:80px; height: 25px; line-height: 25px; text-align: center; font-size:11px; color: #fff; font-weight: 400; background: #222;margin-top:20px; border-radius:5px;}
.story-list ul li a .t1 { font-size:16px; margin:10px 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  font-weight: 400;color:#a1a3a6 }
.story-list ul li a .t2 { font-size:25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; }
.story-list ul li a .t3 { font-size:16px; color: #8d9096; line-height: 25px; height: 75px; display: -webkit-box; -webkit-box-orient:vertical; text-overflow: ellipsis; -webkit-line-clamp:3; overflow: hidden; margin:20px 0 15px; }
.story-list ul li a .e p { display: inline-block; font-size:16px; color: #8d9096; padding-bottom: 4px; position: relative; }
.story-list ul li a .e p:before { content: ''; position: absolute;left: 0; right:0; bottom:0; height: 1px; background: #d9d9db; }

.pagenate { text-align: center; margin:30px 0 110px; }
.pagenate a { display: inline-block; vertical-align: middle; width:40px; height: 40px; text-align: center;line-height: 39px; font-size:23px; position: relative; }
.pagenate div { display: inline-block; vertical-align: middle; margin:0 20px;}
.pagenate a.prev { background: url(../img/common/page_next.png) no-repeat 50% 50%; text-align: left; text-indent: -9999px; transform: rotate(180deg);}
.pagenate a.next { background: url(../img/common/page_next.png) no-repeat 50% 50%; text-align: left; text-indent: -9999px; }
.pagenate a.active,
.pagenate a:hover {text-decoration: underline; }

.story-view {}
.story-view .head { height:480px; position: relative;  background-repeat: no-repeat; background-position: 50% 50%; background-size:cover; margin-bottom: 70px; }
.story-view .head:before { content: ''; position: absolute;left: 0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.6); }
.story-view .head .inner { display: flex; align-items: center; height: 480px; position: relative; }
.story-view .head .inner .in { text-align: center; color: #fff; position: relative;z-index:2; flex:1;}
.story-view .head .h2 { font-size:22px; line-height: 1.4; margin-bottom: 10px; color: #fff; font-weight: 400;}
.story-view .head .h3 { font-size:40px; line-height: 1.4; margin-bottom: 30px; font-weight: 600; color: #fff; letter-spacing: -1px; }
.story-view .head .date { font-size:16px; line-height: 1.4; margin-bottom: 10px; color:#fff}
.story-view .head .share { position: absolute; right:15px; top:25px;z-index:5;}
.story-view .head .share .btn-share i { font-size:30px; color: #fff;}
.story-view .body { max-width:710px; margin: 0 auto; padding-bottom: 150px;overflow-x:hidden;}
.story-view .body *{word-break:break-all}
.story-view .body.edit p{font-size:17px;line-height:1.9;}
.story-view .body p{line-height:24px;}
.story-view .body .line-chg{height:24px;}
.story-view .body .text1 { font-size:25px; line-height: 1.8;  font-family: 'Noto Serif KR';}
.story-view .body .text2 { font-size:17px; line-height: 1.9; font-weight: 300; word-break: keep-all; text-align: justify; }
.story-view .body .photo { margin-bottom: 5px; }
.story-view .body .photo img {  }
.story-view .body .desc { text-align: right; margin-bottom: 30px; font-size:16px; line-height: 1.4; color: #8d9096; font-weight: 300; }
.story-view .body .writer { padding:0 0 50px 50px;  }
.story-view .body .writer dl dt { font-size:20px; font-weight: 500; margin-bottom: 20px; }
.story-view .body .writer dl dd { font-size:18px; font-weight: 500; line-height: 1.7; letter-spacing: -1px; }
.story-view .body .tit { font-size:20px; font-weight: 600; margin-bottom: 25px;margin-top:40px }
.story-view .body .map { height: 520px; }
.story-view .body .address { padding: 23px 0; font-size:17px; line-height: 1.4; border-bottom: 1px solid #dedede; font-weight: 300;}
.story-view .body .copy { font-size:14px; font-weight: 300; text-align: center; padding: 30px 0 140px; }
.story-view .body .tag { padding: 22px 0; border-top:1px solid #dedede; font-size:16px; font-weight: 300;position:relative; }
.story-view .body .tag:after { display: block; content: ''; clear: both; }
.story-view .body .tag ul { float:left; }
.story-view .body .tag ul li { display: inline-block; vertical-align: middle; font-size:16px; font-weight: 300; margin-right:10px; }
.story-view .body .tag .share { float:right; }
.story-view .body .tag .share > div  {display: inline-block; vertical-align: middle; }
.story-view .body .tag .share > div + div { margin-left: 30px;}
.story-view .body .tag .share a { display: inline-block; vertical-align: middle; font-size:16px; color: #222222; font-weight: 300; }
.story-view .body .tag .share a i { font-size:20px; display: inline-block;vertical-align: middle; }
.story-view .body .tag .share a span { display: inline-block;vertical-align: middle;  margin:-2px 0 0 5px; }
.story-view .body .files { padding: 15px 20px; border: 1px solid #dedede; }
.story-view .body .files i { font-size:20px; margin-right:15px; display: inline-block; vertical-align: middle;  }
.story-view .body .files ul { display: inline-block; vertical-align: middle; }
.story-view .body .files ul li { display: inline-block; vertical-align: middle; margin-right:20px; }
.story-view .body .files ul li a { font-size:14px; font-weight: 300; text-decoration: underline; }
.story-view .body .description { padding:15px 20px; background: #f5f6f8; margin:12px 0 42px; }
.story-view .body .description ul li { font-size:14px; line-height: 1.5; color: #787a7d; }
.story-view .body .description ul li + li { margin-top:10px;}
.story-view .body .description ul li strong { font-weight: 600; }
.story-view .body .description ul li p { display: inline; margin-left: 5px; }
.story-view .body .editor { text-align: center; padding-bottom: 55px;margin-top:42px;}
.story-view .body .editor .photo { width:86px; height: 86px; border-radius:100%; overflow: hidden; margin: 0 auto;}
.story-view .body .editor dl dt { font-size:18px; font-weight: 300; margin:10px 0 5px; }
.story-view .body .editor dl dd { font-size:14px; font-weight: 300; color: #787a7d;  }
.story-view .body .orthers { padding-top:30px; border-top:1px solid #dedede; }
.story-view .body .orthers .h4 { font-size:20px; font-weight: 300; margin-bottom: 8px; }
.story-view .body .orthers section { overflow: hidden; margin:0 -5px; }
.story-view .body .orthers section article { float:left; width:50%; padding:0 5px; }
.story-view .body .orthers section article figure p{ height:190px;overflow:hidden;}
.story-view .body .orthers section article figcaption { font-size:18px; font-weight: 300; padding-top:10px;overflow:hidden;height:62px;}


#pro-header.header { position: absolute;left: 0; right:0; top:0; z-index:2; }
#pro-header.header .inner { height: 95px; display: flex; align-items: center; justify-content: space-between;  position:relative;}
#pro-header h1 a{position:relative;width:100%:}
#pro-header h1 img{height:30px;}
#pro-header h1 img:nth-child(2){position:absolute;left:-7px;top:-30px;height:35px;animation:rise 2s;}
#pro-header.header h2 {font-size:18px;color:#fff;}
#pro-header.header .btn-share i { font-size:30px; color: #fff;  }
#pro-header.header .right{display:flex;}
#pro-header.header .right .m-menu{display:flex;font-size:25px;width:50px;height:50px;justify-content:center;align-items:center;position:relative;}
#pro-header.header .m-menu i{color:#fff;}

.project-view .visual { position: fixed; left: 0; right:0; top:0; height: 100%; background: url(../img/project/view1.jpg) no-repeat 50% 50%; background-size:cover; display: flex; align-items: center; z-index:-1; }
.project-view .visual:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:block;}
.stk{display:none}
#pro-header.fixed{position:fixed;width:100%;height:95px;background:rgba(255,255,255,.9);left:0;top:0;animation:down .3s;box-shadow:0 5px 10px rgba(0,0,0,.1)}
#pro-header.fixed h2{color:#000}
#pro-header.fixed .share-button , #pro-header.fixed .m-menu i{color:#000}
#pro-header .inner{max-width:100%;}
#pro-header.fixed h1{display:none;}
#pro-header.fixed h1.stk{display:block;padding-top:20px;padding-left:7px;}
.project-view > .in { display:flex; text-align: center; position:absolute;left:0;top:0;width:100%;height:100%;justify-content:center;align-items:center;flex-direction:column;}
.project-view > .in h3 { font-size:60px; color: #fff; position: relative; margin-bottom: 20px;  font-weight: 500;}
.project-view > .in h3 span { position: absolute; left: 45%; bottom:30px; font-size:100px; opacity:0.3; font-weight: 400;}
.project-view > .in .h3-desc { font-size:20px; color: #fff; font-weight: 300; line-height: 1.4; }
.project-view .section1 { padding: 90px 0; background: rgba(0,0,0,0.85); text-align: center; }
.project-view .section1 .tit { font-size:50px; font-weight: 600; margin-bottom: 30px; color: #fff;  }
.project-view .section1 .txt { font-size:22px; line-height: 2.2; color: #fff; }
.project-view .section1 .txt small { font-size:16px; }
.project-view .section2 { padding: 160px 0; background: #fff; }
.project-view .section2 .tit { font-size:22px; margin-bottom: 70px; }
.project-view .section2 .tit strong { font-size:50px; }
.project-view .section2 .txt { font-size:16px; line-height: 2; font-weight: 300; }
.project-view .section3 { padding: 200px 0; background-size:cover;}
.project-view .section3 .tit { text-align: center; font-size:40px; color: #fff; margin-bottom: 15px;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap;display:block; }
.project-view .section3 .tit a{ color:#fff}
.project-view .section3 .tit-desc { font-size:18px; font-weight: 300; color: #fff; text-align: center; margin-bottom: 90px;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap;display:block; }
.project-view .section3 ul  {display:flex;justify-content:space-between}
.project-view .section3 ul li {width:380px;padding:0 0;}
.project-view .section3 ul li:nth-child(3){margin-right:0;}
.project-view .section3 ul li .img{height:290px;overflow:hidden;background:#f8f8f8;display:flex;align-items:center;justify-content:center;}
.project-view .section3 ul li a { display: block; color: #fff;}
.project-view .section3 ul li a img { transition: all 0.5s ease;width:100%;}
.project-view .section3 ul li .subj { font-size:22px; font-weight: 600; margin:15px 0 15px;  }
.project-view .section3 ul li .subj a{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;display:inline-block;width:100%}
.project-view .section3 ul li dl dt span {max-height:28px; display: inline-block; vertical-align: middle; padding-bottom: 5px; font-size:18px; font-weight: 300; position: relative; text-decoration:underline;overflow:hidden;}
.project-view .section3 ul li dl dd { font-size:15px; line-height: 1.5; padding-top:5px;max-height:75px;overflow:hidden; }
.project-view .section3 .more { text-align: right; margin-top:35px;}
.project-view .section3 ul li a:hover img { transform: scale(1.05);}
.project-view .btn-more { display: inline-block; vertical-align: middle; height: 50px; line-height: 47px; padding:0 20px; font-size:15px; font-weight: 300; border: 1px solid #fff; color: #fff; }
.project-view .btn-more span { margin-left: 18px; transition: all 0.3s ease; display: inline-block;}
.project-view .btn-more:hover span { transform: translateX(5px);}

.project-view .section4 { padding: 270px 0 340px; background-size:cover;  }
.project-view .section4 .tit {  font-size:40px; color: #fff; margin-bottom: 15px; max-height:110px;overflow:hidden;}
.project-view .section4 .tit a{color:#fff}
.project-view .section4 .tit-desc { font-size:18px; font-weight: 300; color: #fff; margin-bottom: 40px;max-height:75px;overflow:hidden; }
.project-view .section4 .btn-more { background: #000; border-color:#000; }
.project-view .section4 .head { display: inline-block; vertical-align: top; margin-right:60px;width:180px}
.project-view .section4 .body { display: inline-block; vertical-align: top; padding-top:10px;}
.project-view .section4 .body.swiper-container{width:calc(100% - 245px) }
.project-view .section4 ul.swiper-wrapper{display:flex;}
.project-view .section4 ul { display: inline-block; vertical-align: top; }
.project-view .section4 ul li { display: inline-block; vertical-align: top; width:330px;margin-right:30px;}
.project-view .section4 ul li:last-child{margin-right:0;}
.project-view .section4 ul li .item { display: block; position: relative; overflow: hidden; height:330px;background:#000;display:flex;justify-content:center;align-items:center;cursor:pointer;}
.project-view .section4 ul li .item:before{content:'';width:100%;height:100%;position:absolute;display:block;left:0;top:0;background:rgba(0,0,0,.5)}
.project-view .section4 ul li img { width:100%; transition: all 0.5s ease; }
.project-view .section4 ul li .info { position: absolute; left: 30px; top:27px; bottom:27px; right:30px; color: #fff;  }
.project-view .section4 ul li .info .t1 a{display:none;position: absolute;left: 0; top:0; font-size:16px; font-weight: 600; }
.project-view .section4 ul li .info .t2 a{ padding-top:75px; font-size:30px; line-height: 1.4; color: #fff; font-weight: 500; }
.project-view .section4 ul li .info .t2{max-height:88px;overflow:hidden;}
.project-view .section4 ul li .info .t3 a{ color:#fff;position: absolute;left: 0; bottom:15px; right:0; font-size:18px; line-height:25px; height: 50px; overflow: hidden; display: -webkit-box; -webkit-box-orient:vertical; text-overflow: ellipsis; -webkit-line-clamp:2; white-space: normal; }
.project-view .section4 ul li a:hover img { transform: scale(1.1); }

#none_template{background:rgba(255,255,255,1);width:100%;padding:175px 0;margin-top:100vh}

.project-view .section5 { padding: 200px 0 ; background-size:cover;  }
.project-view .section5 .tit {  font-size:40px; color: #fff; margin-bottom: 15px; overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap;display:block;}
.project-view .section5 .tit a{  color:#fff ;}
.project-view .section5 .tit-desc { font-size:18px; font-weight: 300; color: #fff; margin-bottom: 40px; overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap;}
.project-view .section5 .more {  margin-bottom: 70px; }
.project-view .section5 .body ul:after{ display: block; content: ''; clear: both; }
.project-view .section5 .body ul {display:flex;justify-content:space-between }
.project-view .section5 .body ul li {width:380px;}
.project-view .section5 .body ul li { display: block; }
.project-view .section5 .body ul li .img { overflow: hidden;height:250px; display:flex;align-items:center;background:rgba(255,255,255,.3);justify-content:center;}
.project-view .section5 .body ul li .img img { transition: all 0.5s ease;}
.project-view .section5 .body ul li dl dt { padding:10px 0 15px; }
.project-view .section5 .body ul li dl dt strong { font-size:25px; line-height:30px; max-height: 30px; overflow: hidden; font-weight: 500; color: #fff; overflow: hidden; display: -webkit-box; -webkit-box-orient:vertical; text-overflow: ellipsis; -webkit-line-clamp:2;}
.project-view .section5 .body ul li dl dt p{ font-size:18px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fab838; padding-bottom:5px;  }
.project-view .section5 .body ul li dl dt p a{color: #fab838;}
.project-view .section5 .body ul li dl dd { font-size:16px; line-height: 1.5; font-weight: 300; color: #fff; max-height:70px;overflow:hidden;}
.project-view .section5 .body ul li dl dd  a{ color:#fff}
.project-view .section5 .body ul li a:hover img { transform: scale(1.1); }
.project-view .section6 { padding: 260px 0 240px; background:rgba(250,184,56,.8); background-size:cover; }
.project-view .section6 .inner { display: flex; align-items: center; justify-content: center; }
.project-view .section6 .inner .head { margin-right:65px; }
.project-view .section6 .tit {  font-size:40px; color: #222; margin-bottom: 15px; font-weight: 600;}
.project-view .section6 .tit-desc { font-size:18px; font-weight: 300; color: #222; margin-bottom: 40px; }
.project-view .section6 .btn-more {  border-color:#222; color: #222; }
.project-view .section6 .inner .body { flex:0 0 600px; padding: 80px 35px 110px 60px; border-radius:20px; background: #fff;  }
.project-view .section6 .inner .body .logo { text-indent: -24px;}
.project-view .section6 .inner .body .t1 { font-size:30px; line-height: 1.4; padding-top:55px; }
.project-view .section6 .inner .body .t2 { padding: 12px 0 35px; }
.project-view .section6 .inner .body .t2 p { display: inline-block; vertical-align: middle; font-size:18px; font-weight: 500; padding-bottom: 4px; position: relative;}
.project-view .section6 .inner .body .t2 p:before { content: ''; position: absolute;left: 0; right:0; bottom:0; height: 1px; background: #000; }
.project-view .section6 .inner .body .t3 { font-size:18px; line-height: 1.5; font-weight: 300; }

.section7 , .section8 , .section9{padding: 200px 0 ; background-size:cover;  }
.section7 .tit , .section8 .tit , .section9 .tit{  font-size:40px; color: #fff; margin-bottom: 15px;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap;display:block; }
.section7 .tit a, .section8 .tit a, .section9 .tit a{  font-size:40px; color: #fff; margin-bottom: 15px; }
.section7 .tit-desc , .section8 .tit-desc , .section9 .tit-desc{ font-size:18px; font-weight: 300; color: #fff; margin-bottom: 40px; overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap;display:block;}
.inner-con{display:flex;justify-content:flex-end;align-items:flex-start;padding:50px;height:450px;background:#f8f8f8;margin-bottom:40px;flex-direction:column;position:relative;}
.inner-con:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;display:block;background:rgba(0,0,0,.5)}
.inner-con a{color:#fff}
.inner-con h3{font-size:25px;line-height:1.2;margin-bottom:15px;color:#fff;position:relative}

.inner-con .s-tit{font-size:18px;font-weight:300;margin-bottom:15px;color:#fff;position:relative}
.inner-con .con{font-size:16px;line-height:24px;max-height:48px;overflow:hidden;color:#fff;position:relative;width:100%;}



.project-view .section8 ul  { margin:0 -42px; }
.project-view .section8 ul li { width:100%;padding:0 42px;margin-bottom:50px;}
.project-view .section8 ul li  { display: flex; color: #fff;justify-content:space-between;}
.project-view .section8 ul li a{color:#fff}
.project-view .section8 ul li .img{width:600px;height:250px;overflow:hidden;}
.project-view .section8 ul li .info{width:calc(100% - 650px)}
.project-view .section8 ul li a img { transition: all 0.5s ease;width:100%;}
.project-view .section8 ul li .subj { font-size:22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin:15px 0 25px;  }
.project-view .section8 ul li dl dt span { display: inline-block; vertical-align: middle; padding-bottom: 5px; font-size:18px; font-weight: 300; position: relative; text-decoration:underline}
.project-view .section8 ul li dl dd { font-size:15px; line-height: 1.5; padding-top:14px; max-height:120px;overflow:hidden;}
.project-view .section8 .more { text-align: right; margin-top:35px;}
.project-view .section8 ul li a:hover img { transform: scale(1.05);}

.project-view .section9{text-align:center;}
.project-view .section9 ul  { margin:0 -42px; text-align:center;}
.project-view .section9 ul li { width:380px;padding:0 0;margin:0 auto 50px;text-align:left;}
.project-view .section9 ul li a{display:block;color:#fff;overflow:hidden;text-overflow:ellipsis;}
.project-view .section9 ul li a .img{height:250px;overflow:hidden;}
.project-view .section9 ul li a img { transition: all 0.5s ease;width:100%;}
.project-view .section9 ul li .subj { font-size:22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin:15px 0 15px;  }
.project-view .section9 ul li dl dt span { display: inline-block; vertical-align: middle; padding-bottom: 5px; font-size:18px; font-weight: 300; position: relative;text-decoration:underline }
/*
.project-view .section9 ul li dl dt span:before { content: ''; position: absolute;left: 0; right:0; bottom:0; height: 1px; background: #fff; }
*/
.project-view .section9 ul li dl dd { font-size:15px; line-height: 1.5; padding-top:5px; max-height:75px;overflow:hidden;}
.project-view .section9 .more { text-align: right; margin-top:35px;}
.project-view .section9 ul li a:hover img { transform: scale(1.05);}
.project-view .section9 .head{margin-bottom:40px;}
.project-view .section9 .head h3{font-size:24px;line-height:30px;color:#fff;padding-bottom:15px;font-weight:500}
.project-view .section9 .head p{font-size:16px;line-height:24px;color:#fab838 ;font-weight:100}
.project-view .section9 .swiper-container{max-width:800px;margin:0 auto;font-size:18px;color:#fff;line-height:24px;overflow:hidden;text-align:left;}
.project-view .section9 .swiper-slide{max-height:130px;overflow:hidden;font-size:16px;line-height:26px;font-weight:300}
.project-view .sec9_con{max-width:800px;margin:0 auto;border-top:.5px solid #fff;padding:120px 0;margin-bottom:0;border-color:rgba(255,255,255,.5)}
.project-view .sec9_con:last-child{border-bottom:.5px solid #fff;border-color:rgba(255,255,255,.5)}

.about-view { color: #fff;  }
.about-view:before{}


.about-view .pos1:before{background: url(../img/about/bg1.jpg) no-repeat;content:'';width:100%;display:block;height:100vh;background-size:cover;left:0;top:0;position:fixed;opacity:0;transition:opacity .8s}
.about-view .pos2:before{background: url(../img/about/bg2.jpg) no-repeat;content:'';width:100%;display:block;height:100vh;background-size:cover;left:0;top:0;position:fixed;opacity:0;transition:opacity .8s}
.about-view .pos3:before{background: url(../img/about/bg3.jpg) no-repeat;content:'';width:100%;display:block;height:100vh;background-size:cover;left:0;top:0;position:fixed;opacity:0;transition:opacity .8s}

.about-view[data-class="bg1"] .pos1:before{opacity:1;transition:opacity .8s}
.about-view[data-class="bg2"] .pos2:before{opacity:1;transition:opacity .8s}
.about-view[data-class="bg3"] .pos3:before{opacity:1;transition:opacity .8s}

@keyframes op{
	from{opacity:0;}
	to{opacity:1;}
}
.about-view .header { position:fixed;left: 60px; right:60px; top:0; z-index:2; }
.about-view .header .inner { height: 95px; display: flex; align-items: center; justify-content: space-between; max-width:100%; padding: 0; }
.about-view .header h2 { width:104px; height: 26px; background: url(../img/about/tit.png) no-repeat 0 0; }
.about-view .header .btn-share i { font-size:30px; color: #fff;  }
.about-view .body .nav { position: fixed; left: 60px; top:160px; z-index:100; }
.about-view .body .nav a { display: block; font-size:20px; color: #fff; line-height: 45px; transition: all 0.7s ease; }
.about-view .body .nav a.active { color: #fab838;}
.about-view .body .nav ul li.active a { color: #fab838;}
.about-view .pos1{padding: 260px 0 0;  }
.about-view .pos2{padding: 640px 0 0;  }
.about-view .pos3{padding: 640px 0 290px; }
.about-view .section1 .t1 { font-size:60px; line-height: 1.3; color: #fff;  margin-bottom: 115px;  }
.about-view .section1 .t1 div { display: inline-block; vertical-align: middle; position: relative;}
.about-view .section1 .t1 div:before { content: ''; position: absolute;left: 0; right:0; bottom:0; height: 3px; background: #fff; }
.about-view .section1 .t2 { text-align: center; font-size:50px; color: #fff; font-weight: 100;}
.about-view .section1 .t2 strong { display: block; font-weight: 500; padding-top:30px;}
.about-view .section1 .t2:after { content: ''; display: block; width:1px; height: 240px; background: #fff; margin:60px auto 90px; }
.about-view .section1 .t3 { font-size:20px; line-height: 2; font-weight: 300;position:relative;}
.about-view .section1.bg .t3 dd{width:60%;}
.about-view .section1 .t3.rg{text-align:right}
.about-view .section1 .t3.rg dd{margin-left:40%}
.about-view .section1 .t3.last:after{display:none;}
.about-view .section1 .t3 dt { font-size:50px; margin-bottom: 30px; font-family: 'Noto Serif KR';}
.about-view .section1 .t3:after { content: ''; display: block; width:.5px; height: 240px; background: #fff; margin:80px auto 50px; }
.about-view .section1 .t4 {text-align: right; }
.about-view .section1 .t4 dl { display: inline-block; }
.about-view .section1 .t4 dl dt {  display: inline-block; vertical-align: bottom; }
.about-view .section1 .t4 dl dt small { display: inline-block; vertical-align: top; width:25px; font-size:22px; line-height: 1.1; word-break: break-all; word-wrap: break-word;  margin-left: 40px;}
.about-view .section1 .t4 dl dt span { display: inline-block; vertical-align: top; width:60px; font-size:50px; line-height: 1.1; word-break: break-all; word-wrap: break-word; margin-top:-5px; }
.about-view .section1 .t4 dl dt span em { display: inline-block; height: 20px; line-height: 20px; vertical-align: top;}
.about-view .section1 .t4 dl dd { display: inline-block; vertical-align: bottom; font-size:22px; line-height: 2; font-weight: 300; margin-right:40px;}

.about-view .section1.bg {}
/*
.about-view .section2,
.about-view .section2 .slider,
.about-view .section2 .slider .swiper-container{ height: 100vh;}
.about-view .section2 .slider .swiper-slide { display: flex; align-items: center; }
.about-view .section2 .slider { position: relative;}
.about-view .section2 .slider .swiper-pagination { position: absolute;left: 0; right:0; bottom:20%; }
.about-view .section2 .slide1 { background: url(../img/about/bg2_1.jpg) no-repeat 50% 50%; background-size:cover;  }
.about-view .section2 .slide2 { background-image:url(../img/about/bg2_2.jpg);}
.about-view .section2 .slide3 { background-image:url(../img/about/bg2_3.jpg);}
.about-view .section2 .slide4 { background-image:url(../img/about/bg2_4.jpg);}
*/
.about-view .section2 .in { width:100%; text-align: center; }
.about-view .section2 .t1 { width:60px; margin: 0 auto 80px; word-break: break-all; word-wrap: break-word;  font-size:50px; position: relative;}
.about-view .section2 .t1 small { position: absolute; right:-70px; top:14px; width:34px; font-size:25px; line-height: 1.1;}
.about-view .section2 .t1 span { display: block; transform: rotate(90deg); margin:-25px 0;}
.about-view .section2 .t2 { font-size:22px; font-weight: 300; }
.about-view .section2 .swiper-pagination-bullet { margin:0 10px;}

.swiper-pagination-bullet { background: #fff; transition: all 0.5s ease; outline:none; }
.swiper-pagination-bullet-active { background: #fab838; }


.about-view .section3 {color: #fff;  }
.about-view .section3 .time { float:right; }
.about-view .section3 .tit  { display: inline-block; vertical-align: top; font-size:50px; width:55px; line-height: 1.1; word-break: break-all; word-wrap: break-word; margin-right:30px; }
.about-view .section3 .type1 .tit{width:100%;}
.about-view .section3 .type1 .info{padding-top:30px;padding-bottom:80px;}
.about-view .section3 .type1 .info strong{margin-bottom:0;}
.about-view .section3 .type1 .info strong a{color:#fff}
.about-view .section3 .info { display: inline-block; vertical-align: top; font-size:18px; line-height: 2; font-weight: 300; padding-top:80px;}
.about-view .section3 .info dl:after { display: block; content: ''; clear: both; }
.about-view .time .info{width:250px;}
.about-view .section3 .info dl dt { float:left; width:95px; white-space: nowrap; }
.about-view .section3 .info dl dt strong { display: block; font-weight: 500; text-decoration: underline;}
.about-view .section3 .info .tel { padding-top:35px;}
.about-view .section3 .addr { clear: both; }
.about-view .section3 .addr .info  strong { display: block; font-size:22px; font-weight: 500; margin-bottom: 25px; }
.about-view .section3 .addr .info div { font-size:18px; line-height: 2; }
.about-view .section3 .map { height: 600px; margin:50px 0 180px;}
.about-view .section3 .sns { text-align: center; }
.about-view .section3 .sns .tit2 { font-size:50px; color: #fff; margin-bottom: 50px; }
.about-view .section3 .sns .btns a { display: inline-block; vertical-align: middle; width:195px; height: 195px; border-radius:100%; border: 1px solid #fff; line-height: 190px; font-size:40px; color: #fff; margin:0 13px; transition: all 0.5s ease; }
.about-view .section3 .sns .btns a:hover { transform: scale(0.95);}

/*about-view*/
.about-view-new{width:100%;color:#fff}
.about-view-new:before{background: url(../img/about/bg1.jpg) no-repeat;content:'';width:100%;display:block;height:100vh;background-size:cover;left:0;top:0;position:fixed;}
.about-view-new .section-box{padding-top:280px}
.about-view-new .section1 .t1 { font-size:60px; line-height: 1.3; color: #fff;  margin-bottom: 115px;  }
.about-view-new .section1 .t1 div { display: inline-block; vertical-align: middle; position: relative;}
.about-view-new .section1 .t1 div:before { content: ''; position: absolute;left: 0; right:0; bottom:0; height: 3px; background: #fff; }
.about-view-new .section1 .t2 { text-align: center; font-size:50px; color: #fff; font-weight: 100;}
.about-view-new .section1 .t2 strong { display: block; font-weight: 500; padding-top:30px;}
.about-view-new .section1 .t2:after { content: ''; display: block; width:1px; height: 240px; background: #fff; margin:60px auto 90px; }
.about-view-new .section1 .t3 { font-size:22px; line-height: 2; font-weight: 300; }
.about-view-new .section1.bg .t3 dd{width:60%;}
.about-view-new .section1 .t3.rg{text-align:right}
.about-view-new .section1 .t3.rg dd{margin-left:40%}
.about-view-new .section1 .t3.last:after{display:none;}
.about-view-new .section1 .t3 dt { font-size:50px; margin-bottom: 30px; font-family: 'Noto Serif KR';}
.about-view-new .section1 .t3:after { content: ''; display: block; width:.5px; height: 240px; background: #fff; margin:80px auto 50px; }
.about-view-new .section1 .t4 {text-align: right; }
.about-view-new .section1 .t4 dl { display: inline-block; }
.about-view-new .section1 .t4 dl dt {  display: inline-block; vertical-align: bottom; }
.about-view-new .section1 .t4 dl dt small { display: inline-block; vertical-align: top; width:25px; font-size:22px; line-height: 1.1; word-break: break-all; word-wrap: break-word;  margin-left: 40px;}
.about-view-new .section1 .t4 dl dt span { display: inline-block; vertical-align: top; width:60px; font-size:50px; line-height: 1.1; word-break: break-all; word-wrap: break-word; margin-top:-5px; }
.about-view-new .section1 .t4 dl dt span em { display: inline-block; height: 20px; line-height: 20px; vertical-align: top;}
.about-view-new .section1 .t4 dl dd { display: inline-block; vertical-align: bottom; font-size:22px; line-height: 2; font-weight: 300; margin-right:40px;}

.about-view-new .section3 { background: url(../img/about/bg3.jpg) no-repeat 50% 50%; background-size:cover; padding: 120px 0 290px; color: #fff;  }
.about-view-new .section3 .time { float:right; }
.about-view-new .section3 .tit  { display: inline-block; vertical-align: top; font-size:50px; width:55px; line-height: 1.1; word-break: break-all; word-wrap: break-word; margin-right:30px; }
.about-view-new .section3 .info { display: inline-block; vertical-align: top; font-size:18px; line-height: 2; font-weight: 300; padding-top:80px;}
.about-view-new .section3 .info dl:after { display: block; content: ''; clear: both; }
.about-view-new .section3 .info dl dt { float:left; width:95px; white-space: nowrap; }
.about-view-new .section3 .info dl dt strong { display: block; font-weight: 500; text-decoration: underline;}
.about-view-new .section3 .info .tel { padding-top:35px;}
.about-view-new .section3 .addr { clear: both; }
.about-view-new .section3 .addr .info  strong { display: block; font-size:22px; font-weight: 500; margin-bottom: 25px; }
.about-view-new .section3 .addr .info div { font-size:18px; line-height: 2; }
.about-view-new .section3 .map { height: 600px; margin:50px 0 180px;}
.about-view-new .section3 .sns { text-align: center; }
.about-view-new .section3 .sns .tit2 { font-size:50px; color: #fff; margin-bottom: 50px; }
.about-view-new .section3 .sns .btns a { display: inline-block; vertical-align: middle; width:195px; height: 195px; border-radius:100%; border: 1px solid #fff; line-height: 190px; font-size:40px; color: #fff; margin:0 13px; transition: all 0.5s ease; }
.about-view-new .section3 .sns .btns a:hover { transform: scale(0.95);}


.about-view-new .header { position: absolute;left: 0; right:0; top:0; z-index:2; }
.about-view-new .header .inner { height: 95px; display: flex; align-items: center; justify-content: space-between;  position:relative;}
.about-view-new .header .inner h1 img{height:64px}
.about-view-new .header h2 {font-size:30px;color:#fff;}
.about-view-new .header .btn-share i { font-size:30px; color: #fff;  }
.about-view-new .header .inner .right{display:flex;}
.about-view-new .header .inner .right .m-menu{display:flex;font-size:25px;width:50px;height:50px;justify-content:center;align-items:center;position:relative;}
.about-view-new .header .inner .right .m-menu i{color:#fff}

.about-view-new .body .nav { position: fixed; left: 60px; top:160px; z-index:100; }
.about-view-new .body .nav a { display: block; font-size:20px; color: #fff; line-height: 45px; transition: all 0.7s ease; }
.about-view-new .body .nav a.active { color: #fab838;}
.about-view-new .body .nav ul li.active a { color: #fab838;}


.bg-layer { position: fixed;left: 0;right:0;top:0;bottom:0; background: rgba(0,0,0,0.8); z-index:1000;}
.main-layer { position: absolute; left: 20px; top:10%; right:20px; z-index:2000; }
.main-layer .inner { }
.main-layer .inner .head {  height:60px; position: relative; max-width:1110px; margin: 0 auto 20px;}
.main-layer .inner .head .tit { font-size:22px; font-weight: 300; color: #fff; }
.main-layer .inner .head .tit strong { font-size:30px; font-weight: 500; color: #fab838; }
.main-layer .inner .head .right { position: absolute; right:0; top:0; }
.main-layer .inner .head .right a { display: inline-block; vertical-align: middle; border-radius:60px; border: 1px solid #fff; height: 60px;line-height: 56px;width:60px;font-size:25px;color:#fff;text-align:center;}
.main-layer .inner .head .right .btn-today { padding:0 25px 0 30px; font-size:18px; color: #fff; }
.main-layer .inner .head .right .btn-today i { font-size:25px; margin-left: 17px; vertical-align: middle;}
.main-layer .inner .head .right .btn-close { width:60px; background: #fff; text-align: center; margin-left: 15px; }
.main-layer .inner .head .right .btn-close i { font-size:25px; color: #222; vertical-align: middle;}
.main-layer .inner .body { padding:0 95px; }
.main-layer .inner .body { position: relative;}
.main-layer .inner .body .item a { display: block; position: relative;}
.main-layer .inner .body .item a img { width:auto; }
.main-layer .inner .body .item a .box { opacity:0; position: absolute;left: 0; right:0; top:0; bottom:0; background: #fea724; display: flex; align-items: center; color: #fff; transition: all 0.5s ease; }
.main-layer .inner .body .item a .box dl {width:100%; text-align: center;}
.main-layer .inner .body .item a .box dl dt { margin-bottom: 30px; }
.main-layer .inner .body .item a .box dl dt span { display: inline-block; vertical-align: middle; font-size:25px; font-weight: 500; padding-bottom: 5px; position: relative; }
.main-layer .inner .body .item a .box dl dt span:before { content: ''; position: absolute;left: 0; right:0; bottom:0; height: 1px; background: #fff; }
.main-layer .inner .body .item a .box dl dd { font-size:16px; line-height: 1.4; font-weight: 300; }
.main-layer .inner .body .item a .box dl dd p { padding-top:5px; font-size:16px; font-weight: 500;}
.main-layer .inner .body .swiper-button-next { position: absolute; right:0; top:50%; width:60px; height: 60px; border-radius:100%; border: 1px solid #fff; text-align: center; line-height: 58px; background: url(../img/main/ico_pop_slider_next.png) no-repeat 50% 50%; margin-top:-30px; }
.main-layer .inner .body .swiper-button-prev { position: absolute; left:0; top:50%; width:60px; height: 60px; border-radius:100%; border: 1px solid #fff; text-align: center; line-height: 58px; background: url(../img/main/ico_pop_slider_next.png) no-repeat 50% 50%; margin-top:-30px; transform: rotate(180deg);}
.main-layer .inner .body .item a:hover .box { opacity:1; }


.m { display: none; }
.search-top{display:flex;justify-content:space-between;align-items:center;height:55px;margin:0 auto;width:400px;margin-top:120px;flex-direction:column;border-bottom:1px solid #000;}
.search-top .quick-link{width:100%;height:50px;text-align:left;}
.search-top .quick-link a{line-height:50px;font-size:16px;color:#000;margin:0 5px;}
.search-top input{border:none;width:350px;height:50px;font-size:20px;}
.search-top i{font-size:30px;margin-left:10px;}

.board_search{display:flex;justify-content:flex-end;align-items:center;margin-bottom:50px;height:50px;margin-top:95px;position:relative;}
.board_search input {border:none;border-bottom:1px solid #000;width:350px;height:50px;font-size:18px;padding-right:40px}
.board_search select{border:none;border-bottom:1px solid #000;width:80px;height:50px;font-size:18px;margin-right:10px;background:#fff}
.board_search a{position:absolute;right:0;top:10px;}
.board_search i{font-size:30px;margin-left:10px;}



.b_list{width:100%;border-top:1px solid #000;}
.b_list td{border-bottom:1px solid #dedede;padding:40px; }
.b_list td a{font-size:24px;line-height:30px;color:#000;font-weight:600;}
.b_list .num{text-align:center;vertical-align:top;font-size:30px;font-weight:700;color:#e6e8ec;}
.b_list .tit{font-size:24px;line-height:30px;color:#000;display:flex;align-items:center;margin-bottom:25px;}
.b_list .tit strong{display:inline-block;font-size:17px;color:#f0aa22;line-height:24px;padding:2px 5px;border:1px solid #f0aa22;margin-right:10px;vertical-align:middle;font-weight:300;}
.b_list .con{font-size:16px;line-height:30px;color:#8d9096;font-weight:400;overflow:hidden;max-height:90px}

.b_view{width:100%;border-top:1px solid #000;margin-top:95px}
.b_view td{border-bottom:1px solid #dedede}
.b_view .con_in p{font-size:16px;font-weight:100;color:#8d9096;line-height:30px;}
.b_view .con_in{padding:40px}
.b_view .file{padding:30px 40px;font-size:16px;font-weight:100;color:#8d9096;line-height:30px;}
.b_view .file a{font-size:16px;font-weight:100;color:#8d9096;line-height:30px;}
.b_view .subject{text-align:center;margin:40px 0;width:100%;}
.b_view .subject h3{font-size:24px;line-height:30px;color:#000;}
.b_view .subject p{font-size:14px;line-height:18px;color:#8d9096;margin-top:50px}

.boardblock{width:100%;display:flex;justify-content:center;margin-top:50px;}
.boardblock .right{margin-left:auto;}
.b_preview{display:none;}
.tsd{text-shadow:5px 5px 10px rgba(0,0,0,1)}

.share-button{width:50px;height:50px;font-size:25px;color:#fff;position:relative;}
.share-button.current{background:#fab838 ;border-radius:25px 25px 0 0;color:#fff !important}
.share-items{width:50px;background:#fab838 ;position:absolute;right:65px;top:70px;padding:5px 10px 25px;border-radius:0 0 25px 25px;display:none;}
.share-items.st{top:50px;right:0;}
.share-items a{display:flex;height:auto;justify-content:center;margin-bottom:20px;padding:0 3px;}
.share-items a img{height:22px}
.share-items a:last-child{margin-bottom:0;}
.share-items i{font-size:25px;color:#fff}
.about-view .section1 .t3.nt:after{display:none;}

.xi-download{font-size:25px;color:#8d9096;vertical-align:middle;}
.m-open-menu{display:none;}
.m-open-menu{display:flex;position:fixed;z-index:-1;opacity:0;background:rgba(0,0,0,0.5);transition:z-index .5s , opacity .2s;width:100%;height:100%;left:0;top:0;align-items:flex-end;justify-content:flex-start;flex-direction:column;}

.m-open-menu .close{position:absolute;font-size:50px;right:50px;top:50px;opacity:.53;}

.m-open-menu.on{z-index:1000;opacity:1;}
.m-open-menu.on .open-menu{transform:translate(0 , 0);transition:transform .5s}
.m-open-menu .open-menu{width:40%;background:#fab838;height:100%;transform:translate(100% , 0);transition:transform .5s}

.menu-items{display:block;padding:200px 130px;height:100%;}
.menu-items a{display:block;font-size:50px;padding-bottom:20%;}
.menu-items a:last-child{padding-bottom:0;}

.btm-items{display:flex;position:absolute;left:130px;bottom:15%;}
.btm-items a{font-size:20px;opacity:.54;padding-right:10px;margin-right:10px;line-height:24px;position:relative;}
.btm-items a:after{content:'';width:3px;height:3px;background:rgba(0,0,0,.54);border-radius:100%;position:absolute;right:-5px;top:15px;}
.btm-items a:last-child:after{display:none;}

.nodata{display:block;padding:100px 0;font-size:20px;line-height:40px;color:#999;text-align:center;border:1px solid #ddd;border-left:none;border-right:none;}
h2.projectSearchResult , h2.storySearchResult{font-size:25px;width:100%;padding:120px 0 20px;max-width:1300px;margin:0 auto;}
.storySearchResult ul , .projectSearchResult ul{border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding-top:75px}
.list-back{display:none;}
.story-list .projectSearchResult ul li a .img img {width:auto;height:100%;max-width:unset}
@media only screen and (max-width:1600px){
	.about-view .body .nav { left: 10px; }
	.about-view .inner{padding-left:50px}
}
@media only screen and (max-width:1500px){
	.about-view .inner{padding-left:100px}
}

@media all and (max-width:1350px) {
	.main-visual,
	.main-visual .swiper-container,
	.main-visual .swiper-slide,
	.main-visual .inner { height: 350px; }
	.main-visual .txt-wrap { padding: 30px; height:350px;}
	.main-visual .txt-box .t3 { margin-bottom: 30px;}
	.main-visual { margin-bottom: 40px; }
	.main-book .body .thum { margin-right:15px;}
	.main-book .body .left .thum { display:flex;align-items:center;background:#666}
	.main-book .body dl dd { overflow: hidden; display: -webkit-box; -webkit-box-orient:vertical; text-overflow: ellipsis; -webkit-line-clamp:3;}
	
	.main-book .body .left{width:calc(60% - 20px)}
	.main-book .body .right{width:40%}
	.main-culture ul li a .img .txt-box { left: 20px; bottom:25px; right:20px;}
	.main-brand .body .logo { flex:0 0 40%;}
	.main-bottom { height: 200px; }
	
	.project-view .header h2,
	.about-view .header h2 { transform: translateX(-50%);}
	.about-view .header { left: 15px; right:15px; }
	.about-view .body .nav {left:20px;top:100px}
	.about-view .body .nav li a{width:8px;height:8px;display:block;overflow:hidden;background:#fff;border-radius:100%;text-indent:-9999em;margin-bottom:8px;}
	.about-view .body .nav li.active a{background:#fab838 }
	.about-view .section1 { padding:140px 0;}
	.about-view .section1 .t1 { text-align: center; margin-bottom: 70px;}
	.about-view .section2 .slider .swiper-pagination { bottom:10%;}
	.about-view .section3 .map { height: 300px;}
	
	.project-view .section3 ul { margin:0; }
	.project-view .section3 ul:after{display:none;}
	.project-view .section3 ul li {width:calc(34% - 30px)}
	
	.project-view .section4 .inner { overflow: visible; }
	.project-view .section6 .inner .body { flex:0 0 500px; padding:60px 20px 90px 40px;}
	
	.story-view .head,
	.story-view .head .inner { height: 300px; }
	.project-list ul li a .img{height:350px;}

	.main-life ul li {width:calc((100% - 30px)/3)}
	.main-culture ul li{height:calc((100vw - 75px)/3);width:calc((100% - 30px)/3);}
	.main-culture ul li a .img{height:auto;}
	.main-life ul li a .img{height:220px}
	.about-view .inner{padding-left:50px}
	.story-list ul li{width:calc((100% - 30px)/3);margin-right:15px;}
	h2.projectSearchResult, h2.storySearchResult{padding:120px 15px 20px}
}
 

@media all and (max-width:1023px) {
	#header .right .sns { display: none; }
	#header nav{padding-left:70px}
	#header nav a:last-child{margin-right:0}
	.menu-items{padding:200px 65px}
	.btm-items{left:0;}
	.main-culture ul  { margin:0 -8px; }
	.main-culture ul li a .img .txt-box { font-size:20px; }
	.main-brand .body .logo { margin-right:50px; }
	.main-brand .body .col2 a .img span { font-size:20px; }

	.main-visual,
	.main-visual .swiper-container,
	.main-visual .swiper-slide,
	.main-visual .inner{ height: 500px; } 
	.main-visual .txt-wrap { height: 250px; top:inherit; bottom:0; left: 0; right:0; width:auto; padding:20px; }
	.main-visual .txt-box .t2 { font-size:30px; }
	.main-visual .swiper-pagination { position: absolute; right:10px; bottom:10px; top:inherit; }
	.main-visual .swiper-pagination-bullet { display: inline-block !important; vertical-align: middle; margin:0 5px !important}
	
	.about-view .section1 .t1 { font-size:40px; margin-bottom: 40px;}
	.about-view .section1 .t2 { font-size:35px;}
	.about-view .section1 .t2:after { height: 140px; margin:40px auto 80px;}
	.about-view .section1 .t3 { font-size:16px; }
	.about-view .section1 .t3 dt { font-size:40px;margin-bottom: 15px;}
	.about-view .section1 .t3:after { height: 140px; margin:40px auto 80px;}
	.about-view .section1 .t4 dl dd { font-size:16px; }
	.about-view .section1 .t4 dl dt span { font-size:40px; width:50px; }
	.about-view .section1 .t4 dl dt small { font-size:18px; margin-left: 10px; }
	.about-view .section2 .t1 { font-size:45px; margin-bottom: 50px;}
	
	.about-view .section3 .time { float:none; }
	.project-list ul li a .txt-box dl dt { font-size:40px; margin-bottom: 14px;}
	.h2-sub { margin:40px 0;}
	.project-view .section5 .body ul li a dl dt strong { font-size:20px; height: 60px; line-height: 30px;}
	.project-view .section6 .inner .head { margin-right:30px;}
	.project-view .section6 .inner .body { flex:0 0 390px; padding:40px 30px;}
	
	.story-list ul li a .t2  {font-size:20px; }

	.project-list ul li a .img{height:255px}
	.project-view .section5 .body ul li .img{height:200px}
	.project-view .section4 ul li .item{height:250px}
	.project-view .section4 .head{width:100%;margin-right:0;}
	.project-view .section4 .body.swiper-container{width:100%;}
	.project-view .section8 ul li{flex-direction:column;}
	.project-view .section8 ul li .img ,.project-view .section8 ul li .info{width:100%}

}


@media all and (max-width:767px) {
	::marker {display:none !important;}
	.main-book .body a:hover h3:before, .main-life ul li a:hover .t2:before{display:none;}
	.list-back{display:block;color:#fff;font-size:25px;position:absolute;left:20px;top:14px}
	.project-view .header .inner h2 , #pro-header.header h2{position:absolute;width:calc(100% - 40px);text-align:center;transform: translateX(0);top:18px}
	#pro-header.fixed h1 .stk{display:none;}
	#pro-header.header .inner h1 img{display:none;}
	#header { height:62px; position: relative;}
	#header .inner { height:62px;}
	#header h1{padding:26px 0 0 6px}
	#header h1 a { display: block; width:auto; height: 44px; }
	#header h1 img:nth-child(2){height:30px;top:-18px;left:-6px}
	#header h1 a img{height:25px;}
	#header nav { float:none; padding: 0; position: absolute; left: 0; right:0; bottom:20px; text-align: center; display:none;}
	#header nav a { margin:0 15px; }
	#header nav a img { height: 17px; }
	#header .right{padding-top:0;}
	#header .right .m-menu{display:flex;height:62px;align-items:center;}
	#header .right .m-menu a{margin-right:10px;}
	#header .right .m-menu i{color:#000;}
	.sort{margin:30px 0 20px}
	#header .tag , #header .right .srch{display:none;}
	#footer .sns a {margin-left:20px;font-size:22px}
	.inner.swiper-container{padding:0;margin:0 15px;}
	
	.m-open-menu{display:flex;position:fixed;z-index:-1;opacity:0;background:rgba(0,0,0,0.5);width:100%;height:100%;left:0;top:0;align-items:flex-end;justify-content:flex-start;flex-direction:column;}
	
	.m-open-menu .close{position:absolute;font-size:25px;right:30px;top:30px;opacity:.53;}
	.m-open-menu.on{z-index:1000;opacity:1;}
	.m-open-menu.on .open-menu{transform:translate(0 , 0);transition:transform .5s}
	.m-open-menu .open-menu{width:70%;background:#fab838;height:100%;transform:translate(100% , 0);transition:transform .5s}
	.menu-items{display:block;padding:30px;margin-top:100px}
	.menu-items a{display:block;font-size:20px;padding-bottom:30px;}
	.menu-items a:last-child{padding-bottom:0;}
	.menu-items > a:nth-child(3){color:#fff}
	.btm-items{padding:100px 30px 0}
	.btm-items a{font-size:14px;opacity:.54;padding-right:10px;margin-right:10px;line-height:24px;position:relative;}
	.btm-items a:after{content:'';width:3px;height:3px;background:rgba(0,0,0,.54);border-radius:100%;position:absolute;right:-3px;top:11px;}
	.btm-items a:last-child:after{display:none;}
	

	.main-visual,
	.main-visual .swiper-container,
	.main-visual .swiper-slide,
	.main-visual .inner{ height: 400px; } 
	.main-visual .txt-wrap { height: 200px; padding:0 15px; }
	.main-visual .txt-box .t1 { font-size:11px; }
	.main-visual .txt-box .t2 { font-size:25px; margin:8px 0 5px}
	.main-visual .txt-box .t3 { font-size:12px; line-height: 15px; height: 30px; overflow: hidden; margin-bottom: 15px; }
	.main-visual .txt-box .more a { font-size:12px; }
	.main-visual .swiper-pagination { left: 10px; text-align: center; }
	.main-visual .swiper-pagination-bullet-active { width:25px; border-radius:5px;}
	.main-visual .txt-box .more a:before{height:.5px}
	.main-h2 { font-size:25px;margin-bottom:0; }
	.main-desc2 { font-size:12px; margin-bottom: 25px; }
	.main-life .head .btn-more,
	.main-culture .head .btn-more,
	.main-brand .head .btn-more,
	.main-book .head .btn-more{ display: block; position: absolute; right:0; top:8px; width:29px; height: 25px; border: 2px solid #222222; font-size:17px; text-align: center; line-height: 22px;}
	
	.main-book .body .left{width:100%}
	.main-book .body .right{width:100%}
	.main-book .body .thum{height:auto;}
	.main-book .body .left{margin-bottom:45px}
	.main-book .body .left a { display: block; }
	.main-book .body .right .article{align-items:flex-start;}
	.main-book .body .right dl dd{max-height:44px;font-size:13px;line-height:22px}
	.main-book .body .left .thum { margin-right:0; margin-bottom: 10px;}
	.main-book .body .h3 { font-size:17px; margin-bottom:0;width:100%; font-weight:500;}
	.main-book .body .left dl dt{display:none;}
	.main-book .body dl dt {font-size:15px;margin:5px 0;font-weight:300;}
	.main-book .body dl dd { font-size:13px; line-height:22px;max-height:44px;}
	.main-book .body .right a { float:none; width:auto; margin-bottom: 15px; }
	.main-book .body .right .article + .article { padding-left: 0; }
	.main-book .body .right .info{margin-left:0;width:calc(100% - 80px)}
	.main-book { padding-bottom: 50px; }
	.main-book .body .right .thum{width:75px;height:auto;}
	

	.main-life { padding:50px 0;}
	.main-life ul { margin: 0; }
	.main-life ul li { float:none; width:auto; padding: 0; margin-bottom: 55px;margin-right:0}
	.main-life ul li a .t1 { display: none; }
	.main-life ul li a .t2 { font-size:17px; line-height: 24px; max-height: 48px; margin-top:15px; margin-bottom:0}
	.main-life ul li a .t2 small { font-size:13px; }
	.main-life ul li a .t3 { font-size:13px; line-height: 22px; max-height: 44px;height:auto; }
	.main-life ul li a .img{height:220px;}

	.main-brand .body .col2 { display:block; }
	.main-brand .body .col2 a { width:100%; }
	.main-brand .body .col2 a + a { margin-top:30px; }
	.main-brand .body .col2 a .info .t1 { font-size:13px; padding:5px 0 3px; }
	.main-brand .body .col2 a .info .t2 { font-size:19px; }
	.main-brand .body .col2 a .img { height:200px; }

	.main-culture { padding:50px 0; }
	.main-culture ul { margin: 0; flex-direction:column;}
	.main-culture ul li { float:none; width:auto; padding: 0; margin-bottom: 55px;height:auto;}
	.main-culture ul li a .txt-box { display: none; }
	.main-culture ul li a .img{height:220px}
	.main-culture ul li a .img:before { display: none; }
	.main-culture ul li a .over { background: none; opacity: 1; padding: 0; position: static; }
	.main-culture ul li a .over dl dt { font-size:19px; line-height: 30px; color: #222; margin: 15px 0 7px; display:block;}
	.main-culture ul li a .over dl dd { font-size:13px; color: #8d9096; line-height: 22px; max-height:44px;}
	.main-culture ul li a .img .txt-box{left:0;bottom:0;right:0;font-size:19px;line-height:24px;color:#000;font-weight:600;position:relative;}

	.main-brand { padding: 50px 0 50px;}
	.main-brand .body a { display: block; }
	.main-brand .body .logo { margin-right:0; margin-bottom: 15px;text-align:center;padding:0;}
	.main-brand .body .info dl dt { font-size:19px; font-weight:500;}
	.main-brand .body .info dl dt p span { display: none; }
	.main-brand .body .info dl dd { font-size:13px; padding-top:10px;color:#8d9096;font-weight:400;line-height:22px}
	.main-bottom {padding:0 15px;}
	
	#footer { padding:80px 0 30px; }
	#footer .inner { padding-right:15px;}
	#footer .etc .notice { right:15px; }
	#footer .sns { top:-57px; }
	#footer .etc , #footer .etc .notice a{font-weight:400;font-size:15px;}
	.about-view{overflow-x:hidden;}
	.about-view .section1 .t2 strong{}
	.about-view .header .inner { height: 80px; }
	.about-view .header h1 a { }
	.about-view .header h1 img { width: 100px; }
	.about-view .header h2 { background-size:auto 20px; width:80px; height: 20px; }
	.about-view .section1 .t1 { font-size:30px; margin-bottom: 150px; }
	.about-view .section1 .t2 { font-size:28px; }
	.about-view .section1 .t2 img{width:60px}
	.about-view .section1 .t3 { font-size:13px; }
	.about-view .section1 .t3 dd{width:80%}
	.about-view .section1 .t3 dt { font-size:26px; margin-bottom:5px}
	.about-view .section1 .t4 dl { display: flex; flex-direction: column-reverse; }
	.about-view .section1 .t4 dl dt span { width:auto; display: block;  font-size:30px;  margin-bottom: 10px; } 
	.about-view .section1 .t4 dl dt small { width:auto; display: block; font-size:14px; margin-bottom: 15px;  }
	.about-view .section1 .t4 dl dd { font-size:13px; margin-right:0; display: block; }
	.about-view .section2 .t1 { font-size:30px; width:40px; margin-bottom: 40px; }
	.about-view .section2 .t1 small { right:-40px; font-size:18px; width:28px;}
	.about-view .section2 .t2 { font-size:13px; }
	.about-view .section3 { padding:90px 0 100px;}
	.about-view .section3 .tit { display: block; font-size:30px; width:auto; margin:0; margin-bottom: 20px; }
	.about-view .section3 .info { display: block; font-size:14px; padding-top:0 !important; }
	.about-view .section3 .info .tel { padding-top:0; }
	.about-view .section3 .map { margin:30px 0 90px;}
	.about-view .section3 .addr { padding-top:60px; }
	.about-view .section3 .addr .info strong { font-size:13px; margin-bottom: 5px; }
	.about-view .section3 .addr .info div { font-size:14px; }
	.about-view .section3 .sns .btns a { width:90px; height: 90px; font-size:30px;line-height: 87px;margin:0 5px;}
	.about-view .section1.bg .t3 dd{width:80%}
	.about-view .section1 .t3.rg dd{margin-left:20%}
	.about-view .section3 .info dl dt strong{font-weight:400}
	.about-view .section3 .info dl dt{width:70px}
	.about-view .section3 .sns .tit2{font-size:30px;margin-bottom:20px;}
	.about-view .section3 .sns .btns a{border-width:.5px;font-size:25px;}

	.h2-sub { margin:25px 0; font-size:25px; }
	.project-list ul{margin-top:30px}
	.project-list ul li { margin-bottom: 20px; }
	.project-list ul li a .txt-box { font-size:12px; }
	.project-list ul li a .txt-box dl dt { font-size:25px; margin-bottom: 5px; }
	.project-list ul li a:after { display: none; }
	.project-list ul li a .end { padding:10px; font-size:13px; }
	.project-list .list-more { margin:30px 0;}
	.project-list ul li a .img{height:180px;}
	.project-list ul li a:before{opacity:1;background:rgba(0,0,0,.3)}
	.project-list .list-more a{width:50px;height:50px;font-size:22px}

	#pro-header.header .inner{ height: 64px; }
	.project-view .header h1 img { width: 100px; }
	.project-view .header h2 { background-size:auto 20px; width:80px; height: 20px; }
	.project-view .visual h3 { font-size:30px; margin-bottom: 10px;}
	.project-view .visual h3 span { font-size:60px; }
	.project-view .visual .h3-desc { font-size:14px; }
	.project-view .section1 { padding: 40px 0; }
	.project-view .section1 .tit { font-size:30px; margin-bottom: 20px; }
	.project-view .section1 .txt { font-size:16px; line-height: 1.6; }
	.project-view .section1 .txt small { font-size:12px; }
	.project-view .section2 { padding:80px 0; }
	.project-view .section2 .tit { font-size:14px;  margin-bottom: 30px;}
	.project-view .section2 .tit strong { font-size:20px; }
	.project-view .section2 .txt { font-size:13px; line-height: 1.6; }
	.project-view .section3 { padding:90px 0; }
	
	.project-view .section3 .tit,
	.project-view .section4 .tit,
	.project-view .section5 .tit,
	.project-view .section6 .tit, .section7 .tit, .section8 .tit, .section9 .tit{ font-size:25px; margin-bottom: 0;font-weight:700 }
	.project-view .section3 .tit-desc,
	.project-view .section4 .tit-desc,
	.project-view .section5 .tit-desc,
	.project-view .section6 .tit-desc , .section7 .tit-desc, .section8 .tit-desc, .section9 .tit-desc{ font-size:14px; margin-bottom: 40px; }
	.project-view .section3 ul { margin: 0; }
	.project-view .section3 ul li { padding: 0; float:none; width:auto; margin-bottom: 30px; }
	.project-view .section3 ul li .subj { font-size:18px; margin:9px 0 15px;}
	.project-view .section4 { padding:90px 0; }
	.project-view .section4 .inner { white-space: normal;}
	.project-view .section4 .head { display: block; text-align: center; margin: 0 0 30px; }
	.project-view .section4 .body { display: block; padding: 0; }
	.project-view .section4 ul li { display: block; width:auto; margin: 0 0 30px;}
	.project-view .section4 .body.swiper-container{width:100%;}
	
	.project-view .section5 { padding:90px 0; }
	.project-view .section5 .body ul { margin: 0; }
	.project-view .section5 .body ul li { float:none; width:auto; padding: 0 0 30px;}
	.project-view .section5 .body ul li a dl dt strong {font-size:18px; height: auto; line-height: 1.5; }
	.project-view .section5 .body ul li a dl dt p { font-size:14px; }
	.project-view .section5 .body ul li a dl dd { font-size:13px; }
	.project-view .section5 .body ul li a dl dt {padding:8px 0 10px;}
	
	.project-view .section6 { padding:90px 0;}
	.project-view .section6 .inner { display: block; }
	.project-view .section6 .inner .head { margin: 0 0 30px; }
	.project-view .section6 .inner .body { display: block; }
	
	.project-view .section6 .inner .body .logo { text-indent: 0; }
	.project-view .section6 .inner .body .logo img { height: 90px; }
	.project-view .section6 .inner .body .t1 { font-size:20px; padding-top:30px; }
	.project-view .section6 .inner .body .t2 p { font-size:13px; }
	.project-view .section6 .inner .body .t3 { font-size:13px; }
	
	.story-view .head { margin-bottom: 40px; }
	.story-view .head .h2 { font-size:14px; }
	.story-view .head .h3 { font-size:25px; margin-bottom: 15px; }
	.story-view .head .date { font-size:12px;}
	.story-view .body { padding:0 0 80px; width:calc(100% - 40px);}
	.story-view .body .text1  {font-size:18px; }
	
	.mb70 { margin-bottom: 35px !important; }
	.mb80 { margin-bottom: 40px !important; }
	.mb100 { margin-bottom: 50px !important; }
	.story-view .body .desc { font-size:14px; }
	.story-view .body .writer { padding:0 0 30px; }
	.story-view .body .orthers section article figure p{display:flex;align-items:center;background:#f8f8f8;height:130px}
	.story-view .body .writer dl dt { font-size:17px; margin-bottom: 10px; }
	.story-view .body .writer dl dd { font-size:14px; }
	.story-view .body .text2 { font-size:14px; line-height: 1.7;}
	.story-view .body .map { height: 250px; }
	.story-view .body .address { padding:18px 0; font-size:14px; }
	.story-view .body .copy { font-size:12px; padding:15px 0 70px; }
	.story-view .body .tag { padding:18px 0;line-height:24px; }
	.story-view .body .tag a{font-size:14px;}
	.story-view .body .tag ul li { font-size:13px; margin-right:7px;}
	.story-view .body .tag .share {padding-top:8px;}
	.story-view .body .tag .share a { font-size:14px; }
	.story-view .body .tag .share a i { font-size:16px; }
	.story-view .body .orthers section article figcaption { font-size:13px;height:48px }
	
	.sort a { font-size:18px; margin-right:10px; }
	.story-list ul {margin: 0;justify-content:space-between;}
	.story-list ul li {width:calc(50% - 10px);padding: 0 0 30px;margin-right:0;}
	.story-list ul li a .img{height:200px}
	.story-list ul li a .t3 { font-size:14px; height: auto; line-height: 1.5; margin:15px 0 10px;}
	.pagenate { margin: 50px 0 100px; }
	.pagenate a { width:25px; height: 25px; font-size:18px; line-height: 22px; margin:0 5px;}
	.pagenate .num a{color:#a1a3a6}
	.pagenate .num a strong{color:#000}
	.story-view .head .share .btn-share i{font-size:25px;}
	.pc { display: none; }
	.m { display: block; }

	.share-items , .share-button{width:45px;}
	.story-list .projectSearchResult ul li a .img{height:auto;}
	.storySearchResult ul , .projectSearchResult ul{padding:30px 0;}
	.search-top{margin-top:60px}
	.story-list .storySearchResult ul li a .t2 , .story-list .projectSearchResult ul li a .t2{font-size:17px}
	h2.storySearchResult{padding-top:0}
	.project-view .section3 ul, .project-view .section4 ul , .project-view .section8 ul li, .project-view .section5 .body ul{flex-direction:column;}
	.projectSearchResult .nodata , .storySearchResult .nodata{margin-bottom:70px}
}

@media only screen and (max-width:480px){
	.inner.bbs{overflow-x:auto;}
	.sort{overflow-y:hidden;height:26px;}
	.sort-container{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px;}
	.sort-scroll{width:435px;}
	.share-items{right:40px}
	.about-view .body .nav{display:none;}
	#pro-header.fixed{height:64px}
	#pro-header.fixed .list-back{color:#000}
	.project-view .section3 , .project-view .section4 , .project-view .section5 , .section7, .section8, .section9{padding:150px 0}
	
	.story-list ul li{margin:0;padding-bottom:55px;width:100%;}
	.story-list ul li:last-child{padding-bottom:0}
	.story-list ul li a .img{height:220px;}
	.story-list ul li a .s1{font-size:11px;height:25px;line-height:25px;width:80px;border-radius:5px;font-weight:400;margin-top:10px;}
	.story-list ul li a .t1{margin:10px 0 5px;font-size:15px;font-weight:400;color:#a1a3a6}
	.story-view .body img{height:auto !important}
	.b_list colgroup col:first-child{width:40px !important}
	.b_list td{padding:25px 0}
	.b_list .tit a{font-size:18px;font-weight:600;line-height:24px;}
	.b_list .tit{margin-bottom:10px;align-items:flex-start;}
	.b_list .tit strong{font-size:13px;line-height:20px;padding:0 5px;margin-top:3px;}
	.b_list .con{font-size:13px;line-height:20px;font-weight:400;max-height:60px}
	
	.b_view{margin-top:45px}
	.b_view .subject h3{font-size:20px;}
	.b_view .subject p{margin-top:30px}
	.board_search{margin:30px 0 20px}
	.board_search select{font-size:13px;width:80px;height:20px;}
	.board_search input{font-size:13px;width:190px;height:20px;}
	.board_search i{font-size:25px;}
	.b_list .num{font-size:20px;padding-top:23px}
	.b_view .con_in , .b_view .file{padding:25px 0}
	.b_view .file a{font-size:13px;font-weight:300;}
	.b_view .con_in p{color:#333;font-weight:400;font-size:15px;}
	.boardblock{margin:50px auto 100px}
	.btn{font-size:16px;height:45px;line-height:45px;}
	.project-list ul li a .img{height:150px;}


	.boardblock .right{margin: 0 auto;}
	.project-view{overflow-x:hidden;}
	.project-view .section3 ul li{margin-bottom:55px}
	.project-view .section3 ul li:last-child{margin-bottom:0;}
	.project-view .section3 ul li .img{height:220px;overflow:hidden;}
	#none_template{padding:20px}
	.project-view .section3 ul , .project-view .section8 ul li , .project-view .section5 .body ul{flex-direction:column}
	.project-view .section9 ul{margin:0}
	.project-view .section9 ul li{width:100%}
	.project-view > .in h3{font-size:45px}
	.project-view > .in .h3-desc{font-size:18px;padding:0 20px}
	.project-view .section3 ul li .subj a{font-size:17px}
	.project-view .section3 ul li dl dd{padding-top:0;max-height: 66px}
	.project-view .section3 ul li dd a{font-size:14px;opacity:.7}
	.project-view .section3 ul li dl dt span{min-height:unset;font-weight:100}
	.share-items{top:57px}

	.project-view .section4 .head{width:100%}
	.project-view .section4 ul li .info .t2 a{font-size:20px;}
	.project-view .section4 ul li .info .t3 a{font-size:15px;}
	.project-view .section4 ul li{margin-bottom:55px;}
	.project-view .section4 ul li:last-child{margin-bottom:0;}
	.inner-con{height:150px;padding:10px;margin-bottom:25px}
	.inner-con:last-child{margin-bottom:0}
	.inner-con h3{font-size:20px}
	.inner-con .s-tit{font-size:12px;margin:0;}
	.inner-con .con{display:none;}

	.project-view .section5 .body ul li .img{height:220px}
	.project-view .section8 ul li .img{height:auto;}
	.project-view .section8 ul li .subj , .project-view .section9 ul li .subj{font-size:17px;margin:9px 0 15px}
	.project-view .section8 ul li dl dt span, .project-view .section9 ul li dl dt span{font-weight:100;font-size:15px;}
	.project-view .section8 ul li dl dd , .project-view .section9 ul li dl dd{padding-top:0;font-size:15px;max-height:70px}
	.project-view .section8 ul li , .project-view .section9 ul li{margin-bottom:55px}
	.project-view .section8 ul li:last-child , .project-view .section9 ul li:last-child{margin-bottom:0}
	.project-view .section9 .swiper-container{max-width:100%}
	.project-view .section9 .head h3{font-size:17px;padding-bottom:0;}
	.project-view .section9 .head p{font-size:14px;font-weight:100}
	.project-view .section9 .head{margin-bottom:30px}
	.project-view .sec9_con{border-top:.5px solid #fff;padding:80px 0;margin-bottom:0}
	.project-view .sec9_con:last-child{border-bottom:.5px solid #fff}
	.project-view .section9 .swiper-slide{font-size:14px;}
	.project-view .section5 .body ul li{padding-bottom:55px;}
	.project-view .section5 .body ul li:last-child{padding-bottom:0;}
	.project-view .section5 .body ul li dl dt{padding-bottom:10px}
	.project-view .section5 .body ul li dl dt p{font-size:15px;padding-bottom:0}
	.project-view .section5 .body ul li dl dt strong{font-size:18px;font-weight:600}
	.project-view .section5 .body ul li dl dd{font-size:14px;max-height:64px}
	.search-top{width:calc(100% - 30px);}
	.search-top form{width:100%;}
	.search-top input{width:calc(100% - 50px)}
	.project-view .section4 ul.swiper-wrapper{flex-direction:column;}
	.list-back{left:15px}
	#pro-header.header .right .m-menu{height:auto;width:auto;}
	.story-list ul li a .t1{font-size:13px;}
	.story-list ul li a .t2{font-size:17px;}
	.story-list .projectSearchResult ul li a .img img{height:auto;width:100%;}
	.about-view .inner{padding-left:15px}
	.story-view .head .inner .in{margin-top:40px;}

}

/* skipToContent */
#skipToContent { position:absolute; top:0px; left:0; width:100%; z-index:999; }
#skipToContent a { display:block; height:0px; width:0px; margin-bottom:-1px; overflow:hidden; text-align:center; color:#fff; white-space:nowrap; background:#001; }
#skipToContent a:focus, #skipToContent a:active { height:auto; width:auto; padding:5px; margin-bottom:10px; }

#returnToPageTop { position:absolute; bottom:0px; left:0; width:100%; z-index:999; }
#returnToPageTop a { display:block; height:0px; width:0px; margin-bottom:-1px; overflow:hidden; text-align:center; color:#fff; white-space:nowrap; background:#001; }
#returnToPageTop a:focus, #returnToPageTop a:active { height:auto; width:auto; padding:5px; margin-bottom:10px; }