@charset "utf-8";

body.main main {
    background:url(../img/main/main_bg.jpg) no-repeat;
    background-position:center;
    background-size:cover;
}
body.main .main-inner {
    height:590px;
    width:88.8%; max-width:400px;
    letter-spacing:-1px;
    padding-top:50px;
    position:relative;
    margin:0 auto;
}
body.main .main-inner > h2 {
    font-size:26px;
    color:#222;
    line-height:140%;
}
body.main .main-inner > p {
    font-size:14px;
    line-height:160%;
    color:#444;
    margin:12px 0 22px;
}
body.main .main-inner > img {
    display:block; 
    width:300px;
    margin:0 auto;
}
body.main .main-inner .symptom {
    width:100%; height:353px;
    position:absolute; bottom:-163px; left:0;
    background: #fff;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    padding:34px 0;
}
body.main .main-inner .symptom h3 {
    font-size:20px;
    color:#222;
    text-align: center;
}
body.main .main-inner .symptom h3 br {display:none;}
body.main .main-inner .symptom ul {
    font-size:0;
    text-align:center;
    max-width:280px;
    margin:0 auto;
}
body.main .main-inner .symptom li {
    margin-top:34px;
    display:inline-block;
    margin-left:14px;
    font-size:15px; font-weight:500;
    letter-spacing:-1px;
}
body.main .main-inner .symptom li:hover {
    color:#7F42EC;
    font-weight:700;
}
body.main .main-inner .symptom li:hover div {
    border-color:#7F42EC;
}
body.main .main-inner .symptom li:nth-of-type(4n+1) {
    margin-left:0;
}
body.main .main-inner .symptom li:nth-of-type(5), body.main .main-inner .symptom li:nth-of-type(6) {
    margin-right: 20px;
}
body.main .main-inner .symptom li div {
    width:58px; height:58px;
    position:relative;
    border-radius:100px;
    border:1px solid #F4F3F5;
    background:#F4F3F5;
    margin-bottom:17px;
}
body.main .main-inner .symptom li div img {
    width:36px;
    display:block;
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
}
/* not use(10.22)
body.main .main-inner .symptom li:first-child div img {
    width:50px;
}
*/
body.main .se01 .s-inner {
    padding:247px 0 64px;
    width:320px; 
    margin:0 auto;
}
body.main .se01 .s-inner h2 {
    font-size:22px;
    color:#222;
    margin-bottom:35px;
}
body.main .se01 .s-inner ul li {
    height:200px;
    border-radius:10px;
    box-shadow:0px 2.53333px 8.44444px rgba(0, 0, 0, 0.1);
    letter-spacing:-1px;
    position:relative;
}
body.main .se01 .s-inner ul li + li {
    margin-top:40px;
}
body.main .se01 .s-inner ul li .bg {
    height:148px;
    background-size:cover;
    background-repeat:no-repeat;
    border-radius:10px 10px 0 0;
    overflow:hidden;
}
body.main .se01 .s-inner ul li:nth-of-type(1) .bg {
    background-image:url(../img/main/se01_bg01_m.jpg);
}
body.main .se01 .s-inner ul li:nth-of-type(2) .bg {
    background-image:url(../img/main/se01_bg02_m.jpg);
}
body.main .se01 .s-inner ul li:nth-of-type(3) .bg {
    background-image:url(../img/main/se01_bg03_m.jpg);
}
body.main .se01 .s-inner ul li h3 {
    font-size:16px;
    color:#222;
    line-height:52px;
    text-align:center;
}
body.main .se01 .s-inner ul li .circle {
    position:absolute; top:-29px; left:50%;
    transform:translate(-50%,0);
}
body.main .se01 .s-inner ul li .circle i {
    display:block;
    width:3px; height:3px;
    border-radius:100px;
    background:#D1CBE4;
}
body.main .se01 .s-inner ul li .circle i:nth-of-type(2) {
    margin:5px 0;
}
body.main .se02 .s-inner {
    padding-bottom:40px;
    width: 88.8%;
    max-width: 400px;
    margin:0 auto;
    letter-spacing:-1px;
}
body.main .se02 .s-inner h2 {
    font-size:22px;
    line-height:140%;
    color:#222;
    margin-bottom:30px;
}
body.main .se02 .s-inner ul li {
    padding:24px 0 0 38px;
    font-size:16px; font-weight:700;
    line-height:150%;
    background-size:contain;
    background-repeat: no-repeat;
    width:240px; height:250px;
}
body.main .se02 .s-inner ul li:nth-of-type(1) {
    background-image:url(../img/main/se02_bg01_m.png);
}
body.main .se02 .s-inner ul li:nth-of-type(2) {
    margin:30px 0;
    margin-left:calc(100% - 240px);
    background-image:url(../img/main/se02_bg02_m.png);
}
body.main .se02 .s-inner ul li:nth-of-type(3) {
    background-image:url(../img/main/se02_bg03_m.png);
}
body.main .se02 .s-inner > img {
    display:block;
    margin:60px auto 0;
    width:73%;
}

