﻿
.page-content{word-break:keep-all!important;}

.board-actions-left{display:inherit!important;}
.action-search{display:table!important;}
.input-group{display:table!important;}
.input-group .form-control, .input-group-addon, .input-group-btn{display:table-cell!important;}
#dimodeBoard .board-actions .board-actions-left .action-search button{border: 1px solid #ccc; }
.board-theme .theme-list table th, .board-theme .theme-list table td {font-size: 15px!important; font-family: 'NanumSquare', sans-serif;}

/*서브메뉴*/
#gnb-wrap {position: relative;}
.sub-top { position: relative; height: inherit; width: 100%; top: 0; z-index: 0; background-size: cover!important; background-position: 50% 50%!important; opacity: 0.8; height: 300px; -webkit-animation: zoomin 9s 1; animation: zoomin 9s 1;}
.sub-rel { width: 100%; position: relative; overflow: hidden; }
#content { margin: 6em auto 80px; }

.d3-subgnb-menu {
    display: inline-block;
    width: 100%;
    padding-top: 30px;
}
.d3-menulist {
    display:inline-block; padding:15px 15px;
    float:left;
    border:1px solid rgb(229,229,229);
    width:calc(100%/4);
}
.d3-menulist a{
    text-decoration:none;
    color:black;
    font-weight:700;
    font-size:20px!important;
}
.d3-subgnb-menu div.active a {
    color:rgb(2,94,171);
   }

.subject-title { text-align: center; font-size:3em; padding-bottom: 1em; font-weight: bold;  font-family: 'Arita-buri-SemiBold';}
.sermon-content h4 {font-size:14px!important;}



/* sub3/4 btn */
.sub-btn-group { margin: 0 auto ; justify-content: center; padding: 0 0 6em;}
.sub-btn-group button { font-size:18px; line-height:inherit; padding:10px 15px;}
.sub-top-btn {width: 100%;}
.sub-top-btn li {padding: 0!important;}
.sub-top-btn li a { display: block;font-size: 1.7em; padding: .7em 1em; transition: all .3s ease;}

