@charset "utf-8";
/* A/S 안내 */
.as-box { margin-bottom: 60px; border: 1px solid #ddd; border-top: 1px solid #242424; padding: 40px 60px; background: #fafafa;}
.as-fx { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 40px; }
.as-fx .circle { width: 130px; height: 130px; background: #fff; border: 3px solid #ba1c24; padding: 24px 0; text-align: center; border-radius: 100%; box-shadow: 3px 3px 8px rgba(0,0,0,0.3);}
.as-fx .circle .txt { line-height: 1.5em; font-size: 15px; font-weight: 700; letter-spacing: -.03em; color: #ba1c24; margin-top: 13px;}
.as-fx .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 25px; }
.as-fx .txtbox .tit { line-height: 1.6em; font-size: 18px; font-weight: 300; letter-spacing: -.03em; color: #454545; margin-bottom: 25px;}
.as-fx .txtbox .tit span { font-weight: 600; color: #242424;}
.as-fx .txtbox .txt { font-size: 16px; font-weight: 300; letter-spacing: -.03em; line-height: 1.4em; color: #898989;}
.as-fx .txtbox .txt span { color: #ba1c24; text-decoration: underline; text-underline-position: under;}
.as-list { display: flex; gap: 60px; padding: 0 45px; flex-wrap: wrap; position: relative;}
.as-list:after { content: ""; position: absolute; left: 0; right: 0; margin: auto; top: 50%; transform: translateY(-50%); width: 90%; height: 1px; background: #ddd; z-index: 0;}
.as-list li { width: calc(100%/5 - 48px); text-align: center; border: 1px solid #ddd; border-radius: 20px;  background: #fff; padding: 28px 0 21px; position: relative; z-index: 1;}
.as-list li::after { content: ""; top: 0; bottom: 0; margin: auto; width: 5px; height: 8px; background: url(../images/sub/sub3-right.png) center no-repeat; background-size: contain; right: -33px; position: absolute;}
.as-list li .tit { font-size: 18px; font-weight: 600; line-height: 1em; color: #242424; letter-spacing: -.03em; margin-top: 15px; }
.as-list li:last-child::after { display: none; }
.as-list li .num { width: 30px; height: 30px; position: absolute; border-radius: 100%; top: -15px; left: 0; right: 0; margin: auto; display: flex; align-items: center; justify-content: center; color: #fff; line-height: 1em; font-size: 15px; font-weight: 600; letter-spacing: -.03em; background: #ba1c24;}
.as-list li:nth-of-type(even) .num { background: #242424; }

/* 공통 */
.sub-pd { padding: 100px 0;}
.sub-pd.gray { background: #fafafa;}
.subtit { font-size: 28px; line-height: 1em; font-weight: 700; color: #242424; letter-spacing: -.03em; position: relative; padding-left: 45px; padding-bottom: 20px; border-bottom: 1px solid #242424; margin-bottom: 40px; }
.subtit::before { content: ""; position: absolute; left: 0; width: 36px; height: 26px; background: url(../images/sub/tit-bf.png) center no-repeat; background-size: contain;}

/* NGI 소개 */
.it-sec1 { padding-bottom: 100px; }
.it-bg { padding: 50px; background: url(../images/sub/sub4-1-big.jpg) center no-repeat; background-size: cover; margin-bottom: 50px;}
.it-bg .inner { border: 1px solid rgba(255,255,255,0.5); text-align: center; color: #fff; padding: 60px 10px; }
.it-bg .inner h3 { line-height: 1em; font-size: 28px; font-weight: 600; letter-spacing: -.03em; margin-bottom: 30px; }
.it-bg .inner .spanbox { display: flex; gap: 10px 35px; justify-content: center;}
.it-bg .inner .spanbox span { display: inline-block; font-size: 18px; line-height: 1.5em; font-weight: 500; letter-spacing: -.03em;} 
.it-fx { display: flex; align-items: flex-start;}
.it-fx .left { width: 35%; padding-left: 20px; padding-right: 25px;}
.it-fx .left h2 { font-size: 32px; font-weight: 600; line-height: 1.5em; letter-spacing: -.03em; color: #242424; margin-bottom: 50px; }
.it-fx .left h2 span { font-weight: 700; color: #ba1c24; }
.it-fx .right { width: 65%; padding-top: 7px;}
.it-fx .right p { margin-bottom: 20px; font-weight: 300;}
.it-fx .right p:last-child { margin-bottom: 0; }
.it-list { display: flex; gap: 40px 30px; flex-wrap: wrap; }
.it-list li { width: calc(100%/3 - 20px); text-align: center; }
.it-list li .tit { font-size: 18px; font-weight: 600; line-height: 1.3em; letter-spacing: -.03em; color: #242424; margin-top: 20px; }
.it-list li .thumb {position:relative; padding-bottom:141%;overflow:hidden;}
.it-list li .thumb>img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:contain;}
.it-list li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}

/* 총판업체 안내 */
.im-fx { display: flex; align-items: center; border-top: 1px solid #242424; padding: 60px 40px; }
.im-fx .left { width: 55%; padding-right: 25px; }
.im-fx .left h2 { font-size: 32px; font-weight: 600; letter-spacing: -.03em; color: #242424; line-height: 1.5em; margin-bottom: 45px; }
.im-fx .left h2 span { color: #253b90; font-weight: 700;}
.im-fx .left p { margin-bottom: 20px; }
.im-fx .left p:last-child { margin-bottom: 0; }
.im-fx .right { width: 45%; border: 1px solid #ddd; height: 360px; display: flex; align-items: center; justify-content: center; }
.root_daum_roughmap {width:100% !important;}
.directions {margin-top:50px; display: flex; align-items: flex-start;}
.directions .address-info { width: 55%; padding-left: 40px;}
.directions .address-info .comp {color:#253b90; font-weight:600; margin-bottom:2px;}
.directions .address-info .addr {color:#242424; font-size:20px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {line-height:1.5em; width: 45%; }
.directions .contact-info dl {display:flex; padding:15px 0; }
.directions .contact-info dt {width:160px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:#ababab;}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}