@charset "utf-8";
/* CSS Document */

html {
  scroll-behavior: smooth;
}

body { font-size:16px;}
.box0{ width:90%; margin:0 auto}
.box1{ width:1400px; margin:0 auto; max-width:94%;}
.box2{ width:1400px; margin:0 auto; max-width:74%;}
.box3{ width: 1400px; margin: 0 auto; max-width:60%;}
.box4{ width: 1400px; margin: 0 auto; max-width:65%;}

.pcHide{ display:none !important;}
.moHide{}

.rB{font-family: 'roboto';}
.nS{font-family: 'ns';}

.dwrap{ position:relative; width:2000px; left:50%; top:0; margin-left:-1000px}
.dwrap img{ display:block}

/*header*/
#header{ position:fixed; left:0; top:0; width:100%; z-index:1000}
#header .headWrap .wrapH{ height:5em}
.headerT,
#header .headWrap .gnb_wrap .gnb > li .dp1{ padding-top:5em}
#header .headWrap .logo > a{ display:block; height:3em; overflow:hidden}
#header .headWrap .logo .in{ display:block; height:100%; transform:translateY(-100%); transition:.3s}
#header .headWrap .logo .in img{ display:block; height:100%}
#header .headWrap .gnb_wrap .gnb > li {position:relative;}
#header .headWrap .gnb_wrap .gnb > li .dp1{ padding:1em 2em; box-sizing:border-box; min-width:10em; text-align:center; position:relative; color:#fff}
#header .headWrap .gnb_wrap .gnb > li.on .dp1:after{ content:""; position:absolute; left:50%; bottom:0; width:2em; height:4px; background:#23d3c5; transform:translate(-50%, 50%)}
#header .headWrap .gnb_wrap .gnb > li .dp1 .tt{ font-size:1.250em}
#header .headWrap .gnb_wrap .gnb > li .dp2{ position:absolute; left:50%; width:11em; box-sizing:border-box; padding:.75em 0; background:#fff; display:block; box-shadow:0 1em 1em rgba(0,0,0,.2); transition:transform .3s; opacity:0; visibility:hidden; 
transform:translate(-50%, -2em); transform-origin:left top}
#header .headWrap .gnb_wrap .gnb > li:hover .dp2{ opacity:1; visibility:visible; transform:translate(-50%, 0)}
#header .headWrap .gnb_wrap .gnb > li .dp2 > li > a{ padding:.750em; color:#111; position:relative; transition:.3s; font-weight:400; font-size:.938em;}
#header .headWrap .gnb_wrap .gnb > li .dp2 > li > a .tt{color:#111; }
#header .headWrap .gnb_wrap .gnb > li .dp2 > li:hover > a .tt,
#header .headWrap .gnb_wrap .gnb > li .dp2 > li.on > a .tt{ color:#23d3c5; }
#header .headWrap .gnb_wrap .gnb > li .dp2 > li:last-child > a{ border-bottom:none}
#header .headWrap .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:1em}

#header .all_wrap{ width:5em;}
#header .all_wrap .btn_all{ position:relative;}
#header .all_wrap .btn_all .btn_in{ position:relative; display:block; width:1.625em; height:1.25em;}
#header .all_wrap .btn_all .ham,
#header .all_wrap .btn_all .ham:before,
#header .all_wrap .btn_all .ham:after { display:block; width:100%; height:2px; background:#fff; transition:.2s;}
#header .all_wrap .btn_all .ham:before,
#header .all_wrap .btn_all .ham:after { content:""; position:absolute; right:0;}
#header .all_wrap .btn_all .ham:before{ top:calc(50% - 1px);}
#header .all_wrap .btn_all .ham:after { top:calc(100% - 2px);}
#header .all_wrap .btn_all:hover .ham:before{ width:80%;}
#header .all_wrap .btn_all:hover .ham:after { width:90%;}

#header.allOpen .all_wrap .btn_all{ position:fixed; top:2em; right:3em; z-index:999; background:transparent; border-color:transparent;}
#header.allOpen .all_wrap .btn_all .btn_in{ width:3em; height:3em;}
#header.allOpen .all_wrap .btn_all .ham{ background:transparent; transition:0s;}
#header.allOpen .all_wrap .btn_all .ham:before,
#header.allOpen .all_wrap .btn_all .ham:after { width:100% !important; top:50% !important; background:#fff;}
#header.allOpen .all_wrap .btn_all .ham:before{ transform:rotate(45deg);}
#header.allOpen .all_wrap .btn_all .ham:after { transform:rotate(-45deg);}

#header .all_wrap .all{ position:fixed; z-index:-1; top:0; left:0; width:100vw; height:100vh; visibility:hidden; opacity:0; transition:all .3s;}
#header .all_wrap .all .wrap_bg{ position:absolute; top:0; left:0; width:inherit; height:inherit; background:#23d3c5; transform:translateX(100%); transition:all .3s;}
#header .all_wrap .all .wrap_in{ position:absolute; top:0; left:0; width:inherit; height:inherit; opacity:0; transition:opacity .3s ease 0s;}
#header .all_wrap .all .wrap_in .all_scroll{ height:inherit;}
#header .all_wrap .all .allconWrap{ padding:22vh 0; color:#fff; opacity:0; transform:translateY(8em); transition:all .8s;}
#header .all_wrap .all .allconWrap .tit{padding-bottom:1em; font-size:3.313em; opacity:1; font-weight:600;}
#header .all_wrap .all .allconWrap .all_gnb .gnb{ flex-wrap:wrap;}
#header .all_wrap .all .allconWrap .all_gnb .gnb .flex{ display:block; text-align:left !important;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li{ flex:1 1 25%; max-width:25%; display:block; padding:1em;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li a{ position:relative;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li ul{}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li ul li a{ padding:.5em 0;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp1{ margin-bottom:1.5em; font-weight:600;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp1:before{ content:""; display:block; position:absolute; top:0; left:0; width:1.375em; height:.375em; background:#fff; border-radius:6em; transform:rotate(-45deg) translate(-.5em, -1.125em);}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp1 .tt{ font-size:1.5em;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp2 > li > a{ font-weight:500;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp2 > li > a .tt{ font-size:1em; opacity:.8;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp3 > li > a{ padding-left:.875em; opacity:.6;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp3 > li > a:before{ content:""; display:block; position:absolute; left:0; top:.875em; width:5px; height:2px; background:#fff;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp3 > li > a .tt{ font-size:.938em;}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp2 > li:hover > a .tt{text-decoration:underline;  opacity:1}
#header .all_wrap .all .allconWrap .all_gnb .gnb > li .dp3 > li:hover > a .tt{ text-decoration:underline; opacity:1}

#header.allOpen{ z-index:999;}
#header.allOpen .all_wrap .all{ visibility:visible; z-index:99; opacity:1;}
#header.allOpen .all_wrap .all .wrap_bg{ transform:translateX(0);}
#header.allOpen .all_wrap .all .wrap_in{ opacity:1; transition-delay:.5s;}
#header.allOpen .all_wrap .all .allconWrap{ opacity:1; transform:translateY(0); transition-delay:.5s;}
#header.allOpen .all_wrap .btn_all .ham,
#header.allOpen .all_wrap .btn_all .ham:before,
#header.allOpen .all_wrap .btn_all .ham:after {background:#fff}

.scroll #header{ background:#fff; color:#111; box-shadow:0 0 2em rgba(0,0,0,.1)}
.scroll #header .headWrap .logo .in{ transform:translateY(0)}
.scroll #header .headWrap .gnb_wrap .gnb > li .dp1{ color:#111}
.scroll #header .all_wrap .btn_all .ham,
.scroll #header .all_wrap .btn_all .ham:before,
.scroll #header .all_wrap .btn_all .ham:after {background:#111}

#header.gnbOpen {background:#fff}
#header.gnbOpen .headWrap .gnb_wrap .gnb > li .dp1{color:#111;}
#header.gnbOpen .all_wrap .btn_all .ham,
#header.gnbOpen .all_wrap .btn_all .ham:before,
#header.gnbOpen .all_wrap .btn_all .ham:after {background:#111}
#header.gnbOpen .headWrap .logo .in { transform:translateY(0)}

