@charset "utf-8";


/* sub_visual */

  #sub_visual {
    position: relative;
    box-sizing: border-box;
    z-index: 50;
    padding-top: 100px;
    }
  #sub_visual.col2 {
    background-color: #f5f5f5;
    }
  #sub_visual .slogan {
    display:table;
    width:100%;
    table-layout:fixed;
    box-sizing:border-box;
    padding: 42px 0 48px;
    }
  #sub_visual .slogan > .title_box{
    display:table-cell;
    vertical-align:middle;
    position: relative;
    padding: 0 20px;
    }
  #sub_visual .slogan .title_box > .bg_img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    transform: scale(1.2);
    }
  #sub_visual .slogan .title_box > .bg_img.on {
    transform: scale(1);
    }
.details{ margin:10px auto;width:30%;padding: 0px;text-align: center;border-top: 1px dashed #ccc;color: #808080;text-size: 8px;word-break: keep-all;}
  #sub_visual .slogan > .title_box .title {
    display:block;
    text-align: center;
    font-size: 32px;
	font-weight:bold;
    color: #111111;
    word-break: keep-all;
    margin-top:20px;
    }
  #sub_visual .slogan > .title_box .sub_tit {
    text-align: center;
    position: relative;
    margin-top: 23px;
    }
  #sub_visual .slogan > .title_box .sub_tit span {
    font-size: 20px;
    color: #0383a2;
    font-weight: 700;

    word-break: keep-all;
    word-break: keep-all;
    line-height: 29px;
    }

/* // sub_visual */


/* sub_page */
  #sub_page #container .inner_box {
    max-width: 1200px;
    width: calc(100% - 80px);
    margin: 0 auto;
    box-sizing: border-box;
    }
  #sub_page #container .box {
    padding-bottom: 140px;
    }
	#sub_page #container .inner_box img{width:100%}
  #sub_page #container .title_box {
    text-align: center;
    padding: 135px 0 63px;
    }
  #sub_page #container .title_box strong {
    font-size: 48px;
    color: #111111;
    font-weight: 800;
    word-break: keep-all;
    display: block;
    }
  #sub_page #container .title_box.col2 strong {
    color: #fff;
    }
  #sub_page #container .title_box p {
    font-size: 20px;
    color: #0383a2;
    font-weight: 700;
    word-break: keep-all;
    margin: 24px auto 0;
    }
  #sub_page #container .title_box.col2 p {
    color: #fff;
    }
  .sub_title_ment{
    font-size:13pt;
    padding-top:20px;
    line-height:30px;
	
    }
  .sub_bottom{
    margin-bottom:100px
    }
