

.main-visual { position: relative; height: 100vh; overflow: hidden;} 
.main-visual .bg { width: 100%; height: 100%; background: url("/asset/image/bg/ask.png") no-repeat center center / cover;animation: zoom 10s infinite alternate; position: absolute; top: 0; left: 0; z-index: 9; } 
.main-visual .dim { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; z-index: 9; } 
.main-visual .txt-wrap { position: absolute; top: 50%; left: 100px; transform: translateY(-50%); z-index: 10; } 
.main-visual .txt-wrap>h2 { font-size: 80px; font-weight: 800; line-height: 96px; text-align: left; color: #FFFFFF; } 
.main-visual .txt-wrap>h2 span { font-weight: 400; color: #FFFFFF; }  
.ask-wrap {max-width: 1720px; margin: 0 auto; padding: 200px 100px; } 
.ask-wrap>p { font-size: 24px; font-weight: 800; line-height: 36px; text-align: center; color: #0046FF; margin-bottom: 20px; } 
.ask-wrap>h2 { font-size: 90px; font-weight: 800; line-height: 117px; text-align: center; margin-bottom: 50px; } 
.ask-wrap>p.sub-title { font-size: 30px; font-weight: 400; line-height: 45px; text-align: center; color: #000000; } 
.ask-wrap .search-wrap { display: flex; justify-content: end; } 
.ask-wrap .search-wrap form { position: relative; width: 450px; height: 70px; margin: 100px 0; } 
.ask-wrap .search-wrap form input { width: 100%; height: 100%; background: #F3F3F3; border: 1px solid #CCCCCC; padding: 20px 24px; transition: all 0.3s; } 
.ask-wrap .search-wrap form input:focus { background: #FFFFFF; } 
.ask-wrap .search-wrap form img { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); } 
.ask-wrap .search-wrap form img.no-hover { display: inline-block; transition: all 0.3s; } 
.ask-wrap .search-wrap form img.hover { display: none; transition: all 0.3s; } 
.ask-wrap .search-wrap form input:focus + a img.no-hover { display: none; } 
.ask-wrap .search-wrap form input:focus + a img.hover { display: inline-block; } 
.list-wrap { display: flex; flex-direction: column; border-top: 1px solid #000000; } 
.list-wrap li { padding: 30px 0 0 0; border-bottom: 1px solid #cccccc; }  
.list-wrap li .faq-question { display: flex; justify-content: space-between; align-items: center; padding-bottom: 30px; cursor: pointer; } 
.list-wrap li .faq-question > div { display: flex; align-items: center; gap: 20px; } 
.list-wrap li .faq-question .icon { width: 60px;height: 60px;position: relative;background: #CCCCCC;border-radius: 50%; } 
.list-wrap li .faq-question:hover .icon { background: #0046FF;} 
.list-wrap li .faq-question .icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 
.list-wrap li .faq-question .subject { font-size: 30px; font-weight: 800; line-height: 1; text-align: left; } 
.list-wrap li .faq-question:hover .subject { color: #0046FF; } 
.list-wrap li .faq-question .ico-down-tab {margin-right: 12.5px; transition: all 0.3s;}  
.list-wrap li .faq-question .ico-down-tab.no-hover {display: inline-block;} 
.list-wrap li .faq-question .ico-down-tab.hover {display: none;} 
.list-wrap li .faq-question:hover .ico-down-tab.no-hover {display: none;} 
.list-wrap li .faq-question:hover .ico-down-tab.hover {display: inline-block;} 
.list-wrap li  .faq-question.open .ico-down-tab {transform: rotate(180deg);} 
.list-wrap li .faq-answer {background: #F3F3F3; padding: 30px 80px;  display: none; } 
.list-wrap li .faq-answer > div {display: flex; gap: 20px;} 
.list-wrap li .faq-answer .icon { width: 60px; height: 60px; position: relative; border-radius: 50%; background: #0046FF; } 
.list-wrap li .faq-answer .icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 
.list-wrap li .faq-answer>:nth-child(2) { } 
.list-wrap li .faq-answer div >:nth-child(2) p { font-size: 24px; font-weight: 400; line-height: 36px; text-align: left; }
.list-wrap li.no-data { width: 100%; padding: 100px 0; text-align: center; background: #F3F3F3;}
.list-wrap li.no-data img { margin: 0 auto; } 
.list-wrap li.no-data p { margin-top: 30px; font-size: 26px; font-weight: 400; line-height: 39px; text-align: center; color:#777777; } 
.btn-more { padding: 25px 0; width: 265px; height: 90px; margin: 100px auto 0; background: #000000; display: flex; align-items: center; justify-content: center; gap: 30px; transition: all 0.3s; } 
.btn-more:hover { background: #0046FF; } 
.btn-more span { font-size: 26px; font-weight: 700; line-height: 39px; text-align: center; color: #FFFFFF; } 


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

@media screen and (max-width:1125px){
 .main-visual .txt-wrap { left: 20px; } 
 .main-visual .txt-wrap h2 { font-size: 38px; font-weight: 800; line-height: 49.4px; text-align: left; } 
 .main-visual .txt-wrap h2 span { font-weight: 400px; } 
 .ask-wrap { padding: 80px 20px; } 
 .ask-wrap>p { font-size: 14px; font-weight: 800; line-height: 19.6px; text-align: center; margin-bottom: 10px; } 
 .ask-wrap>h2 { font-size: 38px; font-weight: 800; line-height: 49.4px; text-align: center; margin-bottom: 0; } 
 .ask-wrap>p.sub-title { font-size: 18px; font-weight: 400; line-height: 27px; text-align: center; color: #000000; } 
 .ask-wrap .search-wrap form {margin: 50px 0; height: 50px;}
 .ask-wrap .search-wrap form img {width: 18px; height: 19px;}
 .list-wrap li {padding: 20px 0 0 0;}
 .list-wrap li .faq-question {  padding: 0 10px 20px 10px; } 
 .list-wrap li .faq-question > div { width: 100%; gap: 20px; } 
 .list-wrap li .faq-question .icon { width: 34px;height: 34px; } 
 .list-wrap li .faq-question .icon img { width: 12px; height: 17px; } 
 .list-wrap li .faq-question .subject {
    width: calc(100% - 55px);
    font-size: 18px;
    font-weight: 800;
    line-height: 27px;
    text-align: left;
     } 
 .list-wrap li .faq-question .ico-down-tab {margin-right: 12.5px; transition: all 0.3s;} 
 .list-wrap li .faq-answer {padding: 20px 10px; display: none; } 
 .list-wrap li .faq-answer .icon { width: 34px; height: 34px; } 
 .list-wrap li .faq-answer .icon img { width: 12px; height: 13.2px; } 
 .list-wrap li .faq-answer div>:nth-child(2) {    width: calc(100% - 55px);}
 .list-wrap li .faq-answer div>:nth-child(2) p {
font-size: 17px;
font-weight: 400;
line-height: 22.4px;
text-align: left;

 }
 .list-wrap li .faq-question .ico-down-tab {display: none !important;}
 .btn-more { padding: 16.5px 0; width: 350px; height: 60px; margin: 50px auto 0; gap: 20px; } 
 .btn-more span { font-size: 18px; font-weight: 700; line-height: 1; } 
 .btn-more img { width: 16px; } 
}
 
@media screen and (max-width:992px) { } 

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

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

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

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