/*footer*/
#footer{ background:#000}
#footer .goTop{ position:absolute; z-index:9; right:0; top:-2em; width:3.750em; height:3.750em; background:#23d3c5; border-radius:100%; color:#fff;}
#footer .goTop .xi{ font-size:1.750em;}
#footer .goTop:hover{ background:#333; border-color:#333; color:#fff;}
#footer .foot_wrap{position:relative;}
#footer .foot_wrap .wrap_in{ color:#fff; padding:4.5em 0 5.375em 0;}
#footer .foot_wrap .wrap_in .info_wrap .logo > a{ display:block; padding-bottom:2em;}
#footer .foot_wrap .wrap_in .info_wrap .logo > a img{ width:11em;}
#footer .foot_wrap .wrap_in .info_wrap{ flex:1;}
#footer .foot_wrap .wrap_in .info_wrap .info .tt:not(p){ display:inline-block; vertical-align:middle;}
#footer .foot_wrap .wrap_in .info_wrap .info .tt{ padding:.5em 1.375em .313em 0; font-size:1em; font-weight:400; opacity:.8}
#footer .foot_wrap .wrap_in .info_wrap .copy{ margin-top:2em;}
#footer .foot_wrap .wrap_in .info_wrap .copy .tt{ font-size:.938em; opacity:.5;}
#footer .foot_wrap .wrap_in .sitemap_wrap{ width:14em;}
#footer .foot_wrap .wrap_in .sitemap_wrap .inner{ flex:1;}
#footer .foot_wrap .wrap_in .sitemap_wrap .gnb > li .dp1{ display:inline-block; padding:.5em 0;}
#footer .foot_wrap .wrap_in .sitemap_wrap .gnb > li .dp1 .tt{ font-size:.938em;}
#footer .foot_wrap .wrap_in .sitemap_wrap .gnb > li .dp1:hover .tt{ text-decoration:underline;}

/*contents*/
#contents{ min-height:100vh; box-sizing:border-box;}
#contents .doc{ padding:2em 0 12em 0}
#contents .sub_visual_wrap{ position:relative}
#contents .sub_visual_wrap .wrap_in{ position:relative; height:28em;}
#contents .sub_visual_wrap .wrap_in .twrap{ height:100%; color:#fff}
#contents .sub_visual_wrap .wrap_in .twrap .t1{ font-size:1.250em; margin-bottom:10px;}
#contents .sub_visual_wrap .wrap_in .twrap .t1 .point{font-weight:700; vertical-align:top;}
#contents .sub_visual_wrap .wrap_in .twrap .t2{ font-size:2.75em; font-weight:700; text-transform:uppercase; }

#contents .sub_tab{}
#contents .sub_tab .gnb > li{ width:100%}
#contents .sub_tab .gnb > li .dp2{ justify-content:center; padding-left:1px}
#contents .sub_tab .gnb > li .dp2:before {content:''; width:2000px; height:1px; background:#fff; position:absolute; opacity:.7}
#contents .sub_tab .gnb > li .dp2 > li{ flex:1 1 100%; max-width:25%; position:relative}
#contents .sub_tab .gnb > li .dp2 > li > a{ display:block; color:#555; padding:1.5em 0; background: #fff; transition: .35s;}
#contents .sub_tab .gnb > li .dp2 > li > a .tt{ font-size:1.125em; font-weight:500;}
#contents .sub_tab .gnb > li .dp2 > li:hover > a{ color:#23d3c5}
#contents .sub_tab .gnb > li .dp2 > li.on{ z-index:1; }
#contents .sub_tab .gnb > li .dp2 > li.on:before {content:''; width:100%; position:absolute; height:4px; background:#333; top:-2px;}
#contents .sub_tab .gnb > li .dp2 > li.on > a{ color:#23d3c5; border-color:transparent; position:relative; opacity:1;}
#contents .sub_tab .gnb > li .dp2 > li > a:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:1em; background:#333; opacity:.7;}
#contents .sub_tab .gnb > li .dp2 > li:first-child > a:before{ display:none;}

#contents .sub_tit_wrap{ padding:2em 0 0 0}
#contents .sub_tit_wrap .tit{ font-weight:700; font-size:2.625em; margin-bottom:.4em; color:#111; position: relative; display: inline-block;}
#contents .sub_tit_wrap .tit:before {content: ''; position: absolute; bottom: 10px; left: 0; width: 100%; height: 10px; background: #22d3c5; opacity: 0.2; z-index: -1;}
#contents .sub_tit_wrap .nav{ margin-bottom:1em}
#contents .sub_tit_wrap .nav > li{ color:#888; font-size:.938em}
#contents .sub_tit_wrap .nav > li:before{ content:"\e940"; font-family:xeicon; padding:0 .5em; vertical-align:middle}
#contents .sub_tit_wrap .nav > li:first-child:before{ display:none}
#contents .sub_tit_wrap .nav > li:last-child .tt{ text-decoration:}
#contents .sub_tit_wrap .nav > li:first-child{color:#22d3c5}

