@charset "utf-8";

/* @font-face { 
    font-family: 'Nanum'; 
    src: url('../font/NanumBarunGothic.eot'); 
    src: url('../font/NanumBarunGothic.eot?#idfix') format('embedded-opentype'), 
         url('../font/NanumBarunGothic.ttf') format('truetype'); 
}  */
@font-face {
  font-family: "lotte";
  font-style: normal;
  font-weight: 700;
  src: url("../font/lotteBold.eot");
  src: url("../font/lotteBold.eot?#idfix") format("embedded-opentype"),
    url("../font/lotteBold.ttf") format("truetype");
}

/*#f5f2eb*/
body {
  margin: 0;
  padding: 0;
  color: #111;
  font-family: arial, helvetica, sans-serif;
  background-color: #f5f2eb;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  cursor: pointer;
}
button,
input[type="button"],
input[type="submit"] {
  cursor: pointer;
}
img {
  border: 0;
}
.wrap {
  position: relative;
  left: 50%;
  margin-left: -40%;
  float: left;
  width: 80%;
  background-color: #faf9f5;
}

/* 데스크탑 모바일 영역 없애기 */
.M_header,
.M_mainImg,
.main > a,
.Flogo_m,
.company_info_M,
.categori {
  display: none;
}

/* 테스트 */
/* 정기 구독 신청 / 지난호 보기 */
.wrap > a {
  position: absolute;
  left: 5%;
  bottom: 15%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  width: 8%;
  height: 30px;
}
.wrap > a > img {
  width: 100%;
}
.wrap > a:nth-of-type(1) {
  position: absolute;
  left: 4.5%;
  bottom: 18%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  width: 8%;
  height: 30px;
}
input::-webkit-input-placeholder {
  font-size: 90%;
}
input::-moz-placeholder {
  font-size: 90%;
}
input:-ms-input-placeholder {
  font-size: 90%;
}
input:-moz-placeholder {
  font-size: 90%;
}
input::placeholder {
  font-size: 90%;
}

/* Header 영역 */
.headBox {
  position: relative;
  float: left;
  width: 15%;
  background-color: #faf9f5;
}
/* logo */
.logo {
  margin-top: 210px;
  margin-left: -60%;
  width: 160%;
  height: auto;
}
.logo > a {
  width: 100%;
  height: auto;
}
.logo img {
  width: 100%;
  height: auto;
}
/* sns_icon */
.sns_icon {
  position: fixed;
  top: 41%;
  left: 2%;
  width: 2%;
  height: auto;
}
.sns_icon > li {
  border-radius: 100%;
  margin-top: 5px;
  width: 100%;
}
.sns_icon > li img {
  border-radius: 100%;
  width: 100%;
}
.sns_icon > li img:hover {
  border: 2px solid #111;
  box-sizing: border-box;
}
/* gnb */
.gnbBox {
  width: 50%;
  height: auto;
}
.gnbBox > p {
  margin: 40px 0 20px 30%;
  font-size: 1.2rem;
  font-weight: bold;
  width: 100%;
  height: auto;
}
.gnbBox > ul {
  margin: 0 0 50px 30%;
  width: 100%;
  height: auto;
}
.gnbBox > ul > li {
  margin-bottom: 15px;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: bold;
  color: #bfbfbf;
  width: 100%;
  height: auto;
}
.gnbBox > ul > li > ul {
  display: none;
  margin: 10px 0;
  width: 100%;
  height: auto;
}
.gnbBox > ul > li > ul > li {
  margin: 0 0 5px 0;
  line-height: 25px;
  width: 100%;
  height: auto;
}
.gnbBox > ul > li > ul > li > a {
  font-size: 0.8rem;
  color: #bfbfbf;
  font-weight: lighter;
}
.gnbBox > ul > li > ul > li > a:hover {
  color: #7b7b7b;
  font-weight: lighter;
}

.gnb {
  width: 100%;
}
.gnb > ul {
  padding: 20px;
  float: right;
  margin-top: 35px;
  width: 65%;
}
.gnb > ul > li {
  width: 100%;
}
.gnb > ul > li > a > img {
  vertical-align: right;
  width: 100%;
}
.gnb > ul > li:nth-of-type(2) {
  width: 120%;
  height: 40px;
}

