/*이벤트페이지 메인 */

#eventWrap { width: 1200px; margin:0 auto; }

.confirm-area { width:100%; margin-top:4%; }
.confirm-area .title { width:50%; margin: 0 auto; font-size: 30px; font-weight: bold; padding: 0 0 30px; text-align:center; }
.confirm-area .confirm-desc { width:60%; margin: 30px auto 50px; padding: 50px 0; font-size:18px; font-weight:300; color: #666; text-align: center; border:1px solid #ccc; background-color: #f5f5f5; }

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
#content { width: 1200px; min-height: 550px; margin: 0 auto; font-family: 'NanumSquare', sans-serif;}
.promInfo { position: relative; }
.promInfo img { vertical-align: top; width: 100%; }
.tab-menu { width:1200px; margin:0 auto; }
.tab-menu .tabs { margin: 0; padding: 0; list-style: none; }
.tab-menu .tabs li {  display: inline-block; width: 49.9%; height:70px; line-height:70px; text-align: center; font-weight:600; font-size:25px; margin-bottom:0.1%; background: #d9d9d9; color: #6a6969; cursor: pointer;}
.tab-menu .tabs .tab-list-01 { background-image: url(https://static.skmagic.com/pc/asset/images/event/202105/logo_grande_black.png); background-color: #d9d9d9; background-repeat: no-repeat; background-position: center; background-size:200px;}
.tab-menu .tabs .tab-list-01.current { background-image: url(https://static.skmagic.com/pc/asset/images/event/202105/logo_grande_white.png); background-color: #e51937; background-repeat: no-repeat; background-position: center; background-size:200px;}
.tab-menu .tabs .tab-list-02 { background-image: url(https://static.skmagic.com/pc/asset/images/event/202105/logo_dresser_black.png); background-color: #d9d9d9; background-repeat: no-repeat; background-position: center; background-size:200px;}
.tab-menu .tabs .tab-list-02.current { background-image: url(https://static.skmagic.com/pc/asset/images/event/202105/logo_dresser_white.png); background-color: #e51937; background-repeat: no-repeat; background-position: center; background-size:200px;}
.tab-menu > ul > li:nth-child(1) { float:left; }
.tab-menu > ul > li:nth-child(2) { float:right; }
.tab-content { display: none; }
.tab-content.current { display: inherit; }
.tab-content.current img { width:100%; }

.btn_copy { border: 0; outline: 0; background: none; width: 195px; height: 117px; cursor: pointer; position : absolute; top: 2764px; left: 867px; }
.link_join { background: none; width: 329px; height: 76px; cursor: pointer; position: absolute; top: 3102px; left: 420px; }

/*응모페이지*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

.join-page { display:none; position :fixed; top:0; width:800px; height:100%; overflow: auto; overflow-x: hidden; margin:0 200px; background: #fff; z-index:9999;}

input, p, div, label {font-family: 'Noto Sans KR', sans-serif;}

.join-section > input {display:none;}
.join-background { display:none; background-color: rgba(0,0,0,0.8); position:fixed; width:100vw; height: 100vh; top:0; left:0; z-index:9998;}

.formArea {width:100%; overflow-x:hidden; white-space:nowrap; font-size:10px; padding:0; margin:0 auto; }
.formArea > li {display:inline-block; vertical-align:top; width:100%; }
.formArea > li > div.survey_sheet {display:flex; flex-direction: column; justify-content: center; align-items:center; position:relative; min-width:100%;}
.formArea > li > div.survey_sheet > p {display:block; position:relative;}

.btn-close { position: absolute; top: 20px; right: 20px; cursor: pointer;}
.banner-area { width:100%; margin:0 auto; }
.banner-area img { width:100%; }

.move_button { font-size:14px; display:flex; flex-direction: row; justify-content: center; align-items: center; margin:30px 0; }
.move_button .prev { padding:15px 50px; margin:0 5px; background:#373737; color:#fff; text-align: center; border-radius:5px; cursor:pointer; }
.move_button .next { padding:15px 50px; margin:0 5px; background:#373737; color:#fff; text-align: center; border-radius:5px; cursor:pointer; }
.move_button .submit { padding:15px 50px; margin:0 5px; background:#E51837; color:#fff; text-align: center; border-radius:5px; cursor:pointer; border:none; }
.move_button .btn_confirm { padding:15px 50px; margin:0 5px; background:#E51837; color:#fff; text-align: center; border-radius:5px; cursor:pointer; }
.move_button .btn_confirm a { color:#fff; text-decoration: none; }

.require { color:#ff5577; color: #e51937; font-weight: bold; padding-right: 5px;}
.radio-wrap { display: inline-flex; align-items: center; }
.radio-wrap label { padding-right:15px; }
input[type='radio'], input[type='radio']:checked { appearance: none; width: 1rem; height: 1rem; border-radius: 100%; }
input[type='radio'] { background-color: #fff; border: 1px solid #ccc; margin-right:10px; }
input[type='radio']:checked { background-color: #fff;  box-shadow: 0 0 0 4px #666666 inset; color:#fff; }
input[type='checkbox'], input[type='checkbox']:checked { appearance: none; width: 1rem; height: 1rem; }
input[type='checkbox'] { background-color: #fff; border: 1px solid #ccc; margin:0; margin-right:10px; }
input[type='checkbox']:checked { background-color: #fff;  box-shadow: 0 0 0 4px #666666 inset; color:#fff; }

.personal-info { width:100%; margin-top:4%;}
.personal-info table { width:85%; margin:0 auto; }
.personal-info table tr { width:100%; height:52px; }
.personal-info table tr td.table-title { width:20%; height:52px; font-weight:bold; font-weight: 400; color:#000; }
.personal-info table tr td { width:80%; padding:5px 0; vertical-align: baseline; font-weight: 400; color: #6a6969;}
.personal-info table tr td input[type=text] { width:100%; padding:10px; border:1px solid #ccc; border-radius:5px; font-weight:300; }
.personal-info table tr td input[name=dispPostNo] { width:73%; }
.personal-info table tr td span.addr-btn { width:20%; padding:11px 24px; background:#373737; color:#fff; border-radius:5px; cursor:pointer; font-size:13px; font-weight:300; }

.policy-info { width:82%; margin:30px auto; border:1px solid #ccc; padding:15px; font-size:15px; }
.policy-info .agree-btn-wrap { display:flex; flex-direction: row; justify-content: space-between; align-items: center; }
.policy-info .agree-btn-wrap p { display:flex; flex-direction: row; justify-content: flex-start; align-items: center; font-weight:400; color:#6a6969; margin:10px 0;}
.policy-info .agree-btn-wrap .agree_btn { display:block; padding:5px 15px; border:1px solid #ccc; border-radius:5px; cursor:pointer; font-size:13px; font-weight:400; color:#6a6969; }
.policy-info .popup-area { display:none; position:absolute; top:30%; left:20%; z-index:1001; width:60%; height:auto; background:#fff; }
.policy-info .popup-area::-webkit-scrollbar { display:none; }
.policy-info .popup-background { display:none; position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.8);}
.policy-info hr { border:1px solid #e2e2e2; margin:15px 0; }
.policy-info-wrap { width:calc(100% - 40px); display:flex; flex-direction: column; justify-content: center; align-items: center; padding:30px 20px; }
.policy-info-wrap .policy-info-title { width:100%; font-size:24px; text-align: center; font-weight:600; }
.policy-info-wrap .policy-info-desc { width:calc(100% - 60px); padding:20px; margin:30px 40px; color:#6a6969; border:1px solid #ccc; font-size:14px; line-height:24px; white-space: normal; }
.policy-info-wrap .policy-info-warning { width:100%; padding:0px 20px 50px; color:#ff5577; text-align: center; font-size:14px; font-weight:600; white-space: normal;}
.policy-info-wrap .policy-info-btn-wrap { width:100%; }
.policy-info-wrap .policy-info-btn-wrap .policy-info-agree-btn { width:20%; margin:0 auto; font-size:20px; background-color: #373737; color:#fff; padding:10px 30px; text-align: center; cursor:pointer; border-radius:10px; }

.sns-info { width:100%; margin-top:4%;}
.sns-info .sns-title { width:80%; margin: 0 auto; font-size: 16px; font-weight: 400; padding: 0 0 30px; white-space: normal;}
.sns-info table { width:80%; margin:0 auto; }
.sns-info table tr { width:100%; height:52px; }
.sns-info table tr td.table-title { width:20%; height:52px; font-weight:bold; font-weight: 400; color:#000; }
.sns-info table tr td { width:80%; padding:5px 0; vertical-align: baseline; font-weight: 400; color: #6a6969;}
.sns-info table tr td input[type=text] { width:100%; padding:10px; border:1px solid #ccc; border-radius:5px; font-weight:300; }
.sns-info table tr td input[name=dispPostNo] { width:73%; }
.sns-info table tr td span.addr-btn { width:20%; padding:11px 24px; background:#373737; color:#fff; border-radius:5px; cursor:pointer; font-size:13px; font-weight:300; }
.sns-info .sns-etc-desc { width: 80%; margin: 0 auto; font-size: 14px; font-weight: 300; color: #B7B7B7; margin: 10px auto; line-height: 24px;}
.sns-info .sns-desc { width: 80%; margin: 0 auto; font-size: 14px; font-weight: 300; color: #9b9b9b; margin: 10px auto; line-height: 24px;}
.sns-info .prd-info { width:100%; margin-top:5%;}
.sns-info .prd-info .sns-title { margin: 0 auto; font-size: 16px; font-weight: 500; padding: 0 0 30px; text-align: center; }
.sns-info .prd-info table { width:80%; margin:0 auto; }
.sns-info .prd-info table tr { width:100%; height:52px; }
.sns-info .prd-info table tr td.table-title { width:20%; height:52px; font-weight:bold; font-weight: 400; color:#000; }
.sns-info .prd-info table tr td select { width:100%; padding:10px; border:1px solid #ccc; border-radius:5px; font-weight:300; }
.sns-info .prd-info table tr td span.addr-btn { width:20%; padding:11px 24px; background:#373737; color:#fff; border-radius:5px; cursor:pointer; font-size:13px; font-weight:300; }
.sns-info .prd-desc { width: 80%; margin: 0 auto; font-size: 14px; font-weight: 300; color: #9b9b9b; margin: 10px auto 50px; line-height: 24px; white-space:initial;}

.channel-info { width:100%; margin-top:4%;}
.channel-info .sns-title { width:80%; margin: 0 auto; font-size: 16px; font-weight: 400; padding: 0 0 30px; }
.channel-info .title { width:80%; margin: 0 auto; font-size: 30px; font-weight: bold; padding: 0 0 30px; text-align:center; }
.channel-info table { width:80%; margin:0 auto; }
.channel-info table tr { width:100%; height:52px; }
.channel-info table tr td.table-title { width:20%; height:52px; font-weight:bold; font-weight: 400; color:#000; }
.channel-info table tr td { width:80%; padding:5px 0; vertical-align: baseline; font-weight: 400; color: #6a6969;}
.channel-info table tr td input[type=text] { width:100%; padding:10px; border:1px solid #ccc; border-radius:5px; font-weight:300; margin-bottom:5px; }
.channel-info table tr td input[name=dispPostNo] { width:73%; }
.channel-info table tr td span.addr-btn { width:20%; padding:11px 24px; background:#373737; color:#fff; border-radius:5px; cursor:pointer; font-size:13px; font-weight:300; }
.channel-info .sns-etc-desc { width: 80%; margin: 0 auto; font-size: 14px; font-weight: 300; color: #B7B7B7; margin: 10px auto; line-height: 24px;}
.channel-info .sns-desc { width: 80%; margin: 0 auto; font-size: 14px; font-weight: 300; color: #9b9b9b; margin: 10px auto; line-height: 24px; white-space: initial;}
.channel-info .prd-info { width:100%; margin-top:5%;}
.channel-info .prd-info .sns-title { margin: 0 auto; font-size: 16px; font-weight: 500; padding: 0 0 30px; text-align: center; }
.channel-info .prd-info table { width:80%; margin:0 auto; }
.channel-info .prd-info table tr { width:100%; height:52px; }
.channel-info .prd-info table tr td.table-title { width:20%; height:52px; font-weight:bold; font-weight: 400; color:#000; }
.channel-info .prd-info table tr td select { width:100%; padding:10px; border:1px solid #ccc; border-radius:5px; font-weight:300; }
.channel-info .prd-info table tr td span.addr-btn { width:20%; padding:11px 24px; background:#373737; color:#fff; border-radius:5px; cursor:pointer; font-size:13px; font-weight:300; }
.channel-info .prd-desc { width: 80%; margin: 0 auto; font-size: 14px; font-weight: 300; color: #9b9b9b; margin: 10px auto 50px; line-height: 24px; white-space:initial;}

@media screen and (max-width: 768px) {
    .promInfo { width: 100vw; }
    .tab-menu { width: 100vw; margin:0;}
    .tab-menu { width: 100vw; margin:0;}
    .tab-menu .tabs .tab-list { width:49.7%; height:50px; line-height: 50px; font-size: 15px; font-weight:400; margin-bottom:0.3%; }

    .tab-menu .tabs .tab-list-01 {  background-size:150px;}
    .tab-menu .tabs .tab-list-01.current { background-size:150px;}
    .tab-menu .tabs .tab-list-02 {background-size:150px;}
    .tab-menu .tabs .tab-list-02.current {  background-size:150px;}

    .btn_copy { width:17vw; height:11vw; top:230vw; left:72vw; }
    .link_join { width:28vw; height:7vw; top:258vw; left:35vw; }
}

@media screen and (max-width: 768px) {
    #eventWrap { width: 100vw; }
    input:focus { outline:none; }
    body { margin:0; }
    .join-page { width: 100vw; margin:0; left:0; top:60px; padding-bottom:100px;}
    .formArea { width: 100vw; }
    .formArea > li > div.survey_sheet { width: 90vw; margin: 0 auto; min-width:0; padding-bottom:100px;}
    
    .banner-area { width: 100%; }
    .banner-area img { width: 100%; }

    
    .personal-info { width: 100%; }
    .personal-info table { width: 100%; }
    .personal-info table tr td { font-size: 10px; }
    .personal-info table tr td.table-title { font-size: 12px; width: 20%; }
    .personal-info table tr td input[type=text] { font-size: 10px; }
    .personal-info table tr td input[name=address] { width: 41vw; float: left; }
    .personal-info table tr td span.addr-btn { width: 18vw; padding: 11px 15px; float: right; font-size:10px; text-align:center;}

    .policy-info { width: 90%; font-size:10px; }
    .policy-info .agree-btn-wrap .agree_btn { font-size: 10px; }
    .policy-info .popup-area { position: fixed; top: 10%; left:10%; width: 80%; }
    .policy-info-wrap .policy-info-title { font-size: 13px; }
    .policy-info-wrap .policy-info-desc { font-size: 10px; }
    .policy-info-wrap .policy-info-desc p { white-space: normal; }
    .policy-info-wrap .policy-info-warning { font-size:10px; white-space: normal; }
    .policy-info-wrap .policy-info-btn-wrap .policy-info-agree-btn { font-size: 10px; }

    .sns-info .sns-title { width: 100%; font-size:12px; white-space:normal; }
    .sns-info table { width:100%; }
    .sns-info table tr td.table-title { font-size:12px; }
    .sns-info table tr td input[type=text] { font-size: 10px; }
    .sns-info .sns-etc-desc { width: 100%; font-size:10px; line-height:16px; white-space: normal; }
    .sns-info .sns-desc { width:100%; font-size:10px; line-height:16px; white-space: normal; }
    .sns-info .prd-info table { width:100%; }
    .sns-info .prd-info table tr td select {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none; 
        
        font-family: "Noto Sansf KR", sans-serif;
        font-size: 10px;
        font-weight: 400;
        line-height: 1.5;
        
        color: #666;
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMjFsLTEyLTE4aDI0eiIvPjwvc3ZnPg==) no-repeat 95% 50%;
        background-size: 10px;
        background-color: #fff;
        
        padding: 10px;
        margin: 0;
        
        border: 1px solid #ccc;
        border-radius: 5px;}
    .sns-info .prd-desc { width:100%; font-size: 10px; line-height:16px; white-space: normal;}

    .channel-info .title { width:100%; font-size: 17px; }
    .channel-info .sns-title { width: 100%; font-size: 14px; padding: 20px 0; font-weight:500;}
    .channel-info table { width:100%; }
    .channel-info table tr td.table-title { font-size: 12px; }
    .channel-info table tr td input[type=text] { font-size: 10px; }
    .channel-info .sns-desc { width: 100%; font-size:10px; line-height:16px; }

    .confirm-area .title { width: 100%; font-size:17px; }
    .confirm-area .confirm-desc { width:80%; font-size:14px; }

}