.wordStudy_page {
        display:inline-block;
        left:0;	
        position: absolute;
        width: 100%;	
    	height: 500px;
    /*    background-image: url(images/cardback.png);*/
        background-color: #2663a3;
        text-align:left;
        font-family: "Georgia", "�뗭쓬";
    /*    font-family: "Comic Sans MS", "�뗭쓬";*/
        font-size:14pt;
        font-weight: bold;
        color: black;			
        vertical-align: middle;    
        overflow-y:hidden;
        z-index:105;
    }    

    #wordStudyTitleBoard{
        top:0;
        left: 0;
        z-index: 151;
        width:100%;
        height:50px;
        position:absolute;
        background: #2663a3;
        font-family: "Arial", "�뗭쓬";
        color:lightskyblue;
    }


    .wordView {
    /*    display:inline-block;*/
        display:table;
        position: relative;
        width:100%;
        height:100%;
        background-color: white;
        float:left;
        text-align:center;
        font: 60px/1 "Arial Black"; 

        margin: 50px 30px 0px 30px;
    /*	padding: 10px 10px 10px 10px;
        border:10px solid green;

        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    */	
        /* 2018.8.23 */
    /*    transition: All .5s;    */
        overflow-y:hidden;
    }   

    .examView {
/*        display:inline-block;*/
        display:table;
        position: relative;
        width:50%;
        height:70px;
        background-color: lightskyblue;
        float:left;
        text-align:center;
        font-family: "Arial"; 
        font-size: 30px;
        text-overflow : ellipsis;
        /*line-height:1.3em;*/
		cursor:pointer;
        
        margin: 30px 0px 0px 30px;
        box-shadow: 5px 5px 5px #000;    
    /*	padding: 10px 10px 10px 10px;*/
        border:0px solid darkblue;

        border-top-right-radius: 10px;
    /*	border-top-left-radius: 10px;*/
        border-bottom-right-radius: 10px;
    /*	border-bottom-left-radius: 10px;*/

        /* 2018.8.23 */
    /*    transition: All .5s;    */
        overflow-y:hidden;
        overflow-x:hidden;
    } 
    .examView:hover {
        background-color: lightgreen;
        -webkit-transition: All .5s;    */
        transition: All .5s;    */
    }     

    .wordStudyTimer {
        position: fixed;
        left: 30px;
        top: 50px;
        z-index:200;
    }

    .wordStudyTimer h2 {
        text-align:center;
        font: 30px/1 "Arial Black"; 
        position: absolute;
        line-height: 55px;
        width: 100%;
    }

    svg {
       -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .circle_animation {
      stroke-dasharray: 220; /* this value is the pixel circumference of the circle */
      stroke-dashoffset: 220;
      -webkit-transition: all 1s linear;
      transition: all 1s linear;
    }    
    .circle_animation_reset {
      stroke-dasharray: 220; /* this value is the pixel circumference of the circle */
      stroke-dashoffset: 220;
      -webkit-transition: all 0s linear;
      transition: all 0s linear;
    }        

    .wordStudyCounter {
        position: fixed;
        top: 50px;
        right: 30px;
        z-index:200;
    }

    .wordStudyCounter h2 {
        text-align:center;
        font: 20px/1 "Arial Black"; 
        position: absolute;
        line-height: 57px;
        width: 100%;
    }

    div #viewMemory, .wordView #viewA {
	display: table-cell; 
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 150px 150px;
        cursor:pointer; 
    }
      
    .examView #viewA {
        display: table-cell; 
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 150px 150px;
        cursor:pointer; 
        
/*        line-height:1.3em;*/
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: left;
        overflow : hidden;
 		white-space:nowrap;
    	text-overflow:ellipsis;
		min-width: 150px;
        padding : 0px 20px 0px 70px;
          
    } 

    #exam1 #viewA {background-image: url(images/no1.png);}      
    #exam2 #viewA {background-image: url(images/no2.png);}      
    #exam3 #viewA {background-image: url(images/no3.png);}      
    #exam4 #viewA {background-image: url(images/no4.png);}
    
	.flip-card-back #viewMemory { 
		font: 50px/1 "Arial Black"; 
	} 
    /*    
    #exam1,#exam2,#exam3,#exam4 #viewA {
        background-image: url(images/no1.png);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 300px 300px;
        opacity : 0.5;
    }      
    */    
    .wordStudy_inner{   /* popup��諛곌꼍 */
        z-index:206;
        display:table;	/* 理쒖큹 �④� */
        background:rgba(0,0,0, 0.7); 
        position:absolute; 
    /*	top:50%; 
        left:50%; */
        text-align:center; 
        vertical-align: middle;
    /*	margin:-65px 0 0 -225px;*/
        width:100%;
        height:100%;
    }    
    #o_wordView{
        width: 50%;
        height: 50%;
        display: table-cell; 
        position : relative; 
        vertical-align: middle;
    }    
/*
    #x_wordView{
        width: 800px;
        height: 300px;
        display: table; 
        position : absolute; 
        vertical-align: middle;
    	top:50%; 
        left:50%; 
        margin: -150px 0px 0px -400px;
        vertical-align: middle;
        background-color: rgba(255, 255, 255);
        text-align:center;
        
        font: 60px/1 "Arial Black"; 

        padding: 10px 10px 10px 10px;
        border: 10px solid #e25734;

        border-top-right-radius: 30px;
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;

        box-shadow: 15px 15px 15px #000;    
    }
*/
    .x_wordView_inner{
        width: 800px;      /* 800px */
        height: 400px;      /* 300px */
        display: table; 
        position : absolute; 
        vertical-align: middle;
    	top:50%; 
        left:50%; 
        margin: -200px 0px 0px -400px;
        vertical-align: middle;
        background-color: rgba(255, 255, 255);
        text-align:center;
        
        font: 90px/1 "Arial Black";           /* 60px */

        padding: 10px 10px 10px 10px;
        border: 10px solid #e25734;

        border-top-right-radius: 30px;
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;

/*        box-shadow: 15px 15px 15px #000;    */
        
        -webkit-transition: -webkit-transform 0.6s;
        transition: transform 0.6s;
        transform-style: preserve-3d;        
    }
    #x_wordView{
		width: 800px;  
        height: 400px;
        display: table; 
        position : absolute; 
        vertical-align: middle;
    	top:50%; 
        left:50%; 
        margin: -200px 0px 0px -400px;
        vertical-align: middle;
/*        background-color:  rgba(255, 255, 255, 0); */
        text-align:center;
        
        font: 90px/1 "Arial Black"; 

        padding: 10px 10px 10px 10px;
        border: 10px solid #e25734;

        border-top-right-radius: 30px;
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;

/*        box-shadow: 15px 15px 15px #000;    */
        
    }    
/*    
 .wordStudy_inner:hover .x_wordView_inner {
  transform: rotateX(180deg);
}
*/
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;  
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: white;
  color: black;
}

.flip-card-back {
  background-color: #e25734;
  color: white;
/*  
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
*/  
}