/* ========== 합격응원이벤트 - 초대장 만들기 ========== */
@font-face {
    font-family: 'NotoSerifKR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
    .invite_wrap { width: 100%; height:100%;  font-size: 18px; line-height: 150%; padding-bottom: 150px ; position: relative;
         background: linear-gradient(rgba(0,137,145,0.3), rgba(14, 52, 77, 0.5)),  url('https://eduon.com/images/brand/yst/pc_2019/event/2026/260314_cheerup/invite_bg.png') repeat-x center top #008991;
    }
    .invite_wrap .inner { position: relative; ;}
    .invite_wrap img { width: 100%;}

    .invite_wrap .box.top { max-width: 800px; margin: 0 auto; padding: 20px 0;}
    .invite_wrap .box.top a {display: block; color: #fff; font-size: 18px; text-align: left; padding: 10px;}
    .invite_wrap .cont { background: url('https://eduon.com/images/brand/yst/pc_2019/event/2026/260314_cheerup/invite_img01.png') no-repeat ; background-position: 50% 100%; padding-bottom: 100px;}
    .invite_wrap .cont .box.invite { width: 100%; margin: 0 auto; max-width: 800px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);}
    
    .invite_wrap .box.no01 {  min-height: 340px; box-sizing: border-box;  overflow: hidden; background: #181731;}
    .invite_wrap .box.no01 .inner {  position: relative;  min-height: 340px;}
    .invite_wrap .box.no01 .col.no00 {width: 30%; max-width:100px; text-align: center; position: absolute ; right: 10px; top:10px; z-index: 1;}
    .invite_wrap .box.no01 .col.no01 {width: 100%;  text-align: center; position: absolute ; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}
    .invite_wrap .box.no01 .bg-video  {  
        width:800px ;
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        opacity: 0.3;          /* 영상 투명도 20% */
        z-index: 0;}

    .invite_wrap .box.no01 .col.no01 img { margin: 0 auto; max-width: 410px;}
    .invite_wrap .box.no01 .col.no02 .bg-video { display: none;} 
    .invite_wrap .box.no01 .col.no02 .bg-video.on { display: block;} 
    .invite_wrap .box.no01 .col.no02 .img-video { display: none;}
    .invite_wrap .box.no01 .col.no02 .img-video.on { display: block;         width:800px ;
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        opacity: 1;          /* 영상 투명도 20% */
        z-index: 0;}
    .invite_wrap .box.no01 .col.no02 img { width: 100%;}

    .invite_wrap .box.no02  { background:#fff }
    .invite_wrap .box.no02 .inner {  padding: 80px 60px 30px 60px; text-align: center;}
    .invite_wrap .box.no02 .inner::after {position: absolute; left: 0 ;top: 0; content: "";  display: block; width: 100%; height: 10px;background:url('https://eduon.com/images/brand/yst/pc_2019/event/2026/260314_cheerup/invite_img02.png') no-repeat center center ; z-index: ;} 
    .invite_wrap .box.no02 .col { margin: 0 auto;}
    .invite_wrap .box.no02 .col.profile {position: absolute; left: 50%; transform: translateX(-50%); top:-70px ; width: 140px; height: 140px;  z-index: 1; }
    .invite_wrap .box.no02 .col.profile .img_area { background: #8eb4d0; border-radius: 70px; overflow: hidden;} 
    .invite_wrap .box.no02 .col.profile .img_area img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center;}
    .invite_wrap .box.no02 .col.profile label {  position: absolute ; right: 0; bottom: 0; z-index: 1;  border: 1px solid #666; background: #fff; width: 36px; height: 36px; border-radius: 18px; display: flex;
        box-sizing: border-box; text-align: center; vertical-align: middle; align-items: center; justify-content: center;}
    .invite_wrap .box.no02 .col.profile label i {  font-size: 24px ; color: #111;}
    .invite_wrap .box.no02 .col.name { font-size: 30px; line-height: 150%;font-weight: 500; color: #a35d18; margin-bottom: 30px; font-family: 'NotoSerifKR'; letter-spacing: -0.5px; word-break: keep-all;}
    .invite_wrap .box.no02 .col.name br:last-child { display: none;}
    .invite_wrap .box.no02 .col.txt {}
    .invite_wrap .box.no02 .col.txt textarea {  overflow: hidden; background: #f7f8f9; border: 1px solid #ddd; font-weight: 400;  width: 100%; text-align: center; color: #222; font-size: 17px; line-height: 150%; box-sizing: border-box; min-height: 320px; word-break: keep-all ; }
    .invite_wrap .box.no02 .col.txt textarea:focus { outline: none;}
    .invite_wrap .box.no02 .col.txt textarea::placeholder { color:#555}
    .invite_wrap .box.no02 .col.txt .charCount_area { color: #999; font-size: 14px; text-align: left; margin-bottom: 10px;}
    .invite_wrap .box.no03 { background:#fff }
    .invite_wrap .box.no03 .inner { padding: 0 60px 80px 60px; text-align: center;}
    .invite_wrap .box.no03 .col.info { margin-bottom: 50px; }
    .invite_wrap .box.no03 .col.info ul {}
    .invite_wrap .box.no03 .col.info li { position: relative;  text-align: left; font-size: 16px; line-height: 150%; word-break: keep-all; padding: 2px 10px; color: #999;}
    .invite_wrap .box.no03 .col.info li::before { position: absolute; left: 0; top: 5px; display: block; content: '*';}
    .invite_wrap .box.no03 .col.info li:last-child { color: #d6372a;}
    .invite_wrap .btn_go { display: flex; justify-content: center;}
    .invite_wrap .btn_go button{ display: block; padding: 10px 30px ;  color: #000; border-radius: 5px;  border: 1px solid #000; margin: 0 5px; font-size: 16px; font-weight: 500;}
    .invite_wrap .btn_go button:nth-child(2) { background: #000; color: #fff;}


    @media screen and (max-width: 800px) {
        .invite_wrap { padding-bottom: 16.67vw;}
        .invite_wrap .cont {padding:  0 4.17vw 16.67vw 4.17vw}
        .invite_wrap .box.no01 .col.no01 { padding: 0 4.17vw; }
        .invite_wrap .box.no01 .col.no01 img { width:85%;}
        .invite_wrap .box.no01 .col.no02 .bg-video { width: 100%; }
        .invite_wrap .box.no01 .col.no02 .img-video img { width: 100%;}
        .invite_wrap .box.top a { padding: 10px 4.17vw; font-size: 15px;}
        .invite_wrap .box.no02 .inner { padding:80px 2.78vw 4.17vw 2.78vw; text-align: center;}
        .invite_wrap .box.no03 .inner { padding: 0 2.78vw 16.67vw 2.78vw; text-align: center;}
        .invite_wrap .box.no02  .col.txt textarea { font-size: 15px; padding: 10px;}
        .invite_wrap .box.no02 .col.name { font-size: 24px; }
        .invite_wrap .box.no03 .col.info { margin-bottom: 8.83vw;}
        .invite_mypage.pc_view .invite_wrap .box.no02 .inner { }
    }

    @media screen and (max-width: 480px) {
        .invite_wrap .box.top { padding: 0;}
        .invite_wrap .box.no01 .col.no00 {width: 30%; max-width:60px;}
        .invite_wrap .box.no02 .inner { padding:16.67vw 2.78vw 4.17vw 2.78vw; text-align: center;}
        .invite_wrap .box.no02 .col.profile{ width: 25vw; height: 25vw; top: -14vw; }
        .invite_wrap .box.no02 .col.profile label { right: -5px; bottom: -5px;}
        .invite_wrap .box.no02 .col.name { font-size: 19px; }
        .invite_wrap .box.no03 .col.info li  { font-size: 14px;  letter-spacing: -0.5px;}
        .invite_wrap .btn_go button { font-size: 16px; padding: 10px;}


    }

    @media screen and (max-width:360px) {
        .invite_wrap .btn_go button {flex-grow: 1; }
        .invite_wrap .box.no02 .col.txt textarea { font-size: 14px; padding: 10px; letter-spacing: -0.5px;}
        .invite_wrap .box.no01 { min-height: 240px;}
        .invite_wrap .box.no01 .inner  { min-height: 240px;}
        .invite_wrap .box.no02 .col.name { font-size: 17px; }
        
    }


/* ========== PC : 합격응원이벤트 2- 팝업 오픈후 보기페이지 ========== */
/* pc 모바일 공통 */
.invite_mypage {display: none;   position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; min-width: 100vw; min-height: 100vh; background:  rgba(0, 0, 0, 0.6); ;}
.invite_mypage button { background: none;}
.invite_mypage.on{ display: block;}
.invite_mypage .btn_close1 {  position: fixed; right: 10px; top: 10px;  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 36px; padding: 5px; z-index: 201;}
.invite_mypage .invite_wrap  { width: 100%; height:100%; background:url('https://eduon.com/images/brand/yst/pc_2019/event/2026/260314_cheerup/invite_bg.png') repeat-x center top; font-size: 18px; line-height: 150%; padding-bottom: 150px ; position: relative; }
.invite_mypage .invite_wrap .box.top {display: flex; justify-content: flex-start; max-width:700px; }
.invite_mypage .invite_wrap .box.top a { margin-left: 10px;}
.invite_mypage .invite_wrap .box.top button { color: #fff ; font-size: 18px; background: none; border: none;}
.invite_mypage .invite_wrap .box.no02 .col.profile .upload_area { display: none;}
.invite_mypage .invite_wrap .box.no02 .col.txt .charCount_area { display: none;}
.invite_mypage .invite_wrap .box.no03 .col.info{ display: none;}
.invite_mypage .invite_wrap .box.no02 .col.txt textarea {  overflow-y: scroll; min-height:280px; word-break: keep-all;}

.invite_mypage.pc_view .invite_wrap .cont { background-size: 1100px;}
.invite_mypage.pc_view .invite_wrap .cont .box.invite { max-width: 700px;}
.invite_mypage.pc_view .invite_wrap .box.no01 {padding: 0;  min-height: 260px; background: #181731;}
.invite_mypage.pc_view .invite_wrap .box.no01 .inner {  min-height: 260px; }
.invite_mypage.pc_view .invite_wrap .box.no01 .col.no01 img {max-width: 320px;}
.invite_mypage.pc_view .invite_wrap .box.no02 .inner { padding: 60px 60px 30px 60px; }
.invite_mypage.pc_view .invite_wrap .box.no02 .col.profile  { width: 100px; height: 100px;  top: -50px;}
.invite_mypage.pc_view .invite_wrap .box.no02 .col.name { font-size: 21px;}
.invite_mypage.pc_view .invite_wrap .box.no02 .col.name br { }
.invite_mypage.pc_view .invite_wrap .box.no03 .inner { padding-bottom: 60px;}

/* ========== MOBILE : 합격응원이벤트 2- 팝업 오픈후 보기페이지 ========== 내강의실 pc에서 달라지는 부분만 정의 */
.invite_mypage.m_view .invite_wrap  { overflow-y: scroll; height: 100vh; }
.invite_mypage.m_view .btn_close1 {  position: absolute;  font-size:24px; }