/* 팝업 */
body.main .m-popup-inner {
    background:rgba(38,42,53,.6);
    width:100%; height:100vh;
    position:fixed;
    top:0; left:0;
    z-index:100;
    /*display: none !important;*/
}
body.main .m-popup-inner .popup-box {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
}
body.main .m-popup-inner .popup-box .img-box {
    width:340px;
}
body.main .m-popup-inner .popup-box .img-box img {
    display:block;
    width:100%;
} 
body.main .m-popup-inner .popup-box .close-box {
    margin-top:30px;
    text-align:center;
}
body.main .m-popup-inner .popup-box .close-box button {
    color:#fff;
    font-size:12px; font-weight:500;
    letter-spacing:-0.5px;
    vertical-align:middle;
}
body.main .m-popup-inner .popup-box .close-box span {
    display:inline-block;
    width:2px; height:16px;
    vertical-align:middle;
    background:#999;
    margin:0 50px 0 53px;
}
body.main #deliveryPopup .img-box {
    height:434px;
    background:url(../img/main/main_popup_bg02.png) no-repeat;
    background-size:contain;
}
body.main #deliveryPopup .img-box p:nth-of-type(1) {
    text-align:center;
    font-size:11px;
    padding:40px 0 14px;
    color:#4876ED;
    font-weight:700;
}
body.main #deliveryPopup .img-box > strong {
    display:block; text-align:center;
}
body.main #deliveryPopup .img-box > strong:nth-of-type(1) {
    font-size:21px;
    color:#222;
}
body.main #deliveryPopup .img-box > strong:nth-of-type(2) {
    font-size:31px;
    color:#6045E2;
    margin:10px 0 100px;
}
body.main #deliveryPopup .img-box p:nth-of-type(2) {
    padding-left:40px;
    font-size:10px;
    color:#666;
    line-height:160%;
}
body.main #deliveryPopup .img-box p:nth-of-type(2) > strong {font-weight:500;}
body.main #deliveryPopup .img-box p:nth-of-type(2) span {
    font-size:14px; font-weight:500;
}
body.main #deliveryPopup .img-box p:nth-of-type(2) span i {
    color:#43467D;
}

/* 영상 추가 */
body.main .video-se .v-box {
    padding-bottom:78px;
    width: 88.8%;
    max-width: 400px;
    margin: 0 auto;
}
body.main .video-se .v-box h2 {
    font-size:22px;
    line-height:140%;
    letter-spacing:-1px;
    margin-bottom:30px;
}
body.main .video-se .v-box .video {
    overflow:hidden;
    padding-top:56.25%;
    position:relative;
    height:0;
}
body.main .video-se .v-box .video iframe {
    width:100%; height:100%;
    position:absolute; top:0; left:0;
}

