@charset "utf-8";

.main{display: flex;align-items: flex-start;justify-content: flex-start;width: 100%;height: 100vh;}
.sec_title{position:relative; width:30rem;height: 100vh; padding: 5rem;}
.sec_title:after{content:'';display:block;position:absolute;bottom: 5rem;left: 3rem;width:16.6rem;height:18.4rem;background: url(../img/main/mainbg_img.svg) no-repeat top center / 16.6rem;}
.sec_title h1{font-family: 'SebangGothic'; font-size: 4rem; font-weight: 600; line-height: 1.25; color: #00bab8;}
.sec_title h1:after{content:'';display:inline-block;width:2.4rem;height:2.4rem;vertical-align: 0.7rem;margin-left: 0.5rem;background: url(../img/main/titleicon.svg) no-repeat top center / 2.4rem;}

.sec_main{width:calc(100% - 30rem); border-left: 1px solid #eee;}
.sec_main .linkbtn{display:block; position:relative; width: 2.6rem; height: 2.6rem; background: #00bab8; border-radius: 50%;}
.sec_main .linkbtn:after{content: ""; display: block; background: #fff; width: 8px; height: 1px; position: absolute; top: 14px; left: 8px; transform: rotate(45deg);}
.sec_main .linkbtn:before{content: ""; display: block; background: #fff; width: 23px; height: 1px; position: absolute; top: 17px; left: -7px;}

.sec_main .menu{width:100%; height:60.7rem; display: flex; align-items: stretch; justify-content: flex-start;}
.sec_main .menu .menudetail{width: 41%; height:100%;}
.sec_main .menu .menudetail .detail_panel{display:none; width: 100%; height: 100%; background: #4c4c4c; color: #fff; padding: 8rem 2.6vw;}
.sec_main .menu .menudetail .panel_01{background:url(../img/main/menu_panel01.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_02{background:url(../img/main/menu_panel02.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_03{background:url(../img/main/menu_panel03.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_04{background:url(../img/main/menu_panel04.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_05{background:url(../img/main/menu_panel05.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_06{background:url(../img/main/menu_panel06.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_07{background:url(../img/main/menu_panel07.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_08{background:url(../img/main/menu_panel08.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_09{background:url(../img/main/menu_panel09.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_10{background:url(../img/main/menu_panel10.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_11{background:url(../img/main/menu_panel11.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .panel_12{background:url(../img/main/menu_panel12.png?ver=1) no-repeat center center / cover;}
.sec_main .menu .menudetail .detail_panel .top{display: flex; width: 100%; align-items: center; justify-content: space-between;}
.sec_main .menu .menudetail .detail_panel .top h2{font-size: 3rem; font-weight: 500;}
.sec_main .menu .menudetail .detail_panel .top a{display: flex; align-items: center; justify-content: flex-start; gap: 1.5rem; font-size: 1.4rem;}
.sec_main .menu .menudetail .detail_panel .cont{ width: 100%; margin-top: 5rem;}
.sec_main .menu .menudetail .detail_panel .cont li{display: flex; align-items: flex-start; justify-content: flex-start;}
.sec_main .menu .menudetail .detail_panel .cont li + li{margin-top:3rem;}
.sec_main .menu .menudetail .detail_panel .cont li .btxttit{ width: 9rem; font-weight: 600; margin-right: 2rem; line-height: 1.3}
.sec_main .menu .menudetail .detail_panel .cont li .btxttit a{}
.sec_main .menu .menudetail .detail_panel .cont li .stxt{width: calc(100% - 11rem); padding-left: 2rem; font-size: 1.4rem; line-height: 1.4; border-left: 1px solid rgba(255,255,255,0.25);}
.sec_main .menu .menutab{width: 59%;height:100%;display: flex; align-items: flex-start; justify-content: space-between; background: url(../img/main/menu_bg.png) no-repeat center center; background-size: cover;}
.sec_main .menu .menutab li{position:relative; width: calc(100% / 12); height: 100%; font-size: 2.4rem; color: #fff; padding: 7.5rem 0 0; writing-mode: vertical-lr; text-orientation: upright; transition: all .3s;}
.sec_main .menu .menutab li.active{background: #00b2b0; box-shadow: 0px 1px 5px rgba(0,0,0,0.15);}
.sec_main .menu .menutab li:before{ content: ""; display: block;  background: url(../img/main/menu_active.svg) no-repeat center center / 1.5rem;  width: 15px;  height: 14px;  position: absolute;  top:-2rem;  left: 50%;  transform: translateX(-50%); transition: all 0.3s;}
.sec_main .menu .menutab li.active:before{ top: 5.2rem;}
.sec_main .menu .menutab li:hover{background: #00b2b0; box-shadow: 0px 1px 5px rgba(0,0,0,0.15);}
.sec_main .menu .menutab li:hover:before{top: 5.2rem;}
.sec_main .menu .menutab li + li{border-left:1px solid rgba(255,255,255,0.15);}
.sec_main .menu .menutab li a{display: flex; height: 100%; width: 100%; align-items: center;}

.sec_main .info{width: 100%; display: flex; align-items: stretch; justify-content: flex-start;}
.sec_main .info .use{width: 65%; padding: 5rem 2.6vw;}
.sec_main .info .use h4{font-weight: 700;}
.sec_main .info .use h4:after{content:'';display:inline-block;width: 1.8rem;height: 1.8rem;vertical-align: -3px;margin-left: 0.7rem;background: url(../img/main/useinfoicon.svg) no-repeat center center / 1.7rem;}
.sec_main .info .use ul{margin-top: 2rem;}
.sec_main .info .use ul li{font-size:1.4rem;font-weight: 500; text-indent: -10px; padding-left: 10px; line-height:1.3;}
.sec_main .info .use ul li:before {content: ""; display: inline-block; vertical-align: 5px; width: 4px; height: 1px; margin-right: 6px; background: #000;}
.sec_main .info .use ul li + li{margin-top: 1.5rem;}
.sec_main .info .khna{width:35%;background:#f7f7f7 url(../img/main/pagelink_img.svg)no-repeat bottom center / 28.7rem; background-position-x: 87%; padding:5rem 2.6vw; border-left: 1px solid #eee;}
.sec_main .info .khna a{display:block;width:100%;}
.sec_main .info .khna h3{font-size:2.4rem;line-height: 1.4;font-weight: 500; margin-bottom: 2.2rem;}

.sec_main .footer{border-top: 1px solid #eee; width: 100%; padding:4rem 5rem; display: flex; align-items: center; justify-content: space-between; color: #777; font-size: 1.2rem; letter-spacing: -0.02em;}
.sec_main .footer .address span + span{margin-left:1rem;}



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

    .sec_title{width:26rem;}
    .sec_main {width: calc(100% - 26rem);}
    .sec_main .menu .menudetail{width:55%;}
    .sec_main .menu .menutab{width: 45%; flex-wrap: wrap;}
    .sec_main .menu .menutab li{width: calc(100% / 2); height: calc(100% / 6); font-size:2rem; padding:0; writing-mode: inherit; text-orientation: inherit; overflow:hidden;}
    .sec_main .menu .menutab li a{justify-content: flex-start; padding-left: 5.3rem;}
    .sec_main .menu .menutab li:before{ top: 50%; left: -40px; transform: translateY(-50%) rotate(-90deg);}
    .sec_main .menu .menutab li:hover:before { top: 50%; left: 12%;}
    .sec_main .menu .menutab li.active:before{ top: 50%; left: 12%;}
  }
  
  @media screen and (max-width:1200px){

    body{min-width:1200px;}
  }