/*전체화면 iframe */
#cyIframeFull{position:fixed;left:0px;top:0px;z-index:99999;width:100%;height:100%;background-color:rgba(0,0,0,0.5);}
#cyIframeDiv{position:fixed;left:0px;top:0px;z-index:999998;width:100%;height:100%; -webkit-overflow-scrolling:touch;  padding:5px 0px; text-align:center;}
#cyIframeDiv .box{width:100%; max-width:1000px; margin:0px auto; height:100%; position:relative; text-align:left;  overflow-y:auto;}
#cyIframeDiv iframe{width:100%;height:98.5%;  }
.cyIframeClose {display:inline-block;cursor:pointer;position:absolute;right: 15px;top: 15px;width: 45px;height: 45px;opacity: 0.7; z-index:999999; background-color:rgba(255,255,255,0.1);}
.cyIframeClose:hover {opacity: 1;}
.cyIframeClose:before, .cyIframeClose:after {position: absolute;left: 15px;content: ' ';height: 46px;width: 2px;background-color: #3eb4bb;}
.cyIframeClose:before {transform: rotate(45deg);}
.cyIframeClose:after {transform: rotate(-45deg);}
@media screen and (max-width:480px){
	.cyIframeClose {right: 15px;}
}



.bbb{padding-top:140px;}

h3{font-size:33px; color:#145252; text-align:center; padding:0px 20px; word-break:keep-all; line-height:1.5em;}
h3 b{color:#26c2d9; font-size:1.4em;}

@media screen and (max-width:1023px){
	h3{font-size:30px;}
	.bbb{padding-top:130px;}
}
@media screen and (max-width:859px){
	h3{font-size:28px;}
	.bbb{padding-top:110px;}
}

@media screen and (max-width:639px){
	h3{font-size:25px;}
	.bbb{padding-top:90px;}
}
@media screen and (max-width:479px){
	h3{font-size:22px;}
	.bbb{padding-top:70px;}
}



#mainFlash{background:url("./images/main_bg.jpg") no-repeat left top; background-size:100% auto; width:100%; position:relative;}
#mainFlash:before{content: "";display:block;padding-top:44.375%;  }
#contrainer{position:absolute;left:4.73958333333%;top:75.93896713615%; border:solid 1px red; padding:100px 10px 20px 10px; margin-top:-80px; font-family:"Russo one"; font-size:14pt;}
@media screen and (max-width:639px){
	#mainFlash{background:url("./images/main_bg3.jpg") no-repeat left top; background-size:100% auto; }
}
@media screen and (min-width:640px) and (max-width:1023px){
	#mainFlash{background:url("./images/main_bg2.jpg") no-repeat left top; background-size:100% auto; }
}
@media screen and (min-width:1024px) {
	#mainFlash{background:url("./images/main_bg.jpg") no-repeat left top; background-size:100% auto;}
}


@media screen and (max-width:1279px){
	#contrainer{ padding:90px 10px 20px 10px; margin-top:-70px; font-size:13pt;}
}
@media screen and (max-width:1023px){
	#mainFlash{border-bottom:solid 100px #fff; border-top:solid 50px #1fdcff;}
	#contrainer{ top:105%; padding:20px 100px 20px 20px; margin-top:0px; font-size:13pt;}
}
@media screen and (max-width:639px){
	#contrainer{ padding:15px 75px 15px 15px; font-size:12pt;}	
}
@media screen and (max-width:479px){
	#mainFlash{border-bottom:solid 50px #fff; border-top:solid 50px #1fdcff;}
	#contrainer{ padding:10px 50px 10px 10px; font-size:11pt;}		
}




#vrvr{width:100%; font-size:18px;}
#vrvr .max{overflow-x:visible; }
#vrvr .box{ width:85%; max-width:800px; position:relative; border:solid 1px #1a1a1a; margin:0px auto; box-sizing:border-box; overflow:visible;}
#vrvr .box:before{content: "";display:block;padding-top:75%;  }
#vrvr iframe{height:100%;width:10px; max-width:100%; min-width:100%; position:absolute;left:0px;top:0px;}

#vrvr p{font-size:1.1em; color:#145252; text-align:center; padding-top:10px; letter-spacing:1px; white-space:pre-line; word-break:kepp-all; line-height:1.5em;}
#vrvr .bb{width:100%; text-align:left; background-color:#f7f7f7; border-radius:5px; padding:30px 20px 20px 20px; max-width:800px; margin:30px auto; position:relative;}
#vrvr .bb label{position:absolute; left:0px; top:-20px; background-color:#333; color:#fff; display:inline-block; padding:15px; }
#vrvr .bb img{height:80px; margin:0px 15px;}

#vrvr .bb.mo{ margin-top:30px;padding-top:40px;}
#vrvr .bb.mo label{background-color:#f25657;}
#vrvr .bb.mo img{ height:70px;}


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

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

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

}
@media screen and (max-width:479px){
	#vrvr{ font-size:14px;}
	#vrvr p{ white-space:normal; word-break:keep-all;}
	#vrvr .bb img{height:60px; margin:0px 10px;}
	#vrvr .bb.mo img{ height:55px;}
}




#graph{background-color:#20dcff; margin-top:150px;}
#graph .max{position:relative; text-align:left; } 
#graph .img{display:inline-block; width:34%; vertical-align:top; max-width:300px; margin-right:1%;   }
#graph img{width:100%;height:auto;  position:relative; margin-top:-21.93732193732%;}
#graph .txt{ display:inline-block; width:64%; height:100%; line-height:2em; color:#fff; font-size:15pt; white-space:pre-line; font-family:"LotteMartDream";   padding:50px 0px 50px 20px; text-align:left;}

@media screen and (max-width:1279px){
	#graph{ margin-top:150px;}
	#graph .img{  max-width:255px; }
	#graph .txt{  padding:40px 0px; font-size:13pt;word-break:keep-all; white-space:normal; }
}

@media screen and (max-width:1023px){
	#graph{ margin-top:150px;}
	#graph .img{ max-width:215px; }
	#graph .txt{ padding:40px 0px; font-size:12pt; }
}
@media screen and (max-width:859px){
	#graph{ margin-top:140px;}
	#graph .txt{ font-size:11pt; }
}
@media screen and (max-width:639px){
	#graph{margin-top:100px;}
	#graph .max{ text-align:center; } 
	#graph .img{display:inline-block; width:200px; vertical-align:top; margin:0px auto;   }
	#graph .txt{ display:inline-block; width:100%; height:auto; padding:20px 30px 30px 30px; text-align:left;}
}






#main2{  background:#fff url("https://www.spini.co.kr/img/main/circle_blue.png") no-repeat center center; background-size:22% auto; text-align:left; }
#main2 h3 p{font-size:20px; color:#145252; text-align:center; padding-top:0px; letter-spacing:1px;}

#main2 .ctbox{overflow:hidden; font-size:18px; display:inline-table; width:100%; margin-top:10px;}
#main2 .left{ width:38%; display:table-cell;  vertical-align:top;  text-align:center; padding-right:15px;}
#main2 .center{width:24%; display:table-cell; vertical-align:top;}
#main2 .right{width:38%; display:table-cell; overflow:hidden; vertical-align:top; padding-left:15px;}



#main2 .left h4{color:#b2c917; font-size:1.3em; padding-bottom:10px;}
#main2 .leftbox{max-width:354px; width:100%; text-align:left; margin:0px auto;   }
#main2 .left .box{position:relative; line-height:1.3em; color:#002929 ; padding-left:1em; margin-bottom:70px; word-break:keep-all;}
#main2 .left .box ul{padding-left:20px; padding-top:5px;}
#main2 .left .box li{font-size:0.9em; color:#888; margin-bottom:10px; list-style:square; list-style-position:outside; }

#main2 .box q{font-size:1.2em; font-weight:bold;}
#main2 .box span{font-size:0.9em; color:#888; display:inline-block; padding-top:5px;}
.t1:before{content:"1."; position:absolute; left:0px; top:0px; color:#002929;}
.t2:before{content:"2."; position:absolute; left:0px; top:0px; color:#002929;}
.t3:before{content:"3."; position:absolute; left:0px; top:0px; color:#002929;}
.t4:before{content:"4."; position:absolute; left:0px; top:0px; color:#002929;}
.t5:before{content:"5."; position:absolute; left:0px; top:0px; color:#002929;}

#main2 .center div{background:url("https://www.spini.co.kr/img/main/phone2.png") no-repeat left top; background-size:100% auto; width:100%; position:relative; }
#main2 .center div:before{content: ""; display:block; padding-top:203.40909090909%;   }
#main2 .center div iframe{position:absolute; left:6.5%; top:12.2%; width:87.3%; height:75.7%;}

#main2 .right .box{white-space:pre-line; position:relative; line-height:1.3em; color:#002929 ; padding-left:1em; margin-bottom:20px; word-break:keep-all;}
#main2 .rightbox{max-width:354px; width:100%; text-align:left; float:right; }
#main2 .right h4{color:#00f0ff; font-size:1.3em;padding-bottom:10px;}

@media (max-width:859px) {
	#main2{ background:#fff url("https://www.spini.co.kr/img/main/circle_blue.png") no-repeat right 180px; background-size:200px auto; }
	#main2 .max{padding-right:0px;}
	#main2 .ctbox{ display:inline-block; position:relative;}
	#main2 .left{width:70%; display:inline-block; padding:10px;}
	#main2 .leftbox{max-width:100%; margin:0px;    }
	#main2 .left .box{margin-bottom:30px;}
	#main2 .right{width:100%; display:inline-block; padding:10px 20px 10px 10px;}
	#main2 .rightbox{max-width:100%; margin:0px;  }
	#main2 .center{width:180px; display:inline-block; position:absolute; left:75.5%; top:10px; }

}



@media  screen and (max-width:639px) {
	#main2{ background-image:none; }
	#main2 .left{width:80%; margin:0px; }
	#main2 .center{left:85%; width:250px;}
}
@media  screen and (max-width:479px) {
	#main2{  }
	
	#main2 h3 p{font-size:17px; }
	#main2 .left{width:80%;}
	#main2 .left h4{font-size:1.1em;}
	#main2 .right h4{font-size:1.1em;}
	
}






#reality{background-color:#fff; font-size:18px; }
#reality ul{width:100%;overflow:hidden;height:auto;display:inline-block;}
#reality ul li{float:left;width:50%;display:inline-block;padding:40px 10px;}
#reality ul li img{width:100%;height:auto; }
#reality ul li b{display:inline-block;padding:10px 0px 0px 0px;font-weight:normal; white-space:pre-line; word-break:keep-all; text-align:left; line-height:1.7em; color:#827666;  font-size:1em;}
#reality ul li span{font-size:1.4em; display:block; font-weight:bold; padding:10px 0px 7px 0px;}
#reality ul li a{background-color:#f25657; border-radius:5px; border:solid 1px #ccc; display:inline-block; padding:8px 15px 5px 15px; color:#fff;}

@media screen and (max-width:859px){
	#reality ul li b{ white-space:normal; word-break:keep-all;}
}

@media screen and (max-width:639px){
	#reality{ font-size:15px; }
	#reality ul li span{font-size:1.2em;}
}

@media screen and (max-width:479px) {
	#reality ul li{padding:40px 5px 20px 5px;}	
}









#ttype{ margin-bottom:50px; font-size:18px;}
#ttype ul{margin-top:10px;overflow:hidden;}
#ttype ul li{float:left; width:50%; padding:20px 15px; }
#ttype ul li iframe{width:100%; height:400px; border:solid 1px #ccc;}
#ttype ul li img{width:100%; height:auto; border:solid 1px #ccc;}
#ttype ul li b{display:block; font-size:23px; padding:10px 0px; white-space:pre-line; word-break:keep-all; font-size:1.4em; }
#ttype ul li span{ font-size:1em; word-break:keep-all; line-height:1.5em;}
#ttype ul li div a{background-color:#f25657; border-radius:5px; border:solid 1px #ccc; display:inline-block; padding:8px 15px 5px 15px; color:#fff;}

@media screen and (max-width:859px){
	#ttype ul li b{ white-space:normal; word-break:keep-all;}
}

@media screen and (max-width:639px){
	#ttype{ font-size:15px; }
	#ttype ul li{ padding:15px 10px; }
	#ttype ul li span{font-size:1.2em;}
}

@media screen and (max-width:479px) {
	#ttype ul li{padding:40px 15px 20px 15px; width:100%;}	
	#ttype ul li iframe{ height:250px;}
}















#gl_cate ul{overflow:hidden; margin-top:50px;}
#gl_cate ul li{display:inline-block;margin:0px 10px;text-align:center;cursor:pointer;border:solid 1px #fff; padding:5px 10px;}
#gl_cate ul li:hover,#gl_cate ul li.sel{border-radius:3px; border-color:#000; background-color:#000; color:#fff;}

#gl_list{width:100%;margin:50px 0px 100px 0px;transition:all 0.8s;}
#gl_list ul{overflow:hidden;-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-ms-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;}
#gl_list ul li{float:left;width:33.33333333%;text-align:center;padding:10px;position:relative;-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-ms-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;}
#gl_list ul li img{width:100%;height:auto;-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-ms-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;}
#gl_list ul li .img{border:solid 1px #ddd;width:100%;cursor:pointer;overflow:hidden;}
#gl_list ul li:hover img{transform:scale(1.2);}
#gl_list ul li .box{position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:rgba(205,0,0,0.3);display:none;-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-ms-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;}
#gl_list ul li .box div.table{display:table;width:100%;height:100%;vertical-align:middle;}
#gl_list ul li .box div.tablecell{display:table-cell;width:100%;height:100%;vertical-align:middle;position:relative; }
#gl_list ul li .box div a{display:inline-block;  border:solid 2px #fff; color:#fff; padding:7px 15px 5px 15px; border-radius:5px; font-size:9pt; font-family:'Daum';-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-ms-transition:all 0.7s;-o-transition:all 0.7s;transition:all 0.7s;}
#gl_list ul li .box div a:hover{background-color:#cd0000;color:#fff;border-color:#cd0000;}
#gl_list ul li:hover .box{display:inline-block;}


@media screen and (max-width:1023px){
	#gl_list{margin:30px 0px 70px 0px;}	
}
@media screen and (max-width:639px){
	#gl_list ul li{padding:5px;}
}
@media screen and (max-width:479px){
	#gl_list{margin:30px 0px 50px 0px;}	
}







#form{text-align:left;font-family:"LotteMartDream";position:relative; padding-bottom:80px;}
#form h3{font-size:25pt;font-family:"Daum";text-align:left; margin-bottom:40px;}
#form h3:first-letter{color:#cd0000;}
#form h3 b{ vertical-align:bottom;}
#form h3 i{font-style:normal;font-size:15pt; letter-spacing:5px; vertical-align:bottom;}
#form h3 i u{color:#cd0000; text-decoration:none;}
#form .max{overflow:hidden;}
#form .left{width:480px;float:left;}
#form .left div{padding:10px 0px;}
#form .left div.wid50{width:230px;display:inline-block;}
#form .left div.r{float:right;}
#form .left label{font-size:10pt;display:block;text-align:left;margin-bottom:3px;}
#form .left input[type='text']{border:solid 1px #000;width:100%; height:30px;}
#form .left textarea{width:100%;height:300px; padding:20px;box-sizing:border-box;overflow:auto;border:solid 1px #000;}
#form .left input[type="button"]{background-color:#cd0000;cursor:pointer; width:100px; height:40px; line-height:40px; border:solid 1px #000;}
#form .left input[type="button"]:hover{background-color:#fff;}

#form .right{width:400px;float:left;padding-top:1.1em;line-height:1.4em; margin-left:200px;}
#form .right h4{font-family:"Russo One";}
#form .right ul{margin-top:20px;}

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

}
@media screen and (max-width:1024px){
	#form{; top:0px;}
	#form h3{font-size:20pt; margin-bottom:30px; }
	#form h3 i{font-size:13pt; }
	#form .left{width:95%;float:none;margin:0px auto;}
	#form .left div.wid50{width:48%;display:inline-block;}
	#form .right{width:95%;float:none;margin:50px auto 0px auto;}
}
@media screen and (max-width:640px){
	#form h3{font-size:15pt; margin-bottom:20px; }
	#form h3 i{font-size:12pt; }
}
@media screen and (max-width:480px){
	#form h3{font-size:13pt; margin-bottom:10px; }
	#form h3 i{font-size:10pt;letter-spacing:0px;  }
	#form .left textarea{height:200px; padding:15px;}
}

















#fullsize{width:100%;height:100%;position:fixed;left:0px;top:0px;z-index:9999999;background-color:rgba(0,0,0,0.8);text-align:center;overflow:auto;-webkit-overflow-scrolling: touch;}
#fullsize div.box2{width:100%;height:100%;padding:100px;}
#fullsize iframe{width:100%;height:100%;display:inline-block;border:none;padding:0px; }
#closebtn{position:fixed;bottom:35px;right:100px;background-color:#b94168;color:#fff;z-index:99;display:inline-block;padding:20px 30px;}

@media screen and (max-width:1280px){
	#fullsize div.box2{padding:10px;}
	#closebtn{bottom:5px;right:5px;}
}
@media screen and (max-width:480px){
	#fullsize div.box2{padding:7px 7px 40px 7px;}
	#closebtn{bottom:0px;right:0px;padding:10px 25px;width:100%;text-align:center;}
}