#application_detail { margin: 2em 0 5vw; }
#application_detail .application_info { text-align: center; }
#application_detail .application_title { margin: 30px 0 50px; font-weight: 300; font-size: 20px; text-align: center; color: #29A6DD; }

/* skill_wrap */
#skill_wrap {padding: 25px 30px;border: 2px #29A6DD solid;border-radius: 10px;background: var(--white);}
#skill_wrap .skill_item , #skill_tabs .tabs_body { padding: 15px 20px; width: calc(50% - 55px); border: 2px #29A6DD solid; border-radius: 10px; }
#skill_wrap .skill_item >div { height: 100%; }
#skill_wrap .skill_item .img { width: 200px; }
#skill_wrap .skill_item .txt { margin-left: 40px; width: 1%; flex: 1 auto; }
#skill_wrap .skill_item .txt h3 { margin-bottom: 10px; font-weight: 400; font-size: 18px; color: #404040; }
#skill_wrap .skill_item .txt p { color: #29A6DD; }

/* fix_box */
.fix_box {padding-bottom: 20vh;width: 100vw;height: 80vh;justify-content: center;align-items: center;top: 0;left: 0;z-index: 999;}
.fix_box .row {overflow-y: scroll;padding: 70px 60px 60px;width: 850px;max-width: 90vw;/* height: 450px; */max-height: 80vh;background: #fff;border-radius: 5px;box-shadow: 0 0 10px rgb(0 0 0 / 25%);text-align: center;}
.fix_box .row::-webkit-scrollbar { width: 5px; }
.fix_box .row::-webkit-scrollbar-track { background: #fff; }
.fix_box .row::-webkit-scrollbar-thumb { background: rgba(var(--gray-rgb), .6); }
.fix_box .row a[data-action="closefixbox"] { width: 30px; height: 30px; border: 2px #888 solid; border-radius: 50%; top: 30px; right: 30px; }
.fix_box .row a[data-action="closefixbox"] i { color: #888; }
.fix_box .row h3 { text-align: center; font-weight: 400; font-size: 24px; color: #29A6DD; }
.fix_box .row h3 b{display:block;text-align: center;}
.fix_box .row .img_list { margin: 35px 0 20px; flex-wrap: wrap; }
.fix_box .row .img_list img {overflow: hidden;margin: 10px;width: calc((100% / 3) - 50px);border-radius: .2rem;}
.fix_box .row article { margin: 0 50px; text-align: center; font-weight: 400; color: #404040; }
.fix_box .row .more { margin-top: 2rem; padding: .5rem 1.5rem; background: #29A6DD; border-radius: .5rem; display: inline-block; color: #fff; }
.fix_box .row .moreBox{display:flex;flex-wrap: wrap;justify-content: center;}
.fix_box .row .moreBox a{width: calc(50% - 160px);margin: 5px;padding: 5px;text-align: center;font-size: 14px;}
#skill_tabs .tab_content ul li .fix_box .row .moreBox p{width: 100%;text-align: center;margin-top: 20px;margin-bottom: 5px;}
.fix_box .row .moreBox .text{width:100%;display: flex;flex-wrap: wrap;justify-content: center;}
.fix_box .row .moreBox .text span{width: calc(50% - 160px);margin: 5px;padding: 5px;text-align: center;font-size: 14px;border: 1px solid var(--primary);color: var(--primary);border-radius: 0.5rem;}

/* skill_tabs */
#skill_tabs ul.tabs_nav { margin: 20px 0; grid-template-columns: repeat(7, 1fr); grid-gap: 10px; }
#skill_tabs ul.tabs_nav a { padding: 10px 10px 35px; background: #DAEBF6; border-radius: 5px; }
#skill_tabs ul.tabs_nav .active a { background: #A3CCE7; }
#skill_tabs ul.tabs_nav a * { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-weight: 300; font-size: 14px; color: #252f36; }
#skill_tabs ul.tabs_nav a img { height: 150px; }
#skill_tabs ul.tabs_nav a font {position: relative;padding: 10px 0;min-height: 37px;border-bottom: .15rem rgb(41 166 221 / 50%) solid;}
#skill_tabs ul.tabs_nav a font:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 8px 7px 0 7px; border-color: #29A6DD transparent transparent transparent; display: block; bottom: -16px; content: ""; }
#skill_tabs ul.tabs_nav a font span { line-height: 1.3; }
#skill_tabs .tabs_body { width: auto; }
#skill_tabs .tab_content h4 {margin-top: 20px;text-align: center;font-weight: 400;font-size: 20px;color: #5F7584;}
#skill_tabs .tab_content ul { margin: 20px 0 30px; grid-template-columns: repeat(4, 1fr); grid-gap: 15px; }
#skill_tabs .tab_content ul li { padding: 25px 15px; border: 1px #29A6DD solid; border-radius: 5px; }

#skill_tabs .tab_content ul li >div {height: 100%;align-items: center;}
#skill_tabs .tab_content ul li p {width: 1%;flex: 1 auto;line-height: 1.3;font-weight: 600;color: #29A6DD;}
#skill_tabs .tab_content ul li >div >i { width: 20px; text-align: right; color: #29A6DD; }

@media screen and (max-width: 1024px){
    #skill_tabs ul.tabs_nav a *{text-align: center;}
    #skill_tabs ul.tabs_nav a font{text-align: center;line-height: 130%;}
    #skill_tabs .tab_content ul{grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width: 768px){
    #skill_wrap .skill_header{display:flex;flex-direction: column;}
    #skill_wrap .skill_item{width: calc(100% - 47px);}
    #skill_wrap .skill_item:last-child{margin-top: 20px;}
    #skill_tabs ul.tabs_nav{grid-template-columns: repeat(4, 1fr);}
    #skill_tabs .tab_content ul{grid-template-columns: repeat(3, 1fr);}
    #skill_tabs .tab_content ul{grid-template-columns: repeat(1, 1fr);}
    #skill_wrap{border: 0;padding: 0 10px;border-radius: 0;}
    .fix_box .row .moreBox a{width: calc(50% - 80px);}
}
@media screen and (max-width: 640px){
    .fix_box .row .moreBox a{width: 100%;}
    #skill_tabs ul.tabs_nav{grid-template-columns: repeat(2, 1fr);}
    .fix_box .row{padding: 50px 20px 40px;width: 100%;height: 400px;}
    #skill_wrap .skill_item{padding: 30px 20px 60px;position: relative;overflow: hidden;}
    #skill_wrap .skill_item:after{content:'>';position: absolute;bottom: 0;width: 100%;left: 0;text-align: center;background: var(--primary);color: var(--white);font-size: 22px;padding: 5px 0;font-family: 'Urbanist', sans-serif;}
    #skill_wrap .skill_item .f_aitems_stretch{display: flex;flex-direction: column;align-items: center;}
    #skill_wrap .skill_item .img{margin-bottom: 30px;}
    #skill_wrap .skill_item .txt{width:100%;margin: 0;}
    #skill_wrap .skill_item .txt *{text-align: center;}
    .fix_box .row a[data-action="closefixbox"]{top:15px;right:15px;}
    .fix_box .row .img_list img{width: calc((100% / 2) - 10px);margin: 5px;}
    .fix_box .row article{margin: 0 5px;}
}