@charset "UTF-8";

html { scrollbar-arrow-color: #e9e5e1;
        scrollbar-Track-Color: #e9e5e1; 
        scrollbar-base-color: #afa398;
        scrollbar-Face-Color: #afa398;
        scrollbar-3dLight-Color: #afa398;         
        scrollbar-DarkShadow-Color: #afa398;
        scrollbar-Highlight-Color: #afa398;
        scrollbar-Shadow-Color: #afa398}
/* Chrome, Safari용 스크롤 바 */
::-webkit-scrollbar {width:5px; height:5px;  }
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment {display: block; width: 12px;height: 12px; background:#e9e5e1;}
::-webkit-scrollbar-track {     background:#e9e5e1; }
::-webkit-scrollbar-thumb {  background:#afa398;  }




header {min-height:203px;}

#container { background:#fff;}

	.yayakBox { background:#7f7c88 url(/images/suncheon/yeyak/main/yeyakBg.jpg) center top no-repeat; height:763px;padding:42px 0 35px 0;}
	
	
	
		.yeyakForm {margin:0 auto; max-width:1100px; height:567px; background:#fff; border-radius:5px;}
		.listPad {float:left;padding:40px 30px;}
		.yeyakForm .yeyakList {float:left;width:70%;font-size:18px;}
		.yeyakForm .yeyakList > li {float:left; width:210px;height:201px;}
                .yeyakForm .yeyakList > li.num03 { width:270px;}
		.yeyakForm .yeyakList li p {float:left; border-radius:3px; background:#ff9700; color:#fff; font-size:24px; width:39px; height:23px;padding:8px 0; text-align:center;margin-left:10px;} 
		.yeyakForm .yeyakList li > div {}
		.yeyakForm .yeyakList li div.scroll {float:left; width:161px;height:100%; overflow-y:scroll; } 
                .yeyakForm .yeyakList li.num03 div.scroll { width:221px;} 
		.yeyakForm .yeyakList li >  div > ul {float:left;margin-left:10px;}
		.yeyakForm .yeyakList li >  div > ul >li {line-height:34px;}
		.yeyakForm .yeyakList li >  div > ul >li a {color:#000;}
		.yeyakForm .yeyakList li >  div > ul >li a.on,
		.yeyakForm .yeyakList li >  div > ul >li a:hover {color:#f26522;}
		
		.m_yeyakList {display:none;}
		
		.product {float:left; width:30%;}
			.proCon{float:left;width:100%;}
		.product h3 {float:left;padding-left:25px;line-height:24px;color:#603913; font-size:18px; background:url(/images/suncheon/yeyak/main/ico_check.png) left top no-repeat;}
			.proCon table {float:left; width:99%; margin:5px 0 0 0; font-size:14px; font-family:나눔고딕,"돋움","굴림",  Seoul, "한강체";}
			.proCon table th {color:#362f2d;padding:10px 0 8px 0;background:#d7c7b6;border-right:1px solid #fff;border-bottom:1px solid #fff;}
			.proCon table td {color:#362f2d;padding:10px 0 8px 5px;background:#f1ebe5;border-right:1px solid #fff;border-bottom:1px solid #fff;}
			
			.proCon p {float:left; clear:both;margin-top:5px; width:99%;}
			.proCon a.btn_info,
			.proCon a.btn_situation {float:left; width:49%; border-radius:3px;text-align:center;}
			.proCon a.btn_info,
			.proCon a.btn_situation {display:inline-block;width:49%;padding:10px 0;font-size:16px;;color:#fff;}
			
			.proCon a.btn_info { background:#555555;}
			.proCon a.btn_situation {background:#5b97e2;margin-left:3px;}
			
			.proCon a.btn_info:hover { background:#534741;border-radius:3px; text-decoration:none;}
			.proCon a.btn_situation:hover { background:#4278ba;border-radius:3px; text-decoration:none;}
			
			.content {float:left; width:100%; border-top:5px solid #e9e5e1;margin:18px 0 0 0;}
				
				.ingYeyak {float:left; width:385px;margin-top:29px;}
				.ingYeyak h3 {font-size:18px; color:#555;}
					/* visualArea */
				.visualArea { position:relative; display:block; width:332px;margin-top:10px; overflow:hidden;background-size:100% auto; }
				.visualArea .slick-slide { position:relative;  }
				.visualArea .slick-list { position:relative; display:block; overflow:hidden; }
				.visualArea .slick-list.dragging { cursor:pointer; cursor:hand; }
				.visualArea .slick-track { position:relative; display:block; left:0; top:0; width:100%;}
				.visualArea .slick-slide { position:relative; display:block; float:left; width:100%; height:100%; text-align:center; }
				.visualArea .slick-slide a { position:relative; display:block; padding:0; text-align:center; }
				.visualArea .slick-slide img { width:auto;width:100%; text-align:center; }
				.visualArea .slick-slide span {position:absolute; right:0; bottom:0; height:20px; padding:5px 0; z-index:10; width:100%; background:#000; opacity:0.7; text-align:right;}
				.visualArea .slick-slide span h4 {padding:0 10px; color:#fff;opacity:1;letter-spacing:-1px;}
				.visualArea .slick-slide span strong {font-size:18px;}
				.visualArea .slick-slide > div { display:inline-block; width:100%;}
				.visualArea .slick-dots { position:absolute; left:5px; bottom:8px; width:100%; text-align:left; }
				.visualArea .slick-dots li { display:inline-block; cursor:pointer; vertical-align:top; margin-left:-1px; }
				.visualArea .slick-dots li button { font-size:0;line-height:0; display:block; padding:0; width:20px; height:15px; cursor:pointer; color:transparent; border:0 none; background-color:transparent; background-image:url(/images/suncheon/tour/main/visual_off.png);background-position:center center; background-repeat:no-repeat; background-size:12px auto; }
				.visualArea .slick-dots li.slick-active button {background-image:url(/images/suncheon/tour/main/visual_on.png);background-size:12px auto; }
				.visualArea .slick-arrow { position:absolute; top:50%; margin-top:-20px; z-index:999; width:28px; height:31px; font-size:0; display:block; border:0 none; background:none; background-position:center center; background-repeat:no-repeat; background-size:30px auto;  }
				.visualArea .slick-prev  {left:5px;background-image:url(/images/suncheon/tour/sub/btn_left.png);}
				.visualArea .slick-next  {right:5px;background-image:url(/images/suncheon/tour/sub/btn_right.png); }	
				
				
				.banner {float:right;margin:60px 0 0 0; width:650px; }
				.banner li {float:left; width:78px; padding:20px 0 35px 82px; font-size:16px;}
				.banner li a { display:inline-block;color:#555;}
				.banner li:first-child a {letter-spacing:-2px;}
				.banner li.ban01 { background:url(/images/suncheon/yeyak/main/ban01.jpg) left top no-repeat;}
				.banner li.ban02 { background:url(/images/suncheon/yeyak/main/ban02.jpg) left top no-repeat;}
				.banner li.ban03 { background:url(/images/suncheon/yeyak/main/ban03.jpg) left top no-repeat;}
				.banner li.ban04 { background:url(/images/suncheon/yeyak/main/ban04.jpg) left top no-repeat;clear:both}
				.banner li.ban05 { background:url(/images/suncheon/yeyak/main/ban05.jpg) left top no-repeat;}
				.banner li.ban06 { background:url(/images/suncheon/yeyak/main/ban06.jpg) left top no-repeat;}
				.banner li.ban07 { background:url(/images/suncheon/yeyak/main/ban07.jpg) left top no-repeat;}
				.banner li.ban08 { background:url(/images/suncheon/yeyak/main/ban08.jpg) left top no-repeat;}



			.noticeGroup {clear:both;margin:0 auto; max-width:1100px;padding:20px 0 43px 0;}
				div.notice {position:relative;float:left; background:#fff; border-radius:5px; width:465px;height:101px;padding:33px 35px;margin-right:19px;}
				div.notice h4 {float:left;font-size:24px;width:19%;margin:13px 15px 0 0;}
				div.notice ul {float:left;width:75%;}
				div.notice ul li {font-size:18px; line-height:34px;}
				div.notice ul li a {float:left;width: 90%; padding:0 0 0 10px; color:#292c30; background:url(/images/suncheon/yeyak/main/dot.gif) left center no-repeat;vertical-align: middle;white-space: nowrap;    text-overflow: ellipsis;    overflow: hidden;}
				div.notice ul li span {float:right;}
				div.notice p {position:absolute; left:48px; top:95px; width:65px; font-size:16px;line-height:20px; background:url(/images/suncheon/yeyak/main/more.gif) right center no-repeat;}
				div.notice p a{display:inline-block;color:#44484f;}

				div.mySearch {float:left;width:268px;height:167px;margin-left:2px; border-radius:5px; background:#e26f50 url(/images/suncheon/yeyak/main/searchBg.gif) right bottom no-repeat;}
				div.mySearch a {display:block;width:200px;height:138px; font-size:24px; color:#fff; padding:36px 0 0 20px;background:url(/images/suncheon/yeyak/main/gobg.gif) 30px 65px no-repeat; }

				div.qa {float:left;width:268px;height:167px;margin-left:5px; border-radius:5px; background:#595ed8 url(/images/suncheon/yeyak/main/qaBg.gif) right bottom no-repeat;}
				div.qa a {display:block;width:255px;height:138px; font-size:24px; color:#fff; padding:36px 0 0 30px;background:url(/images/suncheon/yeyak/main/gobg02.gif) 30px 65px no-repeat; }

.footer{background:#f7efdd;}


/*** Tablet  ***/
@media all and (max-width:1098px){

header {min-height:116px;}

/*예약*/
.yeyakForm {width:97%;}
.listPad {padding:30px 20px;}
.yeyakForm .yeyakList {width:75%;}
.product { width:25%;}


.content {width:100%;}
	.ingYeyak {width:350px;}
	
	.banner {width:590px;}
	.banner li {width:113px;}

	/*ul.guide li {width:50%;margin-bottom:20px;}*/
	
	
	.noticeGroup {width:97%;}
	div.notice { width:370px;height:112px;padding:27.5px 30px;}
	div.notice h4 {margin-top:0; font-size:20px;}
	div.notice h4, 
	div.notice ul {width:100%;margin:7px 0 0 0;}
	div.notice ul li {font-size:16px; line-height:25px;}
	div.notice p { left:350px; top:40px;}
	

/*** Tablet  ***/
@media all and (max-width:1000px){
		.ingYeyak {width:340px;}
		

div.mySearch ,
div.qa {width:255px;}


}
/*** Tablet  ***/
@media all and (max-width:850px){

#container { width:100%;float:left; background:#7f7c88;}

	.yayakBox { background-image:none; height:1030px; }
	.yeyakForm {width:95%; height:auto; min-height:850px;}
	.listPad {width: 95%;}
	.yeyakList {display:none;}
	.m_yeyakList {display:block;float:left; width:55%; padding-right:15px; border-right:5px solid #e9e5e1;}
	.m_yeyakList ul {}
	.m_yeyakList li {padding:3px 0;}
	.m_yeyakList select {border:1px solid #b6bbc3; width:100%;padding:8px 0 5px 5px; font-size:18px;line-height:22px; border-radius:3px; background:url(/images/suncheon/yeyak/main/select_arrow.png) 95% center no-repeat; color:#494c51;-webkit-appearance:none;}
	.m_yeyakList .label-blind {display: block;overflow: hidden;position: absolute;top: -1000em;left: -1000em;}
	.m_yeyakList li a.btn_search {display:block; color:#fff; border-radius:3px; font-size:16px; width:100%; padding:15px 0; text-align:center; background:#ff9700 url(/images/suncheon/yeyak/main/btn_search.png) 42% center no-repeat;}


.product { width:39%;margin-left:15px;}

	.product h3 {font-size:16px;}
	.proCon table {font-size:13px;}



	.content {width:99%;}
	
	.ingYeyak {width:500px; float:none; margin:40px auto 0 auto;}
	.visualArea {width:500px;}
	
	.banner {float:none; width:90%;margin:30px auto 0 auto;}
	.banner li {width:19%;}
	
	
	
	
	.noticeGroup {width:95%;}
	div.notice { width:33%;height:105px;padding:31px 30px;margin-right:2.5%;}
	div.notice ul li {font-size:14px; line-height:23px;}
	div.notice p { left:240px; top:40px; font-size:14px;}

div.mySearch,
div.qa {width:222px; background-size:50%;}

div.qa {background-size:35%;}

div.mySearch a,
div.qa a {font-size:20px; width:auto;}

}

/*** mobile Device ***/
@media all and (max-width:768px){
div.notice {padding:25px;}
div.notice p { left:220px; top:30px; background-size:20%; width:50px;}

div.mySearch,
div.qa {width:206px; height:156px ;}
}
/*** mobile Device ***/
@media all and (max-width:690px){


.listPad {padding:25px 15px 25px 15px;}

.yeyakForm .yeyakList > li {width:210px;height:190px;}

.yeyakForm .yeyakList li div.scroll {width:160px;}
.yeyakForm .yeyakList li.yeyakText {width:205px;}


	.banner {width:99%;}
	.banner li {width:19%;}



	div.notice { width:60%;}
	div.notice p { left:370px;}

	div.mySearch,
	div.qa {width:190px; height:76px ;margin-left:0; background-size:35%;}
	div.qa {background-size:25%;margin-top:5px;}

	div.mySearch a,
	div.qa a { background:none; font-size:18px;padding:28px 0 0 20px;}


}



/*** mobile Device ***/
@media all and (max-width:480px){
header {min-height:85px;}

.yayakBox {width: auto;height:auto; padding:30px 0;}

.yeyakForm {width:95%; height:auto; min-height:1000px;}
.listPad{width:87%;padding:25px;}
	
	.m_yeyakList {display:block;float:left; width:100%;padding-bottom:15px;padding-right:0; border-bottom:5px solid #e9e5e1;border-right:0;}
	.m_yeyakList li { width:100%;  }
	.m_yeyakList select {line-height:34px; }


.product { width:100%;padding-top:20px;margin-left:0;}


.content {width:100%;}
.ingYeyak {width:300px;}
	.visualArea {width:300px;}
		.banner li {width:26%; font-size:12px; padding:15px 10px 20px 57px; background-size:31% !important;}

	
	.noticeGroup {float:none;width:95%; margin:0 auto;}
	div.notice {width:84.5%;padding:20px 30px 50px 30px;margin:0;}
	div.notice ul li a {width:100%;}
	div.notice ul li span {display:none;}
	div.notice p { border:1px solid #eee;  width:80%;left:10%; top:130px; height:20px; padding:5px 0; text-align:center;background:none;}
	
	div.mySearch,
	div.qa {width:99%;margin-top:20px; background-size:20%;}
	div.qa {margin:5px 0 30px 0;background-size:13%;}

}

/*** mobile Device ***/
@media all and (max-width:320px){
#container {}
.yeyakForm {width:96%;min-height:890px;}
.listPad{width:91%;padding:15px;}

.ingYeyak {width:275px;margin-top:20px;}
.visualArea {width:275px;}

.banner li {width:28%;font-size:12px; padding:7px 10px 20px 45px; background-size:29% !important; }
.noticeGroup {width:96%;}
div.notice {width:80.5%;}

	div.mySearch,
	div.qa {width:99.5%;}

}