@charset "utf-8";

@font-face { /* 나눔고딕 Regular */
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);
    src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');
}

@font-face { /* 나눔고딕 Bold */
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot);
    src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

BODY {
    FONT-SIZE: 10pt;
    COLOR: black;
    LINE-HEIGHT: 160%;
    FONT-FAMILY: 'Nanum Gothic',굴림,verdana,tahoma;
    margin: 0px;
    padding: 0px;
}

SELECT {
    FONT-SIZE: 10pt;
    COLOR: black;
    LINE-HEIGHT: 160%;
    FONT-FAMILY: 'Nanum Gothic',굴림,verdana,tahoma;
}

DIV {
    FONT-SIZE: 10pt;
    LINE-HEIGHT: 160%;
    FONT-FAMILY: 'Nanum Gothic',굴림,verdana,tahoma;
}

FORM {
    FONT-SIZE: 10pt;
    COLOR: black;
    LINE-HEIGHT: 160%;
    FONT-FAMILY: 'Nanum Gothic',굴림,verdana,tahoma;
    margin: 0px;
    padding: 0px;
}

TEXTAREA {
    BORDER-RIGHT: 1px solid #999999;
    BORDER-TOP: 1px solid #999999;
    FONT-SIZE: 10pt;
    BORDER-LEFT: 1px solid #999999;
    COLOR: BLACK;
    BORDER-BOTTOM: 1px solid #999999;
    FONT-FAMILY: 굴림,verdana;
    BACKGROUND-COLOR: white;
}

img {
    top: 0;
    left: 0;
    border: none 0;
}

A:link {
    color: #333333;
    text-decoration: none;
}

A:visited {
    color: #333333;
    text-decoration: none;
}

A:active {
    color: #08498b;
    text-decoration: none;
}

A:hover {
    color: #858585;
    text-decoration: none;
}

