/* 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_11/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: 36px; height: 80px;  font-weight: 700; margin: 5px 0 0 0; letter-spacing: -0.07em;}
.main_ban_wrap .tit h1 p{font-size: 20px; font-weight: 500}
.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: 26px;  font-weight: 700;}
.sec .title h2 p{font-size: 15px; font-weight: 500}
.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 .contents{display: flex; flex-direction: column; gap: 30px; align-items: center}
.sec .title .des{font-size: 12px; line-height:18px; }
.sec .note{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; min-height: 25px; padding: 2px 0; display: flex; flex-direction: column; 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.target{background: #F4F5F9;}
.sec.target .title h2{line-height: 35px;}
.sec.target ul{display: flex; flex-wrap: wrap; flex-direction: row; width: 100%; justify-content: center; margin: 0 auto; gap: 20px 10px;}
.sec.target li{width: 100px; height: 100px; background-color: #fff; border: 6px solid; border-image: linear-gradient(to right, #DEF4FF, #DFE6FF); border-image-slice: 1; display: flex; align-items: center; justify-content: center;font-size: 10px; line-height: 14px;  text-align: center;box-shadow: 5px 5px 10px rgba(0,0,0,0.05);}


/* 수술 방법 */
.sec_05{text-align: center; background-color: #F4F5F9; }
.sec_05 .contents{display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start;  justify-content: center; gap: 0 10px;}
.sec_05 .contents .list{ 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%; min-height: 62px; flex-direction: column; padding: 10px 0; border: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 14px; background-color: #FFF; font-weight: 400}
.sec_05 .contents p .note{font-size: 10px; transform: scale(0.9); line-height: 14px; font-weight: 500;}
.sec_05 .contents p .note .point:before{height: 10px}


/* 소개 */
.sec_01{text-align: center;}
.sec_01 img{width: 303px;}
.sec_01 .note{font-size: 12px; line-height: 18px;}
.sec_01 .note .point:before{height: 12px;}
.sec_01 .img_ex_wrap{display: flex; flex-direction: column; gap: 30px;}

/* 단계별 눈꺼짐 정도 */
.sec_03 .contents{gap: 0;}
.sec_03 li{display: flex; flex-direction: column; align-items: center; padding: 15px 0; border-bottom: 1px solid #F4F5F9; gap: 20px;}
.sec_03 li:last-child{border: none;}
.sec_03 li .text{display: flex; flex-direction: column; gap: 10px; text-align: center}
.sec_03 li .text strong{font-size: 15px; line-height: 18px; font-weight: 700}
.sec_03 li .text span{font-size: 12px; line-height: 14px; font-weight: 500}
.sec_03 li .bna{display: flex; align-items: center; gap: 10px; justify-content: center}
.sec_03 li .bna > span{width: 150px; position: relative;}
.sec_03 .bna .before: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_03 .bna .after: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: 0; z-index: 1;}
.sec_03 li .bna img{width: 100%;}
.sec_03 li .bna svg{flex-shrink: 0;}
.sec_03 li:nth-child(1) .text strong{color: #B4B4B4;}
.sec_03 li:nth-child(2) .text strong{color: #9BB2E0;}
.sec_03 li:nth-child(3) .text strong{color: #576AB0;}
.sec_03 li:nth-child(4) .text strong{color: #1F3481;}


/* 눈가 지방이란 */
.sec_04{background: linear-gradient(90deg, #DEF4FF 0%, #DFE6FF 100%); display: flex; flex-direction: column; padding: 50px 16px; gap: 30px; text-align: center}
.sec_04 img{max-width: 255px !important;}
.sec_04 .container{background: #fff; padding: 0; box-shadow: 5px 5px 10px #C4D3F9;}
.sec_04 .summary{display: flex; flex-direction: column; gap: 20px; padding: 20px; align-items: center}
.sec_04 .summary h5{font-size: 20px; line-height: 25px; font-weight: 700; display: flex; flex-direction: column; gap: 10px; align-items: center}
.sec_04 .summary h5:after{content: ''; display: inline-block; width: 40px; height: 2px;}
.sec_04 .summary .summary_p{flex-grow: 1; text-align: left; font-size: 12px; line-height: 18px; text-align: center}
.sec_04 .note{font-size: 12px; line-height: 18px;}
.sec_04 .note .point:before{height: 12px;}
.sec_04 .summary .why{display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;}
.sec_04 .summary .why:before{content: 'WHY?'; display: block; font-size: 18px; line-height: 22px; color: #aaa; font-weight: 700; flex-basis: 100%;}
.sec_04 .summary .why li{font-size: 14px; line-height: 14px; font-weight: 500; position: relative;text-align: left; text-indent: -19px; padding: 0 0 0 19px;}
.sec_04 .summary .why li:before{content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 2px; background: #7AA3BB; vertical-align: top; margin: 0 5px 0 0;}
.sec_04 .summary .why li:after{content: ''; position: absolute; top: 1px; left: 4.5px; box-sizing: border-box; width: 5px; height: 9px; transform: rotate(45deg); border: 1.5px solid #fff; border-top: 0; border-left: 0; border-radius: 0; background: none; margin: 0;}
.sec_04 .contents{display: flex; flex-direction: column; gap: 20px; align-items: center}
.sec_04 .img_text_wrap{display: flex; justify-content: center; gap: 20px; align-items: center;}
.sec_04 .img_text_wrap strong{font-size: 15px; line-height: 18px; font-weight: 700;}
.sec_04 .img_text_wrap ul{display: flex; flex-direction: column; text-align: left; font-size: 12px; line-height: 18px; color: #333; font-weight: 500;}
.sec_04 .img_text_wrap li:before{content: '✓'; margin-right: 4px; font-weight: 700;}
.sec_04 .ex{display: flex; justify-content: center; padding: 20px; gap: 10px; flex-wrap: wrap;}

.sec_04 .container:nth-child(1) .problem{background: #F4F5F9; padding: 30px 8px; display: flex; justify-content: center;}
.sec_04 .container:nth-child(1) .box{background: #FFF; border: 1px solid #aaa; border-radius: 20px; padding: 20px 0; display: flex; flex-direction: column; gap: 30px; align-items: center; width: 100%;}
.sec_04 .container:nth-child(1) .box dl{display: flex; flex-direction: column; gap: 30px; text-align: center;}
.sec_04 .container:nth-child(1) .box dt{display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; line-height: 30px;}
.sec_04 .container:nth-child(1) .box dt .caution{ display: flex; width: 30px; height: 30px; border-radius: 40px; background: #AAA; justify-content: center; align-items: center; font-size: 20px; font-weight: 900; color: #fff; padding: 0;}
.sec_04 .container:nth-child(1) .box dd{margin: 0;}
.sec_04 .container:nth-child(1) .box dd .point:before{background-color: #D2C9FA;}
.sec_04 .container:nth-child(1) .box hr{margin: 0; border-top: 1px dashed #aaa; display: block; width: 250px;}
.sec_04 .container:nth-child(1) .box .before{display: flex; flex-direction: column; gap: 20px; align-items: center}



.sec_04 .container:nth-child(1) .box > svg{align-self: center;}
.sec_04 .container:nth-child(1) .box .solution_title{display: flex; flex-direction: column; align-items: center; gap: 15px;}
.sec_04 .container:nth-child(1) .box .solution_title p{ display: flex; padding: 0px 15px; border-radius: 30px; background: #7D71B2; justify-content: center; align-items: center; font-size: 15px; color: #fff; font-weight: 700; height: 25px;}
.sec_04 .container:nth-child(1) .box .solution_title img{width: 261px !important; max-width: 261px !important}
.sec_04 .container:nth-child(1) .ex .img_wrap .img:after{background-color: #A89BE0;}
.sec_04 .container:nth-child(1) .img_text_wrap li:before{color: #7C7C7F}
.sec_04 .container:nth-child(1) .img_text_wrap.solution li:before{color: #A89BE0}

.sec_04 .container:nth-child(1) .summary h5{color: #A89BE0;}
.sec_04 .container:nth-child(1) .summary h5:after{background-color: #A89BE0;}

.sec_04 .container:nth-child(2) .summary h5{color: #7AA3BB;}
.sec_04 .container:nth-child(2) .summary h5 strong{color: #206B96;}
.sec_04 .container:nth-child(2) .summary h5:after{background-color: #7AA3BB;}
.sec_04 .container:nth-child(2) .summary strong.two_line{font-size: 20px; line-height: 20px; font-weight: 700}
.sec_04 .container:nth-child(2) .summary p.two_line{font-size: 12px; line-height: 18px;}
.sec_04 .container:nth-child(2) .ex{background: #F4F5F9}


/* 포인트 */
.sec_06 .contents{display: flex; flex-direction: column; gap: 30px; align-items: center; text-align: center}
.sec_06 .contents > p{font-size: 12px; line-height: 18px;}
.sec_06 .contents .img_ex_wrap{display: flex; flex-direction: column; gap: 10px }
.sec_06 .contents ul{padding: 20px 0; display: flex; gap: 15px;  width: 320px; justify-content: center; flex-wrap: wrap; justify-content: center}
.sec_06 .contents li{flex-basis: 151px; padding: 30px 0; display: flex; flex-direction: column; gap: 10px; border-radius: 10px; background: #FAFAFB; position: relative; justify-content: center}
.sec_06 .contents li:nth-child(2), .sec_06 .contents li:nth-child(3){background: #F0F5F9}
.sec_06 .contents li svg{position: absolute; left: 50%; top: 0; margin: -9px 0 0 -11px}
.sec_06 .contents li .number{font-size: 12px;line-height: 18px; font-weight: 700; color: #7AA3BB}
.sec_06 .contents li strong{ font-size: 12px; line-height: 18px; font-weight: 700}
.sec_06 .contents li p{font-size: 12px; line-height: 18px; font-weight: 400;}


#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;}
}