/*** font **/

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);/*Noto Sans KR - 슬라이드용*/
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css'); /*NanumSquare - sub h1*/
/*강조용 폰트*/


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #053618;
    display: block;
}
img {
    width: 100%;
    display: block;
    font-size: 0;
}
html {
    height: 100%;
}
body {
    background: #fff;
    font-family: '맑은 고딕', Apple SD Gothic Neo, sans-serif;
    color: #333;
    height: 100%;
}
.container {
    margin: 0 auto;
    max-width: 1440px;
/*    height: 100%;*/
    position: relative;
}
/****** HEADER *******/
header {
    width: 100%;
    height: 100px;
    box-shadow: 0 0 10px #999;
}
header .wrapper {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    padding: 10px;
}
.logo {
    position: absolute;
    left: 20px;
   /* transform: translateX(-50%); */
} 

/*** main_menu ***/
.nav_bg {
    display: none;
} 
.nav {
    width: 80%;
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 999;
}
.nav>ul { /*avoid the li elements to be over streched*/
    max-width: 1440px;
    display: flex;
    text-align: center;
    margin: 0 auto;
}
.nav ul li {
    flex: 1;
}
.nav>ul>li>a {
    padding: 10px;
    color: 333;
    font-size: 1.2em;
    font-weight: 600;
    background-position: center;
}
.nav>ul>li>a:hover {
    animation: blink 1.5s 3;
    animation-timing-function: ease-in;
    
}
@keyframes blink {
    0%{color: #faf4fe;}
    50%{color: #004580;}
    100%{color: #faf4fe}
}
.nav ul li ul {
    display: none;
    background: rgba(255,255,255, 0.9);
    margin-top: 24px;
    
}
.nav ul li ul li a {
    padding: 20px 0;
}
.nav ul li ul li a:hover {
    background: rgba(119, 147, 194, 0.5);
    color: #fff;
}

/****** CONTENTS ******/

/*** slide ***/
.slide {/*컨텐츠 포지션에 따른 하위 요소 정렬해결 필요*/
    position: relative;
/*    height: 100%;*/
    height: 766px;
/*    overflow: hidden;*/
}
.slider {
    position: absolute;
    width: 100%;
    height: 100%;
}
.slide_ct {
    position: relative;
    width: 100%;
    height: 100%;
}
.slide_ct img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider:nth-of-type(1) .slide_ct{
    z-index: 0;
}
.slider:nth-of-type(2) .slide_ct{
    z-index: -2;
}
.slider:nth-of-type(3) .slide_ct{
    z-index: -3;
}

.slide_ct h1{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    color: #f0f0f0;
    font-size: 2.5em;
    position: absolute;
    z-index: 999;
    white-space: nowrap;
    font-size: 2.5em;
}
.slider:nth-child(1) h1 {
    bottom: 11%;
    right: 11%;
    opacity: 1;
}
.slider:nth-child(2) h1 {
    top: 8%;
    left: 5%;
    color: rgba(11,62,128,0.7);
    text-shadow: 0 0 20px #f0f0f0;
}
.slider:nth-child(3) h1 {
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -40%);
    text-align: center;
    text-shadow: 2px 2px 10px #e9c5b5;
}
/*** main ct ***/
.main_ct {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 70px;
    margin-top: 150px;
}
.main_bg1 {
    background: #f8f8f9;
    position: absolute;
    width: 100%;
    height: 600px;
    left:0;
    top: 1000px;
}
.m_ct h1 {
    display: inline-block;
    padding: 10px 0;
    width: 250px;
    border-top: 3px solid #004580;
}
.m_ct h1 span {
    font-size: 1.4em;
}
.m_ct_img {
    width: 70%;
    margin: 50px auto 0 auto;
    box-shadow: 20px 20px 0 rgba(119, 147, 194, 0.2);
    overflow: hidden;
}
.m_ct_img img {
    display: block;
}
.m_ct:nth-child(2) {
    margin-top: 150px;
    margin-left: 50px;
    position: relative;
}
.m_ct_txt {
    text-align: center;
    margin-top: 50px;
    font-family: 'NanumSquare';
}
#business {
    text-align: right;
    margin-bottom: 50px;
}
.m_ct:nth-child(2) h1 {
    display: inline-block;
    padding: 10px 0;
    width: 400px;
    border-top: 3px solid #004580;
    text-align: right;
}
.m_ct_dt {
    display: flex;
    flex-wrap: nowrap;
    width: 80%;
    max-height: 400px;
    min-height: 150px;
    overflow: hidden;
    justify-content: space-between;
    border: 1px solid lightgray;
    margin-bottom: 100px;
    position: relative;
}
.dt_txt {
    flex: 0.7;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    line-height: 150%;
}
.dt_txt h2 {
    margin-bottom: 7px;
}
.dt_txt p span {
    font-weight: bold;
}
.dt_txt p:nth-of-type(2){
    border: 3px double rgba(0, 0, 0, 0.5);
    margin-top: 8px;
    padding: 2px 5px;
    font-size: 0.9em;
    transition: 0.5s;
}
.dt_txt p:nth-of-type(2):hover {
    color: #fff;
    background: rgba(119, 147, 194, 0.5);
    border: 3px double #fff;
}
.dt_img {
    flex: 1;
    position: relative;
    height: 100%;
    min-height: 150px;
    max-height: 400px;
}
.m_ct_dt:nth-of-type(2) {
    transform: translateX(20%);
}

/***** TOP BTN *****/
#top_btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 5px;
    width: 40px;
    height: 40px;
    background: rgba(0 ,0 ,0 ,0.1);
    border-radius: 50%;
    border: 2px dotted #004580;
    z-index: 99;
    opacity: 0;
}

