:root {
    --mid-font-size: 24px;
    --green-color: #00ca6e;
    --dark-green-color: #002b13;
    --dialog-ballon-color: #f2f2f2;
}
.inviteWrap {min-width: 1024px;font-size: var(--mid-font-size);text-align: center;}
.inviteWrap .inviteKV {display: flex;background-image: url('/images/W/invite/intro_top_base.png');min-height: 958px;flex-direction: column;justify-content: space-between;align-items: center;}
.inviteWrap .introTopTitle {display: block;background-image: url('/images/W/invite/intro_top_title.png');background-repeat: no-repeat;background-position-x: 50%;background-position-y: bottom; height: 56px;}
.inviteWrap .introTopBottom {background-image: url('/images/W/invite/intro_top_bottom.png');background-repeat: no-repeat;background-position-x: 50%;min-height: 395px;width: 100%;}

.inviteWrap .inviteContent .description {background-image: url('/images/W/invite/intro_mid_1_base.png');min-height: 449px;display: flex;flex-direction: column;justify-content: space-between;}
.inviteWrap .inviteContent .description .introMid1Top {background-image: url('/images/W/invite/intro_mid_1_top.png');background-repeat: no-repeat;background-position-x: 50%;background-position-y: 100%;min-height: 56px;display: block;}
.inviteWrap .inviteContent .description .introMid1Bottom {background-image: url('/images/W/invite/intro_mid_1_bottom.png');background-repeat: no-repeat;background-position-x: 50%;height: 118px;}

.inviteWrap .inviteContent .howParticipate { background: url('/images/W/invite/intro_mid_2_base.png'); display: flex; flex-direction: column;justify-content: space-between; }
.inviteWrap .inviteContent .infoBox {display: flex;justify-content: center;height: 350px;margin-top: 20px;margin-bottom: 70px;}
.inviteWrap .inviteContent .nextIcon {display: flex;flex-basis: 150px;width: 30px;background: url('/images/W/invite/intro_mid_2_arrow.png') no-repeat;background-position: center calc( 100% - 0.5em - 34px);}
.inviteWrap .inviteContent .infoInner {display: flex;-ms-flex-align: center;-webkit-align-items: center;-webkit-box-align: center;align-items: center;justify-content: flex-end;flex-direction: column;flex-basis: 300px;font-size: 20px;background-position: 50% top;}
.inviteWrap .inviteContent .infoBox1 {background: url('/images/W/invite/intro_mid_2_infobox1.png') no-repeat 50% top;}
.inviteWrap .inviteContent .infoBox2 { background: url('/images/W/invite/intro_mid_2_infobox2.png') no-repeat 50% top; }
.inviteWrap .inviteContent .infoBox3 { background: url('/images/W/invite/intro_mid_2_infobox3.png') no-repeat 50% top; }


.inviteWrap .inviteContent .linkPage {display: flex;background: url('/images/W/invite/intro_mid_3_base.png') no-repeat;min-height: 457px;justify-content: center;align-items: center;padding: 0 110px;}
.inviteWrap .inviteContent .linkPage .verticalLine {background: url('/images/W/invite/intro_mid_3_line.png') no-repeat;flex-basis: 280px;height: 475px;background-position: center;}
.inviteWrap .inviteContent .linkBox {display: flex;flex-direction: column;justify-content: flex-start;width: 450px;align-items: center;}

.inviteWrap .inviteFooter {background-image: url('/images/W/invite/intro_bottom_base.png');min-height: 457px;color: #fff;text-align: left;padding: 0 110px;display: flex;flex-direction: column;align-items: center;}
.inviteWrap .inviteFooter .content { display: flex; flex-direction: column; }
.inviteWrap .textGreen {color: var(--green-color);}
.inviteWrap .textDarkGreen {color: var(--dark-green-color);}
.inviteWrap .boxGreenRound {border-radius: 50em;background-color: var(--green-color);padding: 1px 0.8em;color: #f1fcf7;}
.inviteWrap .btnBox {height: 80px;width: 100%;font-size: 24px;border: 0px;margin-bottom: 0.5em;}
.inviteWrap .btnGreen {background-color: var(--green-color);padding: 1px 0.8em;color: #f1fcf7;}
.inviteWrap .btnBlack { background-color: #000;padding: 1px 0.8em;color: #f1fcf7;}
.inviteWrap .eventPeriod { padding-bottom: 0.8em; }
.inviteWrap .headerTitle {font-size: 2.2em;font-weight: 400;letter-spacing: 1.4px;word-spacing: 0.1em;margin-bottom: 25px;}
.inviteWrap .headerGroup {margin-top: 90px;margin-bottom: 30px;}
.inviteWrap .textContent { margin-bottom: 0.8em; }
.inviteWrap .eventPeriod { font-weight: 500; letter-spacing: -1px; }
.inviteWrap .bold {font-weight: 500;}
.inviteWrap .h3 { font-size: 1.8em; }
.inviteWrap .underline { text-decoration: underline; }
/*.inviteWrap .speechBubble { margin-top: 45px; margin-bottom: 45px; background: url('/images/W/invite/intro_speech_box.png') no-repeat; }*/
.inviteWrap .inviteFooter li {list-style-type: '- ';font-size: 18px;margin: 5px 5px;}



.rectangle-speech-border {
    position:
            relative;
    padding: 0.2em 2em;
    width: fit-content;
    margin: 1em 0 2em;
    background-color: var(--dialog-ballon-color);
    /* border: 0px solid #f2f2f2; */
    text-align:
            center;
    color:#333;
    /* background:#fff; */
    /* css3 */
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}

/* creates larger curve */
.rectangle-speech-border:before {
    content: '';
    position: absolute;
    z-index:10;
    bottom: -14px;
    left: 78%;
    width: 15px;
    height: 14px;
    border-right:18px solid var(--dialog-ballon-color);
    background: var(--dialog-ballon-color);
    /* css3 */
    -webkit-border-bottom-right-radius: 40px 26px;
    -moz-border-radius-bottomright: 40px 26px;
    border-bottom-right-radius: 40px 26px;
    /* reduce the damage in FF3.0 */
    /* background-color: f2f2f2; */
}

/* creates smaller curve */
.rectangle-speech-border:after {
    content: '';
    position: absolute;
    z-index:10;
    bottom: -14px;
    left: calc(78% + 31px);
    width:18px;
    height: 14px;
    background:#fff; /* 부모 백그라운드에 맞춰야 함 */
    /* css3 */
    -webkit-border-bottom-right-radius: 30px 30px;
    -moz-border-radius-bottomright: 30px 30px;
    border-bottom-right-radius: 30px 30px;

    /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
    -webkit-transform: translate(-34px, 0px);
    -moz-transform: translate(-34px, 0px);
    -ms-transform: translate(-34px, 0px);
    -o-transform: translate(-34px, 0px);
    transform: translate(-34px, 0px);
}
.inviteKV .rectangle-speech-border:after { background: #d5ece4; }