@charset "utf-8";
@import url("conveted/notokr-regular/stylesheet.css");
@import url("conveted/NotoKR-Bold/stylesheet.css");
@import url("conveted/notokr-thin/stylesheet.css");

/* CSS Document */


*{margin:0; padding:0;}
li{list-style:none; float:left;}
a{text-decoration:none; color:#333;}
img{vertical-align:top;}
h2{width:0; height:0; position:absolute; left:-9999px; line-height:0; overflow:hidden;}
body { font-family:notokr-regular;}



.border{width:100%;}

.wrap1{width:1600px; margin:0 auto; position:relative;}
.wrap2{width:1400px; margin:0 auto; position:relative;}
div:after, .wrap:after, .wrap2:after, ul:after{content:""; clear:both; display:block; height:0; visibility:hidden;}
header{position:absolute; top:60px; left:50%; margin-left:-800px; width:1600px; height:85px; background:rgba(0,0,0,0.4); z-index:999; }
header h1{padding:20px;}
header #gnb{position:absolute; top:35px; margin-left:31%;}
header #gnb li{float:left; font-size:16px; margin-right:90px; font-family:notokr-regular;}
header #gnb a{color:#fff;}

header #snb{position:absolute; right:30px; top:40px;}
header #snb li{float:left; font-size:11px; color:#999;  margin-left:10px; font-family:notokr-regular;}
header #snb a{color:#999;} 

header hr{position:absolute; width:100px; border:2px solid #ff7575; top:81px; left:0; opacity:0; }

/* 메인시작 */

#main { position:relative; overflow:hidden; text-align:center; }
#main .slide { position:absolute; left:0; top:0; width:100%; }
#main .slide div { position:absolute; top:0; width:100%; height:100%; display:block; background-repeat:no-repeat; background-position:center;}
#main #page { position:absolute; bottom:100px; left:50%; }
#main #page li { width:10px; height:10px; margin-right:20px; border:2px solid #fff; border-radius:15px; float:left; opacity:0.3; cursor:pointer; }
#main #page li:last-child { margin-right:0; }
#main #page li.select { background:#fff; opacity:1; }
#main figure{padding-top:323px;}
#main p{font-size:60px; color:#fff; font-family:notokr-thin; letter-spacing:10px; padding-bottom:25px;}
#main span{font-size:18px; color:#fff; font-family:notokr-thin; letter-spacing:5px;} 

#main .prev { position:absolute; left:30px; top:510px; opacity:0; transition:0.3s;}
#main .next { position:absolute; right:30px; top:510px; opacity:0; transition:0.3s;}
#main:hover .prev, #main:hover .next { opacity:1; }


/*
#main{position:relative; height:970px; text-align:center; }
#main .slide{position:absolute; left:0; top:0; width:300%; overflow:hidden;}
#main .slide div{width:calc(100%/3); height:970px; float:left;}
#main .slide .bg1{background:url(images/background1.jpg);}
#main .slide .bg2{background:url(images/background2.jpg);}
#main .slide .bg3{background:url(images/background3.jpg);}
#main figure{padding-top:323px;}
#main p{font-size:60px; color:#fff; font-family:notokr-thin; letter-spacing:10px; padding-bottom:25px;}
#main span{font-size:18px; color:#fff; font-family:notokr-thin; letter-spacing:5px;} 
#main .prev {position:absolute; left:30px; top:510px; }
#main .next {position:absolute; right:30px; top:510px;}
#main ul li .select{ background:#fff; }
#main ul{width:92px; bottom: 100px; left:50%; margin-left:-46px; position:absolute;}
#main li {width:10px; height:10px; margin-right:25px; border:2px solid #fff; border-radius:150px;}
#main li a{width:10px; height:10px; display:block;}
#main li:last-child{margin-right:0;}
*/

/* 메인끝 */

/* 메인바로 밑 섹션 시작 */

#cont1{height:575px;}
#cont1 .wrap2{height:530px; margin-left:260px; position:absolute; top:920px;}
#cont1 #background{width:700px; height:530px; background:#fff; float:left;}
#cont1 #background1{width:700px; height:530px; background:#f5f5f5; position:absolute; right:0;}
#cont1 dl{position:absolute; top:260px; left:160px; opacity:0;}
#cont1 dl dt{font-size:36px; font-weight:bold; font-family:notokr-regular; line-height:1.2;}
#cont1 dl dd{font-size:14px; font-family:notokr-regular; letter-spacing:1px; line-height:1.5; margin-top:25px;}
#cont1 a{margin-top:80px; width:120px; height:30px; background:#e09b77; color:#fff; font-size:12px; font-weight:500; font-family:notokr-regular; display:block; text-align:center; line-height:30px; border-radius:150px; letter-spacing:1px; opacity:0;} 
#cont1 .text1{position:absolute; top:310px; left:50px; opacity:0;}
#cont1 .text2{position:absolute; top:285px; right:95px; opacity:0;}  
#cont1 .text3{position:absolute; right:120px; top:105px; opacity:0;}
#cont1 #bacground{background:#fff;width:700px; height:530px;}
#cont1 #border{position:absolute; top:220px; left:85px; border:10px solid #f5f5f5; width:280px; height:280px; opacity:0;  }



/* 메인 바로 밑 섹션 끝 */

/* 커리큘럼 시작 */

#curri{height:720px; text-align:center; }
#curri .slash1 { margin-top:40px; opacity:0;}
#curri .slash2 { margin-bottom:40px;  opacity:0;}
#curri > p{font-size:30px; font-family:notokr-thin; letter-spacing:1.5px; margin-top:30px; opacity:0;} 
#curri span{font-size:30px; font-weight:bold; font-family:notokr-regular; letter-spacing:3px; margin-bottom:30px; display:block; opacity:0;}
#curri ul{position:absolute; top:400px; padding-left:20px; opacity:0; }
#curri li{margin-right:30px;}
#curri li:last-child{margin-right:0;}
#curri li p{font-size:14px; color:#666; margin-bottom:30px; font-family:notokr-regular;}
#curri dt{font-size:24px; font-weight:bold; font-family:notokr-regular; margin-bottom:30px;}
#curri dd{font-size:14px; font-family:NotoKR-Light; line-height:1.5;}

/* 커리큘럼 시작 */

/* 헤어디자인 시작 */

#design{ text-align:center; height:1050px; position:relative;}
#design figure{opacity:0;}
#design figure img {margin-top:65px; }
#design figure p {text-align:center; font-size:30px; font-weight:bold; letter-spacing:2px; font-family:notokr-regular; }
#design hr{width:170px; margin:0 auto; border:1px solid #000; margin-bottom:40px; margin-top:10px; }
#design .dwrap { margin-bottom:40px; width:100%; height:640px; overflow:hidden; position:relative; }
#design .dwrap div{background:rgb(102,19,21);}
#design dt, #design dd{position:relative; top:30px;}

#hippie{opacity:0; position:absolute; left:0px; top:0;}
#bold{opacity:0; position:absolute; top:0px; left:640px;}
#volume{position:absolute; top:320px; left:640px; opacity:0;}
#part{position:absolute; top:0; left:960px; opacity:0;}
#lovely{position:absolute; top:0; left:1280px; opacity:0;}


#design #hippie a{position:absolute; width:620px; height:620px; left:10px; top:10px; border:1px solid #fff; opacity:0;}
#design #bold a{position:absolute; width:300px; height:300px; left:10px; top:10px; border:1px solid #fff; opacity:0;}
#design #volume a{position:absolute; width:300px; height:300px; left:10px; top:10px; border:1px solid #fff; opacity:0;}
#design #part a{position:absolute; width:300px; height:620px; left:10px; top:10px; border:1px solid #fff; opacity:0;}
#design #lovely a{position:absolute; width:600px; height:620px; left:10px; top:10px; border:1px solid #fff; opacity:0;}


#design #hippie dl, #design #lovely dl, #design #part dl{position:absolute; color:#fff; top:230px; width:100%; margin:0 auto; width: 100%;}
#design #bold dl, #design #volume dl{ position:absolute; color:#fff; top:100px; width:100%; margin:0 auto;}

#design #hippie p, #design #lovely p, #design #part p{ position:absolute; font-size:15px; font-family:NotoKR-Light; color:#fff; width:100%; top:370px; line-height:1.8;}
#design #bold p, #design #volume p{ position:absolute; font-size:14px; font-family:NotoKR-Light; color:#fff; top:180px; width:100%; line-height:1.5;}

#design #hippie dt, #design #part dt, #design #lovely dt{font-size:30px; font-family:notokr-regular; margin-bottom:10px;}
#design #hippie dd, #design #part dd, #design #lovely dd{font-size:24px; font-family:notokr-regular;}

#design span{font-size:18px; width:10px; font-family:notokr-regular; opacity:0;}
#design > a{width:100px; height:25px; background:#000; color:#fff; font-size:12px; display:block; line-height:25px; margin:0 auto; margin-top:25px; opacity:0;}

/* 헤어디자인 끝 */

/* 디자이너 소개 시작 */

#profile{height:850px; text-align:center; }
#profile figure{opacity:0;}
#profile .slash1 { margin-top:40px;}
#profile .slash2 { padding-bottom:40px; display:block; margin:0 auto;}
#profile figure p{font-size:30px; font-family:notokr-thin; letter-spacing:1.5px; margin-top:30px;} 
#profile span{font-size:30px; font-weight:bold; font-family:notokr-regular; letter-spacing:3px; margin-bottom:30px; display:block;}
#profile #name{ position:absolute; left:-100px; background:#000 url(images/designer.jpg) no-repeat right; position:relative; width:50%; opacity:0;}
#profile > div{float:left; height:529px;}
#profile ul{width:467px; padding:70px 0 0 300px; }
#profile ul li{ width:148px; height:60px; border:1px solid #444; line-height:60px; text-align:center;  margin-right:8px;}
#profile ul li a{color:#ccc; font-size:14px; font-family:notokr-regular; width:148px; height:60px; display:block;}
#profile ul li:nth-child(3n){margin-right:0; margin-bottom:18px;}

#profile #port{position:relative; right:-100px; width:50%; height:529px; font-family:notokr-regular; overflow:hidden; opacity:0;}
#profile #port div{opacity:0; position:absolute; width:100%; height:529px;}
#profile #port .zin{z-index:1;}
#profile #port #designer1{opacity:1;}
#profile #port h1{position:absolute; top:50px; left:70px; font-size:24px; color:#fff; font-weight:normal;}
#profile #port span{position:absolute; top:60px; left:170px; font-size:16px; color:#fff; font-weight:normal; }
#profile #port p{position:absolute; left:70px; top:100px; text-align:left; color:rgba(255,255,255,0.6); line-height:1.5; font-size:14px; font-family:notokr-regular;}
#profile #port img {width:100%;}
#profile #port dl{position:absolute; left:70px; top:270px; text-align:left;}
#profile #port dt{font-size:18px; color:#fff; margin-bottom:25px;}
#profile #port dd{color:rgba(255,255,255,0.6); font-size:14px; line-height:1.5; font-family:notokr-regular; }

#profile li a.select{border:4px solid #c59670; color:#CC9B73; text-align:center; line-height:54px; width:142px; height:54px;}
/* 디자이너 소개 끝 */

/* 공지 시작 */

#notice {height:500px; position:relative; font-family:notokr-regular; background:url(images/background4.jpg) no-repeat top; margin-top:50px;}
#notice .wrap2{ position:absolute; top:90px; left:260px; height:380px; background:#f5f5f5;}
#notice .wrap2 > div{position:relative; float:left; width:400px; border-top:2px solid #000; margin-left:50px;margin-top:50px;}

#notice p{font-size:15px; color:#333; margin:17px auto 30px; font-family:notokr-regular;}
#notice .wrap2 div > a{position:absolute; right:0; top:0; font-size:11px; color:#bbb; font-family:"돋움"; margin:20px auto 30px;}
#notice #talent div{position:relative;background:#13324f; padding-top:20px; height:180px; text-align:center; color:#fff;}
#notice #talent dl{ position:absolute; border:1px solid #fff; width:380px; height:180px; top:10px; left:10px;}
#notice #talent dl dt{font-size:30px; margin-top:15px; margin-bottom:20px;}
#notice #talent dl dd{font-size:16px;}
#notice #talent dl a{width:65px; height:20px; border:1px solid #fff; display:block; color:#fff; font-size:12px; margin:25px auto 0;}

#notice #join div{position:relative; background:#cfc7b0;padding-top:20px; height:180px; text-align:center; color:#fff;}
#notice #join dl{ position:absolute; border:1px solid #fff; width:380px; height:180px; top:10px; left:10px; }
#notice #join dl dt{font-size:30px; margin-top:15px; margin-bottom:20px;}
#notice #join dl dd{font-size:16px;}
#notice #join dl a{width:65px; height:20px; border:1px solid #fff; display:block; color:#fff; font-size:12px; margin:25px auto 0;}

#notice #inquiry div{position:relative; background:#454545;  padding-top:20px; height:180px; text-align:center; color:#fff;}
#notice #inquiry dl{ position:absolute; border:1px solid #fff; width:380px; height:180px; top:10px; left:10px; }
#notice #inquiry dl dt{font-size:30px; margin-top:15px; margin-bottom:20px;}
#notice #inquiry dl dd{font-size:16px;}
#notice #inquiry dl a{width:65px; height:20px; border:1px solid #fff; display:block; color:#fff; font-size:12px; margin:25px auto 0;}

/* 공지 끝 */

footer{background:#515151; height:200px;}
footer h1{position:absolute; top:40px;}
footer p{position:absolute; font-size:12px;  font-family:notokr-regular; font-weight:bold; letter-spacing:4px; color:#fff; top:80px; left:20px;}
footer address{font-style:normal; font-family:"돋움"; font-size:12px; letter-spacing:2px; color:#fff; position:absolute; top:40px; left:370px; line-height:2;}
footer .wrap2 > img{position:absolute; right:0; top:40px;}

#qm{position:fixed; right:50px; top:70%; z-index:999;}
#qm li{float:none; width:13px; height:7px; text-align:center; margin:15px auto 0; background:#ccc;   }
#qm li a{width:13px; height:7px; display:block;}
#qm li:last-child{margin-bottom:20px;}
#qm .btn{background:#ff8484; opacity:1;}

/* 서브1 */
#sub1_main{height:660px; text-align:center; }
#sub1_main div{width:100%; height:600px;}
#sub1_main div p{font-size:60px; color:#fff; font-family:notokr-thin; letter-spacing:10px; padding-bottom:25px; padding-top:330px;}
#sub1_main span{font-size:18px; color:#fff; font-family:notokr-thin; letter-spacing:5px;}
#sub1_main > p{ margin:20px auto 5px; font-size:18px; font-family:notokr-regular; width:180px; height:25px; line-height:25px; border-left:1px solid #333; border-right:1px solid #333;}

#text { margin-top:100px; text-align:center; }
#text div img{margin:90px 0 70px; opacity:0;}
#text div dl dt{font-size:24px; margin-bottom:20px; line-height:1.8; opacity:0;}
#text div dl dd{font-size:14px; color:#999;  line-height:1.8; margin-bottom:50px; opacity:0;}

#hair_menu{margin:0 auto; height:850px; opacity:0;}
#hair_menu ul li a{display:block; border:2px solid #333;}
#hair_menu li{width:160px; height:42px; text-align:center; line-height:42px; margin:50px 12px  60px 0;}
#hair_menu li:last-child{margin-right:0;}
#hair_menu li a.select{border:2px solid #c49770; color:#c49770;}
#hair_menu img{float:left;  width:calc(100%/3); }

#hair_menu > div {opacity:0; position:absolute;}
#hair_menu > div.zin{z-index:1;}
#hair_menu #sub_bold{opacity:1;}
#hair_menu #explain{text-align:center; width:640px; position:absolute; top:70px; left:50%; margin-left:-320px; color:#fff;}

#hair_menu #explain p{font-size:72px; font-weight:bold;}
#hair_menu #explain span{font-size:18px;}
#hair_menu #explain dt{font-size:16px; margin:45px auto; width:290px; height:30px; background:rgba(0,0,0,0.4); line-height:30px; }
#hair_menu #explain dd{font-size:18px; line-height:2; margin-bottom:40px;}
#hair_menu #explain h1{font-size:36px; font-family: 'NanumSquare' }

#scalp{height:1550px;}
#scalp .wrap2 > h1{font-size:60px; letter-spacing:3px; font-weight:bold; margin-top:130px; margin-left:-5px;}
#scalp .wrap2 > h1 span{color:#c49770; font-weight:normal;} 
#scalp .wrap2 > p{font-size:18px; margin-bottom:30px;}
#scalp .wrap2 > p span{font-size:14px;  margin-left:10px;}
#scalp .wrap2 > hr{position:absolute; border:1px solid #333; width:280px; left:210px; top:96px;}

#scalp #scaling{margin-top:60px;}
#scalp #scaling hr{width:60px; height:3px; border:1px solid #c49770; background:#c49770; }
#scalp #scaling h1{font-size:36px; font-weight:bold; margin-bottom:20px;}
#scalp #scaling h1 span{font-size:14px; margin-left:10px; font-weight:normal;}
#scalp #scaling p{font-size:14px; letter-spacing:2px;}
#scalp #scaling ul{text-align:center; border-top:2px solid #333; border-bottom:1px solid #ccc; margin-top:20px;}
#scalp #scaling ul li{width:348px; height:38px; line-height:38px; border-top:1px solid #666; border-right:1px dotted #999;}
#scalp #scaling ul li:nth-child(4n){border-right:none;}

#scalp #care{margin-top:45px;}
#scalp #care hr{width:60px; height:3px; border:1px solid #c49770; background:#c49770; }
#scalp #care h1{font-size:36px; font-weight:bold; margin-bottom:20px;}
#scalp #care h1 span{font-size:14px; margin-left:10px; font-weight:normal;}
#scalp #care p{font-size:14px; letter-spacing:2px;}
#scalp #care ul{text-align:center; border-top:2px solid #333; border-bottom:1px solid #ccc; margin-top:20px;}
#scalp #care ul li{width:348px; height:38px; line-height:38px; border-top:1px solid #666; border-right:1px dotted #999;}
#scalp #care ul li:nth-child(4n){border-right:none;}

#scalp #deep{margin-top:45px;}
#scalp #deep hr{width:60px; height:3px; border:1px solid #c49770; background:#c49770; }
#scalp #deep h1{font-size:36px; font-weight:bold; margin-bottom:20px;}
#scalp #deep h1 span{font-size:14px; margin-left:10px; font-weight:normal;}
#scalp #deep p{font-size:14px; letter-spacing:2px;}
#scalp #deep ul{text-align:center; border-top:2px solid #333; border-bottom:1px solid #ccc; margin-top:20px;}
#scalp #deep ul li{width:348px; height:38px; line-height:38px; border-top:1px solid #666; border-right:1px dotted #999;}
#scalp #deep ul li:nth-child(4n){border-right:none;}

#chart {height:2200px;}
#chart .wrap2 > h1{font-size:60px; letter-spacing:3px; font-weight:bold; margin-top:130px; margin-left:-5px;}
#chart .wrap2 > h1 span{color:#c49770; font-weight:normal; margin-right:20px; }  
#chart .wrap2 > p{font-size:16px; margin-bottom:30px; letter-spacing:1px;}
#chart .notice{margin:80px 0 25px 0; font-size:12px; width:600px; height:25px; background:#000; color:#fff; line-height:25px; }
#chart #type{text-align:center; border-top:2px solid #333; border-bottom:1px solid #ccc; margin-top:20px; margin-bottom:135px;}
#chart #type li{width:348px; height:38px; line-height:38px; border-top:1px solid #666; border-right:1px dotted #999;}
#chart #type li:nth-child(4n){border-right:none;}