@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/lotteBoldd41d.eot?#idfix') format('embedded-opentype'),
    url('../font/lotteBold.ttf') format('truetype');
} 

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: 40px; width: 65%;}
.gnb > ul > li {width: 100%;}
.gnb > ul > li > img {vertical-align: right; width: 100%;}
.gnb > ul > li > a > img {vertical-align: right; width: 100%;}


/* .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%;} 
.con_box ul > li > p > span {font-weight: normal;} 
.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: 0 auto; width: 150px;}
    .M_logo img {width: 100%;}
       
    .M_btn {float: right; margin: -90px 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; width: 150px;}
    .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;} 


}