@import url('https://fonts.googleapis.com/css2?family=Sassy+Frass&display=swap');

/* ******************** introduction1.html ******************** */
#contents { margin: 80px auto 0; text-align: center; }
.title { width: 100%; height: 330px; padding: 80px 0; background: url(../img/introdution00.jpg) no-repeat; }
.title h1 { font-size: 40px; font-weight: 400; color: #fff; }
.title p { padding-top: 8px; font-size: 18px; color: #fff; }
.int { margin: 100px auto; text-align: center; }
.int img { padding: 80px 0; width: 100%; }
.int h1 { font-size: 40px; font-weight: 300; }
.motion { float: left; text-align: left; }
.motion h2 { font-size: 40px; font-weight: 200; }
.motion .mt { font-size: 40px; font-weight: 500; }
.texts { float: right; text-align: left; }
.texts p { margin-bottom: 30px; font-size: 16px; }
.texts .font1 { margin: 0; padding-top: 30px; font-size: 34px; font-family: 'Sassy Frass', cursive; }


@keyframes motion{
    0%{transform:translate(0,0);}
    100%{transform:translate(0,50px);}
 }
.motion { animation: motion 2s infinite alternate; }

/* ******************** introduction2.html ******************** */
.cont { margin: 100px auto; text-align: center; }
.cont h1 { font-size: 40px; font-weight: 300; }
.cont .cimg { height: 22px; margin: 0 10px 5px 0; }
.lr { padding: 80px 0 60px; }
.left { float: left; width: 40%; padding-top: 3%; text-align: left; }
.left h1 { font-size: 2.5rem; color: #244c70; }
.left h2 { margin-bottom: 60px; font-size: 2rem; font-weight: 400; }
.left h3 { font-size: 1.2rem; font-weight: 500; }
.left p { margin: 10px 0 30px; font-size: 1rem; font-weight: 500; color: #888; }
.right { float: right; width: 60%; text-align: left; }
/* #daumRoughmapContainer1754503706150 { width: 100%; } */
.lr .cont { display: none; }
.mobile { display: none; }
.way { margin: 0 auto; text-align: left; }
.way p { margin-bottom: 15px; font-size: 16px; font-weight: 500; }
table { width: 100%; border-collapse: collapse; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
table th { width: 12%; }
strong { display: inline-block; padding-bottom: 8px; }
th { border-bottom: 1px solid #ddd; text-align: center; background: #f9f9f9; }
td { height: 50px; line-height: 22px; padding: 10px 0 10px 30px; border-bottom: 1px solid #ddd; text-align: left; }
.text1 { width: 12%; font-weight: 600; text-align: left; }
.text1 img{ margin-right: 10px; }
.text2 { width: 76%; text-align: left; }

/* ＊＊＊＊＊＊＊＊＊＊ 반응형 ＊＊＊＊＊＊＊＊＊＊ */
/* Tablet */
@media all and (max-width:1024px) {
    /* introduction1 */
    #contents { margin: 60px auto 0; }
    .title { background: url(../img/introdution00.jpg) no-repeat top; }
    .motion .h2 { font-size: 36px; }
    .motion .mt { font-size: 36px; }
    /* introduction2 */
    .left { padding-top: 0; }
    
}

/* Mobile1 */
@media all and (max-width:780px) {
    /* introduction1 */
    .int img { padding: 80px 0 40px; }
    .motion { display: none; }
    .texts { float: none; }
    /* introduction2 */
    .left { padding-top: 3%; }
    .left h1 { font-size: 42px; }
    .left h2 { font-size: 32px; }
    .right .pc { display: none; }
    .right .mobile { display: inline-block; width: 100%; }
    td { padding: 10px 0 10px 10px; }
    table th { width: 16%; }
    .text1 { width: 16%; }
}

/* Mobile2 */
@media all and (max-width:430px) {
    /* introduction1 */
    .title { height: 240px; }
    .int { margin: 60px auto; }
    .int img { padding: 60px 0 40px; }
    /* introduction2 */
    .cont { margin: 60px auto; }
    .lr { padding: 60px 0; }
    .left { width: 100%; padding-top: 0; }
    .left h2 { margin-bottom: 30px; }
    .right { width: 100%; }
    table th { width: 26%; }
    .text1 { display: none; }
    
}
/* Mobile3 */
@media all and (max-width:380px) {
    /* introduction1 */

    /* introduction2 */
    .left p { width: 240px; }
    
}