/* ==============================================
   layout
   ============================================== */

#subBody { padding: 160px 80px 120px; }
#subBody.full { padding: 130px 0 120px; }
#subBody.fullH { padding-bottom: 0; }

/* title area */

.titleArea {margin: 0 auto 60px;}
.titleArea h2 {font-size: 12px;font-weight: normal;text-transform: uppercase;}

/* sub title */

h3.subTopTitle { position: fixed; left: 50%; top: 0; width: 600px; height: 70px; line-height: 70px; font-size: 18px; font-weight: 500; font-style: italic; text-align: center; margin-left: -300px; z-index: 9999; }

/* go back to page */

a.backToPage { position: fixed; right: 60px; top: 10px; height: 50px; line-height: 50px; font-size: 14px; color: #404040; text-align: right; text-decoration: none; background: url(../images/common/icon_go_back.png) left center no-repeat; padding-left: 26px; z-index: 9999; }


/* mediaquery for moble */

@media only screen and (max-width: 1200px) {

   #subBody { padding: 30px 2.5rem 60px; margin: 52px auto 60px; }
   #subBody.full { padding: 0 0 60px; }

}


@media only screen and (max-width: 738px) {

   #subBody { padding: 30px 1.5rem 60px; }
   #subBody.full { padding: 0 0 60px; }

}



/* =========================================================
   error 404
========================================================= */

#subBody .error404 { text-align: center; padding-top: 200px; }
#subBody .error404 h1 { margin-bottom: 40px; }



/* ==============================================
   element
   ============================================== */

/* button */

a {
   -webkit-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
}

p.btn.left { text-align: left;}
p.btn.center { text-align: center;}
p.btn.right { text-align: right;}

a.btn.box { display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline; height: 44px; color: #99999b; font:18px/44px akzLight; text-align: center; text-decoration: none; text-transform: uppercase; border: 1px solid #bebebe; padding: 0 60px;}
a.btn.box:hover { color: #fff; background-color: #bebebe;}

a.btn.noline { border:none;}
a.btn.small { height: 36px; line-height: 36px; font-size: 15px; letter-spacing: 2px; padding: 0 24px;}

a.btn.text { color: #505050; font:14px/20px mtrItalic; text-decoration: none; letter-spacing: 1px;}
a.btn.text:hover { color: #BEBEBE;}

/* form */

input, 
textarea { color:#404040; line-height: 24px; font-family: '나눔고딕','Nanum Gothic','맑은 고딕','Malgun Gothic',돋움,Dotum,굴림,Gulim,'Apple SD Gothic Neo',sans-serif; }

/* image & figure */

figure.overCaption { position: relative;}
figure.overCaption figcaption { position: absolute; left: 0; top: 0; width: 100%; height: 100%;text-align: center; background: rgba(215,215,215,.9);
   -webkit-opacity: 0;
   -moz-opacity: 0;
   -ms-opacity: 0;
   -o-opacity: 0;
   opacity: 0;
   -webkit-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}
figure.overCaption:hover figcaption {
   -webkit-opacity: 1;
   -moz-opacity: 1;
   -ms-opacity: 1;
   -o-opacity: 1;
   opacity: 1;
}
figure.overCaption figcaption span { display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 24px; color: #fff; font:20px/24px mtrItalic; letter-spacing: 3px; margin-top: -12px;}

/* page nav */

nav.page { height: 28px; text-align: center; font:14px/28px akzLight; text-transform: uppercase;}
nav.page > span, nav.page > a { color: #404040; text-decoration: none; margin-right: 5px;}
nav.page > span:after, nav.page > a:after { content: '|'; margin-left: 7px;}
nav.page > a:last-child:after { content: '';}
nav.page > a:hover { color: #c7c7c7;}

/* order now */

p.orderNow {text-align: center;margin-top: 100px;}
p.orderNow a {display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline;line-height: 24px;font-size: 13px;color: #fff;font-family: 'ConneqtRegular';letter-spacing: 0.06em;text-transform: uppercase;text-decoration: none; letter-spacing: 0.1em; background-color: #333; outline: none;cursor: pointer; padding: 10px 24px; cursor: pointer;}
p.orderNow a:hover { background-color: #000; }

/* back to page */

p.backToPage {text-align: center;margin-top: 100px;}
p.backToPage a {display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline;height: 33px;line-height: 32px;font-size: 15px;color: #000;font-family: 'ConneqtRegular';letter-spacing: 0.06em;text-transform: uppercase;text-decoration: none;border: 1px solid #e5e5e5;border-width: 0 0 1px 0;outline: none;cursor: pointer;}


@media only screen and (min-width: 1201px) {

   .goodsDetail p.backToPage {
      position: fixed;
      right: 28px;
      bottom: 40px;
      z-index: 100;

      margin: 0;
      text-align: right;
   }

   .goodsDetail p.backToPage a {
      position: relative;
      display: inline-block;
      height: 33px;
      padding-left: 22px;

      line-height: 32px;
      font-size: 12px;
      color: #000;
      font-family: 'ConneqtRegular';
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-decoration: none;

      border-bottom: none;
   }

   .goodsDetail p.backToPage span {display: none;}

   /* arrow line */

   .goodsDetail p.backToPage a::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;

      width: 12px;
      height: 1px;
      background: #000;

      transform: translateY(-50%);
      transition:all .3s ease;
   }


   /* arrow head */

   .goodsDetail p.backToPage a::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;

      width: 6px;
      height: 6px;

      border-left: 1px solid #000;
      border-bottom: 1px solid #000;

      transform: translateY(-50%) rotate(45deg);
      transition:all .3s ease;
   }

   .goodsDetail p.backToPage:hover a::before,
   .goodsDetail p.backToPage:hover a::after { left: -5px; }

}


/* mediaquery for mobile */

@media only screen and (max-width: 1200px) {

   p.orderNow {text-align: center;margin-top: 60px;}
   p.backToPage {text-align: center;margin-top: 40px;}

   .goodsDetail p.backToPage span {display: inline;}

}





/* ==============================================
   page
   ============================================== */

/* about */

.aboutWrap .con { width: auto; max-width:720px; color:#222; line-height:1.75; font-size:16px; font-weight:400; word-break:keep-all; margin:0 auto; }
.aboutWrap .con p { margin-bottom:32px; }
.aboutWrap .con p:last-child { margin-bottom:0; }
.aboutWrap .con img { display:block; max-width:100%; height:auto; margin:45px 0 0; }


/* terms */

.termsWrap {width: auto;max-width: 1260px;margin: 0 auto; }
.termsWrap .titleArea h2 { line-height: 32px;font-size: 15px; font-family: 'ConneqtRegular';letter-spacing: 0.06em;text-transform: uppercase;text-decoration: none; }
.termsWrap .termsTop { position: relative; max-width: 600px; margin-top: 40px; margin-bottom: 60px; }
.termsWrap .termsTop h1 { display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline; height: 25px; line-height: 22px; font-size: 13px; text-transform: uppercase; font-style: italic; letter-spacing: .1em; font-weight: 400; border-bottom: 1px solid gray; }

.termsWrap .termsTop a.langSelect { position: absolute; display: block; right: 0; top: 50%; width: 30px; height: 30px; line-height: 28px; font-family: '맑은 고딕','Malgun Gothic'; font-size: 11px; color: #999; text-transform: uppercase; text-decoration: none; text-align: center; border: 1px solid #999; margin-top: -20px;
   -webkit-transition: all 0.3s ease-in;
   -moz-transition: all 0.3s ease-in;
   -o-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
}
.termsWrap .termsTop a.langSelect:hover { color: #333; border-color: #333; }

.termsWrap .termsTop p,
.termsWrap .termsCon p { line-height: 21px; word-break: keep-all; margin: 0; }
/*.termsWrap .termsContent { max-width: 600px; }*/
.termsWrap .termsCon h2 { line-height: 20px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 400;}


/* mediaquery for moble */

@media only screen and (max-width: 1200px) {

   /* about */

   .aboutWrap { padding: 0 60px;margin: 0 auto; }


   /* terms */

   .termsWrap {width: auto;max-width: 1260px;margin: 0 auto; }
   .termsWrap .termsTop { position: relative; max-width: 600px; margin-top: 40px; margin-bottom: 60px; }
   .termsWrap .termsTop h1 { display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline; height: 25px; line-height: 22px; font-size: 13px; text-transform: uppercase; font-style: italic; letter-spacing: .1em; font-weight: 400; border-bottom: 1px solid gray; }

   .termsWrap .termsTop a.langSelect { position: absolute; display: block; right: 0; top: 50%; width: 30px; height: 30px; line-height: 28px; font-family: '맑은 고딕','Malgun Gothic'; font-size: 11px; color: #999; text-transform: uppercase; text-decoration: none; text-align: center; border: 1px solid #999; margin-top: -20px;
      -webkit-transition: all 0.3s ease-in;
      -moz-transition: all 0.3s ease-in;
      -o-transition: all 0.3s ease-in;
      transition: all 0.3s ease-in;
   }
   .termsWrap .termsTop a.langSelect:hover { color: #333; border-color: #333; }

   .termsWrap .termsTop p,
   .termsWrap .termsCon p { line-height: 21px; word-break: keep-all; margin: 0; }
   /*.termsWrap .termsContent { max-width: 600px; }*/
   .termsWrap .termsCon h2 { line-height: 20px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 400;}

}


@media only screen and (max-width: 738px) {

   /* about */

   .aboutWrap { padding: 0; }
   .aboutWrap .con { font-size:14px; line-height:1.75; }
   .aboutWrap .con p { margin-bottom: 25px; }

}



/* =========================================================
   ONE PERCENT
========================================================= */

.onePercentWrap {}
.onePercentWrap .topImg { position:relative; width:100%; height:920px; overflow:hidden; }
.onePercentWrap .topImg img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.onePercentWrap .topImg p.title { position:absolute; top:50%; left:50%; width:100%; color:#fff; font-family:'ConneqtRegular', Arial, sans-serif; font-size:46px; font-weight:500; line-height:1.2; padding:0 30px; text-align:center; transform:translate(-50%, -50%); z-index:10; }

.onePercentWrap .con { width: auto; max-width:720px; color:#222; line-height:1.75; font-size:16px; font-weight:400; word-break:keep-all; margin:0 auto; padding:90px 30px 120px; }
.onePercentWrap .con p { margin-bottom:32px; }
.onePercentWrap .con p:last-child { margin-bottom:0; }
.onePercentWrap .con img { display:block; max-width:100%; height:auto; margin:45px 0 0; }


@media screen and (max-width:768px){

   .onePercentWrap .topImg { height:320px; }
   .onePercentWrap .topImg p.title { font-size: 24px; }

   .onePercentWrap .con { font-size:14px; line-height:1.75; padding:40px 20px 60px; }
   .onePercentWrap .con p { margin-bottom: 25px; }

}