@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Sacramento&family=Nanum+Myeongjo&display=swap');







/*모바일*/

@media screen and (max-width:450px){

	*{background:url(../images/size.gif)no-repeat center top/100%;}
	#header ,section, #footer,.size_pop p{display:none;}
	
}

/*모바일, 태블릿*/

@media screen and (min-width:451px) and (max-width:1100px){
	
		*{background:url(../images/size.gif)no-repeat center top/100%;}
	#header ,section, #footer,.size_pop p{display:none;}
	
	
}



/*데스크탑*/
@media screen and (min-width:1100px){      

body,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,p,ol,table,th,tr,td,button,hr,a{margin:0; padding:0; 
	list-style:none; text-decoration:none;}
button{border:0; cursor:pointer;background:none;color:#026186;}
body{font-family:'Nanum Myeongjo','Covered By Your Grace', 'Sacramento', cursive;color:#026186;height:100%;}

#header{width:100%;height:100vh;background:url(../images/visual.jpg) no-repeat ;
	background-size:cover;background-color:rgba(240,146,165,0.9);}
h1{position:fixed;left:47%; z-index:2;}

.nav_menu,.nav_close{position:fixed;right:10px;top:5%;}
.nav_close{display:none;}

.gnb{width:100%; height:100vh; position:fixed;background:rgba(240,146,165,0.9);display:none;z-index:1;}
.gnb_wrap{width:1100px;height:100vh; margin:0 auto;padding-top:13%;text-align:center; }
.gnb_wrap>li{margin-bottom:35px;}
.gnb_wrap>li button{font-family:Sacramento; font-size:60px;}


.gnb_wrap li:nth-child(odd):hover{ transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( -370deg );}
.gnb_wrap li:nth-child(even):hover{transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( 370deg );}




.rsg p{font-size:180px;font-family:Covered By Your Grace; line-height:200px;letter-spacing:5px;}

.rsg p:nth-child(1){padding:13% 0 0 245px;}
.rsg p:nth-child(2){padding-left:15%;}
.rsg p:nth-child(3){padding-left:17%;}

#container{width:100%;  overflow:hidden; }
#container h2{height:120px; padding-top:130px; font-family:Sacramento;font-size:72px;}
#container .port_wrap h2{padding-left:30px;}


.aboutme{  width:100%;height:100vh; background:url(../images/aboutme.jpg) no-repeat center top fixed;
	background-size:cover;}
.aboutme_wrap h2,.webskill_wrap h2{background:url(../images/nameback.png)no-repeat 0 100px;}
.aboutme_wrap,.edu_license_wrap,.webskill_wrap,.port1_wrap,.port2_wrap{width:1100px; margin:0 auto;}

.aboutme_wrap>ul li{font-family:Nanum+Myeongjo;line-height:30px;}

.aboutme_wrap ul li:nth-child(1){margin:10px 0 30px 0; }
.aboutme_wrap ul li:nth-child(2){margin-bottom:30px;}
.aboutme_wrap ul li h3{font-size:30px;margin-bottom:25px;}


.edu_license{
	width:100%; height:100vh; background:url(../images/edu.gif)no-repeat center top;background-color:#f092a5;background-size:cover;}
.edu_license_wrap h2,.port_wrap h2{background:url(../images/eduback.png)no-repeat 0 100px;}
.edu_license_wrap h3{font-size:24px;margin-bottom:10px;}
.edu{ width:700px;  margin-top:95px; margin-left:500px; } 
.license{ width:600px; margin-left:500px; }
.edu ul li{margin:0 0 5px 10px;}

.edu ul li strong{display:block;margin-bottom:5px;font-size:18px;}
.edu ul li p{line-height:24px;}
.edu ul li p:last-child{margin-left:20px;}
.edu ul li:last-child p:last-child{margin-bottom:20px;}

.license table{border-collapse:collapse;}
.license thead th{width:480px; height:40px;border-bottom:1px solid #026186;}
.license tbody{text-align:center;}
.license tbody td{line-height:24px;padding-top:5px;}



.aboutme_wrap>ul{ margin: 500px 0 0 -100%; }
.edu,.license{ margin: 32% 0 0 150%; }





.webskill{clear:both; width:100%; height:100vh; background:url(../images/webskill.jpg)no-repeat center top fixed;background-size:cover;}
.webskill_wrap{width:1100px; margin:0 auto;}
.webskill_wrap>ul{line-height:28px;float:right;margin:30px 55px 0 0;}
.webskill_wrap>ul li:first-child{margin-bottom:40px;}
.webskill_wrap>ul h3{font-family:Sacramento; font-size:24px; margin-bottom:10px;letter-spacing:2px;}



.graph{width:550px; height:565px;}
.graph ul{width:537px; height:484px; background:url(../images/graph.png)no-repeat center top; overflow:hidden;}
.graph li{float:left;width:80px; height:560px;margin:0 10px;}
.graph li p:first-child{position:absolute;padding-top:515px;width:85px; height:40px;
text-align:center; margin:0 40px 0 40px;font-family:Sacramento;font-size:24px;}
.graph li:first-child img{margin:-8px 0 0 70px;}
.graph li:nth-child(2) img{margin:58px 0 0 40px;}
.graph li:nth-child(3) img{margin:3px 0 0 40px;}
.graph li:nth-child(4) img{margin:42px 0 0 40px;}
.graph li:last-child img{margin:82px 0 0 40px;}
.webskill_wrap>p:nth-of-type(1){margin-top:40px;}


.port{width:100%; height:100vh; background:url(../images/port1.gif)no-repeat center top;background-color:#f092a5;
    background-size:cover;
}
.port_wrap{width:1100px; margin:0 auto;}
.port_wrap h3{font-size:24px;position:absolute;}
.port_wrap img{display:block; margin-top:120px;}
.port_wrap>div:not(last-child){width:300px; float:left;margin:20px 60px 0 0;}


.kcc h3{margin:460px 0 0 55px;}
.showbox h3{margin:460px 0 0 80px;}
.showbox h3{margin:460px 0 0 76px;}
.ost h3{margin-top:460px;}
.port_go{width:162px; height:80px; margin:142px 0 20px 60px; background:url(../images/view.png)no-repeat center top;}
.port_go p{text-align:center;padding-top:24px;}
.port_go a,.port_go button{color:#026186;font-size:20px;font-family:Nanum Myeongjo;}







.showbox_layer, .mini_layer{
	z-index:2;position:fixed;left:50%; top:50%; width:1100px; height:800px; background:#fff;
	margin:-400px 0 0 -550px;
    overflow-y:scroll; display:none;}

.showbox_layer h4{margin:-105px 0 0 50px;}
.showbox_layer ul:nth-of-type(1){margin:-100px 0 0 590px; }
.showbox_layer ul:nth-of-type(1) li{height:65px; line-height:65px; margin:40px 0  0 40px; float:left;}
.showbox_layer ul:nth-of-type(1) li:first-child{margin-left:20px;}
.showbox_layer ul:nth-of-type(1) li a{color:#000;}



.showbox_layer button, .mini_layer button{display:block; width:50px; height:30px;  
	font-family:Nanum Myeongjo; color:#000;float:right; margin:0 50px 30px 0;}

.showbox_layer button{border: 2px solid #ff5800;}
.mini_layer button{border: 2px solid #fbd600;}



.showbox_layer>p:nth-of-type(1){clear:both; width:980px; height:240px; margin:70px auto 0 auto;text-align:center;
	border-top:1px solid #ff5800;  border-bottom:1px solid #ff5800; box-sizing:border-box;
	padding:60px 0; font-size:20px; line-height:30px; color:#000;}
.showbox_layer>p:nth-of-type(2){width:980px;height:285px; margin-left:60px; border-bottom:1px solid #ff5800; 
	box-sizing:border-box;}
.showbox_layer>p:nth-of-type(2) img{display:inline-block; margin:20px 0 20px 300px;padding:35px 0; 
}


.text{width:980px;margin:0 auto;}

.text li{width:480px;}

.text h5{font-size:30px; color:#000; margin:70px 0 50px 0 ;text-align:center;}
.text li:first-child{float:left; }
.text li:last-child{float:right;}

.text p:nth-of-type(1){height:140px; text-align:center;line-height:24px; color:#000;
margin-bottom:80px;}
.text>p:nth-of-type(2){width:980px; margin:0 auto; }
.text p:nth-of-type(2) img{display:inline-block; margin:-30px 0 0 50px; 
	padding-bottom:60px; }


.motion p:first-child img{display:block; width:980px; margin:0 auto 70px auto; padding-top:70px;
border-top:1px solid #ff5800; box-sizing:border-box;}
.motion p:last-child img{display:block; width:980px; margin:0 auto; border-top:1px solid #ff5800; 
	box-sizing:border-box;padding-top:70px; }



.mini_layer h4{margin:-100px 0 0 40px;}
.mini_layer ul:nth-of-type(1){margin:-100px 0 0 600px; }
.mini_layer ul:nth-of-type(1) li{height:65px; line-height:65px; margin:40px 0  0 40px; float:left;}
.mini_layer ul:nth-of-type(1) li:first-child{margin-left:20px;}
.mini_layer ul:nth-of-type(1) li a{color:#000;}

.mini_layer>p:nth-of-type(1){clear:both; width:980px; height:240px; margin:0 auto;text-align:center;
	border-top:1px solid #fbd600;  border-bottom:1px solid #fbd600; box-sizing:border-box;
	padding:45px 0; font-size:20px; line-height:30px; color:#000;}
.mini_layer>p:nth-of-type(2){width:980px;height:285px; margin-left:60px; border-bottom:1px solid #fbd600; 
	box-sizing:border-box;}
.mini_layer>p:nth-of-type(2) img{display:inline-block; margin:20px 0 20px 300px;padding:35px 0; 
}


.text_mini{width:980px;margin:0 auto;}
.text_mini li{width:490px;}
.text_mini h5{font-size:30px; color:#000; margin:70px 0 50px 0 ;text-align:center;}
.text_mini li:first-child{float:left; }
.text_mini li:last-child{float:right;}

.text_mini p:nth-of-type(1){height:140px; text-align:center;line-height:24px; color:#000;
margin-bottom:80px;}
.text_mini>p:nth-of-type(2){width:980px; margin:0 auto; }
.text_mini p:nth-of-type(2) img{display:inline-block; margin:-30px 0 0 5px; 
	padding-bottom:60px;}

.color{padding-left:25px;}

.motion_mini p:first-child img{display:block; width:980px; margin:0 auto 70px auto; padding-top:70px;
border-top:1px solid #fbd600; box-sizing:border-box;}
.motion_mini p:last-child img{display:block; width:980px; margin:0 auto; border-top:1px solid #fbd600; 
	box-sizing:border-box;padding-top:70px; }



.contactme{width:100%; height:100vh; background:url(../images/contactme.jpg)no-repeat center top;background-color:#f092a5; 
    background-size:cover;}
.contactme_wrap{width:1100px; margin:0 auto;}
.contactme_wrap h3{display:none;}

	.thank{font-family:Covered By Your Grace;  padding-top:35%; }

.thank>div{width:100%; font-size:120px;}
	
	span{ margin-left:-30px; font-weight:bold;}
.thank>div:first-child span:nth-child(8){margin-right:20px;}
.thank>div:first-child{margin-left:280px;}
.thank>div:nth-of-type(2){padding-bottom:10px;margin-left:375px; }



	


.thank p{clear:both;font-size:30px;padding-left:70px;line-height:45px;letter-spacing:2px;
text-align:center;}


#container>p{width:65px; height:65px;position:fixed; left:50%; bottom:50px; margin-left:800px; }



.size_pop{position:fixed; left:0; top:0; width:1100px; height:1024px; margin:0 auto;background:url(../images/size_pop.gif)no-repeat center top;
display:none;}
.size_pop>p:nth-child(1){position:fixed; left:50%;}
.size_pop>p:nth-child(2){width:1100px; padding-top:150px; 
	text-align:center;}
.size_pop strong{font-family:Sacramento; font-size:72px;}
.size_pop p:last-child{width:1100px; text-align:center; font-size:20px; line-height:30px;
}

	
	
#footer{width:100%;background:#f092a5;}
#footer_wrap{width:1100px; margin:0 auto;;}
#footer p{text-align:center;font-family:Sacramento;font-size:24px;}

	
	
	
}