.dp1on .gnb .dp2{ display:none!important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1,
.dp2on .gnb > li .dp3{ display:none!important}
.dp2on .gnb > li.on{ display:block!important}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on{ display:block!important}

/*MAIN*/
.visualSlider .el{ position:relative; overflow:hidden; height:100vh; background:#fff}
.visualSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.1); opacity:0;}
.visualSlider_wrap{ position:relative}
.visualSlider_wrap .wrapL{ left:10%; width:50%; box-sizing:border-box}
.visualSlider_wrap .slogan{ color:#fff; z-index:10; position:absolute; top:45%;width:100%; box-sizing:border-box; transform:translateY(-50%)}
.visualSlider_wrap .slogan .logo{ height:8em; transform:translateY(3em); opacity:0}
.visualSlider_wrap .slogan .t1{ font-size:2.25em; opacity:0; margin-top:.5em}
.visualSlider_wrap .slogan .t1 .point{ font-weight:700; vertical-align:top; transform:scaleX(1.3); transform-origin:left top}
.visualSlider .el.swiper-slide-active .slogan .logo{ transform:translateY(0); opacity:1; transition:1.5s; transition-delay:.5s}
.visualSlider .el.swiper-slide-active .slogan .t1{ opacity:1; transition:1.5s; transition-delay:1s}
.visualSlider .el.swiper-slide-active .bg,
.visualSlider .el.swiper-slide-duplicate-active .bg{ transform:scale(1) rotate(.001deg); opacity:1; transition:3s;}
.visualSlider_wrap .swiper_control{ position:absolute; bottom:2em; left:3%; z-index:10; color:#fff}
.visualSlider_wrap .paging{ display:flex}
.visualSlider_wrap .paging > span{ position:relative; background:rgba(255,255,255,.5); opacity:1; height:2px; width:2em; margin:0; margin-top:2em; border-radius:0; position:relative; transition:.3s}
.visualSlider_wrap .paging > span:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:100%; background:#fff}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active{ width:7em}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active:before{ opacity:1}
.visualSlider_wrap .paging > span.swiper-pagination-bullet-active:after{ width:100%; transition:4s; transition-delay:.5s; transition-timing-function:ease-out}

.mainScroll{ position:absolute; left:50%; bottom:2em; transform:translateX(-50%); z-index:100}
.mainScroll a{ line-height:1; color:#fff; animation-name: downAni; animation-duration: 3s; animation-iteration-count: infinite; position:relative}
.mainScroll a .xi{ font-size:2.5em}
.mainScroll a:before{ content:""; position:absolute; left:calc(50% - 1px); top:100%; width:1px; height:4em; background:#fff}
@keyframes downAni{
70% { transform:translateY(0)}
85% { transform:translateY(.5em)}
100% { transform:translateY(0)}
}

/* Inc */
.main_tit .t1 {font-size: 3em; font-weight: 100; margin-bottom: 1rem; color: #fff; text-transform: uppercase;}
.main_tit .t1.tt {font-size: 1.313rem; opacity: .6;}
.main_tit .t1 sup {font-size: 1.5rem;}
.main_tit .t2 {font-size: 1.75em; font-weight: 300; line-height: 1.5; color: #fff; opacity: .9;}
/* ### */
/* main - Section1 */
#section1 {padding: 5em 0; background: url(../images/main/prod_bg.jpg) no-repeat 50% 50% fixed;}
#section1 .sec1_wrap .sec1_con .sec1_tit_wrap {margin-bottom: 1em;}
#section1 .sec1_paging_num {font-size: 1.313em; width: auto; color: #f8f8f8; margin-right: 1em; display: none;}
#section1 .sec1_paging_num .swiper-pagination-current {font-size: 1.5em; color: #23d3c5; font-weight: 600;}
.sec1_btn_next, 
.sec1_btn_prev {position: relative; background: #fff; width:3.25em; height:3.25em; border-radius: 50%; box-shadow:0 0 10px rgb(0,0,0,0.1); margin:.2em; cursor: pointer; transition: .35s;}
.sec1_btn_next:hover, 
.sec1_btn_prev:hover {background: #23d3c5;}
.sec1_btn_next:hover:before, 
.sec1_btn_prev:hover:before {color: #fff;}
.sec1_btn_prev:before {position: absolute; content:'\e93d'; font-family: 'xeicon' !important; font-size: 1.5em; color: #222; top:50%; left:50%; transform:translate(-50%,-50%)}
.sec1_btn_next:before {position: absolute; content:'\e940'; font-family: 'xeicon' !important; font-size: 1.5em; color: #222; top:50%; left:50%; transform:translate(-50%,-50%)}
.btn_wrap {margin-right: 1em;}

#section1 .sec1_swiper_con {overflow:hidden; padding:2em 0; box-sizing:border-box;}
#section1 .sec1_swiper_con .item {position: relative; height:400px; box-shadow: 0 0 15px rgb(0,0,0,1)}
#section1 .sec1_swiper_con .item .img_size {width:100%; height:100%; position: relative;}
#section1 .sec1_swiper_con .item .img_size:before {content: ''; position: absolute; width: inherit; height: inherit; background: linear-gradient(to bottom, transparent, transparent, black);}
#section1 .sec1_swiper_con .item .img_size img {object-fit: cover; width: 100%; height: 100%; object-position:center;}
#section1 .txt_con {position: absolute; bottom: 2em; left:2em; color: #fff;}
#section1 .txt_con .tt {font-size: 1.5em; margin-bottom: 1em; text-transform: uppercase;}
#section1 .txt_con .more_box .more {padding:.5em .5em .5em 1em; border: 1px solid #fff; background: transparent; border-radius: 5px;}
#section1 .txt_con .more_box .more .xi {vertical-align: sub; padding-left: .5em; transition: .35s; }
#section1 .txt_con .more_box .more:hover .xi {padding-left: 1em;}
/* ### */


/* main - Section2 */
#section2 {padding: 7em 0;}
#section2 .sec2_wrap {}
#section2 .sec2_wrap .main_news {}
#section2 .main_news .tit {margin-bottom: 2em; position: relative;}
#section2 .main_news .tit:before {content: ''; position: absolute; right: 103%; width: 20%; height: 3px; top: 50%; transform: translateY(-50%); background: linear-gradient(to left, #0ba094, #23d3c5, #fff);}
#section2 .main_news .tit:after {content: ''; position: absolute; top: 50%; left: -3%; width: 10px; height: 10px; border: 3px solid #0ba094; background: #fff; border-radius: 50%; transform: translateY(-50%)}
#section2 .main_news .tit .t1 {text-transform: uppercase; font-size: 2.5em; font-weight: 600; color: #333; flex: 1; padding-left: .25em;}
/* #section2 .main_news .tit .line {display: inline-block; width: 100%; height: 2px; background: linear-gradient(to right, #0ba094, #23d3c5, #fff); flex: 9; position: relative;}
#section2 .main_news .tit .line:before {content: ''; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; background: #0ba094; border-radius: 50%; transform: translateY(-50%);} */
#section2 .news_slider {}
#section2 .sec2_swiper_control {flex: 1 1 15%;}
#section2 .inner_item {flex: 1 1 85%;}
#section2 .items {}
#section2 .items .list {text-align: left; border-right: 1px solid #ddd; padding: 0 2em; box-sizing: border-box;}
#section2 .items .list .title {font-size: 1.25em; color: #333; margin-bottom: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;}
#section2 .items .list .title:hover {text-decoration: underline;}
#section2 .items .list .txt {font-size: 1em; color: #888; margin-bottom: 2em; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
#section2 .items .list .day {font-size: .875em; color: #888;}


/* Section2 Swiper -btn */
#section2 .sec2_btn_next, 
#section2 .sec2_btn_prev {position: relative; background: #fff; width:3.25em; height:3.25em; border-radius: 50%; box-shadow:0 0 10px rgb(0,0,0,0.1); margin:.2em; cursor: pointer; transition: .35s;}
#section2 .sec2_btn_next:hover, 
#section2 .sec2_btn_prev:hover {background: #23d3c5;}
#section2 .sec2_btn_next:hover:before, 
#section2 .sec2_btn_prev:hover:before {color: #fff;}
#section2 .sec2_btn_prev:before {position: absolute; content:'\e93d'; font-family: 'xeicon' !important; font-size: 1.5em; color: #222; top:50%; left:50%; transform:translate(-50%,-50%)}
#section2 .sec2_btn_next:before {position: absolute; content:'\e940'; font-family: 'xeicon' !important; font-size: 1.5em; color: #222; top:50%; left:50%; transform:translate(-50%,-50%)}
/* ### */



/* main - Section3 */
#section3 {background: url(../images/main/main_sec3_bg.jpg) no-repeat 50% 50%; padding: 9em 0; background-size: cover;}
#section3 .intro {gap: 2.5em;}
#section3 .intro > li {box-shadow: 0 0 20px rgb(0,0,0,0.15); transition: .35s;}
#section3 .intro > li:hover {transform: scale(1.1);}
#section3 .intro > li > a {padding: 1em 5em;}
#section3 .intro > li > a .tt {position: relative; padding-right: 1.5em; font-size: 1.25em; font-weight: 500;}
#section3 .intro > li > a .tt:after {content: '\e93f'; font-family: 'xeicon'; position: absolute; right: 0; font-size: 1em;}
#section3 .intro .intro_btn {background: #fff;}
#section3 .intro .intro_btn .intro .tt {color: #23d3c5;}
#section3 .intro .inquiry_btn {background: #23d3c5;}
#section3 .intro .inquiry_btn .inquiry .tt {color: #fff;}
/* ### */


/*SUB PAGE*******************/
/*inc*/
.page_sec0{ margin-top:.5em !important;}
.page_sec1{ margin-top:1em !important;}
.page_sec2{ margin-top:2em !important;}
.page_sec3{ margin-top:3em !important;}
.page_sec4{ margin-top:4em !important;}
.page_sec5{ margin-top:5em !important;}
.page_sec6{ margin-top:6em !important;}
.page_sec7{ margin-top:7em !important;}
.page_sec8{ margin-top:8em !important;}
.page_sec9{ margin-top:9em !important;}
.page_sec10{ margin-top:10em !important;}

/**/
.sub_company_greetings .img{ width:42% ; }
.sub_company_greetings img {box-shadow: 2px 3px 8px -1px #a4a4a4; }
.sub_company_greetings .con{ width:52%}
.sub_company_greetings .con .tit1{ font-size:2.125em; font-weight:700}
.sub_company_greetings .con .tt1{ font-size:1.063em; color:#555; line-height:1.7}
.sub_company_greetings .sign{ margin:2em 0; padding-right: 3.5em;}
.sub_company_greetings .sign .name{ font-family:serif; font-size:2.063em; font-weight:bold; margin-left:.5em;}

/*지도*/
.map_view{ border-top:3px solid #ddd; transition:.3s; padding:1em; border-radius:0 0 1em 1em}
.map_view .tt {padding-bottom:10px; font-size:1.063em; color:#222; letter-spacing:-2px; vertical-align:middle;}
.map_view .xi {vertical-align:middle; font-size:1.188em; padding-right:5px;}
.map_view:hover{ border-color:#23d3c5 }

.map_info1 {overflow:hidden; margin-bottom:20px; box-shadow:2px 3px 8px -1px #a4a4a4; padding:1.5em; margin-top:1em; box-sizing:border-box;}
.map_info1 .t1 span { color:#666; display:inline-block; margin-right:20px; font-size:.938em;}
.map_info1 .t1 span.st {margin-bottom:15px;}
.map_info1 .t1 span:last-child { margin-right:0;}
.map_info1 .t1 .xi { font-size:1em; color:#fff; margin-right:5px; border-radius:50%; width:1.8em; height:1.8em; line-height:1.8em; text-align:center; background:#23d3c5}
.map_info1 .t1 span .stop1 {background:#187ce8; color:#fff; text-align:center; border-radius:50px; padding:.5em 1em; font-size:.813em;}

/*연혁*/
.sub_history{ width:100%; margin:auto;}
.sub_history .tit{ border-bottom:1px solid #e3e3e3; border-top:1px solid #ddd; padding:10px 20px; cursor:pointer; background-image:url(../images/sub/plus.png); background-repeat:no-repeat; background-position:center right 20px; }
.sub_history:first-child .tit{ border-color:#ddd; background:#f9f9f9;}
.sub_history .tit .t1{ vertical-align:bottom; font-size:1.6em; color:#333; letter-spacing:-2px; font-weight:500; }
.sub_history .tit .t2{ vertical-align:bottom; font-size:1.2em; color:#676767; padding-left:5px}
.sub_history .tit.on{ background-image:url(../images/sub/plus.png); }
.sub_history .tit.on .t1,
.sub_history .tit.on .t2{color:#111}
.sub_history .con{border-bottom:1px solid #645d5d; padding:0 25px; display:none}
.sub_history .con .history{ border-top:1px dashed #e3e3e3; padding:10px 10px}
.sub_history .con .history:first-child{ border-top:none}
.sub_history .con .history > li{margin-top:10px}
.sub_history .con .history > li:first-child{margin-top:0}
.sub_history .con .history > li > span{ display:inline-block; *display:inline; zoom:1; vertical-align:top}
.sub_history .con .history > li .year{ width:40px; text-align:right; font-size:1.125em; color:#0072c6; line-height:23px;}
.sub_history .con .history > li .month{ width:40px; text-align:right; font-size:1em; color:#888; line-height:23px;}
.sub_history .con .history > li .day{ width:19px; text-align:right; font-size:1em; color:#888; line-height:23px;}
.history li span.month_1{ padding-left:117px; font-size:.875em;font-weight:600;color:#777; }
.sub_history .con .history > li .tt{ width:80%; padding-left:20px; font-size:0.875em; color:#676767; line-height:23px; font-family:notokrR;}
.sub_history .con .history > li .tt span.title1{ display:block;}
.sub_history .con .history > li .tt span.title2{ display:block; background:url(../images/inc/dot_lnb_on.gif) no-repeat left 5px center; padding-left:15px;}
.sub_history .con .history > li .tt span.title3{ display:block; background:url(../images/inc/dot_lnb_on.gif) no-repeat left 5px center; padding-left:15px;}

.doc_history {background:url(../images/sub/history_bg.png)no-repeat right top;}
.history_t_box .his_tit {font-size:2.5em; text-align:center; color:#777; margin-bottom:5px}

/*연혁 컨텐츠*/
.history_area{ position:relative;}
.history_area .history_lst{ margin-left:150px;}
.history_area .history_lst .list{ *zoom:1; padding:30px 0; border-bottom:1px solid #ccc;}
.history_area .history_lst .list:after{ content:""; display:block; clear:both;}
.history_area .history_lst .list:first-child{ margin-top:0;}
.history_area .history_lst .list dt{ float:left; width:125px; margin:0 0 0 -145px;  text-align:right; position:relative}
.history_area .history_lst .list dt span{ display:inline-block; *display:inline; zoom:1; letter-spacing:-1px;}
.history_area .history_lst .list dt .year {font-size:2.7em; color:#0ba094; margin:-5px 10px 0 0; font-weight:500;}
.history_area .history_lst .list dd{ font-size:16px; margin-left:-10px; padding:5px 0 5px 40px; line-height:24px;}
.history_area .history_lst .list dd.first { margin-left:-10px; padding:5px 0 5px 40px; line-height:21px;font-size: 1em;}
.history_area .history_lst .list dd strong { color:#888; padding-right:10px; font-size:14px; min-width: 35px; display:inline-block;}

/* 경영이념 및 비전 */
/* .vision_wrap {width: 1280px; margin: 0 auto;} */
.vision_wrap .vision_con {gap: 1.5em; width: 1280px; max-width: 94%; margin: 0 auto;  margin-bottom: 3em; padding-top: 3em;}
.vision_con .txt_wrap {flex: 1 1 42%; color: #333; letter-spacing: -1px; padding: 0 2em; box-sizing: border-box;}
.vision_con .txt_wrap > h1 {font-size: 2.5em; font-weight: bold; margin-bottom: .25em; position: relative;}
.vision_con .txt_wrap > h1:before {position: absolute; content: ''; width: .875em; height: .875em; border-radius: 50%; opacity: .2; background: #23d2c4; top: -5px; left: -13px; z-index: -1;}
.vision_con .txt_wrap .sub_tit {font-size: 1.5em; margin-bottom: 2em; font-weight: 500; text-align: left;}
.vision_con .txt_wrap .info_txt {font-size: 1.125em; color: #555; line-height: 1.6em; margin-bottom: .5em;}
.vision_con .img_wrap {flex: 1 1 58%;}
.vision_con .img_wrap .img_sizing {width: 100%; height: 380px; box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;}
.vision_con .img_wrap .img_sizing > img {object-fit: cover; width: 100%; height: 100%;}
.vision_bg {background: #f1fcfc; padding: 3em 0; margin-bottom: 3em; position: relative; z-index: -11;}
.vision_bg:before {content:''; background: url(../images/inc/logo.svg) no-repeat; position: absolute; left: 10%; bottom: -10%; display: block; height: 100%;}

.vision_con.reverse {flex-direction: row-reverse; margin-bottom: 0;}
.vision_con.reverse .txt_wrap {gap: 1em;}
.vision_con.reverse .txt_wrap > h1 {width: 20%;}
.vision_con.reverse .txt_wrap .rev_txt {width: 80%;}

/* Inc */
.sub_tit {text-align: center; }
.sub_tit > p {font-size: 1.75em; color: #555; font-weight: 400; line-height: 1.6em;}
.sub_tit > p > b {color: #333; vertical-align: top;}

.sub_tit_w {text-align: center; }
.sub_tit_w > p {font-size: 1.75em; color: #fff; font-weight: 400; line-height: 1.6em;}
.sub_tit_w > p > b {color: #fff; vertical-align: top;}

.sub_tit.mb3 {margin-bottom: 1em; }

/* Ci */
.ci_wrap {}
.ci_wrap .ci_con {}
.ci_con .logo_wrap {padding: 3em 0; margin-bottom: 3em; margin-top: 3em; border-bottom: 1px solid #ddd;}
.ci_con .logo_wrap .left {flex: 1;}
.ci_con .logo_wrap .left .logo_img {text-align: center;}
.ci_con .logo_wrap .left .logo_img > img {height: 10em;}
.ci_con .logo_wrap .right {flex: 1;}
.ci_con .txt_wrap {}
.ci_wrap .txt_wrap > h1 {font-size: 2em; color: #333; position: relative; margin-bottom: .75em; font-weight: 600; display: inline-block;}
.ci_wrap .txt_wrap > h1:before {content: ''; position: absolute; left: -8px; top: -3px; background: #22d3c5; opacity: .2; border-radius: 50%; width: 20px; height: 20px; }
.ci_wrap .txt_wrap > h1 .en {font-size: 1.25rem; color: #22d3c5; opacity: .5;}
.ci_wrap .txt_wrap .info_txt {font-size: 1.125em; color: #666; font-weight: 500; line-height: 1.6em;}
.ci_con .color_wrap {}
.ci_con .color_wrap .txt_wrap {}
.ci_con .color_wrap .color_info {gap: 2em; text-align: center; padding: 2em 0;}
.ci_con .color_wrap .color_info .mint,
.ci_con .color_wrap .color_info .white {flex: 1; height: 5em; line-height: 5em; font-size: 1.25em; font-weight: 600;}
.ci_con .color_wrap .color_info .mint {background: #22d3c5;}
.ci_con .color_wrap .color_info .white {background: #fff; border: 1px solid #22d3c5;}
.ci_con .color_wrap .color_info .mint span { color: #fff;}
.ci_con .color_wrap .color_info .white span { color: #22d3c5;}
.ci_wrap .ci_bg {background: #f5ffff; padding: 4em 0; margin: 3em 0;}
.ci_wrap .typo_wrap {text-align: center;}
.ci_wrap .typo_wrap .en {display: block; padding: 1em 0;}
.ci_wrap .typo_wrap .typo_img {margin-top: 4em; box-shadow: 0 0 20px rgba(0,0,0,.1);}
.ci_wrap .typo_wrap .typo_img .img_re {padding: 2em; width: 100%; border: 1px solid #22d3c5;}
.ci_wrap .typo_wrap .typo_img .img_re.white {background: #fff; box-sizing: border-box;}
.ci_wrap .typo_wrap .typo_img .img_re.mint {background: #22d3c5;}
.ci_wrap .typo_wrap .typo_img .img_re img {height: 11em;}

/* Product - Intro */
.intro_wrap {padding: 2em 0;}
.intro_wrap .intro_con {max-width: 60%; margin: 3em auto;}
.intro_wrap .img_wrap {margin-bottom: 2em;}
.intro_wrap .img_wrap img {width: 100%;}
.intro_wrap .result_con {padding: 1.5em; border-radius: 50px; border: 2px solid #22d3c5; box-shadow: 0 10px 20px rgba(0,0,0,.1); margin-top: 3em;}
.intro_wrap .result_con .tt_con {text-align: center;}
.intro_wrap .result_con .tt_con > h3 {font-size: 1.5em; color: #333; font-weight: 600; display: inline-block; position: relative;}
.intro_wrap .result_con .tt_con > h3:before {content: ''; position: absolute; background: url(../images/sub/intro_icon01.png) no-repeat center center; background-size: contain; left: -2em; top: 50%; transform: translateY(-50%); width: 1.5em; height: 1.5em; display: inline-block;}
.intro_wrap .advan_bg {background: #f3f7f7; padding: 4em 0;}
.intro_wrap .advan_bg.bg_w {background: transparent; padding: 0;}
.intro_wrap .advan_bg .tt_wrap {text-align: center;}
.intro_wrap .advan_bg .tt_wrap > h3 {font-size: 2em; color: #333; font-weight: 600; margin-bottom: 1em;}
.intro_wrap .advan_bg .tt_wrap ul { counter-reset: number 0; gap: 5em; }
.intro_wrap .advan_bg.bg_w .tt_wrap ul { counter-reset: number 0; gap: 1em; flex-direction: column;}
.intro_wrap .advan_bg.bg_w .tt_wrap ul > li {display: flex; align-items: center;}
.intro_wrap .advan_bg.bg_w .tt_wrap ul > li:first-child {padding-top: 0;}
.advan_bg.bg_w .tt_wrap ul > li .txt_box {padding-top: 1em;}
.intro_wrap .advan_bg .tt_wrap ul > li {flex: 1; padding: 2em 0 0 0; position: relative;}
.intro_wrap .advan_bg .tt_wrap ul > li:last-child:before {display: none;}
/* .intro_wrap .advan_bg .tt_wrap ul > li:before {content: '\e940'; font-family: 'xeicon'; position: absolute; right: -2.5em; top: 35%; transform: translate(-70%, -50%); font-size: 2em; color: #999;} */
.advan_bg .tt_wrap ul > li .img_box {width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; background: #fff; position: relative;}
.advan_bg.bg_w .tt_wrap ul > li .img_box {margin: 0 2em 0 0;}
.advan_bg.bg_w .tt_wrap ul > li .img_box { border: 3px solid #ddd;}
.advan_bg .tt_wrap ul > li .img_box > img {width: 60%; height: 100%; object-fit: contain;}
.advan_bg .tt_wrap ul > li .txt_box {padding-top: 2em;}
.advan_bg .tt_wrap ul > li .txt_box > h3 {font-size: 1.5em; font-weight: 600; margin-bottom: .75em;}
.advan_bg.bg_w .tt_wrap ul > li .txt_box > h3 {font-size: 1.25em;}
.advan_bg .tt_wrap ul > li .txt_box > p {font-size: 1.125em; color: #555; font-weight: 500; line-height: 1.7em;}
.intro_wrap .advan_bg.bg_w .tt_wrap ul > li .img_box:before {counter-increment: number 1; content: counter(number); position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: #23d3c5; color: #fff; width: 1.5em; height: 1.5em; border-radius: 50%; font-size: 1em; line-height: 1.5em; z-index: 1;}
/* .intro_wrap .advan_bg .tt_wrap ul > li:after {content: ''; position: absolute; width: 20%; height: 2px; background: #23d3c5; top: 12px; left: 50%; transform: translateX(-50%); opacity: .5;} */
/* .compare_graph {padding: 2em 0 0 0;} */
.compare_graph .img_wrap {margin: 0; text-align: center;}
.compare_graph .img_wrap img {}

.bk_bg {background: #111; padding: 1em 0; margin: 1em 0;}

.intro_wrap .intro_con .board_search_wrap {display: none;}
.intro_wrap .intro_con .board_paging {display: none;}
.intro_wrap .intro_con .board_st.faq {}

.compare-container {gap: 4em; padding: 2em 0;}
/* conven */
.conven-wrap {border: 3px solid #888; flex: 1; position: relative;}
.conven-wrap:after {content: '\e940'; font-family: 'xeicon'; position: absolute; right: -1.5em; top: 50%; transform: translate(-16%, -50%); font-size: 2em; font-weight: 600; }
.conven-wrap .title {display: inline-block; background: #888; color: #fff; padding: .25em 2em .25em 1.5em; font-size: 1.5em; border-radius: 0 0 30px 0;}
.conven-wrap .inner {align-items: center; padding: 3em 1em 6em 1em;  transform: translateY(2em);}
.conven-wrap .inner > .mri-box {flex: 1 1 20%;}
.conven-wrap .inner > .arrow-wrap {flex: 1 1 30%; position: relative;}

.conven-wrap .inner > .pacs-box {flex: 1 1 20%;}
.conven-wrap .inner > .arrow.short {flex: 1 1 10%;}
.conven-wrap .inner > .doctor-box {flex: 1 1 20%; transform: translateY(-1.5em); opacity: 0; transition-delay: 3.5s; transition-duration: .5s;}
.conven-wrap .inner.active > .doctor-box {opacity: 1; }

.conven-wrap .inner > .doctor-box .img-wrap {transform: translateY(1.5em);}
.conven-wrap .inner .img-wrap {width: 6em; margin: auto;}
.conven-wrap .inner .arrow {width: 0; height: 10px; background: #555; position: relative; transition: 4s;}
.conven-wrap .inner.active .arrow {width: 100%;}
.conven-wrap .inner .arrow:after {content: '\e92f'; font-family: 'xeicon'; position: absolute; right: -.5em; top: 50%; transform: translateY(-50%) rotate(90deg); font-size: 1.5em; color: #555;}
.conven-wrap .inner .arrow-wrap .time-wrap {position: absolute; width: 4em; top: -6em; left: 50%; transform: translateX(-50%);}
.conven-wrap .inner .arrow .ai-wrap {position: absolute; width: 5em; bottom: -9em; left: 50%; transform: translateX(-50%);}
.conven-wrap .inner .arrow .ai-wrap .txt-box {text-align: center; font-size: 1.75em; font-weight: 600;}
.conven-wrap .inner .arrow.short {opacity: .5;}

.conven-wrap .inner .txt-wrap {text-align: center; font-size: 1.25em; margin-top: .5em;}


/* iai */
.iai-wrap {border: 3px solid #22d3c5; flex: 1;}
.iai-wrap .title {display: inline-block; background: #22d3c5; color: #fff; padding: .25em 2em .25em 1.5em; font-size: 1.5em; border-radius: 0 0 30px 0;}
.iai-wrap .inner {align-items: center; padding: 3em 1em 6em 1em;}
.iai-wrap .inner > .mri-box {flex: 1 1 20%;}
.iai-wrap .inner > .arrow-wrap {flex: 1 1 30%; position: relative;}
.iai-wrap .inner > .pacs-box {flex: 1 1 20%;}
.iai-wrap .inner > .arrow.short {flex: 1 1 10%;}
.iai-wrap .inner > .doctor-box {flex: 1 1 20%; transform: translateY(-1.5em);}
.iai-wrap .inner > .doctor-box .img-wrap {transform: translateY(1.5em); opacity: 0; transition-duration: .5s; transition-delay: 2s;}
.iai-wrap .inner.active > .doctor-box .img-wrap {opacity: 1;}
.iai-wrap .inner .img-wrap {width: 6em; margin: auto;}
.iai-wrap .inner .arrow {width: 0; height: 10px; background: #40BFB3; position: relative; transition: 2s;}
.iai-wrap .inner.active .arrow {width: 100%;}
.iai-wrap .inner .arrow:after {content: '\e92f'; font-family: 'xeicon'; position: absolute; right: -.5em; top: 50%; transform: translateY(-50%) rotate(90deg); font-size: 1.5em; color: #40BFB3;}
.iai-wrap .inner .arrow-wrap .time-wrap {position: absolute; width: 4em; top: -6em; left: 50%; transform: translateX(-50%);}
.iai-wrap .inner .arrow-wrap .ai-wrap {position: absolute; width: 5em; bottom: -9em; left: 50%; transform: translateX(-50%); opacity: 0; transition: .5s;}
.iai-wrap .inner.active .arrow-wrap .ai-wrap {animation: iaiScale 1.5s ease-in-out; opacity: 1;}
.iai-wrap .inner .arrow-wrap .ai-wrap .txt-box {text-align: center; font-size: 1.75em; font-weight: 600;}
.iai-wrap .inner .arrow.short {opacity: .5;}

.iai-wrap .inner .txt-wrap {text-align: center; font-size: 1.25em; margin-top: .5em;}

@keyframes iaiScale {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}



.mockup-wrap {flex: 1;}
.mockup-wrap .mock-up {background: url(../images/sub/intro_mockup.png) no-repeat center center; background-size: contain; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.mock-info {font-size: 1.5em; font-weight: 500; margin-top: 1em;}
.mock-info > b{color: #22d3c5;}

.prod_list.mock {justify-content: center;}
.prod_list.mock .items .item .prod_img {height: 270px; cursor: auto; pointer-events: none;}

.prod_list.mock .list .items {gap: 1em; transform: scale(.6);}
/*관련 사이트 시작*/
/* .board_flex{ margin:-2em 0 0 -2em; padding-bottom: 2rem;} */
.board_flex{gap: 2em; padding-bottom: 2rem;}
/* .board_flex > li .in{ margin:2em 0 0 2em} */
.board_flex > li .in{ display:block; overflow:hidden; box-shadow: 2px 3px 8px -1px #a4a4a4; border-radius: 0.2em;}
.board_flex > li .in .img_wrap{ display:block; padding: 3em 2em; position:relative}
.board_flex > li .in .img_wrap .resize{ padding-bottom:40%; background-size:auto}
.board_flex > li .in .img_wrap .btn{ position:absolute; z-index:1; left:50%; bottom:0; transform:translate(-50%,50%); width:2.25em; line-height:2.25em; border-radius:50%; background:#fff; box-shadow:0 0 .5em rgba(0,0,0,.2); text-align:center; transition:.3s}
.board_flex > li .in .img_wrap .btn:hover{ background:#0ba094; color:#fff}
.board_flex > li .in .img_wrap .btn .icon{ font-size:1em}
.board_flex > li .in .img_wrap .btn.home{ margin-left:2em; opacity:0}
.board_flex > li .in .img_wrap .btn.home .icon:before{content:"\e902"}
.board_flex > li .in:hover .img_wrap .btn.home{ margin-left:0; opacity:1}
.board_flex > li .in .con_wrap{ display:block; background:#57cec5; text-align:center; padding:1.5em}
.board_flex > li .in .con_wrap:hover { background:#0ba094;}
.board_flex > li .in .con_wrap .t1{ font-weight:500; color:#fff}
.board_flex > li .in .con_wrap .t1:hover{ color:#fff !important;}
.board_flex > li .in .con_wrap .btn{ margin-top:.25em}
.board_flex > li .in .con_wrap .btn .st{ }
.board_flex > li .in .con_wrap .btn .st .xi{ font-size:1em}
/* .board_flex.partner > li{ width:25%} */
.board_flex.partner > li{ width: calc(25% - 1.5em)}
.board_flex.partner > li .in .img_wrap .resize{ padding-bottom:40%; background-size:contain}
.board_flex.ce > li{ width:25%}
.board_flex.ce > li .in .img_wrap .resize{ padding-bottom:141.6%; background-size:contain}
/*관련 사이트 끝*/

/**/
.board_list{ border-top:1px solid #333;}
.board_list .list_con{ border-bottom:1px solid #ddd; padding:2em 1em;}
.board_list .list_con .circle{ width:4em; height:4em; border-radius:50%; background:#f1f1f1; transition:.3s;}
.board_list .list_con:hover .circle{ background:#57cec5; color:#fff;}
.board_list .list_con .list_area{ flex:1;}
.board_list .list_con .list_area .list_img{ width:15em;}
.board_list .list_con .list_area .list_txt{ flex:1; margin:1em 2em;}
.board_list .list_con .list_area .list_txt > .t2{}
.board_list .list_con.flex .wrap_in{ flex:1; padding-right:1em;}
.board_list:not(.page_layout) .list_con .tit{ font-weight:600; display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.board_list:not(.page_layout) .list_con .txt{ margin-top:1em; padding:0 0; text-align:left; color:#777; line-height:1.6; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5;}
.board_list:not(.page_layout) .list_con .date{ padding-top:1em; color:#999;}

.board_list.book{}
.board_list.book .list_con .list_txt{ margin-right:0;}
.board_list.book .list_con .txt{ -webkit-line-clamp:3;}
.board_list.book .list_con .wrap_btn{ padding-top:1.5em;}
.board_list.book .list_con .wrap_btn > .btn{ padding:.875em 2em; background:#ec1c24; border:1px solid transparent; border-radius:6em; color:#fff; text-transform:uppercase; transition:.3s;}
.board_list.book .list_con .wrap_btn > .btn > *{ line-height:1;}
.board_list.book .list_con .wrap_btn > .btn > .tt{ font-size:.875em;}
.board_list.book .list_con .wrap_btn > .btn > .xi{ font-size:1.125em;}
.board_list.book .list_con .wrap_btn > .btn > .xi:before{ color:inherit;}
.board_list.book .list_con .wrap_btn > .btn > .tt ~ .xi{ padding-left:1em;}
.board_list.book .list_con .wrap_btn > .btn:hover{ background:transparent; border-color:#ec1c24; color:#ec1c24;}

/**/
.board_search_wrap{ margin-bottom:1.5em;}
.board_search_wrap .total_wrap{ margin-bottom:0;}
.board_search_wrap .sel{ width:8em;}
.board_search_wrap .inp{ width:18em;}
.board_search_wrap .flex .btn{ background:transparent; border:none;}
.board_search_wrap .flex .btn:first-child{ margin-left:0;}

.board_search_wrap .search{ border:none;}
.board_search_wrap .search.inp{ padding-right:2.5em; border-bottom:1px solid #ddd; position:relative;}
.board_search_wrap .po{ position:relative;}
.board_search_wrap .po .btn{ position:absolute; right:.5em; top:0; padding:0 0;}
.board_search_wrap .po .btn .xi{ font-size:1.375em;}
.board_search_wrap .po .btn:hover{ color:#0ba094;}

.total_wrap{ margin-bottom:1em; color:#222; text-transform:uppercase; letter-spacing:0;}
.total_wrap .tt{ display:inline-block; vertical-align:middle; padding:0 .25em;}
.total_wrap .tt:first-child{ padding-left:0;}
.total_wrap .t1{ font-size:.938em; color:#444;}
.total_wrap .t2{ font-size:1.188em; font-weight:700; color: #ec1c24;}

/**/
.board_paging{ text-align:center; margin-top:5em; font-size:.813em;}
.board_paging button{ vertical-align:top; min-width:3em; height:3em; padding:0 .5em; background:#fff; border:1px solid #ddd; border-radius:.3em; color:#313851;}
.board_paging button:hover,
.board_paging button.on{ background:#313851; border-color:#313851; color:#fff}
.board_paging button.icon{ background:#f1f1f1;}
.board_paging button.icon:hover{ background:#aaa; border-color:#aaa;}
.board_paging .xi.first:before{ content:"\ea47"}
.board_paging .xi.last:before { content:"\ea48"}
.board_paging .xi.prev:before { content:"\e93c"}
.board_paging .xi.next:before { content:"\e93f"}

.pop .board_paging{ margin-top:2em;}
.pop .board_paging button{ min-width:2.5em; height:2.5em;}

.board_btn_wrap{ margin-top:4em; text-align:center;}
.board_btn_wrap .flex .input_st{ margin-left:.25em;}
.board_btn_wrap .flex .input_st:first-child{ margin-left:;}
.pop .board_btn_wrap{ margin-top:2em;}

/**/
.board_st.faq{ border-top:1px solid #333; font-size:1em;}
.board_st.faq .list .BScon{ padding:1.5em 0; background:#f9f9f9;}
.board_st.faq .list > li{ border-bottom:1px solid #ddd; text-align:center; line-height:1.5;}
.board_st.faq .list > li .con .w_tit{ flex:1; padding:1.5em 1em; text-align:left;}
.board_st.faq .list > li .con .w_faq{ padding:.75em 0;}
.board_st.faq .list > li .con .faqQ{ font-size:.938em;}
.board_st.faq .list > li .con .faqA{ font-size:.875em;}
.board_st.faq .list > li .con .faqA *{ box-sizing:border-box; max-width:100% !important;}
.board_st.faq .list > li .con .faqA img{ width:auto !important; height:auto !important;}
.board_st.faq .list > li .con .faq_tit{ font-size:1.750em;}
.board_st.faq .list > li .con .faq_tit.c1{ color:#ec1c24;}
.board_st.faq .list > li .con .faq_tit.c2{ color:#111;}
.board_st.faq .list > li .con .board_more .xi{ font-size:1.500em; color:#ccc; transform:rotate(0); transition:.2s;}
.board_st.faq .list > li .con .board_more .xi:before{ content:"\e941"}
.board_st.faq .list > li.on .con .faqQ{ color:#ec1c24;}
.board_st.faq .list > li.on .con .board_more .xi{ transform:rotate(-180deg);}

/**/
.board_photo{ padding-top:2em;}
.board_photo .list{ display:flex; flex-wrap:wrap; margin:0 0 -4em -2em}
.board_photo .list > li{ width:25%;}
.board_photo .list > li .wrap_in{ margin:0 0 4em 2em; display:block;}
.board_photo .list > li .wrap_in .img_wrap{ box-shadow:0 0 1em rgba(0,0,0,.1); overflow:hidden;}
.board_photo .list > li .wrap_in .con_wrap{ padding:1.5em .25em 1em .25em; text-align:center}
.board_photo .list > li .wrap_in .con_wrap .t1{ font-size:1.125em; font-weight:600; display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.board_photo .list > li .wrap_in .con_wrap .t2{ font-size:.813em; color: #777; margin-top:.75em;}
.board_photo .list > li .wrap_in .con_wrap .btn{ margin-top:1em; padding:.625em 1.5em; background:#ec1c24; border:1px solid transparent; border-radius:6em; color:#fff; text-transform:uppercase; transition:.3s;}
.board_photo .list > li .wrap_in .con_wrap .btn > *{ line-height:1;}
.board_photo .list > li .wrap_in .con_wrap .btn > .tt{ font-size:.813em;}
.board_photo .list > li .wrap_in .con_wrap .btn > .xi{ font-size:1.063em;}
.board_photo .list > li .wrap_in .con_wrap .btn > .xi:before{ color:inherit;}
.board_photo .list > li .wrap_in .con_wrap .btn > .tt ~ .xi{ padding-left:.5em;}
.board_photo .list > li .wrap_in .con_wrap .btn:hover{ background:transparent; border-color:#23d3c5; color:#23d3c5;}
.board_photo .list > li .wrap_in .con_wrap .btn ~ .btn{ padding:0 .25em; border:none; background:transparent; font-size:.875em; color:#000;}

.board_photo.current .list > li .wrap_in .img_wrap{}
.board_photo.current .list > li .wrap_in .img_wrap .resize:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); transition:.2s;}
.board_photo.current .list > li .wrap_in:hover .img_wrap .resize:before{ opacity:0;}

.board_photo.artist .list > li .wrap_in .img_wrap{ border-radius:50%;}

.board_photo .list > li a.wrap_in:hover{ color:#23d3c5; transition:.2s;}

.board_photo.artshop{ padding-top:3em;}
.board_photo.artshop .list > li .wrap_in .img_wrap{ box-shadow:none;}


/* Product */
.prod_wrap {}
.prod_wrap .prod_con {}
/* Tab */
.prod_wrap .prod_tab {margin: 2em 0 5em 0}
.prod_wrap .prod_tab .tab_idx {box-shadow: 0 10px 20px rgba(0,0,0,.1); border-radius: 50px; overflow: hidden;}
.prod_wrap .prod_tab .tab_idx > .tab_btn {background: #fff; border: 1px solid #ddd; flex: 1; box-sizing: border-box; transition: .35s;}
.prod_wrap .prod_tab .tab_idx > .tab_btn:first-child {border-radius: 50px 0 0 50px;}
.prod_wrap .prod_tab .tab_idx > .tab_btn:last-child {border-radius: 0 50px 50px 0;}
.prod_wrap .prod_tab .tab_idx > .tab_btn.on {background: #0ba094; border: none;}
.prod_wrap .prod_tab .tab_idx > .tab_btn > a {padding: 1em 0; text-align: center; width: 100%;}
.prod_wrap .prod_tab .tab_idx > .tab_btn.on > a .va_tt {color: #fff;}
.prod_wrap .prod_tab .tab_idx > .tab_btn > a .va_tt {color: #888; font-size: 1.25em; text-transform: uppercase;}
/* Tab Hover */
.prod_wrap .prod_tab .tab_idx > .tab_btn:hover {background: #0ba094; border: 1px solid #0ba094;}
.prod_wrap .prod_tab .tab_idx > .tab_btn:hover > a .va_tt {color: #fff;}
/* Tab end */

.prod_wrap .prod_list  {}
.prod_wrap .prod_list .list  {flex: 1 1 100%; margin-bottom: 5em;}
.prod_list .list .tit  {margin-bottom: 1em;}
.prod_list .list .tit .en_tit  {color: #fff; font-size: 1.5em; text-transform: uppercase; font-weight: 600; padding-right: 1.5em; white-space: nowrap;}
.prod_list .list .tit .line {display: inline-block; width: 83%; height: 3px; background: linear-gradient(to right, #0ba094, #23d3c5, transparent); position: relative;}
.prod_list .list .tit .line:before {content: ''; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; background: #0ba094; border-radius: 50%; transform: translateY(-50%);}
.prod_list .list .items  {gap:2em;}
.prod_list .list .items .item  {flex: 1; background-color: #333; border: 1px solid #bbb; position: relative; padding: 3em 0 1em 0; box-sizing: border-box;}
.prod_list .items .item .item_tit  {padding: .5em 1em; position: absolute; top: 0; left: 0; background-color: #999; width: 80%; border-radius: 0 0 30px 0;}
.prod_list .items .item .item_tit .tt  {color: #fff; font-size: 1.125em; text-transform: capitalize;}
.prod_list .items .item .prod_img  {text-align: center; width: 100%; height: 340px; overflow: hidden; cursor: pointer;}
.prod_list .items .item .prod_img > img  {width: inherit; height: inherit; object-fit: cover; transform: scale(1); transition: .35s;}
.prod_list .items .item .prod_img:hover > img {transform: scale(1.1);}
.prod_list .items .item .info  {text-align: center; margin-top: .5em;}
.prod_list .items .item .info .size,  
.prod_list .items .item .info .time {color: #eee;}
.prod_list .items .item .info .size  {font-size: 1.125em; padding: .25em 0;}
.prod_list .items .item .info .time  {font-size: 1em; display: block;}
/* IAI */
.prod_list .list .items .item.iai { border: 5px solid #0ba094; }
.prod_list .items .item.iai .item_tit { background-color: #0ba094;}
.prod_list .item.iai .info .size {color: #fff;}
.prod_list .item.iai .info .time {color: #0ba094;}
/* ### */
/* Prod End */

/* Certification */
.cert_wrap {padding-top: 3em;}
.cert_wrap .cert_con {}
.cert_wrap .inner {gap: 2em;}
.cert_wrap .inner .list {max-width: calc(25% - 2em); flex: 1 1 calc(25% - 2em); border: 1px solid #ddd; overflow: hidden; border-radius: 10px; box-shadow: 0 0 20px rgb(0,0,0,0.1); border-top: 2px solid #22d3c5;}

.cert_wrap .inner .list .img_box {width: 100%; overflow: hidden; cursor: pointer;}
.cert_wrap .list .img_box .resizing {}
.cert_wrap .list .img_box .resizing > img {object-fit: cover; object-position: center; transition: .35s;}
.cert_wrap .list:hover .img_box .resizing > img {transform: scale(1.05);} 

.cert_wrap .inner .list .tt_box {padding: 1em; text-align: center; box-sizing: border-box; border-top: 1px dashed #aaa;}
.cert_wrap .inner .tt_box .cert_name {color: #555; font-size: 1.125em; font-weight: 500; transition: .35s;}
.cert_wrap .list:hover .tt_box .cert_name {color: #22d3c5;}

/* agree */
.member_agree .agree{ padding:3em; border:solid #ddd; border-width:2px 1px 1px 1px; border-top-color:#333; font-size:.938em; color:#777; line-height:1.5em;}
.member_agree .agree.H{ padding:1em 1.5em; border-top-width:1px; height:10em; overflow-y:scroll; font-size: 1em;}
.member_agree .agree.H.H1{ height:20em;}
.member_agree .agree p{ padding:.5em 0;}
.member_agree .agree *{ vertical-align:baseline;}
.member_agree .agree strong{ color:#333; font-weight:500;}
.member_agree .check{ padding:1em 2em; border:solid #ddd; border-width:0 1px 1px 1px; text-align:right;}

/* Banner */
.proposal_bg {background: url(../images/sub/sub_banner_bg.jpg) no-repeat center center; background-size: cover; padding: 3em 0;}
.proposal_bg .proposal_con {color: #fff; text-align: center; flex-direction: column;}
.proposal_bg .proposal_con .tit {font-size: 1.85em; font-weight: 500;}
.proposal_bg .proposal_con .txt {font-size: 1.25em; margin: 1em 0;}
.proposal_bg .proposal_con .bn_btn {display: inline-block; border-radius: 50px; padding: 1em 2em; color: #fff; border: 2px solid #fff; transition: .35s;}
.proposal_bg .proposal_con .bn_btn:hover {background: #0ba094; }


/* Graph - chart */
/* graf */
.compare_graph {border: 1px solid #aaa;}
.compare_graph .title-wrap {background: #40BFB4; border-radius: 0 0 30px 0; padding: .5em 1em; color: #fff;}
.compare_graph .title-wrap .xi {background: #40BFB4; margin-right: .5em; font-size: 1.5em; vertical-align: middle;}
.compare_graph .title-wrap > h3 { font-size: 1.5em; font-weight: 600;}

.compare_graph .inner-con {}
.compare_graph .left {flex: 1 1 75%; padding: 1em 2em 2em 2em; position: relative;}
.compare_graph .left .example {font-size: 1.125em;}
.compare_graph .left .example > p {color: #888; margin: .5em 0;}
.compare_graph .left .example > p:before {content: ''; width: .875em; height: .875em; background: #D2D3D5; margin-right: .5em; display: inline-block;}
.compare_graph .left .example > p.pt-c {color: #22d3c5;}
.compare_graph .left .example > p.pt-c:before {background: #22d3c5;}
.compare_graph .left .shame-box {position: absolute; right: 1em; top: 1em; gap: 1em;}
.compare_graph .left .shame-box > h3 {font-size: 3em; color: #22d3c5; padding-top: 10px;}
.compare_graph .left .shame-box > h3.active {animation: graphPerAni 1s ease-in-out alternate;}
.compare_graph .left .shame-box .shame-arrow {width: 40px; overflow: hidden; transition: .5s;}
.compare_graph .left .shame-box .shame-arrow > img {height: 0; transition: 2s;}
.compare_graph .left .shame-box .shame-arrow.active > img {height: 100%;}
.compare_graph .right {flex: 1 1 25%; background: #ECF6F5; padding: 2em;}
.compare_graph .right .graph-info {}
.compare_graph .right .graph-info > li {margin-bottom: 1em; gap: .5em;}
.compare_graph .right .graph-info > li .xi {flex: 1 1 10%; color: #40BFB4;}
.compare_graph .right .graph-info > li > p {flex: 1 1 90%; color: #333; font-size: 1.25em; line-height: 1.5em;}
.compare_graph .graph-wrap {margin-top: 3em;}

.graf_list {width:33.2%; margin-right:1%; padding:2em; border:1px solid #ccc;}
.graf_list:last-child {margin-right:0%;}

.blind{
  position:absolute;
	color: #555;
  top: -7%;
  left: 50%;
  font-size: .875em;
	transform: translate(-50%, -50%);
}
.blind.mint {
  position:absolute;
	color: #555;
  top: -15%;
  left: 70%;
  font-size: .875em;
	transform: translate(-50%, -50%);
}
.blind.st2{top: -6%;}
.blind.st3{top: -12%;}
.blind.st4{top: -18%;}
.blind.st5{top: -11%;}

.vertical_chart_box{
  position:relative;
}
.vertical_chart_box .chart_box{
	position:relative;
    margin-bottom:45px;
    padding-left:20px;
    box-sizing:border-box;
    height:200px;
}
.vertical_chart_box .axis_y{
  display:-webkit-flex;
  display:-ms-flex;
  display:-o-flex;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:space-between;
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
  width:20px;
  height:100%;
  font-size:12px;
  color:#4a4a4a;
}
.vertical_chart_box .axis_y:before{
  content:'';
  position:absolute;
  top:5px;
  bottom:0;
  right:0;
  width:1px;
  background:#d3d3d3;
}
.vertical_chart_box .axis_x{
  display:-webkit-flex;
  display:-ms-flex;
  display:-o-flex;
  display:flex;
  justify-content:center;
  position:relative;
  padding:0;
  box-sizing:border-box;
  height:100%;
}
.vertical_chart_box .axis_x .item{
	flex:1;
	position:relative;
	margin-right: 1em;
  border-bottom: 1px solid #aaa;
}
.vertical_chart_box .axis_x .item .text_box{
	position:absolute;
	bottom:-43px;
	left:50%;
	text-align:center;
	-webkit-transform:translate(-50%,0);
	-ms-transform:translate(-50%,0);
	-o-transform:translate(-50%,0);
	transform:translate(-50%,0);
}
.vertical_chart_box .axis_x .item .text_box .day{
	display:block;
	font-size: 1em;
	line-height:19px;
	color:#4a4a4a;
  white-space: nowrap;
}
.vertical_chart_box .axis_x .item .text_box .day.sat{
	color:#3475ed;
}
.vertical_chart_box .axis_x .item .text_box .day.sun{
	color:#eb474a;
}
.vertical_chart_box .axis_x .item .text_box .time{
	display:block;
	margin-top:3px;
	font-size:12px;
	color:#999;
}
.vertical_chart_box .axis_x .graph{
	display:-webkit-flex;
	display:-ms-flex;
	display:-o-flex;
	display:flex;
  align-items: end;
	position:relative;
	margin:0 auto;
	padding:0;
	width:3.5em;
	height:100%;
	background:#fff;
	border: none;
	border-radius:3px 3px 0 0;
}
.vertical_chart_box .axis_x .graph .time{
	display:block;
	position:relative;
	padding-top:4px;
	box-sizing:content-box;
	width:100%;
	border-radius:3px 3px 0 0;
  /* animation: graphAni 2s ease-in-out; */
  height: 100%;
}
.vertical_chart_box .axis_x .graph .time.active {
  animation: graphAni 1.5s ease-in-out;
}
.vertical_chart_box .axis_x .graph .time.data1{
	background:#D2D3D5;
	z-index:3;
}
.vertical_chart_box .axis_x .graph .time.data2{
	background:#22d3c5;
	z-index:2;
}

@keyframes graphAni {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes graphPerAni {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}