/* .main 영역 */
.main {
  float: right;
  width: 85%;
  background-color: #fff;
}
h1 {
  margin: 2% 14%;
  font-size: 4rem;
  width: 25%;
}
h1 img {
  width: 100%;
}
.contents {
  margin: auto;
  padding-bottom: 50px;
  width: 85%;
}
.con {
  position: relative;
  margin: 40px auto 40px;
  width: 90%;
}
.con:nth-of-type(1) {
  margin: 0 auto 40px;
}
.con > h2 {
  margin: 0 0 30px 40px;
  font-size: 1.3rem;
  line-height: 20px;
  width: 15%;
}
.con_box {
  width: 100%;
}
.con_box ul > li {
  padding: 0 30px;
}
.con_box ul > li > p {
  margin-top: 20px;
  font-weight: bold;
  font-size: 1rem;
  line-height: 25px;
  width: 100%;
}
.line {
  position: relative;
  margin: auto;
  max-width: 890px;
  height: 2px;
  background-color: #111;
}
.line > div:first-child {
  position: absolute;
  top: -9px;
  left: 33.3333%;
  width: 2px;
  height: 20px;
  background-color: #111;
}
.line > div:last-child {
  position: absolute;
  top: -9px;
  left: 66.6666%;
  width: 2px;
  height: 20px;
  background-color: #111;
}

/* Footer 영역 */
footer {
  float: left;
  text-align: center;
  padding: 50px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  background-color: #f5f2eb;
}

.logo_footer img {
  width: 10%;
  height: auto;
}
.company_info p {
  font-size: 0.7rem;
}
.company_info strong {
  margin: 0 3px 0 5px;
}

