@charset "utf-8";

/* CSS Document */

/*

- 이 .CSS파일은  height(세로) 위주의 표출을 기준으로 다양한 해상도 변경 및 브라우즈 사이즈 조절로 인한 content 사이즈 변화를 억제하기 위해 VMAX, CSS의 변수 및 계산식을 이용한 것임
- 호환성(CSS의 중첩 calc 함수 및 var 변수를 지원하는 브라우즈에만 가능)
   > IE(미지원), Edge(16)
   > Chrome(51), Android webview(51), chrome for Android(51) * Chrome 51버전은 2016. 6월에 발표
   > Safari(11), Safari on IOS(11)
   > Samsung Internet(5.0)
   	
1. 최초 페이지 형성시 결정된 height 또는 width의 중 길이가 긴 VMAX 값으로 폰트 및 높이 관련 사이즈가 결정됨.
2. 만약 VMAX 값이 height 기준으로 설정될 시 brower의 height 사이즈가 확대되면  폰트 및 높이 관련 content는 
       현재 heigth 사이즈가 최초 height 사이즈 보다 작은면 변화가 없고, 현재 heigth 사이즈가 최초 height 사이즈 보다 크면 변동이 됨 (중요) 
3. 만약 VMAX 값이 width 기준으로 설정될 시 brower의 width 사이즈가 축소되거나 확재될시 폰트 및 높이 관련 사이즈가 변동이 됨.
4. VMAX 기준값이 height 에서 width로 변동되면 상기 "3번"의 경우로 변경됨.
5. VMAX 기준값이 width 에서 height로 변동되면 상기 "2번"의 경우로 변경됨.

6. 사용(표기) 방법 
       예1) 눂이/넓이 관련 CSS(height margine-top, margine-bottom, padding-top, padding-bottom, margine, padding 등): 2vmax; => calc(2vmax * var(--height_Revise_ratio, 1));
       
       예2) 폰트 CSS : 2vmax => calc((calc(2vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	
*/

	:root {

	  --font_Revise_ratio: 1;
	  --height_Revise_ratio : 1;
	  
	  --before_inWidth : 1;
	  --before_inHeight : 1;	  

	}



	html, body {

	  height: 100%;

	  margin: 0vmax;

	  padding: 0vmax;

	  font-family:"Arial Black", Gadget, sans-serif;

	}



	/* 로고 */

	/* 로고 */

	.spo1 {

	  position:absolute;

	 /* bottom:0.625vmax; */
	  bottom : calc(0.625vmax * var(--height_Revise_ratio, 1));

	  right : calc(7.5vmax * var(--height_Revise_ratio, 1));

	  z-index:9999999999;	  		

	}

	/* 로고 */

	/* 로고 */



	

	/* 상단바 */

	/* 상단바 */

	.actionBar{

	  position:fixed;

	  left:0vmax;  /*'0' 으로 변경하면 오류 발생 position 문제 인것 같음 */

	  top:0vmax;  /*'0' 으로 변경하면 오류 발생 position 문제 인것 같음 */

	  z-index:10;

	  width:100%;

	  /* height: 7vmax; */
	  height : calc(7vmax * var(--height_Revise_ratio, 1));

  	  /*background-color:#d20b2f;	/* red */   

	  background-color:#00C4CD;	/* 일반*/  	  

	  /* border-bottom::0.125vmax #CCCCCC solid; */
	  border-bottom : calc(0.125vmax * var(--height_Revise_ratio, 1)) #CCCCCC solid;

	  box-shadow: calc(0.125vmax * var(--height_Revise_ratio, 1)) calc(0.125vmax * var(--height_Revise_ratio, 1)) calc(1.875vmax * var(--height_Revise_ratio, 1)) #999999;
	  /*box-shadow: 0.125vmax 0.125vmax 1.875vmax #999999; */
	  	

	}	



	/* 상단바 색상*/

	/* 상단바 색상*/

	.red1{

	background-image: -webkit-gradient(linear, center top, center bottom, from(#fc0000), to(#770000));

	}

	.ngreen1{

	background-image: -webkit-gradient(linear, center top, center bottom, from(#0F0), to(#030));

	}	

	.nblue1{

	background-image: -webkit-gradient(linear, center top, center bottom, from(#8080C0 ), to(#5151A2 ));

	}	

	.nblue2{

	background-image: -webkit-gradient(linear, center top, center bottom, from(#8000FF), to(#2E005B));

	}	

	.nblue3{

	background-image: -webkit-gradient(linear, center top, center bottom, from(#449def ), to(#2f6699 ));

	}	

	.npurple1 {

	    background-image: -webkit-gradient(linear, center top, center bottom, from(#8000FF), to(#2E005B));

	}	

	/* 상단바 색상*/

	/* 상단바 색상*/







	.titleText {

	 font-size : calc((calc(3vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(3vmax * var(--font_Revise_ratio, 1));	*/
	 
	  font-weight:bold;

	  color:white;

	}

	.normalText {

	  font-size : calc((calc(3vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(3vmax * var(--font_Revise_ratio, 1)); */	

	  color:#666; 

	}	

	.topText {

      font-size : calc((calc(2.5vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(2.5vmax * var(--font_Revise_ratio, 1));	*/

	}	

	/* 상단바 */

	/* 상단바 */



		

	/* icon */

	/* icon */

	.fa-home {

	  font-size : calc((calc(4vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(4vmax * var(--font_Revise_ratio, 1)); */	

	}

	.fa-calendar {

      font-size : calc((calc(2.5vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	 /* font-size: calc(2.5vmax * var(--font_Revise_ratio, 1));	*/

	}

	.fa-close {
      
      font-size : calc((calc(2.5vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(2.5vmax * var(--font_Revise_ratio, 1)); */	

	}

	.glyphicon-circle-arrow-left {
      
      font-size : calc((calc(4vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(4vmax * var(--font_Revise_ratio, 1));	*/

	}

	.glyphicon-triangle-right {

      font-size : calc((calc(2.5vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(2.5vmax * var(--font_Revise_ratio, 1)); */	

	}

	.glyphicon-triangle-left {

      font-size : calc((calc(2.5vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(2.5vmax * var(--font_Revise_ratio, 1)); */	

	}	

	.glyphicon-repeat {

     font-size : calc((calc(2.5vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(2.5vmax * var(--font_Revise_ratio, 1)); */	

	}	

	.glyphicon-search {

      font-size : calc((calc(2vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(2vmax * var(--font_Revise_ratio, 1));	*/

	}	

	/* icon */

	/* icon */

	

	

	/* 경주장 선택버튼 - 출주표, 동영상, 경주결과 */

	/* 경주장 선택버튼  */

    .menu_box {

	  text-align:center;	

      font-size : calc((calc(3vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1));
	  /* font-size: calc(3vmax * var(--font_Revise_ratio, 1)); */	

	  color:#666;

	  font-weight:bold;
      
      border: #999 calc(0.125vmax * var(--height_Revise_ratio, 1)) solid;
	  /*border:#999 0.125vmax solid;*/

	  border-radius:calc(0.625vmax * var(--height_Revise_ratio, 1));
	  /* border-radius:0.625vmax; */		

      height: calc(7vmax * var(--height_Revise_ratio, 1));
	  /*height:7vmax;*/

	  background-color:white;

      padding-top: calc(1.25vmax * var(--height_Revise_ratio, 1)); 
	  /*padding-top:1.25vmax;*/	  	

	}

	

	.race_circle_b_menu {

		text-align:center;	

         font-size: calc((calc(3vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1)); 
	    /* font-size: calc(3vmax * var(--font_Revise_ratio, 1)); */	

		color:white;

		font-weight:bold;

        border:#999 calc(0.125vmax * var(--height_Revise_ratio, 1)) solid; 
		/* border:#999 0.125vmax solid; */

		border-radius:calc(0.625vmax * var(--height_Revise_ratio, 1));
	    /* border-radius:0.625vmax; */		

        height:calc(7vmax * var(--height_Revise_ratio, 1));
	    /*height:7vmax;*/

        padding-top:calc(1.25vmax * var(--height_Revise_ratio, 1));
	    /* padding-top:1.25vmax; */	  	

	    background-image: -webkit-gradient(linear, center top, center bottom, from(#fc0000), to(#770000)); 

	}



	.race_circle_g_menu {

		text-align:center;	

	     font-size: calc((calc(3vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1)); 
	    /* font-size: calc(3vmax * var(--font_Revise_ratio, 1)); */	

		color:white;

		font-weight:bold;

        border:#999 calc(0.125vmax * var(--height_Revise_ratio, 1)) solid; 
		/* border:#999 0.125vmax solid; */

		border-radius:calc(0.625vmax * var(--height_Revise_ratio, 1));
	    /* border-radius:0.625vmax; */		

        height:calc(7vmax * var(--height_Revise_ratio, 1));
	    /*height:7vmax;*/

        padding-top:calc(1.25vmax * var(--height_Revise_ratio, 1));
	    /* padding-top:1.25vmax; */	
	    
	    background-image: -webkit-gradient(linear, center top, center bottom, from(#0F0), to(#030));

	}

	

	.race_circle_c_menu {

		text-align:center;	

	     font-size: calc((calc(3vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1)); 
	    /* font-size: calc(3vmax * var(--font_Revise_ratio, 1)); */	

		color:white;

		font-weight:bold;

        border:#999 calc(0.125vmax * var(--height_Revise_ratio, 1)) solid; 
		/* border:#999 0.125vmax solid; */

		border-radius:calc(0.625vmax * var(--height_Revise_ratio, 1));
	    /* border-radius:0.625vmax; */		

        height:calc(7vmax * var(--height_Revise_ratio, 1));
	    /*height:7vmax;*/

        padding-top:calc(1.25vmax * var(--height_Revise_ratio, 1));
	    /* padding-top:1.25vmax; */	

	    background-image: -webkit-gradient(linear, center top, center bottom, from(#8080C0 ), to(#5151A2 ));

	}	

	

	.race_circle_m_menu {

		text-align:center;	

	     font-size: calc((calc(3vmax * var(--font_Revise_ratio, 1))) * var(--height_Revise_ratio, 1)); 
	    /* font-size: calc(3vmax * var(--font_Revise_ratio, 1)); */	

		color:white;

		font-weight:bold;

        border:#999 calc(0.125vmax * var(--height_Revise_ratio, 1)) solid; 
		/* border:#999 0.125vmax solid; */

		border-radius:calc(0.625vmax * var(--height_Revise_ratio, 1));
	    /* border-radius:0.625vmax; */		

        height:calc(7vmax * var(--height_Revise_ratio, 1));
	    /*height:7vmax;*/

        padding-top:calc(1.25vmax * var(--height_Revise_ratio, 1));
	    /* padding-top:1.25vmax; */		  	

	    background-image: -webkit-gradient(linear, center top, center bottom, from(#8000FF), to(#2E005B));

	}	



	/* 경주장 선택버튼 - 출주표, 동영상, 경주결과 */

	/* 경주장 선택버튼  */