/* before after */
body{letter-spacing: -0.05em; color: #333;}
body, td, input, textarea, div, th, p, a, address ul{color: #333; word-break: keep-all !important; letter-spacing: -0.05em;}

.sec .container{width: 100%; margin: 0 auto; position: relative; z-index: 5; padding: 0 24px;}

/* 메인배너 */
.main_ban_wrap{background: #E1F2FA; position: relative; overflow: hidden; }
.main_ban_wrap .container{width: 100%; margin: 0 auto; position: relative; z-index: 5; padding: 0 17.5px 20px;}
.main_ban_wrap:before{content: '';display: block; width: 100%; height: 100%; background: center right/ auto 100% url('/theme/sisun_v1/img/v1/15/view_10/model.png')no-repeat; background-size: contain; position: absolute; right: -100px; top: 0;}
.main_ban_wrap .tit{margin: 40px 0 0 0;}
.main_ban_wrap .tit .sub{font-size: 10px; line-height: 10px; letter-spacing: 0.28em; color: #7AA3BB;}
.main_ban_wrap .tit h2{font-size: 18px; line-height: 18px; font-weight: 500; margin: 10px 0 0 0;}
.main_ban_wrap .tit h1{font-size: 32px; line-height: 40px; height: 80px;  font-weight: 700; margin: 5px 0 0 0; letter-spacing: -0.07em;}
.main_ban_wrap .tit h1 .small{font-size: 0.5em; font-weight: 300; line-height: 1.2em; display: block;}
.main_ban_wrap ul{display: flex; margin: 7px 0 0 0;}
.main_ban_wrap li:not(:last-child){margin: 0 5px 0 0;}
.main_ban_wrap li{flex-grow: 1; flex-basis: 0; background: url(/theme/sisun_v1/img/v1/15/main_list_bg.png)no-repeat; background-size: contain;color: #fff;font-size: 10px; line-height: 12px;  display: flex; flex-direction: column; align-items: center; text-align: center; height: 19vw; letter-spacing: -0.07em;}
.main_ban_wrap li:before{content: ''; display: block; width:16px; height: 16px; margin: 12px auto 4.5px; background-size: contain;}
.main_ban_wrap li:nth-child(1):before{background: url('/theme/sisun_v1/img/v1/15/ic-01.png'); background-size: contain;}
.main_ban_wrap li:nth-child(2):before{background: url('/theme/sisun_v1/img/v1/15/ic-02.png'); background-size: contain;}
.main_ban_wrap li:nth-child(3):before{background: url('/theme/sisun_v1/img/v1/15/ic-03.png'); background-size: contain;}
.main_ban_wrap li:nth-child(4):before{background: url('/theme/sisun_v1/img/v1/15/ic-04.png'); background-size: contain;}
.main_ban_wrap li:nth-child(5):before{background: url('/theme/sisun_v1/img/v1/15/ic-05.png'); background-size: contain;}
.main_ban_wrap .note{font-size: 10px; line-height: 14px; margin: 15px 0 0 0; text-align: center; padding: 0 10px;  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}


/* 섹션 공통 */
.sec{padding: 50px 0;}
.sec *{letter-spacing: -0.05em;}
.sec .title{text-align: center; margin: 0 0 30px;}
.sec .title .sub{font-size: 14px; line-height: 14px; letter-spacing: 0.05em; color: #4481A4; margin: 0 0 5px; display: block;}
.sec .title h2{font-size: 26px; line-height: 36px;  font-weight: 700;}
.sec .title h2 span{font-weight: 300;}
.sec .title h2:after{content: '';display: block; width: 40px; height: 2px; background: #7AA3BB; margin: 20px auto 30px;}
.sec .title .des{font-size: 12px; line-height:18px; }
.sec .note{margin: 30px 0 0 0; text-align: center; font-size: 14px; line-height: 19px; }
.sec .note .point{font-weight: 700; position: relative; z-index: 1}
.sec .note .point:before{content: ''; display: block; position: absolute; left: 0; top: 2px; width: 100%; height: 14px; background: #DAF1FB; z-index: -1;}
.sec .img_wrap{width: 255px; max-width: 300px; margin: 0 auto;}
.sec .img_wrap p{background: #333; color: #fff; height: unset; font-size: 10px; line-height: 12px; text-align: center; height: 25px; display: flex; align-items: center; justify-content: center;}
.sec .img_wrap .img{position: relative;}
.sec .img_wrap .img.flex{display: flex;}
.sec .img_wrap .img.flex img{flex-grow: 1; max-width: none !important; width: 0;}
.sec .img_wrap .img.flex{display: flex;}
.sec .img_wrap .img:before{content: 'Before'; display: block; width: 50px; height: 26px; background: #7c7c7f; font-size: 12px; line-height: 26px; color: #fff; text-align: center; position: absolute; left: 0; top: 0; z-index: 1;}
.sec .img_wrap .img:after{content: 'After'; display: block; width: 50px; height: 26px; background: #7AA3BB; font-size: 12px; line-height: 26px; color: #fff; text-align: center; position: absolute; left: 0; top: 50%; z-index: 1;}
.sec .img_wrap.left .img:after{top: 0; left: 50%;}
.sec .go_link{display: inline-block; margin: 30px 0 0 0; background: #333; color: #fff; height: 26px; padding: 0 7px; line-height: 26px; font-size: 12px; font-weight: 400;}

/* 소개 */
.sec_01{text-align: center;}
.sec_01 img{width: 303px;}
.sec_01 .title h2 .small{font-size: 0.7em; font-weight: 300; line-height: 1.4em; display: block;}
.sec_01 ol{margin: 16px 0 0 0; display: inline-grid; grid-template-columns: 1fr 1fr; text-align: left;}
.sec_01 li:not(:nth-child(-n+2)){margin-top: 10px;}
.sec_01 li:nth-child(odd){margin-right: 20px;}
.sec_01 li{font-size: 10px; line-height: 15px; display: flex;}
.sec_01 li span{display: flex; flex-shrink: 0; justify-content: center; align-items: center; background: #4084E1; border-radius: 100%; color: #fff; font-size: 10px; margin: 0 2px 0 0; width: 15px; height: 15px;}

@media(max-width:360px){
.sec_01 ol{grid-template-columns: 1fr;}
.sec_01 li:not(:first-child){margin-top: 10px;}
.sec_01 li{justify-content: center;}
}

/* 나는 돌출 눈인가 함몰 눈인가? */
.sec_02{background: #F4F5F9; }
.sec_02 .title h2:after{display: none;}
.sec_02 .contents{background: #fff; border-radius: 20px; border: 1px solid #aaa; padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 20px;}
.sec_02 .contents dt{font-size: 20px; line-height: 30px; font-weight: 500;}
.sec_02 .contents dd{display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0;}
.sec_02 .note{margin: 0}
.sec_02 .img_wrap .img:before, .sec_02 .img_wrap .img:after{display: none}
.sec_02 .img_wrap p{height: 25px; line-height: 25px; font-size: 10px;}
.sec_02 .vs{display: flex; flex-direction: column; align-items: center; gap: 10px;}
.sec_02 .vs strong{font-size: 20px; font-weight: 900; color: #A8CBDA;}
.sec_02 .img_cont{display: flex; flex-wrap: wrap; align-self: center; justify-content: center; gap: 5px 0;}
.sec_02 .img_cont .img_wrap{margin: 0; padding: 0;}
.sec_02 .img_cont strong{flex-basis: 260px; font-size: 12px; line-height: 18px; font-weight: 600; text-align: right}
.sec_02 .img_cont strong span{font-weight: 400;}
.sec_02 .img_cont .img_wrap{width: auto;}
.sec_02 .img_cont .img_wrap img{width: 130px !important; }


/* 필수 요소  */
.sec_03{background: linear-gradient(90deg, #DEF4FF 0%, #DFE6FF 100%); padding: 50px 16px;}
.sec_03 .container{background: #fff; box-shadow: 5px 5px 10px #C4D3F9; padding: 0;}
.sec_03 .summary{padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 20px;}
.sec_03 .summary .img{display: flex; flex-direction: column; gap: 20px;}
.sec_03 .summary .note{margin: 0;}
.sec_03 .summary .note .point{font-weight: 500;}
.sec_03 .how_wrap{background: #F4F5F9; padding: 20px; display: flex; flex-direction: column; gap: 20px;}
.sec_03 .how_wrap hr{display: block; width: 100%; height: 1px; border: none; border-top: 1px dashed #c4c4c4; margin: 0;}
.sec_03 .how_wrap .characteristic{display: flex; flex-direction: column; align-items: center; gap: 20px;}
.sec_03 .how_wrap .characteristic .img{display: flex; flex-direction: column; gap: 10px;}
.sec_03 .how_wrap .characteristic ul{display: flex; flex-direction: column; gap: 20px;}
.sec_03 .how_wrap .characteristic li{font-size: 14px; line-height: 19px; text-indent: -19px; padding: 0 0 0 19px;}
.sec_03 .how_wrap .characteristic li:before{content: ''; display: inline-block; width: 14px;  height: 14px; background: url(/theme/sisun_v1/img/v1/15/view_10/check_01.svg)no-repeat; background-size: contain; vertical-align: top; margin: 0 5px 0 0; }
.sec_03 .how_wrap .des{display: flex; flex-direction: column; gap: 30px;}
.sec_03 .how_wrap .des .type{display: flex; flex-direction: column; gap: 10px; align-items: center;}
.sec_03 .how_wrap .des .type > strong{ width: 133px; height: 52px; line-height: 52px; border: 1px dashed #A89BE0; border-radius: 65px; background-color: #FFF; font-weight: 700; font-size: 14px; color: #A89BE0; display: inline-block; text-align: center; }
.sec_03 .how_wrap .des .type p{font-size: 14px; line-height: 19px; text-align: center;}
.sec_03 .ex{display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; gap: 20px;}

.sec_03.cont_01 .note .point:before{background: #D3CDEF}
.sec_03.cont_01 .img_wrap .img:after{background: #A89BE0}
.sec_03.cont_02 .note .point:before{background: #BFE4E1}
.sec_03.cont_02 .img_wrap .img:after{background: #80C9C3}
.sec_03.cont_02 .how_wrap .des .type > strong{ border: 1px dashed #80C9C3; color: #80C9C3;}
.sec_03.cont_02 .how_wrap .characteristic li:before{width: 14px;  height: 14px; background: url(/theme/sisun_v1/img/v1/15/view_10/check_02.svg)no-repeat; background-size: contain;}

.sec_03.cont_01{padding-bottom: 0;}

/* case */
.case_wrap:nth-child(even){background: #F4F5F9}
.case_wrap .title h2{font-weight: 500; font-size: 22px; line-height: 30px;}
.case_wrap .title h2:after{display: none;}
.case_wrap ul{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 30px 0 0 0;}
.case_wrap li{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.case_wrap li .case{font-size: 14px; line-height: 28px; height: 30px; border-radius: 15px; border: 1px solid #8282C2; color: #8282C2; margin: 0 0 24px; display: inline-block; width: 84px;}
.case_wrap li:not(:first-child){margin-top: 30px;}

/* 안와지방이식(눈꺼풀 지방이식) */
.sec_04{padding: 50px 24px;}
.sec_04 .container{padding: 30px 20px; display: flex; flex-direction: column; border: 5px solid; border-image: linear-gradient(to right, #DEF4FF, #DFE6FF); border-image-slice: 1;}
.sec_04 .title{margin: 0;}
.sec_04 .contents{display: flex; flex-direction: column; gap: 30px; align-items: center;}
.sec_04 .img_cont{display: flex; flex-direction: column; gap: 30px;}
.sec_04 .note{margin: 0}
.sec_04 hr{display: block; width: 100%; height: 1px; border: none; border-top: 1px dashed #c4c4c4; margin: 0;}

.sec_05{text-align: center; background-color: #FFF; }
.sec_05 .contents{display: inline-flex; flex-wrap: wrap; justify-content: center; }
.sec_05 .contents .list{margin: 0 2px; width: 100px; position: relative; display: inline-block; margin-top: 40px; }
.sec_05 .contents .list .step{width: 40px; height: 40px; border-radius: 100%; background: #7AA3BB; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; left: 50%; top:-20px; margin: 0 0 0 -20px; font-size: 10px; line-height: 14px; font-weight: 700;  color: #fff;}
.sec_05 .contents .list .step span{font-size: 8px;}
.sec_05 .contents .list .step .num{font-size: 14px;}
.sec_05 .contents .list img{width: 100%;}
.sec_05 .contents p{width: 100%; height: 62px; border: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 14px; background-color: #FFF; }



#detail .before-after{text-align: center;}
#detail .before-after .title img{margin: 0 0 5px;display: inline-block; width: 107px;}
#detail .before-after .title h2:after{display: none;}
#detail .before-after .blog-desc{font-size: 10px; line-height: 20px;  padding: 0; margin: 30px 0 0 0; white-space: normal;}
#detail .before-after .blog-desc button{background: #FFFB82; width: 40px; height: 20px; border-radius: 10px; font-size: 10px; line-height: 20px; vertical-align: top; margin: 0 3px 0 0; padding: 0;}
.viewBA .viewBA-item-operation-name *{word-break: break-all !important;}

@media(min-width:375px){
.main_ban_wrap li{width: 64px; height: 70px; flex-grow: 0; flex-basis: auto;}
}


@media(max-width:360px){
.sec_02 ul{width: auto;}
.sec_02 li{width: 90px; height: 90px;}
}