html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    background-color: #F3F3F3;
}

.wrapper {
    margin: 0 auto;
    width: 60%;
    font-family: arial;sans-serif;굴림체;黑体;
    color: #0f3850;
    background-color: #ffffff;
}
/* header */
.header  {
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-end;
}
.logo    {
    padding:30px 0px 15px 30px;
    flex:40%;
} 
.logo img   {
    max-width:100%;
}

.lang ul{
    padding-right: 10px;
    display: flex;
}
.lang ul li:not(:last-child):after {
    content: "ㅣ";
    float: right;
    color: #C1C1C1;
}

.lang ul li a {
    color: grey;
 /* font-size: 13px; */
    padding: 0px 5px;
    text-decoration:none;  
}

.lang ul li a:active {
    text-decoration: underline;
}

.lang ul li a:hover {
    text-decoration: underline;
}

.menubar {
    background-color: #0f3850;
    height:auto;
    width:100%;  
}
.menubar ul{
   display:flex;
   justify-content:space-evenly;
   align-items:center; 
}

.menubar ul li a {
    color: #ffffff;
    text-decoration:none;
    padding:16px;
}

.menubar ul li a:active {
    background-color: #265667;

}

.menubar ul li a:hover {
    background-color: #265667;
}
ul, li      {
    list-style-type: none;
}

/* footer */
.footer {
    background-color: #f1f6f9;
    line-height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 /* font-size: 15px; */
    width: 100%;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*index.html*/
h1 {
/*  font-size: 70px; */
    font-weight: 400;
    text-align: center;
    letter-spacing: 2px;
    line-height: 1.20;
    transform: scale(.6, 1);
}

hr {
    width: 70%;
    height: 10px;
    background-color: #265667;
    border: 0;
}

.center-hr {
    margin-left: auto;
    margin-right: auto;
}

h2 {
 /* font-size: 50px; */
    font-weight: inherit;
    text-align: center;
    line-height: 1.20;
    transform: scale(.8, 1);
}
h3  {
    text-align:center;
    line-height:1.20;
}
.text {
/*  font-size: 18px; */
    width: 75%;
    vertical-align: baseline;
    line-height: 2.0;
    text-align: justify;
    padding-bottom: 60px;
    margin: auto;
}
.tutor img{
    max-width:100%;
    vertical-align:top;
    margin:auto;
}
/*about html*/
.advantage-1 {  
    display:flex;
    flex-direction:row;
    padding:30px; 
    background-color: #ecf3f6;   
}
.advantage-2 {
    display:flex;
    flex-direction:row;
    padding:30px;
    background-color: #f5f9fb;
}

.advantage-3 {
    display:flex;
    flex-direction:row;
    padding:30px;
    background-color: #ffffff;
}

.photo {
    flex: 40%;
    justify-content: center;
    align-items: center;
}
.photo img  {
    max-width:100%;
} 
.explain {
    flex: 60%;
 /* font-size: 18px; */
    line-height: 1.8;
    justify-content: center;
    align-items: center;
    margin: 0 50px;
}

/*blog.html */
.post-container {
    width: 80%;
    margin: auto;
    border-top: 2px solid #000;
    border-bottom: 1px solid #000;
    display:flex;
    flex-wrap:wrap;
}

.post-list:second-child {
    border-top: 1px solid #999;
}

.post-list:not(:first-child) {
    border-top: 1px solid #ddd;
}

.post-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-weight: 500;
}

.post-list li a {
    text-decoration:none;
}
.post-number,
.post-title,
.post-date {
    padding: 10px;
}

.post-number {
    flex: 33.33%;
    justify-content: center;
}

.post-title {
    flex: 33.33%;
}

.post-date {
    flex: 33.33%;
}

a:active {
    color: #0f3850;
}

.pagination-container {
    display: flex;
    justify-content: center;
}

.pagination-number .pagination-button {
    display: flex;
    width: 32px;
    height: 32px;
    font-family: "arial", sans-serif;
/*  font-size: 16px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

}

.pagination-number .pagination-button:hover {
    background: #C5C5e9;
    color: #fff;
}

.pagination-button.active {
    color: #fff;
    background: #003859;
}

/*post_display html*/
.post-display {
    width: 80%;
    border-top: 2px solid #000;
    margin: auto;
}

 .headline {
    padding:20px 10px;
    border-bottom: 1px dashed #ddd;
 /* font-size: 18px; */
}

.info {
    padding: 0 15px;
    border-bottom: 1px solid #999;
    font-size: 0;
}

.info dl {
    display: inline-block;
    position: relative;
/*    padding: 5px 40px; */
}

.info dl:first-child {
    padding-left: 0;
}

.info dl:not(:first-child):before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 1px;
    height: 15px;
    background: #999;
    display: block
}

.info dl dd,
.info dl dt {
    display: inline-block;
/*  font-size: 17px; */
}

.info dl dd {
    margin-left: 20px;
    color: #777;
}

.content {
    line-height: 160%;
    text-align: justify;
}

.excerpt {

    color: #439496;
}

/*contact.html */
.map img   {
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:100%
}

.location {
    width: 80%;
    margin: auto;
 /* font-size:18px; */
    line-height:2.2;
    padding-left:50px;
}

/* responsive web page */
@media screen and (min-width: 801px) {
/*  font-size  */
    h1   {
        font-size:70px;
    }
    h2   {
        font-size:50px;
    }
    .h3,
    .headline  {
        font-size:25px;
    }
    .menubar ul li a,
    .text, 
    .explain
    .location,    
    .content,
    .post-number,
    .post-title,
    .post-date,
    .info dl dd,
    .info dl dt    {
        font-size:18px;
    }
    .pagination-number, 
    .pagination-button, 
    .footer {
        font-size:15px;
    }
    .lang ul li a   {
        font-size:13px;
    }
    .advantage   {
        display:flex;
        flex-direction:row;
    }

/* blog page */
    .post-number,
    .post-title,
    .post-date {
        text-indent: 10px;
    }
    
    .post-number {
        flex: 33.33%;
        justify-content: center;
    }
    
    .post-title {
        flex: 33.33%;
    }
    .post-date {
        flex: 33.33%;
    }
    .info dl    {
        padding:5px 40px;
    }
}

@media screen and (max-width: 800px) {
/* font-size */
    h1   {
        font-size:30px;
    }
    h2   {
        font-size:20px;
    }
    .h3,
    .headline    {
        font-size:16px;
    }
    .menubar ul li a,
    .text, 
    .explain,
    .location, 
    .content,
    .post-title,
    .post-date,
    .info dl dd,
    .info dl dt   {
        font-size:14px;
    }

    .pagination-number, 
    .pagination-button, 
    .lang ul li a,
    .footer             {
        font-size:11px;
    }
/* about page */
.advantage-1,
.advantage-2,
.advantage-3 {  
    display:flex;
    flex-direction:column;
  }

 /* blog page */
.post-number    {
    display:none;
}
.post-title,
.post-date {
    text-indent: 10px;
}

.post-title {
    width: 50%;
}
.post-date {
    width: 50%;
    } 
/* post display page */
.info dl    {
    padding:5px 20px;
    }
}