@charset "utf-8";
/* CSS Document */
/* 2015.12.14 Harry */

/***** RESET *****/
* { position:relative; margin: 0; padding: 0; border: 0; list-style: none; vertical-align: top;}
body { font: 12px/1.5 Arial, 'Nanum Gothic', Dotum, '돋움';}
img { max-width: 100%;}
a, a:focus, a:active, a:hover { color: #000; text-decoration: none; cursor: pointer;}

.clear { display: block; clear: both; overflow: hidden; *zoom: 1;}
.clear:after { display: block; visibility: hidden; height: 0; clear: both; font-size:0; content: "."}

.pa { position: absolute;}
.pf { position: fixed;}

.c-fff { color: #fff;}
.c-green-0 { color: #ffe76e;}
.c-green-1 { color: #81ffef; border-color: #81ffef;}
.c-green-2 { color: #6bd7b1;}
.c-yellow { color:#ffe76e;}

.font16px { font-size: 16px;}
.font18px { font-size: 18px;}
.font20px { font-size: 20px;}
.font25px { font-size: 25px;}
.loginbtn {
    top: 42px;
    left: 50%;
    margin-left: 166px;
    
}

.loginbtn a {
    margin-right: 10px;
    padding: 5px 10px 8px 10px;
    border: 2px solid #6bd7b1;
}

/***** DOCUMENT & COMMON *****/
.wrap {
    margin: 0 auto;
    width: 100%;
    min-width: 1280px;
    max-width: 1920px;
}

.top .logo {
    top: 60px;
    right: 50px;
    width: 187px;
    height: 118px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/logo.png) no-repeat;
    z-index: 10;
}

.i-arrow {
    left: 50%;
    margin-left: -55px;
    width: 110px;
    height: 110px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/i_arrow.png) no-repeat;
    z-index: 10;
}

.top .i-arrow { bottom: -41px;}
.middle .i-arrow { bottom: -68px;} 

.top {
    width: 100%;
    height: 1000px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/bg_t.jpg) center top no-repeat;
}

.middle {
    margin-top: -24px;
    width: 100%;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/bg_m_1.png) 50% 0 no-repeat, url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/bg_m_2.jpg) 50% 24px no-repeat, url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/bg_m_3.jpg) 50% 400px no-repeat;
}

.bottom {
    overflow: hidden;
    padding-bottom: 80px;
    width: 100%;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/bg_b.jpg) center top no-repeat;
}

.copyright {
    overflow: hidden;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    background: #000000;   
}

.cont {
    margin: 0 auto;
    width: 1280px;
    background: transparent;
}

.logoin-area {
    overflow: hidden;
    width: 100%;
    height: 400px;
    background: transparent;
}

.logoin-area .title {
    display: block;
    margin: 114px auto 0;
    width: 640px;
    height: 123px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/btn_login.jpg) no-repeat;    
}

.logoin-area p {
    margin-top: 20px;
    text-align: center;
}

.content {
    height: 600px;
    text-align: center;
}

.content ul li {
    display: inline-block;
    margin: 68px 50px 0;
    width: 490px;
    min-height: 466px;
}

.content .title-1 {
    width: 100%;
    height: 107px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/title_1.png) no-repeat;
}

.content .title-2 {
    width: 100%;
    height: 107px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/title_2.png) no-repeat;
}

.content .line {
    margin-top: 17px;
    margin-bottom: 14px;
    border-bottom: 1px solid #f0f1ef;
    width: 100%;
    height: 1px;
    background: #b5b6b4;
}

.content ul li> p {
    margin-top: 8px;
    text-align: left;
    line-height: 22px;    
}

.content .gift-area {
    bottom: 0;
    left: 0;
    width: 490px;
    height: 223px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/bg_content.jpg) no-repeat;
}

.content .gift-area div {
    display: inline-block;
    margin-top: 50px;
    width: 93px;
}

.content .gift-area .gift2 {
    margin: 40px auto 0;
    width: 263px;    
}

.content .gift-area .i-plus {
    width: 93px;
    height: 93px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/i_plus.png) center no-repeat;
}

.text {
    margin-top: 110px;
    text-align: center;
}

.tips {
    margin: 56px auto 0;
    width: 526px;
    text-align: center;
    border-bottom: 1px solid;
}

.bottom form {
    margin: 0 auto;
    width: 687px;
}

.inputarea ul li {
    margin-top: 20px;
}

.inputarea ul li label {
    display: inline-block;
    border: 1px solid #70e4bb;
    width: 196px;
    height: 71px;
    line-height: 71px;
    text-align: center;    
    vertical-align: top;
}

.inputarea ul li input {
    padding-left: 30px;
    width: 450px;
    height: 73px;
    font-size: 30px;
    letter-spacing: 2px;
    color: #898989;
    background: #ffffff;
}

.notice {
    margin-top: 20px;
    padding: 28px;
    width: 631px;
    height: 347px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/bg_notice.jpg) no-repeat;
}

.notice div {
    margin-top: 20px;
}

.notice p:nth-child(2) {
    margin-top: 10px;
}

.notice ol {
    margin-top: 30px;
    padding: 18px;
    border: 1px solid #20714e;
    background: #cadfce;
}

.notice ol li {
    margin-left: 26px; 
    list-style: decimal;
}

#input-agreement {
    display: none;
    display: inline-block\9;
    vertical-align: middle\9;
}

.notice label {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}

.notice label .btn-checkbox {
    display: inline-block;
    margin-right: 10px;
    width: 29px;
    height: 29px;
    background: #f3fff5;
    border: 1px solid #257552;
    display: none\9;
}

#input-agreement:checked + label .btn-checkbox{
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/i_checkbox.jpg) center;
}

.notice label span:last-child {
    padding-bottom: 3px;
    border-bottom: 1px solid #ffffff;
}

.btn-form a {
    display: block;
    margin: 104px auto 0;
    width: 579px;
    height: 96px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/btn_form.jpg) no-repeat;
}

.code {
    margin: 90px auto;
    width: 580px;
    height: 96px;
    line-height: 96px;
    text-align: center;
    letter-spacing: 2px;
    background: #ffffff;
}

@media screen and (max-width: 640px) {
.wrap {
    overflow: hidden;
    width: 640px;
    min-width: 0;
    max-width: none;
}

.top .logo { display: none;}

.top .i-arrow { bottom: -50px;}

.top {
    height: 474px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/m/m_bg_t.jpg) center top no-repeat;
}

.middle {
    margin-top: 0;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/m/m_bg_m.jpg) 50% 0 no-repeat, #e2e3e1 center repeat;
}

.bottom { background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/m/m_bg_b.jpg) center top no-repeat;
}

.cont { width: 640px;}

.logoin-area { height: 310px;}

.logoin-area .title { 
    margin-top: 60px;
    width: 530px;
    height: 102px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/m/m_btn_login.jpg) no-repeat;
}

.logoin-area p {
    margin-top: 20px;
    text-align: center;
}

.content {
    height: auto;
    padding-bottom: 70px;
}

.text {
    margin: 66px auto 0;
    width: 576px;
    text-align: center;
}

.tips { width: 90%;}

.bottom form { width: 576px;}

.inputarea ul li label { width: 166px;}

.inputarea ul li input { width: 370px;}

.notice {
    width: 520px;
    height: 403px;
    background: url(http://imagekr-download.vsplay.com/activity/kr/yttx/20160122event/images/m/m_bg_notice.jpg) no-repeat;
}

.notice ol { margin-top: 14px;}

.btn-form a { margin: 40px auto 0;}

.code { width: 540px;}
}