#top_btn span, #top_btn::before, #top_btn::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    margin-bottom: 3px;
    background: #004580;
    border-radius: 5px;
    position: relative;
    top: 5px;
    left: 0px;
}
#top_btn span {
    transform: rotate(90deg);
    width: 90%;
    margin-left: 2px;
    margin-top: -2px;
    z-index: -1
}
#top_btn::before {
/*    background: red;*/
    transform: rotate(45deg);
    width: 70%;
    margin-left: 10px;
    margin-top: 1px;
    z-index: 1;
}
#top_btn::after {
/*    background: blue;*/
    transform: rotate(135deg);
    width: 70%;
    margin-top: -12px;
    margin-left: -1px;
    z-index: 0;
}


/***** FOOTER *****/
footer{ 
    width: 100%;
    background: #f4f4f4;
}
footer .wrapper {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    padding: 10px 20px;
    font-size: 0.9em;
    color: #666;
    z-index: 1
}
.foot_ct {
    display: flex; 
    align-items: center;
    line-height: 180%;
}
.foot_ct1 {
    flex: 1;
}
.foot_logo {
    width: 150px;
    opacity: 0.7;
}
.copyright {
    margin-top: 5px;
    font-family: "NanumSquare";
    text-align: center;
    padding: 10px;
    background: rgba(0,0,0,0.1);
    color: #999;
}
.foot_ct1 p span {
    font-weight: bold;
    font-size: 1em;
}
.foot_i {
    display: inline-block;
    width: 12px;
    height: 12px;
}
.foot_dt p {
    display: inline-block;
}

/*********************************/
/********* SUB0 **********/
/**sub0 subP banner**/
.sub0_ct {
    max-width: 1440px;
    margin: 0px auto 100px auto;/*nav height*/
/*    border: 1px solid red;*/
}
.sub0_ct .sub_main {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 100%;
    height: 480px;
    margin: 0 auto 100px auto;
    overflow: hidden;
}
.sub_main.b1_1 {
    background-image: url(../images/sub1/sub1_main.jpg);
    background-position: 0 -150px;
}
.sub_main.b1_2 {
    background-image: url(../images/sub2/sub2_main.jpg);
    
}
.sub_main.b1_3 {
    background-image: url(../images/sub3/sub3_main.png);
}
.sub_main.b2_1 {
    background-image: url(../images/2sub_1/smart_main.jpg);
}
.sub_main.b3_1 {
    background-image: url(../images/3sub_1/3sub_1_main2.PNG);
}
.sub_main.b4_1 {
    background-image: url(../images/4sub_1/main0.jpg);
}