.sub-btm-btn {margin-top: 4em;}
.sub-btm-btn li a {display: block;font-size: 1.7em; padding: 0 1em; transition: all .3s ease; font-weight: bold; position: relative; top: 0;}
.sub-btm-btn li a.btn-default { border: none!important;}
.sub-btm-btn li a.btn-default:active, .sub-btm-btn li a.btn-default:hover { color:#106EB9!important; background-color: unset!important;}
.sub-btm-btn li a.btn-default:active:hover {background-color: unset!important;}

.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {background-color:#106EB9!important; color: #fff!important; border-color:#106EB9!important;  }
.btn-default:hover {background-color: rgba(19, 112, 182, .3)!important; border-color: transparent!important;}




/* responsive  */

@media (min-width:1499px) {
    #content div.container { width: 1430px; }
    /* 3 */
    #component9794 div > div.col-sm-7 p img {height: 400px;}
    #component9794 div > #unit9655 > div {padding: 2.6em 1em!important; height: 400px;}

}



@media (max-width:1499px) {

    /* 1 */
    #component8769 {width: 100%!important; margin: 0 auto!important;}
    #component9794 div > div.col-sm-7 p img {height: auto;}
    #component9794 div > #unit9655 > div {padding: 2.6em 1em!important; height: auto!important;}

    /* 4 */
    #component7685 div > div > div {height: auto!important;}

}
@media(max-width:1199px){
     .sub-top {background-position: center!important; height: 20em;}


     /* 1 */
    #component9794 div > div {width: 100%!important;}
    #component9794 div > div.col-sm-7 {padding-right: 15px!important;}
    #component9794 div > div.col-sm-7 > p img {width: 100%;}
    #component9794 div > div.col-sm-5 {padding-left: 15px!important;}
    #component9794 div > div.col-sm-5 > div > div:nth-of-type(2) > div {text-align: center!important;}

    /* 4 */
    #component7685 div > div > div > span {font-size: 1em!important;}

    /* 5 */

}


@media(max-width:991px) {
    .sub-top { height: 12em;}
    
    /* 1 */
    #component2955 div > #unit8834 > p {font-size: 1.2em!important;}
    #component7685 div > #unit3908 > div {padding: 2em!important;}
    #component7685 div > div.col-sm-4 > div {padding: 1.5em!important; height: unset!important;  line-height: 160%;}
    #component7685 div > div.col-sm-4 > div > span:nth-of-type(1) {font-size: 1em!important;  line-height: 160%;}
    #component7685 div > div.col-sm-4 > div > span:nth-of-type(2) {font-size: 1em!important;  line-height: 160%;}
    #component7685 div > div.col-sm-6 > div > span:nth-of-type(2) {font-size: 1em!important;  line-height: 160%;}
	#component7685 div > div.col-sm-12 > div > span:nth-of-type(2) {font-size: 1em!important; line-height: 160%;}
    #component1994 #unit2066 > div {padding: 2em!important; font-size: 1em!important;}
    #component5206 #unit8831 > .map_01 {font-size: 1em!important;}
    #component5206 #unit8831 > .map_01 td {padding:1em!important; }



    /* 4 */
    #component7685 div > #unit3908 > div, #component7685 div > #unit2656 > div {height: auto!important; padding: 1em!important;}


}


@media(max-width:767px){
    #content {margin: 3em auto 1.5em;}
    .subject-title {font-size: 2em; /*padding-bottom: 0;*/}
    .subgnb-home {padding-bottom: 1em;}
    .subgnb-home a {font-size: 1.3em;}
     .sub-top { height: 7em;}
     .sub-top-btn li a, .sub-btm-btn li a {font-size: 1.3em;}
     .sub-btm-btn {margin-top: 2em;}
     .sub-btn-group {padding-bottom: 2.5em;}

    /* 1 */
    #component2955 div > #unit8834 > p { font-size: .9em !important; }
    #component2955 div > #unit8834 {margin: 0 auto 2em!important;}
    #component5866 #unit6405 {margin: 0 auto!important;}
    #component5866 #unit6405 > p {font-size: .9em!important;}
    #component5866 #unit6405 > div {font-size: 1em!important;}
    #component7267 #unit3249 div > div > span {font-size: 1.4em!important;}
    #component1336 #unit9974 > div {padding: 3em 1.5em!important;}
    #component1336 #unit9974 > div > span:nth-of-type(1) {font-size: 1.1em!important;}
    #component1336 #unit9974 > div > span {font-size: 1em!important;}
    #component6758 div > #unit1064 {position: relative !important; top: 0!important;}
    #component6758 div > #unit1064 > div {border-top: unset!important; font-size: 2em!important;}
    #component6758 div > #unit3267 > .history_011 td {font-size: .9em!important;}
    #component1932 #unit3575 > div {font-size: 1.3em!important;}
    #component6415 #unit8206 {overflow-x: scroll;}
    #component6415 #unit8206 > .worship_01 {font-size: .9em!important; white-space: nowrap;}
    #component6415 #unit8206 > .worship_01 tr:first-child {font-size: 1em!important;}
    #component7685 div > div.col-sm-4 > div {padding: 1.5em!important; margin-bottom: 1em;}
    #component1336 #unit9974 > div > .mission_02 {font-size: 1em!important;}
    #component5206 #unit8831 > .map_01 td:first-child {font-size: 1em!important;}
    
    #component8769 {margin-bottom: 1em!important;}
    #component8769 div > #unit2994 {padding: 0 0 0!important;}
    #component7029 #unit6837 > div > div {font-size: 1em!important;}
    #component9794 div > div.col-sm-5 > div > div:nth-of-type(2) > div > div {font-size: 1em!important;}
    #component7029 #unit6837 > div {padding: 1.5em!important;}
    #component7029 #unit6837 > div > div > span {font-size: 1em!important;}


    /* 4 */
    #component1250 div > div.col-sm-4 {margin-bottom: 1em!important;}
    #component7685 div > div > div  {margin-bottom: 1em!important;}
    #component1250 div > div {margin-bottom: 1em!important;}
    #component6096 #unit1878 > div, #component1336 #unit9974 > div  {overflow-x: scroll; padding: 1.5em!important;}
    #component6096 #unit1878 > div > span {font-size: 1.0em!important;}
    .mission_01 tr td, .mission_01 tr td span
    /*#component6096 #unit1878 > div .mission_01 tr td, #component6096 #unit1878 > div .mission_01 tr td span*/ {font-size: .85em!important; white-space: nowrap;}

    /* 5 */
    #component4460 #unit6651 > div { padding: 1em!important;}
    #component4460 #unit6651 > div > span {font-size: 1em!important;}

    #dimodeBoard .board-actions .board-actions-left .action-search { width: auto!important;}
    #dimodeBoard .board-actions .board-actions-left { min-width: auto!important;}
}

@media(max-width:500px) {
    .board-theme .theme-list table tbody td.document-title a {font-size: 1em!important;}


     .sub-top { height: 5em;}
     .subgnb-home a { font-size: 1em;}
    .sub-btn-group {flex-wrap: wrap;}
    .sub-btn-group button {width: 45%;}
    .board-theme .theme-list {overflow-x: scroll!important;}
    .board-theme .theme-list table th, .board-theme .theme-list table td {white-space: nowrap;}
    #recent-sermon-cont .recentInfo-sub, #recent-sermon-cont .recentInfo-date {font-size: .7em!important;}


    #component7267 #unit3249 > div {background-position: 65% 100%!important;}
    #component7267 #unit3249 div > div > span {font-size: 1.1em!important;}
    #component1994 #unit2066 > div {padding: 1.5em!important; font-size: .9em!important;}

    /* 1 */
    #component7029 #unit6837 > div > div, 
    #component9794 div > div.col-sm-5 > div > div:nth-of-type(2) > div > div > span {font-size: .9em!important;} 
    #component9794 div > div.col-sm-5 > div > div:nth-of-type(2) > div > div {font-size: .85em!important; margin-bottom: 10px;}
    #component9794 div > div.col-sm-5 > div > div:nth-of-type(2) > div {text-align: left!important;}

    /* 5 */
    #component1994 #unit2066 div {overflow-x: scroll;}
    #component1994 #unit2066 div .table tbody > tr > td , #component1994 #unit2066 div .table tbody > tr {white-space: nowrap; font-size: 1em!important;}
	#component8769 #unit3293{text-align:center;}
	#component2099 #unit9732{max-width:210px;margin: 0 auto;}

}
