body {
    font-family: 'Nanum Gothic', sans-serif;
    background: rgb(249, 249, 249);
}

.row
{
    margin: 41px -17px;
}

.button_base {
    margin: 0;
    border: 0;
    font-size: 18px;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -100px;
    width: 200px;
    height: 50px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;
}

.button_base:hover {
    cursor: pointer;
}

.square1
{
    padding:70px;
    background:#00245f;    
    border:1px solid #d0d0d0;
    text-align:center;
    height:500px;
    color:white;
    box-shadow: 0px 2px 9px 6px #efefef;
}
.square2
{
    padding:70px;
    background:white;    
    border:1px solid #d0d0d0;
    text-align:center;
    height:500px;
    color:#444;
    box-shadow: 0px 2px 9px 6px #efefef;
}

.square2 hr
{
    border-top: 1px solid #444;
}



.year
{
  font-size:25px;
  margin-top: 13%;
}

.year2{
    font-size: 19px;
    margin-top: -1%;
    margin-bottom: -5px;
}

.etc {
    font-size:20px;
}
.square1 h1
{
    margin-top: 7px;
    margin-bottom: 49px;
    font-weight: 700;
    font-size: 39px;
}
.apply
{
    font-size: 18px;
    margin-top: 8%;
    font-weight: 500;
}
.btn-kochon {
    color: #fff;
    background-color: #00245f;
    border-color: #002854;
}
.btn-kochon:focus {
    color: #fff;
}
.btn-kochon:hover{
    color: #fff;
    background-color: #003269;
    border-color: #002248;
}
.name
{
    margin-top: 12%;
    font-size: 40px;
    font-weight: 700;
}
.hompage 
{
    font-size: 40px;
    font-weight: 700;
}
#btnApply
{
   margin-top: 10%;
}
#btnHome 
{
   margin-top: 34%;
}
/*
.square1:hover
{
    padding:70px;
    background:white;    
    border:1px solid #d0d0d0;
    text-align:center;
    height:500px;
    color:#00245f;
    box-shadow: 0px 2px 9px 6px #efefef;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration:1s;
    transition-timing-function: ease;
}
.square2:hover
{
    padding:70px;
    background:#00245f;    
    border:1px solid #d0d0d0;
    text-align:center;
    height:500px;
    color:white;
    box-shadow: 0px 2px 9px 6px #efefef;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration:1s;
    transition-timing-function: ease;
}
*/

.b07_3d_double_roll {
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.b07_3d_double_roll div {
    position: absolute;
    text-align: center;
    padding: 10px;
    border: #ababab solid 1px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.b07_3d_double_roll div:nth-child(1) {
    color: #00245f;
    background-color: #ffffff;
    z-index: 0;
    width: 100%;
    height: 50px;
    clip: rect(0px, 100px, 50px, 0px);
    position: absolute;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll div:nth-child(2) {
    color: #00245f;
    background-color: #00245f;
    z-index: -1;
    width: 100%;
    height: 50px;
    clip: rect(0px, 100px, 50px, 0px);
    position: absolute;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll div:nth-child(3) {
    color: #00245f;
    background-color: #ffffff;
    z-index: 0;
    width: 100%;
    height: 50px;
    clip: rect(0px, 200px, 50px, 100px);
    position: absolute;
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll div:nth-child(4) {
    color: #ffffff;
    background-color: #00245f;
    z-index: -1;
    width: 100%;
    height: 50px;
    clip: rect(0px, 200px, 50px, 100px);
    position: absolute;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll:hover div:nth-child(1) {
    background-color: #00245f;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
}

.b07_3d_double_roll:hover div:nth-child(2) {
    color: #ffffff;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}

.b07_3d_double_roll:hover div:nth-child(3) {
    background-color: #00245f;
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
}

.b07_3d_double_roll:hover div:nth-child(4) {
    color: #ffffff;
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}
/* kochon hompage */

.b07_3d_double_roll2 {
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.b07_3d_double_roll2 div {
    position: absolute;
    text-align: center;
    padding: 10px;
    border: #ababab solid 1px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.b07_3d_double_roll2 div:nth-child(1) {
    color: #ffffff;
    background-color: #00245f;
    z-index: 0;
    width: 100%;
    height: 50px;
    clip: rect(0px, 100px, 50px, 0px);
    position: absolute;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll2 div:nth-child(2) {
    color: #00245f;
    background-color: #fff;
    z-index: -1;
    width: 100%;
    height: 50px;
    clip: rect(0px, 100px, 50px, 0px);
    position: absolute;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll2 div:nth-child(3) {
    color: #fff;
    background-color: #00245f;
    z-index: 0;
    width: 100%;
    height: 50px;
    clip: rect(0px, 200px, 50px, 100px);
    position: absolute;
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll2 div:nth-child(4) {
    color: #00245f;
    background-color: #fff;
    z-index: -1;
    width: 100%;
    height: 50px;
    clip: rect(0px, 200px, 50px, 100px);
    position: absolute;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform-origin: 50% 50% -25px;
    -webkit-transform-origin: 50% 50% -25px;
    -moz-transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll2:hover div:nth-child(1) {
    background-color: #fff;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
}

.b07_3d_double_roll2:hover div:nth-child(2) {
    color: #00245f;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}

.b07_3d_double_roll2:hover div:nth-child(3) {
    background-color: #fff;
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
}

.b07_3d_double_roll2:hover div:nth-child(4) {
    color: #00245f;
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}

.page-footer
{
    font-size: 13px;
}

/*
.square2:hover > hr
{
   border-top: 1px solid #fff;
   transition: all 0.2s ease 0.1s;
  -webkit-transition: all 0.2s ease 0.1s;
  -moz-transition: all 0.2s ease 0.1s;   
}
.square1:hover > hr
{
    border-top: 1px solid #00245f;
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
}

.square2:hover > .btn-kochon{
    color: #00245f;
    background-color: #fff;
    border-color: #c1c1c1;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
}

.square2:hover > .btn-kochon:hover{
    color: #003167;
    background-color: #cecece;
    border-color: #777777;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
}*/