/* sub_page */



  .card_box_flex{
    display:flex;
    width:100%;
    box-sizing:border-box; 
    justify-content:center;
    flex-wrap: wrap;
    text-align: center;
    flex-direction:row;
align-items: stretch;
    }

  .card_box{
    display:flex;
    justify-content: flex-start;
    flex-direction:column;
    align-items:center;
    border:20px solid #F1F1F1;
    /*background-color:#FCFCFC;*/
    background: linear-gradient( 180deg, #f1f1f1, #e7e7e7 );
    border-radius:50px;
    /*
    margin:50px;
    flex-basis: 0;
    flex-grow: 1;
    flex:auto;
    */
    flex-basis: 0;
    flex-grow: 1;
    margin-right:40px;
    box-sizing:border-box;
    text-align: center;
    }

  .card_box:nth-child(2){
    background: linear-gradient( 0deg, #f1f1f1, #e7e7e7 );
    }
  .card_box:nth-child(3){
    margin-right:0px;
    }


  .card_box_title{
    font-size:18pt;
    font-family:'NanumSquareNeo';
    font-weight: 700;
    margin-top:50px;
    box-sizing: border-box;
    padding-top:10px;

    }
  .card_box_bar{
    margin: 10px 70px 0px 70px;
    padding-bottom:30px;
    border-top:3px solid #02AFDA;
    width:60px;
    }

  .card_box_con{
    font-size:14pt;
    font-family:'NanumSquareNeo';
    font-weight: 500;
    line-height: 25px;
    box-sizing: border-box;
    margin: 0px 30px 30px 30px;
    line-height:1.7em;
    }


  .panle_box{

    background: url(../images/sub/greeting.png) no-repeat ;
    overflow: hidden;
    /*height: 300px;*/
    box-sizing:border-box;
    margin-bottom:80px;
    }

  .panle_inner{
    margin-top:400px;
    display:flex;
    width:100%;
    box-sizing:border-box; 
    justify-content:center;
    /*border:1px solid #000000;*/
    }

  .panle_left_box{
    margin-left:50px;
    height:400px;
    background-color:#00AFDA;
    flex:1;
    top:-20px;
    padding:50px;
    box-sizing:border-box; 
    /* <offsetX> | <offsetY> | <blur-radius> | <spread-radius> | <color> */
    /*box-shadow: -10px 10px 5px 5px #D1F2FB;*/
    }

  .panle_left_box_title{
    color:#ffffff;
    font-size:22pt;
    font-weight:700;
    text-shadow: 2px 2px 2px gray; 
    margin-bottom:20px;
    }

  .panle_left_box_content{
    color:#ffffff;
    font-size:14pt;
    font-weight:400;
    text-shadow: 2px 2px 2px gray; 
    margin-bottom:20px;
    line-height:30px;
	text-align:justify;
    }

  .panle_center_box{
    margin-top:200px;
    margin-left:50px;
    margin-right:50px;
    flex:3;
	text-indent:2em;
    font-size:13pt;
    line-height:1.7em;

    }

  .panle_box_bg1{
    background: url(../images/sub/bg1.jpg) no-repeat center;
    background-position: top;
    }
  .panle_box_bg2{
    background: url(../images/sub/bg2.jpg) no-repeat center;
    background-position: top;
    }
  .panle_box_bg3{
    background: url(../images/sub/bg3.jpg) no-repeat center;
    background-position: top;
    }
  .panle_box_bg4{
    background: url(../images/sub/bg4.jpg) no-repeat center;
    background-position: top;
    }
	 .panle_box_bg5{
    background: url(../images/sub/bg5.jpg) no-repeat center;
    background-position: top;
    }

  .panle_box_bg6{
    background: url(../images/sub/bg6.jpg) no-repeat center;
    background-position: top;
    }
	.panle_box_bg7{
    background: url(../images/sub/bg7.jpg) no-repeat center;
    background-position: top;
    }
	.panle_box_bg8{
    background: url(../images/sub/bg8.jpg) no-repeat center;
    background-position: top;
    }




/* �ϴ� ��ư */
 .btn_bottom {
    font-size: 0;
     text-align: center;
     margin-top: 80px;
}

 .btn_bottom a {
    display: inline-block;
     width: 180px;
     line-height: 60px;
     font-size: 16px;
     color: #ffffff;
     font-weight: 700;
     word-break: keep-all;
     text-align: center;
     background-color: #00afda;
     margin-right:70px;
	 margin-top:10px;
}








  /* DESKTOP */
  @media all and (min-width:1025px){
    }
  /* ipad landscape  */
  @media all and (max-width:1024px){
  
    .panle_left_box{ flex:1; margin:0;  padding:20px; }
    .panle_center_box { flex:2;  }
    .card_box_flex{ flex-direction:column; }
    .card_box{  margin-right:0; margin-bottom:20px; width:100%;}
    .card_box_title{ margin-top: 20px; }
    .card_box_bar{  padding:0;}
    .card_box_con{ margin:10px;}
    }
  /* ipad portrait  */
  @media all and (max-width:768px){

    #sub_visual{ margin:0; padding-top:20px; }
    #sub_visual .slogan { margin:0; padding-bottom:20px; }
    #sub_visual .tab_box { margin: 0 auto 20px; }
    .panle_box{ margin:0; background: none;  flex-direction:column;}
    .panle_inner{ margin:0;flex-direction:column; }
    .panle_left_box{ margin:0;  padding:20px; }
    .panle_center_box { margin:20px; }
    .card_box_flex{ flex-direction:column; }
    .card_box{  margin-right:0; margin-bottom:20px;}
    .card_box_title{ margin-top: 20px; }
    .card_box_bar{  padding:0;}
    .card_box_con{ margin:10px;}
    }
  /* iphone6/7/8 landscape */
  @media all and (max-width:668px){
    #sub_visual{ margin:0; padding-top:20px; }
    #sub_visual .slogan { margin:0; padding-bottom:20px; }
    #sub_visual .tab_box { margin: 0 auto 20px; }
    .panle_box{ margin:0; background: none;  flex-direction:column;}
    .panle_inner{ margin:0;flex-direction:column; }
    .panle_left_box{ margin:0;  padding:20px; }
    .panle_center_box { margin:20px; }
    .card_box_flex{ flex-direction:column; }
    .card_box{  margin-right:0; margin-bottom:20px;}
    .card_box_title{ margin-top: 20px; }
    .card_box_bar{  padding:0;}
    .card_box_con{ margin:10px;}
    }
  /* iphone6/7/8 portrait */
  /*
  @media all and (max-width:375px){
    #sub_visual{ margin:0; padding-top:20px; }
    #sub_visual .slogan { margin:0; padding-bottom:20px; }
    #sub_visual .tab_box { margin: 0 auto 20px; }
    .panle_box{ margin:0; background: none;  flex-direction:column;}
    .panle_inner{ margin:0;flex-direction:column; }
    .panle_left_box{ margin:0;  padding:20px; }
    .panle_center_box { margin:20px; }
    .card_box_flex{ flex-direction:column; }
    .card_box{  margin-right:0; margin-bottom:20px;}
    .card_box_title{ margin-top: 20px; }
    .card_box_bar{  padding:0;}
    .card_box_con{ margin:10px;}
    }
    */