@charset "utf-8";
/* sub공통 */
.subtit { font-size: 35px; font-weight: 600; letter-spacing: -.03em; line-height: 1em; color: #242424; position: relative; margin-bottom: 60px; text-align: center;}
.sub-tab { display: flex; flex-wrap: wrap; margin-bottom: 60px; justify-content: center;}
.sub-tab li { width: auto; position: relative;}
.sub-tab li::after { content: ""; position: absolute; right: 0; top: 8px; width: 1px; height: 10px; background: #ddd; }
.sub-tab li a { font-size: 17px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424; padding: 0 20px; }
.sub-tab li:last-child::after { display: none;}
.sub-tab li.active a { color: #13823b;}
.sub-tab li:hover a { color: #13823b;}

/* CEO 인사말 */
.gt p { font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1.6em; color: #454545; text-align: center; margin-top: 50px;}

/* why OYUKA */
.about-box { display: flex; align-items: center;}
.about-box>div { width: 50%;}
.about-right { padding-left: 90px; text-align: left;}
.about-right h3 { font-size: 100px; font-weight: 800; letter-spacing: -.03em; line-height: 1em; margin-bottom:20px; color: rgba(19, 130, 59,0.1);}
.about-right p { font-size: 17px; font-weight: 500; letter-spacing: -.03em; line-height: 1.6em; color: #454545;}
.about-fx { flex-direction: row-reverse;}
.about-fx .about-right { text-align: right; padding-left: 0; padding-right: 90px;}

/* 몽골여행 맞춤코스 공통 */
.cc-sec1 { padding-bottom: 100px;}
.cc-sec1 span { display: block; text-align: right; font-size: 16px; font-weight: 300; letter-spacing: -.03em; line-height: 1.2em; color: #13823b; margin-bottom: 15px;}
.cc-sec1 .tit { color: #fff; text-align: center; background: #13823b; line-height: 1em; padding: 21px 0; font-size: 20px; font-weight: 600; letter-spacing: -.03em;}
.cc-pagi { border: 1px solid #13823b; padding: 30px 100px;}
.cc-pagi-list { display: flex; flex-wrap: wrap; justify-content: center; position: relative; left: auto !important; top: auto !important; bottom: auto !important; gap: 30px 50px;}
.cc-pagi-list li { width: auto; position: relative !important; opacity: 1 !important; background: none; height: auto; margin: 0 !important;}
.cc-pagi-list .swiper-pagination-bullet-active .title{ color: #13823b;}
.cc-pagi-list li .num { width: 25px; height: 25px; border-radius: 100%; background: #13823b; color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; font-size: 18px; font-weight: 600; letter-spacing: -.03em; line-height: 1em; top: -1px;}
.cc-pagi-list li .title{ padding-left: 35px; font-size: 18px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2em; color: #242424;}
.cc-sec2 { padding: 100px 0; background: #f3f9f5;}
.cc-swiper { position: relative; overflow: hidden; width: 100%;}
.cc-swiper-slide { width: 100%; position: relative;}
.cc-swiper-slide .thumb {position:relative; padding-bottom:50%; overflow:hidden; background: #e9e9e9; }
.cc-swiper-slide .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:contain;}
.cc-img-swiper { position: relative; overflow: hidden;}
.cc-sec2 .swiper-pagination { bottom: 20px;}
.cc-sec2 .swiper-pagination-bullet { width: 15px; height: 15px; background: #fff; opacity: 1; margin: 0 7px !important;}
.cc-sec2 .swiper-pagination-bullet-active { background: #13823b;}
.cc-swiper-slide .tit { color: #fff; text-align: center; background: #13823b; line-height: 1em; padding: 21px 0; font-size: 20px; font-weight: 600; letter-spacing: -.03em; position: relative;}
.cc-swiper-slide .txt { background: #fff; font-size: 16px; font-weight: 300; letter-spacing: -.03em; line-height: 1.666em; color: #454545; text-align: center; padding: 35px 10px;}
.cc-swiper-button-next::after, .cc-swiper-button-prev::after { display: none;}
.cc-swiper-button-next, .cc-swiper-button-prev { width: 19px; height: 34px; background-size: contain; background-position: center; background-repeat: no-repeat; margin-top: 2px; top: 66.5%; transform: translateY(-50%); opacity: 1;}
.cc-swiper-button-prev { background-image: url(../images/sub/sub-left.png); left: 27px;}
.cc-swiper-button-next { background-image: url(../images/sub/sub-right.png); right: 27px;}
.cc-sec2 .reserve-bt{ width: 250px; height: 60px; display: flex; align-items: center; border-radius: 30px; justify-content: center; color: #fff; margin: 60px auto 0; font-size: 20px; font-weight: 500; line-height: 1em; background: #13823b;}

/* 몽골 연간 온도 */
.dg-sec1 { padding-bottom: 100px;}
.dg-sec1-tbl { width: 100%; border-collapse: collapse; border-top: 2px solid #242424; text-align: center;}
.dg-sec1-tbl colgroup col { width: calc(100%/14);}
.dg-sec1-tbl tr { border-bottom: 1px solid #ddd;}
.dg-sec1-tbl tr th { background: #f8f8f8; font-size: 18px; font-weight: 600; letter-spacing: -.03em; line-height: 1em; border-right: 1px solid #ddd; color: #242424; padding: 20px 10px;}
.dg-sec1-tbl tr th:last-child { border-right: none;}
.dg-sec1-tbl tr td { font-size: 16px; font-weight: 300; letter-spacing: -.03em; line-height: 1em; border-right: 1px solid #ddd; color: #454545; padding: 18px 10px;}
.dg-sec1-tbl tr td:last-child { border-right: none;}
.dg-sec1-tbl tr td.fw { font-size: 18px; font-weight: 600; color: #242424; line-height: 1.4em;}
.dg-sec1-tbl tr td.sand { background: rgba(188, 149, 70,0.05); font-weight: 600; color: #bc9546;}
.dg-sec1-tbl tr td.rain { background: rgba(19, 130, 59,0.05); font-weight: 600; color: #13823b;}
.dg-sec2 { padding: 100px 0; background: #f8f8f8;}
.dg-sec2 span { font-size: 16px; font-weight: 400; display: block; text-align: right; letter-spacing: -.03em; line-height: 1em; color: #686868; margin-bottom: 20px;}
.dg-sec2-box { background: #fff; padding: 50px 10px; position: relative;}
.dg-sec2-box::after { content: ""; position: absolute; left: 0; right: 0; top: 0;bottom: 0; margin: auto; border: 1px solid #ddd;}
.dg-clr { display: flex; justify-content: center; gap: 40px; margin-top: 30px;}
.dg-clr li { padding-left: 26px; position: relative; font-size: 17px; font-weight: 400; letter-spacing: -.03em; line-height: 1em; color: #242424;}
.dg-clr li::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px;}
.dg-clr li.clr1::before { background: #4472c4;}
.dg-clr li.clr2::before { background: #ed7d31;}

/* 몽골여행 두배즐기기 Tip */
.tp-sec1 { padding-bottom: 100px;}
.tp-sec2 { padding: 100px 0; background: #f8fbf9;}
.tp-sec3 { padding-top: 100px;}
.tp-img { height: 400px; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; font-size: 50px; font-weight: 700; line-height: 1.2em; background: url(../images/sub/sub3-3.jpg) center no-repeat; background-size: cover; margin-bottom: 60px;}
.tp-box { padding-left: 100px;}
.tp-box p { font-size: 16px; font-weight: 400; letter-spacing: -.03em; line-height: 1.4em; color: #454545; position: relative; padding-left: 26px; margin-bottom: 30px;}
.tp-box p::before { content: ""; position: absolute; left: 0; width: 16px; height: 16px; background-size: contain; background: url(../images/sub/before.png) center no-repeat; top: 2px;}
.tp-box p:last-child { margin-bottom: 0;}
.tp-list { display: flex; gap: 20px; flex-wrap: wrap;}
.tp-list li { width: calc(100%/4 - 15px); text-align: center;}
.tp-list li img { border-radius: 15px; overflow: hidden;}
.tp-list li .tit { font-size: 18px; font-weight: 500; letter-spacing: -.03em; line-height: 1em; color: #242424; margin-top: 30px;}

/* 몽골지사 */
.root_daum_roughmap {width:100% !important;}
.directions {margin-top:40px;}
.directions .address-info {margin-bottom:30px;}
.directions .address-info .comp {color:#13823b; font-weight:600; margin-bottom:2px;}
.directions .address-info .addr {color:#242424; font-size:23px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:28px 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:250px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:500; display: flex; align-items: center;}
.directions .contact-info dt>div { width: 33px;}
.directions .contact-info dt img { vertical-align: middle; margin:-.2em 16px 0 0;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:#13823b;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}