.graph-container {max-width: 680px;text-align: center;padding: 30px 0;box-sizing: border-box;background-color: #fff;border-radius: 20px;border:5px solid #2d8f8b;box-sizing: border-box;margin: 50px auto 30px;}
.graph-container > div {position: relative;}
.graph-container > div > h3{position: absolute;top:44%;left: 50%;transform: translate(-50%,-50%);z-index: 1; font-size: 22px;color:#000;width: 120px;height: 45px;line-height: 45px; text-align: center;background: url(//image.idhospital.com/faceline/graph_titbox1.png) no-repeat center;background-size: 100%;font-weight: 800;}
.graph-container ul {padding:10px 0 20px;margin:0;display:flex;justify-content:center;align-items: center;position: relative;}
.graph-container ul .graph-title {display: block;width: 80px;height: 80px;background-color: #e9efee;border-radius: 50%;box-sizing: border-box;}
.graph-container ul .graph-title > h5 {font-size: 20px;color:#09282b;font-weight: 800;white-space: nowrap;}
.graph-container ul .graph-title > strong{display: block;font-weight: bolder;font-size: 30px;color:#09282b;padding: 13px 0 5px;}

.graph-container ul .graph-area {width:460px;display:flex;height:10px;justify-content:space-between;margin: 0 10px;border-radius: 40px;overflow: hidden;background: rgb(238, 238, 238);}
.graph-container ul .graph-area div {display:flex;align-items:center;box-sizing:border-box}
.graph-container ul .graph-area .graph-left {padding-right:10px;justify-content:flex-end;width:50%;border-radius: 40px;}
.graph-container ul .graph-area .graph-right {padding-left:10px;width:50%;border-radius: 40px;}

.graph-container .graph_line02 > h3{background-image: url(//image.idhospital.com/faceline/graph_titbox2.png);}
.graph-container .graph_line03 > h3{background-image: url(//image.idhospital.com/faceline/graph_titbox3.png);}
.graph-container .graph_line04 > h3{background-image: url(//image.idhospital.com/faceline/graph_titbox4.png);}


/*.graph-container .graph_line01 .graph-area .graph-left{
background: rgb(88,166,241);
background: -moz-linear-gradient(90deg, rgba(88,166,241,1) 0%, rgba(0,102,232,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(88,166,241,1) 0%, rgba(0,102,232,1) 100%);
background: linear-gradient(90deg, rgba(88,166,241,1) 0%, rgba(0,102,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#58a6f1",endColorstr="#0066e8",GradientType=1);}

.graph-container .graph_line02 .graph-area .graph-left{
background: rgb(255,187,176);
background: -moz-linear-gradient(90deg, rgba(255,187,176,1) 0%, rgba(253,144,59,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(255,187,176,1) 0%, rgba(253,144,59,1) 100%);
background: linear-gradient(90deg, rgba(255,187,176,1) 0%, rgba(253,144,59,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffbbb0",endColorstr="#fd903b",GradientType=1);
}

.graph-container .graph_line03 .graph-area .graph-left{
background: rgb(255,217,62);
background: -moz-linear-gradient(90deg, rgba(255,217,62,1) 0%, rgba(231,176,49,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(255,217,62,1) 0%, rgba(231,176,49,1) 100%);
background: linear-gradient(90deg, rgba(255,217,62,1) 0%, rgba(231,176,49,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd93e",endColorstr="#e7b031",GradientType=1);
}

.graph-container .graph_line04 .graph-area .graph-left{
background: rgb(206,254,92);
background: -moz-linear-gradient(90deg, rgba(206,254,92,1) 0%, rgba(127,203,33,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(206,254,92,1) 0%, rgba(127,203,33,1) 100%);
background: linear-gradient(90deg, rgba(206,254,92,1) 0%, rgba(127,203,33,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cefe5c",endColorstr="#7fcb21",GradientType=1);
}*/


 @media screen and (max-width: 720px) {
     
     .graph-container {padding: 4.16vw 0;width: 94.444vw;border-radius: 2.7vw;border:0.69vw solid #2d8f8b;margin: 6.3vw auto 0.5vw;}
     .graph-container > div > h3{font-size: 3vw;width: 16.667vw;height: 6.25vw;line-height: 6.25vw;}
     .graph-container ul {padding:1.38vw 0 2.77vw;}
     .graph-container ul .graph-title {width: 11.11vw;height: 11.11vw;}
     .graph-container ul .graph-title > h5 {font-size: 2.77vw;}
     .graph-container ul .graph-title > strong{font-size: 4.16vw;padding: 1.8vw 0 0.7vw;}

     .graph-container ul .graph-area {width:63.889vw;height:1.38vw;margin: 0 1.38vw;border-radius: 5.5vw;}
     .graph-container ul .graph-area .graph-left {padding-right:1.38vw;border-radius: 5.55vw;}
     .graph-container ul .graph-area .graph-right {padding-left:1.38vw;}
     .score_people{width: 94.44vw;margin: 0 auto;}
     
     
 }
@media screen and (max-width: 720px) {
    .recommend_box dl dt{width: 31.111vw;}
     
}
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

@font-face {
    font-family: 'GmarketSans';
    font-weight: bold;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.ttf') format("truetype");
    font-display: swap;
} 




.survey_view{max-width: 720px;margin: 0 auto;text-align: center;}

/* score_cont */
.score_cont{background: url(//image.idhospital.com/faceline/result_bg.jpg) no-repeat center;background-size: cover;padding:105px 0 0;position: relative;}
.score_tit{display: none;}
.score_inner{position: relative;overflow: hidden;}
.score_inner::before{content: '';display: block;background: url(//image.idhospital.com/faceline/score_em_v1.png) no-repeat center;background-size: 100%;width: 600px;height: 172px;box-sizing: border-box;position: absolute;bottom: 42px;left: 50%;transform: translate(-50%,0);}
.multiply {mix-blend-mode : screen;}
.score_inner img{} 
.score_inner > p{font-family: 'GmarketSans';font-weight: bold;width: 39%;text-align: center;line-height: 1.5;letter-spacing: -2px;}
.score_inner > p strong{font-family: 'GmarketSans';font-weight: bold;display: block;}
.score_inner > p strong span{font-family: 'GmarketSans';font-weight: bold;}
.score_inner .score_txt{font-size: 50px;color:#000;position: absolute;bottom: 43px;left: 10.78%;}
.score_inner .score_txt strong{font-size: 88px;color:#007d6d;}
.score_inner .quote_txt{font-size: 50px;color:#000;position: absolute;bottom: 55px;right: 10.78%;border-left: 4px solid #aaaaaa;}
.score_inner .quote_txt strong {font-size: 40px;color:#007d6d;margin-top: 11px;}
.score_inner .quote_txt strong span{font-size: 65px;color:#007d6d;letter-spacing: 0px;}

.score_people img{display: block;margin: 0 auto;}

/* recommend */
.recommend{background: rgb(88,197,153);
background: -moz-linear-gradient(180deg, rgba(88,197,153,1) 70%, rgba(236,255,198,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(88,197,153,1) 70%, rgba(236,255,198,1) 100%);
background: linear-gradient(180deg, rgba(88,197,153,1) 70%, rgba(236,255,198,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#58c599",endColorstr="#ecffc6",GradientType=1);padding: 80px 20px 48px;box-sizing: border-box;}
.recommend_tit{display: block;margin: 0 auto;}
.recommend_tit img{display: block;margin: 0 auto;}
.recommend_box{width: 100%;background-color: #fff;border:5px solid #225c4e;border-radius: 0 0 20px 20px;box-sizing: border-box;border-top:0;padding: 27px 0;}
.recommend_box dl{}
.recommend_box dl dt{margin-bottom: 35px;}
.recommend_box dl dd{text-align: left;font-size: 28px;color:#000;margin-bottom: 35px;line-height: 1.4;padding-left: 40px;}
.recommend_box dl dd span{font-weight: 800;line-height: 1.3;background-color: #f4feb6;}

.recommend_price{margin-top: 30px;}

/* db_cont */
#db_anc {display:none}
.db_cont{background: url(//image.idhospital.com/faceline/db_bg.jpg) no-repeat center;background-size: cover;max-width: 720px;margin: 0 auto;padding: 47px 0;box-sizing: border-box;position: relative;}
.db_tit{text-align: center;}
.db_input_box{position: relative;padding-left: 20px;}
.db_input_box ul{padding: 25px 0 10px;}
.db_input_box ul li{display: inline-block;vertical-align: top;}
.db_input_box ul li input{height: 51px;box-sizing: border-box;border:0;border-radius: 10px;padding-left: 20px;font-size: 25px;color:#000;font-weight: 500;font-family: "Noto Sans KR", sans-serif;}
.db_input_box ul li input::placeholder {color:#000;font-family: "Noto Sans KR", sans-serif;font-weight: 500;}
.db_input_box ul li input#promotion_counsel_name{width:200px;margin-right: 18px;}
.db_input_box ul li input#promotion_counsel_mobile{width:300px;}
.db_input_box ol{}
.db_input_box ol li{display: inline-block;vertical-align: top;}
.db_input_box ol li label{font-size: 18px;}
.db_input_box ol li input[type=checkbox] {width:24px; height:24px; margin:0 6px 0 0; display:inline-block; vertical-align:middle; accent-color:#000;color:#000;}
.db_input_box ol li:first-child {margin-right:35px;}

.db_btn {background-color:transparent;border:0;cursor: pointer;display: inline-block;padding: 0;position: absolute;top:14px;right: 0;}
.db_cont::before{content: '';display: block;background: url(//image.idhospital.com/faceline/db_tit_gif.gif) no-repeat center;background-size: cover;width: 160px;height: 95px;box-sizing: border-box;position: absolute;top:20px;right: 10px;z-index: 2;}


.floating{position: sticky;bottom: 0;z-index: 100;}

/* sns_cont */
.sns_cont{max-width: 720px;margin: 0 auto;text-align: center;background: url(//image.idhospital.com/faceline/sns_bg.jpg) no-repeat center;background-size: cover; padding: 30px 0 10px;box-sizing: border-box;}
.sns_tit{width: 30%;margin: 0 auto 15px;}
.sns_tit img{width: 100%;}
.sns_list{}
.sns_list li{display: inline-block;vertical-align: top;margin: 0 5.5px;width: 75px;}
.sns_list li img{width: 100%;}

/* btn */
.button-container{max-width: 720px;margin: 0 auto;text-align: center;background-color: #0b2e32;padding: 20px 0;}
.button-container > a{display: inline-block;vertical-align: top;margin: 0 8px;width: 35%;}
.button-container > a img{width: 100%;}


 @media screen and (max-width: 720px) {
     .survey_view img{width: 100%;}
     .score_cont{padding:14.58vw 0 0;}
     .score_tit{width: 100%;margin: 0 auto;}
     .score_inner{width: 94.444vw;margin: 0 auto;}
     .score_inner::before{width: 83.33vw;height: 23.89vw;bottom: 5.8vw;}
     .score_inner img{width: 100%;} 
     .score_inner .score_txt{font-size: 6.94vw;bottom: 5.97vw;letter-spacing: -0.3vw;left: 9%;}
     .score_inner .score_txt strong{font-size: 12vw;}
     
     .score_inner .quote_txt {font-size: 6.94vw;bottom: 7.6vw;right: 7.2%;border-left: 0.56vw solid #aaaaaa;letter-spacing: -0.1vw;width: 42.8%;}
     .score_inner .quote_txt strong {font-size: 5.5vw;margin-top: 1.4vw;}
     .score_inner .quote_txt strong span{font-size: 9vw;}

     
     .score_people img{}
    
     /* recommend */
     .recommend{padding: 11.11vw 0 6.66vw;}
     .recommend_tit{width: 94.444vw;}
     .recommend_box{width: 94.444vw;margin: 0 auto;border:0.69vw solid #225c4e;border-radius: 0 0 2.77vw 2.77vw;border-top: 0;padding: 3.75vw 0;}
     .recommend_box dl{}
     .recommend_box dl dt{margin:0 auto 4.8vw;}
     .recommend_box dl dd{font-size: 3.88vw;margin-bottom: 4.86vw;padding-left: 5.5vw;}
     .recommend_price{width: 94.3vw;margin: 4.16vw auto 0;}
     
     /* db_cont */
     .db_cont img{width: 100%;}
     .db_cont{padding: 6.5vw 0;}
     .db_tit{width: 48vw;margin: 0 auto;}
     .db_input_box{padding-left: 2.77vw;}
     .db_input_box ul{padding: 3.2vw 0 1.38vw;}
     .db_input_box ul li{}
     .db_input_box ul li input{height: 7vw;border-radius: 1.38vw;padding-left: 2.77vw;font-size: 3.47vw;}
     .db_input_box ul li input#promotion_counsel_name{width:26vw;margin-right: 2vw;}
     .db_input_box ul li input#promotion_counsel_mobile{width:43vw;}
     .db_input_box ol li label{font-size: 2.5vw;}
     .db_input_box ol li input[type=checkbox] {width:3.3vw; height:3.3vw; margin:0 0.83vw 0 0;}
     .db_input_box ol li:first-child {margin-right:4.86vw;}
 
     .db_btn {background-color:transparent;border:0;cursor: pointer;display: inline-block;padding: 0;position: absolute;top:1.94vw;right: 0;width: 22vw;}
     .db_btn input{width: 100%;}
     .db_cont::before {width: 22.22vw;height: 13.19vw;top: 2.77vw;right: 1.38vw;}
     
     /* sns_cont */
     .sns_cont img{width: 100%;}
     .sns_cont{padding: 4.16vw 0 2vw;}
     .sns_tit{width: 31vw;margin: 0 auto 2vw;}
     .sns_list{}
     .sns_list li{display: inline-block;vertical-align: top;margin: 0 0.5vw;width: 11vw;}
     .sns_list li a{display: block;width: 100%;height: 100%;}
     
     /* btn */
     .button-container{padding: 3.3vw 0;}
     .button-container > a{margin: 0 0.8vw;width: 40vw;}
     .button-container > a img{width: 100%;}
     
     
}

@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 300;
    font-style: normal;
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-aLt.eot');
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-aLt.eot?#iefix') format('embedded-opentype'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-aLt.woff2') format('woff2'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-aLt.woff') format('woff'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-aLt.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 400;
    font-style: normal;
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.eot');
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.eot?#iefix') format('embedded-opentype'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.woff2') format('woff2'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.woff') format('woff'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 700;
    font-style: normal;
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-cBd.eot');
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-cBd.eot?#iefix') format('embedded-opentype'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-cBd.woff2') format('woff2'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-cBd.woff') format('woff'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-cBd.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 800;
    font-style: normal;
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-dEb.eot');
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-dEb.eot?#iefix') format('embedded-opentype'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-dEb.woff2') format('woff2'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-dEb.woff') format('woff'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-dEb.ttf') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'NanumSquareNeo';
    font-weight: 900;
    font-style: normal;
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-eHv.eot');
    src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-eHv.eot?#iefix') format('embedded-opentype'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-eHv.woff2') format('woff2'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-eHv.woff') format('woff'),
         url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-eHv.ttf') format("truetype");
    font-display: swap;
} 




html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'NanumSquareNeo';
    font-weight: 700;
	line-height: 1;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	
}


/* footer */
.footer{text-align: center;background-color: #f4f4f4;padding: 80px 0 60px;}
.footer_tit{font-size: 25px;padding-bottom: 25px;}
.footer > ul{}
.footer > ul li{line-height: 1.7;font-size: 18px;}
.footer > .copy{font-weight: 400;font-size: 16px;margin-top: 50px;}


@media screen and (max-width: 720px) {
    .footer{padding: 11vw 0 9vw;}
    .footer_tit{font-size: 3.47vw;padding-bottom: 3.47vw;}
    .footer > ul li{font-size: 2.5vw;}
    .footer > .copy{font-size: 2.3vw;margin-top: 6.5vw;}
    
    
}








.gnb-wrapper {width:720px; position:absolute; left:50%; top:0; transform:translate(-50%,0); z-index:150;}
.gnb-wrapper .gnb_open {position:absolute; top:40px; left:20px; width:50px; cursor:pointer;}
.gnb-wrapper .gnb_open img {width:100%;}

.gnb-wrapper #gnb {width:360px; background:#fff; border:3px solid #000; box-sizing:border-box; position:relative; display:none;}
.gnb-wrapper #gnb .gnb_close {position:absolute; top:10px; right:10px; width:15px; cursor:pointer;}
.gnb-wrapper #gnb .gnb_tit {width:100%; text-align:center; background:#eef5e4; padding:25px 0 20px; line-height:1; font-size:29px; color:#000; font-weight:bolder;}
.gnb-wrapper #gnb ul {padding:0 30px;}
.gnb-wrapper #gnb ul li {width:100%;}
.gnb-wrapper #gnb ul li:last-child {border:none;}
.gnb-wrapper #gnb ul li a {position:relative; display:block; padding:24px 22px; color:#707070; font-size:25px; font-weight:800; text-decoration:none; box-sizing:border-box; border-bottom:1px solid #b4b4b4;}
.gnb-wrapper #gnb ul li a::after {content:'▶'; display:block; font-size:20px; position:absolute; right:20px; top:50%; transform:translate(0,-50%);}

@media screen and (max-width:720px) {

	.gnb-wrapper {width:100%;}
	.gnb-wrapper .gnb_open {top:5.56vw; left:2.78vw; width:6.94vw;}

	.gnb-wrapper #gnb {width:50vw; border:0.5vw solid #000;}
	.gnb-wrapper #gnb .gnb_close {top:1.4vw; right:1.4vw; width:2.08vw;}
	.gnb-wrapper #gnb .gnb_close img {width:100%;}
	.gnb-wrapper #gnb .gnb_tit {padding:3.47vw 0 2.78vw; font-size:4.03vw;}
	.gnb-wrapper #gnb ul {padding:0 4.17vw;}
	.gnb-wrapper #gnb ul li a {padding:3.33vw 3.06vw; font-size:3.47vw; border-bottom:0.2vw solid #b4b4b4;}
	.gnb-wrapper #gnb ul li a::after {font-size:2.78vw; right:2.78vw;}
     
}