/* 가로 해상도 768 이상 */
@media screen and (min-width:768px){
    body.main .main-inner {
        height:378px;
        width:668px; max-width:none;
        letter-spacing:-0.56px;
        padding-top:66px;
    }
    body.main .main-inner > h2 {
        font-size:32px;
    }
    body.main .main-inner > p {
        font-size:12px;
        margin:20px 0 0;
    }
    body.main .main-inner > img {
        position:absolute; top:71px; right:29px;
        width:322px;
        margin:0;
    }
    body.main .main-inner .symptom {
        width:100%; height:213px;
        bottom:-82px;
        box-shadow: 0px 2.2582px 16.9365px rgba(0, 0, 0, 0.12);
        padding:40px 0;
    }
    body.main .main-inner .symptom h3 {
        font-size:20px;
        line-height:150%;
        padding-bottom: 30px;
    }
    body.main .main-inner .symptom ul {
        font-size:0;
        max-width:none;
        margin:0;
        right:44px;
    }
    body.main .main-inner .symptom li {
        margin-top:0;
        display:inline-block;
        margin-left:0;
        font-size:12px; 
    }
    body.main .main-inner .symptom li:nth-of-type(5), body.main .main-inner .symptom li:nth-of-type(6) {
        margin-right: 0;
    }
    body.main .main-inner .symptom li + li {
        margin-left:26px !important;
    }
    body.main .main-inner .symptom li:hover {
        color:#7F42EC;
        font-weight:700;
    }
    body.main .main-inner .symptom li:hover div {
        border-color:#7F42EC;
    }
    body.main .main-inner .symptom li div {
        width:56px; height:56px;
        margin-bottom:8px;
    }
    body.main .main-inner .symptom li div img {
        width:34px;
    }
    body.main .main-inner .symptom li:first-child div img {
        width:34px;
    }
    body.main .se01 .s-inner {
        padding:200px 0 112px;
        width:668px; 
    }
    body.main .se01 .s-inner h2 {
        font-size:26px;
        margin-bottom:37px;
    }
    body.main .se01 .s-inner ul li {
        width:204px; height:255px;
        float:left;
        box-shadow:0px 3.3873px 11.291px rgba(0, 0, 0, 0.1);
        letter-spacing:-0.56px;
    }
    body.main .se01 .s-inner ul li + li {
        margin-top:0;
        margin-left:28px;
    }
    body.main .se01 .s-inner ul li .bg {
        height:198px;
    }
    body.main .se01 .s-inner ul li:nth-of-type(1) .bg {
        background-image:url(../img/main/se01_bg01.jpg);
    }
    body.main .se01 .s-inner ul li:nth-of-type(2) .bg {
        background-image:url(../img/main/se01_bg02.jpg);
    }
    body.main .se01 .s-inner ul li:nth-of-type(3) .bg {
        background-image:url(../img/main/se01_bg03.jpg);
    }
    body.main .se01 .s-inner ul li h3 {
        font-size:12px;
        line-height:56px;
        text-align:left;
        padding-left:25px;
    }
    body.main .se01 .s-inner ul li .circle {
        position:absolute; top:50%; left:-22px;
        transform:translate(0,-50%);
        height:3px;
    }
    body.main .se01 .s-inner ul li .circle i {
        float:left;
    }
    body.main .se01 .s-inner ul li .circle i:nth-of-type(2) {
        margin:0 4px;
    }
    body.main .se02 .s-inner {
        padding-bottom:113px;
        width: 668px;
        max-width:none;
        position:relative;
    }
    body.main .se02 .s-inner h2 {
        font-size:26px;
        margin-bottom:34px;
    }
    body.main .se02 .s-inner ul {
        padding-left:228px;
    }
    body.main .se02 .s-inner ul li {
        padding:23px 0 0 33px;
        font-size:12px; 
        line-height:133%;
        width:220px; height:214px;
        float:left;
    }
    body.main .se02 .s-inner ul li:nth-of-type(1) {
        background-image:url(../img/main/se02_bg01.png);
    }
    body.main .se02 .s-inner ul li:nth-of-type(2) {
        margin:0;
        transform:translateY(116px);
        background-image:url(../img/main/se02_bg02.png);
    }
    body.main .se02 .s-inner ul li:nth-of-type(3) {
        margin-top:18px;
        background-image:url(../img/main/se02_bg03.png);
    }
    body.main .se02 .s-inner > img {
        display:block;
        margin:0;
        width:233px;
        position:absolute; bottom:113px; left:0;
    }
    
    /* 팝업 */
    body.main .m-popup-inner {
        /*display: none !important;*/
    }
    body.main .m-popup-inner .popup-box .img-box {
        width:580px;
    }
    body.main .m-popup-inner .popup-box .close-box {
        margin-top:35px;
    }
    body.main .m-popup-inner .popup-box .close-box button {
        font-size:18px;
    }
    body.main .m-popup-inner .popup-box .close-box span {
        height:20px;
        margin:0 93px 0 100px;
    }
    body.main #deliveryPopup .img-box {
        height:742px;
    }
    body.main #deliveryPopup .img-box p:nth-of-type(1) {
        font-size:20px;
        padding:61px 0 28px;
    }
    body.main #deliveryPopup .img-box > strong:nth-of-type(1) {
        font-size:36px;
    }
    body.main #deliveryPopup .img-box > strong:nth-of-type(2) {
        font-size:54px;
        margin:12px 0 170px;
    }
    body.main #deliveryPopup .img-box p:nth-of-type(2) {
        padding-left:66px;
        font-size:18px;
    }
    body.main #deliveryPopup .img-box p:nth-of-type(2) span {
        font-size:24px; 
    }
    
    /* 영상 추가 */
    body.main .video-se .v-box {
        padding-bottom:120px;
        width:668px;
        max-width:none;
    }
    body.main .video-se .v-box h2 {
        font-size:26px;
    }
}