/* Tablet Device */
@media screen and (max-width:1200px) {

    /* 데스크탑 헤더 지우기 */
    .headBox {display: none;}
    .wrap > form,
    .wrap > a {display: none;}

    /* 모바일 컨텐츠 영역 수정 */
    .wrap {position: relative; top: 0; left: 0; padding: 0; margin: 0; width: 100%;}
    .main {width: 100%; background-color: transparent;}
    .contents h2 {width: 50%;}
    .M_mainImg {display: none;}

    /* 모바일 헤더 */
    .M_header {position: fixed; z-index: 4; display: block; padding: 2%; border-bottom: 1px solid rgba(55, 42, 0, 0.5); box-sizing: border-box; width: 100%; height: 100px; background-color: #f5f2eb;}
    .M_logo {margin: 0px auto; width: 250px;}
    .M_logo img {width: 100%; height: 30px; margin: 10px auto;}
       
    .M_btn {float: right; margin: -60px 0 0; padding-top: 5%; width: 40px;}
    .M_btn > button {display: block; width: 100%; height: auto; background-color: transparent; border: none;}
    .M_btn img:first-child {width: 100%; height: auto;}
    .M_btn img:last-child {display: none; position: absolute; top: 35px; left: 30px; z-index: 6; width: 32px; height: auto;}
    
    .M_gnb {float: left; position: fixed; top: 0; left: 0; z-index: 5; display: none; width: 100%; height: 100%;}
    .M_gnbBox {position: absolute; padding: 40px; box-sizing: border-box; right: 0; width: 100%; height: 100%; background-color: #fff;}
    .M_gnbBox > li {padding: 5% 0; box-sizing: border-box; width: 100%; height: auto;}
    .M_gnbBox > li > p {font-size: 1.8rem; font-weight: bold; color: #333; text-align: center; width: 100%; height: auto;}
    .M_gnbBox > li > ul {display: none; margin: 30px 0; width: 100%; height: auto;}
    .M_gnbBox > li > ul > li {padding: 5%; box-sizing: border-box; text-align: center; line-height: 30px; width: 100%; height: auto;}
    .M_gnbBox > li > ul > li > a {display: block; font-size: 1.6rem; color: #333; width: 100%; height: 100%;}
    .M_gnbBox > li > ul > li > a:hover {color: #999;}
     
    .M_sns_icon {float: left; position: absolute; bottom: 50px; right: 50%; transform: translateX(50%); padding: 5%;}
    .M_sns_icon > li {float: left; margin-left: 20px; width: 70px;}
    .M_sns_icon > li img {border-radius: 100%; width: 100%;} 

    /* .main 영역 */
    .main {display: block; margin-top: 100px;}
    h1 {margin: 4% 11%;}
    .main > a {float: left; display: block; position: absolute; bottom: 40px; left: 50%; margin-left: -50px; text-align: center; line-height: 30px; color: #fff; width: 100px; height: 30px; background-color: #111;}
    .main > a:hover {background-color: #00387d;}
    .line {width: 90%;}
    .main h2 {margin: 0 0 30px 0;}


    /* 모바일 풋터 */
    footer {padding: 20px; text-align: left; box-sizing: border-box; border-top: 1px solid rgba(55, 42, 0, 0.5); width: 100%; height: auto;}
    .categori {float: left; display: block; padding: 0 0 20px 0; width: 100%; height: auto;}
    .categori > ul > li {float: left; font-size: 0.8rem; text-align: center; width: 25%; height: auto;}
    .logo_footer {float: left; margin-left: 17px; width: 40%;}
    .logo_footer > a:first-child {display: none;}
    .logo_footer > a:last-child {display: block; width: 100%; height: auto;}
    .logo_footer > a:last-child img {width: 100%; height: auto;}
    .company_info_M {float: right; display: block; width: 50%;}
    .company_info_M > p {font-size: 0.5rem; width: 100%; height: 50%;}
    .company_info_M strong {margin: 0;}
    .company_info {display: none;} 
    /* Main */
} 



/* Mobile Device */

@media screen and (max-width: 767px) {
    
    
    /* 사이드 Header 안 요소 숨김 */
    .headBox {display: none;}
    

    .wrap {top: 0; left: 0; margin-left: 0; width: 100%;}
    /* 모바일 Header */
    .M_header {position: fixed; z-index: 4; display: block; padding: 5%; border-bottom: 1px solid rgba(55, 42, 0, 0.5); box-sizing: border-box; width: 100%; height: 100px background-color: #f5f2eb;}
    .M_logo {margin: 0 auto;}
    .M_logo img {width: 100%;}
    
    
    .M_btn {float: right; margin: -70px 0 0; padding-top: 5%; width: 40px;}
    .M_btn > button {display: block; width: 100%; height: auto; background-color: transparent; border: none;}
    .M_btn img:first-child {width: 100%; height: auto;}
    .M_btn img:last-child {display: none; position: absolute; top: 35px; left: 30px; z-index: 6; width: 32px; height: auto;}
    
    .M_gnbBox > li > p {font-size: 1.2rem;}
    .M_gnbBox > li > p:hover {color: #111;}
    .M_gnbBox > li > ul {display: none; margin: 30px 0; width: 100%; height: auto;}
    .M_gnbBox > li > ul > li {padding: 5%; box-sizing: border-box; text-align: center; line-height: 30px; width: 100%; height: auto;}
    .M_gnbBox > li > ul > li > a {font-size: 1.1rem;;}
    .M_gnbBox > li > ul > li > a:hover {color: #999;}
    
    .M_sns_icon {width: 60%;}
    .M_sns_icon > li {width: 35px;}
    
    /* 모바일 Contents 영역 */
    .contents {padding: 30px 0 80px 0;}
    .main {padding-top: 110px; float: none; margin: 0 10%; width: 80%; background-color: transparent;}
    h1 {margin: 40px auto 20px auto ; width: 50%;}
    .con {margin: 50px auto;}
    .con > h2 {width: 70%;}
    .M_mainImg {margin: auto; padding-bottom: 40px; display: block; width: 90%; height: auto;}
    .M_mainImg > img {width: 100%; height: auto;}
    .main > a {position: absolute; bottom: 0; margin-left: 0; left: 0; text-align: center; border: none; line-height: 40px; color: #fff; width: 50%; height: 40px; background-color: #111;}
    .main > a:nth-of-type(2) {right: 0; left: inherit; background-color: #111155; color:#fff;}
    .main > a:hover {background-color: #70c5bc;}
    .main form {display: none;}
    .line > div:first-child {position: absolute; top: -9px; left: 50%; margin-left: -1px; width: 2px; height: 20px; background-color: #111;}
    .line > div:last-child {display: none;}

    
    /* 모바일 bxslider */


    /* 모바일 footer 영역 */
    footer {padding: 20px; text-align: left; box-sizing: border-box; border-top: 1px solid rgba(55, 42, 0, 0.5); width: 100%; height: auto;}
    .categori {float: left; display: block; padding: 0 0 20px 0; width: 100%; height: auto;}
    .categori > ul > li {float: left; font-size: 0.8rem; text-align: center; width: 25%; height: auto;}
    .logo_footer {float: left; margin-left: 17px; width: 40%;}
    .logo_footer > a:first-child {display: none;}
    .logo_footer > a:last-child {display: block; width: 100%; height: auto;}
    .logo_footer > a:last-child img {width: 100%; height: auto;}
    .company_info_M {float: right; display: block; width: 50%;}
    .company_info_M > p {font-size: 0.5rem; width: 100%; height: 50%;}
    .company_info_M strong {margin: 0;}
    .company_info {display: none;} 


}