/**
* OLYM Cascading Style Sheets
* File Name : sub.css
* Description : 서브 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2021.05.13
* Update : 2021.05.13
* Copyright(c) 2021 OLYM Communications. All Rights Reserved.
*/
#spot { width:100%; padding-top:140px; height:240px;}
.spot  {width:68.75%; float:left; background:#fd33a7; height:150px; border-radius:0 0 100px 0; overflow:hidden; position:relative;}
.spot img.spbg { position:absolute; top:-150px;}
.spot_title {width:31.25%; float:left;  padding-top:40px; box-sizing:border-box;}
.spot_title h2 { width:370px; text-align:center; color:#000; font-size:50px; font-weight:700;}
.spot_title p { width:370px; text-align:center; color:#a2a2a2; font-size:18px; font-weight:400; padding-top:10px; line-height:1.3em;}

.spot .spbg{animation: spot 50s 1000 ; transform: translateY(-0);}
@keyframes spot{
  0%{transform: translateY(0);}
  50%{transform: translateY(-20%);}
  100%{transform: translateY(0);}
}
.spot{z-index: 1;}
.spot i{position: absolute;}
.spot .sp1{top:0; left:20%; animation: spot_sp1 15s 1000; transform: translateY(0); opacity: 0;}

@keyframes spot_sp1 {
  0%{transform: translateY(-150%); opacity: 0;}
  50%{transform: translateY(350%); opacity: .11;}
  100%{transform: translateY(-150%); opacity: 0;}
}
.spot .sp2{bottom:0%; left:38%; animation: spot_sp2 20s 1000; transform: translateY(0); opacity: 0;}
@keyframes spot_sp2 {
  0%{transform: translateY(150%); opacity: 0;}
  50%{transform: translateY(-350%); opacity: .3;}
  100%{transform: translateY(150%); opacity: 0;}
}
.spot .sp3{top:64%; left:48%; animation: spot_sp3 9s 1000; transform: translateY(0); opacity: 0;}
@keyframes spot_sp3 {
  0%{transform: translateY(0%); opacity: .03;}
  50%{transform: translateY(-200%); opacity: .1;}
  100%{transform: translateY(0%); opacity: .03;}
}
.spot .sp4{bottom:60%; left:72%; animation: spot_sp4 10s 1000; transform: translateY(0); opacity: 0;}
@keyframes spot_sp4 {
  0%{transform: translateY(0%); opacity: .1;}
  50%{transform: translateY(300%); opacity: .3;}
  100%{transform: translateY(0%); opacity: .1;}
}
.spot .sp5{bottom:0%; left:91%; animation: spot_sp5 12s 1000; transform: translateY(0); opacity: .2;}
@keyframes spot_sp5 {
  0%{transform: translateY(200%);}
  50%{transform: translateY(-300%);}
  100%{transform: translateY(200%);}
}

#contents_box { background:#fafafa;}
#contents_box .left_con { float:left; width:70%; background:#fff; margin-top:-45px; min-height:1000px; position:relative;}
#contents_box .left_con .left_in { float:right; width:1020px; margin-right:60px;}
#contents_box .right_con {float:right; width:30%; background:url(/project/design/com/bg_snb.gif) no-repeat left top;}

#snb { width:280px; padding:137px 0 80px 40px;}
.snb_group { border-top:1px solid #e4e4e4;}
.snb_group > li > a { display:block; color:#000; font-weight:600; font-size:18px; padding:18px 30px; border-bottom:1px solid #e4e4e4; position:relative; }
.snb_group > li > a:after { content:""; display:inline-block; width:12px;  height:4px; border-radius:2px; background:#d3d3d3;  position:absolute; top:50%; right:16px; margin-top:-2px;  transition: all .3s ease;}
.snb_group > li > a:hover, .snb_group > li > a.over { color:#fd33a7;}
.snb_group > li > a:hover::after, .snb_group > li > a.over::after { background:#fd33a7; width:16px;}
.snb_group > li > ul { border-bottom:1px solid #e1e1e1; padding:15px 15px;}
.snb_group > li > ul > li { padding:3px 0;}
.snb_group > li > ul > li > a { display:inline-block; padding:3px 10px; font-size:16px; color:#636363;}
.snb_group > li > ul > li > a.over { background:#fd33a7; color:#fff;}
.snb_group > li > ul > li > a:hover, .snb_group > li > ul > li > a.over { background:#fd33a7; color:#fff;}

h3.stle { font-size:2em; font-weight:800; color:#000;}

.stle_ul { margin-top:10px;}
.stle_ul > li { position:relative; float:left; }
.stle_ul > li { color:#a3a3a3;}
.stle_ul > li:after { display:inline-block; width:7px; height:11px; content:""; background:url(/project/design/com/bg_loca.png) no-repeat center / 100%; margin:0 10px;}
.stle_ul > li:last-child::after { display:none;}
.stle_ul > li.home { color:#383838; font-weight:600; }
.stle_ul > li > ul {display:none;}

.box_info { margin-top:15px; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; padding:20px; float:right;}
.box_info i { display:inline-block; vertical-align:top;}
.box_info ul { display:inline-block; vertical-align:top; margin-top:2px;}
.box_info ul > li { display:table-cell; padding-right:30px; color:#666;}
.box_info ul > li > span{ color:#000;}
.box_info ul > li:last-child { padding-right:0;}
/* [240312] */
.box_info.other_type{float: unset; width: 100%;}

/* [260611] */
.box_info ul:first-of-type{margin-bottom: 5px;}

#contents { float:left; width:1020px; padding:40px 0; color:#666; font-size:1em;}


@media all and (max-width:1660px) {
.spot  {width:78.75%;}
.spot_title {width:21.25%; }
.spot_title h2 { width:270px;  font-size:36px;}
.spot_title p { width:270px;font-size:16px;}
#contents_box .left_con {width:80%;}
#contents_box .left_con .left_in {  max-width:1020px; width:90%; }
#contents_box .right_con { width:20%;}
#contents {width:100%;}
}

@media all and (max-width:1260px) {
#spot { padding-top:100px;}
.spot  {width:75%;}
.spot_title {width:25%; padding-top:20px;}
.spot_title h2 { width:100%;}
.spot_title p { width:100%;}
#contents_box .left_con {  width:100%;  min-height:500px;}
#contents_box .left_con .left_in { float:none; margin-right:0; margin:0 auto;}
#contents_box .right_con {display:none;}
#contents img {max-width:100%;}
}

@media all and (max-width:1000px) {
#spot { padding-top:80px;}
h3.stle { font-size:1.6em; text-align:center;}
.stle_ul { display:table; margin:10px auto;}
.stle_ul > li { display:table-cell;}
.box_info { margin-top:20px; width:100%; box-sizing:border-box;}

}

@media all and (max-width:800px) {
#spot { height:190px;}
.spot  {width:65%; height:100px; border-radius:0 0 50px 0;}
.spot_title {width:35%; padding-top:10px;}
.spot_title h2 { font-size:24px;}
.spot_title p { font-size:14px;}
h3.stle { font-size:1.4em;}
.stle_ul > li { font-size:12px;}
.stle_ul > li:after { width:5px; height:8px;  margin:0 5px;}
.box_info { margin-top:0;  padding:10px;}
.box_info i img { height:15px;}
.box_info ul { margin-top:5px;}
.box_info ul > li { padding-right:20px; font-size:12px; line-height:1em;}
}

@media all and (max-width:500px) {
#spot { height:80px;}
.spot  {width:94%; height:80px; border-radius:0 0 30px 0;}
.spot img.spbg {top:0; right:0; width:100%}
.spot i img{width:70%;}
.spot_title {display:none;}
#contents_box .left_con { margin-top:0;}
h3.stle { padding:20px; }
.stle_ul { display:none;}
.box_info i {margin-top:12px;}
.box_info ul { margin-top:0;}
.box_info ul > li { display:block; padding:3px 0;}
#contents { padding:10px 0;}
}