/* 가로 해상도 1280 이상 */
@media screen and (min-width:1280px){
    body.main .main-inner {
        height:670px;
        width:1180px; 
        letter-spacing:-1px;
        padding-top:120px;
    }
    body.main .main-inner > h2 {
        font-size:58px;
    }
    body.main .main-inner > p {
        font-size:18px;
        margin:24px 0 0;
    }
    body.main .main-inner > img {
        top:125px; right:57px;
        width:570px;
        margin:0;
    }
    body.main .main-inner .symptom {
        height:383px;
        bottom:-147px;
        box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.12);
        padding:80px 120px 0;
        border-radius:40px;
    }
    body.main .main-inner .symptom h3 {
        font-size:38px;
        line-height:142%;
        padding-bottom: 40px;
    }
    body.main .main-inner .symptom ul {
        right:80px;
    }
    body.main .main-inner .symptom li {
        font-size:18px; 
    }
    body.main .main-inner .symptom li + li {
        margin-left:40px !important;
    }
    body.main .main-inner .symptom li div {
        width:100px; height:100px;
        margin-bottom:14px;
        border-width:2px;
    }
    body.main .main-inner .symptom li div img {
        width:60px;
    }
    body.main .main-inner .symptom li:first-child div img {
        width:60px;
    }
    body.main .se01 .s-inner {
        padding:353px 0 200px;
        width:1180px; 
    }
    body.main .se01 .s-inner h2 {
        font-size:46px;
        margin-bottom:66px;
    }
    body.main .se01 .s-inner ul li {
        width:360px; height:450px;
        box-shadow:0px 6px 20px rgba(0, 0, 0, 0.1);
        letter-spacing:-1px;
    }
    body.main .se01 .s-inner ul li + li {
        margin-top:0;
        margin-left:50px;
    }
    body.main .se01 .s-inner ul li .bg {
        height:350px;
    }
    body.main .se01 .s-inner ul li h3 {
        font-size:20px;
        line-height:100px;
        padding-left:30px;
    }
    body.main .se01 .s-inner ul li .circle {
        left:-40px;
        height:5px;
    }
    body.main .se01 .s-inner ul li .circle i {
        width:5px; height:5px;
    }
    body.main .se01 .s-inner ul li .circle i:nth-of-type(2) {
        margin:0 7px;
    }
    body.main .se02 .s-inner {
        padding-bottom:200px;
        width: 1180px;
    }
    body.main .se02 .s-inner h2 {
        font-size:46px;
        margin-bottom:60px;
        letter-spacing:-1px;
    }
    body.main .se02 .s-inner ul {
        padding-left:402px;
    }
    body.main .se02 .s-inner ul li {
        padding:40px 0 0 58px;
        font-size:20px; 
        line-height:140%;
        width:388px; height:380px;
    }
    body.main .se02 .s-inner ul li:nth-of-type(2) {
        transform:translateY(205px);
    }
    body.main .se02 .s-inner ul li:nth-of-type(3) {
        margin-top:30px;
    }
    body.main .se02 .s-inner > img {
        width:420px;
        bottom:200px;
    }
    
    /* 영상 추가 */
    body.main .video-se .v-box {
        padding-bottom:200px;
        width:1180px;
    }
    body.main .video-se .v-box h2 {
        font-size:46px;
    }
}