@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap'); /* wrap */ .skip-nav{position:absolute;left:0;top:-30px;z-index:9999;} .skip-nav li{position:absolute;left:0;top:0;width:200px;} .skip-nav a{position:absolute;left:0;top:0;display:block;width:100%;height:30px;line-height:30px;color:#fff;background:#002960;} .skip-nav a:focus{top:30px;} .mobile .skip-nav{display:none;} .container{background: url(../img/event/allBg.png)no-repeat center top #121328;} .content {width:1100px;margin:0 auto;} .content > div{padding-bottom: 50px;} body{font-family: "Noto Sans KR", "dotum", "Arial"; font-size: 16px; letter-spacing: -0.7px;} strong.title{display: block; padding-bottom: 20px; font-size: 36px; font-weight: 500; color:#fff;} div.box{padding:40px; border-radius: 20px; position: relative; } div.box > strong{display:block; text-align:center; font-size: 32px; color:#222; letter-spacing: -1.8px; padding-bottom: 26px;} .listCon.minus li{padding-left: 15px; position: relative; line-height: 160%; font-size: 24px; color:#000} .listCon.minus li::before{content: '';display: block; width: 7px; height: 2px; background: #000; position: absolute; left:0; top:16px;} p.copy{font-size: 27px; color:#fff; text-align: center; padding-bottom: 30px;} .section0{display: flex; align-items: center ; padding:30px 0 70px 0} .section0 img{padding-right: 30px;} .section0 p{display:inline-block; font-size: 46px; color:#fff} .section0 p span{font-weight: 600;} .section1 .box{background:#fbdc5b;} .section1 .box:after{content:''; display: block; position:absolute; background: url(../img/event/section01_icon.png)no-repeat; width: 305px; height: 225px; right: -180px;; top:45%;} .section1 div.info{display: flex; margin-bottom:10px;} .section1 div.info > strong{min-width: 130px; height: 46px; font-weight:500; text-align: center; line-height: 46px; color:#fff; font-size: 24px; border-radius: 30px; margin-right: 30px;} .section1 div.info > strong.pink{background: #b50679;} .section1 div.info > strong.pink.type2{font-size: 21px; letter-spacing: -0.8px;} .section1 div.info > strong.blue{background: #0665b5;} .section1 div.info > p{font-size:24px; color:#000; padding-top: 5px; line-height: 150%;} .section1 div.info > p span.pink{color:#b50679; font-weight: 600;} .section1 div.info > p span.subTxt{font-size: 18px; padding-left: 20px;} .section1 div.info > ul{width:100%} .section1 div.info > ul li{display: flex; font-size: 24px; color:#000; line-height: 160%; letter-spacing: -1.6px;} .section1 div.info > ul li p{padding-top: 3px; } .section1 div.info > ul li span{padding-right: 5px;padding-top: 3px;} .section2 div.box{background:#8ccef7; text-align: center;} .section2 div.box:after{content:''; position: absolute; background: url(../img/event/section02_icon.png)no-repeat; width:231px; height:169px; left:-170px; top:50%; transform: translateY(-50%);} .section2 div.box ul{ text-align: left; padding-left: 120px;} .section3 div.box{background:#d38cf7; text-align: center;padding: 60px } .section3 div.box:after{content:''; position: absolute; background: url(../img/event/section03_icon.png)no-repeat; width: 312px; height: 184px; right: -150px; top:50%; transform: translateY(-50%);} .section3 div.box ul{ text-align: left; padding-left: 210px;} @media all and (max-width:1500px) { div.box:after{display: none !important;} } @media all and (max-width:1200px) { .container{padding: 0 20px; background-size: auto 100%;} .content{width: auto;} .section0{justify-content: center;} } @media all and (max-width:960px) { .section0{flex-direction: column;} .section0 p{font-size: 36px;} strong.title{font-size: 28px;} div.box > strong{font-size: 28px;} ul.listCon{padding-left: 0 !important;} } @media all and (max-width:640px) { .container{padding: 0 10px;} .content > div{padding-bottom: 30px;} div.box{padding: 20px;} div.box > strong{font-size: 18px; padding-bottom: 15px;} .listCon.minus li{font-size: 16px; padding-left: 10px;} .listCon.minus li::before{height: 1px; width: 5px; top:13px;} strong.title{font-size: 22px; padding-bottom: 15px;} p.copy{font-size: 16px;} .section0 p{font-size: 26px;} .section0 img{padding-right: 0;} .section1 div.info > strong, .section1 div.info > strong.pink.type2{min-width: 110px; font-size: 17px; height: 35px; line-height: 35px; margin-right: 15px;} .section1 div.info > p{width: 100%; font-size: 15px;} .section1 div.info > p br{display: none;} .section1 div.info > p span.subTxt{display:block; padding-left: 0; font-size: 13px;} .section1 div.info.mgt30{flex-direction: column;} .section1 div.info > ul li{font-size: 16px;} .section1 div.info > strong.blue{width: 110px; margin-bottom: 10px;} .section1 div.info > ul li p{padding-top: 0;} .section3 div.box{padding:20px} } @media all and (max-width:440px) { .section0 img{width: 200px;} .section1 div.info{flex-direction: column;} .section1 div.info > strong, .section1 div.info > strong.pink.type2{width: 110px;} }