@charset "utf-8";
body {  text-align: center; overflow-y: scroll; min-width:100% !important;}

/* juy 수정 */
#index .intro {
  //background:url(/SkinImg/bg3.jpg) no-repeat center;
  text-align:center;
  position:relative;
  z-index:0;
  overflow:hidden;
  height:100%;
}  
/* 추가 */
#index{min-width:0px; }
#index .cycle-slideshow img{width:100%;}

#index #main-banner {
  margin-top:50px;
}
/* index */

.mosaicflow__column {
  float:left;
  }

.mosaicflow__item {
  position:relative;

  }
  .mosaicflow__item img {
    display:block;
    width:100%;
    max-width:500px;
    height:auto;
    }
.wrapper {
  width:960px;margin:0 auto;
}
#sub .wrapper{
}

/* menu */
.nav-container {border-bottom:1px solid #dddddd; background:#ffffff; height:63px; line-height:63px; padding-left:89px}
.menu-holder { width:960px;margin:0 auto; position:relative;}
.menu-holder h1 {position:relative; text-align:left; left:0; width:200px; height:24px;}
.menu-holder ul { position:absolute; right:0;top:0;}
.menu-holder ul li {float:left; width:199px; cursor:pointer;}

#index .nav-container {border-top:1px solid #dddddd;}
.f-nav{ z-index: 9999; position: fixed; top: 0; width:100%; margin-left:-48px;} /* this make our menu float top */

/* sub-menu*/
.subnav-container { }
.submenu-holder { }
.submenu-holder h1 {position:relative; text-align:left; left:0; width:200px; height:24px;}
.submenu-holder ul { }
.submenu-holder ul li {float:left; width:199px; cursor:pointer;}

/* side-menu */
#side-nav {   height: 100%;
  position: fixed;
  background-color: #222427;
  color:#919293;
  top: 0;
  left: 0;
  width: 85px;
  z-index: 99999;
  text-align: center;
  -webkit-backface-visibility: hidden;
  -webkit-transform: scale(1);
  cursor:pointer;}
#side-nav .home { position:absolute;top:8px;left:7px;}
#side-nav ul { margin-top:270px;}
#side-nav ul li { background:url(/SkinImg/slide01.gif) no-repeat bottom; width:85px;padding:10px 0 7px 0;} 
#side-nav ul li.business { width:100%;background:#ffffff;margin-bottom:60px;}  

