/* 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-manwig-size {width:1100px; margin:0px auto 100px auto; position:relative; }
.guide-manwig-size .title { width:100%; display:inline-block;text-align:center;}
.guide-manwig-size .title .t01 { font-family: 'Noto Serif KR', serif; font-size:35px; font-weight:600; color:#333; display:inline-block; width:500px; line-height:90px; letter-spacing:-1px;}
.guide-manwig-size .title .d01 { display:inline-block; padding-right:20px; }
.guide-manwig-size .title .d02 { font-family: 'Noto Sans KR', serif; font-size:20px; font-weight:300; color:#666; display:inline-block; margin:auto 10px; line-height:33px; text-align:center;}



.guide-bang01 {width:1100px; margin:100px auto; position:relative; font-family: 'Noto Sans KR', serif; }
.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:18px 30px 0 0;}
.guide-bang01 .document .d02 { font-size:20px; font-weight:300; color:#666; display:inline-block; padding-top:20px; line-height:33px;}
.guide-bang01 .document .d03 { font-size:20px; font-weight:300; color:#666; display:inline-block; line-height:33px; width:750px; vertical-align:top;}

.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; 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:20px 0 50px 0; line-height:30px; width:100%;}
.guide-bang02 .document .allway { width:100%;display:inline-block; padding-top:40px;}
.guide-bang02 .document .allway li {width:250px; display:inline-block; margin:10px; vertical-align:top;}
.guide-bang02 .document .allway li p { margin-top:10px; font-family: 'Noto Sans KR', serif; font-size:17px; color:#333; font-weight:300; text-align:center;}

.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 .skin-kind{width:100%; text-align:center; display:inline-block; padding-top:50px;}
.guide-bang03 .skin-kind>li{display:inline-block;text-align:center; width:200px; height:200px;border-radius:100px; background:#f9f9f9; margin-left:60px; }
.guide-bang03 .skin-kind>li>img {margin-top:27px;}
.guide-bang03 .skin-kind>span{padding:10px 0 0 50px; margin:50px 60px 0 -30px; font-size:17px; color:#333; font-weight:500;display:inline-block; text-align:right; border-top:1px dashed #999; vertical-align:top;}


.guide-bang03 .skin { display:none;border:1px solid #999; margin-top:-1px;width:1094px; background:#f9f9f9;text-align:center;padding:40px 0;}
.guide-bang03 .skin .product01 { text-align:center; display:inline-block;}
.guide-bang03 .skin .product01>li{ width:300px; display:inline-block;  vertical-align:top;padding:20px;}
.guide-bang03 .skin .product01>li>ul>li {text-align:left;position:relative;}
.guide-bang03 .skin .product01 ul .guide-prd-img a img{ width:300px; height:300px; background:#666;}
.guide-bang03 .skin .product01 ul .guide-prd-best>img { position:absolute; text-align:left; z-index:10}
.guide-bang03 .skin .product01 ul .guide-prd-skin>img { position:absolute; right:0; width:65px; height:65px; margin-top:10px; z-index:1}
.guide-bang03 .skin .product01 h2 { font-family: 'Nanum Gothic', sans-serif; font-weight:700; padding:70px 0 10px 0; color:#333; font-size:23px;}
.guide-bang03 .skin .product01 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;}
.guide-prd04{font-family: 'Nanum Gothic', sans-serif; font-size:13px; color:#888; padding-top:5px; line-height:20px; border-top:1px dotted #ccc; margin-top:10px;}

.top-prd{width:100%;  margin-top:70px;font-size: 0;}
input[type="radio"] {display:none; }
input[type="radio"] + label {display:inline-block; padding:15px 0; cursor:pointer; font-family: 'Noto Sans KR', serif; font-size:18px; ; font-weight:300; color:#666; border:1px solid #eee; border-bottom-color:#999;width:273px; margin-right:-1px;text-align:center; border-radius:10px 10px 0 0;}
input[type="radio"]:checked + label {border-bottom:1px solid #f9f9f9; background:#f9f9f9; color:#333; font-weight:400; border-radius:10px 10px 0 0; font-size:19px; border-left-color:#999;border-top-color:#999;border-right-color:#999; box-sizing:border-box; margin-right:0px;}
input[id="top01"]:checked ~ .tab01{display:block; background:#f9f9f9; }
input[id="top02"]:checked ~ .tab02{display:block;background:#f9f9f9;}
input[id="top03"]:checked ~ .tab03{display:block;background:#f9f9f9;}
input[id="top04"]:checked ~ .tab04{display:block;background:#f9f9f9; width:1093px;}


.top-hg {width:1100px; text-align:center; padding-bottom:70px; margin:0 auto; background:#f9f9f9;}
.top-hg .d03 {font-size:30px; font-weight:300; color:#333; display:inline-block; width:270px; line-height:60px; margin:70px auto 20px auto; border:1px dashed #aaa; border-radius:10px;}
.top-hg .d04 {font-size:20px; font-weight:300; color:#555; display:inline-block; margin:auto 10px; line-height:33px; text-align:center;}
.top-hg .d05 { font-size:18px; font-weight:300; color:#666; line-height:25px; margin-bottom:20px;}

.top-hg>ul>li>img{padding:20px;}
.top-hg>ul { font-family: 'Noto Sans KR', serif; width:100%; display:inline-block; }
.top-hg .h1 { font-size:30px; font-weight:300; color:#333; display:inline-block; width:290px; line-height:60px; margin:70px auto 20px auto; border:1px dashed #aaa; border-radius:10px;}
.top-hg .h2 { font-size:18px; font-weight:300; color:#666; line-height:25px; margin-bottom:20px;}
.top-hg .pt li { width:240px; display:inline-block; padding:20px 10px 10px 10px;}
.top-hg .pt li img{ width:240px; height:240px;}
.top-hg .pl li { width:240px; display:inline-block; padding:0 10px;}
.top-hg .pl li span {left:0; font-size:18px; font-weight:500; width:65px; line-height:30px; display:inline-block; background:#333; color:#ffcccc;}
.top-hg .pl li p { font-size:17px; font-weight:300; width:165px; line-height:35px; display:inline-block; color:#333; text-align:left;padding-left:10px;}
/* BASIC css end */