/* BASIC css start */
/* ¼½¼Ç °øÅë */
section{width: 100%;margin-bottom:50px}
section .sec_inner{margin:0 auto; padding:0 3%}
section h2{font-family: 'Montserrat', sans-serif; font-size: 20px; line-height:1.2; word-break: keep-all; font-weight:700; letter-spacing: -.5px; color: #000; margin-bottom:35px; text-align: center;}
section h2 small { font-family: 'Montserrat', sans-serif; display:block; font-size: 16px; font-weight: 600; margin-bottom: 5px;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 1.7px !important; transform: scale(.8); opacity: .4;}
.swiper-pagination-bullet-active{background-color: #000 !important; opacity: 1 !important;}
/* sec1 */
#sec1{position: relative;}
#sec1:before { content: url('/design/solaris/sweet/MO_img/logo_pps.png'); position: absolute; left: 20px; top: 20px; z-index: 10;}
#sec1 .swiper{width: 100%;position: relative;}
#sec1 .swiper ul{width: 100%;}
#sec1 .swiper ul li{width: 100%;position: relative;}
#sec1 .swiper ul li .thumb{width: 100%;}
#sec1 .swiper ul li .thumb img{width: 100%;}
#sec1 .swiper ul li .text{position: absolute;left: 50%; bottom: 5%; text-align: center; transform: translateX(-50%);width:100%;}
#sec1 .swiper ul li .text h3{font-family: 'Noto Sans KR', sans-serif; font-size: 20px; color: #000; margin-bottom: 3px; font-weight: 400;line-height: 1.5;transition: top .5s, opacity .6s; letter-spacing: -.5px; text-shadow: 1px 2px 5px white;}
#sec1 .swiper ul li .text h3 span{font-weight: 700; display: inline-block; margin-right: 10px;}
#sec1 .swiper ul li .text p.subtit{font-family: 'Noto Sans KR', sans-serif; font-size: 14px; color: #000; font-weight: 400; margin-bottom: 12px;letter-spacing: -.7px;transition: top .6s, opacity .7s; line-height:1.3}
#sec1 .swiper ul li .text a{font-family: 'Noto Sans KR', sans-serif; font-size: 13px; color: #fff; display: inline-block; font-weight: 500;letter-spacing: -.6px;padding: 7px 37px;transition:top .7s, opacity .7s; background-color: #ffa421; border-radius: 40px;}
#sec1 .swiper ul li .text>*{opacity: 1; top: 35px; position: relative;}
#sec1 .swiper ul li .text.show>*{top: 0; opacity: 1;}

#sec1 .swiper-pagination{bottom: -30px !important; }


#sec1 .swiper .swiper-slide.swiper-slide-duplicate-active,
#sec1 .swiper .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
}

#sec1 .swiper .swiper-slide.swiper-slide-duplicate-active .text>*,
#sec1 .swiper .swiper-slide.swiper-slide-active .text>* {top: 0; opacity: 1;}

/* sec2 */
#sec2{position: relative;}
#sec2 .sec_inner{}
#sec2 .sec_inner h2{margin-bottom:18px !important}
#sec2 .sec_inner .sec2_cate{}
#sec2 .sec_inner .sec2_cate ul{text-align:center; }
#sec2 .sec_inner .sec2_cate ul li{display: inline-block; margin: 0 7px;}
#sec2 .sec_inner .sec2_cate ul li a{font-family:  'Noto Sans KR', sans-serif; color:#999999; font-size: 15px; font-weight: 500; letter-spacing: -.3px;transition: color .4s, font-weight .1s; display:inline-block; padding-bottom:4px}
#sec2 .sec_inner .sec2_cate ul li.on>a{  color: #ffa421 !important;font-weight:600}
#sec2 .sec2_prd{}
#sec2 .sec2_prd>div{display: none; position:relative;padding-top: 35px;padding-bottom:40px}
#sec2 .sec2_prd>div.show{display: block;}





/* sec3 */
#sec3{width: 100%}
#sec3 {position: relative;}
#sec3  h2{}
#sec3 .sec3_cont{width: 100%;}
#sec3 .sec3_cont ul{width: 100%;}
#sec3 .sec3_cont ul li{}
#sec3 .sec3_cont ul li:first-child img{width:100%}
#sec3 .sec3_cont ul li:last-child{padding: 30px 14px 0; text-align:center}
#sec3 .sec3_cont ul li:last-child h3{font-family: 'Noto Sans KR', sans-serif;font-size: 22px;color: #111; font-weight: 400; letter-spacing: -.8px; line-height: 1.2; }
#sec3 .sec3_cont ul li:last-child p{font-family: 'Noto Sans KR', sans-serif;font-size: 14px; color: #111;font-weight: 400; margin: 20px 0; line-height: 1.6;letter-spacing: -.8px;}
#sec3 .sec3_cont ul li:last-child a{display: inline-block; padding: 10px 20px;  border: 1px solid #000;font-family: 'Montserrat', sans-serif; font-size: 14px; color: #000 ;font-weight: 500;}
#sec3 .sec3_cont ul li:last-child a img{transform: scale(.71); transform-origin: center center; display: inline-block; margin-left: 10px;}
#sec3 .swiper-pagination{bottom: -20px !important; }

/* sec4 */
#sec4{}
#sec4 .sec_inner{}
#sec4 .sec_inner h2{}
/* ¼½¼Ç 4 °øÅë */
#sec4 .sec_inner p.tit{font-family: 'Montserrat', sans-serif;font-size: 15px;font-weight: 700; color: #000; margin-bottom: 6px; }
#sec4 .sec_inner p.cont{font-family: 'Noto Sans KR', sans-serif;color: #999; font-size: 14px; font-weight: 400; }

#sec4 .sec_inner .sec4_1{}
#sec4 .sec_inner .sec4_1 .swiper{}
#sec4 .sec_inner .sec4_1 .swiper ul{}
#sec4 .sec_inner .sec4_1 .swiper ul li{}
#sec4 .sec_inner .sec4_1 .swiper ul li a{width: 100%;display: block;position: relative;}
#sec4 .sec_inner .sec4_1 .swiper ul li a img{width: 100%;}
#sec4 .sec_inner .sec4_1 .swiper ul li a article{position: absolute; left: 0; top: 0; width: 100%; height: 100%;  padding: 40px 30px;}
#sec4 .sec_inner .sec4_1 .swiper ul li a article p{}
#sec4 .sec_inner .sec4_1 .swiper ul li a article p.tit{}
#sec4 .sec_inner .sec4_1 .swiper ul li a article p.cont{}
#sec4 .swiper-horizontal>.swiper-pagination-bullets, #sec4 .swiper-pagination-bullets.swiper-pagination-horizontal, #sec4 .swiper-pagination-custom, #sec4 .swiper-pagination-fraction{width: auto !important; left: 30px !important; bottom: 40px !important;}


#sec4 .sec_inner .sec4_2{margin-top: 7px;}
#sec4 .sec_inner .sec4_2 a{width: 100%;display: block;position: relative;}
#sec4 .sec_inner .sec4_2 a img{width: 100%;}
#sec4 .sec_inner .sec4_2 a article{position: absolute;left: 0; top: 0; padding: 40px 30px; height: 100%; width: 100%;}
#sec4 .sec_inner .sec4_2 a article p{}
#sec4 .sec_inner .sec4_2 a article p.tit{}
#sec4 .sec_inner .sec4_2 a article p.cont{}

.pos_r { position: relative;}
.pos_a { position: absolute;}
.sec4_cont__txt.pos_a { padding: 30px 20px; left: 0; top: 0;}
.sec4_cont__txt h5 { color:#333; font-weight: 700; letter-spacing: -.7px; font-size: 17px;}
.sec4_cont__txt p {color: #888888; font-size: 15px; font-weight: 400; margin-top: 10px}

/* ¼³Ä¡»çÁø */
#secInstall .img_box {display:block;}
#secInstall .img_box a {display: block;}
#secInstall .img_box a .thumb{
    display: block;
    position: relative;
    height: 0;
    padding-bottom: 66.25%;
    overflow: hidden;
}
#secInstall .img_box a .thumb img {
    width: 100%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#secInstall .img_box figcaption{ padding: 20px 10px; text-align: center; }
#secInstall .board_subject { word-break: keep-all; color: #333; font-weight: 500; letter-spacing: -.7px; font-size: 14px;}
#secInstall .board_date { display: block; color: #888888; font-size: 12px; font-weight: 400; margin-top: 10px;}

.secInstall_cont {position: relative;}
#secInstall .swiper_btn_prev{position: absolute; top: 40%; right: 50%; z-index: 10; transform: translate(-730px,-50%); cursor: pointer; } 
#secInstall .swiper_btn_next{position: absolute; top: 40%; left: 50%; z-index: 10; transform: translate(730px,-50%); cursor: pointer;}



/* °Ô½ÃÆÇ */
#sec4 .sec_inner .sec4_cont{margin-bottom: 40px;}
#board_area:after { content: ''; display: block; clear: both;}

#sec4 .sec_inner .sec4_cont >div>div { width: 100%;}
#sec4 .sec_inner .sec4_cont >div h2 *,
#sec4 .sec_inner .sec4_cont >div h2 {
    font-family: 'Noto Sans KR'!important;
    font-size: 18px !important;
    font-weight: 400 !important;
    margin-bottom: 20px !important;
}

#sec4 .sec_inner .sec4_cont ul { table-layout: fixed;width: 100%; border-top: 2px solid #333;}
#sec4 .sec_inner .sec4_cont ul li { border-bottom: 1px solid #ddd;}
#sec4 .sec_inner .sec4_cont ul li p { font-size: 14px; padding: 15px 0; }
#sec4 .sec_inner .sec4_cont ul li p +p {padding-top:0}
#sec4 .sec_inner .sec4_cont ul li p * {font-size: 100%;}

#sec4 .sec_inner .sec4_cont ul li.re a:before {
content: url('/board/images/neo_reply.gif'); display: inline-block; margin-right: 10px;
}


/* BASIC css end */