/* container setting */
.container {  
    /*width:100%;*/
    /*margin:0 0 0 85px;*/
    
    padding: 0 0 0 85px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* footer 공통 */
footer { /*border-top:1px solid #eaeaea;*/ padding-top:20px;}
footer .wrapper {position:relative;height:105px;}
footer .flogo { float:left;width:80px;text-align:left;}
footer .address { float:left;text-align:left;font-family:NanumBarunGothicWeb;}
footer .address ul li {font-size:11px;float:left;background:url(/SkinImg/slide.gif) no-repeat right 5px; padding-right:5px;margin-right:5px;}
footer .address ul li:last-child {background:none;} 
footer .address .info {color:#2e2e2e;line-height:140%;font-size:10px;} /*padding-left:0;*/
footer .inicis {position:absolute;right:0;top:25px;}
.footer-line{border-top:1px solid #eaeaea;}
.container .container{padding-left:0px;}




/* list */
#list {padding-top:50px;text-align:left;}
#list .pcategory {text-align:center;margin:40px 0 25px 0;}
#list .pcategory ul li { float:left; margin:0 8px;cursor:pointer;}
#list .pcategory ul li.selected {border-bottom:3px solid #5d5d5d; padding-bottom:3px;}
#list h2 {text-align:left;font-size:110%;}
#list h3 {font-family: arial;font-size:12px;color:#222426;}
#list h5 {text-align:left;color:#999999;}
#list section {padding-bottom:20px;}
#list .product {width:230px;float:left;margin-right:13px;}
#list .product:nth-child(4),
#list .product:nth-child(8),
#list .product:nth-child(12),
#list .product:nth-child(16),
#list .product:nth-child(20) {margin-right:0;} 
#list .product p {color:#4f4d4d;font-size:80%;margin-top:10px;}
#list .product strong {color:#222426;font-family:arial;margin-top:15px;display: block}
.lined {
margin-bottom: 15px;
border-bottom: 1px solid #e5e5e5;
}
.bolded-line {
display: block;
margin-bottom: -1px;
margin-top: 15px;
width: 22px;
height: 1px;
background-color: #727272;
}
.pages {
  clear: both;
margin: 10px 0;
padding: 8px 0 17px;
text-align: left;
background: #fff;
border-top: 1px solid #ccc;
text-align:center;
width:100%;
}
.pages p {float:left;width:18px;}
.pages ol {float:left;}
.pages ol li {float:left;width:18px;font-family: arial;font-size:95%;}
.pages ol li.selected {border-top:2px solid #000;width:8px;margin:0 5px;font-weight: bold;padding-top:6px;margin-top:-8px;}
.pages ol li.others {color:#7b7b7b;}

/* company */
#company {background:#f6f6f6;}

/* history */
#company .history {background:#fff179;text-align:left;width:100%;position:relative;margin-top:-5px;}
#company .history .history_left {float:left;margin:75px 0 0 68px;}
#company .history .history_right {float:left;margin-left:24px;}
#company .history .history_right img {display:block;}
#company .history .history_right img.hahaha {margin-left:328px;}
#company .history .history_right img:nth-child(3) {margin-left:164px;}
#company .history .history_right p {position:absolute;top:163px;left:139px;}


.ttt{position:absolute;}
#item1 .ttt{left:-164px;}
#item3 .ttt{top:-164px;}
#company .history .horizontal {width:328px;height:164px; position:relative; overflow:hidden;}
#company .history .vertical {width:164px;height:327px; position:relative; overflow:hidden;}
#company .history #item1 {margin-left:328px; position:relative; overflow:hidden;}
#company .history #item3 {margin-left:164px; position:relative; overflow:hidden;}


/* member */
#company .member {background:#262626;width:100%;padding:100px 0;margin-top:-5px;}
#company .member p.mem_title {float:left;margin:0 0 40px 75px;}
#company .member ul {margin-left:75px;}
#company .member ul li {float:left;margin-right:10px;position:relative;text-align:left;}
#company .who {width:134px;height:134px;background:#f3e77e;opacity:0.9;position:absolute;left:10px;top:10px;padding:20px;color:#262626;font-family:arial;font-weight:bold;display:none;}
#company .who .eng_name {font-size:130%;}
#company .who .kr_name {margin:5px 0;font-size:100%;}
#company .who span {width:100%;border-top:2px solid #262626;display:block;margin:10px 0;}
#company .who .position, #company .who .office {font-size:90%;margin-top:-3px;}

/* contact */
#company .contact {background:#05a9c4;width:100%;padding:40px 0 80px;}
#company .contact .con_left {float:left;margin-left:135px;}
#company .contact .con_right {float:left;margin-left:30px;position:relative;}
#company .contact input {width:262px;height:40px;padding-left:12px;border:none;display:block;margin-bottom:16px;}
#company .contact textarea {width:371px;border:none;padding:12px;height:80px;}
#company .contact button {background:#1ab392;color:#ffffff;padding:13px 32px;display:block;border:none;position:absolute;right:0;top:120px;}
#company .contact p {position:absolute;left:0;bottom:-180px;}
#company iframe {margin-top:-5px;}

#company .location {background:#05a9c4;text-align:left;color:#ffffff;margin-top:-5px;padding:50px 10%;font-size:95%;width:80%;line-height:140%;margin-bottom:-5px;}
#company .location strong {margin-bottom:10px;display:block;}
#company .location .add {float:left;width:47%;margin-right:3%;}
#company .location .call {float:left;margin-left:3%;width:47%;}
#company .location .call p{margin-top:25px;}

/* magazine */
#magazine {padding-bottom:70px;}
#magazine h2 {margin-bottom:30px;}
#magazine .preview {position:relative;width:100%;padding-top:20px;margin-top:15px;}
#magazine .preview p.more {position:absolute;right:0;top:0;}
#magazine .preview p.p_title {float:left;}
#magazine .preview table {float:left;width:840px;text-align:center;border-left:1px solid #d5d5d5;border-bottom:1px solid #eeeeee;border-top:1px solid #eeeeee;}
#magazine .preview table.tabledata td {border-right:1px solid #d5d5d5;height:162px;line-height:162px;} 
#magazine .preview table.tabledata td.grey {background:#d5d5d5;} 

/* cart */
#cart {padding:100px 0 80px;}
.cart_list {float:left;text-align:left;width:70%;}
#cart h2 {font-family:arial;font-size:100%;margin-bottom:15px;}
#cart h2 span {color:#999999;font-size:95%;background:url(/SkinImg/slide.gif)no-repeat left 3px;padding-left:10px;margin-left:10px;}
.cart_total {float:left;text-align:left;width:25%;margin-left:5%;}
#cart table.tabledata {border-left:none;font-family:arial;background:#ffffff;margin-bottom:20px;}
#cart table.tabledata th {border-right:none;padding:10px 0;text-align:left;}
#cart table.tabledata td {border-bottom:1px solid #dddddd;}
#cart table.totaltable {border-bottom:1px solid #dddddd;}
#cart table.totaltable th, #cart table.totaltable td {border-bottom:none;}
#cart .button {width:100%;border:1px solid #222426;background:#ffffff;color:#222426;padding:10px 0;font-family:arial;margin-top:5px;}
#cart .button:hover {background:#222426;color:#ffffff;border:1px solid #222426;}
#cart .continue-shopping {text-align:right;font-size:95%;margin-top:15px;display:block;}
#cart table.tabledata input {width:20px;}

/* detail */
#detail {position:relative; min-height:400px} /*HR:깨져서 임시로 넣어뒀어~*/
#detail .d_title { text-align:center;margin:75px 0;}
#detail .product {width:100%;position:relative;height:330px}
#detail .product .slide_product {float:left;width:50%;text-align:left;}
#detail .product .product_info {float:left;padding:0 80px; text-align:center;width:360px; color:#4e4e4e;font-family:arial}
#detail .product .product_info h2 {letter-spacing:0.1em;font-size:130%;background:url(/SkinImg/tab02.gif) no-repeat center bottom;padding-bottom:10px;margin-top:20px;}
#detail .product .stock {margin:20px 0 40px;font-size:85%;letter-spacing:0.2em;}
#detail .product .stock span {color:#000;}
#detail .product .info{border-top:1px solid #d1d1d1;border-bottom:1px solid #d1d1d1;padding:10px 0;font-size:95%;line-height: 145%;height:80px;margin-bottom:20px;overflow:auto}
#detail .product .option {margin-top:30px}
#detail .product .choose { margin-top:10px; line-height:3em; }
#detail .product .price {letter-spacing:0.2em;margin-bottom:10px;}
#detail .product .price span {color:#000;}
#detail .product .btnArea {position:absolute;bottom:0}
.quality {padding:50px 0;margin-top:80px;}
.scription {min-height:500px;width:100%;background:#ffffff;margin-bottom:100px;}
.related h3 {margin-bottom:20px;}
.related ul {margin-bottom:50px;}
.related ul li {float:left;margin-right:1px;}
.related ul li:last-child {margin-right:0;}
.related ul li div {background:#ffffff;padding:10px;position:relative;text-align:left;font-size:97%;border:1px solid #eaeaea;border-top:none;margin-top:-5px;}
.related ul li div strong {display:block;}
.related ul li div p {position:absolute;right:15px;top:20px;}

/* register */
#join {padding:100px 0;}
#join table {margin-left:10%;width:80%;border-left:0;margin-top:50px;background:#ffffff;}
#join table tr th {font-weight:normal;border-right:none;border-bottom:1px solid #dddddd;background:#f8f8f8;padding-left:20px;height:20px;line-height:20px;text-align:left;font-size:90%;padding:13px 50px 13px 20px;}
#join table tr td {height:20px;line-height:20px;border-bottom:1px solid #dddddd;width:100%;padding:13px 50px 13px 20px;font-size:85%;}
#join table tr td input {border:1px solid #dddddd;height:25px;}
#join table tr td input.small {width:50px;margin:0 5px;}
#join .user_agreement {text-align:left;margin-left:10%;width:80%;margin-top:50px;}
#join .user_agreement textarea {height:80px;margin:10px 0;width:300px;}
#join .user_agreement .user {float:left;margin-right:50px;}
#join .user_agreement p {position:relative;}
#join .user_agreement p span {position:absolute;right:0;}
#join .user_agreement .privacy p span {right:105px;}
#join .join_complete {margin:70px 0 0px;}
#join .join_complete button {font-family: arial;padding:10px 20px;margin:0 5px;border:1px solid #222426;background:#ffffff;color:#222426;}
#join .join_complete button.join {background:#222426;color:#ffffff;}  

/* mypage */
#mypage {padding:100px 0;}
#mypage ul {padding:0 215px;margin-top:50px;background:url(/SkinImg/mypage_bbg.gif)no-repeat left 18px;}
#mypage ul li {float:left;}
#mypage ul li img {height:175px;width:175px;}

/* login */
#login h2 {padding-top:100px;margin-bottom:100px;}
#login .wrapper {padding-bottom:200px;}
#login .login_now {float:left;width:40%;margin-left:10%;text-align:left;background:#222426;color:#ffffff;padding:20px 5% 60px 5%;font-family: arial;position:relative;}
#login .login_now input {width:98%;padding-left:2%;height:30px;margin:5px 0 10px;border:none;}
#login .login_now button {background:#ffffff;padding:7px 20px;font-family: arial;font-weight:bold;font-size:120%;border:none;position:absolute;right:45px;bottom:15px;cursor:pointer;}
#login .login_now ul {display:block;position:absolute;left:50px;bottom:15px;}
#login .login_now ul li {float:left;margin-right:10px;cursor:pointer;}
#login .login_now ul li a {color:#ffffff}
#login .register {height:80px;color:#222426;float:left;width:23%;padding-left:7%;text-align:left;margin-left:3%;font-family: arial;padding-top:120px;border:1px solid #222426;background:url(/SkinImg/loginbg.gif)no-repeat;text-align:center}
#login .register p {margin-bottom:20px}
#login .register .registerNow{background:#222426;padding:10px 0;width:150px;text-align:center;color:#ffffff;border:none;margin-top:10px;display:block;}
#login .register .registerNow a {color:#ffffff}
#login .register #noMemberWrap {border:1px solid #222426;display:block;margin-top:3px;width:150px;text-align:center;padding:3px 0;background:#ffffff}

/*
#login .register {float:left;width:35%;text-align:left;padding-left:5%;font-family: arial;padding-top:20px;}
#login .register button{background:#222426;padding:15px 30px;color:#ffffff;border:none;margin-top:10px;}
*/

/* agreement */
#agreement {text-align:left;padding:60px 0;}
#agreement h2 {margin-bottom:40px;}
#agreement div {color:#999999;font-size:90%;margin-left:30px;}
#agreement p {margin:0 0 15px 10px;}