.sub_main h1 {
    background: rgba(119, 147, 194, 0.5);
    text-align: right;
    padding: 10px;
    position: absolute;
    width: 100%;
    bottom: 0;
    right: 0;
    font-size: 2.8em;
/*    font-family: 'Noto Sans KR';*/
}
.sub_main span{
    font-size: 0.5em;
    color: #333;
}

/*** sub0 ct***/
.sub0m_ct1 {
    text-align: center;/*h1 위치*/
}
.sub0m_ct1 h1 {
    width: 90%;
    display: inline-block;
    text-align: center;
    padding: 0 10px;
    line-height: 180%;
    font-family: 'NanumSquare';
}
.sub0m_ct { /*m ver*/
    width: 90%;
    margin: 0 auto;
}
.sub0m_ct .part {/**공통**/
    margin: 150px 0;
    position: relative;
}
.part:nth-of-type(1) {
    margin-bottom: 200px;
}
.part h2 { /***공통**/
    font-size: 1.9em;
    margin-bottom: 10px;
    border-left: 10px solid #004580;
    padding-left: 20px;
}
.part h3 { /**공통**/
    margin-left: 20px;
}
.part_wrap {
    width: 900px;
    margin: 50px auto;
    position: relative;
}
.part .txt{
    display: inline-block;
    position: absolute;
}
.part .txt span {
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
}
.c1 {
    color: #93b0b0;
}
.c2 {
    color:#286285;
}
.c3 {
    color: #5285a8;
}
.part .txt:nth-of-type(1) {
    top: 50px;
    left: 50px;
}
.part .txt:nth-of-type(2) {
    top: 180px;
    right: -60px;
}
.part .txt:nth-of-type(3) {
    bottom: -50px;
    right: 200px;
}
.part:nth-child(1) .part_img {
    width: 500px;
    margin: 0 auto;
}

/*****part2*****/
.part_ct {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}
.part_txt {
    margin-bottom: 50px;
}
.mes_ct {
    margin: 10px;
    width: 30%;
    text-align: center;
/*    overflow: hidden;*/
}
.mes_ct a {
    display: inline-block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    max-width: 250px;
    max-height: 250px;
    overflow: hidden;
}
.mes_ct a img {
    border:1px solid;
    width: auto;
    height: 100%;
}
.mes_ct>p:nth-child(2) {
    font-size: 1.3em;
}
.mes_ct .pop {
    background: rgba(0,0,0,0.5);
    width: 70%;
    height: 200px;
    z-index: 111;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-flow: column;
    justify-content: center;
    border-radius: 20px;
    box-shadow: 0px 0px 20px #fff;
    z-index: 888;
    opacity: 0;   
}
.mes_ct .pop p{
    padding: 5px;
    color: white;
    font-size: 1.3em;
    font-weight: bold;
/*    background: rgba(0,0,0,0.5);*/
}


/*****par3-4*****/
.part:nth-child(3) .part_img {
    max-width: 900px;
    min-width: 300px;
    margin: 0 auto;
}
.sub1 .part:nth-of-type(4) {
    margin: 100px 0;
}
.part2_ct {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 50px 0;
}
.mes2_ct {
    width: 50%;
    display: flex;
    align-items: center;
}
.mes_list {
    border-radius: 10%;
    max-width: 200px;
}
.mes2_txt {
    flex: 2;
    padding: 10px;
}
.mes2_txt p:nth-child(1) {
    font-weight: bold;
    font-size: 1.1em;
    line-height: 200%;
}

