/**
* OLYM Cascading Style Sheets
* File Name : sub.css
* Description : 서브 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2018.05.24
* Update : 2024.06.17
* Copyright(c) 2024 OLYM Communications. All Rights Reserved.
*/
#spot{  padding: 50px 0 35px 0; box-sizing:border-box;}
#spot h2{color:#111;font-size:25px;font-weight:700;font-family: "Cafe24Ssurround"; margin-bottom: 10px; padding-left: 4px;}
#spot h2 br { display: none;}

.stle_ul {display:flex; gap: 30px; align-items: center; margin-right:20px; padding-left: 3px;}
.stle_ul li {position:relative; font-size: 0.95em;}
.stle_ul li br { display: none;}
.stle_ul li + li::before {position:absolute; content:""; left:-15px; top:50%; width:1px; height:15px; transform: translateY(-50%); background:#ddd;}
.stle_ul li i {color:#636363; font-size:19px; transform: translateY(2px);}

.sub_btn_box { display:flex; gap:10px; margin-top: 20px;}
.sub_btn_box .snsbtn {display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:38px; background:#f3f3f3; cursor: pointer;}
.sub_btn_box .snsbtn > i {font-size:19px;color:#333;}
.sub_btn_box .snsdown { position: relative;}
.sub_btn_box .snsdown .snsdown-content { display: none; background:#fff; position: absolute; z-index: 1; top:40px;  right: -20px; border-radius:10px; overflow: hidden; box-shadow:0 10px 10px rgba(0,0,0,0.05); min-width:130px;}
.sub_btn_box .snsdown:hover .snsdown-content {display: block;}
.sub_btn_box .snsdown-content a { color: #999; padding: 12px; display: block; font-size:14px;}
.sub_btn_box .snsdown-content a i {font-size:18px; position:relative; top:3px;}
.sub_btn_box .snsdown-content a:hover {background-color: #f8f8f8;}
.sub_btn_box .snsdown-content a:nth-of-type(1):hover {color:#f7bc0f;}
.sub_btn_box .snsdown-content a:nth-of-type(2):hover {color:#1877f2;}
.sub_btn_box .snsdown-content a:nth-of-type(3):hover {color:#1da1f2;}
.sub_btn_box .snsdown-content a:nth-of-type(4):hover {color:#03c65a;}

@keyframes rotate1 {
    0% { transform: rotate(0deg);}
    50%{transform: rotate(-5deg);} 
    100%{transform: rotate(-5deg);}   
  }
  
  @keyframes rotate2 {
    0% { transform: rotate(0deg);}
    10%{transform: rotate(-3deg);}   
    20%{transform: rotate(0deg);} 
    100%{transform: rotate(-3deg);}  
  }
  
  @keyframes rotate3 {
    0% { transform: rotate(0deg);}
    10%{transform: rotate(3deg);}   
    20%{transform: rotate(0deg);} 
    100%{transform: rotate(3deg);}  
  }
  
  @keyframes opacity1 {
    0% { opacity: 0;}
    100% { opacity: 1;}
  }
  
  @keyframes rotate4 {
    0% { transform: rotate(0deg);}
    100%{transform: rotate(5deg);}   
  }
  @keyframes updown1 {
    0% { transform: translateY(0) rotate(1deg);}
    100%{transform: translateY(5px) rotate(0deg);}   
  }

.cha_box { position: absolute; top: 30px; right: 10px;}
.cha_box .img_c1 { position: absolute; top: 0; right: 10px;}
.cha_box .img_c2 { position: absolute; top: 72px; right: 404px; animation-name: rotate2; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: infinite;}
.cha_box .img_c3 { position: absolute; top: 50px; right: 326px; animation-name: updown1; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: infinite;}
.cha_box .img_c4 { position: absolute; top: 93px; right: 3px; animation-name: rotate1; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: infinite;}
.cha_box .img_c5 { position: absolute; top: 0; right: 10px; animation-name: opacity1; animation-duration: 2s; animation-direction: alternate; animation-iteration-count: infinite;}

#snb {border-top:2px solid #f8f8f8;border-bottom:2px solid #f8f8f8;}
.snb_group {display:flex; height: 100%;}
.snb_group > li {flex:1;position:relative; display: flex;}
.snb_group > li + li::before {position:absolute;content:"";width:2px;height:18px;background:#efefef;top:50%; left: 0; transform:translate(0,-50%);}
.snb_group > li > a {color:#222;font-size:16px; line-height: 1.1em; display:flex; align-items: center; justify-content: center; width:100%; height: 100%; box-sizing: border-box; text-align:center;font-weight:700; padding: 15px 10px;}
.snb_group > li > a span {font-family: "Noto Sans KR", sans-serif;font-weight:700;font-size:0.95em;line-height:0.8em;}
.snb_group > li > a:after { display:block; content:""; height:2px; width: 100%; background:#203f65; transform:scale(0, 1); transition:all .3s ease; position:absolute; bottom: -2px;}
.snb_group > li > a:hover, .snb_group > li > a.over{color:#203f65;}
.snb_group > li > a:hover:after, .snb_group > li > a.over:after {transform:scale(1, 1);}
.snb_group > li > ul{display:none !important;}

#contents {padding:80px 0;color:#666;;}
.img_ready{text-align:center;}


@media all and (max-width:1200px){
#spot { height:auto; flex-direction: column; padding:40px 0; gap: 10px;}
#spot h2 {font-size:32px;}
/* .cha_box { top: auto; zoom: 0.8;} */
.stle_ul .home a i {font-size:17px;}
.sub_btn_box .snsbtn > i {font-size:17px;}
}

@media all and (max-width:1024px){
#spot { padding:20px 0 40px 0; gap: 5px;}
#spot h2 {font-size:26px;}
.cha_box { zoom: 0.5; top:175px;}
.loca_box { flex-direction: column; gap: 20px;}
.stle_ul li {font-size:12px;}
.stle_ul li i {font-size:14px;}
.snb_group > li > a {font-size:16px;}
/* .snb_group > li > a:after {top:18px;} */
}


@media all and (max-width:767px){

  #snb {border:none;}
  .snb_group {flex-wrap:wrap;gap:5px;}
  .snb_group > li {flex-basis:33.33%;}
  .snb_group > li + li::before {display: none;}
  .snb_group > li > a {font-size:14px; position: relative;border:2px solid #f8f8f8;}
  /* .snb_group > li > a:after { width:100%; top:7px;} */
#contents {padding:50px 0;}
.img_ready img{max-width:100%;}
}

@media all and (max-width:414px){
.snb_group > li > a{padding:10px 3px;}
}