 @charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
@keyframes left{
	0%{-webkit-transform:translateX(-400px);transform:translateX(-400px); opacity: 0;}
	60%{-webkit-transform:translateX(70px);transform:translateX(70px); opacity: 1;}
	100{-webkit-transform:translateX(0px);transform:translateX(0px);  opacity: 1;}
}

@keyframes right{
	0%{-webkit-transform:translateX(400px);transform:translateX(400px); opacity: 0;}
	60%{-webkit-transform:translateX(-70px);transform:translateX(-70px); opacity: 1;}
	100{-webkit-transform:translateX(0px);transform:translateX(0px); opacity: 1;}
}
@keyframes move02{
	0%{left: 0;}
	100%{left: 80%;}
}
@keyframes fadeUp{
	0%{opacity: 0; transform:translateY(100px);}
	100%{opacity: 1;  transform:translateY(0px);}
}
/* sub01_01 */
.about .head {margin-bottom:150px;}
.about .head .tt {font-size:40px; font-weight:500; color:#242424; line-height:1.5em; animation: left 2.5s both .3s;}
.about .head h3 {font-size:90px; font-weight:900; color:#242424; line-height:1em; margin-bottom:30px; animation: left 2.5s both .6s;}
.about .head p {font-size:20px; color:#454545; line-height:1.7em;}
.about .head p.p1 {animation: fadeUp 0.6s both 2s;}
.about .head p.p2 {animation: fadeUp 0.6s both 2.5s;}
.about .head p.p3 {animation: fadeUp 0.6s both 3s;}
.about .cnt {position:relative;}
.about .cnt .txt {font-family:'Pretendard'; letter-spacing:-.02em; position:absolute; top:0; left:0; width:100%; z-index:1;}
.about .cnt .txt .tt1 {font-size:270px; font-weight:700; line-height:1em; color:#f2f2f2; -webkit-text-stroke: 3px #000;}
.about .cnt .txt .tt2 {font-size:210px; font-weight:500; line-height:1em; color:transparent; -webkit-text-stroke: 3px #000; text-align:right;}
.about .cnt .col .txt-box p {font-size:20px; line-height:1.5em; color:#454545; }
.about .cnt01 {padding-top:150px; margin-bottom:220px;}
.about .cnt01 .txt .tt1 {margin-bottom:30px;}
.about .cnt01 .col {display:flex; align-items:flex-end;}
.about .cnt01 .col .img-box {max-width:755px; width:100%;}
.about .cnt01 .col .txt-box {width:1%; flex:1 1 auto; padding-left:30px; text-align:right;}
.about .cnt01 .col .txt-box p {margin-bottom:30px;}
.about .cnt01 .col .txt-box p:last-child {margin-bottom:0;}
.about .cnt02 {padding-top:140px;}
.about .cnt02 .txt .tt1 {margin-bottom:300px;}
.about .cnt02 .col .img-box {margin-bottom:80px;}
.about .cnt02 .col .txt-box p {text-align:center;}
/* sub02_01 */
.business .head {height:500px; background:url('../images/sub/business-bg.jpg') center center no-repeat; padding-top:30px;}
.business .head h3 {font-size:90px; line-height:1.1em; color:#fff; letter-spacing:.01em; text-align:right; font-weight:400; font-family:'Nanum Myeongjo';}
.business .cnt {margin-bottom:150px;}
.business .cnt:last-child {margin-bottom:100px;}
.business .cnt .tit {position:relative; padding-bottom:24px; margin-bottom:50px;}
.business .cnt .tit:after {content:''; width:100%; height:5px; background:#0033ff; position:absolute; left:0; bottom:0;}
.business .cnt .tit h3 {font-size:80px; line-height:1.1em; color:#242424; font-family:'Pretendard'; font-weight:400; letter-spacing:0;}
.business .cnt .tit h3 strong {font-weight:800; color:#0033fe;}
.business .cnt .tit h4 {font-size:42px; line-height:1.2em; color:#0033fe; font-family:'Pretendard';}
.business .cnt p {font-size:20px; color:#454545; line-height:1.5em; margin-bottom:24px;}
.business .cnt p:last-child {margin-bottom:0;}
.business .cnt01 {margin-top:-50px;}
.business .cnt01 .tit {display:inline-block;}
.business .cnt03 .tit {display:inline-block;}
.business .btn {text-align:center;}
.business .btn a {display:inline-block; line-height:60px; color:#fff; background:#0033fe; text-align:center; font-size:18px; font-weight:500; padding:0 50px;}
/* sub03_01 */
.book-tab {margin-bottom:60px;}
.book-tab ul {display:flex; justify-content:center; flex-wrap:wrap; margin:0 -8px -16px;}
.book-tab ul li {padding:0 8px; width:auto; margin-bottom:16px;}
.book-tab ul li a {display:inline-block; line-height:48px; background:#f2f2f2; border:1px solid #313842; color:#313842; font-size:24px; font-weight:500; border-radius:25px; padding:0 30px;}
.book-tab ul li.active a {color:#fff; background:#313842; font-weight:700;}

.book-list {position:relative; overflow:hidden; padding:25px 0 0 0; border-top:2px solid #313842;}
.book-list ul {display:flex; flex-wrap:wrap; align-items:flex-end; margin:0 -20px;}
.book-list ul li {padding:0 20px; width:20%; border-bottom:2px solid #313842; margin-bottom:100px;}
.book-list ul li a {display:block; padding-top:30px;}
.book-list ul li a:hover {padding-top:0; padding-bottom:30px;}
.book-list ul li a:hover .img-box {box-shadow:0 10px 7px rgba(0,0,0,0.2); transition:all 0.4s;}
/* sub03_deatil */
.book-detail .col {display:flex; margin-bottom:100px;}
.book-detail .col .img-box {max-width:400px; width:100%;}
.book-detail .col .img-box .pic {position:relative; height:0; padding-bottom:150%; overflow:hidden;}
.book-detail .col .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.book-detail .col .txt-box {width:1%; flex:1 1 auto; padding-left:60px;}
.book-detail .col .txt-box .box {margin-bottom:70px;}
.book-detail .col .txt-box .tit {padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid #ddd; display:flex; justify-content:space-between; align-items:center;}
.book-detail .col .txt-box .tit h3 {font-size:30px; line-height:1.2em; color:#242424;}
.book-detail .col .txt-box .tit h4 {font-size:26px; line-height:1.3em; color:#242424;}
.book-detail .col .txt-box .tit ul {display:flex; margin:0 -2px;}
.book-detail .col .txt-box .tit ul li {padding:0 2px;}
.book-detail .col .txt-box .tit ul li span {display:inline-block; line-height:24px; border:1px solid; font-size:12px; font-weight:500; letter-spacing:-.04em; padding:0 14px;}
.book-detail .col .txt-box .tit ul li.publish span {border-color:#313842; color:#fff; background:#313842;}
.book-detail .col .txt-box .tit ul li.keyword span {border-color:#313842; color:#313842; background:#fff;}
.book-detail .col .txt-box .txt h5 {font-size:20px; line-height:1.4em; color:#242424; margin-bottom:16px;}
.book-detail .col .txt-box .txt p {font-size:16px; line-height:1.8em; color:#454545; margin-bottom:12px;}
.book-detail .col .txt-box .txt p:last-child {margin-bottom:0;}
.book-detail .col .txt-box .txt ul {display:flex; margin:0 -5px;}
.book-detail .col .txt-box .txt ul li {width:100%; padding:0 5px;}
.book-detail .col .txt-box .txt ul li a {display:block; line-height:58px; border:1px solid #313842; border-radius:10px; text-align:center; font-size:20px; font-weight:500; color:#313842; background:#fff; transition:all 0.4s;} 
.book-detail .col .txt-box .txt ul li a:hover {background:#313842; color:#fff;}
.book-detail .cnt {margin-bottom:60px;}
.book-detail .cnt h3 {font-size:26px; line-height:1.3em; color:#242424; margin-bottom:24px;}
.book-detail .cnt .box {padding:24px 0 30px; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.book-detail .cnt .box li {font-size:16px; color:#454545; line-height:1.8em; height:30px;}
.book-detail .cnt .box li:last-child {margin-bottom:0;}
.book-detail .cnt .box p {font-size:16px; color:#454545; line-height:1.8em; margin-bottom:30px;}
.book-detail .cnt .box p:last-child {margin-bottom:30px;}
.book-detail .btn {text-align:center;}
.book-detail .btn a {display:inline-block; line-height:50px; color:#fff; background:#313842; font-size:18px; font-weight:500; padding:0 50px;}
/* sub04_01 */
.writer .cnt a {display:inline; font-size:85px; font-weight:700; color:#000000; font-family:'Pretendard'; line-height:1.5em;}
.writer .cnt a p {display:inline; white-space:nowrap;}
.writer .cnt a:hover p {color:#334860; text-shadow:0px 3px 3px rgba(108,108,108,0.3); font-weight:900; letter-spacing:-.018em;}
.writer .cnt a .img {display:inline; width:59px; height:85px; margin-right:8px;}
.writer .cnt a .img img {display:inline; vertical-align:middle; width:59px; height:85px;}

/* sub04_01_detail */
.writer-detail .col {display:flex; margin-bottom:100px;}
.writer-detail .col .img-box {max-width:400px; width:100%;}
.writer-detail .col .img-box .pic {position:relative; height:0; padding-bottom:150%; overflow:hidden;}
.writer-detail .col .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.writer-detail .col .txt-box {width:1%; flex:1 1 auto; padding-left:60px; display:flex; flex-direction:column; justify-content:space-between;}
.writer-detail .col .txt-box .tit {padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid #ddd;}
.writer-detail .col .txt-box .tit h3 {font-size:30px; line-height:1.2em; color:#242424;}
.writer-detail .col .txt-box .tit h4 {font-size:26px; line-height:1.3em; color:#242424;}
.writer-detail .col .txt-box .tit h5 {font-size:20px; line-height:1.4em; color:#242424;}
.writer-detail .col .txt-box .txt p {font-size:16px; line-height:1.8em; color:#454545; margin-bottom:12px;}
.writer-detail .col .txt-box .txt p:last-child {margin-bottom:0;}
.writer-detail .col .txt-box .txt .tt {font-size:18px; color:#454545; line-height:1.5em;}
.writer-detail .col .txt-box .txt .tt strong {color:#242424; font-weight:500;}
.writer-detail .cnt .tit {font-size:26px; line-height:1.2em; font-weight:700; color:#242424; margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid #ddd;}
.writer-detail .cnt ul {display:flex; flex-wrap:wrap; margin:0 -10px -30px;}
.writer-detail .cnt ul li {padding:0 10px; margin-bottom:30px;}
.writer-detail .writer-book {margin-bottom:100px;}
.writer-detail .writer-book ul li {width:16.6666667%;}
.writer-detail .writer-book ul li .pic {position:relative; height:0; padding-bottom:146.9%; overflow:hidden;}
.writer-detail .writer-book ul li .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.writer-detail .writer-history {padding-bottom:100px; margin-bottom:60px; border-bottom:1px solid #ddd;}
.writer-detail .writer-history ul li {width:25%;}
.writer-detail .writer-history .inner .pic {position:relative; height:0; padding-bottom:100%; overflow:hidden;}
.writer-detail .writer-history .inner .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.writer-detail .writer-history .inner .txt {background:#fff; padding:20px;}
.writer-detail .writer-history .inner .txt .date {font-size:14px; color:#242424; line-height:1.8em; margin-bottom:6px; font-family:'Roboto';}
.writer-detail .writer-history .inner .txt h4 {font-size:20px; line-height:1.4em; color:#242424; margin-bottom:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.writer-detail .writer-history .inner .txt p {font-size:15px; margin-bottom:40px; line-height:1.6em; height:calc(1.6em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.writer-detail .writer-history .inner .txt .tt {display:flex; margin:0 -10px; justify-content:space-between;}
.writer-detail .writer-history .inner .txt .tt span {font-size:13px; color:#686868; line-height:1.8em; padding:0 10px;}
.writer-detail .btn {text-align:center;}
.writer-detail .btn a {display:inline-block; line-height:50px; color:#fff; background:#313842; font-size:18px; font-weight:500; padding:0 50px;}
/* sub05 */
.lnb {margin-bottom:60px;}
.lnb ul {display:flex; justify-content:center; margin:0 -5px;}
.lnb ul li {width:auto !important; padding:0 5px;}
.lnb ul li a {display:block; line-height:48px; background:#f2f2f2; border:1px solid #313842; color:#313842; font-size:24px; font-weight:500; padding:0 30px; border-radius:25px;}
.lnb ul li.active a {background:#313842; font-weight:700; color:#fff;}
/* sub05_01 */
.news {padding:25px 0 40px 0; border-top:2px solid #313842; border-bottom:1px solid #ddd;}
.news ul {display:flex; flex-wrap:wrap; margin:0 -10px;}
.news ul li {width:25%; padding:0 10px; margin-bottom:20px;}
.news .inner .pic {position:relative; height:0; padding-bottom:100%; overflow:hidden;}
.news .inner .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.news .inner .txt {background:#fff; padding:20px;}
.news .inner .txt .date {font-size:14px; color:#242424; line-height:1.8em; margin-bottom:6px; font-family:'Roboto';}
.news .inner .txt h4 {font-size:20px; line-height:1.4em; color:#242424; margin-bottom:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.news .inner .txt p {font-size:15px; margin-bottom:40px; line-height:1.6em; height:calc(1.6em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.news .inner .txt .tt {display:flex; margin:0 -10px; justify-content:space-between;}
.news .inner .txt .tt span {font-size:13px; color:#686868; line-height:1.8em; padding:0 10px;}

.board-view-cnt .btn {margin-top:60px;}
.board-view-cnt .more-btn {display:inline-block; line-height:60px; color:#fff; background:#313842; text-align:center; font-size:18px; font-weight:500; padding:0 50px;}