/***** part5 *****/
.sub1 .part:nth-of-type(5) {
    margin: 100px 0;
}
.part_link {
/*    background-image: url(../images/sub1/sf.JPG);*/
    box-shadow: 10px 10px 0 rgba(119, 147, 194, 0.5);
;
    width: 800px;
    height: 320px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.part_link img {
    opacity: 0.7;
    height: 100%;
}
.link_txt {
    position: absolute;
    bottom: -0px;
    background: rgba(255,255,255,0.8);
    width: 100%;
    padding: 10px;
    text-align: right;
}
.link_txt a {
    border: 1px solid #fff;
    display: inline-block;
    font-weight: bold;
    padding: 10px;
    margin-top: 10px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    transition: 0.5s;
}
.link_txt a:hover {
    background: #004580;
}


/*** sub1_1_1 ct1***/
.sub0_ct1 {
    margin-left: 20px;
}
.sub0_ct1 h1 {
    display: inline-block;
    width: 500px;
    padding: 20px 0;
    border-top: 3px solid #004580;
    
}
.sub_ct {
    width: 90%;
    margin: 100px auto 0 auto;
}
.sub_ct_dt {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 350px;
}
.sub_dt_img {
    width: 60%;
    height: 100%;
    overflow: hidden;
}
.sub_dt_img img {
    height: 100%;
}
.sub_ct_dt p {
    padding: 0 10px;
    border-right: 3px solid #004580;
    width: 40%;
    height: 50px;
    text-align: right;
    font-size: 1.3em;
    font-weight: bold;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/****** sub1_2 ******/
.dd_ct {
    text-align: center;
    font-size: 0;
}
.dd_img {
    width: 45%;
    max-width: 500px;
    display: inline-block;
    box-shadow: -15px -15px rgba(119, 147, 194, 0.3);
    
}
.dd_img.right {
    position: relative;
    top: 50px;
    box-shadow: 15px 15px rgba(119, 147, 194, 0.3);
}


/****** sub1_3 ******/
.part_txt.sub3 span {
    color: #7793c2;
    font-weight: bold;
    font-family: 'Noto Sans KR';
}
.od_ct {
    width: 100%;
    font-size: 0;
    text-align: center;
}
.part:nth-child(1) .od_img {
    width: 45%;
    max-width: 500px;
    display: inline-block;
    box-shadow: -15px -15px rgba(119, 147, 194, 0.3);
}
.part:nth-child(1) .od_img.right {
    position: relative;
/*    top: 50px;*/
    box-shadow: 15px 15px rgba(119, 147, 194, 0.3);
}
.part:nth-child(2) .od_ct {
    text-align: center;
    background-image: url(../images/sub3/od2_bg1.PNG);
    background-size: cover;
    padding: 90px 0px 25px 0;
    width: 80%;
    margin: 0 auto;
    box-shadow: 15px 15px rgba(119, 147, 194, 0.3);
}
.part:nth-child(2) .od_img:nth-child(1) {
    display: inline-block;
    width: 60%;
    overflow: hidden;
}
.part:nth-child(2) .od_img.sub3 {
    position: relative;
    background: #fff;
    width: 95%;
    display: flex;
    justify-content: center;
    margin: 25px auto 0 auto;
    overflow: hidden;
}
.od_img.sub3 a {
    flex: 1;
}
.part:nth-child(3) .od_ct {
    width: 95%;
    margin: 0 auto;
    display: flex;
    
}
.part:nth-child(3) .od_img {
    flex:1;
}
.part:nth-child(3) .od_img:nth-child(1) {
    box-shadow: -15px -15px rgba(119, 147, 194, 0.3);
    
}
.part:nth-child(3) .od_img:nth-child(2) {
    box-shadow: 15px 15px rgba(119, 147, 194, 0.3);
    
}



/****** sub2_1 ******/
.smart .part {
    margin: 100px 0;
}
.smart .part:nth-child(1) h3 {
    font-size: 1.3em;
    line-height: 250%;
    margin-left: 0;
    width: 100%;
    text-align: right;
}
.smart .part:nth-child(1) h3 span {
    font-size: 1.2em;
    font-weight: bold;
    color: rgba(0, 69, 128, 0.8); 
}
.smart .part:nth-child(1) h3 span.s1 {
    color: #333;
}
.smart .smf_effect {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
}
.smart .smf_effect .ef {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1.2em;
    letter-spacing: -2px;
    border: 8px double #fff;
}
.smart .smf_effect .ef:nth-child(1) {
    background: #4ad6bb;
}
.smart .smf_effect .ef:nth-of-type(3) {
    background: #28b298;
}
.smart .smf_effect .ef:nth-of-type(5) {
    background: #4c9dd4;
}
.smart .smf_effect .ef:nth-of-type(7) {
    background: #3f4edd;
    box-shadow: 0 0 20px #999;
/*    color: #fff;*/
}
.smart .smf_effect p {
    width: 100%;
    text-align: center;
}
.smart .smf_effect .ef2 {
/*    font-weight: bold;*/
    font-size: 2em;
}
.smart .smf_effect .ef2:nth-child(2) {
    color: #28b298;
}
.smart .smf_effect .ef2:nth-child(4) {
    color: #4c9dd4;;
}
.smart .smf_effect .ef2:nth-child(6) {
    color: #3f4edd;;
}

.smart .part_txt span {
    color: rgba(0, 69, 128, 0.9); 
}

.kosmo {
    text-align: center;
    margin-top: 100px;
    
}
.kosmo a {
    position: relative;
    display: inline-block;
    width: 70%;
    border: 1px solid #ccc;
    box-shadow: 10px 10px 0 rgba(119, 147, 194, 0.5);
}
.kosmo p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px;
    box-shadow: 0 0 10px #7793c2;
    background: rgba(255, 255, 255, 0.3);
    font-size: 1.1em;
}
.kosmo p:hover {
    background: rgba(0, 0, 0, 0.3);
    color: #efefef;
}

.part .support {
    margin: 30px;
}
.part .support h3 {
    margin-left: 0;
}
.part .support span {
    font-size: 0.9em;
    color: tomato;
}


/****** sub3_1 ******/
.design .part:nth-child(1) h3 {
    font-size: 1.3em;
    line-height: 250%;
    text-align: center;
    font-weight: normal;
}
.design .part:nth-child(1) span {
    font-size: 1.15em;
    font-weight: bold;
}

.part.design h2{
    width: 50%;
    border-left: none;
    border-bottom: 5px solid rgba(119, 147, 194, 0.5);
    padding-bottom: 10px;
    padding-left: 0;
}

.design_cst {
    display: flex;
    justify-content: center;
    width: 95%;
    margin: 100px auto;
    overflow: hidden;
}
.design_cst .cst {
    flex: 1;
    height: 700px;
    color: #fff;
}
.design_cst .cst p:nth-child(1) {
    font-size: 1.5em;
    margin: 10px;
}
.design_cst .cst p:nth-child(2) {
    font-size: 2em;
    font-weight: bold;
}

.design_cst .cst:nth-child(1) {
    background-image: url(../images/3sub_1/en_d.jpg);
    background-size: cover;
}
.design_cst .cst:nth-child(2) {
    background-image: url(../images/3sub_1/pb_d.jpg);
    background-size: cover;
    box-shadow: -5px 0px 50px #000;
}
.design_cst .cst:nth-child(3) {
    background-image: url(../images/3sub_1/nail_d.jpg);
    background-size: cover;
    box-shadow: -5px 0px 50px #000;
}
.cst_cover {
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    padding: 20px;
}
.cst_cover:hover {
    background: none;
}

/** project **/
.pj_img {
    display: flex;
    margin-bottom: 30px;
    position: relative;
}
.pj_img a {
    flex: 1;
}
.pj_img  .pj_text {
    flex: 0.5;
}
.pj_img .pj_text p {
    margin: 10px 30px;
}

.pj_img_list {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
}
.pj_img_list a {
    width: 150px;
    height: 150px;
    padding: 5px;
    margin-right: 10px;
    box-shadow: 5px 5px 5px #ccc;
}





/***** SUB4 *****/
.bak .part {
/*    margin: 100px 0;*/
}
.bak .part h3 {
    font-size: 1.5em;
    line-height: 200%;
    margin-left: 0;
/*    text-align: center;*/
}
.part.bak h2{
    width: 50%;
    border-left: none;
    border-top: 3px solid rgba(119, 147, 194, 0.5);
    padding-bottom: 10px;
    padding: 10px;
/*    background: rgba(119, 147, 194, 0.2);*/
/*    text-align: center;*/
}

/*
.part.bak:nth-child(2) .bak_cst {
    background-image: url(../images/4sub_1/main2_1.jpg);
    height: 700px;
    background-repeat: no-repeat;
    background-size: cover;
}
*/
.part.bak:nth-child(3) .bak_cst {
    background-image: url(../images/4sub_1/main1.JPG);
    height: 700px;
    background-repeat: no-repeat;
    background-size: cover;
}
.bak_cst .bak_img {
    position: relative;
    margin-bottom: 50px;
}
.bak_cst .bak_img p {
    font-size: 1.6em;
    line-height: 180%;
    padding: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    letter-spacing: -1px;
    text-shadow: 0 0 10px #fff;
}
.part.bak .bak_cst span {
    font-weight: bold;
}

.bak_kit1 {
    margin-top: 30px;
    display: flex;
    padding: 10px;
    justify-content: space-around;
}
.bak_kit1 a {
    flex: 1;
    padding: 15px;
    text-align: center;
}


/****************************************************/
/********** TABLET **********/
@media all and (max-width: 768px) {
    /***** HEADER *****/
    header {
        height: 60px;
    }
    .logo {
        width: 35px;
        left: 50%;
        transform: translateX(-50%);
    }
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(0);
        width: 100%;
        height: 100%;
        margin-left: -100%;
        background: rgba(0,0,0,0.5);
    }
    .nav ul {
        display: block;
        text-align: left;
        margin-top: 70px;
    }
    .nav ul li a {
        color: #fff;
    }
    .nav ul li ul {
        background: none;
        margin-top: 0;
    }
    .nav ul li ul li a {
        padding: 10px 20px; 
    }
    
    .m_btn {
        position: absolute;
        width: 30px;
        height: 40px;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        padding: 10px 4px;
        z-index: 9999;   
        }
    .m_btn span, .m_btn::before, .m_btn::after {
        content: "";
        display: block;
        background: #00001d;
        width: 100%;
        height: 2px;
        margin-bottom: 6px;
        border-radius: 5px;
        transition: 0.5s;
    }
    .m_btn.on span {
        opacity: 0;
    }
    .m_btn.on::before {
        transform: rotate(45deg);
        margin-top: 9px;
    }
    .m_btn.on::after {
        transform: rotate(-45deg);
        margin-top: -16px;
    }
    
    /***** CONTENTS *****/    

    /*** slide ***/
    .slider h1 {
        font-size: 1.4em;
    }
    
/*    이미지 사이즈 변경 텍스트*/
    
    /*** m_ct ***/
    .main_ct {
        margin-top: 100px;
        padding: 0 10px;
    }
    .main_ct .m_ct h1 {
/*        width: auto;*/
        font-size: 1.5em;
        width: 80%;
    }
    .m_ct:nth-child(2) {
        margin-top: 100px;
        margin-left: 0;
    }
    .m_ct:nth-child(2) h1 {
        width: 60%;
    }
    .m_ct_img {
        width: 80%;
    }
    .m_ct_dt {
        width: 100%;
    }
    .m_ct_dt:nth-of-type(2) {
/*        정렬 통일*/
        transform: translateX(0);  
    }
    .dt_txt {
        flex: 0.5;
        font-size: 0.7em;
        letter-spacing: -1px;
    }
    .dt_txt p:nth-of-type(1) {
        display: none;
    }
    .m_ct_dt:nth-of-type(2) {
        text-align: right;
    }
/*
    .dt_txt:nth-child(2) { 선택자 위치에 따른 범위 확인할것
        border: 1px solid red;
    }
*/
    /* top_btn tablet */
    #top_btn {
        display: none;
    }
    
    /*** footer tablet ***/
    .foot_ct {
        flex-flow: column;
        text-align: center;
    }
    .foot_ct1 p:nth-child(1) {
        border: 1px solid rgba(0,0,0,0.1);
        padding: 10px;
    }
    .foot_ct1:nth-child(2) {
        margin: 15px 0 10px 0;
    }
    .foot_dt p {
        display: block;
    }
    
    /*** sub1 ***/
    .sub0_ct .sub_main span{
        display: none;
    }
    .sub0m_ct {
        width: 96%;
    }
    .sub_main h1 {
        font-size: 2em;
        letter-spacing: -1px;
    }
    .sub0m_ct1 h1 {
        font-size: 1.4em;
        letter-spacing: -2px;
        padding: 0;
    }
    .sub0m_ct .part {
        margin: 100px 0;
    }
    .part h2 {
        font-size: 1.5em;
    }
    .part_wrap {
        width: 100%;
        display: flex;
        flex-flow: column-reverse;
        overflow: hidden;
    }
    .part:nth-child(1) .part_img {
        position: relative;
        text-align: center;
        width: 80%;
    }
    .part_wrap .txt {
        position: static;
        border: 1px solid #004580;
        border-radius: 15px;
        margin: 10px auto;
        padding: 5px;
        width: 75%;
    }
    .part_wrap .part_img img {
        display: inline-block;
        width: 80%;
        margin-left: 30px;
    }
    .mes_ct {
        width: 100%;
        position: relative;
    }
    .mes_ct a {
        width: 200px;
        height: 200px;
    }
    .mes_ct>p:nth-child(2) {
        font-size: 1em;
    }
    .mes_ct .pop {
        width: 100%;
        height: 100%;
        font-size: 0.8em;
    }
    
    .part2_ct {
        justify-content: center;
    }
    .mes2_ct {
        flex-flow: column;
        text-align: center;
        letter-spacing: -2px;
    }
    .mes2_ct:nth-child(5) {
        width: 100%;
    }
    .part_link {
        width: 100%;
    }
    .part_link img {
        width: auto;
    }
    .link_txt h1 {
        font-size: 1em;
    }
    .link_txt a {
        font-size: 0.8em;
    }
    
    /*** sub1_1_1 ***/
    .sub0_ct1 {
        margin-left: 5px;
    }
    .sub0_ct1 h1 {
        font-size: 1.5em;
        width: 90%;
    }
    .sub_ct_dt {
        flex-flow: column;
        align-items: center;
    }
    .sub_dt_img {
        width: 90%;
    }
    .sub_ct_dt p {
        width: 90%;
        height: 100px;
        border: none;
        background: rgba(119, 147, 194, 0.2);
        letter-spacing: -1px;
    }

    
