﻿@charset 'utf-8';
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

#doc{height:33px;background-color:#fff;width:100%;border-bottom:1px solid #ebebeb;}
#gnb *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;margin-bottom:0;}
#gnb{border:0;}
#digital-ad-container{font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕','돋움',Dotum,sans-serif;}
.header{width:100%;height:40px;background:#fff;z-index:300;}
.logo-wrapper{width:100%;max-width:1060px;margin:0 auto;}
.header .logo{display:inline-block;float:left;}
.header .logo a{display:block;overflow:hidden;margin:11px 15px;width:72px;height:18px;background:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/daewoong/k_native_common.png) no-repeat;}
.header .digital-ad-logo{display:block;float:right;overflow:hidden;margin:11px 15px;width:60px;height:18px;background:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/daewoong/k_native_common.png) no-repeat -95px 0;}
.slick-prev,.slick-next{position:absolute;font-size:0;line-height:0;top:50%;display:block;width:78px;height:120px;background:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_sp.png) no-repeat 0 -640px;margin-top:-60px;padding:0;cursor:pointer;color:transparent;border:none;outline:none;}
.slick-prev{left:0;}
.slick-next{right:0;background-position:-200px -640px;}
#naver_dic_audio_controller{display:none;}

/* Layout */
html,body{height:100%;}
#digital-ad-container{position:relative;}
.slick-slide{padding:20px 20px 30px;*padding:0;height:100%;text-align:center;vertical-align:middle;position:relative;zoom:1;border-top:1px solid #999;}
.slick-list{width:100%;height:100%;}
.slick-track{height:100%;}
#slide1 h1{margin-top:6%;font-size:70px;color:#3487c7;}
.slide_cont{position:relative;width:640px;height:100%;/*width:580px;*width:600px;*/margin:0 auto;z-index:10;*cursor:default;}

/* Background */
.slide{background-color:#f7f7f9;background-repeat:no-repeat;background-position:50% 100%;background-size:auto 100%;}
#slide1{background-color:#cceaf1;background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg1.jpg);}
#slide2,#slide3{background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg2.jpg)}
#slide4,#slide5{background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg3.jpg)}
#slide6,#slide7{background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg4.jpg)}
#slide8,#slide9{background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg5.jpg)}
#slide10,#slide11{background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg6.jpg)}
#slide12,#slide13{background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg7.jpg)}
#slide14,#slide15{background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg8.jpg)}
#slide16,#slide17{background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg9.jpg)}
#slide18{background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg10.jpg);background-position:50% 0;*background-position:50% 40%;}
#slide20,#slide21{background:#cbe3ec url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_bg11.jpg) no-repeat 50% 0;background-size:auto 100%;}
.bg_white{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0.8;-ms-filter:alpha(opacity=80);filter:alpha(opacity=80);}
.bg_pattern{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_pattern.png) repeat;}

/* icon */
.ico_answer{display:block;overflow:hidden;width:104px;height:104px;margin:30px auto 0;background:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_sp.png) no-repeat 0 -480px;text-indent:-999px;}
.ico_answer.x{width:94px;height:94px;background-position:-198px -480px;}

