.grace{ font-family: 'Nanum Gothic', sans-serif; } .grace .titleBox{ padding: 10px 5px 14px 0px; } .grace .titleBox li{ padding: 4px 0 0 0; } .search.active{ z-index: 3; } .container{ padding: 0; width: 1180px; } #main a:hover{ color: #26cac3; } .blue{ color: #26cac3; } .site-head--inner .navline{ margin-bottom: 0; padding: 8px 0 10px; } .site-head--inner .logoline { padding-top: 10px; } .site-head--inner .logo { font-size: 26px; font-weight: bold; } .site-head--inner .logo a{ padding-right:18px; } .site-head--inner .logo img{ height: 27px; vertical-align: middle; } .site-head--inner .navline .search-toggle{ margin-top:0; } .section-nav li a{ padding-left:0; padding-right: 1.5em; } .section-nav li a:hover{ color: #27c9ba; } /**Main Slide**/ .recommend_card_wrap{ position:relative; overflow:hidden; background-color:rgba(209,209,209,0.85); z-index: 1; } .recommend_card_wrap .recommend_card_area{ overflow:visible!important; width:967px; height:276px; margin:0 auto; position:relative; } .recommend_card_wrap .flick-container{ overflow:visible!important; } .recommend_card_wrap .cont_area{ position:relative; overflow:hidden; background-size:cover; background-repeat:no-repeat; background-position:center; width:967px; height:276px; margin:0 auto; } .recommend_card_wrap .cont_area .inner{ display:block; height:276px; padding:0 50px; z-index:10; } .recommend_card_wrap .cont_area .cont_type{ display:inline-block; position:relative; font-size:12px; color:#fff; margin:26px 0 0 0; font-weight:bold; } .recommend_card_wrap .cont_area .cont_type{ margin:100px 0 0 2px; font-size:13px; } .recommend_card_wrap .cont_area .cont_type:before{ display:block; position:absolute; bottom:1px; left:0; right:0; height:1px; background:rgba(255,255,255,0.5); content:''; } @media only screen and (min-width:768px){ .recommend_card_wrap .cont_area .cont_type:before{ bottom:0; right:-1px; } } .recommend_card_wrap .cont_area .tit{ display:block; overflow:hidden; position:relative; padding-top:12px; font-size:27px; color:#fff; line-height:33px; font-weight:normal; text-shadow:0 1px 1px rgba(0,0,0,0.14); white-space:pre-line; max-height:99px; } @media only screen and (max-width:320px){ .recommend_card_wrap .cont_area .tit{ padding-top:14px; font-size:25px; line-height:30px; max-height:90px; } } @media only screen and (min-width:768px){ .recommend_card_wrap .cont_area .tit{ padding-top:11px; font-size:32px; line-height:42px; text-shadow:initial; max-height:96px; } } @media only screen and (min-width:1024px){ .recommend_card_wrap .cont_area .tit{ padding-top:9px; } } .recommend_card_wrap .cont_area .tit em{ display:block; font-weight:bold; } .recommend_card_wrap .cont_area .writer{ display:inline-block; position:absolute; bottom:30px; left:54px; font-size:15px; color:#fff; } .recommend_card_wrap .cont_area .writer:after{ display:block; content:''; } .recommend_card_wrap .cont_area .thumb{ display:inline-block; overflow:hidden; position:absolute; bottom:22px; left:20px; width:24px; height:24px; vertical-align:top; -webkit-border-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:50%; } .recommend_card_wrap .cont_area .thumb img{ width:100%; height:100%; -webkit-border-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:50%; background-color:#fff; box-shadow:inset 0 0 1px #000; } @media only screen and (min-width:768px){ .recommend_card_wrap .cont_area .thumb{ left:64px; bottom:30px; width:26px; height:26px; } } @media only screen and (min-width:1024px){ .recommend_card_wrap .cont_area .thumb{ left:50px; } } .recommend_card_wrap .cont_area .thumb:before{ display:block; position:absolute; left:0; top:0; right:0; bottom:0; border:1px solid #000; opacity:.1; content:''; -webkit-border-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:50%; } .recommend_card_wrap .cont_area .thumb:after{ display:block; content:''; } .recommend_card_wrap .cont_area .post_lst{ padding-top:7px; } @media only screen and (min-width:1024px){ .recommend_card_wrap .cont_area .post_lst{ padding-top:4px; } } .recommend_card_wrap .cont_area .post_lst li{ position:relative; padding-left:6px; font-size:13px; color:rgba(255,255,255,0.8); } @media only screen and (min-width:1024px){ .recommend_card_wrap .cont_area .post_lst li{ font-size:14px; padding:3px 0 0 10px; color:rgba(255,255,255,0.6); } } .recommend_card_wrap .cont_area .post_lst li .ell{ height:20px; line-height:20px; } .recommend_card_wrap .cont_area .post_lst li:before{ display:inline-block; position:absolute; top:8px; left:0; width:2px; height:2px; background:rgba(255,255,255,0.8); -webkit-border-radius:50px; border-top-left-radius:50px; border-top-right-radius:50px; border-bottom-left-radius:50px; border-bottom-right-radius:50px; content:''; } @media only screen and (min-width:1024px){ .recommend_card_wrap .cont_area .post_lst li:before{ top:12px; } } .recommend_card_wrap .cont_area.as_editor .tit{ padding-right:120px; } @media only screen and (max-width:320px){ .recommend_card_wrap .cont_area.as_editor .tit{ padding-right:95px; } } @media only screen and (min-width:1024px){ .recommend_card_wrap .cont_area.as_editor .tit{ padding-right:274px; } } .recommend_card_wrap .cont_area.as_editor .tit .ell{ -webkit-line-clamp:2; } .recommend_card_wrap .cont_area.as_editor .tit strong .ell{ -webkit-line-clamp:1; } .recommend_card_wrap .cont_area.as_editor .writer{ left:20px; } @media only screen and (min-width:768px){ .recommend_card_wrap .cont_area.as_editor .writer{ left:64px; } } @media only screen and (min-width:1024px){ .recommend_card_wrap .cont_area.as_editor .writer{ left:50px; } } .recommend_card_wrap .cont_area.as_editor .thumb{ bottom:30px; right:20px; left:inherit; width:120px; height:120px; } @media only screen and (max-width:320px){ .recommend_card_wrap .cont_area.as_editor .thumb{ bottom:34px; right:19px; width:102px; height:102px; } } @media only screen and (min-width:768px){ .recommend_card_wrap .cont_area.as_editor .thumb{ bottom:40px; right:64px; width:132px; height:132px; } } @media only screen and (min-width:1024px){ .recommend_card_wrap .cont_area.as_editor .thumb{ right:70px; } } .recommend_card_wrap .cont_area.as_series .tit{ max-height:66px; } @media only screen and (max-width:320px){ .recommend_card_wrap .cont_area.as_series .tit{ max-height:60px; } } @media only screen and (min-width:768px){ .recommend_card_wrap .cont_area.as_series .tit{ max-height:86px; } } .recommend_card_wrap .cont_area.is_editor_type1 .card_dim{ background:rgba(80,57,47,0.8); } .recommend_card_wrap .cont_area.is_editor_type2 .card_dim{ background-color:rgba(60,64,85,0.8); } .recommend_card_wrap .cont_area.is_editor_type3 .card_dim{ background-color:rgba(44,69,59,0.8); } .recommend_card_wrap .is_disable .card_dim{ background-color:rgba(0,0,0,0.5); } .recommend_card_wrap .is_disable .img_dim{ display:block; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.5); z-index:1; } .recommend_card_wrap .is_disable .cont_type,.recommend_card_wrap .is_disable .tit,.recommend_card_wrap .is_disable .writer,.recommend_card_wrap .is_disable .thumb,.recommend_card_wrap .is_disable .post_lst{ display:none; } .recommend_card_wrap .img_dim{ display:none; } .recommend_card_wrap .card_dim{ display:inline-block; position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.4); } .recommend_card_wrap .pagination_wrap{ position:absolute; bottom:26px; right:20px; } @media only screen and (min-width:768px){ .recommend_card_wrap .pagination_wrap{ bottom:37px; right:64px; } } @media only screen and (min-width:1024px){ .recommend_card_wrap .pagination_wrap{ bottom:37px; right:50px; } } .recommend_card_wrap .pagination_wrap .pagination_square{ z-index:2001; line-height:4px; } .recommend_card_wrap .pagination_wrap .pagination_square a{ display:inline-block; vertical-align:top; margin-right: 6px; } .recommend_card_wrap .pagination_wrap .pagination_square a .num{ display:inline-block; overflow:hidden; width:6px; height:6px; font-size:0; line-height:0; color:transparent; background:rgba(255,255,255,0.3); vertical-align:top; } .pc .recommend_card_wrap .pagination_wrap .pagination_square a{ float:left; height:6px; width:6px; padding:4px; } .pc .recommend_card_wrap .pagination_wrap .pagination_square a .num{ width:6px; height:6px; } .recommend_card_wrap .pagination_wrap .pagination_square a.on .num{ background:white; } .recommend_card_wrap .nav_area{ display:none; } @media only screen and (min-width:1024px){ .recommend_card_wrap .nav_area{ display:block; position:absolute; top:115px; width:100%; z-index:10000; } } .recommend_card_wrap .nav_area .btn{ display:inline-block; position:absolute; padding:14px 13px; } .recommend_card_wrap .nav_area .btn i{ color:transparent; font-size:0; line-height:0; } .recommend_card_wrap .nav_area .prev{ left:-67px; background: url("../img/arrow-prevB.png") no-repeat 0 0; background-size: 100%; } .recommend_card_wrap .nav_area .prev i{ width:24px; height:46px; } .recommend_card_wrap .nav_area .next{ right:-67px; background: url("../img/arrow-nextB.png") no-repeat 0 0; background-size: 100%; } .recommend_card_wrap .nav_area .next i{ width:24px; height:46px; } .thumb{ display: block; position: absolute; overflow: hidden; top: 0px; left: 0; } .thumb img{ margin-top:-20px; } .tagImg{ clear: both; overflow: hidden; background: #f8f8f8; padding: 20px 0; } .tagImg ul{ position: relative; } .tagImg ul li{ width: 198px; float: left; position: relative; height: 120px; } .tagImg ul li:last-child{ width: 186px; } .tagImg ul li .thumb{ width: 186px; height: 88px; } .tagImg ul li .tagTxt{ text-align: center; margin-top: 98px; font-weight: bold; } .titleBox{ clear: both; overflow: hidden; padding: 10px 0; } .pt30{ padding-top:30px; } .pb30{ padding-bottom: 30px; } .btop{ border-top:1px solid #dedede; } .arrow img{ margin-left: 5px; margin-top: 2px } .col4, .col5{ overflow: hidden; } .col li{ position: relative; float: left; margin-right: 16px; } .col4 li{ width: 283px; height: 230px; border: 1px solid #e2e2e2; } .col4-2 li{ height: 308px; } .col4-3 li{ width: 243px; height: 192px; } .col5 li{ width: 223px; height: 207px; } .col li:last-child, .cpostBox .col5 li:nth-child(3){ margin-right: 0; } .col li .tit{ font-size: 17px; line-height: 24px; white-space: nowrap; display: block; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .col4 li .tit{ padding:165px 20px 0px 20px; height: 196px; } .col4-3 li .tit{ padding-top:148px; font-size: 14px; color: #333; } .col4 li .profile .tit{ padding: 0px; height: 24px; } .col5 li .tit{ padding:145px 10px 0px 5px; height: 173px; } .col li .writer{ font-size: 14px; color: #26cac3; } .col4 li .writer{ padding:0px 20px; } .col4 li .profile .writer{ padding:5px 0 0 0; } .col5 li .writer{ padding: 0px 6px; } .col4 li .thumb{ width: 281px; height: 152px; z-index: 1; } .col4-2 li .thumb{ height: 195px; } .col4-2 li .thumb img{ margin-top: 0; height: 100%; } .col4-3 li .thumb{ width: 241px; height: 129px; } .col5 li .thumb{ width: 223px; height: 136px; } .col .profile{ overflow: hidden; padding: 210px 12px 15px 12px; } .col .profile img{ float: left; width: 50px; height: 50px; margin-right: 13px; } .col .ic_area{ clear: both; overflow: hidden; padding: 0px 12px 12px 12px; font-size: 12px; font-weight: bold; color: #929292; } .col .ic_area .ico{ display: inline-block; } .col .ic_area span{ vertical-align: top; } .col .ic_area .likes{ padding-right: 10px; } .col .ic_area .likes .ico{ background: url("../img/ic-smile.gif") no-repeat 0 0; width: 18px; height: 18px; } .col .ic_area .comments .ico{ background: url("../img/ic-comment.gif") no-repeat 0 0; width: 18px; height: 18px; } .col .ic_area .hits .ico{ background: url("../img/ic-eye.png") no-repeat 0 2px; width: 17px; height: 14px; } .cpostBox{ overflow: hidden; } .cpostBox .cpostMain{ float: left; width: 463px; height: 330px; position: relative; } .cpostBox ul{ float: right; width: 701px; } .cpostBox .col5 li{ height: 195px; } .cpostBox .cpostMain .tit{ position: absolute; bottom: 50px; left:20px; font-size: 19px; color: #fff; font-weight: bold; } .cpostBox .col5 li .tit{ padding-top: 140px; height: 168px; } .cpostBox .cpostMain .writer{ position: absolute; left:20px; bottom: 20px; font-size: 16px; color: #26cac3; } .cpostBox .cpostMain .bg { position: absolute; width: 463px; background: url('../img/bg-photo.png') repeat-x bottom; height: 330px; } .grayBox{ clear: both; overflow: hidden; background: #f8f8f8; padding: 25px 0; } .grayBox .english{ width: 462px; margin-right: 30px; font-family: helvetica, arial, sans-serif; } .grayBox .english .titleBox{ padding: 0 0 20px 0; } .grayBox .english .titleBox ul li a{ font-size: 18px; } .grayBox .english ul.enList li{ position: relative; padding:12px 0; letter-spacing: 0; border-top:1px solid #d8d8d8; } .grayBox .english ul li .enImg{ width: 120px; height: 68px; display: block; position: absolute; overflow: hidden; right: 0; top:10px; } .grayBox .english ul li .enImg img{ vertical-align: middle; width: auto; height: 100%; margin-top: -7px; } .grayBox .english ul li .des{ margin-right: 140px; padding: 0; } .grayBox .english ul li .des h4{ font-size: 18px; } .grayBox .english ul li .des p{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 5px 0; font-weight: normal; } .grayBox .popular{ width: 358px; margin-right: 30px; border:1px solid #d8d8d8; background: #fff; } .grayBox .popular h5{ border-bottom: 1px solid #d8d8d8; padding: 10px; font-size:16px; } .grayBox .popular ul li{ overflow: hidden; clear: both; border-bottom: 1px solid #f2f2f2; padding: 10px 20px; } .grayBox .popular ul li:last-child{ border-bottom: none; } .grayBox .popular ul li .num{ width: 15px; text-align: center; height: 15px; padding: 1px 0; font-size: 11px; font-weight: bold; color: #fff; background: #26cac3; margin-right: 16px; float: left; margin-top: 5px; } .grayBox .popular ul li .popImg{ float: left; width: 60px; height: 60px; border: 1px solid #f8f8f8; margin-right: 15px; } .grayBox .popular ul li .popImg img{ vertical-align: middle; height: 60px; } .grayBox .popular ul li .tit{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-top: 5px; } .grayBox .popular ul li .blue{ font-size: 14px; padding-top: 8px; } .grayBox .banner{ width: 300px; } /**Section**/ .innerHead{ padding: 40px 0; overflow: hidden; } .resourceBoxTag{ padding-top: 15px; overflow: hidden; position: relative; } .resourceBoxTag:after{ display: block; content: ''; position: absolute; right: 0; width: 60px; top:0; background: url("../img/bg-white.png") repeat-y right 0; height: 55px; } .resourceBoxTag ul{ width: 3000px; height: 40px; } .resourceBoxTag ul li{ border: 1px solid #ccc; background: #fff; color: #000; margin-bottom: 0; float: left; border-radius: 20px; margin-right: 10px; padding: 8px 20px; cursor: pointer; } .resourceBoxTag ul li.all, .resourceBoxTag ul li:hover { background: #35c0bd; color: #fff; font-weight: bold; border: none; } .innerHead a.next{ display: block; position: absolute; width: 14px; height: 28px; background: url("../img/arrow-next2.gif") no-repeat 0 0; right: 0; top:78px; cursor: pointer; } .titleBoxTab{ overflow: hidden; } .titleBoxTab li { float: left; width: 50%; font-weight: bold; border-bottom: 2px solid #ccc; padding-bottom: 10px; cursor: pointer; text-align: center; } .titleBoxTab li.current { border-bottom: 2px solid #26cac3; } .box ul.col{ margin-bottom: 20px; } /**Search result**/ .grace-search{ width: 725px; margin:0 auto; font-size: 18px; position: relative; } .grace-search input{ border-bottom:1px solid #ccc; width: 100%; padding:0 20px 10px; } .grace-search i{ color: #ccc; position: absolute; right: 20px; top:0; } .grayTxt{ color: #8c8c8c; padding: 0 0 10px 10px; } .center{ width: 900px; margin:0 auto; } .center:after{ top:30px; } .center a.next{ top:49px; z-index: 1; } .searchResult{ overflow: hidden; font-size: 18px; border-bottom: 1px solid #ddd; margin-bottom: 40px; padding-bottom: 20px; } .searchResult .float_right span{ padding-right: 20px; background: url('../img/ic-down-small.gif') no-repeat right 7px; margin-right: 20px; } .searchResult .num{ color: #333; } .wrap_cover{ position: relative; } .cover_inner { display: block; background-color: #000; opacity: 0.4; height: 100%; position: absolute; top: 0; left: 0; width: 100%; } .wrap_channel { width: 100%; margin: 0 auto; position: absolute; height: 100%; top: 0; } .cover_cell { position: absolute; top: 120px; margin: 0 auto; color: #fff; width: 100%; text-align: center; } .chtit { font-size: 33px; margin-top: 20px; font-weight: normal; } .chdate { color: #cacaca; font-size: 13px; padding-left: 10px; padding-top: 5px; display: inline-block; } .cheditor{ text-align: center; font-weight: bold; font-size: 18px; padding: 70px 0 40px 0; } .cover_profile { position: absolute; top: 247px; margin: 0 auto; width: 100%; text-align: center; } .cover_profile2 { padding: 20px 0; text-align: center; } .cover_profile div { cursor: pointer; margin: auto; border-radius: 118px; width: 118px; height: 118px; } .cover_profile2 div { cursor: pointer; margin: auto; border-radius: 80px; width: 80px; height: 80px; } /**Article**/ .articleBox{ width: 1000px; } .graceArticle{padding:0px 0 30px 0;} .graceArticle p{line-height: 1.6; padding:20px 40px;} .graceArticle .imgCenter .caption{font-size: 0.95em; color: #999; padding-top: 8px; text-align: center;} .imgCenter{ text-align: center; } .artTag a { color: #26bcb7; font-size: 1em; padding: 20px 5px; font-weight: bold; } .panel_btns { text-align: center; clear: both; margin: 20px 0; } .btn-default { color: #959595; background-color: #fff; border: 1px solid #ccc; border-radius: 15px; } .sharelineH { margin-top: 30px; text-align: center; } .sharelineH ul { padding-bottom: 30px; } .sharelineH li { display: inline-block; margin-right: 10px; margin-bottom: 10px; } .relatedBox{ padding: 30px 80px; border-top:1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; position: relative; } .relatedBox .arrowPrev, .relatedBox .arrowNext{ color: #666; font-size: 2.6em; background: none; } .grace .comment{ width: 840px; float: left; padding: 0; } .grace .reply{ padding-top:0; }