*{
    /* color  */
    /* --white-color : #f0f4f5; */
    --white-color: #f3f9fb;
    --black-color : #263343;
    --gray-color : #808080 ;
    --blue-color : #5eacb9;
    --darkblue-color : #19345f;

    /* font  */
    font-family: 'Noto Sans KR', sans-serif;
    list-style: none;
    text-decoration: none;
    border-collapse: collapse;
    margin:0px;
    padding: 0px;
    color : var(--black-color);
    font-size : 12px;
}

h1{
    font-size : 2rem;            /*36px*/
    padding : 0rem 1rem;        /*12px 12px*/
    
    color: var(--black-color);
    margin-bottom : 1rem;
    
}
h2{
    font-size : 1.5rem;          /*18px*/
    padding : 0rem 1rem;        /*12px 12px*/
    color : var(--gray-color);
    margin-bottom : 0.5rem;
}

/* ---------------------------------------------------- */

.container{
    margin: 0 auto;
    width: 99vw; 
    height: 100vh;

    /* border: 1px solid red; */

}

.mainimage{
    background-image: url("images/akira-hojo-_86u_Y0oAaM-unsplash.jpg");
    background-position: center center;
    background-repeat:no-repeat;
}

/* Start of top title naviagation  */
/* -------------------------------------------- */
.navigator{
    margin: 0 auto;
    padding : 0 0;
    display:flex;
    justify-content:space-between;
    align-items : center;
    width : 60%;
    padding :1rem 1rem; 
 
}

.navigator a{
    font-size : 1.5rem;
    padding :1rem 1rem; 
    font-weight: bold;
}
.navbar_menu{
    /* margin: 0 auto; */
    padding : 0 0;
    display:flex;
    justify-content:left;
    align-items : center;
    width : 100%;
    padding :1rem 1rem; 

    list-style: none;
    padding-left:0;
}

.toggle_button{
    display:none;
    position:absolute;
    right:24px;
    top :12px;
    /* width:12px; */
}
.toggle_button img{width:24px;}
/* ---------------------------------------------------- */
/* end of top title navagation */

.maintitle{
    font-family: 'Nanum Pen Script', cursive;
    padding-top: 6rem;
    padding-bottom: 3rem;
    font-size : 10rem;
    text-align : center;
    color : white;
}
.subtitle{
    font-family: 'Nanum Pen Script', cursive;
    font-size : 6rem;
    text-align : center;
    color : white;
} 

.sub_container{
    margin: 6rem auto;
    padding: 0 0 0 0;
    
    width: 60vw;
    height:auto;
    /* height auto라서 content에 따라서 커짐.  */
    max-width : 1280px;
    min-width : 320px;
    
    display: flex;
    flex-direction: column;
    overflow: hidden;   
    /* border: 1px solid red; */
     
}

.button_container{
    height : 100%;
    /* border: 2px solid green; */
}

.buttonlist{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    position:relative;
    
    top:25%; 
    left:-20%; 
    
}


.buttons {
    
    margin : 1rem auto;
    
    color: white;
    background-color: transparent;
    border-style: solid;
    border-width: 2px;
    border-color: white;
    border-radius: 0 0 0 0;

        
    display: flex;
    justify-content: center;
    align-items: center;
   
    width : 240px;
    height: 48px;   

    font-size: 1.5rem;;
    
}

.buttons:hover{
   color:#1a6c7a;
   background-color: white;
}


.cards {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;  
}

.card_content {
    margin : 1rem auto;
    /* 카드 이미지 사이에 간격을 두기 위해 1rem둠 */
    
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
   
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    filter:saturate(50%);
    
    width : 30%;
    height: 30vh;
    
    min-height : 160px;
}

.card_content:hover{
   opacity:0.5;   
}



.card_content p {
    text-align : center;
    color : white;
    font-size : 2rem;
}

.card_name {
    text-align:left;
    color :var(--black-color);
    font-size : 1rem;
}
  
.card_image1{
    background-image: url("images/cardimage_1.png");  
}
.card_image2{
    background-image: url("images/cardimage_2.jpg");  
}

.card_image3{
    background-image: url("images/jacob-bentzinger-umPArAr0g30-unsplash.jpg");  
}