/*** sub1_3 tablet***/
    .part:nth-child(3) .od_ct {
        width: 90%;
        
    }
}


/*********************************************/
/********** MOBILE **********/
/***main***/
@media all and (max-width: 420px) {
    /*** slide ***/
    .slide {
        height: 410px;
    }
    .slider h1 {
        font-size: 1.1em;
    }
    .slide:nth-child(1) h1 {
        right: 5%
    }
    .slider:nth-child(2) h1 {
        top: 5%;
    }
    
    /*top_btn*/
/*
    #top_btn {
        width: 35px;
        height: 35px;
    }
    #top_btn span, #top_btn::before, #top_btn::after {
        top: 3px;
    }
    #top_btn span {
        margin-top: 0px;
    }
    #top_btn::before {
        margin-left: 8px;
    }
    #top_btn::after {
        margin-left: 0px;
        margin-top: -14px;
    }
*/


    /*** sub1 ***/
    .part:nth-child(1) .part_img {
        width: 100%;
    }
    .part_wrap .txt {
        width: 100%;
    }
    .mes2_ct {
        width: 100%;
    }
    
    /*** sub1_1 ***/
    .sub_main.b1_1 {
        background-position : center;
    }
    /*** sub1_1_1 ***/
    .sub_dt_img {
        width: 100%;
    }
    .sub_ct_dt p {
        width: 100%;
        font-size: 1.1em;
    }
    /*** sub1_2 ***/
    .sub0m_ct1.sub2 h1 {
        font-size: 1.2em;
    }
    
    /*** sub1_3***/
    .part:nth-child(2) .od_ct {
        width: 90%;
        padding-bottom: 10px;
    }
    .part:nth-child(2) .od_img:nth-child(1) {
        width: 95%;
    }
    
    
    
}