/* common */
.greeting a.btn {position: relative; display: flex; justify-content: space-between; align-items: center; width: 180px; padding: 15px 20px; overflow: hidden; z-index: 1;}
.greeting a.btn::before, .greeting a.btn::after {content: ''; position: absolute; transition: .3s; z-index: -1;}
.greeting a.btn::before {inset: 0; padding: 1px; border-radius: 25px; background: linear-gradient(to top, #4e74d5, #31b0c9); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.greeting a.btn::after {left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, #4e74d5, #31b0c9); border-radius: 25px; opacity: 0;}
.greeting a.btn:hover::before {opacity: 0;}
.greeting a.btn:hover::after {opacity: 1;}
.greeting .btn span {font-size: 14px; font-weight: 300; color:#1791a9; transition: .3s;}
.greeting .btn:hover span {color: #fff;}
.greeting .btn .arrow {position: relative; width: 16px; height: 12px;}
.greeting .btn .arrow img {position: absolute; left: 0; top: 0; transition: .3s;}
.greeting .btn .arrow img:nth-child(1) {opacity: 1;}
.greeting .btn .arrow img:nth-child(2) {opacity: 0;}
.greeting .btn:hover .arrow img:nth-child(1) {opacity: 0;}
.greeting .btn:hover .arrow img:nth-child(2) {opacity: 1;}
.greeting .title-group .obj {margin-bottom: 12px;}
.greeting .title-group .obj span {display: inline-block; width: 10px; height: 10px; border-radius: 2px;}
.greeting .title-group .obj span + span {margin-left: 10px;}
.greeting .title-group .obj span:nth-child(1) {background: linear-gradient(to top, #4e74d5, #31b0c9);}
.greeting .title-group .obj span:nth-child(2) {background: linear-gradient(to top, rgba(78, 116, 213, .62), rgba(49, 176, 201, .62));}
.greeting .title-group .obj span:nth-child(3) {background: linear-gradient(to top, rgba(78, 116, 213, .28), rgba(49, 176, 201, .28));}
.greeting .title-group .title {font-family: 'Orbitron', sans-serif; font-size: 50px; font-weight: 700; color: #000; text-transform: uppercase;}

/* greeting */
.greeting {position: relative; background: #fff; overflow: hidden;}
.greeting::before {content: ''; position: absolute; right: 0; bottom: 0; width: 612px; height: 439px; background: url("../img/gree_obj1.png") no-repeat center/cover;}
.greeting .inner {padding: 85px 0 150px; display: flex; justify-content: space-between;}
.greeting .title-group {width: 289px;}
.greeting .content-group {margin-top: 100px; width: calc(100% - 394px);}
.greeting .content-group .description {font-size: 18px; font-weight: 400; letter-spacing: -0.09px; color: #5e6074; line-height: 31px;}
.greeting .content-group .description b {font-size: 25px; font-weight: 700; color: #000; letter-spacing: -0.13px; line-height: 41px; white-space: nowrap;}
.greeting .signature {display: flex; align-items: center; margin-top: 70px;}
.greeting .signature span {font-size: 18px; font-weight: 700; color: #333; margin-right: 23px;}

/* media query */
@media screen and (max-width: 1700px) {
    /* common */
    .greeting .inner {padding: 85px 20px 150px;}
}

@media screen and (max-width: 1500px) {
    .greeting .content-group .description b {white-space: normal;}
    .greeting .content-group .description br:not(.only-m) {display: none;}
}

@media screen and (max-width: 1400px) {
    /* common */
    .greeting .inner {padding: 85px 60px 150px;}

}

@media screen and (max-width: 1300px) {
    /* common */
    .greeting .title-group .title {font-size: 45px;}

    .greeting .title-group {width: 20%;}
    .greeting .content-group {width: 65%;}
}

@media screen and (max-width: 1200px) {
    .greeting .content-group .description {line-height: 1.8em;}
    .greeting .signature span, .greeting .content-group .description {font-size: 17px;}
    .greeting .content-group .description b {font-size: 22px; line-height: 1.6em;}
}

@media screen and (max-width: 1023px) {
    /* common */
    .greeting .inner {padding: 80px 60px; flex-direction: column;}
    .greeting .title-group .title {font-size: 43px;}

    .greeting::before {background-image: url("../img/gree_obj1_m.png");}
    .greeting .title-group, .greeting .content-group {width: 100%; text-align: center;}
    .greeting .content-group {margin-top: 50px;}
    .greeting .signature {justify-content: center;}


}

@media screen and (max-width: 767px) {
    /* common */
    .greeting .inner {padding: 60px 40px;}
    .greeting .title-group .title {font-size: 40px;}

    .greeting .content-group {margin-top: 40px;}
    .greeting .content-group .description b {font-size: 20px;}
    .greeting .signature span, .greeting .content-group .description {font-size: 16px;}
    .greeting .content-group .description {}


}

@media screen and (max-width: 600px) {
    /* common */
    .greeting .title-group .title {font-size: 35px;}
}

@media screen and (max-width: 480px) {
    /* common */
    .greeting .inner {padding: 60px 20px;}
    .greeting .title-group .title {font-size: 30px;}
    .greeting .btn span {font-size: 13px;}

    .greeting .content-group {margin-top: 35px;}
    .greeting .signature span, .greeting .content-group .description {font-size: 14px;}
    .greeting .content-group .description b {font-size: 18px;}
    .greeting .signature {margin-top: 45px;}
}