.card_image4{    /*어린이예배*/
    background-image: url("images/david-beale-YGJyFwmEC68-unsplash.jpg");  
}

.card_image5{    /*찬양예배*/
    background-image: url("images/edward-cisneros-QSa-uv4WJ0k-unsplash.jpg");  
}

.welcome_contents{
    padding-top : 1rem;
    display:flex;
    flex-direction :row;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items:stretch;
    /* border: 2px solid red; */
    
}

.box1{
    flex:1;   
    /* border: 1px solid red; */
}
.box2{
    flex:2;
    color:#5eacb9;
    /* border: 1px solid blue; */
}

.box1 span{
    padding: 0 0;
    font-size: 2rem;
    color : var(--gray-color);
    font-weight: bold;
}

.box1 h1 {
    font-weight: bold;
    color : var(--gray-color);
}


.box2 h2{
    color:#5eacb9;
}

.footnote{
    display:flex;
    flex-direction :row;
    flex-wrap:nowrap;
    justify-content:left;
    align-items:center;
}

.footnote img{
    align-items: center;
}

.mission_box{
    margin: 0 auto;
    height:100%;
    display: flex;
    flex-direction:column;

    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.mission_box h2{
    margin : 0 auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
}


.sub_image {
    height : 60vh;
    background-image: url("images/HDchurch.png");
    background-position-x: center;
    background-position-y: bottom;
    background-repeat:no-repeat;
    /* background-attachment: fixed; */
    background-size : cover;
    
}

.mission_image{
    background-image: url("images/world-map-146505_1280.png");
    background-position: center center;
    background-repeat:no-repeat;
    background-size:contain;
    height:60vh;
    background-color: var(--white-color);
    color:azure

}

.image_overlay {
    width:100%;
    height:100%;
    background-color: transparent;
/* background-image: radial-gradient(at center center,#153243 0%,#1a6c7a  100%);  */
    background-image: radial-gradient(at center center, #153243 0%, #1a6c7a 100%);
    opacity: .6;
    transition: background .3s,border-radius .3s,opacity .3s;
}


.test img{
    color : azure;
}



@media screen and (min-width:200px) and (max-width:800px) {
        
    h1{font-size : 1.5rem;}
    h2{font-size : 1rem;}

    .navigator{
        width:100%;
        flex-direction: space-between;
    }
    .navigator a {
       font-size:1.2rem;
       padding-top:0.5rem;
       padding-left:0.5rem; 
    }

    .fullscreen_menu{
        display:none;
    }
    .navbar_menu {
        display:none;
        flex-direction: column;
        align-items:center;
        width:100%;
    }
    .navbar_menu li{
        width:100%;
        text-align:center;
        padding-top:1rem;
        /* border-bottom: 1px solid var(--black-color); */
        /* padding : 1rem 1rem; */
    }
    
    .navbar_menu.active{
        display:flex;
    }

    .toggle_button{
        display:block;
        /* width:1.5rem; */
    } 

    .title a{
        padding : 0 0;
        font-size : 1rem;
    }

    .maintitle{
        padding-top : 2rem;
        padding-bottom : 1rem;
        font-size : 5rem;
        text-align : center;
        color : var(--white-color);
        max-height : 100vh;
    }

    .subtitle{
        font-family: 'Nanum Pen Script', cursive;
        font-size : 3rem;
        text-align : center;
        color : var(--white-color); 
    }
    
    .sub_container{
        width: 99vw;
        height: auto;
    }

    .sub_image {
        width: 99vw; 
        height:50vh;
        max-height : 50vh;
        background-size:cover;
        background-position:center center;
        background-attachment:initial;
    }

    .card_content {
        
        width : 80%;
        height: 30vh;
        min-height : 160px;
    }
    
    .welcome_contents{
        width : 99vw;
    }

    .box1{
        margin : 0 auto;
        width : 90%;    
        padding : 1rem 1rem 1rem 1rem;
        flex:auto;
        /* border: 2px solid red; */
        
    }

    .box1 span{
        font-size: 2rem; 
        font-size: 2.5rem;
        font-weight:bold;
        
    }

    .button_container{
        height : 100%;
        padding-left: 8rem;
        
    }

    .buttonlist{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position:relative;
        
        top:14%; 
        left:-30%;
    }

}