267 lines
8.6 KiB
CSS
267 lines
8.6 KiB
CSS
@font-face {
|
|
src: url(/static/font/SourceHanSansK-Medium.woff) format('woff');
|
|
font-family: 'SourceHanSansK';
|
|
font-weight: 600;
|
|
}
|
|
@font-face {
|
|
src: url(/static/font/SourceHanSansK-Regular.woff) format('woff');
|
|
font-family: 'SourceHanSansK';
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
src: url(/static/font/SourceHanSansK-ExtraLight.woff) format('woff');
|
|
font-family: 'SourceHanSansK';
|
|
font-weight: 100;
|
|
}
|
|
@font-face {
|
|
src: url(/static/font/NanumSquareR.woff) format('woff');
|
|
font-family: 'NanumSquare';
|
|
}
|
|
|
|
*{margin:0;padding:0;}
|
|
ol, ul{padding:0;margin:0;}
|
|
li{list-style:none;}
|
|
a:link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:visited {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: inherit;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
|
|
/* 기본 */
|
|
.wixon__wrap{width:100%;font-family: 'SourceHanSansK', sans-serif;}
|
|
.font__namum{font-family:'NanumSquare', sans-serif !important;}
|
|
|
|
/* header */
|
|
header{width:100%;max-width:1920px;margin:0 auto;height:220px;position:relative;}
|
|
.header__inner{
|
|
width:1200px;
|
|
height:219px;
|
|
margin:0 auto;
|
|
display:flex;
|
|
justify-content:space-between;
|
|
position:relative;
|
|
border-bottom:1px solid #e7e6e7;
|
|
}
|
|
h1{margin-top:70px;}
|
|
.nav__div{
|
|
position:fixed;
|
|
right:0;
|
|
background:#fff;
|
|
width:28px;
|
|
height:100%;
|
|
padding:20px 20px 0 20px;
|
|
border-left:1px solid #901438;
|
|
font-size:16px;
|
|
letter-spacing:8.5px;
|
|
font-weight:300;
|
|
color:#901438;
|
|
cursor:default;
|
|
text-align:center;
|
|
z-index: 9;
|
|
-webkit-box-sizing: initial !important;
|
|
}
|
|
.nav__div .nav__title{padding-top:30px;writing-mode:vertical-lr;font-family: 'SourceHanSansK', sans-serif !important ;}
|
|
.nav__div .uk-icon{cursor:pointer;}
|
|
|
|
/* toggle menu */
|
|
.menu__wrap{
|
|
position:fixed;
|
|
right:-440px;
|
|
background:#e7e6e7;
|
|
width:340px;
|
|
height:100%;
|
|
padding:50px 20px;
|
|
z-index:1;
|
|
display:none;
|
|
}
|
|
.menu__box{background:#fff;height:60%;border-radius:20px;}
|
|
.menu__close{position:absolute;top:20px;right:25px;cursor:pointer;}
|
|
.menu__box ul{padding:8% 20%;}
|
|
.menu__box ul li{font-size:20px;text-align:center;padding:30px 0;border-bottom:1px solid #e7e6e7;}
|
|
.menu__box ul li:last-child{border-bottom:none;}
|
|
|
|
/* LOGIN */
|
|
.login__section{position:absolute;width:100px;left:50%;top:60%;text-align:center;transform:translateX(-50%);}
|
|
.login__section li{font-size:14px;}
|
|
.login_nav{display:none;}
|
|
.login__btn{border-bottom:1px solid #ccc;}
|
|
|
|
/* main index */
|
|
.container{width:100%;max-width:1920px;margin:85px auto;}
|
|
.content{width:72.12%;margin:0 auto;border-bottom:1px solid #e7e6e7;}
|
|
.content__inner{width:100%;}
|
|
.content__inner::after{content:"";display:block;clear:both;}
|
|
.post__lists0, .post__lists1, .new__div{float:left;}
|
|
.post__lists0, .post__lists1{width:34%;}
|
|
.post__lists0{padding-right:3%;}
|
|
.post__lists1{padding-right:3%;}
|
|
.new__div{width:26%;}
|
|
.post__lists li{width:100%;height:auto;}
|
|
.post__lists li a{display:block;width:100%;height:100%;}
|
|
.lists__img{width:100%;height:auto;max-height:580px;overflow:hidden;}
|
|
.lists__img img{width:100%;}
|
|
.lists__desc{padding-top:25px;}
|
|
.lists__category{
|
|
width:60px;
|
|
font-size:0.7em;
|
|
color:#898989;
|
|
text-align:center;
|
|
border-bottom:1px solid #c9c9c9;
|
|
margin:0 auto;
|
|
}
|
|
.lists__title{
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
display:-webkit-box;
|
|
-webkit-line-clamp:2;
|
|
-webkit-box-orient:vertical;
|
|
text-align:center;
|
|
word-break:keep-all;
|
|
padding:0 30px;
|
|
font-size: 1.4em;
|
|
line-height: 1.3;
|
|
margin:13px 0 20px;
|
|
color:#111;
|
|
font-family: 'SourceHanSansK', sans-serif !important;
|
|
}
|
|
.lists__content{
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
display:-webkit-box;
|
|
-webkit-line-clamp:3;
|
|
-webkit-box-orient:vertical;
|
|
color:#898989;
|
|
font-size:0.85em;
|
|
padding:0 20px;
|
|
text-align:center;
|
|
word-break:keep-all;
|
|
line-height:1.3;
|
|
}
|
|
.lists__date{text-align:center;font-size:0.8em;margin:20px 0 60px;color:#898989;}
|
|
.lists__date b{color:#111;font-weight:400;}
|
|
.fake__lists{display:none;}
|
|
|
|
.new__post__div{width:100%;}
|
|
.new__post__div h2{font-size:1.45em;letter-spacing:-1px;text-indent:10px;margin-bottom:10px;}
|
|
.new__posts{width:100%;}
|
|
.new__posts li{border-top:1px solid #dcdcdc;width:100%;}
|
|
.new__desc{width:100%;}
|
|
.new__category{width:35px;color:#898989;border-bottom:1px solid #c9c9c9;font-size:0.7em;padding-top:12px;}
|
|
.new__title{
|
|
width:100%;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
display:-webkit-box;
|
|
-webkit-line-clamp:3;
|
|
-webkit-box-orient:vertical;
|
|
word-break:keep-all;
|
|
font-size: 0.75em;
|
|
color:#666;
|
|
margin:20px 0 15px;
|
|
font-weight:600;
|
|
}
|
|
.new__date{font-size:0.7em;margin-bottom:30px;color:#898989;}
|
|
.new__date b{color:#111;font-weight:400;}
|
|
.post__lists li:hover, .new__posts li:hover{text-shadow:1px 0px 1px RGBA(0,0,0,0.3);}
|
|
.post__lists li:hover .lists__img{box-shadow:1px 1px 5px RGBA(144,20,68,0.2);}
|
|
|
|
/* footer */
|
|
footer{width:100%;height:430px;background-color:#100e11;position:relative;z-index:9999;}
|
|
.footer__inner{
|
|
width:100%;
|
|
max-width:1200px;
|
|
margin:0 auto;
|
|
display:flex;
|
|
justify-content:space-between;
|
|
font-weight:600;
|
|
color:#777;
|
|
}
|
|
.footer__tel{font-size:0.65em;letter-spacing:-0.25px;margin:0;padding-top:175px;}
|
|
footer address{display:block;font-size:0.65em;letter-spacing:-0.25px;margin:3px 0 0;}
|
|
.copywriter{font-size:0.65em;letter-spacing:-0.25px;text-transform:uppercase;margin:20px 0 15px;}
|
|
.footer__logo{padding-top:155px;}
|
|
.slogan{font-size:0.65em;letter-spacing:1px;text-transform:uppercase;margin:15px 0 0;}
|
|
.footer__info ul{display:flex;}
|
|
.footer__info ul li:first-child{padding-top:25px;margin-right:75px;}
|
|
.footer__info ul li:last-child{padding-top:15px;}
|
|
|
|
/* post */
|
|
.container__post{margin-bottom:90px;}
|
|
.content__info{width:100%;padding-top:60px;}
|
|
.content__category{font-size:0.7em;text-indent:15px;color:#898989;margin-bottom:5px;}
|
|
.title__div{
|
|
width:100%;height:50px;
|
|
line-height:50px;
|
|
border-top:1px solid #636363;
|
|
border-bottom:1px solid #d2d2d2;
|
|
display:flex;justify-content:space-between;
|
|
}
|
|
.content__title{
|
|
line-height:50px;
|
|
text-indent:13px;
|
|
font-size:1.1em;
|
|
color:#242424;
|
|
font-weight:400;
|
|
margin:0;
|
|
font-family: 'SourceHanSansK', sans-serif !important;
|
|
}
|
|
.content__date{margin:0;font-size:0.75em;padding-right:60px;}
|
|
.content__date span{margin-right:10px;font-size:1.2em;}
|
|
.content__desc{padding:40px 55px;font-size:0.85em;color:#343434;}
|
|
.etc__list{width:100%;}
|
|
.other__list{width:100%;border-top:1px solid #727272;border-bottom:1px solid #727272;}
|
|
.other__list ul{width:100%;}
|
|
.other__list li{width:100%;height:50px;display:flex;justify-content:left;margin:0;position:relative;}
|
|
.other__list__way{text-indent:13px;line-height:50px;margin:0;font-size:0.9em;color:#636363;}
|
|
.other__list__title{
|
|
margin:0;
|
|
width:630px;
|
|
line-height:50px;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
padding-left:55px;
|
|
font-size:0.75em;
|
|
}
|
|
.other__list__date{position:absolute;right:25px;top:15px;margin:0;font-size:0.75em;}
|
|
.other__list__date span{margin-right:10px;font-size:1.2em;}
|
|
.btn__area{text-align:right;padding-bottom:145px;}
|
|
.btn__area a{
|
|
display:inline-block;
|
|
width:130px;height:40px;
|
|
line-height:40px;
|
|
margin-top:25px;margin-right:12px;
|
|
text-align:center;
|
|
}
|
|
.btn__area .btn__lists{background-color:#000;color:#fff;}
|
|
.btn__area .btn__delete{border:1px solid #f0506e;color:#f0506e;}
|
|
.btn__area .btn__edit{border:1px solid #4da7ca;color:#4da7ca;}
|
|
|
|
/* login */
|
|
.uk-form-stacked{min-width:640px;width:30%;margin:0 auto;}
|
|
.login__btn{width:100%;}
|