Files
cm-web-legacy/public/renew/css/main.css
2020-06-10 06:19:03 +09:00

1154 lines
25 KiB
CSS
Executable File

.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;
}
}