:root{--ani:cubic-bezier(.32,.94,.6,1)}
#main {overflow: hidden; scroll-behavior: smooth;}

/* youtube */
.main .youtube {width:100%;  height:100vh;}
/* .main .youtube .mainYoutube { width:100%; padding-bottom: 56.25%; margin:auto;} */
/* .main .youtube .mainYoutube iframe {width:100% !important; height:100% !important; } */
@media (max-width:768px) {
	.main .youtube {width:100%; height:0;  padding-top:56.25%; position:relative; overflow:hidden;}
}

/* mainVisual */
.mainVisual {overflow:hidden;position:relative;width:100%;height:100vh;}
.mainVisual .logo {position: absolute; top:40px; left: 60px;}
.mainVisual .mainVisualTxt {text-align: center; color:#fff;}
.mainVisual .mainVisualImg {display: flex; align-items: center; justify-content: center; background: no-repeat center url('/img/main/mainVisual.jpg'); background-size: cover; position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; opacity:0; transform:scale(1.05); transition:all 2s var(--ani);}
.mainVisual .mainVisualImg.on {opacity:1;transform:scale(1)}  
@media (max-width:768px) {
    .mainVisual .logo {position: absolute; top:20px; left: 30px;}
    .mainVisual .mainVisualImg {background-image: url('/img/main/mainVisual_m.jpg');}
}

.main .tit {font-size: 3.750rem; font-family: var(--pointfont); font-weight: 500; line-height: 1.2;}
.main .tit.dot {position: relative; width: fit-content;}
.main .tit.dot::after {content:''; position: absolute; width: 0.26em; height: 0.26em; border-radius: 50%; background-color: var(--pointcolor2); right:-.5em; bottom:0.25em;}

.main .dot2 {position: relative; display: flex; padding-left: 25px;}
.main .dot2:after {content:'※'; position: absolute; left: 0;}

.main .tit_sm {font-family: var(--pointfont); color:var(--pointcolor2); letter-spacing: 4px; text-align: center; font-weight: 400; font-size: 1.875rem;}
.main .line-lg {display: block; width: 100%; max-width: 1544px; height: 1px; margin: auto; background-color:#cfcfcf;}
@media (max-width:1544px) {
    .main .line-lg {width: 90%;}
}
@media (max-width:768px) {
    .main .tit {font-size: 3rem;} 
}
@media (max-width:500px) {
    .main .tit.dot {display: inline;}
    /* .main .tit.dot::after {bottom:5px;} */
}


/* box_wrap4 */
@media (max-width:768px) {
    .main .box_wrap4 .box {width: 49%; margin-right: 2%;}
    .main .box_wrap4 .box:nth-child(2n) {margin-right: 0;}
    .main .box_wrap4 .box:nth-child(n+3) {margin-top: 2%;}
}

/* why */
.main .why .img {position: relative; padding-left: 1em;}
.main .why .img::after {content:''; position: absolute; z-index: -1; width: 90%; height: 110%; background-color: var(--pointcolor2); top:0; bottom:0; right:0; margin: auto;}
@media (max-width:990px) {
    .main .why .flex {flex-direction: column;}
    .main .why .width55, .main .why .width45 {width: 100%;}
    .main .why .width45 {order:-1; margin-bottom: 7em;}
}


/* group */
.main .group .img {padding: 1em;}
.main .group .box_wrap4 {padding:3em 2em; align-items: flex-end;}
.main .group .arrow {position: relative;}
.main .group .box:last-child .arrow:after, .main .group .box:last-child .arrow:before {display: none;}
.main .group .arrow::before {content:url('/img/main/arrow.png'); position: absolute; right: 0;}
.main .group .arrow::after {content:url('/img/main/arrow.png'); position: absolute; right: 10px;}
@media (max-width:990px) {
    .main .group .box {width: 47%; margin-right: 6%;}
    .main .group .box:nth-child(2n) {margin-right: 0;}
    .main .group .box:nth-child(n+3) {margin-top: 2%;}
}



/* program */
.main .program .line {display: block; width:410px; height: 1px; background-color: #b0b0b0; margin: 2em 0;}
.main .program .programList {display: flex; flex-wrap: wrap;}
.main .program .programList li {background-color: var(--pointcolor); padding:3em 1%; width: 49%; margin-right: 2%; display: flex; align-items: center; justify-content: center;}
.main .program .programList li:nth-child(2n) {margin-right: 0;}
.main .program .programList li:nth-child(n+3) {margin-top: 2%;}
@media (max-width:1204px) {
    .main .program .flex {flex-direction: column;}
    .main .program .width40, .main .program .width60 {width: 100%;}
    .main .program .width60 {margin-top: 2em;}
    .main .program .programList li {padding: 3em 1em;}
}
@media (max-width:500px) {
    .main .program .line {width: 300px;}
}


/* ipc */
.main .ipc .flex {padding:5em 2em;}
@media (max-width:768px) {
    .main .ipc .flex {flex-direction: column;}
    .main .ipc .width40 {width: 100%;}
    .main .ipc .width40 img {width: 50%;}
    .main .ipc .width60 {width: 100%; text-align: center; margin-top: 2em;}
}


/* english */
.main .english {background: no-repeat center url('/img/main/english.jpg'); background-size: cover;}
.main .english .half {letter-spacing: -1px; padding: 0 2em; line-height: 1.8;}
@media (max-width:768px) {
    .main .english .flex {flex-direction: column;}
    .main .english .half {width: 100%;}
}



/* experience */
.main .experience .box_wrap4 {position: relative; padding-top: 52px;}
.main .experience .box_wrap4:after {content:''; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; color:#fff; font-weight: 400; position: absolute; width: 349px; height: 52px; background-color: var(--pointcolor2); top:0; left:-20px;}
.main .experience .box_wrap4.box1:after {content:'남부 말레이시아 전통 문화 체험';}
.main .experience .box_wrap4.box2:after {content:'말레이시아 도자기 체험관';}
.main .experience .box_wrap4.box3:after {content:'꿀벌 농장 및 생태공원';}
.main .experience .box_wrap4::before {content:''; position: absolute; left: -20px; margin: 0 auto; width: 0; height: 0; border-top: 16px solid #a46400; border-left: 22px solid transparent; border-right: 22px solid transparent; z-index: -1;}



 /* programTb */
.main .programTb .cont_box {overflow-x: scroll;}
.main .programTb .cont_box::-webkit-scrollbar{display:none;}
.main .programTb .stellarTb {width:100%; border-spacing: 0;}
.main .programTb .stellarTb.Tb_md {max-width:1240px; width: 100%; border-spacing: 0; background-color: #fcfcfc;}
.main .programTb .stellarTb .border-b {border-bottom: 1px dashed #d7d7d7;}
.main .programTb .stellarTb .border-br {border-right: 1px dashed #d7d7d7;}
.main .programTb .stellarTb .border-bw {border-bottom: 1px dashed #fff;}
.main .programTb .stellarTb td {padding: 1em 0;}
.main .programTb.hotel_price .stellarTb td {padding: 1em .8rem;}
.main .programTb .stellarList {display: flex; align-items: center;}
.main .programTb .stellarList li {position: relative; width: 20%; text-transform: uppercase;}
.main .programTb .stellarList li:after {content:''; position: absolute; height: 90%; width:1px; background-color: #aaa; left: 0; top:0; bottom:0; margin: auto;}

.main .programTb .processList {display: flex;}
.main .programTb .processList .half {padding-right: 1em;}
.main .programTb .processList .dot2 {display: flex; text-align: left;}
.main .programTb .processList .dot2:nth-child(n+2) {margin-top: 5px;}
@media (max-width:1400px) {
	.main .programTb .flex {flex-direction: column;}
	.main .programTb .flex .width60, .main .programTb .flex .width40 {width:100%;}
	.main .programTb .flex .width40 {margin-top:2rem;}
}
@media (max-width:990px) {
    .main .programTb .stellarTb.Tb_md {width:700px;}
    .main .programTb .processList {flex-direction: column;}
    .main .programTb .processList .half {width: 100%;}
    .main .programTb .processList .half:last-child {margin-top: 5px;}
}
@media (max-width:768px) {
    .main .programTb .stellarTb {width:1000px;}
}


/* hotel */
.main .hotel .half {padding-right: 2em;}
.main .hotel .hotel-wrap {display: flex; flex-direction: column;}
.main .hotel .hotelList {display: flex; flex-wrap: wrap; margin-top:2em;}
.main .hotel .hotelList li {width: 33%; display: flex;}
.main .hotel .hotelList li:nth-child(n+4) {margin-top: 1em;}
.main .hotel .hotelList li.dot {position: relative; padding-left:20px;}
.main .hotel .hotelList li.dot:after {content:'·'; position: absolute; left:0;}

.main .hotel .hotelList2 {display: flex; flex-wrap: wrap; margin-top:2em;}
.main .hotel .hotelList2 li {display: flex; align-items: center; width: 50%;}
.main .hotel .hotelList2 li:nth-child(n+3) {margin-top: 3em;}
@media (max-width:768px) {
    .main .hotel .flex {flex-direction: column;}
    .main .hotel .half {width: 100%;}
    .main .hotel .half:last-child {margin-top: 2em;}
    .main .hotel .hotel-wrap .cont_box:nth-child(2) {order:-1;}
    .main .hotel .hotelList li {width: 48%; margin-right: 2%;} 
    .main .hotel .hotelList li:nth-child(2n) {margin-right: 0;} 
    .main .hotel .hotelList li:nth-child(n+3) {margin-top: 1em;}

    .main .hotel .hotelList2 li {width: 100%; margin-right: 0;}
    .main .hotel .hotelList2 li:nth-child(n+2) {margin-top: 2em;}
}
@media (max-width:550px) {
    .main .hotel .hotelList2 li img {width: 15%;}
}

/* kakao */
.main .kakao {background: no-repeat center url('/img/main/kakaoBg.jpg'); background-size: cover;}
@media (max-width:768px) {
	.main .kakao {background: no-repeat center url('/img/main/kakaoBg_m.jpg'); background-size: cover;}
    .main .kakao {margin-bottom: 70px;}
}
@media (max-width:500px) {
    .main .kakao .qrcode {width:30%;}
    .main .kakao .img {margin-right: 2em;}
    .main .kakao .font-30 {font-size: 1.5em;}
}