/* BASIC css start */
@import url('https://fonts.googleapis.com/css?family=Cardo|Rozha+One|Lora:400,700|Black+Han+Sans|Do+Hyeon|Nanum+Gothic:400,700,800|Nanum+Myeongjo:400,700,800|Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');

.tip-top{width:100%; height:450px; position:relative; background:#f2f2f0;}
.tip-top span{width:1100px; height:250px; position:relative; margin:0 auto; display:block;}
.tip-menu {position:relative; width:1100px; height:200px; display:block; margin:0 auto; background-image:url('http://miraehair.cafe24.com/wig/guide_top_bg02.jpg')}
.tip-menu ul {width:100%; height:100%; display:block;}
.tip-menu ul li {position:relative;width:150px;height:150px;display:inline-block;margin:15px 25px 0 0;}
.card{width:100%;height:100%;transition:0.5s;position:absolute; transform-style:preserve-3d;}
.card:hover {transform:rotateY(180deg);}
.side {height:100%;width:100%;position:absolute;backface-visibility:hidden;}
.back {transform:rotateY(180deg);}

.tip-title {width:1100px; padding-top:80px; text-align:center; margin:0 auto;}
.tip-title .red-box { width:90px; height:35px; background:#cc0000; display:block; position:relative; margin:0 auto; line-height:35px; color:#fff; font-weight:700; font-size:20px;}
.tip-title .menu-title {font-size:60px; font-family: 'Noto Sans KR', sans-serif; font-weight:300; color:#333; margin-top:5px; line-height:100px; letter-spacing:-3px;}
.tip-title .menu-title01 {font-size:20px; font-family: 'Noto Sans KR', sans-serif; color:#777; margin:0 auto; font-weight:300; letter-spacing:-1px; padding-bottom:30px;}

.guide-bang {width:1100px; height:60px; padding: 50px 0 20px 0; position:relative; margin:0 auto; text-align:center;}
.guide-bang ul{width:600px; height:100%; margin:0 auto;}
.guide-bang ul p {padding-top:20px;}
.guide-bang li {font-family: 'Noto Sans KR', sans-serif;display:block; font-size:20px; line-height:50px;font-weight:300; color:#666; }
.guide-bang li.active{ font-family: 'Noto Sans KR', sans-serif; font-size:40px; font-color:#333; font-weight:600; color:#333; display:inline-block; width:300px; height:50px;  line-height:60px;}
.guide-bang-img img{padding-top:50px; margin:0 auto; display:block;}
.font1 {font-size:12px;color:#b2c2b0;display:inline-block; width:20px; height:10px;}
.font2 {font-size:12px;color:#cdb6b6;display:inline-block; width:20px; height:10px;}
.font3 {font-size:12px;color:#b1b9c0;display:inline-block; width:20px; height:10px;}

.guide-back { float:right; width:160px; height:40px; }
input[id="another"] {display:none;}
input[id="another"]+label{ font-size:14px; font-family: 'Noto Sans KR', sans-serif; color:#333; position:relative; cursor:pointer; font-weight:500; border:1px solid #aaa; line-height:40px; width:158px;display:inline-block;transition: all 0.2s;}
input[id="another"]+label:hover{ background:#333; color:pink; margin-bottom:-1px; border:1px solid #333;}
input[id="another"]:checked+label{ background:#333;color:pink; margin-bottom:-1px; border:1px solid #333;}
input[id="another"]+label+div{ width:160px; position:absolute; transition: all .35s; overflow:hidden; max-height:0;}
input[id="another"]+label+div li a{border:1px solid #aaa; width:133px; font-size:13px;font-family: 'Noto Sans KR', sans-serif; font-weight:400; color:#333; margin-top:-1px; display:block; line-height:40px; text-align:left; padding-left:25px;transition: all 0.1s;}
input[id="another"]+label+div li a:hover {background:#aaa; color:#fff; font-weight:500;}
input[id="another"]+label+div li .active{ background:#eee;}
input[id="another"]:checked+label+div{max-height:400px;}
input[id="another"]:checked+label i{ transform:rotate(180deg); }
input[id="another"]+label i{ transform:rotate(0deg);transition: transform 0.2s;}

.guide-bang01 {width:1100px; margin:100px auto; position:relative;}
.guide-bang01 .title { width:100%; height:50px; border-bottom:1px solid #bbb; display:inline-block;}
.guide-bang01 .title .t01 { font-family: 'Rozha One', serif; font-size:40px; color:#333; display:inline-block; padding-right:10px;}
.guide-bang01 .title .t02 { font-family: 'Nanum Myeongjo', serif; font-size:20px; font-weight:400; color:#777; display:inline-block;}
.guide-bang01 .document { width:100%; display:inline-block; margin:auto 0;}
.guide-bang01 .document .d01 { display:inline-block; padding:20px 20px 0 0; }
.guide-bang01 .document .d02 { font-family: 'Noto Sans KR', serif; font-size:20px; font-weight:300; color:#666; display:inline-block; padding-top:20px; vertical-align:top; line-height:33px; width:900px;}

.guide-bang02 {width:1100px; margin:100px auto; position:relative;}
.guide-bang02 .title { width:100%; height:50px; border-bottom:1px solid #bbb; display:inline-block;}
.guide-bang02 .title .t01 { font-family: 'Rozha One', serif; font-size:40px; color:#333; display:inline-block; padding-right:10px;}
.guide-bang02 .title .t02 { font-family: 'Nanum Myeongjo', serif; font-size:20px; font-weight:400; color:#777; display:inline-block;}
.guide-bang02 .document { width:100%; display:inline-block; margin:auto 0; }
.guide-bang02 .document .d01 { display:block; margin:0 auto; text-align:center;}
.guide-bang02 .document .d02 { font-family: 'Noto Sans KR', serif; font-size:20px; font-weight:300; color:#666; display:inline-block; padding-top:20px; vertical-align:top; line-height:30px;}

.guide-bang03 {width:1100px; margin:100px auto; position:relative;}
.guide-bang03 .title { width:100%; height:50px; border-bottom:1px solid #bbb; display:inline-block;}
.guide-bang03 .title .t01 { font-family: 'Rozha One', serif; font-size:40px; color:#333; display:inline-block; padding-right:10px;}
.guide-bang03 .title .t02 { font-family: 'Nanum Myeongjo', serif; font-size:20px; font-weight:400; color:#777; display:inline-block;}
.guide-bang03 .document { width:100%; display:inline-block; margin:auto 0; }
.guide-bang03 .document .d01 { display:inline-block; }
.guide-bang03 .document .d02 { font-family: 'Noto Sans KR', serif; font-size:20px; font-weight:300; color:#666; display:inline-block; padding-top:20px; line-height:30px;}
.guide-bang03 .product { width:100%; text-align:center; display:inline-block; background:#f9f9f9; margin-top:50px;}
.guide-bang03 .product>li{ width:300px; display:inline-block; padding:40px 20px;}
.guide-bang03 .product>li>ul>li {text-align:left;}
.guide-bang03 .product ul .guide-prd-best>img { position:absolute; text-align:left;}
.guide-bang03 .product ul .guide-prd-img img{ width:300px; height:300px; background:#666;}
.guide-bang03 .product h2 { font-family: 'Nanum Gothic', sans-serif; font-weight:700; padding:70px 0 10px 0; color:#333; font-size:23px;}
.guide-bang03 .product h3 { font-family: 'Nanum Gothic', sans-serif; margin-bottom:20px; color:#666; font-size:15px; }

.guide-prd01{font-family: 'Nanum Gothic', sans-serif; font-weight:700; font-size:16px; color:#333; padding:10px 0 3px 0;}
.guide-prd02{font-family: 'Nanum Gothic', sans-serif; font-size:13px; color:#666;}
.guide-prd03{font-family: 'Nanum Gothic', sans-serif; font-weight:700; font-size:20px; color:#993333; padding-top:10px;}
/* BASIC css end */