form {
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.bold {
    font-weight: bold;
}

.tc {
    text-align: center;
}

.tr {
    text-align: right;
}

.fl {
    float: left;
}

.cb {
    clear: both;
}

.ma {
    margin: 0 auto;
}
.vab {
    vertical-align:bottom;
}

.pointer {
    cursor: pointer;
}

.dib {
    display: inline-block;
}

.db {
    display: block;
}

.cBluish {
    color: #232f84;
}

.cYellowish {
    color: #ffba00;
}

.cRedish {
    color: #d90239;
}

    #PromotionImage {
        background-image: url("../images/gb_01.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 0;
        padding-top: 50%; /* (img-height / img-width * container-width) */
        /* (960 / 1920 * 100) */
    }

    .detailConts {
         overflow-y:auto;
         width:100% !important;
         min-height:200px;
     }
@media only screen and (min-width: 1280px) /* Desktop */ {
	.pWinner {
	width: 900px;
	height: 600px;
	display: inline-block;
	background-color: white;
	margin: 0 auto;
	vertical-align: top;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index:2;
}

    #fbLink {
        display:none;
    }

    #Introduction {
        width: 1280px;
        margin: 0 auto;
        margin-bottom: 100px;
    }

    #introTitle {
        font-size: 4em;
        font-weight: bold;
        text-align: center;
        display: block;
        margin: 0 auto;
        line-height: 2em;
    }

    #introText {
        font-size: 1.8em;
        line-height: 1.5em;
        display: inline-block;
        padding: 10px;
        min-height: 200px;
    }

    #radEvent {
        display: inline-block;
        background-color: #d90239;
        border-radius: 2em;
        color: white;
        padding: 5px 10px;
        font-size: 0.8em;
        font-weight: bold;
    }

    #eventDuration {
        font-size: 1.2em;
        color: #000;
        padding-left: 20px;
    }

    #Introduction a > img {
        display: block;
        margin: 0 auto;
        margin-top: -60px;
    }

    .grayBox {
        background-color: #fafafa;
        border: 1px solid #d9d9d9;
        width: 100%;
        padding: 3% 2% 8% 2%;
        border-radius: 2em;
        margin-top: 25px;
        text-align: center;
    }

        .grayBox .gbDot {
            padding: 0px 50px;
        }

    #ContentsWrapper {
        background-color: #f2f2f2;
        background: url("../images/bg.jpg") repeat-y;
    }

    #Contents {
        width: 1280px;
        margin: 0 auto;
    }

    #likeplease {
        padding-top: 23px;
    }

    #eventCounter {
    }

    #evts {
        clear: both;
    }

    #FooterWrapper {
        background: url("../images/gb_10.png") no-repeat;
        background-position: center;
        width: 100%;
        min-width: 1280px;
        height: 400px;
    }

    #footer {
        width: 1280px;
        margin: 0 auto;
        padding-top: 45px;
    }

        #footer ol {
            padding-left: 20px;
        }


    #caution {
        display: block;
        font-size: 40px;
        color: white;
        font-weight: bold;
        padding-bottom: 37px;
    }

    #pWrite {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display:none;
        border: 10px solid #f8bc40;
        padding: 20px;
        background-color: white;
        width: 550px;
        height: 840px;
        border-radius: 5px;
        z-index:2;
    }

        #pWrite #extra {
            float: right;
        }

    #fLogo {
        width: 20px;
        height: 20px;
        vertical-align: text-bottom;
    }

    .pDetail {
        width: 700px;
        height: 780px;
        border: 10px solid #feb913;
        border-radius:20px;
        padding: 40px;
        display: inline-block;
        background-color: white;
        margin: 0 auto;
        vertical-align: top;
        margin-bottom: 20px;
        text-align:left;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display:none;
        z-index:2;
    }
    #eventCounter {
        display: inline-block;
        font-weight: bold;
        float: right;
        height: 40px;
        line-height: 40px;
        font-size: 1.1em;
        margin-right: 20px;
    }

    #evtNumber {
        color: #ff0053;
    }

    .evtBox {
        width: 400px;
        height: 640px;
        border: 1px solid #dcdcdc;
        padding: 19px;
        display: inline-block;
        background-color: white;
        margin-left: 20px;
        vertical-align: top;
        margin-bottom: 20px;
    }

        .evtBox:nth-child(3n+2) {
            margin-top: 40px;
        }

        .evtBox.side {
        }


        .evtBox:hover {
            width: 400px;
            height: 640px;
            border: 5px solid #feb913;
            padding: 15px;
        }

    .evtImg {
        width: 360px;
        height: 360px;
        margin: 0 auto;
        display: block;
    }

    .evtTitle {
        display: block;
        width: 290px;
        height: 40px;
        background-color: white;
        vertical-align: bottom;
        margin: 0 auto;
        margin-top: 0px;
        line-height: 40px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        position:relative;
        overflow: auto;
    }

    .evtWriter {
        display: block;
        text-align: center;
        color: #787878;
        line-height: 40px;
        height: 40px;
        width: 290px;
        margin: 0 auto;
    }

    .evtBtnDetail {
        background-color: #c8c8c8;
        color: white !important;
        display: block;
        width: 104px;
        height: 30px;
        line-height: 30px;
        font-size: 1.2em;
        font-weight: bold;
        text-align: center;
        margin: 0 auto;
        border-radius: 15px;
    }

        .evtBtnDetail:hover {
            background-color: #feb913;
        }

    .evtConts {
        width: 355px;
        height: 120px;
    }



    #PageNavigation {
        padding-top: 40px;
    }

    .btnClose {
        float: right;
        font-size: 3em;
        text-decoration: none;
        text-decoration-line: none !important;
    }

    .writeTitle {
        color: #f8bc40;
        font-size: 2.5em;
        font-weight: bold;
        text-align: center;
        line-height: 2em;
        display: block;
    }

    .writeSubTitle {
        font-size: 1.1em;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
        display: block;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 1279px) /* Tablet */ {
    img {
        width: 100%;
    }

	.pWinner {
	width: 100%;
	height: 0;
	/* (960 / 1920 * 100) */
	display: inline-block;
	background-color: white;
	margin: 0 auto;
	vertical-align: top;
	position: absolute;
	z-index:2;
}

    #fbLink {
        position:absolute;
        right:15px;
        top:0px;
        z-index:1;
    }
    #fbLink img {
        width:45px;
    }
    body{
        word-break:keep-all;
    }

    #airplane {
        display: none;
    }

     #Introduction {
        margin-bottom: 20px;
    }

    #introTitle {
        font-size: 2.3em;
        font-weight: bold;
        text-align: center;
        display: block;
        margin: 0 auto;
        line-height: 1.5em;
    }

    #introText {
        font-size: 1.2em;
        line-height: 1.3em;
        display: block;
        width:85%;
        margin:0 auto;
        padding: 5px;
    }
    #introTextWrapper{
        text-align:center;
        display:block;
    }
    #radEvent {
        display: inline-block;
        text-align:center;
        margin:0 auto 20px auto;
        background-color: #d90239;
        border-radius: 2em;
        color: white;
        padding: 5px 10px;
        font-size: 0.8em;
        font-weight: bold;
    }

    #eventDuration {
        font-size: 1.2em;
        color: #000;
    }

    #Introduction a > img {
        display: block;
        margin: 0 auto; 
        margin-top: -30px;
        width:90%;
        max-width: 200px;
    }

    .grayBox {
        background-color: #fafafa;
        border: 1px solid #d9d9d9;
        width: 100%;
        padding: 3% 2% 15% 2%;
        border-radius: 2em;
        margin-top: 25px;
        text-align: center;
    }

        .grayBox .gbDot {
            padding: 20px 50px;
            width:unset;
        }

    #ContentsWrapper {
        background-color: #f2f2f2;
        background: url("../images/bg.jpg") repeat-y;
    }

    #Contents {
        text-align:center;
    }

    #likeplease {
        padding-top: 23px;
        width:90%;
    }

    #eventCounter {
    }

    #evts {
        clear: both;
    }

    #FooterWrapper {
        background-color:#f2b735;
    }

    #footer {
        margin: 0 auto;
        padding-top: 45px;
    }

        #footer ol {
            padding-left: 20px;
        }


    #caution {
        display: block;
        font-size: 1.3em;
        color: white;
        text-align:center;
        font-weight: bold;
        padding-bottom: 25px;
    }

    #pWrite {
        position: absolute;
        left: 0px;
        top: 0px;
        border: 10px solid #f8bc40;
        padding: 20px;
        background-color: white;
        width: 100%;
        height: 1030px;
        border-radius: 5px;
        display: none;
        z-index:2;
    }

        #pWrite #extra {
            float: right;
        }

    #fLogo {
        width: 20px;
        height: 20px;
        vertical-align: text-bottom;
    }

     .pDetail {
        width: 100%;
        height: 780px;
        border: 5px solid #feb913;
        border-radius:5px;
        padding: 10px;
        display: inline-block;
        background-color: white;
        margin: 0 auto;
        vertical-align: top;
        margin-bottom: 20px;
        text-align:left;
        position: absolute;
        left: 0px;
        top: 0px;
        transform:none;
        display:none;
        z-index:2;
    }

     .pDetail>.evtConts{
         height:325px;
     }

    #eventCounter {
        display: inline-block;
        font-weight: bold;
        float: right;
        height: 40px;
        line-height: 40px;
        font-size: 1.1em;
        margin-right: 20px;
    }

    #evtNumber {
        color: #ff0053;
    }

    .evtBox {
        width: 300px;
        height: 523px;
        border: 1px solid #dcdcdc;
        padding: 15px;
        display: inline-block;
        background-color: white;
        margin: 0 auto;
        vertical-align: top;
        margin-bottom: 20px;
        text-align:left;
    }

        .evtBox:nth-child(2n) {
            margin-top:20px;
        }

        .evtBox.side {
        }


        .evtBox:hover {
            width: 300px;
            height: 523px;
            border: 5px solid #feb913;
            padding: 11px;
        }

    .evtImg {
        width: 268px;
        height: 314px;
        margin: 0 auto;
        display: block;
    }

    .evtTitle {
        display: block;
        width: 100%;
        height: 40px;
        background-color: white;
        vertical-align: bottom;
        margin: 0 auto;
        margin-top: -40px;
        line-height: 40px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        position:relative;
        overflow: auto;
    }

    .evtWriter {
        display: block;
        text-align: center;
        color: #787878;
        line-height: 40px;
        height: 40px;
        width: 100%;
        margin: 0 auto;
    }

    .evtBtnDetail {
        background-color: #c8c8c8;
        color: white !important;
        display: block;
        width: 104px;
        height: 30px;
        line-height: 30px;
        font-size: 1.2em;
        font-weight: bold;
        text-align: center;
        margin: 0 auto;
        border-radius: 15px;
    }

        .evtBtnDetail:hover {
            background-color: #feb913;
        }

    .evtConts {
        width: 268px;
        height: 100px;
    }



    #PageNavigation {
        padding-top: 40px;
    }

    .btnClose {
        float: right;
        font-size: 3em;
        text-decoration: none;
        text-decoration-line: none !important;
    }

    .writeTitle {
        color: #f8bc40;
        font-size: 2.5em;
        font-weight: bold;
        text-align: center;
        line-height: 2em;
        display: block;
    }

    .writeSubTitle {
        font-size: 1.1em;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
        display: block;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 320px) /* Mobile */ {
    img {
        width: 100%;
    }
	
	.pWinner {
	width: 100%;
	height: 0;
	/* (960 / 1920 * 100) */
	display: inline-block;
	background-color: white;
	margin: 0 auto;
	vertical-align: top;
	position: absolute;
	z-index:2;
}

    #fbLink {
        position:absolute;
        right:10px;
        top:0px;
        z-index:1;
    }
    #fbLink img {
        width:35px;
    }
    body{
        word-break:keep-all;
    }

    #airplane {
        display: none;
    }

     #Introduction {
        margin-bottom: 20px;
    }

    #introTitle {
        font-size: 2.3em;
        font-weight: bold;
        text-align: center;
        display: block;
        margin: 0 auto;
        line-height: 1.5em;
    }

    #introText {
        font-size: 1.2em;
        line-height: 1.3em;
        display: inline-block;
        padding: 5px;
        min-height: 200px;
        width: 100%;
        margin: 0 auto;
    }

    #radEvent {
        display: block;
        width:30%;
        text-align:center;
        margin:0 auto 20px auto;
        background-color: #d90239;
        border-radius: 2em;
        color: white;
        padding: 5px 10px;
        font-size: 0.8em;
        font-weight: bold;
    }

    #eventDuration {
        font-size: 1.2em;
        color: #000;
        padding-left: 20px;
    }

    #Introduction a > img {
        display: block;
        margin: 0 auto;
        margin-top: -20px;
        width:90%;
    }

    .grayBox {
        background-color: #fafafa;
        border: 1px solid #d9d9d9;
        width: 100%;
        padding: 3% 2% 15% 2%;
        border-radius: 2em;
        margin-top: 25px;
        text-align: center;
    }

        .grayBox .gbDot {
            padding: 20px 50px;
            width:unset;
        }

    #ContentsWrapper {
        background-color: #f2f2f2;
        background: url("../images/bg.jpg") repeat-y;
        width:100%;
    }

    #Contents {

    }

    #likeplease {
        padding-top: 23px;
        width:100%;
    }

    #eventCounter {
    }

    #evts {
        clear: both;
    }

    #FooterWrapper {
        background-color:#f2b735;
    }

    #footer {
        margin: 0 auto;
        padding-top: 45px;
    }

        #footer ol {
            padding-left: 20px;
        }


    #caution {
        display: block;
        font-size: 1.3em;
        color: white;
        text-align:center;
        font-weight: bold;
        padding-bottom: 25px;
    }

    #pWrite {
        position: absolute;
        left: 0px;
        top: 0px;
        border: 10px solid #f8bc40;
        padding: 20px;
        background-color: white;
        width: 100%;
        height: 1030px;
        border-radius: 5px;
        display: none;
        z-index:2;
    }

        #pWrite #extra {
            float: right;
        }

    #fLogo {
        width: 20px;
        height: 20px;
        vertical-align: text-bottom;
    }

     .pDetail {
        width: 100%;
        height: 780px;
        border: 5px solid #feb913;
        border-radius:5px;
        padding: 10px;
        display: inline-block;
        background-color: white;
        margin: 0 auto;
        vertical-align: top;
        margin-bottom: 20px;
        text-align:left;
        position: absolute;
        left: 0px;
        top: 0px;
        transform:none;
        display:none;
        z-index:2;
    }

     .pDetail>.evtConts{
         height:325px;
     }

    #eventCounter {
        display: inline-block;
        font-weight: bold;
        float: right;
        height: 40px;
        line-height: 40px;
        font-size: 1.1em;
        margin-right: 20px;
    }

    #evtNumber {
        color: #ff0053;
    }

    .evtBox {
        width: 300px;
        height: 523px;
        border: 1px solid #dcdcdc;
        padding: 15px;
        display: inline-block;
        background-color: white;
        vertical-align: top;
        margin-bottom: 20px;
    }

        .evtBox.side {
        }


        .evtBox:hover {
            width: 300px;
            height: 523px;
            border: 5px solid #feb913;
            padding: 11px;
        }

    .evtImg {
        width: 268px;
        height: 314px;
        margin: 0 auto;
        display: block;
    }

    .evtTitle {
        display: block;
        width: 100%;
        height: 40px;
        background-color: white;
        vertical-align: bottom;
        margin: 0 auto;
        margin-top: -40px;
        line-height: 40px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        position:relative;
        overflow: auto;
    }

    .evtWriter {
        display: block;
        text-align: center;
        color: #787878;
        line-height: 40px;
        height: 40px;
        width: 100%;
        margin: 0 auto;
    }

    .evtBtnDetail {
        background-color: #c8c8c8;
        color: white !important;
        display: block;
        width: 104px;
        height: 30px;
        line-height: 30px;
        font-size: 1.2em;
        font-weight: bold;
        text-align: center;
        margin: 0 auto;
        border-radius: 15px;
    }

        .evtBtnDetail:hover {
            background-color: #feb913;
        }

    .evtConts {
        width: 268px;
        height: 100px;
    }



    #PageNavigation {
        padding-top: 40px;
    }

    .btnClose {
        float: right;
        font-size: 3em;
        text-decoration: none;
        text-decoration-line: none !important;
    }

    .writeTitle {
        color: #f8bc40;
        font-size: 2.5em;
        font-weight: bold;
        text-align: center;
        line-height: 2em;
        display: block;
    }

    .writeSubTitle {
        font-size: 1.1em;
        font-weight: bold;
        text-align: center;
        line-height: 1.5em;
        display: block;
        margin-bottom: 20px;
    }
}


#PageNavigation {
    font-size:1.2em;
    line-height:2em;
    padding:10px; 0px;
}
#PageNavigation a{
    display:inline-block;
    padding:0px 10px;
}
#PageNavigation .active {
    background-color:#232f84;
    color:white;
    display:inline-block;
    border-radius: 50%;
    padding:0px 10px;
    font-size:1.1em;
    font-weight:bold;
}

.pWinner img {
	position:relative;
}
.pWinner a {
	position:absolute;
	right:10px;
	display:block;
	z-index:2;
	top:10px;
}