.enable-js,.browsehappy{ background:#e3e3e3; color:#000; font-size:14px; margin-bottom:.2em; padding:0.5em; text-align:center; line-height:1.3; } .enable-js a,.browsehappy a{ font-weight:bold; } .btn-combined:after,.form li:after,.clearfix:after,.site-head-nav:after,.foot-nav:after,.site-nav>ul:after,.lang-top:after,.lang-top>a:after,.media-left:after,.media-right:after,.headline-primary:after,.byline:after{ clear:both; content:""; display:table; } /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0 none; list-style: none outside none; margin: 0; outline: 0 none; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html{ font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; } body{ margin:0; /*font-family: 'Nanum Gothic', sans-serif;*/ font-size: 14px; min-width:320px; letter-spacing: -0.5px; } article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{ display:block; } [hidden],template{ display:none; } a{ color: #151515; text-decoration: none; } a:active,a:hover{ outline:0; } b,strong{ font-weight:bold; } h1,h2,h3,h4,h5{ font-size:2em; margin:0.67em 0; } small{ font-size:80%; } sub,sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup{ top:-0.5em } sub{ bottom:-0.25em } svg:not(:root){ overflow:hidden; } figure{ margin:1em 40px } hr{ box-sizing:content-box; height:0 } button,input,optgroup,select,textarea{ color:inherit; font:inherit; margin:0; } button{ overflow:visible; } button,select{ text-transform:none; } button,html input[type="button"],input[type="reset"],input[type="submit"]{ -webkit-appearance:button; cursor:pointer; } button[disabled],html input[disabled]{ cursor:default; } button::-moz-focus-inner,input::-moz-focus-inner{ border:0; padding:0; } input{ line-height:normal; } input[type="checkbox"],input[type="radio"]{ box-sizing:border-box; padding:0; } input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{ height:auto; } input[type="search"]{ -webkit-appearance:textfield; box-sizing:content-box; } input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; } select, input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; } legend{ border:0; padding:0; } textarea{ overflow:auto; } optgroup{ font-weight:bold; } table{ border-collapse:collapse; border-spacing:0; } td,th{ padding:0; } img{ max-width:100%; height:auto; border:0; display: inline-block; vertical-align: top; } img.full{ width:100%; display:block; } [class^="icon-"]::before,[class*=" icon-"]::before,[class^="icon-"]:before,[class*=" icon-"]:before{ display:none; } button:focus,input:focus,select:focus,textarea:focus{ outline:0; } label{ cursor:pointer; } figure,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p{ margin:0; } dl,ul,ol{ padding:0; } ol,ul{ list-style:none; } li.current a{ color: #27c9ba; } /**brand color: #27c9ba; gray:#f2f2f2; gray-border:#e4e4e4; /*main page*/ .container:after{ clear:both; content:""; display:table; } .container{ padding-left:10px; padding-right:10px; max-width: 1080px; margin:0 auto; } /*header*/ .site-head{ margin-bottom: 10px; } .site-head .container{ position: relative; } .util, .social, #nav-toggle, .loginBox, .site-nav-desktop nav, .site-nav-desktop .keyword{ display: none; } .logo{ text-align: center; padding-top: 8px; display: -webkit-flex; /* Safari */ -webkit-justify-content: center; /* Safari 6.1+ */ display: flex; justify-content: center; } .logo img{ height: 28px; } .search{ margin-top: 10px; clear: both; background-color: #f0f4f5; color: #27c9ba; position: relative; } .search input{ padding: 8px 10px; font-size: 1em; background-color: #f0f4f5; font-weight: bold; } .search button{ position: absolute; right: 10px; top:8px; background-color:#f0f4f3; } .nav-wrap{ position:fixed; top:0; left:-240px; width:240px; height:100%; overflow:scroll; z-index:200; background-color:#f0f4f5; border-right: 1px solid #ccc; padding:20px; font-size: 1.2em; text-align: center; } .nav-toggle{ font-size: 1.8em; color: #717171; position: absolute; left: 10px; top:10px; } .nav-toggle i:before{ float:left; } #nav-toggle:checked ~ .nav-wrap{ left:0; } .site-head-nav .nav-toggle{ font-size: 1.2em; position: relative; top:0; left: 0; } .site-nav li{ padding: 10px 0; font-weight: bold; font-size: 1em; } .site-nav li.login{ padding-top: 10px; } .site-nav li.login a{ background-color: #fff; border-radius: 13px; border:1px solid #717171; padding: 5px 20px; color: #717171; } .site-nav li a:hover{ color: #27c9ba; } /*Content*/ .leftCon a:hover{ color: #27c9ba; } .banner, .prayerRQ{display: none;} .blue{ color:#27c9ba; } .banner, .prayerRQ, .newsBox, .logoBox, .titleBox, .logoList,.todayColumn, .box{ clear: both; overflow: hidden; margin-bottom: 15px; } .photoNews{ position: relative; cursor: pointer; } .photoNews img{ width: 100%; } .photoNews h2{ font-size: 1.2em; position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.7); padding: 10px; } .photoNews h2 a{ color: #fff; } .category{ font-size: 0.85em; color: #27c9ba; } .newsBox ul{padding:10px 0;} .newsBox ul li{ padding: 5px 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: bold; font-size: 1.18em; } .logoBox{ border:1px solid #dee2eb; } .titleBox{ overflow: hidden; } .titleBox li{ float: left; padding:8px 6px; } .titleBox li.current a, .titleBox li a:hover{ color: #27c9ba; } .titleBox li a{ color: #717171; font-weight: bold; } .logoBox .logoList li{ width: 33.33%; border-top: 1px solid #e9ecf1; border-right: 1px solid #e9ecf1; float: left; text-align: center; padding:10px 0; } .logoBox .logoList li:nth-child(3),.logoBox .logoList li:nth-child(6), .logoBox .logoList li:nth-child(9),.logoBox .logoList li:nth-child(12),.logoBox .logoList li:nth-child(15),.logoBox .logoList li:nth-child(18){ border-right:none; } .titleBox, .logoList{ margin-bottom: 0; } .todayColumn{ border:1px solid #ebebeb; font-weight: bold; overflow: hidden; background-color: #f9f9f9; } .todayColumn .column{ float: left; background-color:#27c9ba; padding:13px 15px; } .todayColumn .columnTitleBox{ float: left; overflow: hidden; padding: 0px 15px; height: 44px !important; width: 100%; } .todayColumn .columnTitleBox ul{ width: 100%; overflow: hidden; } .todayColumn .columnTitleBox ul li{ height: 44px !important; padding: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .todayColumn .columnTitle a{color: #000;} .todayColumn .columnTitle a:hover{color: #27c9ba;} .todayColumn .more{ float: right; color: #27c9ba; padding:13px 15px; } .box{ border-top:1px solid #27c9ba; } .box .photoNews{ margin-bottom: 10px; overflow: hidden; } .box .photoNews h2{ padding: 16px; } .arrow{ float: right; padding-top: 4px; } .arrow img{ cursor: pointer; float: right; } .box ul li img{ width: 100%; } .box ul li .des{ padding-top: 6px; } .thumbBox1,.thumbBox2{ overflow: hidden; clear: both; } .thumbBox1 ul li p,.thumbBox2 ul li p{ overflow: hidden; height: 42px; line-height: 1.38em; } .box .des{ padding-bottom: 10px; } .cmTv .thumbBox2 ul li>a{ position: relative; display: block; } .playBt{ position: absolute; bottom: 0; left: 0; width: 40px; height: 30px; background: url("/renew/img/play-arrow.png") no-repeat center center; background-color: rgba(49, 204, 188, 0.7); } /*Side Bar*/ .loginBox, .dailyWord,.dailyQT, .banner300,.musicChart{ clear: both; margin-bottom: 18px; overflow: hidden; } .dailyWord{ border:1px solid #dee2eb; background-color: #fafafa; text-align: center; padding:13px 30px; color: #717171; } .word{ padding:13px 0; color: #222222; font-weight: bold; } .verse{ font-size: 0.9em; } .dailyQT{ position: relative; text-align: center; font-weight: bold; font-size: 1.15em; color: #fff; cursor: pointer; } .dailyQT .photo{ background-size:cover; height: 290px; width: 100%; } .qttitle{ position: absolute; font-family: 'Nanum Gothic', sans-serif; top: 105px; width: 100%; text-align: center; text-shadow: 2px 2px 8px #000; } .qttitle span{ border-bottom: 1px solid #fff; padding-bottom: 14px; } .qttxt{ font-family: 'Nanum Myeongjo', serif; font-size: 1.6em; position: absolute; top: 160px; width: 100%; text-align: center; } .qttxt a{ color: #fff; text-shadow: 2px 2px 8px #000; padding: 0 10px; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .banner300{ text-align: center; } .musicChart{ border:1px solid #d8dcdd; border-width: 1px 1px 0 1px; } .musicChart .mcTitle{ border-bottom:1px solid #d8dcdd; overflow: hidden; font-weight: bold; padding: 8px 10px; } .musicChart .mcTitle span{ float: left; color: #27c9ba; } .musicChart .mcTitle a{ color: #717171; float: right; cursor: pointer; } .mcTitle .more{ font-size: 0.8em; background: url(/renew/img/arrow-right.gif) no-repeat right 5px; padding-right: 7px; } .musicChart .mcTitle a:hover{ color: #27c9ba; } .musicChart ul li{ border-bottom:1px solid #d8dcdd; padding:6px 15px; font-weight: bold; overflow: hidden; clear: both; } .musicChart ul li .number{ float: left; width: 15px; padding-top:18px; color: #27c9ba; } /*.musicChart ul li .status{ float: left; font-size: 0.7em; padding-top:21px; width: 30px; text-align: center; color: #717171; } .musicChart ul li .status img{ margin: 2px 2px 0 0; }*/ .musicChart ul li .thumbImg{ float: left; padding:0 10px 0 7px; } .musicChart ul li .thumbImg img{ float: left; width: 50px; height: 50px; border:1px solid #d8dcdd; cursor: pointer; } .musicChart ul li a:hover{ color: #27c9ba; } .musicChart ul li .songTxt{ float: left; width: 65%; font-size: 0.89em; } .musicChart ul li .songTxt a{ color: #717171; } .musicChart ul li .songTxt .song{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding:3px 0 8px 0; } .musicChart ul li .songTxt .song a{ color: #000; } .musicChart ul li .songTxt .song a:hover{ color: #27c9ba; } .footer{ margin-top: 20px; clear: both; overflow: hidden; border-top:1px solid #d3d3d3; padding:20px 0; } .footer .ftLogo img{ height: 22px; margin-bottom: 15px; } .footer ul li{ float: left; line-height: 1.6em; } .footer ul li a{ border-right:1px solid #d9d9d9; padding:0 12px; color: #717171; } .footer ul li:first-child a{ padding-left:0; } .footer ul li:last-child a{ border-right:0; } .footer ul li i, .footer ul li a:hover{ color: #27c9ba; } .footer ul li i{ padding-right: 8px; } /**Mediaquery**/ @media (max-width: 720px){ .todayColumn .column{ width: 100%; } .todayColumn a.more{ display: none; } .todayColumn .columnTitle{ float: left; width: 100%; } } @media (min-width: 720px){ .site-head{margin-bottom: 20px;} .site-head>.container{ position: relative; height: 82px; } .util, .social,.banner,.prayerRQ,.loginBox,.site-nav-desktop nav, .site-nav-desktop .keyword{ display: block; } .nav-toggle{ display: none; } .util{ position: absolute; left:10px; top:51px; font-size: 13px; font-weight: bold; } .util a{ color: #717171; padding-right: 8px; } .util a:first-child{ background: url("/renew/img/border-gray.gif") no-repeat right center; margin-right: 3px; } .logo{ padding-top: 24px; } .logo img{ height: 42px; } .social{ position: absolute; right: 10px; top:51px; } .social a{ margin-left: 3px; } .site-nav-desktop{ position: relative; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; } .site-nav-desktop nav{ } .site-nav-desktop nav ul{ float: left; } .site-nav-desktop nav ul li{ float: left; height: 40px; border-right: 1px solid #dbdbdb; padding:12px 23px; font-size: 1.105em; font-weight: bold; font-family: 'Nanum Gothic', sans-serif; } .site-nav-desktop nav ul li:first-child{ border-left: 1px solid #dbdbdb; padding-top:11px; } .site-nav-desktop nav ul li a:hover, .site-nav-desktop nav ul li.current a{ color: #27c9ba; } .keyword{ height: 42px; overflow:hidden; width: 155px; background-color: #27c9ba; position: relative; float: right; } .keyword ul li{ line-height: 40px; padding: 0 20px; /*background: url("/renew/img/arrow-down.gif") no-repeat 126px center;*/ color: #fff; font-weight: bold; overflow: hidden; } .keyword ul li span{ float: left; } .keyword ul li a{ padding-left: 10px; white-space: nowrap; width: 95px; overflow: hidden; text-overflow: ellipsis; float: left; } .keywordOver{ border:1px solid #dbdbdb; position: absolute; z-index: 9999999; width: 200px; right: 0; padding:10px; background: #fff; } .keywordOver ul li{ line-height: 2em; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; color: #27c9ba; } .keywordOver ul li:first-child{ font-weight: bold; padding:0 0 4px 8px; color: #000; } .keywordOver ul li span{ float: left; width: 28px; text-align: center; } .keywordOver ul li a{ color: #717171; font-weight: bold; } .keywordOver ul li a:hover{ color: #27c9ba; } .search{ border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb; position: absolute; right: 154px; top:-10px; height: 40px; } .search input{ padding-top: 10px; padding-left: 15px; } .search button{ top:11px; right: 16px; font-size: 18px; } /*Contents*/ .banner img{width: 100%;} .leftCon{ float: left; width: 68%; max-width: 760px; } .prayerRQ{ border:1px solid #e4e4e4; padding:10px 10px; } .prayerRQ strong{ float: left; } .prayerRQ .blue{ padding:0 10px; float: left; } .prayerRQ #cross_weather{ float: left; width: 50%; } .prayerRQ ul{ float: left; width: 100%; height: 21px; overflow: hidden; } .prayerRQ ul li{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; height: 26px; } .prayerRQ .more{ float: right; } .more a{ color: #c7c7c7;} .todayColumn .columnTitleBox{ width: 60%; } .todayColumn .columnTitle ul{ width: 100%; } .todayColumn .columnTitle ul li{ width: 100%; } .box .titleBox{ padding:6px 0; } .box .titleBox ul li{ font-size: 1.1em; padding: 6px 15px 9px 0; } .box .titleBox ul li a{ border-right: 1px solid #d6d6d6; padding-right: 10px; } .box .titleBox ul li:first-child a, .box .titleBox ul li:last-child a{ border-right:none; } .sideBar{ float: right; width: 30%; max-width: 300px; } /*Login*/ .loginBox{ background:#f2f2f2; padding:13px; font-size: 0.9em; overflow: hidden; } .loginBox fieldset{ font-weight: bold; } .inputBox{ background:#fff; overflow: hidden; float: left; width: 65%; border-top:1px solid #ededed; border-bottom:1px solid #ededed; border-left:1px solid #ededed; } .inputBox input{ padding:8px 10px; color: #000; } .inputBox input:first-child{ border-bottom:1px solid #ededed; } .loginBt{ float: right; width: 35%; text-align: center; } .loginBt input[type="button"] { background: #27c9ba; width: 100%; height: 63px; font-size: 1.2em; } .checkLogin{ padding-top: 10px; font-size: 0.905em; color: #717171; overflow: hidden; font-weight: bold; } .checkLogin input{ float: left; margin:2px 3px 0 0; } .checkLogin a{ color: #717171; } .checkLogin a:hover{ color: #27c9ba; } .checkLogin .signup{ padding:0 8px; } .checkLogin .dot{ background: url("/renew/img/dot.gif") no-repeat left center; padding-left:3px; } .mypage_opened_box{ background:#f2f2f2; padding:13px; font-size: 0.9em; overflow: hidden; margin-bottom: 20px; } .mypage_opened_box a{ color: #717171; } .mypage_opened_box a:hover{ color: #27c9ba; } .mypage_menu2{ overflow: hidden; font-size: 0.95em; font-weight: bold; } .mypage_opened_info2{ border-bottom: 1px solid #ddd; margin-bottom: 8px; overflow: hidden; position: relative; } .mypage_opened_info2 .logout { position: absolute; right: 0; top:0; } .mypage_opened_info2 .logout a:hover{ color:#2bbec6; } .mypage_opened_info2 .logout .btn{ background: #fff; padding:6px 8px 4px 8px; } .mypage_opened_info2 .profile2{ position: relative; width:50px; height: 60px; float:left; margin-right:10px; } .mypage_opened_info2 .profile_detail{ float:left; } .mypage_opened_info2 .profile .profile_l{ position: absolute; border-radius: 48px; float:left; } .mypage_opened_info2 .profile .carmera{ position: absolute; right:0; top:30px; } .mypage_opened_info2 .profile2 .carmera{ position: absolute; right:0; top:30px; } .profile_detail{ overflow: hidden; } .profile_detail .myinfo{ float: right; font-size: 0.95em; font-weight: bold; } .profile_detail .myinfo span:first-child{ padding-right: 5px; } .profile_detail .myinfo i{ color: #27c9ba; } .profile_detail .name{ font-weight: bold; float: left; } .profile_detail .name a:hover{ text-decoration: underline; } .mypage_menu2 { clear: both; } .mypage_menu2 li{ float: left; } .mypage_menu2 li a{ color: #717171; border-right:1px solid #ddd; padding:0 8px 0 8px; } .mypage_menu2 li:first-child a{ padding:0 8px 0 0; } .mypage_menu2 li:last-child a{ border-right:none; } } @media (min-width: 720px) and (max-width: 960px){ .musicChart ul li .thumbImg{ padding:10px 10px 0 7px; } .musicChart ul li .thumbImg img{ width: 30px; height: 30px; } } @media (max-width: 960px){ .thumbBox1 ul, .thumbBox2 ul{ -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -webkit-column-gap: 10px; /* Chrome, Safari, Opera */ -moz-column-gap: 10px; /* Firefox */ column-gap: 10px; } } @media (min-width: 960px){ /*Contents*/ .todayColumn .columnTitleBox{ width: 70%; } .todayColumn .columnTitle ul{ width: 100%; } .newsBox .photoNews { max-width: 380px; float: left; width: 50%; overflow: hidden; } .thumbBox1 ul li a, .thumbBox2 ul li a{ overflow: hidden; display: block; } .newsBox .photoNews img, .box .photoNews img, .thumbBox1 ul li a img, .thumbBox2 ul li a img{ transition: transform 0.3s; } .newsBox .photoNews:hover img, .box .photoNews:hover img, .thumbBox1 ul li a:hover img,.thumbBox2 ul li a:hover img{ transform: scale(1.1); } .newsBox ul{ float: right; width: 47%; padding:0; } .newsBox ul li{ padding: 0 0 12px 0; letter-spacing: -0.5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size:1.1em; line-height: 1.45em; } .newsBox ul li:last-child{ padding:0 0 0 0; } .logoBox .titleBox li{ padding:13px 18px; } .logoBox .logoList li{ width: 16.66%; padding:20px 0; } .logoBox .logoList li:nth-child(3),.logoBox .logoList li:nth-child(9), .logoBox .logoList li:nth-child(15){ border-right: 1px solid #e9ecf1; } .thumbBox2 ul{ -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; -webkit-column-gap: 14px; /* Chrome, Safari, Opera */ -moz-column-gap: 14px; /* Firefox */ column-gap: 14px; } .cmTv .des{ height: 57px; } } @media (min-width: 960px) and (max-width: 1080px){ .thumbBox1 .photoNews{ float: left; width: 76%; max-width: 567px; } .thumbBox1 ul{ float: right; width: 23%; max-width: 179px; } } @media (min-width: 1080px){ .container{ padding-left: 0; padding-right: 0; } .leftCon{ width: 760px; } .util{left:0;} .social{right:0;} .newsBox{ margin-bottom: 25px; } .thumbBox1 .photoNews{ float: left; width: 567px; } .thumbBox1{ padding-bottom: 2px; } .thumbBox1 ul{ float: right; width: 179px; } .box ul li .des{ padding-top: 8px; } } /**Firefox hack**/ @-moz-document url-prefix() { .loginBt input[type="button"] { height:65px; } }