/* button */
.quiz_a{overflow:hidden;zoom:1;margin-top:2.5%;}
.btn_answer{display:block;float:right;position:relative;padding:0 10px;width:48%;*width:46%;cursor:pointer;}
.btn_answer span{display:block;position:absolute;top:0;width:10px;height:160px;background:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_sp.png) no-repeat;}
.btn_answer span.front{left:0;}
.btn_answer span.back{right:0;background-position:100% 0;}
.btn_answer strong{display:block;height:160px;*height:156px;background:#999;border-top:2px solid #919191;border-bottom:2px solid #919191;}
.btn_answer:hover span.front,.quiz_a.v2 .btn_answer span.front{background-position:0 -220px;}
.btn_answer:hover strong,.quiz_a.v2 .btn_answer strong{background:#55a1dc;border-color:#5199d1;}
.btn_answer:hover span.back,.quiz_a.v2 .btn_answer span.back{background-position:100% -220px;}
.quiz_a .btn_answer:first-child{float:left;}
.quiz_a.v2{position:relative;}
.quiz_a.v2 .btn_answer{width:100%;*width:95%;}
.quiz_a.v2 .answer{position:absolute;top:10px;left:20px;font-size:32px;font-weight:normal;color:#bbd9f1;z-index:10;letter-spacing:-1px;}
.quiz_dsc{width:100%;margin:0 auto;}
.quiz_dsc li{text-align:left;padding-left:20px;margin-top:2%;*margin-top:1%;background:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/i_kolon_lst.png) no-repeat 0 16px;font-size:28px;*font-size:24px;*line-height:30px;line-height:36px;color:#333;letter-spacing:-2px;}
.quiz_dsc li:first-child{margin-top:4%;}
.quiz_dsc .point{font-weight:normal;color:#3487c7;}

/* sns */
.sns_area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;}
.sns_cont{overflow:hidden;display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}
.sns_cont a{display:block;float:left;overflow:hidden;width:80px;height:80px;margin-left:50px;background:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/kolon/k_kolon_sp.png) no-repeat 0 -820px;text-indent:-999px;}
.sns_cont a.face{margin-left:0;}
.sns_cont a.twit{background-position:-130px -820px;}
.sns_cont a.kakao{background-position:-260px -820px;}

/* content */
.quiz_q{display:block;position:relative;min-height:116px;margin-top:5px;padding-left:80px;line-height:45px;*line-height:60px;font-weight:400;letter-spacing:-2px;*letter-spacing:-5px;text-align:left;}
.quiz_q strong{font-size:45px;color:#333;font-weight:400;}
.quiz_q span{display:block;position:absolute;top:0;left:0;font-size:47px;color:#3487c7;}
#slide18 .quiz_dsc{position:absolute;top:48%;left:0;}
#slide18 .quiz_dsc ul{margin:0 auto;}
#slide19 .img{height:55%;*height:45%;padding:3% 0;}
#slide19 img{display:block;height:100%;width:auto;margin:0 auto;}
#slide19 .quiz_dsc{text-align:left;height:40%}
#slide19 .quiz_dsc dt{font-weight:normal;font-size:45px;*font-size:40px;color:#333;letter-spacing:-1px;}
#slide19 .quiz_dsc li{margin-top:1%;}
#slide20 .slide_cont{margin-top:0;}
#slide20 .antar_img,#slide21 .antar_img{height:100%;padding:3% 0;}
#slide20 .antar_img img,#slide21 .antar_img img{display:inline-block;*display:inline;*zoom:1;height:100%;*height:90%;width:auto;margin:0 auto;vertical-align:middle;}
#slide20 .align_blank,#slide21 .align_blank{display:inline-block;*display:inline;*zoom:1;width:0;height:100%;vertical-align:middle;}
#slide21 .slide_cont{z-index:0;*z-index:-1;}

@media (max-width:739px) {
    #digital-ad-container{margin-top:0;}
    .slick-slide{padding:0.3% 10px 0.3%;}
    .slide_cont{width:300px;}
    .slick-prev, .slick-next{width:39px;height:60px;margin-top:-30px;background-position:0 -320px;background-size:175px auto;}
    .slick-next{background-position:-100px -320px;}
    .header{top:0;}
    #slide1 h1{font-size:45px;margin-top:10%;}
    .quiz_q{min-height:58px;line-height:23px;padding-left:45px;margin-top:12px;font-weight:normal;}
    .quiz_q strong{font-size:25px;font-weight:normal;}
    .quiz_q span{font-size:26px;}
    .quiz_a{margin-top:5%}
    .quiz_a.v2 .answer{top:5px;left:10px;font-size:16px;}
    .btn_answer{height:80px;padding:0 5px;}
    .btn_answer span{width:5px;height:80px;background-size:175px auto;}
    .btn_answer strong{height:80px;background:#999;border-top:1px solid #919191;border-bottom:1px solid #919191;}
    .btn_answer:hover span.front,.quiz_a.v2 .btn_answer span.front{background-position:0 -110px;}
    .btn_answer:hover span.back,.quiz_a.v2 .btn_answer span.back{background-position:100% -110px;}
    .ico_answer{width:52px;height:52px;margin:15px auto 0;background-size:175px auto;background-position:0 -240px;}
    .ico_answer.x{width:47px;height:47px;background-position:-99px -240px;}
    .quiz_dsc li{padding-left:10px;margin-top:3%;font-size:16px;line-height:20px;letter-spacing:-1px;background-size:3px auto;background-position:0 9px;}
    .quiz_dsc li:first-child{margin-top:5%;}

    #slide19 img{width:auto;height:100%;max-width:300px;max-height:260px;margin:10px auto;}
    #slide19 .quiz_dsc dt{font-size:25px;}
    #slide19 .quiz_dsc li{margin-top:0%}
    #slide19 .quiz_dsc li:first-child{margin-top:1%}
    .sns_cont a{width:40px;height:40px;background-position:0 -410px;margin-left:25px;background-size:175px auto;}
    .sns_cont a.twit{background-position:-65px -410px}
    .sns_cont a.kakao{background-position:-130px -410px}
    #slide19.slick-slide{padding-top:0.1%;}
    #slide19 .img{padding:0;}
    #slide20 .antar_img img, #slide21 .antar_img img{max-width:280px;height:auto;}
}

/* 모바일 이미지 적용 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    html, body{min-height:100%;}
    .header .logo a,.header .digital-ad-logo
    {background-image:url(//digitalspecial.joongang.co.kr/_o/img/ui_mobile/native_ad/daewoong/dw2/k_native_common_x2.png);background-size:250px auto;}
    .slide_cont{overflow-y:auto;}
    .slick-prev,.slick-next{display:none !important;}
}

/* 모바일 가로 */
@media only screen and (max-device-width : 1024px) and (orientation : landscape) {
    .slick-slide{padding:0.1% 10px 0.1%;}
    #slide19 img{height:100%;width:auto}
    }