@charset "utf-8";

*{padding:0; margin:0;}
html{/*height:100%;*/ font-family: 'Noto sans', sans-serif; font-smoothing: antialiased; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body{width:100%; min-height:100%; height:100%;font-size:16px;font-family:'Noto sans', 나눔고딕, Dotum, Sans-serif;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display: block;}
audio, canvas, progress, video{display: inline-block; vertical-align: baseline;}
audio:not([controls]) {display: none; height: 0;}
[hidden], template{display: none;}
a{background-color: transparent; text-decoration:none; color:#fff;}
a:active, a:hover{outline: 0;}
a:hover{color:#fff;}
li{list-style:none;}
abbr[title]{border-bottom: 1px dotted;}
b, strong{font-weight: bold;}
dfn{font-style: italic;}
h1{font-size: 2em; margin:0;}
mark{background: #ff0; color: #000;}
small{font-size: 80%;}
sub, sup{font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup{top: -0.5em;}
sub{bottom: -0.25em;}
img{border: 0; width:100%;}
svg:not(:root){overflow: hidden;}
figure{margin: 1em 40px;}
hr{-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}
pre{overflow: auto;}
code, kbd, pre, samp{font-family: monospace, monospace; font-size: 1em;}
button, input, optgroup, select, textarea{color: inherit; font: inherit; margin: 0;}
button{overflow: visible;}
button, select{text-transform: none;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled], html input[disabled]{cursor: default;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
input{line-height: normal;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{height: auto;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend {border: 0; padding: 0;}
textarea {overflow: auto;}
optgroup {font-weight: bold;}
table {border-collapse: collapse; border-spacing: 0;}
td, th {padding: 0;}
.hide{height:0; font: 0/0 a; text-shadow: none; color: transparent; overflow:hidden;} 
.cboth{height:0; font: 0/0 a; text-shadow: none; color: transparent; overflow:hidden; clear:both;} 
em{font-style:normal;}
ul#image-gallery{display:none;}

@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 400; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: medium; 
  font-weight: 500; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: bold; 
  font-weight: 700; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); 
 } 

.all .footer{width:100%;background:#C5B6A8;text-align:center;height:30px;line-height:30px;}
.all .footer p{color:#887B6F;font-size:0.875rem;}

/*header*/
.all .header{width:100%;height:65px;background:#3d3d3d;text-align:center;position:relative;}
.all .header .bookmark{position:absolute;top:15px;right:10px;}
.all .header .bookmark img{width:35px;}
.all .header .logo img{width:95px;margin-top:20px;}
.all .header .back{position:absolute;top:18px;left:10px;}
.all .header .back img{width:18px;}
.all .header .nav_open{position:absolute;top:22px;right:10px;}
.all .header .nav_open img{width:25px;}

/*sidebar*/
.all .side_nav{height: 100%;width:0;position: fixed;z-index: 9999;top:0;right: 0;overflow-x: hidden;box-sizing:border-box;}
.all .overlay{width:100%;height:100%;background:#000;opacity:0.7;z-index:99998;position:fixed;}
.all .side_wrap{float:right;position:relative;width:220px;right:0;background:#f9f9f9;min-height:100%;box-sizing:border-box;z-index:99999;}
.all .nav{width:92%;margin:0 auto;}
.all .nav li{border-bottom:1px dashed #ddd;box-sizing:border-box;padding-left:10px;}
.all .nav li:last-child{border-bottom:none;}
.all .side_nav .side_header{position:relative;width:100%;background:#3C2272;text-align:center;height:45px;line-height:45px;}
.all .side_nav .side_header p{color:#fff;font-size:1.25rem;}
.all .side_nav .nav_close{position:absolute;top:12px;right:10px;border-bottom:none;}
.all .side_nav .nav_close img{width:20px;}
.all .nav li a{display:block;height:45px;line-height:45px;box-sizing:border-box;color:#3d3d3d;font-size:1.125rem;}
.all .nav a:last-child{border-bottom:none;}

.all .skill_wrap, .all .skill_con{background:url(../../img/bg_land.jpg) no-repeat top center;background-size:cover;} 



/*skill*/
.all .skill_wrap{display:table;height:auto;min-height:calc(100% - 95px);margin:0 auto;width:100%;}
.all .skill{display:table-cell;vertical-align:middle;text-align:center;}
.all .skill li a{display:block;}
.all .skill li{border-radius:10px;display:inline-block;width:18%;box-sizing:border-box;margin:4px;height:110px;}
.all .skill li img{width:auto;max-width:100%;height:90px;padding:10px 0;}
.all .skill li:nth-child(1){background:#8F53D8;margin-top:30px;}
.all .skill li:nth-child(2){background:#C18CE3;margin-top:30px;}
.all .skill li:nth-child(3){background:#5E99DD;}
.all .skill li:nth-child(4){background:#20B6CB;}
.all .skill li:nth-child(5){background:#65CFDF;}
.all .skill li:nth-child(6){background:#33CCA3;}
.all .skill li:nth-child(7){background:#B5D24F;}
.all .skill li:nth-child(8){background:#F69123;}
.all .skill li:nth-child(9){background:#F1C448;margin-bottom:30px;}
.all .skill li:nth-child(10){background:#F25E68;margin-bottom:30px;}

/*list*/
.all .skill_tab ul{font-size:0;border-bottom:1px solid #ccc;width:100%;overflow-x:auto;}
.all .skill_tab li{display:inline-block;font-size:0.875rem;width:10%;height:65px;border-right:1px dashed #ccc;background:#f5f5f5;cursor:pointer;color:#666;line-height:65px;text-align:center;box-sizing:border-box;}
.all .skill_tab li.active{background:#990597;color:#fff;border-right:none;font-weight:bold;}
.all .skill_tab li:last-child{border-right:none;}
.all .skill_tab{width:100%;overflow-x:auto;}

.all .skill_con{width:100%;height:auto;min-height:calc(100% - 211px);padding:25px 0;text-align:center;}
.all .skill_con ul{font-size:0;margin:0 auto;width:100%;text-align:center;display:table-cell;vertical-align:middle;}
.all .skill_con li{display:inline-block;width:auto;box-sizing:border-box;text-align:center;margin:20px;position:relative;}
.all .skill_con li a{display:block;}
.all .skill_con .bmark{position:absolute;top:10px;left:10px;z-index:3;}
.all .skill_con .bmark img{width:25px;}
.all .skill_app img{width:100%;max-width:130px;position:relative;}
.all .skill_app{display:table;width:100%;height:auto;min-height:calc(100% - 211px);}

/*bookmark*/
.all .bookmark_tit{width:100%;color:#fff;background:#990597;font-size:1.563rem;height:50px;line-height:50px;text-align:center;}
.all .bookmark_con{min-height:calc(100% - 195px);}
.all .bookmark_con .skill_app{min-height:calc(100% - 195px);}
.all .bookmark_con .skill_app li{position:relative;}
.all .bookmark_con .del{position:absolute;top:-8px;left:-8px;z-index:2;}
.all .bookmark_con .del img{width:33px;}
.all .bookmark_con li{margin:15px;}

.list_wrap .none_wrap{display:table;width:100%;height:calc(100% - 145px);}
.list_wrap .none{display:table-cell;vertical-align:middle;}
.list_wrap .none img{max-width:120px;}
.list_wrap .none p{font-weight:bold;font-size:1.125rem;color:#555262;margin-top:10px;}

/*app*/
.app_wrap iframe{width:100%;height:100%;}



/* 240206 레벨테스트 추가 */
.skill_all{display:flex !important;justify-content: center;align-items: center;flex-wrap:wrap;}
.skill_all .skill{display:flex;flex-wrap:wrap;justify-content: center;align-items: baseline;}
.skill_all .skill li.all{width:100%;max-width:500px;}
.skill_all .lv_go{text-align:center;margin:0 auto;width:100%;box-sizing:border-box;}
.skill_all .lv_go a{display:inline-block;width:100%;max-width:500px;border-radius:10px;text-align:center;height:110px;background:#4E62C7;}
.skill_all .lv_go img{width:auto;max-width:100%;height:90px;padding:10px 0;}

@media all and (orientation:portrait) {

.all .skill_wrap, .all .skill_con{background:url(../../img/bg_port.jpg) repeat-y;background-size:100% auto;}    
/*skill*/
.all .skill{font-size:0;text-align:center;}
.all .skill li{width:42%;height:90px;margin:8px;box-sizing:content-box;}
.all .skill li img{padding:0;}
    
/*list*/
.all .skill_tab ul{font-size:0;border-bottom:1px solid #ccc;width:max-content;overflow-x:auto;}
.all .skill_tab li{display:inline-block;font-size:0.938rem;width:95px;height:65px;border-right:1px dashed #ccc;background:#f5f5f5;cursor:pointer;color:#666;line-height:65px;text-align:center;}
.all .skill_tab li.active{background:#990597;color:#fff;border-right:none;font-weight:bold;}
.all .skill_tab li:last-child{border-right:none;}
.all .skill_tab{width:100%;overflow-x:auto;}

/*bookmark*/    
.all .skill_con ul{font-size:0;margin:0 auto;width:300px;text-align:left;display:block;}
.all .skill_con li{display:inline-block;;box-sizing:border-box;text-align:center;margin:15px;}
.all .skill_app img{width:100%;max-width:120px;}
    

/* 240206 레벨테스트 추가 */
.skill_all .lv_go{padding:0 20px;margin-top:30px;}
.skill_all .lv_go a{height:90px;}
.skill_all .lv_go img{height:90px;padding:0 0;}
.all .lv_wrap .skill li:nth-child(1), .all .lv_wrap .skill li:nth-child(2){margin-top:16px;}

}


@media all and (min-width: 1025px) {
    .all .header .logo img{width:114px;margin-top:16px;}
    .all .skill_app{width:82%;margin:0 auto;}
    .all .skill_app img{max-width:160px;}
    /* .all .skill_con .bmark{top:15px;left:15px;} */
    .all .bookmark_con .del{top:-5px;left:-5px;}
    .all .skill_con .bmark img, .all .bookmark_con .del img{width:33px;}
    .all .skill_tab li{font-size:1.05rem;}

    .all .skill li{height:130px;margin:10px;}
    .all .skill li img{height:110px;}

    .list_wrap .none img{max-width:160px;}
    .list_wrap .none p{font-size:1.3rem;margin-top:20px;}


    /* 240206 레벨테스트 추가 */
    .skill_all .lv_go a{height:130px;margin:10px;}
    .skill_all .lv_go img{height:110px;}

}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .all .skill_con li{display:inline-block;width:auto;box-sizing:border-box;text-align:center;margin:20px;}
    .all .skill_con a > img{max-width:133px;}
    .all .skill_con ul{text-align:center;width:80%;}
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
    
}

@media (max-width: 600px) and (orientation: landscape) {
    .all .skill_con a > img{width:90px;}
}

@media (max-width: 360px) and (orientation: portrait) {
}

@media (max-width: 950px) and (orientation: landscape) {
    .all .skill_tab ul{width:max-content;overflow-x:auto;}
    .all .skill_tab li{width:95px;height:65px;}
    .all .skill_con ul{max-width:640px;}
    .all .skill_app{max-width:640px;margin:0 auto;}
    .all .skill_app img{width:100%;max-width:100px;position:relative;}
    .all .bookmark_con .del img{width:30px;}
    .all .skill_con li{margin:10px;}

    
    /* 240206 레벨테스트 추가 */
    .skill_all .lv_go{margin-top:30px;}
    .skill_all .lv_go a{max-width:50%;margin:0 auto;}
    .all .lv_wrap .skill li:nth-child(1), .all .lv_wrap .skill li:nth-child(2){margin-top:8px;}
}