@charset "utf-8";

/* 공통및 절대적인... */
.none {display:none;}
.blind {display: block;overflow: hidden;position: absolute;top: 0;left: 0;width: 0;height: 0;border: 0;background: none;font-size: 0;line-height: 0;}

/* 기본구조 */
#wrap {position:relative; }

#headWrap {margin:0 auto; width:100%;height:95px;  position: fixed; top: 0px; left: 0px; background:#fff; z-index:1000;}
#headWrap:after{display:block;visibility:hidden;clear:both;height:0;content:'.'}
.head {position:relative;margin:0 auto;width:1200px;}
.head .logo {float:left;margin:20px 0 0 0;}

.head .util {float:right; position:relative;margin:40px 0 0 0;}
.head .util li {float:left;margin:0 0 0 10px;padding-left:10px;background:url(/images/util_bar.png) no-repeat 0 50%;}
.head .util li:first-child {background:none;}
.head .util li a {color:#888;}
.head .util li.util_lang a {color:#934400; font-weight:600;  font-size:18px;}

.nav {float:left;position:relative;margin:25px 0 25px 120px;}
.nav:after{display:block;visibility:hidden;clear:both;height:0;content:'.'}
.nav .dep1 {float:left;margin-left:25px;padding:0 10px;}
.nav .dep1:last-child {background:none;}
.nav .dep1>a {display:block;padding:15px 5px;font-size:18px;color:#222;font-weight:400;/*text-transform: uppercase;*/}
.nav .dep1:hover>a, .nav .dep1.current>a {color:#934400;}
.nav .dep1:hover .dep2 {display:block;}
.nav .dep2 {display:none;z-index:1000;position:absolute;top:45px;left:auto;/*padding:10px 0 10px;*/border:1px solid #efefef;border-left:3px solid #3264af;background:#fff; background:#fff; box-shadow: 3px 3px 3px rgba(0,0,0,.2);}
.nav .dep2 li {}
.nav .dep2 li a {display:block;font-size:12px;line-height:13px;color:#666; font-weight:600; padding:10px 20px;}
.nav .dep2 li a:hover {color:#333; background:#efefef;}





/* 메인비주얼 */
#flickingList {position:relative;overflow:hidden; margin:0 auto; text-align:center;width:100%; height:798px; top:0; left:0px; padding-top:95px; z-index:10;}
#flickingList .cont {position:relative; overflow:hidden; top:0px; width:100%; vertical-align:top;text-align:center; }
#flickingList .layerWrap {position:relative; overflow:hidden; top:0px;width:12000px;  white-space:nowrap;  vertical-align:top;}
#flickingList .layerWrap:after{content:""; display:block; clear:both; }
#flickingList .layer {float:left; width:100%;  text-align:center;  }
#flickingList .bg1 {background:url("/images/main_1.jpg") no-repeat top center;height:798px;}
#flickingList .bg2 {background:url("/images/main_2.jpg") no-repeat top center;height:798px;}
#flickingList .bg3 {background:url("/images/main_3.jpg") no-repeat top center;height:798px;}

#flickingList .tabWrap {position:absolute;bottom:55px; left:47%; text-align:center;z-index:200; }
#flickingList .tabWrap li {display:inline; padding:0 2px;}
#flickingList .tabWrap li a {display:inline-block; width:16px; height:16px; background:url("/images/btn_off.png") no-repeat;}
#flickingList .tabWrap li a.current {background:url("/images/btn_on.png") no-repeat;}
#flickingList .tabWrap li a.btn_play {display:inline-block; width:20px; height:20px; background:url("/images/play.png") no-repeat;}
#flickingList .tabWrap li a.btn_stop {display:inline-block; width:20px; height:20px; background:url("/images/stop.png") no-repeat;}
#flickingList .tabWrap li a.current.btn_play {display:inline-block; width:20px; height:20px; background:url("/images/play_on.png") no-repeat;}
#flickingList .tabWrap li a.current.btn_stop  {display:inline-block; width:20px; height:20px; background:url("/images/stop_on.png") no-repeat;}

#flickingList .prevNext {position:absolute;top:48%; width:100%;height:75px;z-index:200;border:0px solid red;}
#flickingList button {overflow:visible; margin:0; padding:0; border:none; background:none; cursor:pointer;}
#flickingList button.prev {position:absolute; top:0px; left:20px; width:62px; height:19px; z-index:10;}
#flickingList button.next {position:absolute; top:0px; right:20px; width:62px; height:19px; z-index:10;}

#flickingList .v_wrap{width:1200px; margin:auto; position:relative; top:100px;}
#flickingList .view {position:relative; margin:0 auto; top:180px; z-index:11;  font-weight:700; font-size:90px;line-height:100%; color:#fff;}
#flickingList .view .brown90 {font-size:90px; font-weight:700; color:#934400; }

#flickingList .visual_btn a {color:#fff; font-size:18px; font-weight:400; color:#fff; background-color:rgba(255,255,255,.3);
border:2px solid #fff; padding:15px 50px; position:relative; top:150px; border-radius:20px;}
#flickingList .visual_btn a:hover {background:#2751a3; border:2px solid #2751a3;}



/*con1*/
.contents1 {position: relative; width:100%; background:#fff; padding-top:75px;}
.main_h3 {color:#222; font-size:30px; font-weight:600; line-height:1.5em; text-align:center;}
.main_h4 {color:#222; font-size:18px; font-weight:300; line-height:1.5em; text-align:center;}


.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 1em;
  width:100%;
  min-width:1300px;
  margin:0 auto;
  padding:40px 0 0 0;
  border:0px solid red;
  overflow:hidden;
}


/* hover styles */
.location-listing {
  position: relative;
  float:left;
  margin:0 0px;
  width:20%;
}

.location-image {
  line-height: 0;
  overflow: hidden;
  width:384px; height:368px;
  text-align:center;
}

.location-image img {
  filter: blur(0px);
  transition: filter 0.3s ease-in;
  transform: scale(1.1);
}

.location-title {
  font-size: 1.5em;
  font-weight: normal;
  text-decoration: none;
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
  background: rgba(147,68,0,0.6);
  color:#fff;
  /* position the text in t’ middle*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-box { border:1px solid #dee5f1; text-align: center;}
.location_txt {text-align: center; color:#fff; padding:10px 0;}
.location-title a {color:#fff; font-size:20px; font-weight:700; border-bottom:1px solid #fff;}
.location-title a:hover { }

.location-listing:hover .location-title {
  opacity: 1;
}

.location-listing:hover .location-image img {
  filter: blur(2px);
}


/* for touch screen devices */
@media (hover: none) { 
  .location-title {
    opacity: 1;
  }
  .location-image img {
    filter: blur(2px);
  }
}


/*con2*/
.main_content { width:100%; overflow:hidden; margin:0 auto; text-align:center; min-width:1200px; height:499px; background:url(/images/m_con2_bg.jpg) no-repeat center top;}

.main1_wrap {overflow:hidden; padding:100px 0;}
.m_txt1 {color:#313131; font-size:30px; font-weight:600;  line-height:130%;}
.m_txt2 {color:#313131; font-size:18px; font-weight:300;  line-height:130%; padding-top:35px;}
.m_btn {margin-top:40px;}
.m_btn a {color:#333; font-size:16px; font-weight:300; border:1px solid #ccc; background:#fff; border-radius:23px; padding:15px 80px;}
.m_btn a:hover {color:#fff; border:1px solid #934400; background:#934400;}

/*//con2*/








/*foot sitemap*/
#footer_wrap {width:100%; background:#282828; margin:0 auto; }
.navi_wrap { border-bottom:1px solid #555;}
.navi {overflow:hidden;margin:0 auto; width:1100px;}
.navi > li {
	float:left;
	width:19.8%;
	min-height:220px;
	/*background:#282828;*/
	border-right:0px solid #333;
	padding:35px 0 10px 0;
}
.navi > li:first-child {border-left:0px solid #333;}


.navi > li > dl a:hover {color:#934400;}
.navi > li > dl > dt {margin-bottom:0px; border-bottom:0px solid #333; }
.navi > li > dl > dt > a {
	display:block;
	font-size:14px;
	color:#e1e1e1;
	padding:0 0px 15px 30px;
}
.navi > li > dl > dd > a {
	display:block;
	font-size:14px;
	line-height:20px;
	color:#e1e1e1;
	padding:0 10px 5px 30px;
}

/*copyright*/
#footer {overflow:hidden;margin:20px auto; width:1200px; }
#footer .foot_copy {float:left;color:#afafaf;line-height:18px;font-size:14px;padding-top:10px;}
#footer .foot_sns {float:left; padding-left:530px;}
#footer .foot_sns li {float:left; padding:0 5px;}
#footer .gobiz {float:right; }



/*top*/
a#MOVE_TOP_BTN {
    position: fixed;
    right: 2%;
    bottom: 50px;
    display: none;
    z-index: 2000;
	padding:10px 10px;
	width:30px; height:30px;
	background-color:rgba(0,0,0,.7);
	color:#fff;
	font-size:12px;
	text-align:center;
	border-radius:50%;
}





/*********** sub layout *************/

.container {margin:95px auto 0; background:#fff; width:100%;}
.container:after {display:block;visibility:hidden;clear:both;height:0;content:'.'} 


/*sub visual*/
.sub_visual {position:relative; min-width:1200px; height:488px;text-align:center;}
.sub_visual_tit {color:#fff; font-size:60px; font-weight:700;  padding-top:170px;}
.sub_visual_txt {color:#fff; font-size:36px; font-weight:300;  padding-top:15px;}

.sub_bg1 {background:#f1f1f1 url(/images/sub_visual1.jpg) no-repeat center;}
.sub_bg2 {background:#f1f1f1 url(/images/sub_visual2.jpg) no-repeat center;}
.sub_bg3 {background:#f1f1f1 url(/images/sub_visual3.jpg) no-repeat center;}
.sub_bg4 {background:#f1f1f1 url(/images/sub_visual4.jpg) no-repeat center;}
.sub_bg5 {background:#f1f1f1 url(/images/sub_visual5.jpg) no-repeat center;}

/*left*/
.snb {position:absolute; bottom:0; overflow:hidden; width:100%; margin:0 auto; background-color:rgba(0,0,0,.6);}
.snb ul {width:1200px; margin:0 auto; text-align:center; padding:25px 0px;  font-size: 0;}
.snb li {display:inline-block;}
.snb li a {padding:25px 15px; font-size:16px; color:#fff; }
.snb li.current a {color:#fff;  background-color:rgba(147,68,0,.6); padding:25px 15px;}
.snb li a:hover {background-color:rgba(147,68,0,.6); padding:25px 15px;}



.contents { width:100%; min-width:1200px; overflow:hidden; font-size:16px; color:#222; line-height:150%;}
.sub_title {font-size:36px; color:#333; font-weight:700; text-align:center; padding-top:75px;}

/* sub contents */
.con_warp {width:1200px; margin:0 auto; overflow:hidden; min-height:300px; padding:60px 0 30px 0;}


/*제품*/
.flexslider {position:relative;margin:0 0 40px;}
.flexslider .slides {margin:0 auto 30px;width:1100px;height:400px;border:0px solid #d4d4d4;}
.flexslider .slides li {display:none; text-align:center;}
.flexslider .flex-control-nav {text-align:center;}
.flexslider .flex-control-nav li {display:inline-block;margin:0 0 10px 9px;cursor:pointer;}
.flexslider .flex-control-nav li:first-child {margin-left:0;}
.flexslider .flex-control-nav li img {border:1px solid #d4d4d4; width:110px; height:48px; padding:10px 0;}
.flexslider .flex-control-nav li img.flex-active {border:1px solid #934400;}

.flex-direction-nav a {position:absolute;top:170px;width:56px;height:86px;font-size:0;line-height:0;background:url(/images/pro_arr.png) no-repeat 0 0;}
.flex-direction-nav .flex-prev {left:0;}
.flex-direction-nav .flex-next {right:0;background-position:100% 0;}

.gray_contents {width:100%; background:#f8f8f8; padding:85px 0; text-align:center; font-size:20px; line-height:180%;}


/*Tara Snap Shades™*/
.snap_topbg {background:url(/images/tara_snap_shades_bg.jpg) no-repeat left top; width:100%; min-width:1200px; height:353px; margin-top:60px;}
.snap_tit {width:1200px; padding:190px 0 30px 0; margin:0 auto; font-size:80px; font-weight:700; line-height:130%; color:rgba(255,255,255,.5);}
.line {width:800px; border-bottom:1px solid #eee;}

.snap_txt1 {overflow:hidden; position:relative; margin:0 auto; font-size:26px; font-weight:500; line-height:150%;text-align:center; padding:20px 0 30px 0;}
.quot_l {position:absolute; top:0; left:100px;}
.quot_r {position:absolute; bottom:0; right:100px;}

.snap_txt2 {margin:0 auto; width:1000px; padding:80px 0; margin-top:50px; border-top:1px solid #dfdfdf; font-size:20px; line-height:150%;text-align:center; }


/*Why Tara?*/
.why_tara_txt {padding:20px 0; font-size:24px; text-align:center; line-height:250%;}
.tara_big_txt {font-size:36px; font-weight:700;}
.tara_brown_txt {font-size:30px; font-weight:600; color:#934400;}

.why_tara_bg {position:relative; background:url(/images/why_tara_img.jpg) no-repeat center bottom; width:100%; height:580px;}
.col_line {position:absolute; top:0; left:50%; width:1px; height:160px; background:#934400;}


/*The Tara Values*/
.tara_value_bg1 {background:url(/images/tara_value_img01.jpg) no-repeat left;}
.tara_value_bg2 {background:url(/images/tara_value_img02.jpg) no-repeat right;}
.tara_value_bg3 {background:url(/images/tara_value_img03.jpg) no-repeat left;}

.tara_value_list_l {overflow:hidden; height:350px;}
.tara_value_list_l dl {padding-left:495px; padding-top:95px;}
.tara_value_list_l dl dt {font-size:48px; font-weight:700;}
.tara_value_list_l dl dd {font-size:18px; line-height:150%; padding:50px 0 0 150px;}

.tara_value_list_r {overflow:hidden; height:350px; text-align:right;}
.tara_value_list_r dl {padding-right:495px; padding-top:95px;}
.tara_value_list_r dl dt {font-size:48px; font-weight:700;}
.tara_value_list_r dl dd {font-size:18px; line-height:150%; padding:50px 150px 0 0;}

.white48 {font-size:48px; font-weight:700; color:#fff;}


/*The Tara Story*/
.tara_story {position:relative; overflow:hidden; background:url(/images/tara_story_img.jpg) no-repeat left top; height:800px;}
.tara_story .tara_story_txt {background:#fff; font-size:18px; line-height:180%; padding:55px 20px 55px 40px; margin:135px 0 0 320px;}
.quot_left {position:absolute; top:75px; left:480px;}
.quot_right {position:absolute; bottom:45px; right:120px;}



/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ sitemap 사이트맵  ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.sitemap {width:100%;}
.map_dl {
	float:left;
	width:31%;
	margin:0 1%;
	padding-bottom:15px;
	margin-bottom:25px;
	background-color:#f5f5f5;
}
.map_dl.margin_right_none {margin-right:0;}
.map_dl > dt {
	width:80%;
	padding:10px 10%;
	height:45px;
	font-size:20px;
	font-weight:600;
}
.map_dl > dd {
	width:80%;
	padding:3px 10%;
}
.map_dl > dd > a {
	display:block;
	font-size:13px;
	line-height:15px;
	padding:5px;
	background-color:#ffffff;
	border:1px solid #bcbcbc;
}
.map_dl > dd > a:hover {
	color:#ffffff;
	background-color:#8fb540;
}