.pageOutWrap { background: url("../images/bg.png")center center no-repeat; width: 100%; height: 1024px; background-size: cover; }
.contentWrap { padding: 0 40px; box-sizing: border-box; }
.contentWrap .topTextArea { display: flex; align-items: center; justify-content: space-between; padding: 40px 0px; box-sizing: border-box; margin-bottom: 60px; }
.contentWrap .topTextArea .mainTitle { display: flex; align-items: center; gap: 20px; }
.contentWrap .topTextArea .mainTitle .text { font-family: 'NotoSansB'; color: #222222; font-size: 50px; }
.contentWrap .topTextArea .subTitle .subText { font-family: 'NotoSansR'; color: #000000; font-size: 25px; }
.contentWrap .topTextArea .subTitle .mainText { font-family: 'NotoSansB'; color: #222222; font-size: 25px; text-align: right;}

.contentWrap .titleArea { font-size: 66px; color: #27426a; text-align: center; font-family: 'GangwonEduAllB'; margin-bottom: 90px; }


.contentWrap .videoArea { display: flex; align-items: center; justify-content: center; gap: 60px; }
.contentWrap .videoArea .videoWrap .title { display: flex; gap: 20px; align-items: center; font-size: 33px; color: #222222; font-family: 'NotoSansM'; margin-bottom: 25px; }
.contentWrap .videoArea .videoWrap video { max-width: 600px; width: 100%; border-radius: 20px; object-fit: cover;  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
.contentWrap .videoArea .videoWrap .video { position: relative; }
.contentWrap .videoArea .videoWrap .video .playButton { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url("../images/playButton.png")no-repeat; width: 91px; height: 91px; background-size: contain; cursor: pointer; z-index: 2;}

.contentWrap .videoArea .videoWrap .thumb { position: absolute; top: 0; left: 0; max-width: 600px; width: 100%; z-index: 1;  object-fit: cover; }
.contentWrap .videoArea .videoWrap .thumb img { width: 100%; }

@media (max-width: 1024px){
    .contentWrap { padding: 0 20px; }
    .contentWrap .videoArea { gap: 30px }
    .contentWrap .videoArea .videoWrap .title { gap: 10px; font-size: 26px; }
}

@media (max-width: 720px) {
    .pageOutWrap { background: url("../images/bg_m.png")center center no-repeat; width: 100%; height: 1000px; background-size: cover; }
    .contentWrap { padding: 0 15px; box-sizing: border-box; }
    .contentWrap .topTextArea { padding: 15px 0px; margin-bottom: 30px; }
    .contentWrap .topTextArea .mainTitle { gap: 10px; }
    .contentWrap .topTextArea .mainTitle .icon img { width: 35px; }
    .contentWrap .topTextArea .mainTitle .text { font-size: 25px; }
    .contentWrap .topTextArea .subTitle .subText { font-size: 14px; }
    .contentWrap .topTextArea .subTitle .mainText { font-size: 14px; }

    .contentWrap .titleArea { font-size: 35px; margin-bottom: 45px; }

    .contentWrap .videoArea { flex-direction: column; gap: 20px; }
    .contentWrap .videoArea .videoWrap .title { font-size: 16px; gap: 10px; margin-bottom: 10px; }
    .contentWrap .videoArea .videoWrap .icon img { width: 25px; }
    .contentWrap .videoArea .videoWrap video { box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 10px;  }
}