@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* { margin: 0; padding: 0; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 
ul { list-style-type: none; } 
hr { display: none; } 
img { border: none; } 
a { text-decoration: none; color: inherit; } 
a:hover { text-decoration: none; } 
html { font-size: 0.625rem; line-height: 1; min-width: 320px; background-color: #ddd; } 
body { font-family: 'Lato', 'Cabin', 'Noto Sans KR', sans-serif; padding-top: 0; animation: fadein 2s; -moz-animation: fadein 2s; -webkit-animation: fadein 2s; -o-animation: fadein 2s; } 
button { background: inherit; border: none; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; cursor: pointer; color: #000; } 

/* content */
#content-wrap { margin: auto; background: rgba(255, 255, 255, 1); max-width: 768px; position: relative; } 

/* main tit */
.qna-tit { width: 100%; height: 250px; position: relative; transition: all ease-in-out .3s;}
.sub-img { border: 3px solid #fff; width: 200px; height: 200px; position: absolute; right: 30px; bottom: -150px; z-index: 10; transition: all ease-out .3s; } 
.blind-bg { background: #000; width: 100%; height: 100%; opacity: .3; z-index: 0; } 
.qna-tit-txt { position: absolute; top: 50%; transform: translate(3%, -52%); color: #fff; z-index: 10; width: 95%; height: 100%; } 
.qna-tit-txt h2 { font-size: 3.8rem; letter-spacing: -1px; max-width: 88%; line-height: 1.25; transition: all ease-in-out .3s; } 
.qna-tit-txt h3 { font-size: 2rem; font-weight: 300; margin-top: 60px; margin-bottom: 5px; } 
.qna-tit-txt span { font-size: 1.4rem; position: absolute; bottom: 20px; } 
header {width: 100%; max-width: 768px; height: 65px; line-height: 65px; background: #000; transition: top 0.2s ease-in-out; overflow: hidden; z-index: 30; box-shadow: 0 10px 10px -10px rgba(30, 30, 30, 0.2);}
.qna-logo {text-align: center; background: #000; padding: 2px 0px; transition: .5s; margin-top: 5px;}
.qna-logo img {max-width: 100px; transition: .5s;}

/*prol*/
.group-info { position: absolute; bottom: -125px; left: 30px; color: #000; font-weight: bold; max-width: 55%; transition: all ease-in-out .3s; line-height: 1.35; } 
.group-info p:nth-child(1) { font-size: 2.8rem; color: #000; font-weight: bold; margin-bottom: 3px; letter-spacing: -1px; } 
.group-info p:nth-child(2) { font-size: 1.8rem; color: #707070; letter-spacing: -1px; font-weight: 300; line-height: normal; transition: all ease-in-out .3s; display: none; } 
.tit-article { margin-top: 155px; font-size: 1.8rem; font-weight: 300; padding: 30px; max-width: 100%; letter-spacing: -.3px; line-height: 1.75; transition: all ease-in-out .3s; } 
.tit-article p { margin-bottom: 20px; } 
.tit-article p img {width: 100%; text-align: center;}


/* menu */
#tag-menu { margin-bottom: 50px; margin-top: 30px; margin-left: 30px; max-width: 85%; } 
#tag-menu a { background-color: #000; color: #fff; padding: 15px; display: inline-block; margin-bottom: 10px; margin-right: 3px; font-size: 1.6rem; transition: all ease-in-out .3s; } 

/* accordion */
.accordion { background: #fff; cursor: pointer; padding: 0px 16px; margin: 10px 0px; outline: none; border: none; text-align: left; font-size: 2rem; font-weight: 700; width: 100%; min-height: 65px; height: auto; position: sticky; top: 65px; z-index: 200; transition:.4s; font-family: 'Lato', 'Cabin', 'Noto Sans KR', sans-serif; } 
.accordion > span:nth-child(1) { display: inline-block; width: 5%; margin-right: 30px; font-size: 2rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; letter-spacing: -1px; } 
.accordion > span:nth-child(2) { display: inline-block; width: 75%; vertical-align: middle; margin-right: 30px; font-size: 2rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; line-height: 3rem; letter-spacing: -1px; } 
.accordion-tit { width: 100%; height: auto; min-height: 65px; background: #fff; cursor: pointer; padding: 2px 7px; outline: none; text-align: left; font-weight: 700; font-size: 2.4rem; transition: 0.4s; border-bottom: 3px solid #151515; line-height: 65px; position: sticky; top: 0; z-index: 300; font-family: 'Lato', 'Cabin', 'Noto Sans KR', sans-serif; letter-spacing: -1px; } 
.accordion-box { margin-bottom: 50px; padding: 0px 30px; z-index: 200; } 
.active, .accordion:hover { font-weight: bold; } 
.accordion:after { content: ""; background: url(../img/add.png) no-repeat center center; display: inline-block; width: 20px; height: 20px; position: absolute; right: 16px; top: 50%; transform: translate(0px, -50%); } 
.active:after { content: ""; background: url(../img/subtract.png) no-repeat center center; } 
.panel { padding: 0 16px; background: #F1F1F1; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-bottom: 1px solid #eeeeee; font-size: 1.6rem; } 
.panel>div:nth-child(1) { width: 3%; float: left; padding: 2% 3% 0% 3%; font-size: 2.2rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; } 
.panel>div { width: 94%; float: left; padding: 1.85% 3% 3% 3%; font-size: 1.8rem; font-weight: 300; line-height: 2.55rem; transition: all ease-in-out .3s; letter-spacing: -1px; } 
.panel>div p { margin-bottom: 20px; } 
.panel>div p img{width: 100%;} 

/* answer content */
.video-container { position: relative; height: 0; padding-bottom: 56.25%; margin: 30px 0px; } 
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.qna-data { margin: 30px 0px; } 
.qna-article { border-top: 1px solid #ddd; transition: all ease-in-out .3s; } 
.qna-article h3 { font-size: 1.8rem; margin-top: 15px; margin-bottom: 8px; } 
.qna-article div {margin-bottom: 12px;} 
.qna-article div a{line-height: 1.35;} 
.article-tag { display: inline-block; border: 1px solid #151515; padding: 3px 5px; margin: 5px 5px 3px 0px; border-radius: 3px; font-size: 1.2rem; } 

/* side btn */
.allView-btn { display: inline-block; width: 65px; height: 65px; transition: transfrom 0.8s; position: fixed; bottom: 20px; right: 20px; border-radius: 5px; z-index: 999; transition: all ease-in-out .3s; } 
.allView-on { background: url(../img/allView_a.png?v=1) no-repeat center center; } 
.allView-off { background: url(../img/allView_b.png?v=1) no-repeat center center; } 

/* footer */
footer { background: #151515; font-size: 1.4rem; padding: 35px 10px; color: #fff; text-align: center; vertical-align: middle; line-height: 1.35; } 

@media screen and (max-width: 650px) { /* main-tit */
.qna-tit-txt { position: absolute; top: 50%; transform: translate(3%, -52%); color: #fff; z-index: 10; width: 92%; height: 100%; } 
.qna-tit-txt h2 { font-size: 3rem; margin-bottom: 10px; letter-spacing: -1px; max-width: 95%; line-height: 1.25; } 
.qna-tit-txt h3 { font-size: 1.6rem; font-weight: 300; margin-top: 30px; margin-bottom: 5px; } 
.sub-img { border: 3px solid #fff; width: 145px; height: 145px; position: absolute; right: 15px; bottom: -90px; z-index: 10; transition: all ease-out .3s; } 
.qna-tit-txt span { font-size: 1.2rem; position: absolute; bottom: 15px; } 
.qna-tit { width: 100%; height: 200px; position: relative; transition: all ease-in-out .3s;} 
header {width: 100%; max-width: 100%; height: 55px; line-height: 55px; background: #000; transition: top 0.2s ease-in-out; overflow: hidden; z-index: 30; box-shadow: 0 10px 10px -10px rgba(30, 30, 30, 0.2);}
.qna-logo {text-align: center; background: #000; padding: 2px 0px; transition: .5s; margin-top: 5px;}
.qna-logo img {max-width: 90px; transition: .5s;}


/* prol */
.group-info p:nth-child(1) { font-size: 2.6rem; color: #000; font-weight: bold; margin-bottom: 3px; letter-spacing: -1px; } 
.group-info { position: absolute; bottom: -95px; left: 15px; color: #000; font-weight: bold; max-width: 85%; } 
.tit-article { margin-top: 115px; font-size: 1.8rem; font-weight: 300; padding: 15px; max-width: 100%; letter-spacing: -.3px; line-height: normal; } 
.tit-article p { margin-bottom: 30px; }
.tit-article p img {width: 100%; text-align: center;}
.group-info p:nth-child(2) { font-size: 1.4rem; color: #707070; letter-spacing: -1px; font-weight: 400; max-width: 100%; line-height: normal; display: none; } 

/* menu */
#tag-menu { margin-bottom: 50px; margin-top: 20px; margin-left: 20px; max-width: 95%; } 
#tag-menu a { background-color: #000; color: #fff; padding: 15px; display: inline-block; margin-bottom: 10px; margin-right: 53x; font-size: 1.6rem; } 

/* accordion */
.accordion-box { margin-bottom: 50px; padding: 0px 20px; z-index: 200; } 
.accordion-tit { width: 100%; height: auto; min-height: 45px; background: #fff; cursor: pointer; padding: 2px 5px; outline: none; text-align: left; font-weight: 700; font-size: 1.8rem; transition: 0.4s; border-bottom: 3px solid #151515; line-height: 45px; position: sticky; top: 0; z-index: 300; font-family: 'Lato', 'Cabin', 'Noto Sans KR', sans-serif; letter-spacing: -1px; } 
.accordion { background: #fff; cursor: pointer; padding: 0px 16px; margin: 10px 0px; outline: none; border: none; text-align: left; font-size: 2rem; font-weight: 700; width: 100%; min-height: 75px; height: auto; position: sticky; top: 45px; z-index: 200; transition: .4s; font-family: 'Lato', 'Cabin', 'Noto Sans KR', sans-serif; } 
.accordion>span:nth-child(1) { display: inline-block; width: 5%; margin-right: 20px; font-size: 1.8rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; letter-spacing: -1px; } 
.accordion:after { content: ""; background: url(../img/add.png) no-repeat center center; display: inline-block; width: 17px; height: 17px; position: absolute; right: 16px; top: 50%; transform: translate(0px, -50%); } 
.active:after { content: ""; background: url(../img/subtract.png) no-repeat center center; } 
.accordion>span:nth-child(2) { display: inline-block; width: 77%; vertical-align: middle; margin-right: 30px; font-size: 1.8rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; line-height: normal; letter-spacing: -1px; } 
.panel>div:nth-child(1) { width: 3%; float: left; padding: 6% 5% 0% 3%; font-size: 2rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; } 
.panel { padding: 0 5px; background: #F1F1F1; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-bottom: 1px solid #eeeeee; font-size: 1.6rem; } 
.panel>div { width: 90%; float: left; padding: 5.85% 3% 3% 3%; font-size: 1.8rem; font-weight: 300; line-height: 2.55rem; } 
.panel>div p { margin-bottom: 20px; } 
.panel>div p img{width: 100%;} 

/* side btn */
.allView-btn { display: inline-block; width: 59px; height: 59px; transition: transfrom 0.8s; position: fixed; bottom: 30px; right: 20px; border-radius: 5px; z-index: 999; } 
.allView-on { background: url(../img/allView_a.png?v=1) no-repeat center center; } 
.allView-off { background: url(../img/allView_b.png?v=1) no-repeat center center; } 
 }

@media screen and (max-width: 380px) { /* main-tit */
.qna-tit-txt { position: absolute; top: 50%; transform: translate(5%, -52%); color: #fff; z-index: 10; width: 92%; height: 100%; } 
.qna-tit-txt h2 { font-size: 2.8rem; margin-bottom: 10px; letter-spacing: -1px; max-width: 95%; line-height:1.25; } 
.qna-tit-txt h3 { font-size: 1.6rem; font-weight: 300; margin-top: 40px; margin-bottom: 5px; } 
.sub-img { border: 3px solid #fff; width: 125px; height: 125px; position: absolute; right: 15px; bottom: -75px; z-index: 10; transition: all ease-out .3s; } 
.qna-tit-txt span { font-size: 1.2rem; position: absolute; bottom: 15px; } 
.qna-tit { width: 100%; height: 185px; position: relative; transition: all ease-in-out .3s;} 
header {width: 100%; max-width: 100%; height: 55px; line-height: 55px; background: #000; transition: top 0.2s ease-in-out; overflow: hidden; z-index: 30; box-shadow: 0 10px 10px -10px rgba(30, 30, 30, 0.2);}
.qna-logo {text-align: center; background: #000; padding: 2px 0px; transition: .5s; margin-top: 5px;}
.qna-logo img {max-width: 80px; transition: .5s;}


/* prol */
.group-info p:nth-child(1) { font-size: 2.2rem; color: #000; font-weight: bold; margin-bottom: 2px; letter-spacing: -1px; } 
.group-info { position: absolute; bottom: -75px; left: 15px; color: #000; font-weight: bold; max-width: 85%; line-height: 1.35; } 
.tit-article { margin-top: 95px; font-size: 1.8rem; font-weight: 300; padding: 15px; max-width: 100%; letter-spacing: -.3px; line-height: normal; } 
.tit-article p { margin-bottom: 20px; }
.tit-article p img {width: 100%; text-align: center;}
.group-info p:nth-child(2) { font-size: 1.3rem; color: #707070; letter-spacing: -1px; font-weight: 400; max-width: 100%; line-height: normal; display: none; } 

/* menu */
#tag-menu { margin-bottom: 35px; margin-top: 35px; margin-left: 15px; max-width: 95%; } 
#tag-menu a { background-color: #000; color: #fff; padding: 15px; display: inline-block; margin-bottom: 10px; margin-right: 3px; font-size: 1.6rem; } 

/* accordion */
.accordion-box { margin-bottom: 50px; padding: 0px 10px; z-index: 200; } 
.accordion-tit { width: 100%; height: auto; min-height: 45px; background: #fff; cursor: pointer; padding: 2px 5px; outline: none; text-align: left; font-weight: 700; font-size: 1.8rem; transition: 0.4s; border-bottom: 3px solid #151515; line-height: 45px; position: sticky; top: 0; z-index: 300; font-family: 'Lato', 'Cabin', 'Noto Sans KR', sans-serif; letter-spacing: -1px; } 
.accordion { background: #fff; cursor: pointer; padding: 0px 16px; margin: 10px 0px; outline: none; border: none; text-align: left; font-size: 2rem; font-weight: 700; width: 100%; min-height: 60px; height: auto; position: sticky; top: 45px; z-index: 200; transition: .4s; font-family: 'Lato', 'Cabin', 'Noto Sans KR', sans-serif; } 
.accordion>span:nth-child(1) { display: inline-block; width: 3%; margin-right: 20px; font-size: 1.8rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; letter-spacing: -1px; } 
.accordion:after { content: ""; background: url(../img/add.png) no-repeat center center; display: inline-block; width: 15px; height: 15px; position: absolute; right: 16px; top: 50%; transform: translate(0px, -50%); } 
.active:after { content: ""; background: url(../img/subtract.png) no-repeat center center; } 
.accordion>span:nth-child(2) { display: inline-block; width: 77%; vertical-align: middle; margin-right: 30px; font-size: 1.8rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; line-height: normal; letter-spacing: -1px; } 
.panel>div:nth-child(1) { width: 3%; float: left; padding: 6% 5% 0% 3%; font-size: 1.8rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; } 
.panel { padding: 0 5px; background: #F1F1F1; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-bottom: 1px solid #eeeeee; font-size: 1.6rem; } 
.panel>div { width: 90%; float: left; padding: 5.85% 3% 3% 3%; font-size: 1.8rem; font-weight: 300; line-height: 2.55rem; } 
.panel>div p { margin-bottom: 20px; } 
.panel>div p img{width: 100%;} 

/* side btn */
.allView-btn { display: inline-block; width: 59px; height: 59px; transition: transfrom 0.8s; position: fixed; bottom: 20px; right: 15px; border-radius: 5px; z-index: 999; } 
.allView-on { background: url(../img/allView_a.png?v=1) no-repeat center center; } 
.allView-off { background: url(../img/allView_b.png?v=1) no-repeat center center; } 
 }

@media screen and (max-width: 360px) { /* main-tit */
.qna-tit-txt h2 { font-size: 2.3rem; margin-bottom: 10px; letter-spacing: -1px; max-width: 95%; line-height: 1.25; } 
.qna-tit-txt h3 { font-size: 1.6rem; font-weight: 300; margin-top: 28px; margin-bottom: 5px; } 
.sub-img { border: 3px solid #fff; width: 120px; height: 120px; position: absolute; right: 12px; bottom: -75px; z-index: 10; transition: all ease-out .3s; } 
.qna-tit { width: 100%; height: 175px; position: relative; transition: all ease-in-out .3s;} 
header {width: 100%; max-width: 100%; height: 45px; line-height: 45px; background: #000; transition: top 0.2s ease-in-out; overflow: hidden; z-index: 30; box-shadow: 0 10px 10px -10px rgba(30, 30, 30, 0.2);}
.qna-logo {text-align: center; background: #000; padding: 2px 0px; transition: .5s; margin-top: 3px;}
.qna-logo img {max-width: 70px; transition: .5s;}



/* menu */
#tag-menu a { background-color: #000; color: #fff; padding: 15px; display: inline-block; margin-bottom: 10px; margin-right: 3px; font-size: 1.6rem; } 

/* accordion */
.accordion-tit { width: 100%; height: auto; min-height: 45px; background: #fff; cursor: pointer; padding: 2px 5px; outline: none; text-align: left; font-weight: 700; font-size: 1.8rem; transition: 0.4s; border-bottom: 3px solid #151515; line-height: 45px; position: sticky; top: 0; z-index: 300; font-family: 'Lato', 'Cabin', 'Noto Sans KR', sans-serif; letter-spacing: -1px; } 
.accordion { background: #fff; cursor: pointer; padding: 0px 8px; margin: 10px 0px; outline: none; border: none; text-align: left; font-size: 1.8rem; font-weight: 700; width: 100%; min-height: 60px; height: auto; position: sticky; top: 45px; z-index: 200; transition: .4s; font-family: 'Lato', 'Cabin', 'Noto Sans KR', sans-serif; } 
.accordion>span:nth-child(1) { display: inline-block; width: 5%; margin-right: 15px; font-size: 1.8rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; letter-spacing: -1px; } 
.accordion:after { content: ""; background: url(../img/add.png) no-repeat center center; display: inline-block; width: 12px; height: 12px; position: absolute; right: 16px; top: 50%; transform: translate(0px, -50%); } 
.active:after { content: ""; background: url(../img/subtract.png) no-repeat center center; } 
.accordion>span:nth-child(2) { display: inline-block; width: 76%; vertical-align: middle; margin-right: 30px; font-size: 1.8rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; line-height: normal; letter-spacing: -1px; } 
.panel>div:nth-child(1) { width: 3%; float: left; padding: 6% 5% 0% 3%; font-size: 1.8rem; font-weight: 700; font-family: 'Cabin', 'Noto Sans KR', sans-serif; } 
.panel>div p { margin-bottom: 20px; } 
.panel>div p img{width: 100%;} 

/* side btn */
.allView-btn { display: inline-block; width: 59px; height: 59px; margin-right: 0px; margin-bottom: 0px; transition: transfrom 0.8s; position: fixed; bottom: 20px; right: 10px; border-radius: 5px; z-index: 999; transition: all ease-in-out .3s; } 
 }

/*fadein animation */

@keyframes fadein { 
 from { opacity: 0; } 

 to { opacity: 1; } 
 }

@-moz-keyframes fadein { /* Firefox */
 from { opacity: 0; } 

 to { opacity: 1; } 
 }

@-webkit-keyframes fadein { /* Safari and Chrome */
 from { opacity: 0; } 

 to { opacity: 1; } 
 }

@-o-keyframes fadein { /* Opera */
 from { opacity: 0; } 

 to { opacity: 1; } 
 }