body {font-family: 'Pretendard', 'RiaSans-ExtraBold';}

:root {
	--primary-color: #157ced;
	--secondary-color: #FF3333;
    --tird-color: #FF7D7D;
    --hotel-color:#FFB434;
}

div.you_tab_menu ~ section button{cursor: pointer;}
div.you_tab_menu ~ section button:active,
div.you_tab_menu ~ section button:focus,
div.you_tab_menu ~ section button:hover{opacity:1;}

.inner1300 {max-width: 1270px; width: 100%; margin: 0 auto; font-family: 'Pretendard';}

.you_main_visual {background: url(/img/youtube/main_visual.jpg)no-repeat center; width: 100%; margin-bottom: 20px;
object-fit:cover; height: 580px; text-align: center;}

.visual_txtwrap {background: url(/img/youtube/main_visual02.png)no-repeat center; width: 100%; object-fit: contain;
padding-top: 200px; height: 580px; background-size: contain;}

.visual_txtwrap > div > p {color: #111; font-weight: 600; padding:10px 60px; background: #fff; border-radius: 30px;
display: inline-block;}
.visual_txtwrap > div .main_txt {font-family: 'RiaSans-ExtraBold'; font-size: 2.5rem; margin-top: 20px;}
.visual_txtwrap > div .main_txt strong {color: var(--primary-color)}

