@charset "UTF-8";

@import url("/sites/hallym/style/css/w_reset.css");
@import url("/Web-home/_UI/css/common/font.css");


.intro-wrap{background-color: white; position: relative; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; height: 100%;}
.intro-wrap .intro-inner{max-width: 1640px; padding: 0 20px; margin: 0 auto; width: 100%; position: relative; z-index: 2;}
.intro-header{text-align: center;}
.intro-header .intro-header-text h1{font-size: 50px; color: #000000; font-family: "SBA Medium"; margin: 48px 0 24px;}
.intro-header .intro-header-text h1 span{color: #1174ff;}
.intro-header .intro-header-text p{font-size: 30px; color: #000000; font-family: "SBA Medium";}
.intro-header .intro-header-text p span{color: #1174ff;}

.intro-content{margin-top: 51px;}
.intro-content ul{display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -10px;}
.intro-content li{width: 20%; padding: 0 10px;}
.intro-content .intro-content-inner{border-radius: 15px; position: relative; box-shadow: 4px 0 17px rgba(0,0,0,.15); overflow: hidden; transition: all .5s}
.intro-content li.hover .intro-content-inner{box-shadow: 4px 0 17px rgba(0,0,0,.5);}
.intro-content .intro-content-image{display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; height: 190px;}
.intro-content .intro-content-text{text-align: center; padding: 23px 0 30px; background-color: white;}
.intro-content .intro-content-text span{font-size: 16px; font-family: "SBA Light";}
.intro-content .intro-content-text h1{font-size: 30px; font-family: "SBA Light";}
.intro-content .intro-content-text .intro-content-link{display: inline-block; font-size: 13px; color: #ffffff; font-family: "SBA Light"; max-width: 180px; width: 100%; border-radius: 20px; text-align: left; padding: 12px 25px 8px; margin-top: 16px; position: relative;}
.intro-content .intro-content-text .intro-content-link::after{content:""; display: block; position: absolute; right: 25px; top: 50%; margin-top: -5px; width: 10px; height: 10px; background: url(../images/more_white.png) no-repeat center center / cover; transition: all .5s; transform: rotate(0deg);}
.intro-content .intro-content-text .intro-content-link:hover::after{transform: rotate(180deg);}
.intro-content .intro-content-box {text-align: center; border-radius: 15px; overflow: hidden; box-shadow: 4px 0 17px rgba(0,0,0,.15); height: 47.13%; transition: all .5s}
.intro-content .intro-content-box.hover{box-shadow: 4px 0 17px rgba(0,0,0,.5);}
.intro-content .intro-content-box > div{display: flex; align-items: center; height: 71.4%; flex-direction: column; justify-content: center; padding: 51px 0 34px;}
.intro-content .intro-content-box span{font-size: 18px; color: #ffffff; font-family: "SBA Light";}
.intro-content .intro-content-box h1{font-size: 24px; color: #ffffff; font-family: "SBA Light";}
.intro-content .intro-content-box .intro-content-box-link{display: block; background-color: white; position: relative; z-index: 2; text-align: center; border-radius: 0 0 15px 15px; height: 28.6%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.intro-content .intro-content-box .intro-content-box-link span{font-size: 13px; display: inline-block; font-family: "SBA Light"; padding-right: 30px; position: relative;}
.intro-content .intro-content-box .intro-content-box-link span::after{content:""; display: block; position: absolute; right: 0; top: 50%; margin-top: -7px; width: 10px; height: 10px; background-repeat: no-repeat; background-size: cover; background-position: center center; transform: rotate(0deg); transition: all .5s;}
.intro-content .intro-content-box .intro-content-box-link:hover span::after{transform: rotate(180deg);}

.intro-content .intro-content-box .box1{background-color: #1174ff;}
.intro-content .intro-content-box.box1 .intro-content-box-link span{color: #1174ff;}
.intro-content .intro-content-box.box1 .intro-content-box-link span::after{background-image: url(../images/more_blue.png);}
.intro-content .intro-content-box .box2{background-color: #00b6ad;}
.intro-content .intro-content-box.box2 .intro-content-box-link span{color: #00b6ad;}
.intro-content .intro-content-box.box2 .intro-content-box-link span::after{background-image: url(../images/more_green.png);}

.intro-content li.type1 .intro-content-image{background-color: #1174ff;}
.intro-content li.type1 .intro-content-text span{color: #1174ff;}
.intro-content li.type1 .intro-content-text h1{color: #1174ff;}
.intro-content li.type1 .intro-content-text .intro-content-link{background-color: #1174ff;}

.intro-content li.type2 .intro-content-image{background-color: #00b6ad;}
.intro-content li.type2 .intro-content-text span{color: #00b6ad;}
.intro-content li.type2 .intro-content-text h1{color: #00b6ad;}
.intro-content li.type2 .intro-content-text .intro-content-link{background-color: #00b6ad;}

.intro-content li.type3 .intro-content-image{background-color: #0066b3;}
.intro-content li.type3 .intro-content-text span{color: #0066b3;}
.intro-content li.type3 .intro-content-text h1{color: #0066b3;}
.intro-content li.type3 .intro-content-text .intro-content-link{background-color: #0066b3;}

.intro-content li.type4 .intro-content-image{background-color: #ff8400;}
.intro-content li.type4 .intro-content-text span{color: #ff8400;}
.intro-content li.type4 .intro-content-text h1{color: #ff8400;}
.intro-content li.type4 .intro-content-text .intro-content-link{background-color: #ff8400;}

.intro-content li.type5{display: flex; flex-direction: column; justify-content: space-between;}

.intro-footer{margin-top: 80px;}
.intro-footer .intro-link ul{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px;}
.intro-footer .intro-link li{width: 41px; height: 41px; background-repeat: no-repeat; background-position: center}
.intro-footer .intro-link li a{width: 100%; height: 100%; font-size: 0; display: block;}
.intro-footer .intro-link li.fb{background-image: url(../images/sns_1.png)}
.intro-footer .intro-link li.insta{background-image: url(../images/sns_2.png)}
.intro-footer .intro-link li.youtube{background-image: url(../images/sns_3.png)}
.intro-footer .intro-link li.blog{background-image: url(../images/sns_4.png)}

.intro-footer .intro-info ul{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 -14px; margin-top: 17px;}
.intro-footer .intro-info li{font-size: 14px; color: #787878; font-family: "HG Regular"; padding: 0 14px;}

.intro-footer .intro-copyright{font-size: 12px; color: #787878; font-family: "HG Regular"; text-align: center; margin-top: 5px;}

.intro-deco_1{width: 487px; height: 325px; position: absolute; right: 0; bottom: 0; background: url(../images/intro_background.png) no-repeat center center / cover; z-index: 1;}
.intro-deco_2{width: 476px; height: 425px; position: absolute; right: 0; top: 0; background: url(../images/intro_background_2.png) no-repeat center center / cover; z-index: 1;}
.intro-deco_3{width: 421px; height: 354px; position: absolute; left: 5.5%; top: 7.5%; background: url(../images/intro_background_3.png) no-repeat center center / cover; z-index: 1;}
.intro-deco_4{width: 576px; height: 224px; position: absolute; left: 0; bottom: 0; background: url(../images/intro_background_4.png) no-repeat center center / cover; z-index: 1;}

@media screen and (max-width: 1300px) {
  .intro-content .intro-content-text span{font-size: 14px;}
  .intro-content .intro-content-text h1{font-size: 20px;}
  .intro-content .intro-content-text .intro-content-link{max-width: 130px;}
  .intro-content .intro-content-box span{font-size: 14px;}
  .intro-content .intro-content-box h1{font-size: 20px;}
  .intro-content .intro-content-image img{transform: scale(0.7);}
}

@media screen and (max-width: 1000px) {
  .intro-wrap{height: auto; padding: 30px 0;}
  .intro-header img{width: 200px;}
  .intro-header .intro-header-text h1{font-size: 35px; margin: 20px 0 10px;}
  .intro-header .intro-header-text p{font-size: 20px;}
  .intro-content{margin-top: 30px}
  .intro-content ul{margin-top: -20px;}
  .intro-content li{width: 50%; margin-top: 20px;}
  .intro-content li.type5{width: 100%; flex-direction: row; flex-wrap: wrap; margin-top: 10px;}
  .intro-content .intro-content-image{height: 150px;}
  .intro-content .intro-content-box{height: auto; width: 100%; margin-top: 10px;}
  .intro-content .intro-content-box > div{padding: 20px 0; height: auto;}
  .intro-content .intro-content-box .intro-content-box-link{height: auto; padding: 20px 0 13px;}

  .intro-deco_1{width: 393px; height: 246px;}
  .intro-deco_2{width: 300px; height: 272px;}
  .intro-deco_3{width: 300px; height: 239px;}
  .intro-deco_4{width: 357px; height: 139px;}
}

@media screen and (max-width: 768px) {
  .intro-deco_1{width: 393px; height: 246px;}
  .intro-deco_2{width: 300px; height: 272px;}
  .intro-deco_3{width: 300px; height: 239px;}
  .intro-deco_4{width: 357px; height: 139px;}
}