.you_tab_menu ul{display: flex;border-bottom: 1px solid #ddd;}
.you_tab_menu ul li {flex: 1; height: 80px; gap: 20px; cursor: pointer; 
    font-size:1.5rem ; display: flex; align-items: center; justify-content: center;
    font-family: 'RiaSans-ExtraBold'; }
.you_tab_menu ul li:first-child::before {content:""; display: inline-block; width: 47px; height: 32px; 
    background: url(/img/youtube/menu_icon.png) no-repeat center;  }

.you_tab_menu ul li:nth-child(2):before {content:""; display: inline-block; width: 39px; height: 35px; 
    background: url(/img/youtube/menu_icon02.png) no-repeat center; }

.you_tab_menu ul li:nth-child(3):before {content:""; display: inline-block; width: 42px; height: 48px; 
background: url(/img/youtube/menu_icon03.png) no-repeat center;  }
.you_tab_menu ul li:hover {border-bottom: 2px solid var(--primary-color);}
.you_tab_menu ul .hover {border-bottom: 2px solid var(--primary-color); }

.you_tab_menu.fixed {
  position: fixed; top: var(--topMenu_pos, 0px);     left: 50%;
  transform: translateX(-50%); width: 100%; max-width: 1280px; margin: 0 auto;
  z-index: 2; background: #fff; 
}
.you_tab_menu.fixed ul {border: none; width: 100%;}
.menu_commen {width: 100%; text-align: center;}

.menu_hotel {background: #373737;margin-top: 60px; color: #fff;}
.sub_txt {padding-top: 72px; }
.sub_txt strong {padding: 10px 28px; border-radius: 50px; background: #111; font-size: 1.5rem;
    font-family: 'RiaSans-ExtraBold'; margin-bottom: 40px;}
.inner1300 .sub_txt h1 {font-size: 2.2rem; font-family:'RiaSans-ExtraBold'; margin-top: 32px;}
.inner1300 .sub_txt p{font-size: 1.25rem; margin-top: 20px;}
.inner1300 .hashtag {font-size: 1.25rem;}
.inner1300 .sub_txt span {color: var(--hotel-color); line-height: 40px;}
.inner1300 .sub_txt h1 span {font-size: 2.2rem; color: #ff5c98}

.menu_tour .sub_txt span {color: var(--primary-color);}
.menu_tour {background: #F1F8FF; color: #111;}
.menu_tour .sub_txt strong {background:#fff; color: var(--primary-color);} 

.sub_imagewrap {display: flex; margin: 48px 0 80px 0; width: 100%;}
.sub_imagewrap img {width: 33.3%;}
.product_section {display: flex; justify-content: center; width: 100%; text-align: left;
    background: #111; padding: 32px; margin-top: 80px; align-items: center; color:#fff}
.menu_tour .product_section {background: #fff; border-top: 2px solid #BCDEFF; border-bottom: 2px solid #BCDEFF; color: #111;} 
.product_txt {flex-basis: 44%; margin-left: 40px;}
.product_txt li span {border: 1px solid var(--tird-color); padding: 4px 8px ; border-radius: 30px; white-space : nowrap;  display: inline-block; 
color: var(--tird-color); font-size: 1.0rem;}
.product_txt li:nth-child(2){font-size: 1.5rem; font-weight: 600; padding:12px 0 8px 0;}
.product_txt li:nth-child(3) {color: #999;}


/* 버튼 */
.product_reser {width: 200px; color: #fff; background: var(--secondary-color); height: 52px;
border-radius: 5px; font-size: 1.15rem; display: flex; align-items: center; justify-content: center;}
.product_reser::after {content: ""; display: inline-block;
    height: 8px; width: 8px; border-right: 2px solid #fff; transform: rotate(-45deg);
border-bottom: 2px solid #fff; margin-left: 20px;}
.color_black {background: #111;}
.color_w {background: #fff; color:var(--primary-color)}
.color_w::after {border-color: var(--primary-color);}


.menu_benefit .sub_txt strong {color: #FF5C98; background: #FFEBF1;}
.menu_benefit {display: flex; gap: 20px; margin-top: 80px; align-items: flex-start;}
.menu_benefit .product_wrapper {flex-basis: 50%; border: 1px solid #ddd;  flex-direction: column;
    display: flex;align-items: center; padding: 0 40px; height: 756px;}
.benefit_imgwrapper {position: relative; margin-bottom: 24px;}
.benefit_imgwrapper2 {margin-bottom: 72px; display: flex; flex-wrap: wrap; gap: 12px; row-gap: 20px;
    justify-content: center; margin-top: 60px;}
.benefit_imgwrapper img {margin-top: 20px;}
.benefit_imgwrapper img:nth-child(2) {margin-top: 40px;}
.benefit_imgwrapper .plus {position: absolute; left: calc(50% - 15px); top: 136px;}
.benefit_imgwrapper2 > div {position: relative; display: flex; align-items: center; justify-content: center;}
.benefit_imgwrapper2 > div:nth-child(2)::after {content:""; display: inline-block; width: 30px; height: 30px; 
background: url(/img/youtube/plus-pink.png) no-repeat center;  position: absolute; left: -22px; top: 60px; }

.benefit_imgwrapper2 > div span { padding: 7px 24px; background: #fff; border: 1px solid #ff5c98; border-radius: 100px;
    position: absolute; top: -12px;text-align: center; color:#ff5c98;}

.open_talk {width: 100%; background: var(--primary-color); margin-top: 40px; padding: 24px; display: flex;
align-items: center; justify-content:center; gap: 40px;}
.open_talk p {font-size: 1.25rem; color: #fff;}



@media (max-width:1270px) {
    .menu_benefit {flex-direction: column; margin-top: 40px;}

    .youtube_prame { position: relative; 
        padding-bottom: 56.25%; /* 16:9 비율 */
        height: 0;
        overflow: hidden;}
    .youtube_prame iframe {position: absolute;
        top: 0;
        left: 5%;
        width: 90%;
        height: 100%;}
    .benefit_imgwrapper {display: flex;}
    .benefit_imgwrapper img {width: 50%;}
    .benefit_imgwrapper .plus {width: 30px; top: 20%;}
    .menu_benefit .product_wrapper .sub_txt {padding-top: 20px;}
    .menu_benefit .product_wrapper {padding: 24px 20px; width: 100%;}
    .benefit_imgwrapper2 {flex-wrap: nowrap; margin-bottom: 28px; margin-top: 32px;}

}

@media (max-width:680px) {
    .sub_txt h1 {font-size: 2rem;}

    .visual_txtwrap > div .main_txt {font-size: 2.0rem; word-break: keep-all;}
    .product_section {justify-content: space-between}
    .product_section > img {display: none;}
    .product_txt {margin-left: 0; flex-basis: 60%;}
    .you_tab_menu ul li {font-size: 1.3rem;}
}


@media (max-width: 500px) {
    .you_tab_menu.fixed {padding-top: var(--safeAreaTop2, 0px); padding-top: var(--safeAreaTop1, 0px);}
    .you_tab_menu ul li {gap: 10px;}
    .menu_benefit .sub_txt h1{font-size: 1.75rem;}
    .sub_txt strong {font-size: 1.25rem; font-family: 'pretendard'; font-size: 1.2rem; font-weight: 600;padding: 8px 20px;}
    .sub_txt h1 {margin-top: 24px;}
    .menu_benefit .sub_txt h1 > span{font-size: 1.75rem;}
    .visual_txtwrap > div > p {padding: 10px 20px;}
    .sub_txt p {padding:10px;}
    .sub_txt p, span {margin-top: 4px;}
    .you_main_visual, .visual_txtwrap {height: 400px;}
    .visual_txtwrap {padding-top: calc(var(--safeAreaTop2, 0px) + 80px);padding-top: calc(var(--safeAreaTop1, 0px) + 80px);}

    .product_txt {flex-basis: 90%;}
    .product_reser {font-size: 1.0rem; min-width: 120px; height: 48px; margin-left: 10px; line-height: 48px;}
    .product_txt li:nth-child(2) {font-size: 1.2rem; margin-bottom: 0; padding-top: 8px;}
    .product_txt .m_none {display: none!important;}
    .sub_imagewrap {margin: 32px 0; }
    .product_section {margin-top: 32px; padding: 20px;}

    .open_talk {flex-wrap: wrap; gap: 12px; text-align: center; padding: 24px 12px;}
    .benefit_imgwrapper2 > div span {font-size: 1.0rem; padding: 5px 8px; line-height: 16px; top: -22px;}
    .benefit_imgwrapper2 > div:nth-child(2)::after {display: none;}
}

@media (max-width: 420px) {
    .product_txt li span {font-size: 0.9rem;}
    .product_txt li span:nth-child(n+2) {display: none!important;}
    .benefit_imgwrapper2 {min-width: 100%; }
}